在Nuxt.js中使用站点地图

发布于1/19/2020 来自:「前端知否」微信公众号

在本文中,我想研究使用sitemap module模块在Nuxt中创建站点地图的不同选项。

如果您要创建所有路线和页面的站点地图并添加动态路线,请求后端API,或者甚至要使用站点地图索引文件创建多个站点地图,此模块都将为您提供所需的一切。

内容

  • 站点地图模块选项。
  • 具有路线的简单单个站点地图。
  • 从API请求的站点地图。
  • Sitemap中的几个索引。
  • 多语言网站的站点地图。

模块选项

以下是所有可用选项:

  • route(array | function)

您可以在此处手动将路由添加到绝对放置在站点地图中,或使用该属性从API请求路由,以便可以从您的数据库动态生成。

import axios from 'axios';
//...
{
routes: [
'catalog/best-offers',
'catalog/chairs'
],
// or
routes: () => {
return axios.get(`my.own.api.com/getSitemapRoutes`);
}
}

  • path(string)

这是站点地图的路径。 如果使用sitemaps属性,则默认值是/sitemap.xml(通常)和 /sitemapindex.xml

  • hostname(string)

如果定义了主机名,则无论应用程序域如何,所有路由都将覆盖该主机名。 模块逻辑是,如果未定义主机名,则应用程序将检查当前请求是否为HTTPS,并获取当前应用程序域。 然后,模块将基于此构建主机名。 如果您使用nuxt-i18n,并且您的应用程序具有多个域,则该模块应根据请求的域明确定义当前应用程序。

  • cacheTime(number)

这是您之前定义的站点地图路由的缓存TTL。

  • exclude(string[])

在这里,您可以为Nuxt应用程序排除一些静态路由:

// ...
{
exlude: [
'catalog/',
'blog-*/',
'*.html',
]
}

或者,专门针对站点地图索引,当您不想为每个站点地图复制静态路由时,可以执行以下操作:

// **
{
sitemaps: [
{
path: 'sitemap-normal.xml',
exclude: [
'/cabinet',
'/cabinet/*',
'/cabinet/recruiter/*',
'/account-removed',
'/search-by-cv',
],
},
{
path: 'sitemap-popular.xml',
routes: getPopularSitemap,
exclude: ['/**'],
},
{
path: 'sitemap-some-other.xml',
routes: getSitemapSomeOtherLinks,
exclude: ['/**'],
},
]
}

  • filter(function)

您可以传递一个函数来过滤Nuxt从您的路线自动生成的所有选项。 示例:https://github.com/nuxt-community/sitemap-module#filter-optional---function

  • gzip(boolean)

是否压缩,由您决定。

具有路线的简单单个站点地图

因此,通常,如果您拥有自己的投资组合网站或类似的网站,则只想使用静态路线生成站点地图。 想象一下,您的网站具有以下结构:

页数:

  • 博客
  • 专案
  • 文章
  • 其他
  • Index.vue

最后,您只想将其放入站点地图中。 您可能会得到如下所示的结果:

sitemap: {
path: '/sitemap.xml',
cacheTime: 1000 * 60 * 60 * 2,
trailingSlash: true,
gzip: true
},

具有动态路线的站点地图

动态路线是什么意思? 当您拥有元素页面或其他内容时,这是一条类似于/blog/_post.vue的路由。

在这种情况下,模块当然不能自行生成这些ID,而这是在routes属性派上用场的时候:

import axios from 'axios';
//...
sitemap: {
path: '/sitemap.xml',
cacheTime: 1000 * 60 * 60 * 2,
trailingSlash: true,
gzip: true,
routes: () => {
return axios.get(`my.own.api.com/getSitemapRoutes`);
}
},

// 或者一个工具方法
import getRoutes from '../util.js'
//...
{
routes: getRoutes
}

多个索引页

现在,有了一些静态路由和动态路由,也许有必要为它们分别设置站点地图。

当您拥有大量动态网址,并希望将它们分隔在不同的站点地图中时,它将变得更加方便。 这是我的实现:

import axios from 'axios';
//...
const getSitemapBlogsFn = sitemapIndex => () =>
axios.get(`http://my.own.api/sitemap_routes?index=${sitemapIndex}`)
.then(response => response && response.data)
.then(offers =>
offers.map(({ code }) => ({
url: `http://myblog.org/blog/${code}`,
changefreq: 'daily',
priority: 1,
})),
);

const getSitemapsConfigurations = () =>
range(30).map(index => ({
path: `sitemap-${index}.xml`,
routes: getSitemapBlogsFn(index),
cacheTime: 1000 * 60 * 60 * 2,
trailingSlash: true,
exclude: ['/**'], //here we exclude all static routes
}));
//...
{
sitemap: {
path: '/sitemap.xml',
sitemaps:
[
{
path: 'sitemap-routes.xml',
cacheTime: 1000 * 60 * 60 * 2,
trailingSlash: true,
},
...getSitemapsConfigurations(),
],
},
}

在后端的内部,根据index参数,您需要更改OFFSET请求元素。

多语言网站的站点地图

在这里,唯一需要担心的细节是不设置主机名,这样域名就将从到达Nuxt服务器的请求中获取。

另外,如果您的域名托管是通过CNAME或负载均衡器进行的,那么到达Nuxt的请求将不是HTTPS,而是简单的HTTP。

在这种情况下,您需要确保在请求中将x-forward-proto设置为HTTP。 然后,模块将识别出原始请求是HTTP,并将HTTPS链接放置到站点地图。

最后

该模块非常方便。 我一年前开始使用它,仅使用了路由和静态路由选项,现在它已经改进了很多。

希望它对您有用,可以帮助改善您的Nuxt应用程序或鼓励您使用这个令人难以置信的框架!