Hexo 设置以及light主题优化

写这篇呢也就是为了自己以后改什么找什么方便一些，其实大部分都是对Zippera博客的整理。

对于搭建hexo博客，我是参照Zippera的教程二，里面介绍的很详细。最后在_config.yml中添加deploy的时候repository项使用ssh地址会更方便些。

而且楼主之前设置的passphrase设置的过于复杂，所以每次deploy都是很麻烦。

light主题优化

Install


输入如下并且在..\Hexo\_config.yml中将theme改为light：

git clone git://github.com/tommy351/hexo-theme-light.git themes/light

Update

输入如下：

cd themes/light
git pull

Config

1.menu——设置导航栏

打开..\Hexo\themes\light\_config.yml,可以对menu进行设置，可以参考zippera教程四。

例如：添加“关于”

Ⅰ hexo new page "about"

Ⅱ source\about\index.md编辑内容

Ⅲ themes\light\_config.yml中添加：

1
2

menu:
  About: /about

2.设置背景图片

打开..\Hexo\themes\light\source\css\_base\layout.styl，在body段下添加background-image url('/imgs/grey.png')，其中imgs放在source文件夹中，另外一定要将原来的background行删掉。

之后把你想用的图片放进去就ok了。

3.fork me on hithub

打开..\Hexo\themes\light\layout\_partial\head.ejs，在<head>段内添加如下：

1
2
3

<a href="https://github.com/Sherlockyu" target="_blank">
<img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png" alt="Fork me on GitHub">
</a>

4.标题效果

打开..\Hexo\themes\light\source\css\_partial\header.styl，第二行text-shadow 0 0 1px #fff，稍作修改就能出现不同的效果呦~

修改之前：2.png

试着将#fff改为#0f0

修改之后：1.png

另外设置blog字体大小，打开..\Hexo\themes\light\source\css\_base\layout.styl，在body段下font-size修改。
不过这个改的应该是整个页面整体字体的大小~~

5.添加标签页小图标

打开..\Hexo\themes\light\layout\_partial\head.ejs，将

1

<link href="<%- config.root %>favicon.png" rel="icon">

替换成

1

<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">

其中favicon.ico文件放在source下。

图标制作网站：www.favicon.con。

6.添加多说

注册多说，获得通用代码，复制到..\Hexo\themes\light\layout\_partial\comment.ejs中

1
2
3
4
5

<% if(page.comments){ %>
<section id="comment">
通用代码
</section>
<% } %>

7.添加百度分享

在百度分享获得代码，复制到..\Hexo\themes\light\layout\_partial\comment.ejs中，将<%-partial('post/share')%>删掉替换为百度代码。

8.添加各种widget

在..\Hexo\themes\light\_config.yml中，如下：

1
2
3
4
5

widgets:
-category
-tag
-blogroll
-...

其中blogroll是友情链接，在..\Hexo\themes\light\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://sherlockyu.github.io/" title="Zippera's Blog">Zippera</a></li>
</ul>
</div>

同理可添加微博秀啊别的插件什么的。

9.生成post时默认生成categories和tag

在scaffolds\post.md中添加categories和tag，应用在page.md和photo.md等。

大概就这么多，以后做什么修改再补充呗~！

Hexo
Hexo