一、 Fancybox.js调用

原博客使用的预览图插件从 baguetteBox.js 更改为 fancybox，在插入缩略图时需要把HTML标签改成为：

/* 第一种方式 */
!{alt}(url)[th_url]

/* 第二种方式 */
!{alt}(url)

代码说明：

alt：图片标题；

url：原图链接；

th_url：缩略图链接。

在指定了缩略图链接的时候，页面上优先显示缩略图，点击后可以全屏显示出效果。PS：建议用缩略图方式，当然，也可以不需要缩略图，不过可能会造成加载缓慢。

举个例子：

!{image 1}(原图地址)[缩略图地址]
!{image 2}(原图地址)

这不是标准的 Markdown 写法，如果作为强迫症或者为了跟以后版本兼容，可以改用 fancybox 定义的标准 html 标签：

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

二、Hitokoto API调用

一言 hitokoto.cn 的语库非常丰富，API文档简明，这里mark一个最简单的调用JS：

window.onload=function () {
    var hitokoto = document.querySelector('.hitokoto');
    var from = document.querySelector('.from');
    update();
    function update() {
        gethi = new XMLHttpRequest();
        gethi.open("GET","https://sslapi.hitokoto.cn/?c=a");
        //这里选择类别，详见官方文档
        gethi.send();
        gethi.onreadystatechange = function () {
            if (gethi.readyState===4 && gethi.status===200) {
                var Hi = JSON.parse(gethi.responseText);
                hitokoto.innerHTML = Hi.hitokoto;
                from.innerHTML = "from: <b>" + Hi.from + "</b>"; //可自定义输出格式
            }
        }
    }
}

然后直接在页面上通过 hitokoto 和 from 两个 class 调用了，例如：

<div>   
    <p class="hitokoto"></p> 
    <p class="from"></p> 
</div>

效果如下：

三、ICON图标接口

主题目前已经内置了 Font Awesome 图标字体库和 CSS 框架，直接可以在标签上写入和调用图标。

基本图标调用

（ 您可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。 但实际上使用 <span> 才能更加语义化。 ）

<i class="fa fa-camera-retro"></i> fa-camera-retro

大图标

（ 使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。 ）

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

固定宽度

（ 使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。 ）

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

用于列表

（ 使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。 ）

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

边框与对齐

（ 使用 fa-border 以及 pull-right 或 pull-left 可以轻易构造出引用的特殊效果。 ）

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

动画

（ 使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。 ）

<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>

组合使用

（ 如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse 类来切换图标颜色。您可以在父容器中 通过添加 大图标 类来控制整体大小。 ）

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

四、时光轴样式变更

原版的CSS样式写的间距太窄，故而做些调整：

在style.css里面，定位在7184行，修改.art-content #archives .al_mon_list

.art-content #archives .al_mon_list {
    position: relative;
    padding: 20px 0;
    display: inline-block;
    vertical-align: middle
}

在style.css里面，定位在7169行，修改 #archives li

#archives li {
    list-style: none;
    margin: 20px auto;
}