网站地图(sitemap)是什么?

顾名思义，网站地图是为网站的用户提供导航索引的一种用于网站的地图，这里说的用户一方面指现实中的用户，另一方面指搜索引擎蜘蛛。

网站地图的格式：

网站地图主要分为3种格式，一种是html格式的，一种是xml格式的，还有一种是txt格式的，html格式的网站地图主要应用于网站的页面上，xml和txt格式的网站地图主要是给蜘蛛看的，一般需要提交给搜索引擎。今天这个方式主要是以xml为主。

网站地图长什么样子？

下面的图片是用@nuxt/sitemap生成的xml格式的站点地图文件样式

回归正题，下面来说一下@nuxt/sitemap的使用方法

安装 @nuxtjs/sitemap

通过使用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'。
modules：用于扩展模块，模块的引入是按照顺序执行的。

export default {
  ......
  modules: [
    '@nuxtjs/axios',
    "@nuxtjs/sitemap",
  ],
  ......
}

在static文件夹中创建sitemap.js

axios:引入axios，动态生成站点地图需要用到
hostname：你的网站地址
cacheTime：一天的更新频率，只在generate:false有用
gzip：用gzip压缩优化生成的 sitemap.xml 文件
exclude：排除哪些页面
changefred：收录变化的时间，always 一直，daily 每天
lastmod：生成该页面站点地图时的时间
priority：网页的权重 1是100%最高，一般给最重要的页面，不重要的页面0.7-0.9之间

import axios from "axios"; 
//  实例：let baseUrl = "https://api.baidu.com/web_v1"
let baseUrl = "公共路径"
const sitemap = {
		hostname: "你的网站地址",
		path: '/sitemap.xml',
		cacheTime: 1000 * 60 * 60 * 24, 
		gzip: true, 
		generate: false,
		exclude:[
			"/information",
			"/vpncomparison"
		],
		defaults: {
			changefred: "always", 
			lastmod: new Date(),
			priority: 0.8, 
		},
		routes: async () => {
			var routes = [
				{
					url: `/`,
					changefreq: "daily",
					lastmod: new Date(),
					priority: 1,
				},
			]
			// 请求接口  在循环添加生成
			let res = await axios.get(baseUrl+'/article/index', {params: {
					page: 1,
					pagesize: 1000
				}});
			if (res.data.code == 200) {
				let list = res.data.data.list
				let detailList = list.map(item => ({
					url: `/newsdetail/${item.path}`,
					changefreq: "daily",
					priority: 0.9,
				}));
				routes = [
					...routes,
					...detailList,
				]
			}
			return routes
		}
}
export default sitemap;

导入`sitemap.js`

在nuxt.config.js导入sitemap.js。并添加 sitemap项,在浏览器输入项目的sitemap地址即可

import sitemap from "./static/sitemap";
export default {
  ......
  modules: [
    '@nuxtjs/axios',
    "@nuxtjs/sitemap",
  ],
  sitemap: sitemap,
  ......
}

检查是否成功生成sitemap.xml

在你的网站后面直接访问sitemap.xml文件查看是否访问成功

// 实例  假设你的网站为https：//www.baidu.com/
    访问：
    https：//www.baidu.com/sitemap.xml

最后说一下为什么要做站点地图

1、提升用户体验

对于一些中大型网站，网站的目录、频道页面很多，用户一下找不到自己想要的页面，此时如果网站做了网站地图，用户通过网站地图可在短时间内找到自己想要的页面，当然网站地图要做的合理，这需要前期的细致规划。

2、提升蜘蛛的抓取效率、收录

提升蜘蛛的抓取效率，从而促进网站收录。网站地图将网站所有的有效页面都放在了一起，可以让蜘蛛短时间内发现网站所有的链接，从而爬取收录。

总结

下载安装@nuxt/sitemap插件
在nuxt.config.js中进行modules加载
在static静态文件夹中创建sitemap.js文件
之后再回到nuxt.config.js中进行导入,并且赋值给sitemap属性
最后在你的网站上查看是否成功

在nuxtjs中使用@nuxt/sitemap优雅的添加网站地图