个人博客，转载请注明出处，保留所有权利。
-
图标库 Font-Awesome
-
静态页面服务 Github pages
-
博客生成工具 Jekyll
-
博客生成工具 Jekyll-Bootstrap
-
前端工具库 JQuery
-
表格控件 DataTables
-
前端框架 Twitter Bootstrap
-
前端排版样式表 Typo.css
-
开发工具 Vim
- fork我的博客，修改fork后的项目名称为：你的github ID.github.com
- 修改fork后的远程仓库地址：git remote set-url origin 替换为你的仓库地址
- 参见清理文件并修改配置
- git clone https://github.com/codepiano/codepiano.github.com.git 替换为你的目录名
- git remote set-url origin 替换为你的仓库地址
- 参见清理文件并修改配置
清理文件步骤
- 删除_post目录下所有文件
- 删除pages目录
- 删除CNAME文件，如果你需要自定义域名，可以修改CNAME文件
- 修改config.yml中的设置，需要自定义的地方已经加了注释，建议把那个文件看一遍，对设置有个大概的了解
- 我使用我的id作为了一些设置的属性名、文件名、目录名，如果你想修改，最好使用替换工具，把所有文件中的"codepiano"，替换为你想要的名字 然后重命名以我的id为名的所有文件和目录
- config.yml中的comments和analytics必须修改，配置上你自己的账号，如果不想配置，请置provider为false
- 出现问题，建议自己google，有很多详细的教程，或者直接参考官方文档 jekyll
- 有好的建议或者要求，欢迎提issue或者发邮件交流
归档页面文章前的符号是font-awesome的图表名称，请在post中的yaml指定icon属性
比如想展示class名字为icon-github的图标，指定icon属性值为github即可,具体请参考post中的写法
如果使用rake文件生成post，post默认的图标是file-alt
为了自定义导航栏子栏目的顺序，重写了这部分的逻辑，具体在文件_include/codepiano/navigation_list中
为了在后台实现高亮当前的导航页，用一种不太好的方式实现了这个功能，建议使用js在页面加载后进行设置
用我自己使用的导航栏来作为示例，我的导航栏有四个，对应文件在根目录下，均为html文件
-
文章 /posts.html
-
时间线 /timeline.html
-
目录 /categories.html
-
关于 /about.html
首先color_hack这个变量存放导航栏的文件名， {% assign color_hack = 'posts timeline categories about' %}
比如点击导航栏的‘文章’链接，page.url变量的值是/posts.html，将这个字符串去除‘/’，去除‘.html’，得到字符串posts，存入current_nav变量
然后将color_hack中的current_nav替换为'active'，即将posts替换为active，得到color_hack的指为'active timeline categories about'
然后将数组分割，得到一个数组[active,timeline,categories,about]，赋值给color_hack
然后按顺序指定导航栏的html内容，顺序应与color_hack初始值中的顺序相对应，class属性的指即从对应的color_hack中按顺序获取
-
<li class="{{color_hack[0]}}"><a href="/posts.html">文章</a></li> -
<li class="{{color_hack[1]}}"><a href="/timeline.html">归档</a></li> -
<li class="{{color_hack[2]}}"><a href="/categories.html">目录</a></li> -
<li class="{{color_hack[3]}}"><a href="/about.html">关于</a></li>
这样当前访问的导航的class会被指定为active，其他导航的class会被指定为各自的文件名