hexo] Light主题的修改使用

（更新ing..）

（文中出现各类链接均来自搜索引擎。侵删）

使用hexo搭建博客

博客搭建在Github上，地址是 Nezar’s Nest . 搭建的过程参考零基础免费搭建个人博客-hexo+github

这里要注意几点：

上面链接中的

node.js

的版本最好在官网上下载 4.0.0（好像）以上的版本，不然淘宝NPM镜像步骤会失败

记得如果是用的上面文章中的淘宝镜像。

npm

以后都要改成

cnpm

来使用 （非常重要！）

Github的账号跟你要申请的博客的域名（xxx.github.io）黑体部分必须一致。否则博客会打不开，显示404

更改主题

当然这里你也可以用原来默认的官方主题

Landscape

.

这里给想换的朋友一个知乎上的问题链接 有哪些好看的 Hexo 主题？

我个人用的是其中很老的一个主题 Light . 很简约，我个人比较喜欢。

选完了主题，接下来就要对主题发挥自己的修改了。毕竟别人的东西自己用起来多多少少会有些不习惯，更何况在大天朝，有些功能使用起来可能不好用甚至没办法用。

这里需要再给一个链接，以便修改掉一些必须去掉的功能，增加一些必须有的功能 Hexo-基于hexo-theme-light的主题修改

（这个链接里的内容我暂时只做了第一个）

然后接下来就是自由发挥了。

修改字体

路径：

\themes\hexo-theme-light-master\source\css\_base\variable.styl

修改

font-default = "Times New Roman", "Microsoft YaHei", Arial, sans-serif

效果是以“Times New Roman”,”微软雅黑”,”Arial”,”sans-serif” 的优先级设置默认字体，由于“Times New Roman”无法作用中文字体，所以中文字体是“微软雅黑”。

（大多数浏览器都支持微软雅黑，也比较好看）

在同一个文件中继续修改标题的字体。

将

font-title = "Lato",

修改为

font-title = "Times New Roman",

。因为

Lato

这个字体有很多弊端。顺便将下面的

@import url("//fonts.googleapis.com/css?family=Lato:400,400italic")

删除。

添加友情链接的标签

编写一个

widget

由于

Light

主题中没有自带这个

widget

. 所以我们需要自己写一个。

路径：

\themes\hexo-theme-light-master\layout\_widget

在这个文件夹中创建一个文本文件，改成

blogroll.ejs

打开文件，将一下代码复制进去：

<div class="widget tag">
<h3 class="title">友情链接</h3>
<ul class="entry">
<li><a href="http://blog.csdn.net/nezar" title="Nezar" target="_blank">CSDN</a></li>
</ul>
</div>

当然这里的链接部分可以自己修改（

href

后带链接

title

表示鼠标悬停时显示文字

target="_blank"

表示在新窗口打开链接

a

标签中间则是链接显示的文字）

把标签添加到博客里去

路径：

\themes\hexo-theme-light-master\_config.yml

找到

widgets:

在下面添加

- blogroll

（

-

后要加一个空格）

各类

widget

的顺序与博客上的显示上下位置有关

删除一二级标题下的横线

Light

这个主题有一点我超级不喜欢，就是一二级标题下面的横线。于是我就把它删掉了。当然你们觉得无所谓的话可以留着。

路径：

\themes\hexo-theme-light-master\source\css\_partial\article.styl

使用

ctrl+f

找到

h1

然后把

border-bottom 1px solid color-border

这一行删掉。线就消失了。

我的话还把下一行的

10px

改成了

0px

. 因为感觉空得太多不太美观。

主标题下方加分割线

加上线以便区分标题和正文。

路径跟上一步一致：

\themes\hexo-theme-light-master\source\css\_partial\article.styl

使用

ctrl+f

找到

header

然后稍微往下拉一点，找到

.title

在

font-weight normal

下加两行代码

padding-bottom 15px
border-bottom: 4px solid color-border

其中

border-bottom:

后的像素数据可以控制线的粗细

设置多层分类

如果要想博客写的有条理。博客中的每篇文章都应该有它的分类。一个大类里面还应该有多个小类。即为多层分类。

在

Light

主题中自带的分类只有单层的。无法表示出层次感。这里我也给一个链接 Hexo主题中实现多级分类

大家可以按照这篇文章，设计自己的分类效果。

添加Latex公式效果

技术类的博客肯定少不了公式的，所以安装上

Latex

还是很有必要的。

搭建一个支持LaTEX的hexo博客

（记得如果是用的上面文章中的淘宝镜像。

npm

记得改成

cnpm

）

暂时先这样，接下来的部分下次更新..