Django制作amp页面的测试

什么是AMP？为什么要制作AMP页面？

AMP，Accelerated Mobile Pages，加速移动页面，由Google带领开发的开源项目，目的是为提升移动设备对网站（非大陆网站）的访问速度。提升的性能据说可以达到15%~85%（基于第五代Google Nexus在3G网络下的测试）。

怎么制作AMP页面？

官网有详细的中文文档，简单介绍下，贴一个官方html样本如下：

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/zh_cn/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
</script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

官网建议使用https协议制作amp页面，其中关于schema.org（可选元数据）并非必选。里面还有一些注意事项，例如，script用于加载 AMP JS 库，应尽早包含此脚本；rel="canonical"指向常规html文档，如果不存在，则指向自身链接，该标签必须存在；viewport建议加入initial-scale=1等等。

注意事项这么多，怎么知道哪里出错了呢？目前我经常使用的方法有两个，一个是之前同事推荐的使用谷歌插件-AMP Validator来进行排查，另外一个是研究AMP官网发现可以在相对应的网址加入#development=1参数来进行排查，例如：

http://localhost:8000#development=1

再打开调试控制台，可以看到是因为缺少了noscript标签。

Django如何制作amp页面最省心？目前踩坑的几点备注如下：

1.如果想要将一套css层叠样式表同时应用于web站点和amp站点，那么建议在写css或者scss时使用id选择器或者类选择器，踩坑的点会发生在web站点中直接通过元素选择器img定义了图片边距，但是在amp中，img标签被替换为了等效标记amp-img，这时候amp样式表中定义的元素选择器img自然也就失效了。

2.可以在Templates目录下新建一个amp目录，用于存放amp页面，各页面的命名方式还是一样（方便后续反转url记忆），如下:

我在amp下再次新建了一个base目录，用于存放base.html，这个用于制作头部菜单和底部栏目，因为这两个地方一般来讲我是不会改变的，这样其它的页面想要使用它，只需要一行extends代码即可，然后在base.html的同级目录我再次新建了一个basecss.html文件，该文件用于存放样式表文本，为什么要这么做，因为amp的特性之一就是“所有 CSS 都必须内嵌并具有大小限制”，而“内嵌”，意味着要么使用行内样式，要么使用内嵌，当然内嵌式会更方便一点，毕竟有选择器的存在；但是这样会导致html中的代码太过于混杂，不便于维护，而创建一个basecss.html就可以愉快的将所有css代码丢到里面去了，而在base.html中只需要include一下即可

# base.html基础代码

<head>       
...
<style amp-custom>
  {% include 'amp/base/basecss.html' %}
  {% block ampCus %}
  {% comment %} 预留给每个html自定义的css空间 {% endcomment %}
  {% endblock ampCus %}
</style>
...
</head>

可以看到里面我还开了个口，命名为ampCus区块，因为amp中只允许存在一个amp-custom标签，该区块可以用于后续其它html中的自定义css样式。

3.如果想使用form表单，则必须在head中定义amp-form的script标签，然后在form表单中增加target属性；如果想使用img标签，则必须替换为amp-img，而且必须声明大小（width和height）这是amp的“静态调整所有资源的大小”特性。

4.在实际测试中，我发现样式表中类选择器的padding内边距属性有可能会导致amp页面和html不一致，但是margin外边距则不会，我还尝试设置了box-sizing: border-box;，但是具体的原因还没有找到。

5.我在写网站布局时借用了一点bootstrap前端框架，确实用的很爽，但是在改造amp页面时就懵逼了，前面第2点说过amp特性之一是有大小限制的，最大50k（似乎还有50000字节的限制，未确认），而bootstrap未瘦身前是400k+，min版本也有130k，实在太过臃肿了，而我对前端也只懂得皮毛，想要改造bootstrap也是痴心妄想，还好，查阅bootstrap文档时，发现它有一个定制功能，例如，我只用到了它的翻页功能，所以定制Pager就可以，只有5k大小，这样对web页面其实也是有好处的，在大流量情况下，这就是16倍带宽的差距！

至于为什么我知道去定制pager就可以，可以去读一下官网的全局 CSS 样式和组件章节。

另外，在django模板中，我们是可以使用使用全局request来获取一些内容的，例如协议，路径，参数等：

request.scheme
request.get_host
request.path_info

请注意，如果想要让谷歌快速的识别amp页面，不仅仅是在amp页面中指定canonical规范的link，还应该在web界面中增加amphtml标记，例如：

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

参考：

#amp官网
https://amp.dev/zh_cn/
#amp工作原理
https://amp.dev/zh_cn/about/how-amp-works/

#bootstrap定制
https://v3.bootcss.com/customize/
#谷歌网页测速评分工具
https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN

#官方amp指导
https://amp.dev/zh_cn/documentation/guides-and-tutorials/start/create/basic_markup/?format=websites
#使您的页面可被轻松发现
https://amp.dev/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/discovery/?format=websites

YOLO813

Django制作amp页面的测试