序文
sitemap.xml の機能は、SEO (ブラウザ検索エンジン) によって当社の Web サイトのすべてのページを含めることであり、ユーザーが当社の Web サイトのコンテンツを検索しやすくすると同時に、当社の Web サイトの人気と知名度を向上させることです。ランクが高くなります。一言で言えば、テクノロジーを使って Web サイトを宣伝することなので、Web サイトのプロモーション サイトマップのテクノロジーは依然として非常に重要です。実装プロセスは少し面倒ですが、難しいことではありません。今日のチュートリアルを始めましょう。
作業手順
1. インストールの依存関係
npm install @nuxtjs/sitemap
このリンクは、npm のサイトマップの公式ドキュメントです。
2. nuxt.config.js を開き、その依存関係を追加して、この依存関係を使用してプロジェクト全体を表します
注意：之前引入的依赖不用删，只需要将sitemap加在后面
{
modules: [
'@nuxtjs/sitemap'
],
}
3.静的フォルダーに入り、sitemap.jsを作成します。内容は次のとおりです
1. 各設定項目の説明
import axios from "axios"; // 引入axios，动态生成站点地图需要用到
const sitemap = {
path: "/sitemap.xml", //生成的文件路径
hostname: "http://www.baidu.com/", // 你的网站地址
cacheTime: 1000 * 60 * 60 * 24, //一天的更新频率，只在generate:false有用
gzip: true, //用gzip压缩优化生成的 sitemap.xml 文件
generate: false,
exclude: [], //排除不需要收录的页面，这里的路径是相对于hostname, 例如: exclude: ['/404',...]
// 每个对象代表一个页面，这是默认的
defaults: {
changefred: "always", // 收录变化的时间，always 一直，daily 每天
lastmod: new Date(), // 生成该页面站点地图时的时间
priority: 1, // 网页的权重 1是100%最高，一般给最重要的页面，不重要的页面0.7-0.9之间
},
routes: async () => {
return routes
},
};
export default sitemap;
2. 静的コードを生成する
这里主要放那种不需要携带的页面，示例： http://www.baidu.com/pressCenter，每个对象的url的前缀是自动相对上面hostname网站地址的，所以只需要写你的路由就行。
routes: async () => {
// 静态路由
let routes = [
{
url: `/`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
},
{
url: `/pressCenter`,
changefred: "daily",
lastmod: new Date(),
priority: 0.9,
},
];
return routes
}
3. 動的コードの生成
动态指的是类似详情页这种 http://www.baidu.com/detail?id=1 ,这种是根据后端数据自动生成的，不可能手动一个一个去加，那样就太机械了，不符合我们写程序的风格，所以这一小节就是讲如何生成动态站点地图。
let axiosUrl = "你的接口请求前缀"; // 示例 "http://www.baidu.cn/api/"
let prodRoutes = [];
let newsRoutes = [];
// Promist.all并发调接口 所有异步接口同时调用，缩短生成站点地图的时间,通过解构取出接口返回的数据
let [productList, newsList] = await Promise.all([
axios.get(axiosUrl + "product/list"),
axios.get(axiosUrl + "news/list"),
]);
// 商品详情
/* 200状态码判断这块属于代码优化 成功才进来，否则之间打印错误信息，由于nuxt有时出问题能提供给我们的信息非常匮乏，
假设某天接口出问题，到时很难定位问题，所以加这个主要是方便我们后期的维护。 */
if (productList.data.code == 200) {
let proList = productList.data.rows; // 这个对应接口返回的列表
// 用map将列表里的每个对象的id组装同时生成新的对象，每个对象生成后的样子，见下面标注1
prodRoutes = proList.map((item) => {
return {
url: `/product/twoPage/threePage?id=${
item.id}`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
};
});
} else {
console.log(productList.data.msg, "sitemap调用错误+productList");
}
// 文章详情
if (newsList.data.code == 200) {
let newsArr = newsList.data.rows;
newsRoutes = newsArr.map((item) => {
return {
url: `/pressCenter/article?id=${
item.id}`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
};
});
} else {
console.log(newsList.data.msg, "sitemap调用错误+newsList");
}
// 最后统一将所有组装好的数组合并到总数组中,记住传入合并的数组顺序要跟Promise.all调用接口的顺序一致，否则会出问题
// 合并后的样子 见下面标注2
return routes.concat(prodRoutes, newsRoutes);
标注1
// 示例：某一路由对象生成后的样子
{
url: `/pressCenter/article?id=1`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
}
标注2
Routes.concat は配列マージ メソッドです。これを使用して、静的および動的サイト オブジェクトをルーティング配列にマージできます。サイトマップは最終的にこの配列を使用して、実際の sitemap.xml データに処理します。
[
{
url: `/`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
},
{
url: `/product/twoPage/threePage?id=1`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
},
{
url: `/pressCenter/article?id=1`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
},
...
]
4. sitemap.js 構成ファイルを nuxt.config.js でグローバルに導入して使用します
// nuxt.config.js
import sitemap from "./static/sitemap";
// sitemap跟modules是同级的，一般放在modules的上面或者下面
modules: [
"@nuxtjs/sitemap"
],
sitemap: sitemap,
5. sitemap.jsの完全なコード
import axios from "axios"; //
const sitemap = {
path: "/sitemap.xml", //生成的文件路径
hostname: "http://www.baidu.com/", //网站的网址
cacheTime: 1000 * 60 * 60 * 24, //一天的更新频率，只在generate:false有用
gzip: true, //用gzip压缩优化生成的 sitemap.xml 文件
generate: false,
exclude: [], //排除不要的页面，这里的路径是相对于hostname
defaults: {
changefred: "always",
lastmod: new Date(),
},
routes: async () => {
// 静态路由
let routes = [
{
url: `/`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
},
{
url: `/pressCenter`,
changefred: "daily",
lastmod: new Date(),
priority: 0.9,
},
];
// 以下都是动态路由
let axiosUrl = "你的接口请求前缀"; // 示例 "http://www.baidu.com/api/"
let prodRoutes = [];
let newsRoutes = [];
// 并发调接口
let [productList, newsList] = await Promise.all([
axios.get(axiosUrl + "product/list"),
axios.get(axiosUrl + "news/list"),
]);
// 商品详情
if (productList.data.code == 200) {
let proList = productList.data.rows;
prodRoutes = proList.map((item) => {
return {
url: `/product/twoPage/threePage?id=${
item.id}`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
};
});
} else {
console.log(productList.data.msg, "sitemap调用错误+productList");
}
// 文章详情
if (newsList.data.code == 200) {
let newsArr = newsList.data.rows;
newsRoutes = newsArr.map((item) => {
return {
url: `/pressCenter/article?id=${
item.id}`,
changefred: "daily",
lastmod: new Date(),
priority: 1,
};
});
} else {
console.log(newsList.data.msg, "sitemap调用错误+newsList");
}
return routes.concat(prodRoutes, newsRoutes);
},
};
export default sitemap;
6. sitemap.xmlファイルの生成方法
1. nuxtプロジェクトを開始する
- static -> robots.txt ファイルを開きます。robots.txtファイルがない場合は、チュートリアルに入り、ローカル プロジェクト アドレスとオンライン アドレスという 2 つのサイトマップ属性を追加します。sitemap.xml ファイルを生成するときは、# 記号を使用してオンライン アドレスをコメント アウトし、アクセスするブラウザに http://192.168.1.193/sitemap.xml などのローカル リンクを入力する必要があります。193 は、ホストIP。
User-agent: *
Disallow:
# Sitemap: http://www.baidu.com/sitemap.xml
Sitemap: http://192.168.1.193/sitemap.xml
2. アクセスするとこのようになり、CTRL+Sでsitemap.xmlをデスクトップに保存します。ここまででsitemap.xmlの生成手順は終了です。
<loc>标签中的网站地址是根据sitemap.js中的hostname设置的值
3. 生成が完了したら、robots.txt のサイトマップをオンライン アドレスに変更します。
User-agent: *
Disallow:
Sitemap: http://www.baidu.com/sitemap.xml
# Sitemap: http://192.168.1.193/sitemap.xml
4. Nuxt フロントエンド npm run build:prod はバックエンドへのパッケージを作成します
7. sitemap.xmlをサーバーにアップロードする方法
这里以服务器Nginx为例
1. ここにアップロードします
2. Nginx設定ファイルでsitemap.xmlのアクセスパスを設定します。
Nginx リロードを設定した後、リロードし、Web ページの URL/sitemap.xml を開いてアクセスできるかどうかを確認します。アクセスできる場合は、Web サイトが Baidu に正常に含まれていることを意味します。
8. 余談
この記事は最近書かれたばかりであり、いくつかの誤字や特定の文章表現は続報で修正される予定です。