帐前卒专栏

Without software, we are nothing.

Modify Octopress Blog

    这几天一直在捣鼓blog.因为很久没有用Octopress写blog.另外也没有碰HTML相关。所以写markdown或者改Octopress都手生。这里把各种修改方法一一记下。要学习的是ruby, Liquid.

0.开始学习

    学习ruby推荐以下这几个网站:

    然后是学习Liquid. Liquid这个本身是用ruby写的。所以只需要会用就行了。语法很像JSP.
Liquid语法example

    YAML. 这个全称是’YAML Ain’t Markup Language。‘。定义看起来和GNU很想。这个鬼东西不希望采用XML的方式。基本是做配置文件使用的。如果想细细学习。猛击这里。在Octopress中基本上也就是定义了一下全局的某些量的true,false.其他基本上没有用。

1. 开始修改Octopress blog

1.1 Octopress 简单介绍

    Octopress. 这个是继承了Liquid.然后加了一些plugins.最主要的plugin是plugins/octopress_filters.rb. Octopress的工作原理就是使用Liquid对各种文档进行渲染生成html. 只不过比原始的Liquid的功能更多。另外使用Rake对各种命令打包。Octopress最重要的几个目录是: source, plugin. Octopress会先进行渲染,然后将渲染后的文件放入到public目录中,之后再将public目录中的文件移动到_deploy目录下。然后通过git上传_deploy目录完成发布。所以如果你想加入什么自己新写的html不要放到public或者_deploy目录下。要放在source目录完成发布。所以如果你想加入什么自己新写的html不要放到public或者_deploy目录下。要放在source目录下。比如我为自己的blog自定义了一个404.html.那么就要放入到source目录下。或者放入其他目录下并且改写Rakefile, 改写 “multitask :push”中的命令。

1.2 Octopress source的文件目录结构。

  • 首先是_posts这个目录。这个是用来存放你用markdown写的blog的。使用rake new_post[‘xxxx’] 就可有创建一篇名为xxxx.markdown的文件。
  • _includes这个目录。这个目录是引用各种模板html的。例如我的jiathis脚本和google ads脚本.我个人一般会将这些第三方存放在_includes/post目录下。引用的时候使用{% include post/xxx.html %}. 如果是在_include下的article.html,引用则为{% include article.html %}. 其中最重要的是article.html文件。这个每篇文章的显示。并且对于首页和具体blog都是引用的article.html. article.html中有 {% if index %},如果index为true,则是首页。
  • _layouts这个目录,这个目录是对应着每篇文章的样式(当点进某篇文章后,这个目录下的文件就开始其作用)。其中最重要是post.html这个文件。修改也主要是修改这个。
  • index.html. 这个就是首页了。页面的排版都在这里。

2. 实战

2.1 jiathis 添加

     下面以jiathis的添加为例。
jiathis 图标
     加入jiathis需要修改以下这些文件:

  • 添加 source/_include/post/jiathis.html (不用照抄,直接在jiathis.com中找找同样的html即可。)
    jiathis.html

  • source/_include/article.html 修改为:
    jiathis 放入article.html的位置 图中修改的位置是点击到详细页面后,jiathis出现。如果希望在首页就出现,一种可以修改 else之前的,或者直接修改source/index.html文件

2.2 修改侧边栏

     如果你的blog有侧边栏的需求的话。那么需要改两个地方:一个是post.html,另外一个是index.html. Octopress的页面控制基本就是由这两个文件组成。index.html是控制首页。而post.html是控制详细页。

  • source/_layouts/post.html 修改最下方,例如下图(不要照抄):
    sidebar

  • source/index.html 也是修改最下方。

index sidebar

4. 添加404页面。

     github上的404页面可以定制。只需要在index.html那个目录中加入一个404.html即可。例如我的:
404.html

3. 总结

     之前觉得这个Octopress很cool,后来才发现上了贼船。这东西定制起来还是比较费劲。另外最费劲的就是Octopress升级。下一章讲如何升级。不过还是劝大家暂时不要升级,下个版本感觉不稳定,有很多诡异的问题产生,而且它的兼容性也没有做好。还有就是在markdown里写Liquid脚本。这才是个渣。因为有时候希望这些脚本被显示的展示给用户,那么就需要将这些脚本转为16进制,否则Liquid就会解析该代码。所以用16进制写{%%},或者直接使用截图的方法。另外Octopress的双引号解析更渣,都解析反了…所以推荐使用单引号。

Comments