对我的paperbox(现在这个主题,landscape plus基础修改而来的,我引用了)做基于自己喜好的改造;

Part3: 字体美化与搜索框的添加

主题图变化

  • 换图

cube优化

  • cube改版!

  • cube不会自动滚动了

速度

  • 加速访问 [见hexo博客搭建优化,这个和paperbox没有关系,所以不放在这里写]

添加时间

  • 有个Update比较好~

标签改一下

  • 太丑了;太小了

字体问题

  • 同上

代码高亮

  • 感觉代码不是很好看,说不定就会改了

search

  • 添加站内搜索

字体问题

蜜汁绿色,哈哈哈哈

so easy~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// source/css/_partial/header.styl
#blog-title
text-decoration: none
//修改了下颜色
color: blog-title-color
font-size: blog-title-size
font-weight: bold
//修改了字体
font-family: fantasy
line-height: blog-title-size
padding: 5px 10px
text-shadow: 1px 1px 4px rgba(0,0,0,0.4),
0px 1px 10px rgba(0,0,0,0.1),
0px 6px 15px rgba(0,0,0,0.1)

最后在全局变量文件里面加上

1
2
3
4
// source/css/_variables.styl
// Header
blog-title-size = 2.66em //改大了一点
blog-title-color = rgb(89, 164, 143) //绿色

对比图:

原版的 标题上色变漂亮~

代码高亮

方法1:https://www.zfl9.com/hexo-code.html

方法2:http://masikkk.com/article/hexo-12-google-code-prettify/

我失败了Orz,我没有替换成功,我就是把字体改小了点

source/css/_partial/highlight.styl
1
2
3
4
5
6
7
8
9
10
11
12

.article-entry
pre, code
font-family: font-mono
code
...
pre
...
.highlight
@extend $code-block
//Add it to change coder size
font-size: 0.85em

看着也还行吧

image-20190930171335022

站内搜索的添加

原作者用的swiftype,还可以吧,直接申请账号然后填写swiftype_key到_config.yml下就阔以啦

搜索框实例

当然,你阔以设置下显示格式,网上教程蛮多,不说了,把图里面的马赛克填到swiftype_key里面就成

swiftype_key

总结

当然啦,我稍微还加了个图标,favicon.ico,和一个about.html,以及把背景图换了下,截止到现在,它的效果就如网站所示啦

折腾了这几天,把自己的博客做成了自己喜欢的样子还是很开心的;如果哪天看着觉得不顺眼了,说不定会再折腾会,哈哈哈