Hexo & Github 建站日誌（二）

到此，建站告一段落，功能差不多完善了

2017-05-24：

Bootstrap Callout的巨坑BUG

---

在今天新增添加評論後，部署完成後發現，界面變成如下：

完全亂碼了，真是…
經過一晚上排查，發現原因出在：Markdown開頭我使用了Bootstrap Callout語句，中間寫了其他代碼，結尾又再次使用了Bootstrap Callout語句，如下圖：


把結尾的Bootstrap Callout語句去掉之後，一切又恢復了正常。

難道Bootstrap Callout語句一篇文章只能使用一次？？？

爲了驗證，做了如下測試：


果然如此，真是絕了…
對了，連下面這種情況（Bootstrap Callout）也不能出現，出現了也算一次：

`{% note info %} ... {% endnote %}` #單引號小代碼塊

添加評論

---

這裏我用的是Hypercomments，國外的一個第三方評論平臺，好處之一就是可以支持匿名評論，不用登錄就可以進行評論，取代即將入土的多說。

1.Next主題已經集成了Hypercomments，只需到Hypercomments註冊一個賬號，綁定網站入口，拿到widget_id即可。
具體位置如下：

代碼中找到widget_id:xxxxx：

widget:"Stream", widget_id: xxxxx

2.修改主題配置文件，找到如下代碼：

# Hypercomments
#hypercomments_id:

3.取消註釋，將拿到的widget_id填入，即可。
預覽：

使用七牛做圖片圖牀

---

爲了提高頁面加載速度，方便圖片管理，將博客所有圖片均同步到七牛雲，製成外鏈，加到博客中。

步驟很簡單，註冊一個七牛雲賬號，新建一個存儲空間，將用到的圖片傳上去，拿到外鏈，寫博客時，如下使用就可以了。

![](http://ohhmsby4v.bkt.clouddn.com/image/2017-05-24_%E5%BB.png)

2017-05-21：

Markdown內置標籤

---

文本居中的引用

<!-- HTML方式: 直接在 Markdown 文件中編寫 HTML 來調用 -->
<!-- 其中 class="blockquote-center" 是必須的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 標籤 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 標籤別名 -->
{% cq %} blah blah blah {% endcq %}

預覽：
{% cq %} 人的一切痛苦，本質上都是對自己的無能的憤怒。 {% endcq %}

突破容器寬度限制的圖片

<!-- HTML方式: 直接在 Markdown 文件中編寫 HTML 來調用 -->
<!-- 其中 class="full-image" 是必須的 -->
<img src="/image-url" class="full-image" />

<!-- 標籤 方式，要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}

<!-- 別名 -->
{% fi /image-url, alt, title %}

預覽：
{% fi http://ohhmsby4v.bkt.clouddn.com/image/2017-05-21_%E5%BB%BA%E7%AB%99%E6%97%A5%E5%BF%97_full_img1.jpg, alt, 時光 %}

Bootstrap Callout

{% note class_name %} Content (md partial supported) {% endnote %}
{% note %} Content (md partial supported of **none**) {% endnote %}
{% note default %} Content (md partial supported of **default**) {% endnote %}
{% note primary %} Content (md partial supported of **primary**) {% endnote %}
{% note success %} Content (md partial supported of **success**) {% endnote %}
{% note info %} Content (md partial supported of **info**) {% endnote %}
{% note warning %} Content (md partial supported of **warning**) {% endnote %}
{% note danger %} Content (md partial supported of **danger**) {% endnote %}

* class_name可以爲：default、primary、success、info、warning、danger，也可以爲空。
預覽：

完

---

作者：Chihwei_hsu
來源：http://chihweihsu.com
Github：https://github.com/HsuChihwei