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
打开文件，将一下代码复制进去：

1
2
3
4
5
6
<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下加两行代码

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

其中border-bottom:后的像素数据可以控制线的粗细

设置多层分类

如果要想博客写的有条理。博客中的每篇文章都应该有它的分类。一个大类里面还应该有多个小类。即为多层分类。
在Light主题中自带的分类只有单层的。无法表示出层次感。这里我也给一个链接 Hexo主题中实现多级分类
大家可以按照这篇文章，设计自己的分类效果。

添加Latex公式效果

技术类的博客肯定少不了公式的，所以安装上Latex还是很有必要的。
搭建一个支持LaTEX的hexo博客
（记得如果是用的上面文章中的淘宝镜像。npm 记得改成 cnpm）

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

杂, blog
blog, hexo, node.js