Hexo常用插件介绍 hexo-generator-amp

AMP 全称为: Accelerated Mobile Pages,其目标是通过加速移动网络的网页加载从而提升体验,是谷歌主推的一项技术。本文描述如何在 Hexo 生成的静态中实现 AMP 网页。

在 Hexo 中,已经有现成的插件(plugin)可以帮助我们完成这项工作,这个插件就是: hexo-generator-amp。

按照 hexo-generator-amp

进入你的 Hexo 项目目录,执行:

1
yarn add hexo-generator-amp

进行安装,如果你使用的是 npm, 则执行:

1
npm install hexo-generator-amp --save

执行以后,系统显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
yarn add v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "hexo-deployer-git > babel-eslint@10.0.2" has unmet peer dependency "eslint@>= 4.12.1".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
└─ hexo-generator-amp@3.1.2
info All dependencies
├─ amphtml-validator@1.0.23
├─ colors@1.1.2
├─ follow-redirects@1.7.0
├─ hexo-generator-amp@3.1.2
├─ image-size@0.6.3
└─ pug-load@2.0.12
Done in 14.45s.

说明安装成功。

修改配置文件

注意:这里的配置文件指的是主配置文件,也就是在项目根目录的那个,而不是在主题里的

打开 _config.yml 文件,在末尾添加如下配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# hexo-generator-amp
# The following settings is the quick start options.

generator_amp:
templateDir: amp-template
assetDistDir: amp-dist
logo:
path: sample/sample-logo.png
width: 600
height: 60
substituteTitleImage:
path: sample/sample-substituteTitleImage.png
width: 1024
height: 800
warningLog: false # To display warning, please set true.

修改主题模板文件

不同的主题需要修改的文件不同,next 主题需要修改 /themes/next/layout/_partials/head/custom-head.swig 文件,简单加入以下内容即可:

1
2
3
{% if is_post() && config.generator_amp %}
<link rel="amphtml" href="./amp/index.html">
{% endif %}

如果 Next 主题的版本比较老,找不到 /themes/next/layout/_partials/head/custom-head.swig 文件,就修改 /themes/next/layout/_partials/head/head.swig 文件,也是简单的把上面的代码加入到文件末尾即可。

发布博客

依次执行:

1
2
3
hexo clean
hexo g
hexo d

即可完成发布。

本文标题:Hexo常用插件介绍 hexo-generator-amp

文章作者:梅老师

发布时间:2019年08月10日 - 10:08

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/hexo/hexo-plugin-generator-amp/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。