RSS 与站点地图

为 VitePress 站点添加 RSS 订阅和站点地图功能，提升 SEO 和用户体验。

RSS 订阅

安装插件

npm add -D feed

创建 RSS 生成脚本

// docs/.vitepress/scripts/rss.ts
import { writeFileSync } from 'fs'
import { Feed } from 'feed'
import { createContentLoader } from 'vitepress'

const baseUrl = 'https://your-site.com'

export async function generateRSS() {
  const feed = new Feed({
    title: 'VitePress 学习指南',
    description: '从零开始学习 VitePress',
    id: baseUrl,
    link: baseUrl,
    language: 'zh-CN',
    image: `${baseUrl}/logo.svg`,
    favicon: `${baseUrl}/favicon.ico`,
    copyright: 'Copyright © 2026',
    author: {
      name: '作者名',
      email: 'email@example.com',
      link: baseUrl
    }
  })

  const posts = await createContentLoader('**/*.md', {
    excerpt: true,
    render: true
  }).load()

  posts.sort((a, b) => {
    return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
  })

  for (const post of posts) {
    const url = `${baseUrl}${post.url}`
    
    feed.addItem({
      title: post.frontmatter.title,
      id: url,
      link: url,
      description: post.excerpt,
      content: post.html,
      date: new Date(post.frontmatter.date || Date.now())
    })
  }

  writeFileSync('docs/.vitepress/dist/feed.xml', feed.rss2())
  writeFileSync('docs/.vitepress/dist/feed.json', feed.json1())
  writeFileSync('docs/.vitepress/dist/atom.xml', feed.atom1())
  
  console.log('RSS 生成完成!')
}

构建时生成

// docs/.vitepress/config.mts
import { generateRSS } from './scripts/rss'

export default defineConfig({
  // ... 其他配置
  
  buildEnd: async () => {
    await generateRSS()
  }
})

添加 RSS 链接

export default defineConfig({
  head: [
    ['link', { 
      rel: 'alternate', 
      type: 'application/rss+xml', 
      title: 'RSS Feed', 
      href: '/feed.xml' 
    }]
  ]
})

站点地图

内置站点地图

VitePress 内置支持站点地图：

export default defineConfig({
  sitemap: {
    hostname: 'https://your-site.com'
  }
})

构建时会自动生成 sitemap.xml。

高级配置

export default defineConfig({
  sitemap: {
    hostname: 'https://your-site.com',
    
    // 排除特定页面
    exclude: ['/404', '/private/**'],
    
    // 自定义 URL
    transformItems(items) {
      return items.map(item => {
        // 设置优先级
        if (item.url === '/') {
          item.priority = 1.0
        } else if (item.url.startsWith('/guide/')) {
          item.priority = 0.9
        }
        return item
      })
    }
  }
})

手动生成站点地图

// docs/.vitepress/scripts/sitemap.ts
import { writeFileSync } from 'fs'
import { createContentLoader } from 'vitepress'

const baseUrl = 'https://your-site.com'

export async function generateSitemap() {
  const pages = await createContentLoader('**/*.md').load()
  
  const urls = pages.map(page => {
    const lastmod = new Date(page.frontmatter.lastUpdated || Date.now())
    return `  <url>
    <loc>${baseUrl}${page.url}</loc>
    <lastmod>${lastmod.toISOString()}</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>`
  })

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${urls.join('\n')}
</urlset>`

  writeFileSync('docs/.vitepress/dist/sitemap.xml', sitemap)
  console.log('站点地图生成完成!')
}

robots.txt

创建 docs/public/robots.txt：

# robots.txt

User-agent: *
Allow: /

# 站点地图
Sitemap: https://your-site.com/sitemap.xml

# 禁止爬取的路径
Disallow: /private/
Disallow: /drafts/

提交到搜索引擎

Google Search Console

1. 访问 Google Search Console
2. 添加网站属性
3. 验证网站所有权
4. 提交站点地图

Bing Webmaster Tools

1. 访问 Bing Webmaster Tools
2. 添加网站
3. 验证所有权
4. 提交站点地图

百度站长平台

1. 访问 百度站长平台
2. 添加网站
3. 验证网站
4. 提交站点地图

RSS 订阅组件

<!-- docs/.vitepress/theme/components/RSSLink.vue -->
<script setup>
</script>

<template>
  <div class="rss-link">
    <a href="/feed.xml" title="RSS 订阅">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
        <path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"/>
      </svg>
      RSS 订阅
    </a>
  </div>
</template>

<style>
.rss-link a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--vp-c-text-2);
  text-decoration: none;
}

.rss-link a:hover {
  color: var(--vp-c-brand-1);
}
</style>

订阅按钮

在页面中添加订阅按钮：

<script setup>
import { useData } from 'vitepress'

const { title } = useData()
</script>

<template>
  <div class="subscribe">
    <h3>订阅更新</h3>
    <p>通过 RSS 订阅获取最新文章</p>
    <a href="/feed.xml" class="subscribe-btn">
      <svg>...</svg>
      订阅 RSS
    </a>
  </div>
</template>

完整配置示例

import { defineConfig } from 'vitepress'
import { generateRSS } from './scripts/rss'

export default defineConfig({
  title: 'VitePress 学习指南',
  description: '从零开始学习 VitePress',
  
  head: [
    ['link', { 
      rel: 'alternate', 
      type: 'application/rss+xml', 
      title: 'RSS Feed', 
      href: '/feed.xml' 
    }]
  ],
  
  sitemap: {
    hostname: 'https://your-site.com',
    exclude: ['/404']
  },
  
  buildEnd: async () => {
    await generateRSS()
  }
})

SEO 检查清单

• [ ] 添加站点地图
• [ ] 创建 robots.txt
• [ ] 配置 RSS 订阅
• [ ] 提交到搜索引擎
• [ ] 设置合适的 meta 标签
• [ ] 配置 Open Graph
• [ ] 添加结构化数据

下一步

查看 博客搭建实战 了解完整项目示例。