Nuxt Content站点地图无法自动包含图片问题求助

要让Nuxt Sitemap v6.0.0-beta.4自动将Markdown文档中的图片纳入站点地图，你需要手动解析所有文档内容、提取图片链接并将其添加到站点地图的URL条目里。以下是具体实现步骤：

1. 创建图片提取工具函数 #

在server/utils/extract-images.ts中编写工具函数，用于遍历所有文档并提取图片链接：

import { parse } from 'node-html-parser';
import { serverQueryContent } from '#content/server';

export async function extractAllDocumentImages() {
  const documents = await serverQueryContent().find();
  const imageUrls = new Set<string>();
  const baseUrl = process.env.NUXT_PUBLIC_SITE_URL || 'https://your-domain.com';

  for (const doc of documents) {
    if (doc.body?.html) {
      const root = parse(doc.body.html);
      const imgs = root.querySelectorAll('img');
      
      imgs.forEach(img => {
        const src = img.getAttribute('src');
        if (!src) return;

        let absoluteUrl: string;
        if (src.startsWith('http')) {
          absoluteUrl = src;
        } else if (src.startsWith('/')) {
          absoluteUrl = `${baseUrl}${src}`;
        } else {
          // 处理相对于文档的图片路径
          const docDir = (doc._path || '').substring(0, (doc._path || '').lastIndexOf('/'));
          absoluteUrl = `${baseUrl}${docDir}/${src}`;
        }
        imageUrls.add(absoluteUrl);
      });
    }
  }

  return Array.from(imageUrls).map(url => ({
    loc: url,
    lastmod: new Date().toISOString(),
    changefreq: 'monthly',
    priority: 0.5
  }));
}

2. 自定义站点地图URL源 #

在server/api/__sitemap__/urls.ts中，合并文档路由和图片URL条目：

import { extractAllDocumentImages } from '~/server/utils/extract-images';
import { serverQueryContent } from '#content/server';

export default defineSitemapEventHandler(async (event) => {
  // 获取所有文档的路由条目
  const docs = await serverQueryContent().where({ _type: 'markdown' }).find();
  const docUrls = docs.map(doc => ({
    loc: `${process.env.NUXT_PUBLIC_SITE_URL}${doc._path}`,
    lastmod: doc.updatedAt || doc.createdAt,
    changefreq: 'weekly',
    priority: 0.8
  }));

  // 获取所有图片的URL条目
  const imageUrls = await extractAllDocumentImages();

  // 返回合并后的结果
  return [...docUrls, ...imageUrls];
});

3. 配置Nuxt Sitemap #

在nuxt.config.ts中指定自定义URL源，并设置站点基础URL：

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxtjs/sitemap'],
  sitemap: {
    siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://your-domain.com',
    autoLastmod: false,
    sources: ['/api/__sitemap__/urls']
  },
  runtimeConfig: {
    public: {
      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://your-domain.com'
    }
  }
});

4. 环境变量配置 #

在项目根目录的.env文件中设置你的站点实际URL：

NUXT_PUBLIC_SITE_URL=https://your-docs-domain.com

验证效果 #

运行npm run generate后，查看.output/public/sitemap.xml文件，你会发现文档路由和所有Markdown中的图片URL都已被纳入站点地图。

注意事项 #

• 如果图片存放在public目录下，确保相对路径转换逻辑符合你的目录结构
• 可以将图片的lastmod替换为对应文档的updatedAt时间，提升站点地图的准确性
• 若使用外部图片链接，函数会自动保留原绝对URL

内容的提问来源于stack exchange，提问作者BATMAN_2008