GHOST CMS - Google AMP谷歌地图
Google AMP
Ghost supports AMPAccelerated Mobile Pagesfor the posts in your publication.
Overview
The AMP project is a Google led initiative that enables lightweight versions of any piece of content on a site which offers speed and performance your readers in the browser.
In Ghost, a single handlebars template is used to automatically render AMP versions of the posts on your site. The defaultamp.hbstemplate offers all of the basic functionality of AMP, but it's possible to build on top of this to include other AMP supported features if required!
The AMP feature is enabled by default, or you can disable it in the settings of Ghost admin if you'd prefer not to use it.
Route
To access any post rendered using theamp.hbstemplate on your site, add/amp/to the end of any post URL on your publication. The parent post also has a canonical link to it's AMP equivalent.
Template
The amp context always uses theamp.hbstemplate. Ghost will look for this template within your theme files and use this by default.
The template structure is as follows:
.
├── /assets
| └── /css
| ├── screen.css
| ├── /fonts
| ├── /images
| ├── /js
├── default.hbs
├── index.hbs [required]
└── post.hbs [required]
└── amp.hbs [optional]
└── package.json [required]Check out thedefault templatein full.
Data
Theampcontextprovides access to the post object which matches the route. As with all contexts in Ghost, all of the@blogglobal data is also available.
When outputting the post, you can use a block expression ({{#post}}{{/post}}) to drop into the post scope and access all of the attributes. See a full list ofattributes.
AMP features
AMP consists of three different parts:
- AMP HTML
- AMP JS
- Google AMP Cache
AMP has many restrictions for optimal performance. For example, JavaScript can only be used in certain circumstances, CSS must be in the correct tags inside of the<head>section, and AMP HTML must be used instead of common HTML.
If you are making adjustments to youramp.hbsfile, follow the documentation provided on the officialAMP docssite.
Editedamp.hbstemplates can be updated in your theme by uploading a .zip of your updated theme in Ghost admin.
Debugging AMP
Since AMP has strict restrictions, it's important to ensure that your code passes AMP validation. The quickest way to do this is to add#development=1to the AMP URL, and check for validation errors in your browser console.
Helpers
Because theampcontext is using thepostdata, you can use almost everypost helperinside of the{{#post}}{{/post}}block expression. In addition to this, there are three helpers especially forampwhich are decribed below.
{{amp_ghost_head}}
This helper belongs just before the</head>tag inamp.hbsand outputs structured data in JSON/LD, Facebook Open Graph and Twitter cards, as well as an RSS URL path. It is a simplified version of{{ghost_head}}for AMP.
{{amp_components}}
This helper can exist just before the</head>tag inamp.hbsand can output the necessary javascript if your content contains a.gif, an<iframe>or an<audio>tag.
{{amp_content}}
This helper transforms post content into valid AMP HTML.
<img>transforms to<amp-img>.giftransforms to<amp-anim><iframe>transforms to<amp-iframe><audio>transforms to<amp-audio>
{{img_url}}helper
There are special requirements for using the{{img_url}}helper. It must be wrapped in an<amp-img>tag and must provide awidthandheightproperty. This only works for post images.
Summary
You've now got an understanding of how Ghost implements AMP pages on your publication, have an understanding of how theamp.hbstemplate works should you decide to develop it further for your site. Always refer to the officialAMP documentationwhen making adjustments to your AMP template!
1、unity webgl获取跳转页面的url信息
2、大道至简读后感
3、Python基础（二）之数据类型和运算（8）——集合
4、php版判断是否为ajax请求的小demo
5、Django中的ORM