background-image

next主题是我最先选择的主题，在使用期间也修改了几个地方，但是由于感觉背景色太亮，看久了眼睛不舒服，自己调背景色之后又感觉很不搭，所以最后还是换了yilia主题

关于next主题

NEXT主题
在使用next主题期间，我尝试更改了几个自己不太满意的地方

1、博客页脚爱心logo的更换，以及文字的更改

主题原来的样式如下：

em1

如果想要更改爱心logo，可以在themes/next/layout/_partials/footer.swig中找到

1
2
3
4
5
6
7
<span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
//改为下面这样
<span class="with-love">
    <i class="fa fa-send-o"></i>
  </span>

如果你想更改为其他的图标，可以在font awesome找到

如果想更改页脚文字，可以在themes/next/languages/zh-Hans.yml中,更改文字显示

1
2
3
footer:
  powered: "powered by  %s "
  theme: theme

更改以后效果是这样的

em2

2、每篇博客之间分割线的长度的更改

主题原分割线的长度如下：

em3

在themes/next/source/css/_common/components/post/post-eof.styl里更改如下代码

1
2
3
4
5
6
7
8
.post-eof {
    display: block;
    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
    width: 100%;//此处控制分割线长度
    height: 1px;
    background: $grey-light;
    text-align: center;
  }

更改以后的效果是这样的

em4

3、为博客添加留言功能

这个留言功能其实很好实现，在主站点
右键gitbash输入hexo n page guestbook即可在source目录下创建guestbook文件夹，里面会生成一个index.md文件，即可根据自己喜好编辑

4、访问博客加载速度慢

访问使用next主题的博客时，感觉博客的加载速度偏慢（难道是百度统计的锅？），应该是加载谷歌字体的锅，解决方法：themes/next/layout/_partials/head/external-fonts.swig/文件里的fonts.google.com改成fonts.useso.com

关于yilia主题

yilia主题
移动端的体验很好，配色看着很舒服，所以我最后选择了这个主题,配置过程中遇到了几个问题，列出来希望遇到相同情况的同学可以避免

1、头像不显示的问题

直接把layout/_partial/left-col.ejs里的代码修改为

1
2
<img src="<%=theme.avatar%>" class="js-avatar show">
        <img src="<%=theme.avatar%>" class="js-avatar show" style="width: 100%;height: 100%;opacity: 1;">

还有在hexo g的时候gitbash是会报错的，其实hexo g之后可以粗略看一下信息，如果是_config.yml里的语法错误，可以及时更改，这样会节省不少时间的（配置头像时我就出现了语法错误，耽搁了不少时间T_T）

2、给左边栏头像后面添加背景图片

在yilia/source/main.css中可以进行相关设置

1
2
3
4
5
6
7
.left-col .overlay {
    width: 100%;
    height: 180px;
    background-image: url(/blog/images/bg.jpg);//背景图片放在站点source/images目录下就行
    position: absolute;
    opacity: 1//这里可以设置背景的透明度
}

修改的时候我发现，main.css里面的代码是写在一行上的（这样做的原因应该是为了加快网页的加载速度），非常难以也读和修改，不过网上有很多在线格式化代码的工具，把代码复制粘贴过去就好了

3、添加腾讯404页面

为博客添加一个风格更符合的公益404页面，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
	<title>404 - Zcc's blog</title>
	<meta name="description" content="404错误，页面不存在！">
	<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="robots" content="all" />
	<meta name="robots" content="index,follow"/>
</head>
<body>
	<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone_v6/lostchild/search_children.js" charset="utf-8"></script>
</body>
</html>

待解决的问题

在更换博客主题后，我发现虽然还是可以使用多说评论，但是我之前的多说评论都不见了，而且多说评论数与实际显示评论数不符，查了不少但始终没找到解决方法。
不过这个问题对我来说影响不大，那就不理它了ヽ(ー_ー )ノ

2016-12-13日更新：
更换主题之后多说评论数不同，是因为next主题和yilia主题所生成的data-thread-key不同，只要在yilia/source/layout/_partial/post/duoshuo.ejs中把data-thread-key="<%=key%>"改成data-thread-key="<%=page.path%>"即可

自己折腾了这些之后，对谷歌开发者工具（Chrome Inspector）熟悉了不少，阅读了很多优秀博主的博客网页代码，感觉自己要学的还挺多，努力看书吧。