使用@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

標籤：其他

上一篇：小程式 生成二維碼

下一篇：Taro 周報 #7: 識訓「e代駕」案例，發布 v2.2.16 和 v3.2.0-canary.2