之间通过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
获取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文件夹介绍
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插件
新建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
修改comment.ejs
livere_uid: MTAyMC8yODg4MC81NDUw

这样就完成了配置,更新一下即可。

hexo clean
hexo g
hexo d

##总结
github学好了真的狠学到很多知识,只是我现在还不懂,所以就下来对上github上看看,加深对git的学习,在我的博客中对添加一些其他一些优秀博主的相关链接,有时候就是那些连接保存的不好,当时看到了,之后就没了。所以积累很重要。