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的主题修改
(这个链接里的内容我暂时只做了第一个)

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

修改字体

路径:themeshexo-theme-light-mastersourcecss_basevariable.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. 所以我们需要自己写一个。
路径:themeshexo-theme-light-masterlayout_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标签中间则是链接显示的文字)

把标签添加到博客里去

路径:themeshexo-theme-light-master_config.yml
找到 widgets: 在下面添加 - blogroll-后要加一个空格)
各类widget的顺序与博客上的显示上下位置有关

删除一二级标题下的横线

Light这个主题有一点我超级不喜欢,就是一二级标题下面的横线。于是我就把它删掉了。当然你们觉得无所谓的话可以留着。
路径:themeshexo-theme-light-mastersourcecss_partialarticle.styl
使用ctrl+f找到h1 然后把border-bottom 1px solid color-border这一行删掉。线就消失了。
我的话还把下一行的10px改成了0px. 因为感觉空得太多不太美观。

主标题下方加分割线

加上线以便区分标题正文
路径跟上一步一致:themeshexo-theme-light-mastersourcecss_partialarticle.styl
使用ctrl+f找到header 然后稍微往下拉一点,找到.titlefont-weight normal下加两行代码

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

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

设置多层分类

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

添加Latex公式效果

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

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