记使用hexo搭建个人博客之添加评论（三）

使用hexo+next+github/coding+gitalk添加博客评论系统,以及hexo+next+码云+issue，这里使用的是next主题，如有问题，可以在博客下方评论。
免费个人博客预览

next主题添加gitalk

准备

在使用gitalk作为评论系统之前，需要在github上注册新的应用；注册GitHub应用链接。
按如下描述填写:
记使用hexo搭建个人博客之添加评论（三）
填写完成后，点击绿色按钮，跳转到一下页面，
可以看到Client ID和Client Secret，后面会用到。
在项目目录下执行如下命令npm install gitalk --save 安装gitalk；

修改的内容

新建`gitalk.swig`；

路径themes/next/layout/_third-party/comments/gitalk.swig，内容如下：

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
       </script>
{% endif %}

修改`comments.swig`

路径themes/next/layout/_partials/comments.swig，在最后一个div里面加上如下内容：

{% elseif theme.gitalk.enable %}
    <div id="gitalk-container"></div>

修改`index.swig`

路径themes/next/layout/_third-party/comments/index.swig，在最后一行加上如下内容：

{% include 'gitalk.swig' %}

新建`gitalk.styl`

路径themes/next/source/css/_common/components/third-party/gitalk.styl，内容如下：

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

修改`third-party.styl`

路径themes/next/source/css/_common/components/third-party/gitalk.styl，在最后一行加上如下内容：

@import "gitalk";

修改文件`_config.yml`

路径themes/next/_config.yml，注意是主题的配置文件，增加内容如下：

gitalk:
  enable: true
  githubID: nelucifer  # 例：nelucifer
  repo: nelucifer.github.io   # 存储你评论 issue 的 Github 仓库名（建议直接用 GitHub Page 的仓库名） 例：nelucifer.github.io 
  ClientID: 这块填注册Github应用成功之后的ClientID
  ClientSecret: 注册Github应用成功之后的ClientSecret
  #owner: 'Github 用户名',
  adminUser: ['nelucifer'] #指定可初始化评论账户，Github仓库的管理员，可以有多个
  distractionFreeMode: true
  #id: 'window.location.pathname' #页面的唯一标识，gitalk根据这个标识自动创建的issue的标签,此处使用页面的相对路径作为标识

参考文章

在使用gitalk作为评论系统的时候，参考了以下文章，特此添加链接，表示感谢：

vscode + 七牛云

现在使用七牛云做图床需要已经备案的域名，测试域名不能用啦。

准备

下载vscode，这儿是下载链接
七牛云，传送门

安装七牛云插件

安装插件：qiniu-upload-image
文件>首选项>设置，在右侧setting.json填写自己的配置覆盖默认配置。配置文件如下，使用的配置是七牛云里面的【**管理】：

{
    // 一个有效的七牛 AccessKey 签名授权。
  "qiniu.access_key": "**管理里面的AK",

  // 七牛图片上传空间。
  "qiniu.bucket": "weyoung-pub",

  // 七牛图床域名。
  "qiniu.domain": "自己配置的图床域名，使用二级域名就行",

  // 七牛图片上传工具开关
  "qiniu.enable": true,

  // 七牛图片上传路径，参数化命名。
  "qiniu.remotePath": "${fileName}-${dateTime}",

  // 一个有效的七牛 SecretKey 签名授权。
  "qiniu.secret_key": "**管理里面的SK",
  "files.autoSave": "afterDelay",
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
}

使用快捷键

粘贴图片路径上传：SHIFT + P
直接选择图片上传：SHIFT + O

安装插件

Ctrl+P 输入命令：

ext install qiniu-upload-image

完成

个人微信公众号：记录一些学习过程中遇到的坑，欢迎关注交流
记使用hexo搭建个人博客之添加评论（三）

next主题添加gitalk

准备

修改的内容

新建gitalk.swig；

修改comments.swig

修改index.swig

新建gitalk.styl

修改third-party.styl

修改文件_config.yml