基于Hexo+Github构建个人博客（二）

  这篇主要介绍基于Maupassant主题做一些个性化的设置，包括评论功能，流量统计，文章摘要和标签分类等。

Maupassant主题配置

  Maupassant主题的配置路径为：blog/themes/maupassant/_config.yml，注意区别于Hexo的配置文件（blog/_config.yml）。

fancybox: true ## If you want to use fancybox please set the value to true.disqus: ## Your disqus_shortname, e.g. usernamegitment:  enable: false ## If you want to use Gitment comment system please set the value to true.  owner: ## Your GitHub ID, e.g. username  repo: ## The repository to store your comments, make sure you're the repo's owner, e.g. imsun.github.io  client_id: ## GitHub client ID, e.g. 75752dafe7907a897619  client_secret: ## GitHub client secret, e.g. ec2fb9054972c891289640354993b662f4cccc50uyan: ## Your uyan_id. e.g. 1234567livere: ## Your livere data-uid, e.g. MTAyMC8zMDAxOC78NTgzchangyan: ## Your changyan appid, e.g. cyrALsXc8changyan_conf: ## You changyan conf, e.g. prod_d8a508c2825ab57eeb43e7c69bba0e8bgoogle_search: true ## Use Google search, true/false.baidu_search: ## Use Baidu search, true/false.swiftype: ## Your swiftype_key, e.g. m7b11ZrsT8Me7gzApciTtinysou: ## Your tinysou_key, e.g. 4ac092ad8d749fdc6293self_search: ## Use a jQuery-based local search engine, true/false.google_analytics: ## Your Google Analytics tracking id, e.g. UA-42425684-2baidu_analytics: ## Your Baidu Analytics tracking id, e.g. 8006843039519956000show_category_count: false ## If you want to show the count of categories in the sidebar widget please set the value to true.toc_number: true ## If you want to add list number to toc please set the value to true.shareto: false ## If you want to use the share button please set the value to true, you must have hexo-helper-qrcode installed.busuanzi: false ## If you want to use Busuanzi page views please set the value to true.widgets_on_small_screens: false ## Set to true to enable widgets on small screens.canvas_nest:  enable: false ## If you want to use dynamic background please set the value to true, you can also fill the following parameters to customize the dynamic effect, or just leave them blank to keep the default effect.  color: ## RGB value of the color, e.g. "100,99,98"  opacity: ## Transparency of lines, e.g. "0.7"  zIndex: ## The z-index property of the background, e.g. "-1"  count: ## Quantity of lines, e.g. "150"donate:  enable: false ## If you want to show the donate button after each post, please set the value to true and fill the following items according to your need. You can also enable donate button in a page by adding a "donate: true" item to the front-matter.  github: ## GitHub URL, e.g. https://github.com/Kaiyuan/donate-page  alipay_qr: ## Path of Alipay QRcode image, e.g. /img/AliPayQR.png  wechat_qr: ## Path of Wechat QRcode image, e.g. /img/WeChatQR.png  btc_qr: ## Path of Bitcoin QRcode image, e.g. /img/BTCQR.png  btc_key: ## Bitcoin key, e.g. 1KuK5eK2BLsqpsFVXXSBG5wbSAwZVadt6L  paypal_url: ## Paypal URL, e.g. https://paypal.me/tufu9441menu:  - page: home    directory: .    icon: fa-home  - page: archive    directory: archives/    icon: fa-archive  - page: about    directory: about/    icon: fa-user  - page: rss    directory: atom.xml    icon: fa-rsswidgets: ## Six widgets in sidebar provided: search, category, tag, recent_posts, rencent_comments and links.  - search  - category  - tag  - recent_posts  - recent_comments  - linkslinks:  - title: site-name1    url: http://www.example1.com/  - title: site-name2    url: http://www.example2.com/  - title: site-name3    url: http://www.example3.com/timeline:  - num: 1    word: 2014/06/12-Start  - num: 2    word: 2014/11/29-XXX  - num: 3    word: 2015/02/18-DDD  - num: 4    word: More# Static filesjs: jscss: css# Theme versionversion: 0.0.0

里面每个配置项给出的非常详细，需要重点关注的有：

• gitment：采用Gitment评论
• google_search：（默认）采用Google搜索引擎
• baidu_search：采用百度搜索引擎，若要使用，设为true。
• google_analytics：Google Analytics追踪ID
• baidu_analytics：百度统计追踪ID
• show_category_count：是否显示侧边栏分类数目
• shareto：是否使用分享按钮，需要安装hexo-helper-qrcode
• busuanzi：是否采用不蒜子统计页面访问数
• widgets_on_small_screens：是否在移动设备屏幕底部显示侧边栏，默认不显示
• donate：是否启用捐赠按钮
• widgets：选择自己喜欢使用的侧边栏小工具

增加Gitmen评论

  有不少的评论系统可以选择，包括多说，Disqus，畅言、友言和Gitment。本站采用的是Gitment，主要是由于配置简单，而且显示UI和Maupassant主题比较搭配，这一点特别重要。

  Gitment是基于github issue搭建的评论系统，也就是每一篇的文章下面的评论就相当于在github上的一个issue，广大github伙伴使用起来也比较方便。

1. 首先要在github上注册一个OAuth应用，注册地址点这里。

2. 其中“Homepage URL”和“Authorization callback URL”，填写自己博客的地址即可，比如“https://vosang.github.io”，注册成功之后会返回一个“client_id”和“client_secret”。

3. 然后进入到主题的配置文件中，添加gitment相关的信息：

   gitment: # 启用gitment enable: true  # github用户名 owner: vosang # 博客所在仓库地址 repo: vosang.github.io # 输入返回的client_id和client_secret client_id: 75752dafe7907a897619 client_secret: ec2fb9054972c891289640354993b662f4cccc50

4. 修改文件，路径为~/blog/themes/maupassant/layout/_partial/comments.jade，

   if theme.gitment.enable == true   #container   # 重点是以下两行。   link(rel='stylesheet', href='https://imsun.github.io/gitment/style/default.css')   script(src='https://imsun.github.io/gitment/dist/gitment.browser.js')   script.     var gitment = new Gitment({       owner: '#{theme.gitment.owner}',       repo: '#{theme.gitment.repo}',       oauth: {         client_id: '#{theme.gitment.client_id}',         client_secret: '#{theme.gitment.client_secret}',       },     })     gitment.render('container')

5. 打开评论功能，在每一篇博客的Front-matter （也就是每一篇博客用---分隔的区域）中添加打开评论的参数，比如

   title: 基于Hexo+Github构建个人博客（二）date: 2017-10-31 21:54:43comments: truetoc: truecategories:- Hexotags:- Github- Hexo

6. 重新生成并部署后，在文章的底部看到评论的区域，用github账号登录后就可以愉快的评论了。

流量统计

  通过流量统计可以查看自己博客被访问的统计信息，可以选择百度分析和Google Analytics，两种系统的配置方式大同小异。我选用的是后者，所以介绍下Google Analytics的配置方式。

​ 使用之前需要先在Google Analytics上注册获得ID，注册地址。输入网站名称和网址即可注册成功。

直接在Maupassant的配置文件blog/themes/maupassant/_config.yml中更新加入注册ID（UA）

google_analytics: 填写获得的ID。

​ 然后重新生成并部署，就可以在Google Analytics查看自己网站被浏览的统计信息了。

显示摘要

  默认情况下文章自动会保留摘要部分，也可以手动设置，有两个方法：

• 在 Front-matter中添加 description，如

  title: Hey Judedate: 2015-10-29 16:57:36description: 在这里可以添加本文的摘要部分……

• 在正文中使用<!--more-->作为摘要结束的标记。

  正文部分……，显示为摘要<!--more-->继续显示正文部分

修改行间距和段落间距

  选择Maupassant主题后，在页面删看文字之间的行间距和段落间距有点大，自己可以根据喜好进行修改，目标文件themes/maupassant/source/css/style.scss，修改post-content对应的部分。

• 修改行距：line-height
• 修改段落间距：margin
• 列表元素间距：ul, ol

其他

1. 文章显示目录

   在 Front-matter中添加配置信息。

   toc: true

2. 支持单栏显示，也就是不限侧栏的分类和标签等信息，也是在 Front-matter中添加配置信息。

   layout: single-column

3. hexo seo：如何向google提交sitemap