• 用emacs orgmode写博客 & 发布到博客园碰到的几个问题


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

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

    1 简介

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

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

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

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

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

    http://blog.striveforfreedom.net/images/bad_indent.png

    红线圈住的便是异常缩进。网上有文章说使用文章在左侧显示的模板就没这个问题,我换了一个文章在左侧显示的模板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代码有点小问题,那就是会多显示一个标题,显示效果如下:

    http://blog.striveforfreedom.net/images/unwanted_title.png

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

    http://blog.striveforfreedom.net/images/remove_title.png

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

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

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

    http://blog.striveforfreedom.net/images/unwanted_space.png

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

    <p>&nbsp;</p>
    

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

    http://blog.striveforfreedom.net/images/remove-xml-del.png

    删除红线圈住的地方就行了(一定要把%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定制页面风格功能来改善,这里就不再赘述了。

  • 相关阅读:
    【Redis】搭建主从复制
    【安装】Ubuntu之Docker
    【安装】Ubuntu之MySQL
    【Docker】Dockerfile构建指令
    【Docker】常用命令
    【14】Flask 请求上下文
    【13】Flask 上下文前夕
    【12】Flask 分析线程和协程
    【11】Flask 高级进阶
    【10】Flask 高级摘要
  • 原文地址:https://www.cnblogs.com/sheniudou/p/2954643.html
Copyright © 2020-2023  润新知