添加hexo Next主题自定样式

Posted on

添加hexo Next主题自定样式

添加自定义样式主要有两种

  1. 添加自定义css
  2. 添加自定义内置标签

添加自定义样式

在themes/next/source/css/_custom/中添加样式文件, 例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.label{
    font-family: Consolas;
    display: inline;
    color: #fff;
    padding: 1px 3px 2px 3px;
    margin: 0px 2px 0px 2px;
    border-radius: 2px;
}
.label-red{
    background: #d9534f;
}
.label-green{
    background: #5cb85c;
}
.label-blue{
    background: #428bca;
}
.label-sky{
    background: #5bc0de;
}
.label-orange{
    background: #f0ad4e;
}

在themes/next/source/css/main.styl用引入样式文件

1
@import "_custom/custom";

在文章中使用

1
<span class="label label-red">New</span>

添加自定义内置标签

在themes/next/scripts/tags中添加文件, 例如

1
2
3
4
5
function bscallOut (args, content) {
  return '<div class="note ' + args.join(' ') + '">' + hexo.render.renderSync({text: content, engine: 'markdown'}).trim() + '</div>';
}

hexo.extend.tag.register('note', bscallOut, {ends: true});

在文章中使用

1
2
3
4
5
{% note [class] %}
  Any content (support inline tags too).
{% endnote %}

// [class] : default | primary | success | info | warning | danger

hexo完整的标签列表

Next主题内置的Bootstrap Callout