使用@nuxtjs/sitemap给项目添加sitemap(网站地图)-白红宇

使用@nuxtjs/sitemap给项目添加sitemap(网站地图)

阅读量：432 次

发布时间：2019-03-06

本文共 2784 字，大约阅读时间需要 9 分钟。

安装使用步骤：

在项目根目录下使用以下命令安装@nuxtjs/sitemap：

yarn add @nuxtjs/sitemap -D

打开nuxt.config.js，将modules数组中添加'@nuxtjs/sitemap'。

创建config文件夹，并在其中新建sitemap.js文件，内容如下：

const sitemap = [
  {
    path: '/sitemap.xml',
    hostname: 'https://baidu.com',
    cacheTime: 1000 * 60 * 60 * 24,
    gzip: true,
    generate: false,
    exclude: ['/404'],
    defaults: {
      changefreq: 'always',
      lastmod: new Date()
    },
    routes: () => {
      const routes = [
        { url: '/', changefreq: 'always', lastmod: new Date() },
        { url: '/helloword', changefreq: 'always', lastmod: '2020-12-04' }
      ];
      return routes;
    }
  }
];
export default sitemap;

在nuxt.config.js中导入sitemap.js，并添加sitemap项。

解决日期格式问题：

打开node_modules/sitemap/dist/lib/sitemap.js，注释掉smi.lastmod = (new Date(smiLoose.lastmod)).toISOString();，以确保生成的日期格式为YYYY-MM-DD。

生成多个sitemap.xml文件：

修改config/sitemap.js，将sitemap设置为数组形式：

const sitemap = [
  {
    path: '/sitemap.xml',
    hostname: 'https://baidu.com',
    cacheTime: 1000 * 60 * 60 * 24,
    gzip: true,
    generate: false,
    exclude: ['/404'],
    defaults: {
      changefreq: 'always',
      lastmod: new Date()
    },
    routes: () => {
      const routes = [
        { url: '/', changefreq: 'always', lastmod: new Date() },
        { url: '/helloword', changefreq: 'always', lastmod: '2020-12-04' }
      ];
      return routes;
    }
  },
  {
    path: '/test/sitemap.xml',
    hostname: 'https://baidu.com',
    cacheTime: 1000 * 60 * 60 * 24,
    gzip: true,
    generate: false,
    exclude: ['/404'],
    defaults: {
      changefreq: 'always',
      lastmod: new Date()
    },
    routes: () => {
      const routes = [
        { url: '/test', changefreq: 'always', lastmod: new Date() },
        { url: '/test/helloword', changefreq: 'always', lastmod: '2020-12-04' }
      ];
      return routes;
    }
  }
];
export default sitemap;

结合后端数据生成sitemap.xml：

在sitemap.js中引入axios，并修改routes函数：

import axios from 'axios';
const sitemap = [
  {
    path: '/sitemap.xml',
    hostname: 'https://baidu.com',
    cacheTime: 1000 * 60 * 60 * 24,
    gzip: true,
    generate: false,
    exclude: ['/404'],
    defaults: {
      changefreq: 'always',
      lastmod: new Date()
    },
    routes: async () => {
      const getUrl = 'https://******';
      const { data } = await axios.get(getUrl);
      const routes = [
        { url: '/', changefreq: 'always', lastmod: new Date() },
        { url: '/helloword', changefreq: 'always', lastmod: '2020-12-04' }
      ];
      if (data && data.list) {
        const arr = data.list.map(item => ({
          url: `/blog/${item.id}`,
          lastmod: item.update_time,
          changefreq: 'yearly'
        }));
        routes.concat(arr);
      }
      return routes;
    }
  }
];
export default sitemap;