A New Design

在本学期开学的时候看到了Emacs的Org-mode¹感觉很是神奇啊，根据官方文档到介绍，这个是写笔记，写文档，写TODO的利器啊。 于是就只能硬着头皮看这些英文了。虽然有些地方不是很理解，但是大概意思还是可以看懂的。 而且我觉得这个本来就是一个需要时间积累的东西，在接下来的日子中好好熟悉他吧。

前段时间在github上搭建了一个Jekyll的博客，使用的是Markdown这一标记语言，感觉使用起来很是顺手， 不过有时候感觉在生成Html的时候会生成错误，格式完全不正确。 不过这些不是重点。重点是我现在看到了Org-mode¹,这个从Emacs23开始被集成进包中一起分发的插件，我感觉有必要去玩一下。

另外我也看到了有人结合Org-mode和Jekyll来写blog， 比如在org-mode官网上的这篇文章Using org to Blog with Jekyll中提到的ian-bartn 他的blog。 我就是跟着其一步一步来实现的，下面我详细说明一些细节。其实也是需要我记住到一些注意点。

当然我还参考了这些网站:

1. Publishing Org-mode files to HTML²
2. The Org Manual³
3. Hello Worg, the Org-Mode Community!⁴
4. The 10 best fonts from the Google Webfonts Directory⁵
5. ian-barton.com⁶
6. 12个醒目的水平布局网站设计⁷

这个我已经在

做了比较详细的介绍，我在这里就不再做过多的讲述了。如果有什么疑问随时可以联系我。

根据Using org to Blog with Jekyll的介绍。需要在.emacs文件中添加如下的代码：

我们在这里只需要修改 :base-directory 和 :publishing-directory 这两个变量的值（注意有两处哦）。 之后就可以使用 C-c C-e P 来生成当前工程了。 当然你也可以使用 C-c C-e X 来生成。 可能我在这里写的不是很详细，文档中有详细描述，你可以看文档，也可以写电子邮件给我，我们一起讨论。

还有这里有一个有趣的事情，那就是在org目录下有哪些目录，那么在导出的时候也会在导出到目录下生成相应的目录。比如：base-directory为~/blog， 在blog下有books, notes这两个文件目录，那么在导出到目录publishing-directory为~/publish下会自动生成books, notes这两个文件目录。如果你 现在看不懂这个句子，那么你在尝试之后会有所体会。

这个配置文件修改完成之后，就可以开始写blog了。一个简单的blog例子：

#+TITLE: A New Design
#+AUTHOR:ICECREAM(氷菓)
#+EMAIL:creamidea(AT)gmail.com
#+OPTIONS:H:4 num:t toc:t \n:nil @:t ::t |:t ^:t f:t tex:nil
#+LINK_HOME: https://www.google.com
#+STYLE:<link rel="stylesheet" type="text/css" href="../css/style.css">
#+INFOJS_OPT:
#+BEGIN_HTML
---
layout: doc
title: A New Design
subtitle: This is my new start
categories: blog
tags: helloworld design
---
#+END_HTML
** Header1
** Header2
...
** END

写配置文件就是让org-mode在生成的时候只是生成body部分，其他的部分不要生成。而.org文件中这么写只是方便以后生成pdf文件，所以有些参数作者我 也写完整了。包裹在#+BEGIN\_HTML…#+END\_{HTML之间的就是告诉org}-mode这部分不要翻译，那么这部分在生成到html中将保持原状，那么这个部分接下去 将交给jekyll去处理，这个就是整个过程了。

在#+END\_{HTML之后的内容就是使用标准的org}-mode格式去写了。

整个流程就是这个样子，org-mode先生成一个中间的html文档，这个html文档等同于原来写的markdown文档，所以配置文件中将导出目录指定为\_post。 接下来jekyll会去处理这个html文档。将其最终生成到\_site/\_post中去，这么一来，一个标准的网页就可以这样诞生了。

这里的设置也是很简单，只要安装好yasnippet之后， 如果不知道如何安装Yasnippet的话，可以参考我写的这个简单的教程:

, 在/path/to/yasnippet/snippets下 新建一个叫做org-mode的文件夹（貌似现在的yasnippet会自己识别了），然后创建一个 叫做blog的文件，将下面的代码复制即可（当然你可以根据实际情况稍作修改）：

# contributor: ice cream <creamidea(AT)gmail.com>
# name: generate blog model
# key: blog
# --
#+TITLE: $1
#+AUTHOR:ICECREAM(氷菓)
#+EMAIL:creamidea(AT)gmail.com
#+OPTIONS:H:4 num:t toc:t \n:nil @:t ::t |:t ^:t f:t tex:nil
#+LINK_HOME: https://www.google.com
#+STYLE:<link rel="stylesheet" type="text/css" href="css/style.css">
#+INFOJS_OPT:

#+BEGIN_HTML
---
layout: doc
title: $1
subtitle: $2
categories: blog
tags: $3
---
#+END_HTML

记得重新启动Emacs

主要是文章的目录，我这次使用的是css，然后配合js完成平滑滚动的效果。 css的代码是我从orgmode官网 截取下来的：

主要思路：org-mode在生成html的时候会生成一个目录，而那些html标签是固定，详细的可以看文档。那么这样就可以使用css来使其悬浮于左上角。 而其平滑的滚动效果则可以使用js来实现，代码如下：

(使用jQuery，就是这么方便。当然你完全可以纯手工打造，作者我就不在次献丑了)

综合测试下来，感觉兼容性表现不错。几乎所有主流的浏览器都可以正常显示。

为何会突然想到修改blog，我其实也不知道。不过正好现在是清明放假期间，而且实在是想改一下那个厚重的blog了，另外更想使用org-mode来 记录一些东西。于是就在这个期间花了两天的时间来修改了整个blog的风格。这次主要是创造一个清新整洁的界面，但愿给你的感觉是这样子。

还有不得不说ubuntu的unity桌面。感觉做的的确不错，但是就是有些快捷键和Emacs冲突了，不得不忍痛舍弃，去使用gnome3，最后感觉还是不行。 无奈回归gnome classic。不过使用起来的确很是顺手，虽然在ubuntu系统上有些许小毛病，不过google一下很快解决了。我想这或许是我最近会停下来 修改blog的原因之一吧。（^_^{,估计你看不懂我在写什么}， 不过这不是重点）

还有让人实在想说几句的国内网络环境，ubuntu升级让我纠结死了。

不过现在应该几乎没有什么其他的事情了吧，接下来就要去企业实训了（相当于）。只是希望有一段时间可以使用blog来消磨时间，记录点滴的知识。 不求一下子掌握许多，但愿可以慢慢感受时光的流逝吧。

最后感谢van9ogh提出的一些建议以及我最敬爱的小杰同学帮我修改的背景图片。

お休みなさい。