要在 Next.js 和 Contentlayer 項目中實現(xiàn)自動生成 Sitemap 的功能，你可以編寫一個腳本，在每次生成文檔后自動生成 Sitemap。以下是一個示例腳本，你可以根據(jù)自己的需求進行調整。

步驟 1：安裝必要的依賴

首先，你需要安裝必要的依賴庫，用于生成 Sitemap 和處理文件系統(tǒng)：

npm install fs path xmlbuilder contentlayer

步驟 2：編寫生成 Sitemap 的腳本

在你的項目根目錄下創(chuàng)建一個 generate-sitemap.js 文件，并添加以下代碼：

const fs = require('fs');
const path = require('path');
const { xmlbuilder } = require('xmlbuilder');
const { allDocuments } = require('.contentlayer/generated');// 網(wǎng)站的基礎 URL
const BASE_URL = 'https://www.yoursite.com';// 生成 Sitemap XML
const generateSitemap = () => {// 創(chuàng)建根元素const urlset = xmlbuilder.create('urlset', { encoding: 'UTF-8' });urlset.att('xmlns', 'http://www.sitemaps.org/schemas/sitemap/0.9');// 添加文檔頁面allDocuments.forEach((doc) => {const url = urlset.ele('url');url.ele('loc', `${BASE_URL}/${doc.url}`);url.ele('lastmod', new Date(doc.date).toISOString());url.ele('changefreq', 'monthly');url.ele('priority', '0.8');});// 生成 XML 字符串const xml = urlset.end({ pretty: true });// 寫入 sitemap.xml 文件const sitemapPath = path.join(__dirname, 'public', 'sitemap.xml');fs.writeFileSync(sitemapPath, xml);console.log('Sitemap generated at', sitemapPath);
};// 執(zhí)行生成 Sitemap 的函數(shù)
generateSitemap();

步驟 3：在生成文檔后自動運行腳本

要確保每次 Contentlayer 生成文檔后自動運行這個腳本，可以在 package.json 中添加一個新的腳本命令。你可以使用 postbuild 鉤子，確保在構建項目后運行 Sitemap 生成腳本：

{"scripts": {"build": "next build && next export","postbuild": "node generate-sitemap.js"}
}

步驟 4：確保文檔生成路徑和 URL 處理正確

在腳本中，我們假設 allDocuments 是從 Contentlayer 生成的文檔集合中獲取的。如果你的文檔集合屬性名稱或路徑不同，請相應地進行調整。

步驟 5：運行構建

現(xiàn)在，你可以運行 npm run build，這個命令將在生成文檔后自動生成 Sitemap：

npm run build

完成以上步驟后，每次你構建項目時，Sitemap 都會自動生成，并保存在 public/sitemap.xml 中。

總結

以上腳本展示了如何在 Next.js 和 Contentlayer 項目中自動生成 Sitemap。你可以根據(jù)自己的需求調整腳本，如更改 Sitemap 的屬性、URL 格式等。這個自動化過程確保了每次文檔更新后，Sitemap 都能及時更新，提升搜索引擎對網(wǎng)站內容的抓取效率。

參考原文:https://offernow.cn