• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

juusaw/amp-jekyll: Build Accelerated Mobile Page versions of your Jekyll posts

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称：

juusaw/amp-jekyll

开源软件地址：

https://github.com/juusaw/amp-jekyll

开源编程语言：

Ruby 78.2%

开源软件介绍：

amp-jekyll

Important: This project is no longer actively maintained as I am not using Jekyll (or AMP) that much nowadays. In case you are interested in maintaining the project, I'm happy to provide support.

Jekyll plugin for creating Accelerated Mobile Page versions of posts. Supports Jekyll version 3 and 4.

Gem Version

AMP project

Usage

Using the gem

  • Add gem amp-jekyll to your Gemfile and run bundle
  • Add the gem to your _config.yml like this:
plugins:
  - amp-jekyll

NOTE: Older Jekyll versions (below 3.6.0) use the key gems instead of plugins. When building a site with such version, use the old key.

Adding the plugin manually

  • Place the Ruby files in lib/jekyll (amp_generate.rb and amp_filter.rb) in folder _plugins at the root of the project

Then perform the following

  • Place the layout file (amp.html) to the _layouts folder
  • Add amphtml-link to post heads (see page linking below) (Add CSS styles to the html template)
  • Generate your site with jekyll build

Setting things up

The AMP standard is somewhat restrictive on allowed HTML elements and requires some extra information on element placing. To make sure that your generated AMP pages are valid by the standard, you can run the AMP version of your post with #development=1 appended to the URL and check the browser's Javascript console for the validation.

Several HTML elements must be replaced with tags specified in the AMP specs to ensure compatibility with the standard. The amp_filter.rb Jekyll filter replaces the tags after converting the markdown to HTML. At the moment only replacing <img> tags is supported.

To disable image responsivity, add false to amp_images responsive parameter in amp.html. This is enabled by default for header and footer.

The AMP folder

Specify amp folder in _config.yml as ampdir: YOURDIR

Page linking

The easiest solution is adding the following conditional expression around the tag.

{% if page.path contains '_posts' %}
  <link rel="amphtml" href="{{ page.id | prepend: '/YOURDIR' | prepend: site.baseurl | prepend: site.url | append: '.html' }}">
{% endif %}

CSS

CSS rules for AMP must be included inline in the <style amp-custom> tag in the <head> element in the HTML. You can write the CSS rules by hand or use jekyll includes. Do note that the AMP specification forbids the use of some CSS selectors and attributes. Because of this, it is not a good idea to include the main stylesheet by default.

Skipping Pages

Sometimes there are pages we don't want to be turned into AMP pages, normally this is because they require HTML elements or JavaScript that would make them invalid.

In any post we want to skip simply add;

skip_amp: true

And update your amphtml block to look like;

{% if page.path contains '_posts' %}
  {% unless page.skip_amp %}
    <link rel="amphtml" href="{{ page.id | prepend: '/YOURDIR' | prepend: site.baseurl | prepend: site.url }}">
  {% endunless %}
{% endif %}



鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
andrewbanchich/editorial-jekyll-theme: A Jekyll version of the &quot;Editorial&q ...发布时间：2022-07-07
下一篇：
dashingcode/front-cover: Front Cover jekyll theme发布时间：2022-07-07
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap