用emacs org-mode写博客 & 发布到博客园碰到的几个问题

用emacs org-mode写博客 & 发布到博客园碰到的几个问题

我的博客：http://blog.striveforfreedom.net

Table of Contents

• 1 简介
• 2 发布博客到博客园碰到的问题
  • 2.1 某些模板缩进异常的问题
  • 2.2 多出一个标题的问题
  • 2.3 标题前出现太多空行的问题
• 3 小结

1 简介

最近想写个博客（主要是技术博客），记录平时生活与工作中想法和问题，在网上搜了一圈，发现博客园挺好的，于是就打算在博客园安营扎寨了。因为平时是用emacs写代码的，很自然地就打算用emacs(version 24.2) org-mode(version 7.8.11)来写博客了，不过在博客园测试发表博客的时候发现了几个问题，摸索了几天终于解决掉了，因此有了这篇文章，希望对碰到类似问题的朋友有所帮助。

2 发布博客到博客园碰到的问题

在博客园发测试博客的时候便碰到了下面的三个问题，一度想放弃博客园了，但测试的另外一个博客效果更差，相比之下博客园还在可以改造之列，只好静下心来解决问题了，所幸的是问题最终都解决掉了。

2.1 某些模板缩进异常的问题

我最初设置的博客模板是AnotherEon001，发表博客之后，左侧缩进异常，效果图如下：

红线圈住的便是异常缩进。网上有文章说使用文章在左侧显示的模板就没这个问题，我换了一个文章在左侧显示的模板kubrick（就是现在用的这个模板），果然就没有这个问题。但后来发现还是有部分文章在左侧显示的模板存在这个问题，我搜到了博客园上的一篇文章 解决Org和博客园模板的冲突问题 ，这篇文章给出了问题的原因和解决办法，照着修改之后再用模板AnotherEon001就没这个问题了。导致这个问题的原因是org-mode导出html中的一个<div>元素的id为"content"，而博客园模板恰巧给id值为"content"的元素定义了一个样式（我这个例子是定义了一个很大的margin-left值），于是便出现了上图所示效果。那篇文章没有给出代码，我这里给出一下，方便一下不熟悉的朋友：

(add-hook 'org-mode-hook (lambda()
                           (setq org-export-html-content-div nil)
                           (setq org-export-html-divs '("preamble" "org-content" "postamble"))))

其中，变量org-export-html-divs定义了三个<div>元素的id值，原有值为("preamble" "content" "postamble")，这里把它改成了("preamble" "org-content" "postamble")。

2.2 多出一个标题的问题

直接使用emacs导出来的html代码有点小问题，那就是会多显示一个标题，显示效果如下：

红线圈住的便是多余的标题，虽然这是个小问题，无伤大雅，但是看着总觉得很别扭，不能忍受。经过几次尝试发现，出现这个小标题的原因是emacs导出的html代码中的含有<title>元素，博客园的系统根据<title>元素生成了这个小标题，找到了原因修改就很简单了，只要使导出的html不包含<title>元素就行了，导出html功能是由函数org-export-as-html完成的，找到这个函数，去掉<title>元素的生成就OK了，如下图所示：

只要把红线圈住的地方删除就行了。

2.3 标题前出现太多空行的问题

解决了上述问题之后，标题前面仍有一大片空白，非常不美观，如下图所示：

通过查看发布之后的博客html代码发现有两处代码导致了空行出现。 第一处是:

<p>&nbsp;</p>

原因是emacs导出了xml声明，博客园系统处理之后便生成了上述代码。可以通过修改org-export-as-html函数避免上述代码的生成，从而消除空行：

删除红线圈住的地方就行了（一定要把%s后面的换行符也删掉，否则不能消除空行）。 第二处是:

<div id="preamble">&nbsp;</div>

这是因为emacs导出了一个空的<div>元素，博客园系统处理之后便生成了上述代码。可以通过修改项目属性:html-preamble来避免导出空的<div>元素，从而消除空行。代码如下（为了清晰起见，省略了其它属性的设置代码）：

(add-hook 'org-mode-hook (lambda()
                           (setq org-publish-project-alist '(("cnblogs" :html-preamble nil)))))      

3 小结

把这些问题解决之后，博客界面看着舒服多了，还有些显示的细节问题，可以通过博客园的CSS定制页面风格功能来改善，这里就不再赘述了。