(更新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
)
暂时先这样,接下来的部分下次更新..