codepiano.github.com, 个人博客,powered by jekyll && bootstrap

分享于 

6分钟阅读

GitHub

  繁體
个人博客,powered by jekyll && bootstrap
  • 源代码名称:codepiano.github.com
  • 源代码网址:http://www.github.com/codepiano/codepiano.github.com
  • codepiano.github.com源代码文档
  • codepiano.github.com源代码下载
  • Git URL:
    git://www.github.com/codepiano/codepiano.github.com.git
    Git Clone代码到本地:
    git clone http://www.github.com/codepiano/codepiano.github.com
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/codepiano/codepiano.github.com
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    个人博客

    ![Gitter](https://badges.gitter.im/Join Chat.svg)

    codepiano

    个人博客,转载请注明出处,保留所有权利。

    使用的工具

    图标库 Font-Awesome

    静态页面服务 Github pages

    博客生成工具 Jekyll

    博客生成工具 Jekyll-Bootstrap

    前端工具库 JQuery

    表格控件 DataTables

    前端框架 Twitter Bootstrap

    前端排版样式表 Typo.css

    开发工具 Vim

    使用方法

    通过clean分支(建议)

    提供了一个clean分支,直接检出clean分支修改,然后merge回master分支即可

    • git checkout master
    • git merge clean

    所有的个性化变量都被替换为字符串"site"

    建议使用该种方式,这样不用再清理文件,修改设置后可以直接使用,下面两种方式比较麻烦

    通过fork

    • fork我的博客,修改fork后的项目名称为:你的github ID.github.com
    • 修改fork后的远程仓库地址:git remote set-url origin 替换为你的仓库地址
    • 参见清理文件并修改配置

    通过clone

    清理文件并修改配置

    清理文件步骤

    • 删除_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会被指定为各自的文件名


    相关文章