使用@nuxtjs/sitemap給項目添加sitemap(網站地圖)

安裝使用步驟參照:此博客內容轉載博客地址:https://huangliangbo.com/2097

如何使用?(詳細圖文)

在項目根目錄下使用yarn/npm/cnpm 安裝 @nuxtjs/sitemap

yarn add @nuxtjs/sitemap -D
npm i @nuxtjs/sitemap -D
cnpm i @nuxtjs/sitemap -D

在項目根目錄下找到 nuxt.config.js 往modules添加'@nuxtjs/sitemap'

在項目目錄下新建config文件夾,創建sitemap.js文件寫入

在nuxt.config.js導入sitemap.js。並添加 sitemap項,在瀏覽器輸入項目的sitemap地址即可

解決nuxt生成的sitemap.xml文件日期格式問題(YYYY-MM-DD)

使用dayjs格式化時間,如果出現格式化時間還是顯示ISO時間格式那么需要到sitemap源碼查看時間是否被轉換了!

找到@nuxtjs/sitemap包, 注釋掉smi.lastmod = (new Date(smiLoose.lastmod)).toISOString();

在node_modules\sitemap\dist\lib\sitemap.js注釋上面的代碼,因為他會自動把時間轉換成ISO-8601時間格式。 如果沒有找到node_modules\sitemap\dist\lib\sitemap.js,那就從node_modules\@nuxtjs文件夾里找.

如何生成多個sitemap.xml文件?

在 ./config/sitemap.js 中定義的sitemap 使用數組形式.

const sitemap = [
    {
        path: '/sitemap.xml', // 生成的文件路徑
        hostname: 'https://baidu.com/', // 網址
        cacheTime: 1000 * 60 * 60 * 24, // 1天 更新頻率，只在 generate: false有用
        gzip: true, // 生成 .xml.gz 壓縮的 sitemap
        generate: false, // 允許使用 nuxt generate 生成
        // 排除不要頁面
        exclude: [
            '/404' //  這里的路徑相對 hostname
        ],
        // xml默認的配置
        defaults: {
            changefreq: 'always',
            lastmod: new Date()
        },
        // 需要生成的xml數據, return 返回需要給出的xml數據
        routes: () => {
            const routes = [
                {
                    url: "/",  //  這里的路徑相對 hostname
                    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, // 1天 更新頻率，只在 generate: false有用
        gzip: true, // 生成 .xml.gz 壓縮的 sitemap
        generate: false, // 允許使用 nuxt generate 生成
        // 排除不要頁面
        exclude: [
            '/404' //  這里的路徑相對 hostname
        ],
        // xml默認的配置
        defaults: {
            changefreq: 'always',
            lastmod: new Date()
        },
        // 需要生成的xml數據, return 返回需要給出的xml數據
        routes: () => {
            const routes = [
                {
                    url: "/test",  //  這里的路徑相對 hostname
                    changefreq: "always",
                    lastmod: new Date()
                },
                {
                    url: "/test/helloword",
                    changefreq: "always",
                    lastmod: "2020-12-04"
                }
            ]
            return routes
        }
    }
]

export default sitemap

和后端配合生成更多的url數據拼接url,使用axios請求獲取列表數據等等....

重寫sitemap.js,使用請求獲取url數據

import axios from "axios"
const sitemap = {
    path: '/sitemap.xml', // 生成的文件路徑
    hostname: 'https://baidu.com/', // 網址
    cacheTime: 1000 * 60 * 60 * 24, // 1天 更新頻率，只在 generate: false有用
    gzip: true, // 生成 .xml.gz 壓縮的 sitemap
    generate: false, // 允許使用 nuxt generate 生成
    // 排除不要頁面
    exclude: [
        '/404' //  這里的路徑相對 hostname
    ],
    // xml默認的配置
    defaults: {
        changefreq: 'always',
        lastmod: new Date()
    },
    // 需要生成的xml數據, return 返回需要給出的xml數據
    routes: async () => {

        // 從后台獲取數據,拼接url生成更多的xml數據
        const getUrl = 'https://******'
        const { data } = await axios.get(getUrl)
        const routes = [
            {
                url: "/",  //  這里的路徑相對 hostname
                changefreq: "always",
                lastmod: new Date()
            },
            {
                url: "/helloword",
                changefreq: "always",
                lastmod: "2020-12-04"
            }
        ]
        if (data && data.list) {
            let arr = data.list.map(item => ({
                url: "/blog/" + item.id,
                lastmod: item.update_time,
                changefreq: "yearly"
            }))
            routes.concat(arr)
        }

        return routes
    }
}

export default sitemap