A New Design

1 前言

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

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

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

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

  1. Publishing Org-mode files to HTML2
  2. The Org Manual3
  3. Hello Worg, the Org-Mode Community!4
  4. The 10 best fonts from the Google Webfonts Directory5
  5. ian-barton.com6
  6. 12个醒目的水平布局网站设计7

2 Jekyll博客的基础搭建

这个我已经在

My First Article

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

3 Emacs配置

根据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这两个文件目录。如果你 现在看不懂这个句子,那么你在尝试之后会有所体会。

4 Org文件如何开始书写

这个配置文件修改完成之后,就可以开始写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中去,这么一来,一个标准的网页就可以这样诞生了。

5 配合yasnippet使用便捷输入

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

How To Install Autocomplete And 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

6 本次其他改进点

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

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

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

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

7 写在最后

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

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

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

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

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

お休みなさい。

Footnotes:

冰糖火箭筒(Junjia Ni)

2013-04-05

2016-11-10 Thu 13:03

Emacs 25.1.1 (Org mode 9.0)

2016-11-10 Thu 12:43