0%

Hexo Amp 支持

起因

Google 的 AMP,能够显著加快网站的移动访问。

AMP 简介

Accelerated Mobile Pages(简称 AMP,意为 “加速移动页面”)是 Google 带领开发的开源项目,目的是为提升移动设备对网站的访问速度。AMP 也可指其派生的标准和库等项目成果。AMP 在 HTML 等广泛使用的网络技术基础上进行改良,它的核心称作 AMP HTML,是 HTML 的一种。服务于技术预览期结束后的 2016 年 2 月正式发布。

Hexo 博客启用方式

本站采用 NexT 主题,就以此作为演示。

安装 hexo-generator-amp 插件

1
npm install hexo-generator-amp --save

如果不成功,加个 sudo 再试一下。

修改主题

本文使用的是 NexT 主题 v7.8.0。

打开 themes/next/layout/_partials/head/ 文件夹中的 head.swig 文件。

1
vi themes/next/layout/_partials/head/head.swig

在文件中添加如下内容。

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

注意 这个版本中有个bug

利用 hexo s 本地测试的时候, is_post() 判断没问题,只有在 Post Render 的时候才会返回True

但是 hexo g 或者 hexo d ,所有情况返回的都是 False

Bug 是由于 Next ThemeHead 使用了缓存机制. 只会生成一次 Head 后面所有的文章重用这个缓存,导致所有情况返回的都是 False

修改方法

打开 themes/next/layout/_layout.swig 文件。

1
vi themes/next/layout/_layout.swig

将这段修改掉

1
{{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}

修改为下面这段 不容许生成缓存

1
{{ partial('_partials/head/head.swig', {}) }}

修改站点配置

打开站点配置文件 _config.yml ,加入以下内容。

1
2
3
4
5
6
7
8
9
10
11
12
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.

部署

1
2
hexo clean
hexo g -d

查看效果

在我的每篇文章地址后加上./amp/ 即可看到效果,以本文为例。

Google 的 AMP 测试

可以使用 Google 的 AMP 测试来测试你的 AMP 网页的有效性。然后你就能放心地将网页提交给 Google 和百度了。

Hexo 页面上显示有Amp链接

Amp页面

AMP 提交搜索引擎

AMP SiteMap

SiteMap 支持AMP

提交给百度

提交给谷歌

相关文章

本站已全面启用 AMP

Hexo博客系列

欢迎关注我的其它发布渠道