gatsby-plugin-sitemap-html
一个盖茨比插件，扩展 gatsby-plugin-sitemap 生成 人类可读的HTML样式的网站地图 使用XSL。将您的XML网站地图转换为用户和搜索引擎都能欣赏的漂亮、浏览器友好的页面。
✨特性
- 🎨 漂亮的HTML样式 -使站点地图在浏览器中可读
- 🔧 零配置 -开箱即用明智的默认值
- 🎯 可定制的 -如果需要，带上自己的XSL模板
- 📦 轻量级 -最小依赖
- 🚀 seo友好 -维护搜索引擎的XML结构
- 🔄 自动处理 -处理站点地图索引和所有站点地图文件
📦安装
pnpm add gatsby-plugin-sitemap gatsby-plugin-sitemap-html
或者使用npm：
npm install gatsby-plugin-sitemap gatsby-plugin-sitemap-html
或用纱线：
yarn add gatsby-plugin-sitemap gatsby-plugin-sitemap-html
🚀快速入门
将插件添加到您的 gatsby-config.js。 重要: 之后添加它 gatsby-plugin-sitemap：
module.exports = {
siteMetadata: {
siteUrl: 'https://www.example.com',
},
plugins: [
'gatsby-plugin-sitemap',
'gatsby-plugin-sitemap-html',
],
};
就是这样！建立你的网站和访问 /sitemap.xml 在浏览器中查看样式化的站点地图。
⚙️ 配置
基本配置
module.exports = {
plugins: [
'gatsby-plugin-sitemap',
{
resolve: 'gatsby-plugin-sitemap-html',
options: {
// Optional: path to custom XSL template
xslTemplate: `${__dirname}/src/templates/custom-sitemap.xsl`,
},
},
],
};
自定义输出路径
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-sitemap',
options: {
output: '/sitemaps',
},
},
{
resolve: 'gatsby-plugin-sitemap-html',
options: {
output: '/sitemaps', // Must match gatsby-plugin-sitemap
},
},
],
};
自定义站点地图文件名
module.exports = {
plugins: [
'gatsby-plugin-sitemap',
{
resolve: 'gatsby-plugin-sitemap-html',
options: {
sitemapFilename: 'custom-sitemap.xml',
},
},
],
};
选项
| 选项 | 类型 | 默认 | 描述 |
| ---------------- | ------ | ----------------- | --------------------------------------------------------------------------- |
| xslTemplate | string |内置模板|自定义XSL模板文件路径（可选）|
| output | string | / | 存储网站地图的文件夹路径 (必须匹配gatsby-plugin-sitemap) |
| sitemapFilename | string | sitemap.xml | 主网站地图文件的自定义文件名 (从sitemap-index.xml重命名) |
📖工作原理
gatsby-plugin-sitemap生成您的网站地图文件 (sitemap-index.xml，sitemap-0.xml等)。- 这个插件自动：
- 将XSL样式表复制到公共目录
- 向所有站点地图文件注入XSL引用
- 重命名
sitemap-index.xml来sitemap.xml(或自定义文件名viasitemapFilename选项) 用于标准命名
- 当用户在浏览器中访问站点地图时，他们会看到一个样式化的HTML页面
- 搜索引擎仍然看到标准的XML结构
🎨自定义样式
自定义您的网站地图的外观:
- 创建一个自定义XSL文件（可以从中复制）
node_modules/gatsby-plugin-sitemap-html/templates/sitemap.xsl） - 根据需要修改样式和布局
- 在你的配置中引用它:
{
resolve: 'gatsby-plugin-sitemap-html',
options: {
xslTemplate: './src/templates/my-sitemap.xsl',
},
}
📚文档
🔍例子
检查 example 目录获取完整的工作演示。
要运行该示例:
cd example
pnpm install
pnpm run build
pnpm run serve
然后访问 http://localhost:9000/sitemap.xml
🤝贡献
欢迎投稿！请参阅我们的 贡献指南 获取详细信息。
请注意，这个项目是发布与 行为准则。通过参与该项目，您同意遵守其条款。
🔒安全
请查看我们的 安全策略 用于报告漏洞。
📝更新日志
看到 CHANGELOG.md 查看发布历史。
📄许可证
麻省理工学院© Ketan帕特尔
🙏致谢
- 建在…之上 盖茨比-插件-网站地图
- 受人类可读站点地图需求的启发
如果您发现此插件有帮助，请⭐明星回购!