More Settings
You can freely cutomize the template(ejs or pug) and style(CSS or Stylus or Sass). Please edit template files included in the /amp-template/ . Also , template directory can change in the _config.yml.
generator_amp:
templateDir: amp-template # Please customize template files included this folder .
cssFilePath: sample/sample-amp.css #(optional) Location of css or stylus or sass file to use
templateFilePath: sample/sample-amp.ejs #(optional) Location of ejs or pug template file to useamp-template/sample-amp.ejs and amp-template/sample-amp.css is a very simple template , so please customize it as you like . To customize template , please see wiki - How to customize css file ?
If you have a cool design template please let me know. I would like to introduce your template in this chapter.
This plugin can set the following options for more detail. Please edit _config.yml.
# hexo-generator-amp
# Advanced Settings of hexo-amp-generator
generator_amp:
# 1. Google Adsense option
substituteGoogle_adsense: #(optional)
data_ad_client: ca-pub-123456789876543 #(optional)
data_ad_slot: 0123456789 #(optional)
layout: responsive #(optional)
width: 300 #(optional)
height: 250 #(optional)
data_ad_slot_matched: 54678901234 #(optional)
layout_matched: fixed-height #(optional)
# width_matched: 300 #(optional)
height_matched: 1221 #(optional)
# 2. Template Option
templateDir: amp-template
assetDistDir: amp-dist
logo:
path: sample/sample-logo.png
width: 600 # width <= 600px
height: 60 # width <= 60px
logo_topImage: #(optional)
path: sample/sample-yoursite-logo.png #(optional)
width: 1024 #(optional)
height: 400 #(optional)
substituteTitleImage:
path: sample/sample-substituteTitleImage.png
width: 1024 # width >= 696px
height: 800
placeholderImg: #(optional)
path: sample/sample-placeholder.png
cssFilePath: sample/sample-amp.css #(optional) Location of css or stylus or sass file to use
templateFilePath: sample/sample-amp.ejs #(optional) Location of ejs or pug template file to use
generateAmpPath: :year/:month/:day/:title/amp/ #(optional) Custom AMP HTML Path
# # Sample Template's option
# theme: #(optional) Sample AMP template's option
# menu: #(optional) Sample AMP template's menu option
# diary: /categories/diary/ #(optional) example menu
# archives: /archives #(optional) example menu
# facebook_app_id: 1234567890 #(optional) api_id is necessary with the facebook's social button.
# facebook_admins: 1234567890 #(optional) admins is necessary with the facebook's social button.
# share_button: #(optional) Share button option
# twitter: true #(optional) Enable Twitter share button
# facebook: true #(optional) Enable Facebook share button
# google: true #(optional) Enable Goolge+ share button
# hatena: true #(optional) Enable Hatena share button
# tumblr: true #(optional) Enable Tumblr share button
# category_posts: true #(optional) Enable category posts
# category_posts_detailed: true #(optional) Enable detailed category posts
# latests: true #(optional) Enable latests posts
# list_limts: 6 #(optional) This option limit the number of display in the above lists (default:5)
# authorLink: #(optional) Enable footer profile link
# mail_url: https://your-mail-form/
# twitter_id: xxx
# facebook_id: xxx
# youtube_channel: xxx
# instagram_id: xxx
# github_id: xxxx
# 3. Google Analytics Option
google_analytics: UA-123456789-1 #(optional)
# 4. Minify Option
html_minifier: #(optional)
# 5. Display warning Log
warningLog: true #(optional)
# 6. Cache Option
cache: hexo-generator-amp-cached.json #(optional) Enable cache (Improve generation speed)
# onlyForDeploy: false #(optional) #Deprecated <= v1.0.3
# 7. Automatically validate AMP HTML
validateAMP: true #(optional)
# 8. Footer Option (authorDetail)
authorDetail:
authorReading: Your name description #(optional)
avatar: #(optional)
path: sample/sample-avator.png #(optional)
width: 150 #(optional)
height: 150 #(optional)
description: Self introduction #(optional)
copyright_notice: The footer copyright notice #(optional)Option can use as follows.
If an advertisement is found in an article, it will be converted to AMP specification.
Adout Google Adsense , please see Create an AMP ad unit and Matched content for the details.
| option | description |
|---|---|
| data_ad_client | substitute data-ad-client
|
This setting can set the option about Google Adsense unit. Adout Google Adsense , please see Create an AMP ad unit for the details.
| option | description |
|---|---|
| data_ad_slot | substitute data-ad-slot
|
| layout | adsense unit's layout
|
| width | adsense unit's width
|
| height | adsense unit's height
|
This setting can set the option about Google Adsense Matched content unit. Adout Google Adsense Matched content , please see Matched content for the details.
| option | description |
|---|---|
| data_ad_slot_matched | Matched content unit's data-ad-slot
|
| layout_matched | Matched content unit's layout
|
| width_matched | Matched content unit's width
|
| height_matched | Matched content unit's height
|
| option | description |
|---|---|
| templateDir | File path of a your AMP template files. |
| assetDistDir | File path of a your public AMP Assets. |
logo use for AMP with structured data .
| option | description |
|---|---|
| path | File path of a your logo (schema.org logo for AMP) image. |
| width | Width of a your logo (schema.org logo for AMP) image. (width <= 600px) |
| height | Height of a your logo (schema.org logo for AMP) image. (height <= 60px) |
| option | description |
|---|---|
| path | File path of a your site logo image. |
| width | Width of a your site logo image. |
| height | Height of a your site logo image. |
substituteTitleImage use for AMP with structured data .
This plugin search automaticaly the information that the AMP carousel need for structured data(schema.org/BlogPosting).
However, if an image that use for schema.org/BlogPosting can not be found in content , this substitute image is used.
| option | description |
|---|---|
| path | File path of a your substitute title image. (Use this when the image is not in the markdown) |
| width | Width of a your substitute title image. (width >= 696px) |
| height | Height of a your substitute title image. |
This option is the image path used in <amp-iframe>'s placeholder. Please see ampproject/amp-iframe for the detial.
| option | description |
|---|---|
| path | File path of a your placeholder image. |
| option | description |
|---|---|
| cssFilePath | File path of a your CSS or Stylus or Sass file for AMP. (e.g. ./sample-amp.css) It is a validation error if the author stylesheet is larger than 50,000 bytes. |
| templateFilePath | File path of a your template file (ejs or pug) for AMP. (e.g. ./sample-amp.ejs) |
If you want to change the path of generate amp files , please set the this option. This option can be describe like Permalinks.
| option | description |
|---|---|
| generateAmpPath | path of generate amp (default:./your-posts-parmalink/amp/index.html) |
To use hexo-abbrlink , Please read the following link.
This option allows you to specify which menus can be used with the sample theme (sample-amp.ejs). Please set the menu name and path.
Also , theme.facebook_app_id and theme.facebook_admins is necessary with the facebook's social button. Please see the follow how to create facebook app id.
https://developers.facebook.com/docs/apps/register
This option allows you to specify which social links can be used with the sample theme (sample-amp.ejs). Please set the social id.
| option | description |
|---|---|
| google_analytics | Your google analytics tracking ID. |
| option | description |
|---|---|
| html_minifier | Enabled html_minifier. Please see kangax/html-minifier for the details. |
| option | description |
|---|---|
| warningLog | Enabled warnings and AMP HTML Validation . |
This option improves the generation speed. Old articles will not be generated AMP HTML again and skip AMP HTML Validation . Old articles will use cache.
| option | description |
|---|---|
| cache | Enabled cache |
To AMP HTML validate automatically, please set true. Please see Validate AMP HTML for more detail.
| option | description |
|---|---|
| validateAMP | Enable AMP HTML validate automatically |
This plugin generated the AMP HTML. Output file path is ./your-posts-parmalink/amp/. Next , you should validate AMP HTML with the following procedure.
- Please open your AMP HTML page in Chrome DevTools.
- The Chrome DevTools console can check for AMP HTML. please Append
http://localhost:4000/your-posts-parmalink/amp/#development=1to the URL. Please see below for the details.
Accelerated Mobile Pages Project - Validate AMP Pages
How to validate AMP - my blog (Japanese)
This plugin can validate without being conscious AMP HTML automatically by amphtml-validator ( AMP HTML validator command line tool ).
To use Internal Validation , please change the validateAMP: true.
# Please edit _config.yml.
generator_amp:
validateAMP: true # To AMP HTML validate automatically, please set true.For example , when occur the AMP validation error , this plugin displaying following error message .
The content of the message is the same as AMP Validator .
This option use for sample template for AMP HTML.
| option | description |
|---|---|
| authorReading | Your name description. |
| option | description |
|---|---|
| path | File path of a your avator image. |
| width | Width of a your avator image. |
| height | Height of a your avator image. |
| option | description |
|---|---|
| description | Self introduction. |
| option | description |
|---|---|
| copyright_notice | The footer copyright notice. |
This plugin search automaticaly the information that the AMP carousel need for structured data(schema.org/BlogPosting)
But you can also specify information for each article.
You can choose URL of image in BlogPosting(schema.org) on a per post. If post is not contain this option , this plugin search the first image's URL from the content.
For example : hello-world.md , Please set the following options.
---
title: Hello World
ampSettings:
titleImage:
path: titleImage-on-the-local-folder.png
---
Welcome to [Hexo](https://hexo.io/)! This is your very first post.
...
Supports the following external services.
- Twitter (amp-twitter) for hexo-tag-twitter
- Youtube (amp-youtube)
- Vimeo (amp-vimeo)
- Instagram (amp-instagram) for hexo-tag-instagram
- Google Adsense (amp-ad)
- Valuecommerce (amp-ad)
- Sound Cloud (amp-soundcloud) for hexo-tag-soundcloud
In addition to the above, the embedded <iframe> tag is converted to amp-iframe tag.
If you want to supports other services , please add new filter and give me pull request .