使用hexo+next+github/coding+gitalk添加博客评论系统,以及hexo+next+码云+issue，这里使用的是next主题，如有问题，可以在博客下方评论。本文内容如下：

• 使用gitalk为博客添加评论功能、
• vscode 使用七牛云做图床、
• Hexo Next主题SEO优化、
• Hexo 添加RSS订阅
  

next主题添加gitalk

准备

在使用gitalk作为评论系统之前，需要在github上注册新的应用； 注册GitHub应用链接。
按如下描述填写:

github注册应用

github注册应用保存后跳转的页面

修改的内容

新建<code>gitalk.swig</code>；

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

{% 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 %}

修改<code>comments.swig</code>

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

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

修改<code>index.swig</code>

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

{% include 'gitalk.swig' %}

新建<code>gitalk.styl</code>

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

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

修改<code>third-party.styl</code>

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

@import "gitalk";

修改文件<code>_config.yml</code>

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

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作为评论系统的时候，参考了以下文章，特此添加链接，表示感谢：

• hexo 博客next主题集成gitment或者gitalk评论系统
  
• hexo next主题深度优化(五)，评论系统换成gittalk

vscode + 七牛云

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

准备

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

安装七牛云插件

• 安装插件：<code>qiniu-upload-image</code>
• 文件>首选项>设置，在右侧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 主题SEO优化

SEO ？

汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

针对百度搜索引擎的优化

1. 添加百度sitemap，生成sitemap文件

安装两个插件

npm install hexo-generator-sitemap --save-dev
npm install hexo-generator-baidu-sitemap --save-dev

上面的是传统的sitemap，下面的是百度专有的sitemap。
测试是否安装成功。使用命令<code>hexo s</code>本地预览。
本地预览：[http://localhost:4000/sitemap.xml]http://localhost:4000/sitemap.xml 和 [http://localhost:4000/baidusitemap.xml]http://localhost:4000/baidusitemap.xml 显示sitemap文件内容。

2. 注册百度搜索资源工具

地址：https://ziyuan.baidu.com/
添加网站之后，需要验证，验证方式有<code>文件验证</code>、<code>HTML标签验证</code>、<code>CNAME验证</code>。
网上的例子：使用<code>文件验证</code>进行验证。

• 下载验证文件，放到博客项目的<code>source</code>文件夹下，使用<code>hexo g -d</code>，部署到自己的网站上；
• 部署之后，在站长工具页面点击验证，能够访问证明验证成功；
• 然后点击【完成验证】按钮，为保持验证通过的状态,成功验证后请不要删除HTML文件。

我使用这个验证失败，hexo会为文件加上一些样式，验证好几次验证不通过

使用<code>HTML标签验证</code>进行验证。我使用的是<code>Hexo + NexT</code>。

• 在<code>themes/next/layout/_partials/head.swig</code>文件中，修改meta标签为站长工具里面给出的标签。

{% if theme.baidu_site_verification %}
  <meta name="baidu-site-verification" content="这块修改" />
{% endif %}

或者在 <code>themes/next/_config.yml</code> 添加或者修改，注意格式

# 百度搜索引擎优化
baidu_site_verification: 站长工具里面给出的标签

• 在<code>themes/next/_config.yml</code>中将seo: false 改为<code>true</code>
• 使用<code>hexo g -d</code>，部署到自己的网站上，如果不清楚部署的可以看前两篇文章；
• 然后点击【完成验证】按钮，等待百度的审核结果

3. 添加robots，方便搜索蜘蛛进行检索

  百度百科：robots是网站跟爬虫间的协议，用简单直接的txt格式文本方式告诉对应的爬虫被允许的权限，也就是说robots.txt是搜索引擎中访问网站的时候要查看的第一个文件。当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，所有的搜索蜘蛛将能够访问网站上所有没有被口令保护的页面。

新建<code>robots.txt</code>文件，添加以下文件内容，把<code>robots.txt</code>放在的<code>source</code>文件下。
文件内容：

# hexo robots.txt
User-agent: * Allow: /
Allow: /archives/
Allow: /about/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /images/

Sitemap: http://www.wanglixia.top/sitemap.xml
Sitemap: http://www.wanglixia.top/baidusitemap.xml

在百度站长工具-【链接提交】中填写数据文件地址并提交

您的站点有链接未通过https检验

因为一直使用的是http，百度验证需要使用https。我是使用coding+github双线部署的；

• coding 设置强制https访问
  打开项目，【代码】->【Pages服务】->【强制 HTTPS 访问】

• github 设置强制https访问
  打开项目，【setting】->【Enforce HTTPS】的勾打上；
  完成；访问一下，看下有没有变化啦！

Hexo添加RSS订阅

安装feed插件

npm install hexo-generator-feed

在项目根目录的 <code>_config.yml</code>添加内容：

# Extensions
plugins:
    hexo-generator-feed
feed:                       # 实现博客订阅功能
  type: atom
  path: atom.xml
  limit: 20

使用<code>hexo g -d</code>生成并部署。
使用方法：邮件中【新建订阅】，我的订阅地址为：https://www.wanglixia.top/atom.xml，如图：

Hexo添加RSS订阅

完成

相关文章
完全免费搭建个人博客系列笔记（一）
完全免费搭建个人博客系列教程（二）

欢迎关注微信公众号weyoung，记录学习笔记和一些有趣的东西，欢迎交流~~

个人微信公众号weyoung

更多联系方式