打造更健全的博客空間 - 建站指引2

根據建站指引1的步驟，咱們搭建了一個最基本的我的博客。本人使用atom編輯器自帶的markdown系統進行寫做，結合atom的markdown插件，能給咱們帶來更舒暢的寫做體驗。同時，給咱們的博客添加第三方服務集成能使咱們站點功能獲得擴展。這篇文章能爲你解決下面的問題：

1. 簡化 Markdown 貼圖流程

2. 其餘 Atom Markdown 插件

3. 集成 Gitment 評論系統

本文已在本人博客中同步發表～傳送門

Atom Markdown 優化插件

1. 使用快捷鍵插入截圖

在使用hexo時，咱們可使用網圖或者本地圖來做爲文章圖片的引用。而當咱們想直接在文章中使用截圖時，通常須要通過以下幾個步驟：

• 截圖

• 上傳至圖牀

• 將圖牀markdown代碼插入文章中

由此看來，插入截圖時比較繁瑣的，而咱們但願的是截圖以後能直接快捷鍵將其貼入咱們的文章中。查閱了幾篇文章，最後決定使用atom的插件markdown-img-paste（貼圖快捷鍵爲ctrl+shift+v）。

如非使用atom編輯器，請參考如下兩篇類似內容文章

windows版本markdown一鍵貼圖工具
Mac版本使用alfred在markdown中愉快的貼圖

回到上文內容，markdown-img-paste支持直接截圖上傳至七牛圖牀和上傳至本地文件夾。可是若是選擇本地儲存的話，是直接將圖片存入assets文件夾再進行引用的，而hexo的圖片資源須要souces/images下。因此我將其直接上傳至七牛雲。下載並安裝好該插件後，對此進行七牛雲的受權和設置。對於沒有七牛雲帳號的同窗們，能夠到七牛雲申請一個帳號，__並建立儲存空間__。

調出Preferences窗口，找到markdown-img-pastepackage進行設置。配置以下：

提一下幾個參數：

1. 首先得勾選 use qiniu for image link 使用七牛雲儲存圖片

2. accesskey 和 secretkey 是咱們七牛帳號的兩個惟一祕鑰，可在我的面板-密鑰管理中查看

3. bucket 是咱們建立的儲存空間的名稱

4. domain 是咱們儲存空間的域名

5. uphost 默認是華東的存儲空間即 up.qiniu.com
   華北的存儲空間 使用 up-z1.qiniu.com

華南的存儲空間 使用 up-z2.qiniu.com
（這裏沒注意到這個有可能會報錯）

設置好以後，就能夠愉快地截圖>一鍵粘貼>上傳 啦～（注意一下，gif是沒有辦法直接粘貼上傳的）

2. 其餘優化markdown寫做體驗插件

我是好文章的搬運工。。。 (。・`ω´・)
使用Atom打造無懈可擊的Markdown編輯器

集成Gitment評論系統

多說倒閉了，想必你們都瞭解過。比對了市面上幾款評論系統，以爲他們外觀都不太簡約，或者色調和我選擇的主題不相符。而口碑比較好的disqu則在國內會被牆掉。因此，這裏選了一款較新的評論系統gitment。
如何將gitment嵌入hexo的主題中，是下文將要討論的問題，對於gitment的其餘Api，請自行查閱gitment的readme。

1. 註冊 OAuth Application

首先得註冊一個OAuth Application，並得到client_id和secret_id。傳送門

2. 在配置文件添加gitment支持

找到主題文件下的_config.yml，自行添加字段：

gitment: true

3. 在comments文件中加入gitment配置

找到 主題/layout/_partials/comments.swig（也可能不是swig文件，但邏輯是相似的），加入代碼

{% elseif theme.gitment %}
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
  var gitment = new Gitment({
    // 根據文章標題設置惟一評論id
    id: '{{page.articleId}}',
    owner: 'yourname',
    repo: 'your blog github repo',
    oauth: {
      client_id: 'your clientid',
      client_secret: 'your clientsecret',
    },
  })
  gitment.render('comments')
</script>

配置項的id若不設置的話，默認爲 location.href，嘗試過不設置該項，但若文章url含有hash #more 時，會拉取不到評論。

4. .md文章下的配置

在頭部添加下面代碼

comments: true
/**
  若comments.swig中的id沒配置的話，忽略該項
  注意這裏的artile name是指你md文件的命名而不是文章標題
**/
articleId: your article.md's name

以上，咱們便搭建好了一個較爲健全的博客空間～