Hexo 博文简单美化

发表于 更新于

文字背景色块

添加

打开themes/next/source/css/_custom 下的 custom.styl 文件,添加自定属性样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}

想添加自定义颜色，修改最后的backgroud-color即可。

使用

在md正文中如下格式：

<span id="inline-blue"> Text here </span>

就可使用了。

效果：

Text Text Text Text

使用FA图标

在md正文中使用

<i class="fa fa-subway"></i>

来调用FA图标。第二个fa后单词改为需要的图标名称即可。

改变大小：经过测试，有用的包括

1
2
3
4
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
效果





Bootstrap Callout

1
2
3
4
5
{% note primary %}primary{% endnote %}
{% note success %}success{% endnote %}
{% note info %}info{% endnote %}
{% note warning %}warning{% endnote %}
{% note danger %}danger{% endnote %}

效果：

~~

primary

success

info

warning

danger

~~