Vue SSR 项目 Nuxt.js 框架之《设置mate与定义化html模板》

html-css07

Vue SSR 项目 Nuxt.js 框架之《设置mate与定义化html模板》,第1张

在做一些SEO的时候,一般会设置meta信息,或者做移动端项目的时候会设置一下视口等。我们一起看下在 nuxt 中如何设置 meta 和 head 内容的,以及如何定义化 html 模板。

重启后查看源码就可以看到我们设置的 head 信息了~~

页面个性化设置的时候,需要在页面里写入 head 函数并返回一个对象,如下:

这样就完成了每个页面的个性化的 meta 等一些 head 信息

每个页面的个性化设置 head 信息可以每个页面都写一个 head 函数去设置,但显得臃肿也不利于维护。我们可以在 plugins 的 mixins 文件里混入一个全局方法,每个页面去调用,以此来实现个性化的 meta 信息设置。

混入后,每个页面使用如下:

处理以上提到的设置 head 信息的方式,还可以通过定义化 html 模板来实现,但需要遵循nuxt的一些规则,比如:名称必须为 app.html ,而且必须用 双花括号 获得已设置的信息等,如下:

HTML格式的网页模板用:

1、ages 放图片的

2、index.html 主页

3、style 修改样式

4、layout 网页布局框架——主页

这个用框架最好实现也最好用的。

<frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">

<frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />

<frameset cols="80,*" frameborder="no" border="0" framespacing="0">

<frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" />

<frame src="right.html" name="mainFrame" id="mainFrame" />

</frameset>

</frameset>

注:

top.html 为顶部文件

left.html为左边文件

right.hmtl为右边文件