hexo-generator-mip's Introduction

hexo-generator-mip

统一处理 Hexo 模板中的 MIP 标签，需要 <html> 属性中包含： mip 字段，如： <html mip> ，否则将忽略处理。

安装

npm install --save hexo-generator-mip

配置

# _config.yml
mip:
  key: value

配置名称	描述	类型	默认值
`mip.enable`	是否开启 MIP 规范处理	boolean	`false`
`mip.css`	指定加载的样式文件，以 `主题目录/souce/css/` 为基础路径	array	`''`
`mip.cssmin`	是否开启样式压缩	boolean	`true`
`mip.canonical`	替换 canonical 地址	string	`''`
`mip.exclude`	忽略的链接数据，通常这些链接不是 MIP 页面（ `v0.5.0` 新增）	array	`[]`

处理 css

MIP style 标签文档

1. 默认全部加载

默认情况下将加载主题目录下 souce/css/**/!(_*).css 的文件，并合并添加到页面的 <head> 标签结束前。

2. 配置加载文件的名单

配置 mip.css 则直接加载配置的文件，如：

mip:
  css:
    - reset.css
    - main.css

3. 主动调用 mipcss 函数加载指定文件 - v0.4.0 新增

可以主动在模板内加载指定的文件，使用 {{ mipcss(file1 [, file2]) }} ，以主题目录下 souce/css/ 为基础路径加载，如：

# page.swig
<head>
    {{ mipcss('reset.css', 'page.css') }}
</head>

# index.swig
<head>
    {{ mipcss('reset.css', 'index.css') }}
</head>

注意：使用该方式加载样式后，将忽略 #1 默认全部加载 和 #2 主动调用 mipcss 函数加载指定文件 ，因为页面已经存在 <style mip-custom> 标签。

4. 自动合并页面中的 `<style>` 标签 - v0.6.0 新增

对于页面中存在的多个 <style> 标签将自动合并并插入到 <head> 标签中的 <style mip-custom> 标签中，分2种情况：

页面中已经存在 <style mip-custom> 标签（可以是调用 {{ mipcss(file1 [, file2]) }} 生成，也可以是自己手动写入），将把页面中提取的其他 <style> 依次追加到原 <style mip-custom> 标签内。
页面中不存在 <style mip-custom> 标签，自动根据 1. 默认全部加载 或者 2. 配置加载文件的名单 加载，并把页面中提取的其他 <style> 依次追加到最后。

处理 a 标签

MIP a 标签文档

统一替换页面中的 <a> 标签，如果是当前网站的，则添加 data-type="mip" 。如果链接在 mip.exclude 中声明，将被忽略。

处理 img 链接

MIP img 标签文档

统一替换页面中的 <img> 标签为 <mip-img> ，根据 MIP 规范，图片必须设置 width 和 height 。

处理 canonical

MIP canonical 规范文档，思路来自 @HyunSeob/hexo-auto-canonical

在主题模板内 <head> 标签结束前使用 mipcanonical(page) 引入。如果需要自定义 canonical 的域名或者路径前缀，可以配置：

# 自定义域名
mip:
  canonical: 'https://mip.example.com'

# 自定义路径
mip:
  canonical: 'https://example.com/mip'

contributors

用户贡献指南

License

MIT

hexo-generator-mip's People

Contributors

Stargazers

Watchers