Table of Contents

• 1. 發布站點 by emacs org-mode
  • 1.1 org-mode 自帶的導出方法
  • 1.2 批量導出
  • 1.3 css 美化
  • 1.4 導出html

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 uploadhtml:@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

Date: 2014-01-14T16:00+0800

Author: wangyubin

Org version 7.9.3f with Emacs version 24

Validate XHTML 1.0

轉載于:https://www.cnblogs.com/wang_yb/p/3519221.html

總結

以上是生活随笔為你收集整理的emacs org-mode文件转html文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。