本站已全面启用AMP

发表于 分类于 Waline： 阅读次数： 本文字数： 437 阅读时长 ≈ 2 分钟

早有听闻 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 和百度了。