title: github+hexo博客的主题安装及优化
categories: study
tags:
- study
- hexo
- github
description: github+hexo博客的主题安装及优化（github+hexo制作的个人博客的主题更换及美化）
date: 2017-05-30 18:34:59
之间通过github+hexo搭建个人博客虽然已经初步完成，但是页面却不是很美观，在hexo官网有很多比较不错的主题推荐，可以在上面选择自己喜欢的主题，然后进行相应的个性化修改，这是我使用的主题indigo，下面我也是用这个主题作为教程。
主题安装
选择一款自己喜欢的主题，这将成为你个人博客模版。这里是主题安装的教程，下面是我安装时的经验及个人见解。
主题安装
安装需确认你的 Hexo 版本在 3.0 以上，以及 Node 版本为 6.x 以上，在 Hexo 根目录，执行以下命令。
git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo
这个命令要在博客文件夹的根目录右击鼠标打开Git Bash输入命令，其中themes/indigo就是会在博客文件夹根目录中的themes新建一个indigo文件夹存放clone下来的主题，以后的主题通常都是存放在这个目录下。
通俗来说就是这样git clone +通过主题的github中获取的URL+ +themes/indigo
下图是获取URL的方式：
获取URL
依赖安装
教程中的“切换主题”我没有懂，似乎不做也行，没有切换主题的效果。直接到依赖安装，安装一些插件。
安装Less
主题默认使用 less 作为 css 预处理工具。
npm install hexo-renderer-less --save
安装Feed
用于生成 rss，但是我现在还不知道rss是干什么的，先跟着教程来。
npm install hexo-generator-feed --save
Json-content
用于生成静态站点数据，用作站内搜索的数据源。这个我也还不懂，后续完善吧。
npm install hexo-generator-json-content --save
QRCode
用于生成微信分享二维码。网页分享中微信可以动态生成该网页的分享分二维码。
npm install hexo-helper-qrcode --save
Hexo配置修改
修改hexo的默认配置及文件目录
Hexo目录介绍
.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json
Hexo新建文件
其中layout可有可无，没有时会有默认的设置，PageName是自己设置文件名，其中layout是通过scaffolds中的.md文件进行配置的，scaffolds中默认会有drafts.md、post.md、page.md三个文件，这就是模版；也可以自己设置模版，其中只有通过page模版新建文件时，会在source文件夹下新建名为“PageName”的文件夹，并在自己生成的文件夹下生成名为“PageName.md”的文件。其他模版都会自动生成到_post文件夹下，_post文件夹下的文件会自动加载。
hexo new [layout] "PageName"
开启标签页
开启标签页，会新建一个文件夹，文件夹有一个index.md文件。
hexo new page tags
修改 hexo/source/tags/index.md 的元数据
layout: tags
comments: false
---
开启分类页
本主题中仅 card theme 支持。
hexo new page categories
修改 hexo/source/categories/index.md 的元数据
layout: categories
comments: false
---
会自动生成文件夹 如图：
source文件夹介绍
切换主题
主题配置好之后就等着主题的切换了，下面来切换主题
文件清理
清理之前在public文件夹中生成的文件
hexo clean
生成静态文件
在public文件夹中生成html、css、xml等前台静态文件。
hexo g
开启本地服务
开启本地服务通过https://localhost:4000访问。
hexo s --debug
上传到github
hexo d
至此主题已经更改完成。但是我现在还是很不清楚github的用法，分支和回退的用法等；还有是就是hexo的一些详细操作，如何单独更新部分文件。
主题优化
主题更换完成之后，接下来就是自己的个性化设置了，设置成自己想要达到的效果，下面我就大概说一下遇到困难的几个地方和我自己的见解吧。
配置介绍
介绍一下配置文件的用处，这里已经介绍的很详细了。
添加评论
重点来了，因为某些情况，评论这一块我搞了好长一段时间，先来说一下添加评论吧，我这里添加的是第三方评论系统来必力。
评论系统的选择
由于主题之实现了多说和disqus的第三方评论功能，这里不配置
因为多说6月份要关闭了；disqus需要翻墙访问才行；还有友言不支持https协议，因为github使用的是https协议;网易云跟帖需要域名才行，所以Github Page不能用这个；搜狐畅言需要备案，更麻烦；其中还有一些像gitment和HashOver这两个没有去研究，不知道怎样。所以现在还是用了来必力，来必力的缺点就是加载有点慢。这里是原链接。
indigo模版添加来必力
在indigo主题模版中添加来必力评论系统。
注册来必力
进入 LiveRe官网，注册账号。来必力是韩国的网站，注册的时候可能会有一些问题，多试几次。
LiveRe(来必力) 有两个版本：
City 版：是一款适合所有人使用的免费版本；
Premium 版：是一款能够帮助企业实现自动化管理的多功能收费版本。
我们 City 版就够了。
获取代码：
获取代码
修改主题配置文件
因为主题中没有配置来必力评论系统，所以我们要手动配置。
在插件目录“myblog\themes\indigo\layout_partial\plugins”下新建一个名为“livere.ejs”的文件，这就是来必力插件。
新建livers.ejs插件
<% if (theme.livere_uid){ %>
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC8yODg4MC81NDUw">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
<% } %>
在来必力中获取的代码替换一下即可。
然后在“D:\forJavaStudy\myblog\themes\indigo\layout_partial\post”目录下修改“comment.ejs”文件，在文件末尾添加以下代码：
<%- partial('../plugins/livere') %>
修改Hexo的配置文件，主题目录“myblog\themes\indigo”下的“_config.yml”文件，在评论部分添加如下代码，如下：
修改comment.ejs
livere_uid: MTAyMC8yODg4MC81NDUw
这样就完成了配置，更新一下即可。
hexo clean
hexo g
hexo d
总结
github学好了真的狠学到很多知识，只是我现在还不懂，所以就下来对上github上看看，加深对git的学习，在我的博客中对添加一些其他一些优秀博主的相关链接，有时候就是那些连接保存的不好，当时看到了，之后就没了。所以积累很重要。
也附上我博客的链接，欢迎大家多多访问！
https://heartsxin.github.io
http://heartsxin.coding.me
http://unnow.cn
http://www.heartsxin.xyz
网友评论