如何在 Blogger 中添加 HTML 站点地图（4 种新样式）
已发表: 2024-10-21您想要在您的 Blogger 网站上添加 HTML 站点地图页面吗？那么您可以按照这篇文章来做到这一点。在这里，我将分享 Blogger 的 4 种新 HTML 站点地图样式。
但在此之前我们先来了解一下什么是 HTML 站点地图？
HTML 站点地图是一种网页，提供指向网站上最重要页面或部分的链接列表，以结构化方式组织。它可以帮助访问者和搜索引擎轻松查找和导航网站上的内容。
何时使用 HTML 站点地图：
- 对于结构复杂或页面较多的网站。
- 如果您想通过提供一种简单的内容查找方式来改善用户体验。
- 出于SEO 目的，作为帮助搜索引擎导航您的网站的额外帮助。
通过使用 HTML 和 XML 站点地图，您可以增强站点对用户的可用性，并确保搜索引擎正确建立索引。
如何在 Blogger 中添加 HTML 站点地图？
要将 HTML 站点地图添加到 Blogger 网站，您需要登录 Blogger 仪表板并转到页面部分。
现在创建一个新页面并设置标题 HTML 站点地图，或者您可以将其保留为站点地图。
现在您需要复制任意一种 HTML 站点地图样式并将其粘贴到页面的 HTML 部分。
现在您需要将演示 URL 替换为您的网站 URL 并发布页面。现在您已成功将 HTML 站点地图添加到您的 Blogger 网站。
样式-01（纯 HTML SItemap）
<ul></ul>
<脚本类型=“文本/javascript”>
var numposts = 100； // 如果您的帖子超过 100 个，请更改此值
函数显示最近的帖子（json）{
var sitemap = document.getElementById("sitemap");
for (var i = 0; i < json.feed.entry.length; i++) {
var 条目 = json.feed.entry[i];
var posttitle = Entry.title.$t;
var posturl;
for (var k = 0; k < 条目.link.length; k++) {
if (entry.link[k].rel == '替代') {
posturl = Entry.link[k].href;
休息;
}
}
var listItem = document.createElement("li");
listItem.innerHTML = `<a href="${posturl}">${posttitle}</a>`;
sitemap.appendChild(listItem);
}
}
var script = document.createElement("script");
脚本.src = " https://example.com /feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
document.body.appendChild(脚本);
</脚本>
<风格>
#站点地图{
列表样式类型：无；
填充：0；
保证金：0；
保证金：自动；
背景颜色：#f8f9fa；
边框半径：5px；
盒子阴影: 0 2px 5px rgba(0, 0, 0, 0.1);
最小高度：800px；
过渡：全部 0.3s 缓和；
}
#站点地图李{
内边距：8 像素 15 像素；
边框底部：1px 实线#e0e0e0；
过渡：背景0.2s，变换0.2s；
过渡：背景0.2s；
左边框：4px 纯黑；
下边距：4px；
}
#sitemap李：悬停{
左边框：4px 纯蓝色；变换：translateY(-2px);}
#sitemap li:最后一个孩子{
底部边框：无；
}
#站点地图{
文本装饰：无；
颜色：黑色;
字体大小：19px；
显示：块；
过渡：颜色0.2s；
}
#sitemap a：悬停{
颜色: 蓝色;
}
</风格>样式-02（带标签的 HTML SItemap）
<ul></ul>
<脚本类型=“文本/javascript”>
var numposts = 100； // 如果您的帖子超过 100 个，请更改此值
函数显示最近的帖子（json）{
var sitemap = document.getElementById("sitemap");
for (var i = 0; i < json.feed.entry.length; i++) {
var 条目 = json.feed.entry[i];
var posttitle = Entry.title.$t;
var posturl;
// 提取标签（如果可用）并创建链接
var postlabels = '';
if (条目.类别) {
postlabels = entry.category.map(cat => {
var 标签 = cat.term;
var labelurl = `/search/label/${encodeURIComponent(label)}`;
返回 `<a href="${labelurl}" class="label-button">${label}</a>`；
}）。加入（' '）;
} 别的 {
postlabels = '<span class="no-label">无标签</span>';
}
for (var k = 0; k < 条目.link.length; k++) {
if (entry.link[k].rel == '替代') {
posturl = Entry.link[k].href;
休息;
}
}
var listItem = document.createElement("li");
listItem.innerHTML = `
<div class="post-item">
<a href="${posturl}" class="post-title">${posttitle}</a>
<div class="post-labels">${postlabels}</div>
</div>`;
sitemap.appendChild(listItem);
}
}
var script = document.createElement("script");
script.src =“https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999”;
document.body.appendChild(脚本);
</脚本>
<风格>
#站点地图{
列表样式类型：无；
填充：0；
保证金：0；
保证金：自动；
背景颜色：#f8f9fa；
边框半径：5px；
盒子阴影: 0 2px 5px rgba(0, 0, 0, 0.1);
最小高度：800px；
过渡：全部 0.3s 缓和；
}
#站点地图李{
内边距：8 像素 15 像素；
边框底部：1px 实线#e0e0e0；
过渡：背景0.2s，变换0.2s；
左边框：4px 纯黑；
下边距：4px；
}
#sitemap li:悬停{
左边框：4px 纯蓝色；
变换：translateY(-2px);
}
#sitemap li:最后一个孩子{
底部边框：无；
}
.post项目{
显示：柔性；
对齐内容：空间之间；
对齐项目：居中；
}
.post标题{
文本装饰：无；
颜色：黑色;
字体大小：19px；
显示：块；
过渡：颜色0.2s；
}
.post-title:悬停{
颜色: 蓝色;
}
.post标签{
显示：柔性；
间隙：5px；
}
.label-button {
背景颜色：#48525c；
颜色：#ffffff；
内边距：0px 20px；
边框半径：5px；
文本装饰：无；
字体大小：14px；
行高：25px；
过渡：背景颜色 0.2s 缓动；
}
.label-button:悬停{
背景颜色：#0056b3；
}
.无标签{
颜色：#555；
字体大小：14px；
}
/* 响应式 */
@media（最大宽度：768px）{
.post项目{
弹性方向：列；
对齐项目：弹性开始；
}
.post标签{
顶部边距：5px；
}
}
</风格>样式 -03（带有下拉过滤器的 HTML SItemap）
<div class="过滤容器">
<label for="labelFilter">按标签过滤：</label>
<select onchange="filterByLabel()">
<选项值=“全部”>全部</选项>
</选择>
</div>
<ul></ul>
<脚本类型=“文本/javascript”>
var allPosts = []; // 在这里存储所有帖子
var uniqueLabels = new Set(); // 存储唯一标签
// 获取并显示最近的帖子
函数显示最近的帖子（json）{
var sitemap = document.getElementById("sitemap");
allPosts = json.feed.entry; // 存储所有帖子以供过滤
// 为过滤器生成唯一标签
allPosts.forEach(函数(条目) {
if (条目.类别) {
条目.category.forEach(函数(猫) {
uniqueLabels.add(cat.term);
});
}
});
// 使用标签填充过滤器下拉列表
var labelFilter = document.getElementById("labelFilter");
uniqueLabels.forEach（函数（标签）{
var option = document.createElement("option");
选项.值=标签;
选项.textContent = 标签;
labelFilter.appendChild(选项);
});
显示帖子（所有帖子）； // 最初显示所有帖子
}
// 显示过滤帖子的函数
函数显示帖子（帖子）{
var sitemap = document.getElementById("sitemap");
站点地图.innerHTML = ''; // 清除当前帖子
posts.forEach(函数(条目){
var posttitle = Entry.title.$t;
var posturl;
var postlabels = '';
if (条目.类别) {
postlabels = entry.category.map(cat => {
var 标签 = cat.term;
var labelurl = `/search/label/${encodeURIComponent(label)}`;
返回 `<a href="${labelurl}" class="label-button">${label}</a>`；
}）。加入（' '）;
} 别的 {
postlabels = '<span class="no-label">无标签</span>';
}
for (var k = 0; k < 条目.link.length; k++) {
if (entry.link[k].rel == '替代') {
posturl = Entry.link[k].href;
休息;
}
}
var listItem = document.createElement("li");
listItem.innerHTML = `
<div class="post-item">
<a href="${posturl}" class="post-title">${posttitle}</a>
<div class="post-labels">${postlabels}</div>
</div>`;
sitemap.appendChild(listItem);
});
}
// 按所选标签过滤帖子的函数
函数filterByLabel() {
var selectedLabel = document.getElementById("labelFilter").value;
if (selectedLabel === "全部") {
显示帖子（所有帖子）； // 如果选择“全部”则显示所有帖子
} 别的 {
var FilteredPosts = allPosts.filter(function(entry) {
returnentry.category &&entry.category.some(cat => cat.term === selectedLabel);
});
显示帖子（过滤帖子）； // 只显示过滤后的帖子
}
}
// 使用脚本加载最近的帖子
var script = document.createElement("script");
script.src =“https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999”;
document.body.appendChild(脚本);
</脚本>
<风格>
/* 过滤器下拉菜单的样式 */
.过滤容器{
边距：20px 0；
文本对齐：居中；
}
#标签过滤器{
内边距：5px 10px；
字体大小：16px；
}
/* 站点地图和帖子项样式 */
#站点地图{
列表样式类型：无；
填充：0；
保证金：0；
保证金：自动；
背景颜色：#f8f9fa；
边框半径：5px；
盒子阴影: 0 2px 5px rgba(0, 0, 0, 0.1);
最小高度：800px；
过渡：全部 0.3s 缓和；
}
#站点地图李{
内边距：8 像素 15 像素；
边框底部：1px 实线#e0e0e0；
过渡：背景0.2s，变换0.2s；
左边框：4px 纯黑；
下边距：4px；
}
#sitemap li:悬停{
左边框：4px 纯蓝色；
变换：translateY(-2px);
}
#sitemap li:最后一个孩子{
底部边框：无；
}
.post项目{
显示：柔性；
对齐内容：空间之间；
对齐项目：居中；
}
.post标题{
文本装饰：无；
颜色：黑色;
字体大小：19px；
显示：块；
过渡：颜色0.2s；
}
.post-title:悬停{
颜色: 蓝色;
}
.post标签{
显示：柔性；
间隙：5px；
}
.label-button {
背景颜色：#48525c；
颜色：#ffffff；
内边距：0px 20px；
边框半径：5px；
文本装饰：无；
字体大小：14px；
行高：25px；
过渡：背景颜色 0.2s 缓动；
}
.label-button:悬停{
背景颜色：#0056b3；
}
.无标签{
颜色：#555；
字体大小：14px；
}
/* 响应式 */
@media（最大宽度：768px）{
.post项目{
弹性方向：列；
对齐项目：弹性开始；
}
.post标签{
顶部边距：5px；
}
}
</风格>样式 -04（带药丸形状过滤器的 HTML SItemap）
<div class="过滤容器">
<button class="filter-button">全部</button>
<!--标签按钮将在这里动态插入-->
</div>
<ul></ul>
<脚本类型=“文本/javascript”>
var allPosts = []; // 在这里存储所有帖子
var uniqueLabels = new Set(); // 存储唯一标签
函数显示最近的帖子（json）{
var sitemap = document.getElementById("sitemap");
allPosts = json.feed.entry; // 存储所有帖子以供过滤
allPosts.forEach(函数(条目) {
if (条目.类别) {
条目.category.forEach(函数(猫) {
uniqueLabels.add(cat.term);
});
}
});
var filterContainer = document.querySelector('.filter-container');
uniqueLabels.forEach（函数（标签）{
var Button = document.createElement("button");
Button.className = "过滤按钮";
按钮.textContent = 标签;
onclick = function() { filterByLabel(label); } };
filterContainer.appendChild(按钮);
});
显示帖子（所有帖子）； // 最初显示所有帖子
}
函数显示帖子（帖子）{
var sitemap = document.getElementById("sitemap");
站点地图.innerHTML = ''; // 清除站点地图列表
posts.forEach(函数(条目){
var posttitle = Entry.title.$t;
var posturl;
var postlabels = '';
if (条目.类别) {
postlabels = entry.category.map(cat => {
var 标签 = cat.term;
var labelurl = `/search/label/${encodeURIComponent(label)}`;
返回 `<a href="${labelurl}" class="label-button">${label}</a>`；
}）。加入（' '）;
} 别的 {
postlabels = '<span class="no-label">无标签</span>';
}
for (var k = 0; k < 条目.link.length; k++) {
if (entry.link[k].rel == '替代') {
posturl = Entry.link[k].href;
休息;
}
}
var listItem = document.createElement("li");
listItem.innerHTML = `
<div class="post-item">
<a href="${posturl}" class="post-title">${posttitle}</a>
<div class="post-labels">${postlabels}</div>
</div>`;
sitemap.appendChild(listItem);
});
}
函数filterByLabel（标签）{
if (标签 === '全部') {
显示帖子（所有帖子）；
} 别的 {
var FilteredPosts = allPosts.filter(function(entry) {
returnentry.category &&entry.category.some(cat => cat.term === 标签);
});
显示帖子（过滤帖子）；
}
}
var script = document.createElement("script");
script.src =“https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999”;
document.body.appendChild(脚本);
</脚本>
<风格>
/* 过滤器容器的样式 */
.过滤容器{
文本对齐：居中；
边距：20px 0；
}
/* 药丸状过滤按钮 */
.过滤按钮{
背景颜色：#007bff；
边框：无；
颜色: 白色;
内边距：10px 20px；
边距：5 像素；
边框半径：5px；
字体大小：16px；
光标：指针；
过渡：背景颜色 0.3s 缓动；
}
.filter-button:悬停{
背景颜色：#0056b3；
}
/* 站点地图和帖子项目的样式 */
#站点地图{
列表样式类型：无；
填充：0；
保证金：0；
保证金：自动；
背景颜色：#f8f9fa；
边框半径：5px；
盒子阴影: 0 2px 5px rgba(0, 0, 0, 0.1);
最小高度：800px；
过渡：全部 0.3s 缓和；
}
#站点地图李{
内边距：8 像素 15 像素；
边框底部：1px 实线#e0e0e0；
过渡：背景0.2s，变换0.2s；
左边框：4px 纯黑；
下边距：4px；
}
#sitemap li:悬停{
左边框：4px 纯蓝色；
变换：translateY(-2px);
}
#sitemap li:最后一个孩子{
底部边框：无；
}
.post项目{
显示：柔性；
对齐内容：空间之间；
对齐项目：居中；
}
.post标题{
文本装饰：无；
颜色：黑色;
字体大小：19px；
显示：块；
过渡：颜色0.2s；
}
.post-title:悬停{
颜色: 蓝色;
}
.post标签{
显示：柔性；
间隙：5px；
}
.label-button {
背景颜色：#48525c；
颜色：#ffffff；
内边距：0px 20px；
边框半径：5px；
文本装饰：无；
字体大小：14px；
行高：25px；
过渡：背景颜色 0.2s 缓动；
}
.label-button:悬停{
背景颜色：#0056b3；
}
.无标签{
颜色：#555；
字体大小：14px；
}
/* 响应式 */
@media（最大宽度：768px）{
.post项目{
弹性方向：列；
对齐项目：弹性开始；
}
.post标签{
顶部边距：5px；
}
}
</风格>您可以使用上面给出的任何一个代码，并确保更改代码上的网站 URL。这样它就可以在您的 Blogger 网站上运行。
如果您想要 Blogger 的更多 HTML 站点地图代码，请查看我们在Techyleaf上的旧博客文章。
如果还有疑问，欢迎在评论区提问。我很乐意在这方面为您提供帮助。