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(/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)熟悉了不少,阅读了很多优秀博主的博客网页代码,感觉自己要学的还挺多,努力看书吧。