hexo-generator-amp
Advanced tools
AMP ⚡ HTML (Accelerated Mobile Pages Project HTML) generator for Hexo.
This plugin automatically generates AMP HTML pages.
Output file path is ./your-parmalink/amp/. Also, You can freely choose the template(.ejs) and style(.css).
Added cache option. This option improves the generation speed. Old articles will not be generated AMP HTML again. Old articles will use cache.
First of all, please see the examples. The following is my hexo blog.
$ npm install hexo-generator-amp --save
First, add the following in your template files. For example , Please edit themes/(your-theme)/layout/_partial/head.ejs.
<% if (is_post() && config.generator_amp){ %>
<link rel="amphtml" href="./amp/index.html">
<% } %>
Please refer follow as about how to use this plugin with based other templates.
Please set the following options. Please edit _config.yml.
# The following settings is the quick start options.
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 # If you want to validate, please set true.
Starts a local server. By default, this is at http://localhost:4000/.
$ hexo server
If occured plugin error , Please refer #17 and other issue .
This plugin generated the AMP HTML. Output file path is ./your-parmalink/amp/.
Now validate your AMP pages. Open your AMP page in your browser. Open the Chrome DevTools console and check for validation errors. Please Append http://localhost:4000/your-parmalink/amp/#development=1 to the URL. Please see below for the details.
Accelerated Mobile Pages Project - Validate AMP Pages
How to validate AMP - my blog (Japanese)
If you want to use AMP Validator in this plugin , please change the warningLog: true.
# If you want to use AMP Validation , please edit _config.yml.
generator_amp:
warningLog: true # If you want to validate, please set true.
For example , if occur the AMP validation error , this plugin displaying following error message .
This plugin can set the following options. Please edit _config.yml.
# 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)
width: 336 #(optional)
height: 280 #(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
cssFilePath: sample/sample-amp.css #(optional)
templateFilePath: sample/sample-amp.ejs #(optional)
# 3. Google Analytics Option
google_analytics: UA-123456789-1 #(optional)
# 4. Minify Option
html_minifier: #(optional)
# 5. Log Option
warningLog: true #(optional)
# 6. Cache Option
cache: hexo-generator-amp-cached.json #(optional)
# onlyForDeploy: false #(optional) #Deprecated <= v1.0.3
# 7. 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 for the details.
| option | description |
|---|---|
| data_ad_client | substitute data_ad_client id |
| data_ad_slot | substitute data_ad_slot id |
| width | substitute ad width |
| height | substitute ad height |
| option | description |
|---|---|
| templateDir | File path of a your AMP template files. |
| assetDistDir | File path of a your public AMP Assets. |
logo| 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) |
logo_topImage| 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| 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. |
| option | description |
|---|---|
| cssFilePath | File path of a your css 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 for AMP. (e.g. ./sample-amp.ejs) |
| 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. |
| option | description |
|---|---|
| cache | This option improves the generation speed. Old articles will not be generated AMP HTML again. Old articles will use cache. |
authorReading| option | description |
|---|---|
| authorReading | Your name description. |
avatar| option | description |
|---|---|
| path | File path of a your avator image. |
| width | Width of a your avator image. |
| height | Height of a your avator image. |
description| option | description |
|---|---|
| description | Self introduction. |
copyright_notice| option | description |
|---|---|
| copyright_notice | The footer copyright notice. |
You can choose path of schema.org image on a per post. If your post is not contain this option , this plugin search image from 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.
...
If image on the external , Please set the width and height options.
---
title: Hello World
ampSettings:
titleImage:
path: http://titleImage-on-the-external.png
width: 1024
height: 800
---
Welcome to [Hexo](https://hexo.io/)! This is your very first post.
...
Supports the following external services.
MIT
FAQs
AMP ⚡ HTML (Accelerated Mobile Pages) generator for Hexo.
The npm package hexo-generator-amp receives a total of 108 weekly downloads. As such, hexo-generator-amp popularity was classified as not popular.
We found that hexo-generator-amp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.