特别喜欢新主题
刚换了一个主题,fork 自林安亚的项目,这个模板是我从知乎的一个问答里 有哪些简洁明快的 Jekyll 模板? 看到的。它有这些特点:
- 三栏布局:第1栏是分类,第2栏是文章列表或标签列表;第3栏是首页、文章、归档,等其它页面。
我特别喜欢的为知笔记 desktop、GitHub desktop 还有 GistBox web app 也是三栏式布局; - 颜色搭配:看着非常舒服,我之前也有看到过其它三栏布局,但不喜欢它们的颜色搭配、文章段落、汉字显示的效果;
- 右上角的两个按钮:可以隐藏左边两栏而全屏显示文章;可以显示/隐藏文章目录;
在新主题的基础上做了一点儿修改
特别喜欢这些,就立刻换掉了我用了很久的主题,并在其基础上做了如下修改:
- 首页
index.html
显示某个分类的文章(而不是标签); - 修改第一栏(分类栏)的 padding 和 fontSize(否则三个汉字就要挤到第二行了);
- 在
_config
文件中增加全局变量,比如 url_about,其它布局文件通过site.url_about
方式引用,方便继承这个项目的人修改; - 增加了一些社交图标超链接(web font icons);
commit e3d3aed - 修改第二栏(文章列表栏)的滚动条样式;
commit 926a1a4
修改滚动条样式
而如何修改滚动条的样式,对于一个不懂前端的我来讲,使出了最笨的力气,事情是这样的:
lay1010的主题继承自suyan的主题,我喜欢suyan中的第二栏滚动条样式,细细的一条,不占空间,比默认的好看多了。我先从图片中抓取颜色:滚动条的背景色 E5E8EC,前景色 C8CED6;
然后以c8ced6为关键词查找,找到了关键的代码段/assets/css/style.css ,稍作修改放到了/public/css/base.css .aside2
对应的位置。
增加font icon
可以从开源项目 Font-Awesome/icons/ 获取font icon,然后添加到 html 文件中,像这样:
<li class="nav-link">
<a class="stackoverflow" href="http://stackoverflow.com/users/2722270/li2" title="Stackoverflow" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
</li>
但上述项目没有 segmentfault,怎么办呢?
从这个网站 www.iconfont.cn 查找,找到后设置颜色(#18A095)和大小(我设置了64),然后下载。
而这个网站可以从图片中取颜色。
然后在 html 中插入如下代码即可:
<a href="http://segmentfault.com/u/li2" target="_blank">
<img src="/assets/img/iconfont/iconfont-sf.png" height="24" width="24" />
</a>
制作Logo
这个 一个非常酷的网站 text logo design,有很多样式可以选择,为输入的文本制作图片logo,像这样:
批量修改一些名称
比如我之前的文章分类名称全部是大写,现在喜欢首字母大小其它小写,于是趁着换主题的功夫全部修改了:
$find . -type f -name "*.md" | xargs sed -i '' 's/category: ANDROID/category: Android/g'
另外之前使用的超链接是 /:categories/:title/
,现在觉得超链接中有时间更合适 /:year/:month/:title.html
, 因为文章尤其是技术类文章,时效性太强了。
想要但现在实现不了的功能
-
按文章数量排序 category 和 tag;(暂时做不到)
-
按访问量排序文章(暂时做不到);
现在我的博客是这个样子
主页:
标签和归档:
文章(第一栏和第二栏未隐藏):
文章(第一栏和第二栏已隐藏):
旧的样子
是这个样子:
总之,非常喜欢新主题,花了一个周末的时间做迁移和修改。接下来就是写东西啦 ;)
Update 2016-01-26
由于commits未被计入Github的contributions,所以只好创建一个独立的repository,不在fork了 :(
官方对此的解释:
只有满足以下列出的所有条件,提交才会被计入贡献,其中有一条是:
The commits were made in a standalone repository, not a fork.