打造更健全的博客空间 - 建站指引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

以上，咱们便搭建好了一个较为健全的博客空间～