next插件样式

让文章写的好看又简洁又好用的插件!

hexo插件

hexo-filter-flowchart(流程图)

语法
install

1
npm install --save hexo-filter-flowchart

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```%flow #去掉%号
st=>start: Start|past:>https://lruihao.cn[blank]
e=>end: End:>https://www.lruihao.cn
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>/nextplugin.html
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```

hexo-spoiler

Install

1
npm install hexo-spoiler --save

If hexo can’t detect this plugin automatically, you need to modify the plugins section of [path_to_your_site]/_config.yml manually, like:

1
2
plugins:
- hexo-spoiler

Syntax

1
{% spoiler [text] %}

It will pixelate your text, and click to reveal. Click again to hide your text again.
But you need to add <br> manually if you want line breaks after/before it.

Preview
When you writes:

1
2
3
4
5
{% spoiler text %}
{% spoiler ~~text~~ %}
{% spoiler *text* %}
{% spoiler **text** %}<br>
{% spoiler **hello welcome to 博採眾長!** %}

text text text text

hello welcome to 博採眾長!

选项卡

“tab”为选项卡的名称,可以自定义,数字是几表示从第几个选项卡开始。非必须,若数值为-1则隐藏选项卡内容。
查看更多

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,2 %}
<!-- tab -->
this is tab1
<!-- endtab -->
<!-- tab -->
this is tab2
<!-- endtab -->
<!-- tab -->
this is tab3
<!-- endtab -->
{% endtabs %}

this is tab1

this is tab2

this is tab3

数值为-1

选项1

选项2

选项3

名字写在选项里面

1
2
3
4
5
6
7
8
9
10
11
{% tabs Fourth unique name %}
<!-- tab Solution 1 -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab Solution 2 -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab Solution 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

note便签

主题配置文件搜索note,可设置风格和图标是否显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Note tag (bs-callout).
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: flat
icons: true
border_radius: 15
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

写法

1
{% note default %}default是类型还有以下几种{% endnote %}

default是类型还有以下几种

default

primary

success

info

warning

danger

不填

danger no-icon

引用(文本居中)

1
2
3
{% cq %}
**there are test words**
{% endcq %}

there are test words

Font Awesome图标

Font Awesome 是一套绝佳的图标字体库和CSS框架。
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
要使用Font Awesome图标,请在HTML页面的 部分中添加以下行:

1、国内推荐 CDN:

1
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、海外推荐 CDN

1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

next已经引用了,可以直接用,比如:

1
2
3
4
5
6
7
8
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

动态图标

1
2
3
4
5
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

其他

包括小色块、左侧色条、右侧色条、上方色条、数字色块(需要自定义样式)

知乎卡片链接

Lruihao博客

也是一种后加载,创建linkcard.js放到source/js/src/,然后在next\layout\_macro\post.swig中引用(我这里加载最后一行前面)

1
2
<!--知乎卡片链接-->
<script type="text/javascript" src="/js/src/linkcard.js"></script>

链接写法,加上class="LinkCard"

1
<a href="https://github.com/Lruihao/lruihao.github.io" target="_blank" class="LinkCard">Lruihao博客</a>

感谢支持!
0%