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

执行以后，系统显示:

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 文件，在末尾添加如下配置信息

# 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

即可完成发布。