# gatsby-plugin-sitemap-html 中文文档
规范地址：https://npmcn.com/package/gatsby-plugin-sitemap-html/
版本：1\.3\.0
npm 元数据更新时间：2026-11-03T17:07:30.865Z
中文译文更新时间：2026-11-03T18:11:56.570Z
软件包许可：MIT
本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/gatsby-plugin-sitemap-html
原文对照：https://npmcn.com/package/gatsby-plugin-sitemap-html/?lang=original
项目主页：https://github.com/KtanPatel/gatsby-plugin-sitemap-html#readme
源码仓库：https://github.com/KtanPatel/gatsby-plugin-sitemap-html
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：25 kB，7 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18\.0\.0
- 运行依赖：1 个
- peer 依赖：gatsby ^5\.16\.1，gatsby-plugin-sitemap ^6\.16\.0
- 首次发布：2025-11-04T16:00:02.853Z
- 最新版本发布：2026-11-03T17:07:30.581Z
- 已发布版本数：13（近 12 个月 13 个）
## 中文简介
Gatsby插件，扩展了gatsby-plugin-sitemap以使用XSL生成HTML风格的网站地图
## 安装
```sh
npm install gatsby-plugin-sitemap-html
```
也可以使用：`pnpm add gatsby-plugin-sitemap-html`、`yarn add gatsby-plugin-sitemap-html`、`bun add gatsby-plugin-sitemap-html`
## README
# gatsby-plugin-sitemap-html
[](https://www.npmjs.com/package/gatsby-plugin-sitemap-html) [](https://opensource.org/licenses/MIT) [](https://github.com/KtanPatel/gatsby-plugin-sitemap-html/actions) [](https://codecov.io/gh/KtanPatel/gatsby-plugin-sitemap-html)
一个盖茨比插件，扩展 `gatsby-plugin-sitemap` 生成 **人类可读的HTML样式的网站地图** 使用XSL。将您的XML网站地图转换为用户和搜索引擎都能欣赏的漂亮、浏览器友好的页面。
## ✨特性
- 🎨 **漂亮的HTML样式** -使站点地图在浏览器中可读
- 🔧 **零配置** -开箱即用明智的默认值
- 🎯 **可定制的** -如果需要，带上自己的XSL模板
- 📦 **轻量级** -最小依赖
- 🚀 **seo友好** -维护搜索引擎的XML结构
- 🔄 **自动处理** -处理站点地图索引和所有站点地图文件
## 📦安装
```bash
pnpm add gatsby-plugin-sitemap gatsby-plugin-sitemap-html
```
或者使用npm：
```bash
npm install gatsby-plugin-sitemap gatsby-plugin-sitemap-html
```
或用纱线：
```bash
yarn add gatsby-plugin-sitemap gatsby-plugin-sitemap-html
```
## 🚀快速入门
将插件添加到您的 `gatsby-config.js`。 **重要:** 之后添加它 `gatsby-plugin-sitemap`：
```js
module.exports = {
siteMetadata: {
siteUrl: 'https://www.example.com',
},
plugins: [
'gatsby-plugin-sitemap',
'gatsby-plugin-sitemap-html',
],
};
```
就是这样！建立你的网站和访问 `/sitemap.xml` 在浏览器中查看样式化的站点地图。
## ⚙️ 配置
### 基本配置
```js
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`,
},
},
],
};
```
### 自定义输出路径
```js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-sitemap',
options: {
output: '/sitemaps',
},
},
{
resolve: 'gatsby-plugin-sitemap-html',
options: {
output: '/sitemaps', // Must match gatsby-plugin-sitemap
},
},
],
};
```
### 自定义站点地图文件名
```js
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重命名) |
## 📖工作原理
1. `gatsby-plugin-sitemap` 生成您的网站地图文件 (`sitemap-index.xml`， `sitemap-0.xml`等)。
2. 这个插件自动：
- 将XSL样式表复制到公共目录
- 向所有站点地图文件注入XSL引用
- 重命名 `sitemap-index.xml` 来 `sitemap.xml` (或自定义文件名via `sitemapFilename` 选项) 用于标准命名
3. 当用户在浏览器中访问站点地图时，他们会看到一个样式化的HTML页面
4. 搜索引擎仍然看到标准的XML结构
## 🎨自定义样式
自定义您的网站地图的外观:
1. 创建一个自定义XSL文件（可以从中复制） `node_modules/gatsby-plugin-sitemap-html/templates/sitemap.xsl`）
2. 根据需要修改样式和布局
3. 在你的配置中引用它:
```js
{
resolve: 'gatsby-plugin-sitemap-html',
options: {
xslTemplate: './src/templates/my-sitemap.xsl',
},
}
```
## 📚文档
- [API参考](https://npmcn.com/package/gatsby-plugin-sitemap-html/docs/API.md) -详细的API文档
- [例子](https://npmcn.com/package/gatsby-plugin-sitemap-html/docs/EXAMPLES.md) -更多使用示例和配置
- [故障排除](https://npmcn.com/package/gatsby-plugin-sitemap-html/docs/TROUBLESHOOTING.md) -常见问题和解决方案
## 🔍例子
检查 [`example`](https://npmcn.com/package/gatsby-plugin-sitemap-html/example) 目录获取完整的工作演示。
要运行该示例:
```bash
cd example
pnpm install
pnpm run build
pnpm run serve
```
然后访问 `http://localhost:9000/sitemap.xml`
## 🤝贡献
欢迎投稿！请参阅我们的 [贡献指南](https://npmcn.com/package/gatsby-plugin-sitemap-html/CONTRIBUTING.md) 获取详细信息。
请注意，这个项目是发布与 [行为准则](https://npmcn.com/package/gatsby-plugin-sitemap-html/CODE_OF_CONDUCT.md)。通过参与该项目，您同意遵守其条款。
## 🔒安全
请查看我们的 [安全策略](https://npmcn.com/package/gatsby-plugin-sitemap-html/SECURITY.md) 用于报告漏洞。
## 📝更新日志
看到 [CHANGELOG.md](https://npmcn.com/package/gatsby-plugin-sitemap-html/CHANGELOG.md) 查看发布历史。
## 📄许可证
麻省理工学院© [Ketan帕特尔](https://github.com/KtanPatel)
## 🙏致谢
- 建在…之上 [盖茨比-插件-网站地图](https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/)
- 受人类可读站点地图需求的启发
* * *
如果您发现此插件有帮助，请⭐明星回购!
## 常见问题
### gatsby-plugin-sitemap-html 是什么？
Gatsby插件，扩展了gatsby-plugin-sitemap以使用XSL生成HTML风格的网站地图
### 如何安装 gatsby-plugin-sitemap-html？
在项目目录运行 npm install gatsby-plugin-sitemap-html，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：gatsby（^5\.16\.1）、gatsby-plugin-sitemap（^6\.16\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### gatsby-plugin-sitemap-html 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### gatsby-plugin-sitemap-html 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### gatsby-plugin-sitemap-html 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>=18\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### gatsby-plugin-sitemap-html 可以商用吗？
gatsby-plugin-sitemap-html 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### gatsby-plugin-sitemap-html 还在维护吗？
最新版本 1\.3\.0 发布于 2026/11/04（今天）；至今共发布 13 个版本，其中过去 12 个月发布了 13 个；首次发布于 2025/11/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。