emacs org-mode文件轉html文件

1. 發布站點 by emacs org-mode

1. 發布站點 by emacs org-mode

org-mode 寫文檔做筆記啥的很方便, 反應超快(因為是文本文件), 而且在emacs中可以顯示出類似word的效果. 但是給沒有emacs的人看時, 就不太方便.(沒有高亮顯示, 也無法在文本中跳轉等等)

為了將繼續使用 org-mode 帶來的便利, 也為了方便別人查看自己的文檔, 稍稍調查了一下org-mode導出html的功能.

1.1 org-mode 自帶的導出方法

強大的org-mode其實自帶了導出各種格式的功能. 導出html格式的快捷鍵很簡單:

C-c C-e h

雖然方便, 但是導出的html格式不太好看, 而且不能批量導出, 這個命令只能導出一個org文件.

1.2 批量導出

org-mode雖然也有導出org project的命令, 但是需要在 .emacs中配置相關導出選項. 每次導出不同的項目時, 需要修改 .emacs, 修改 .emacs后要么重新導入, 要么重啟 emacs. 總覺得很麻煩.

后來參考了博客園上[麥滿屯]的一篇博客¹, 用Makefile來簡化 org 文件的導出和發布. Makefile如下:

EMACS=emacsclient   # 這里我用的emcasclient, 沒有用emacs. 因為我的emacs是以server方式啟動的
ORG_CONFIG_FILE=publish-config.el   # 導出org文件的配置
EMACS_OPTS=--eval "(load-file \"$(ORG_CONFIG_FILE)\")"

DEST_HOST='myhost.com:public_html/'
OUTPUT_DIR=~/tmp/output   # 導出的位置, 這個位置其實是在 public-config.el 中配置的, 
                          # 這里的定義這個變量的作用是為了刪除(make clean), 以及上傳server(make upload)

all: html upload

html:
    @echo "Generating HTML..."
    @mkdir -p $(OUTPUT_DIR)
    @$(EMACS) $(EMACS_OPTS)
    @echo "HTML generation done"

upload:
    @cd $(OUTPUT_DIR) && scp -r . $(DEST_HOST) && cd ..

clean:
    @rm -rf $(OUTPUT_DIR)

僅僅導出html, 而不發布站點, 只要用:

make html

其中用的配置文件 publish-config.el 如下: 主要參考了[麥滿屯]的一篇博客¹

;; config for publish site from org files
(require 'org-publish)

(setq org-publish-project-alist
      '(
        ;; These are the main web files
        ("org-notes"
         :base-directory "~/tmp/www/" ;; Change this to your local dir
         :base-extension "org"
         :publishing-directory "~/tmp/output"
         :recursive t
         :publishing-function org-publish-org-to-html
         :headline-levels 4             ; Just the default for this project.
         :auto-preamble nil
         :auto-sitemap t
         :sitemap-filename "sitemap.org"
         :sitemap-title "sitemap"
         :section-numbers nil
         :table-of-contents t
         :style "<link rel='stylesheet' type='text/css' href='css/org-manual.css' />"
         :style-include-default nil
         )

        ;; These are static files (images, pdf, etc)
        ("org-static"
         :base-directory "~/tmp/www/" ;; Change this to your local dir
         :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf\\|txt\\|asc"
         :publishing-directory "~/tmp/output"
         :recursive t
         :publishing-function org-publish-attachment
         )

        ("org" :components ("org-notes" "org-static"))
        )
      )

(defun myweb-publish nil
  "Publish myweb."
  (interactive)
  (org-publish-all))

(myweb-publish)

注意上面的配置文件中引用了一個 css 文件 org-manual.css 這是因為默認導出的html文件格式實在是… …

1.3 css 美化

css的使用方法主要參考的了 HE QIN 同學的說明², 說明的很詳細, 我參照着她的說明簡化了一下, 暫時只有css, 沒有引入 javascript. 這個 org-manual.css 的樣式是直接從 org-mode 的官方說明³ 上直接下載下來的, 因為我覺得官方的使用說明的樣式還挺簡潔.(特別是右上角的內容導航很酷 ^_^) org-manual.css內容如下:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Droid+Serif);

html {
    padding: 0;
}

body { 
    font-family: "Droid Serif", "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Verdana, sans-serif;
    font-size: 11pt;
    line-height: 1.3;
    margin: 40pt;
    padding: 0;
}

#postamble {
    visibility:hidden;  /* 隱藏了postamble, 因為總是對不齊, css太菜...... */
    text-align: center;
    width: 75%;
    bottom:0;
    margin-left: auto;
    margin-right: auto;
    _position:absolute;  
    _top:expression(document.documentElement.clientHeight + document.documentElement.scrollTop - this.offsetHeight);  
}

.title {
    background: url(../images/logo.png) no-repeat 12px 5px;  /* 這個圖片下載后被我替換了, 本來是org-mode自己的logo */
    position: fixed;
    display: inline;
    left: 0px;
    top: 0px;
    height: 54px;
    width: 100%;
    margin-top: 0px;
    background-color: #eee;
    padding: 0;
    z-index: 99;
}

#orgquote {
    position: fixed;
    display: block;
    top: 77px;
    padding: 5pt;
    text-align: center;
    background-color: black;
    width: 100%;
    color: #ccc;
    box-shadow: 0px 15px 10px #fff;
    font-size: 90%;
    font-family: Courier new;
    z-index: 98;
}

#paypal {
    position:fixed;
    right: 10px;
    top: 15px;
    z-index: 100;
}

#paypal button {
    font-family: Courier new;
    cursor: pointer;
    color: white;
    position:fixed;
    display: block;
    right: 14px;
    top: 15px;
    width: 90px; 
    height: 40px;
    box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: #53e1e3;
    font-weight: bold;
}

#paypal button:hover {
    position:fixed;
    display: block;
    right: 9px;
    top: 15px;
    width: 90px; 
    height: 40px;
    margin-top: 5px;
    margin-left: 5px;
    box-shadow: 0px 0px 0px #888;
    -webkit-box-shadow: 0px 0px 0px #888;
    -moz-box-shadow: 0px 0px 0px #888;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: #49f4f6;
    font-weight: bold;
}

h1.title {
    text-shadow: 2px 2px 4px #999;
    padding-top: 23px;
    padding-left: 70pt;
    font-size: 23pt;
    font-family: Courier New;
}

#linklist 
{
    position: fixed;
    font-size: 13pt;
    font-family: Courier New; 
    padding-top: 0px;
    padding-right: 0px;
    top: 107px;
    left: 0px;
    margin-top: 0px;
    width: 180px;
    background-color: #fff;
    color: black;
    box-shadow: 8px 8px 12px #ccc;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    z-index: 100;
}

#linklist a {
    color: black;
    font-weight: normal; 
    text-decoration: none;
    display:block;
    padding: 7pt;
}

#linklist ul {
    margin: 0;
    padding: 0;
}

#linklist li {
    text-align: right;
    margin: 0;
}

.timestamp {
    font-family: Courier New;
    color: #888888;
}

#linklist li:hover {
    border-left: 7px solid #537d7b;
}

pre {
    background-color: #eee;
    font-family: "Droid Sans Mono";
    box-shadow: 5px 5px 5px #888;
    border: none;
    padding: 5pt;
    margin-bottom: 14pt;
    color: black;
    padding: 12pt;
    font-family: Courier New;
    font-size: 95%;
    overflow: auto; 
}

#buttons {
    position: fixed;
    bottom: 10px;
    /* right: 20px; */
    left: 20px;
    z-index: 100;
    width: 100px;
}

.ok {
    -moz-opacity:.2;
    opacity: .2;
    filter:alpha(opacity=20);
}

.ok:hover {
    -moz-opacity:1;
    opacity: 1;
    filter:alpha(opacity=100);
}

.outline-2 {
    position: relative;
    left: 215px;
    top: 105px;
    width: 75%;
    padding-bottom: 5pt;
}

#twit {
    -moz-opacity:.2;
    opacity: .2;
    filter:alpha(opacity=20);
    position: fixed;
    top: 362px;
    box-shadow: 8px 8px 12px #ccc;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    z-index: 100;
}

#twit:hover {
    -moz-opacity:1;
    opacity: 1;
    filter:alpha(opacity=100);

    position: fixed;
    top: 362px;
    box-shadow: 8px 8px 12px #ccc;
    z-index: 100;
}

#outline-container-1 {
    padding-top: 3pt;
}

.outline-2 h2 {
    font-family: Courier New; 
}

.outline-2 h3 {
    font-family: Courier New; 
}

p { 
    margin-top: 0; 
    text-align: justify;
}

a:link { 
    font-weight: normal; 
    text-decoration: none; 
    /* color: #1c3030; */
    /* color: #A34D32; */
}

a:visited { 
    font-weight: normal; 
    text-decoration: none; 
    /* color: #5e251e; */
    /* color: #6E2432; */
}

a:hover, a:active { 
    text-decoration: underline; 
    /* color: #3d696a; */
    /* color: #537d7b; */
}

dd {
    text-align: justify;
    margin-bottom: 14pt;
}

dt {
    font-size: 110%;
    font-family: Courier New;
    color: #1c3030;
    /* color: #537d7b; */
    padding: 3px;
    margin-bottom: 3px;
}

li {
    margin: 10px;
    text-align: justify;
    list-style-image : url(../images/triangle.png);  /* 這個圖片就是每個li 前面的小箭頭 */
}

#table-of-contents {
    font-size: 9pt;
    position: fixed;
    right: 0em;
    top: 0em;
    background: white;
    -webkit-box-shadow: 0 0 1em #777777;
    -moz-box-shadow: 0 0 1em #777777;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    text-align: right;
    /* ensure doesn't flow off the screen when expanded */
    max-height: 80%;
    overflow: auto; 
    z-index: 200;
}

#table-of-contents h2 {
    font-size: 9pt;
    max-width: 8em;
    font-weight: normal;
    padding-left: 0.5em;
    padding-top: 0.05em;
    padding-bottom: 0.05em; 
}

#table-of-contents ul {
    margin-left: 14pt; 
    margin-bottom: 10pt;
    padding: 0
}

#table-of-contents li {
    padding: 0;
    margin: 1px;
    list-style: none;
}

#table-of-contents ul>:first-child {
    color: blue;
}

#table-of-contents #text-table-of-contents {
    display: none;
    text-align: left;
}

#table-of-contents:hover #text-table-of-contents {
    display: block;
    padding: 0.5em;
    margin-top: -1.5em; 
}

img.random {
    max-width: 750px;
    max-height: 380px;
    margin-bottom: 10pt;
    border: 1px solid black;
}

@media screen
{
  #table-of-contents {
    float: right;
    border: 1px solid #CCC;
    max-width: 50%;
    overflow: auto;
  }
} /* END OF @media screen */

注: 上面的css中有2個圖片是在線的, 我下載后放在 ../images 目錄中了

1.4 導出html

最后整個導出工具的目錄如下:

.
├── css
│   └── org-manual.css
├── images
│   ├── logo.png
│   └── triangle.png
├── Makefile
└── publish-config.el

把要導出的org文件放到上面配置的 ~/tmp/www 目錄中, 然后運行命令 make html 就可以導出html到目錄 ~/tmp/output 中了.

最后附一張這篇文章生成的html截圖:

Footnotes:

¹ http://www.cnblogs.com/banjia/archive/2012/09/29/2708966.html

² http://www.seas.upenn.edu/~heqin/academic/sitecreation.html

³ http://orgmode.org/org.html