插件

hexo-autoprefixer

Autoprefixer plugin for Hexo.

建议安装 Autoprefixer 解析 CSS 文件并且添加浏览器前缀到 CSS 规则里，使用 Can I Use 的数据来决定哪些前缀是需要的。

安装

1
$ npm install hexo-autoprefixer --save

配置

Configure Autoprefixer in your Hexo config.

1
2
3
autoprefixer:
  exclude:
    - '*.min.css'

在 package.json 中写入：

1
2
3
"browserslist": [
  "last 2 versions"
]

完整示例：

1
2
3
4
5
6
7
8
9
"hexo": {
    "version": "6.0.0"
  },
  "dependencies": {
     ....
  },
  "browserslist": [
   "last 2 versions"
 ]

hexo-clean-css

Minify CSS files with clean-css.

安装 hexo-clean-css 可以使 style.css 的体积压缩至最小。

安装

1
$ npm install hexo-clean-css --save

配置

在根目录 _config.yml 中写入：

1
2
3
clean_css:
  exclude: 
    - '*.min.css'

hexo-generator-sitemap

Generate sitemap.

安装

1
$ npm install hexo-generator-sitemap --save

配置

You can configure this plugin in _config.yml .

1
2
3
4
5
6
7
8
9
sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  template: ./sitemap_template.xml
  template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true

Add sitemap: false to the post/page’s front matter.

1
2
3
4
5
---
title: lorem ipsum
date: 2020-01-02
sitemap: false
---

hexo-generator-baidu-sitemap

Generate sitemap.

安装

1
$ npm install hexo-generator-baidu-sitemap --save

配置

在根目录 _config.yml 中写入：

1
2
baidusitemap:
  path: baidusitemap.xml

Hexo-admonition

Hexo 内容辅助插件，支持将类似 reStructuredText 的警告提示块添加到 Markdown 文档中。例如 note、warning、error 等提示块。

安装

1
$ npm install hexo-admonition --save

使用

Hexo-admonition 遵循一种简单的语法：每个块都以 !!! 开头，然后是代表提示类型的关键字（type）及标题（title）。例如:

1
2
3
4
!!! note Hexo-admonition 插件使用示例
    这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note，并设置了自定义标题。

    提示内容开头留 4 个空格，可以有多行，最后用空行结束此标记。

在 Hexo 渲染前，将被转换成如下内容：

1
2
3
4
5
<div class="admonition note">
  <p class="admonition-title">Hexo-admonition 插件使用示例</p>
  <p>这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note，并设置了自定义标题。</p>
  <p>提示内容开头留 4 个空格，可以有多行，最后用空行结束此标记。</p>
</div>

最终呈现效果如下：

Hexo-admonition 插件使用示例

这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note，并设置了自定义标题。

提示内容开头留 4 个空格，可以有多行，最后用空行结束此标记。

该插件提示类型 type 将用作 CSS 类名称，暂支持如下类型：

  • note
  • info, todo
  • warning, attention, caution
  • error, failure, missing, fail

更多介绍见该插件作者的 安装使用指南，在 Acorn 中我将作者提供的 CSS 样式做了调整，以适配 Acorn 整体色彩，但是并没有集成在 Acorn 中。

如果您使用了该插件，那么首先需要自定义一个 styl 文件，如：admonition.styl ，并在 style.styl 中引入：

1
@import "admonition"

然后将如下 styl 样式拷贝至 admonition.styl，也可以自己喜好修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//
// Hexo-admonition
// https://github.com/lxl80/hexo-admonition
//
notes = {
  info : info-color
  todo : info-color
  warning :   warning-color
  attention : warning-color
  caution :   warning-color
  failure : danger-color
  missing : danger-color
  fail :    danger-color
  error:    danger-color
}

.admonition 
  margin: spacer 0
  padding: spacer
  overflow: hidden
  page-break-inside: avoid
  border-left: border-width * 3 solid success-color
  border-radius: border-radius-value
  background-color: light-color
  .admonition-title
    position: relative
    margin: spacer * -1 !important
    margin-bottom: spacer !important
    padding: spacer * 0.5
    padding-left: spacer * 3
    background-color:rgba(success-color, .1)
    font-weight: 500
    color: success-color
    &::before
      content: ''
      position: absolute
      left: spacer
      center-y()
      rounded-circle(spacer)
      background-color: success-color
  p
    margin: 0 !important

for name,value in notes
  .admonition.{name}
    border-color: value
    .admonition-title
      background-color: rgba(value, .1)
      color: value
      &::before
        background-color: value

就是这么多了，如果您需要更多功能插件，可以从 Hexo 插件列表 找一找！