如何在 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標題{
文字裝飾：無；
顏色：黑色;
字體大小：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標題{
文字裝飾：無；
顏色：黑色;
字體大小：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標籤{
上邊距：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標題{
文字裝飾：無；
顏色：黑色;
字體大小：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上的舊部落格文章。
如果還有疑問，歡迎在留言區提問。我很樂意在這方面為您提供協助。