个人博客,转载自请注明出处,保留所有权利。
-
图标库 Font-Awesome
-
静态页面服务 Github pages
-
博客生成工具 Jekyll
-
博客生成工具 Jekyll-Bootstrap
-
前端工具库 JQuery
-
表格控件 DataTables
-
前端框架 Twitter Bootstrap
-
前端排版样式表 Typo.css
-
开发工具 Vim
提供了一个clean分支,直接检出clean分支修改,然后merge回master分支即可
- git checkout master
- git merge clean
所有的个性化变量都被替换为字符串"site"
建议使用该种方式,这样不用再清理文件,修改设置后可以直接使用,下面两种方式比较麻烦
- fork我的博客,修改fork后的项目名称为:你的github ID.github.com
- 修改fork后的远程仓库地址:git remote set-url origin 替换为你的仓库地址
- 参见清理文件并修改配置
- git clone https://github.com/site/site.github.com.git 替换为你的目录名
- git remote set-url origin 替换为你的仓库地址
- 参见清理文件并修改配置
清理文件步骤
- 删除_post目录下所有文件
- 删除pages目录
- 删除CNAME文件,如果你需要自定义域名,可以修改CNAME文件
- 修改config.yml中的设置,需要自定义的地方已经加了注释,建议把那个文件看一遍,对设置有个大概的了解
- 我使用我的id作为了一些设置的属性名、文件名、目录名,如果你想修改,最好使用替换工具,把所有文件中的"site",替换为你想要的名字 然后重命名以我的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/site/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会被指定为各自的文件名