本站已全面启用AMP

早有听闻Google的AMP,能够显著加快网站的移动访问。现在本站终于全面启用了AMP,现在已经有部分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主题v6.4.0,这个版本已有提供用户自定义增加内容的设置。

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

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

在文件中添加如下内容。

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

修改站点配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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.
validateAMP: true # To AMP HTML validate automatically, please set true.

部署

1
2
hexo clean
hexo g -d

查看效果

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

Google的AMP测试

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

您的支持将是对我最好的鼓励!