<commit_before># hexo-generator-amp

AMP ⚡ HTML (Accelerated Mobile Pages Project HTML) generator for [Hexo](https://github.com/hexojs/hexo).

![Screenshot](src/img/hexo2amp.png)

## Orverview

This plugin automatically generates new [AMP HTML](https://www.ampproject.org/docs/get_started/about-amp.html) pages and [validate AMP HTML automaticaly](https://github.com/tea3/hexo-generator-amp#internal-validation-automatically-validate-amp-html).
Output file path is `./your-posts-parmalink/amp/`.  Also, You can [freely cutomize](https://github.com/tea3/hexo-generator-amp#can-i-customize-template-) the template(.ejs) and style(.css). Further , you can also [use caching](https://github.com/tea3/hexo-generator-amp#6-cache-option) to speed up generation time.

## DEMO

First of all, please see the examples. The following is my hexo blog.

- [HTML page](https://tea3.github.io/p/hexo-markdown-notation/) 
- [AMP HTML page (generated by this plugin) ](https://tea3.github.io/p/hexo-markdown-notation/amp/#development=1)

## Installation

``` bash
$ npm install hexo-generator-amp --save
```

## Usage

This is an easy step to publish AMP HTML.

1. [Edit your theme](https://github.com/tea3/hexo-generator-amp#1-edit-your-theme)
2. [Set the quick option](https://github.com/tea3/hexo-generator-amp#2-set-the-quick-option)
3. [Run server](https://github.com/tea3/hexo-generator-amp#3-run-server)
4. [Validate AMP HTML](https://github.com/tea3/hexo-generator-amp#4-validate-amp-html)
5. [Deploy](https://github.com/tea3/hexo-generator-amp#5-deploy)

In addition, the following things are possible.

- [Can I customize template ?](https://github.com/tea3/hexo-generator-amp#can-i-customize-template-)
- [Options](https://github.com/tea3/hexo-generator-amp#options)
- [Front-matter option](https://github.com/tea3/hexo-generator-amp#front-matter-option)
- [Supports external services](https://github.com/tea3/hexo-generator-amp#supports-external-services)

## Simply installation method

To use this plug-in simply , follow the steps below.

### 1. Edit your theme

You must add AMP HTML's link to non-AMP.

> Accelerated Mobile Pages Project - [Prepare Your Page for Discovery and Distribution](https://www.ampproject.org/docs/get_started/create/prepare_for_discovery)

First, add the following in your template files. For example , Please edit `themes/(your-theme)/layout/_partial/head.ejs` as following .

``` ejs
<% if (is_post() && config.generator_amp){ %>
  <link rel="amphtml" href="<%= config.url %>/<%= page.path %>/amp/index.html">
<% } %>
```

Please refer follow as about how to use this plugin with based other templates.

- [jade](https://github.com/tea3/hexo-generator-amp/issues/13)
- [swig](https://github.com/tea3/hexo-generator-amp/issues/14)


### 2. Set the quick option

Please set the following options. Please edit `_config.yml`.

``` yaml
# 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   # To AMP HTML validate automatically, please set true.
```

### 3. Run server

Starts a local server. By default, this is at `http://localhost:4000/`.

``` bash
$ hexo server
```

This plugin generated the AMP HTML. Please open `http://localhost:4000/your-posts-parmalink/amp/` in browser.

If occured plugin error , Please refer [#17](https://github.com/tea3/hexo-generator-amp/issues/17) and [other issue](https://github.com/tea3/hexo-generator-amp/issues?q=is%3Aissue+is%3Aclosed) .

### 4. Validate AMP HTML

This plugin generated the AMP HTML. Output file path is `./your-posts-parmalink/amp/`. You should validate AMP HTML .

#### About general validation method

Now validate your AMP HTML. First off all , open your AMP HTML page in [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/). The Chrome DevTools console can check for AMP HTML . Second , please Append `http://localhost:4000/your-posts-parmalink/amp/#development=1` to the URL. Please see below for the details.

> Accelerated Mobile Pages Project - [Validate AMP Pages](https://www.ampproject.org/docs/guides/validate.html)
<commit_msg>Menu option in _config added to ReadME<commit_after># hexo-generator-amp

AMP ⚡ HTML (Accelerated Mobile Pages Project HTML) generator for [Hexo](https://github.com/hexojs/hexo).

![Screenshot](src/img/hexo2amp.png)

## Orverview

This plugin automatically generates new [AMP HTML](https://www.ampproject.org/docs/get_started/about-amp.html) pages and [validate AMP HTML automaticaly](https://github.com/tea3/hexo-generator-amp#internal-validation-automatically-validate-amp-html).
Output file path is `./your-posts-parmalink/amp/`.  Also, You can [freely cutomize](https://github.com/tea3/hexo-generator-amp#can-i-customize-template-) the template(.ejs) and style(.css). Further , you can also [use caching](https://github.com/tea3/hexo-generator-amp#6-cache-option) to speed up generation time.

## DEMO

First of all, please see the examples. The following is my hexo blog.

- [HTML page](https://tea3.github.io/p/hexo-markdown-notation/) 
- [AMP HTML page (generated by this plugin) ](https://tea3.github.io/p/hexo-markdown-notation/amp/#development=1)

## Installation

``` bash
$ npm install hexo-generator-amp --save
```

## Usage

This is an easy step to publish AMP HTML.

1. [Edit your theme](https://github.com/tea3/hexo-generator-amp#1-edit-your-theme)
2. [Set the quick option](https://github.com/tea3/hexo-generator-amp#2-set-the-quick-option)
3. [Run server](https://github.com/tea3/hexo-generator-amp#3-run-server)
4. [Validate AMP HTML](https://github.com/tea3/hexo-generator-amp#4-validate-amp-html)
5. [Deploy](https://github.com/tea3/hexo-generator-amp#5-deploy)

In addition, the following things are possible.

- [Can I customize template ?](https://github.com/tea3/hexo-generator-amp#can-i-customize-template-)
- [Options](https://github.com/tea3/hexo-generator-amp#options)
- [Front-matter option](https://github.com/tea3/hexo-generator-amp#front-matter-option)
- [Supports external services](https://github.com/tea3/hexo-generator-amp#supports-external-services)

## Simply installation method

To use this plug-in simply , follow the steps below.

### 1. Edit your theme

You must add AMP HTML's link to non-AMP.

> Accelerated Mobile Pages Project - [Prepare Your Page for Discovery and Distribution](https://www.ampproject.org/docs/get_started/create/prepare_for_discovery)

First, add the following in your template files. For example , Please edit `themes/(your-theme)/layout/_partial/head.ejs` as following .

``` ejs
<% if (is_post() && config.generator_amp){ %>
  <link rel="amphtml" href="<%= config.url %>/<%= page.path %>/amp/index.html">
<% } %>
```

Please refer follow as about how to use this plugin with based other templates.

- [jade](https://github.com/tea3/hexo-generator-amp/issues/13)
- [swig](https://github.com/tea3/hexo-generator-amp/issues/14)


### 2. Set the quick option

Please set the following options. Please edit `_config.yml`.

``` yaml
# 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
  theme:
    menu:
  warningLog: false   # To AMP HTML validate automatically, please set true.
```

### 3. Run server

Starts a local server. By default, this is at `http://localhost:4000/`.

``` bash
$ hexo server
```

This plugin generated the AMP HTML. Please open `http://localhost:4000/your-posts-parmalink/amp/` in browser.

If occured plugin error , Please refer [#17](https://github.com/tea3/hexo-generator-amp/issues/17) and [other issue](https://github.com/tea3/hexo-generator-amp/issues?q=is%3Aissue+is%3Aclosed) .

### 4. Validate AMP HTML

This plugin generated the AMP HTML. Output file path is `./your-posts-parmalink/amp/`. You should validate AMP HTML .

#### About general validation method

Now validate your AMP HTML. First off all , open your AMP HTML page in [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/). The Chrome DevTools console can check for AMP HTML . Second , please Append `http://localhost:4000/your-posts-parmalink/amp/#development=1` to the URL. Please see below for the details.

> Accelerated Mobile Pages Project - [Validate AMP Pages](https://www.ampproject.org/docs/guides/validate.html)

{'fraction_non_alphanumeric': 0.14246196403872752, 'fraction_numerical': 0.016136468418626097, 'mean_word_length': 4.2302591922845085, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 17, 'https://': 46, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1905139', 'n_tokens_mistral': 2975, 'n_tokens_neox': 2808, 'n_words': 732}