Hexo拓展用法

Hexo拓展用法

这篇博客介绍了如何使用Hexo built-in方法、icarus主题附带的用法以及一些插件的用法。

Hexo-built-in 方法

块引用

随机杠杆效应的存在有助于拟合我们通过市场数据挖掘出的两个新颖且有代表性的期限结构典型化特征。其一是平价的期限结构斜率随曲面水平呈近似抛物线型递减,其二是期限结构斜率随对数价值状态呈近似抛物线型变化。

李晨煦李辰旭. 随机杠杆效应对隐含波动率曲面期限结构的影响分析[J]. 金融学季刊

代码:

1
2
3
{% blockquote 李晨煦, 李辰旭. 随机杠杆效应对隐含波动率曲面期限结构的影响分析[J]. 金融学季刊, 2018(1).  %}
随机杠杆效应的存在有助于拟合我们通过市场数据挖掘出的两个新颖且有代表性的期限结构典型化特征。其一是平价的期限结构斜率随曲面水平呈近似抛物线型递减,其二是期限结构斜率随对数价值状态呈近似抛物线型变化。
{% endblockquote %}

代码块

Stata
1
2
sysuse auto, clear
reg price weight

代码:

1
2
3
4
{% codeblock Stata lang:Stata %}
sysuse auto, clear
reg price weight
{% endcodeblock %}

Stata回归
1
2
sysuse auto, clear
reg price weight

代码:

1
2
3
4
{% codeblock Stata lang:Stata http://www.czxa.top 回归%}
sysuse auto, clear
reg price weight
{% endcodeblock %}

或者这样也一样(实际使用中不带斜杠):

1
2
3
4
```stata Stata http://www.czxa.top 回归
sysuse auto, clear
reg price weight
```

Pull quote

pullquote内容。

为你的文本添加pullqupte。

Gist

这个Gist也是GitHub的东西:Gist。不同于GitHub是创建项目,Gist是直接创建代码文件的。例如我创建了一个示例的r文件:czxa/first_gist.r。然后我在博客里面引用它 :

这个代码片段可以通过下面两种方式直接插入:

1
2
3
4
5
<!-- Hexo方法 -->
{% gist b76f9c79ed8301ef0271061c19945b90 first_gist.r %}

<!-- 从Gist页面直接复制的代码 -->
<script src="https://gist.github.com/czxa/b76f9c79ed8301ef0271061c19945b90.js"></script>

iframe

Hexo内置了非常方便插入iframe的方法。

代码:

1
{% iframe html-url 100% 300px %}

Raw

raw标签内部的代码是不会被编译的,例如下面插入Bulma CSS(Icarus主题内置)的按钮:
Primary Link Info Success Warning Danger

代码:

1
2
3
4
5
6
7
8
{% raw %}
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>
{% endraw %}

Icarus主题内置用法

这个需要在主题配置文件中开启:

1
2
plugins:
gallery: true

代码:

html+md
1
2
3
4
5
6
7
8
9
10
<div class="justified-gallery">
![](https://czxb.github.io/mr/DSC00781.JPG)
![](https://czxb.github.io/mr/2017-01-15-230434.jpg)
![](https://czxb.github.io/mr/2017-01-15-231104.jpg)
![](https://czxb.github.io/mr/2017-01-17-131555.png)
![](https://czxb.github.io/mr/20170130_IMG_5567.JPG)
![](https://czxb.github.io/mr/20170208_IMG_6398.JPG)
![](https://czxb.github.io/mr/20170218_IMG_6793.JPG)
![](https://czxb.github.io/mr/20170224_IMG_6845.PNG)
</div>

Bulma

由于Icarus主题使用了Bulma CSS,所以可以在博客中使用Bulma CSS元素。

Button

下面的只是一部分,更多参见:Button
Primary Link Info Success Warning Danger

代码:

1
2
3
4
5
6
7
8
{% raw %}
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>
{% endraw %}

Outlined Outlined Outlined Outlined Outlined Outlined

代码:

1
2
3
4
5
6
7
8
{% raw %}
<a class="button is-outlined">Outlined</a>
<a class="button is-primary is-outlined">Outlined</a>
<a class="button is-link is-outlined">Outlined</a>
<a class="button is-info is-outlined">Outlined</a>
<a class="button is-success is-outlined">Outlined</a>
<a class="button is-danger is-outlined">Outlined</a>
{% endraw %}

Rounded Rounded Rounded Rounded Rounded Rounded

代码:

1
2
3
4
5
6
7
8
{% raw %}
<a class="button is-rounded">Rounded</a>
<a class="button is-primary is-rounded">Rounded</a>
<a class="button is-link is-rounded">Rounded</a>
<a class="button is-info is-rounded">Rounded</a>
<a class="button is-success is-rounded">Rounded</a>
<a class="button is-danger is-rounded">Rounded</a>
{% endraw %}

Normal Normal Normal Normal Normal Normal Normal

代码:

1
2
3
4
5
6
7
8
9
{% raw %}
<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-link">Normal</a>
<a class="button is-info">Normal</a>
<a class="button is-success">Normal</a>
<a class="button is-warning">Normal</a>
<a class="button is-danger">Normal</a>
{% endraw %}

Hover Hover Hover Hover Hover Hover Hover

代码:

1
2
3
4
5
6
7
8
9
{% raw %}
<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-link is-hovered">Hover</a>
<a class="button is-info is-hovered">Hover</a>
<a class="button is-success is-hovered">Hover</a>
<a class="button is-warning is-hovered">Hover</a>
<a class="button is-danger is-hovered">Hover</a>
{% endraw %}

Focus Focus Focus Focus Focus Focus Focus

代码:

1
2
3
4
5
6
7
8
9
{% raw %}
<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-link is-focused">Focus</a>
<a class="button is-info is-focused">Focus</a>
<a class="button is-success is-focused">Focus</a>
<a class="button is-warning is-focused">Focus</a>
<a class="button is-danger is-focused">Focus</a>
{% endraw %}

Active Active Active Active Active Active Active

代码:

1
2
3
4
5
6
7
8
9
{% raw %}
<a class="button is-active">Active</a>
<a class="button is-primary is-active">Active</a>
<a class="button is-link is-active">Active</a>
<a class="button is-info is-active">Active</a>
<a class="button is-success is-active">Active</a>
<a class="button is-warning is-active">Active</a>
<a class="button is-danger is-active">Active</a>
{% endraw %}

Loading Loading Loading Loading Loading Loading Loading

代码:

1
2
3
4
5
6
7
8
9
{% raw %}
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-link is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>
{% endraw %}

Disabled Disabled Disabled Disabled Disabled Disabled Disabled

代码:

1
2
3
4
5
6
7
8
9
{% raw %}
<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-link" title="Disabled button" disabled>Disabled</a>
<a class="button is-info" title="Disabled button" disabled>Disabled</a>
<a class="button is-success" title="Disabled button" disabled>Disabled</a>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
<a class="button is-danger" title="Disabled button" disabled>Disabled</a>
{% endraw %}

Box

程振兴

程振兴 @czxa.top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

代码:

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
{% raw %}
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="http://www.czxa.top/images/default28.svg" alt="程振兴">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>程振兴</strong> <small>@czxa.top</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a href = "https://github.com/czxa" class="level-item" aria-label="reply">
<span class="icon is-small">
<i class="fas fa-reply" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="retweet">
<span class="icon is-small">
<i class="fas fa-retweet" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="like">
<span class="icon is-small">
<i class="fas fa-heart" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</div>
</article>
{% endraw %}

Delete

Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% raw %}
<div class="block">
<span class="tag is-success">
Hello World
<button class="delete is-small"></button>
</span>
</div>

<div class="notification is-danger">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<article class="message is-info">
<div class="message-header">
Info
<button class="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>
{% endraw %}

Notification

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit

代码:

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
{% raw %}
<div class="notification is-primary">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>

<div class="notification is-link">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>

<div class="notification is-info">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>

<div class="notification is-success">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>

<div class="notification is-warning">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>

<div class="notification is-danger">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
{% endraw %}

Icon

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% raw %}
<span class="icon has-text-info">
<i class="fas fa-info-circle"></i>
</span>
<span class="icon has-text-success">
<i class="fas fa-check-square"></i>
</span>
<span class="icon has-text-warning">
<i class="fas fa-exclamation-triangle"></i>
</span>
<span class="icon has-text-danger">
<i class="fas fa-ban"></i>
</span>
{% endraw %}

Progress Bar

15% 30% 45% 60% 75% 90%

代码:

1
2
3
4
5
6
7
8
{% raw %}
<progress class="progress is-primary" value="15" max="100">15%</progress>
<progress class="progress is-link" value="30" max="100">30%</progress>
<progress class="progress is-info" value="45" max="100">45%</progress>
<progress class="progress is-success" value="60" max="100">60%</progress>
<progress class="progress is-warning" value="75" max="100">75%</progress>
<progress class="progress is-danger" value="90" max="100">90%</progress>
{% endraw %}

tag

npm 0.5.0
build passing
chat on gitter

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% raw %}
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">npm</span>
<span class="tag is-info">0.5.0</span>
</div>
</div>

<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">build</span>
<span class="tag is-success">passing</span>
</div>
</div>

<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">chat</span>
<span class="tag is-primary">on gitter</span>
</div>
</div>
</div>
{% endraw %}

Hero

Primary title

Primary subtitle

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% raw %}
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Primary title
</h1>
<h2 class="subtitle">
Primary subtitle
</h2>
</div>
</div>
</section>
{% endraw %}

Hexo插件

hexo-github-card

可以用于把某个人或某个仓库的Github card插入博客中:

代码为:

1
2
3
{% githubCard user:czxa width:520 %}

{% githubCard user:czxa repo:stcolor width:520 %}

# Html

评论

程振兴

程振兴 @czxa.top
截止今天,我已经在本博客上写了659.4k个字了!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×