用Org-Mode和Jekyll寫部落格

cheukyin發表於2017-02-10

前言

在這個月之前，我一直都是Vimmer，可是VimScript語法令人無語的混亂和棉花般的軟弱無力，讓我苦惱不已，可是工作學習卻對其頗多依賴,始終舍之不得。 然而,就在上個月，我無意瞥了一眼我那腫脹龐雜臭長不堪的.vimrc，一眼…便失去了維護的信心，放棄Vim,自然只能轉投Emacs。 經過一個月的反覆折騰和深入研究後，我越加感受到神之編輯器的神聖魅力。種種以前感受到卻想不到、想得到而做不到的操作方式，一一呈現。

如此神器，有如神蹟!

既然長纓在手，自然要將之發揮至極至。恰逢最近打算用Jekyll生成靜態站點上傳至Github上搭建部落格，於是想到了Org-Mode。

Jekyll 部署

可以參考Github Help。

Jekyll是一個將markdown文件釋出成HTML靜態站點的ruby程式。Jekyll部署是指本地部署，在本地搭建站點測試。

安裝

ruby : version>=1.9.3

bundler : ruby的包管理器， gem install bundler

Jekyll : 在site根目錄下新增檔案Gemfile，並輸入

source `https://rubygems.org`
gem `github-pages`
bundle install

執行

jekyll serve&執行伺服器

通過 http://localhost:4000 訪問部落格

以後若部落格有改動，jekyll build重新生成頁面即可。

目錄結構

Directory structure:

/home/**/Repo_Dir
├── …Other files in Repo
├── assets(D)
│ ├── images(D)
│ └── themes(D)
├── atom.xml
├── config.rb
├── _config.yml
├── _includes(D)
│ ├── custom(D)
│ ├── JB(D)
│ └── themes(D)
├── index.html
├── _layouts(D)
│ ├── default.html
│ ├── page.html
│ └── post.html
├── _org(D)
│ ├── _drafts(D)
│ ├── assets(D)
│ └── _posts(D)
├── _plugins(D)
├── _posts(D)
├── robots.txt
├── rss.xml
├── _site(D)
├── sitemap.xml
(D) for Directory

_config.yml: 整個站點的配置檔案，存放全域性變數（如外掛資訊，CDN節點或者作者資訊等），可通過liquid語言的site.XXX訪問。
_layouts: 存放頁面佈局模板
_posts: 存放用markdown寫就的博文
_org: 存放利用org-mode寫就的文章，利用emacs生成md檔案釋出至_posts目錄，稍後會詳細介紹。
_includes: 存放頁面外掛，所謂外掛，就是某段可重用的HTML或JS程式碼（如主題模板，評論介面等），利用{% include **/** %}可嵌入頁面中
_assets: 存放圖片，主題CSS，JS等靜態資源
_plugins: 存放Jekyll外掛，一般為Ruby指令碼程式
_index.html: 部落格網站主頁
_site: 執行jekyll build生成的全部靜態頁面，最終產物
Jekyll就是一個利用模板化生成HTML的程式，本身沒什麼好研究的，最多就是了解一下 liquid語言，因為當中的自動化工作都是通過liquid實現的。部落格搭建剩餘的就是常規的前端工作，因此寫好CSS和JS才是王道。

上傳至 Github

在Github上申請一個名為Username.github.io的倉庫，然後將部落格站點目錄上傳。

然後訪問Username.github.io，便可訪問主頁（首次上傳需要等二十多分鐘方能看到）。

注：Username為你的 Github帳戶名

SEO

Baidu ： 到 百度站長平臺 登記，並申請百度統計，按其要求安裝程式碼，我的安裝程式碼放在_include/custom/baidu-analytics，並安裝在 _include/theme/havee/default.html底下

Ping服務： See Blog傳送ping服務請求的Python實現

程式碼高亮

可用我寫的 _pygment-html.py 指令碼對org-mode生成的html檔案進行程式碼高亮，詳情可見博文： 用Python高亮org-mode程式碼塊

Org-Mode

本來Jekyll是利用markdown書寫部落格的，不過個人不太熟悉這種語言，而且其功能也過於簡潔，不能適應技術部落格各種特殊需要，因此我選擇Org-Mode。

Org-Mode是Emacs的一種編輯模式，有著各種各樣強大到無法想像、令人感動到cry的功能，尤適於寫文章和做筆記，總之就是 where miracle happens 啦。

以下講解基於Org-Mode 8.2, 可以在emacs中M-x org-version檢查版本，Ubuntu可以通過apt-get更新Org-Mode至最新版。

配置

對於Jekyll而言，只能作用於_post目錄中的markdown檔案，若要用Org-Mode，需要將org檔案轉換成html檔案。
又因為md檔案允許內嵌HTML，因此便可利用Org-Mode的HTML釋出功能:

在站點目錄中新建_org目錄，並在其下建三個子目錄：_assest,_posts,_drafts
加入我的配置檔案：init-org-jekyll.el，更改其中org-publish-project-alist中的部份引數（將其中的目錄改成你自己的）

WorkFlow

開啟Emacs，M-x jekyll-draft-post，按提示輸入標題，Emacs便會在 _org/_drafts中新建該檔案，在_org/_drafts中編輯的檔案不會被髮布。
當文章寫好後，M-x jekyll-publish-post，Emacs便會將文章轉移至_org/_posts中
M-x org-publish，選擇jekyll-cheukyin-github-io（取決於你配置中改的名字），
Emacs會將_org/_posts中的所有org檔案轉換成md檔案並存於_posts中，並把 _org/_assest中圖片等靜態資源全部複製至_assest中

基本操作

Org-Mode也算是一種標記語言，旨在分離文字的結構和表現，寫作時只需把注意力放在內容上。它用一系列的標號來標識文字的分級等，至於每層文字的樣式則交由CSS管理。

  • 標題： 輸入*，有幾個*，代表幾級標題

  • 段落： 按一次Enter，釋出時只有一個空格，按兩次Enter才算重新開一段

  • 內部post連結：如我要連結到2014-08-04-ping-service.html這篇文章，則這樣寫

    @@html:<a href="{% post_url 2014-08-04-ping-service %}">@@Blog傳送ping服務請求的Python實現@@html:</a>@@

  • Anchor

    • 新增Anchor
      <<anchor>>

    • 連結到anchor
      [[anchor]]

  • 字型

    • 粗體： 夾在兩個*間

    • 斜體： 夾在兩個/間

    • 下劃線：夾在兩個_間

    • 上下標：^或_{}，{}之間放文字，需要M-x customize-variable，將org-use-sub-superscript設成{}

    • 強調： 夾在兩個~或兩個=之間，釋出成HTML時會轉換成<code></code>

  • 列表

    • 無序列表以-、+或者開頭

    • 有序列表以1.或者1)開頭

    • 描述列表用::

  • 表格

    • 建立和操作： 在某一行頂格的位置輸入|，然後輸入表格第一行第一列的內容，再輸入|

    • 標題：#+CAPTION: 表格的標題

    • 列長限制，如下面，將列長限制為6

      |   | <6>    |
| 1 | one    |
| 2 | two    |
| 3 | This=> |
| 4 | four   |

    • 計算：如一張3*3表格，在第二行第三列中輸入=$1*$2。$1和$2表示第一列和第二列，C-u C-c C-c強制org-mode為整個表格進行計算，若只希望在某一特定項上進行計算，可在等號前再加一個:

  • 快捷鍵

    • 縮排：C-q TAB

    • 連結：C-c C-l

    • 摺疊

    S-TAB 迴圈切換整個文件的大綱狀態
    TAB 迴圈切換游標所在的大綱狀態

    • 大綱或者列表之間移動

    C-c C-n/p 移動到下上一個標題(不斷標題是哪一級)
    C-c C-f/b 移動到同一級別的下/上標題
    C-c C-u 跳到上一級標題
    C-c C-j 切換到大綱預覽狀態

    • 基於大綱/標題的編輯

    M-RET 插入一個同級別的標題
    M-S-RET 插入一個同級別的TODO標題
    M-LEFT/RIGHT 將當前標題升/降級
    M-S-LEFT/RIGHT 將子樹升/降級
    M-S-UP/DOWN 將子樹上/下移動
    C-c * 將本行設為標題或者正文
    C-c C-w 將子樹或者區域移動到另一個標題處(跨緩衝區)
    C-c C-x b 在新緩衝區顯示當前分支
    C-c / 只列出包含搜尋結果的大綱，並高亮，支援多種搜尋方式
    – or + 更改列表序號樣式

    • 表格

    C-c 豎線 建立或者轉化成表格
    C-c C-c 調整表格，不移動游標，並計算公式
    TAB 移動到下一區域，必要時新建一行
    S-TAB 移動到上一區域
    RET 移動到下一行，必要時新建一行
    M-LEFT/RIGHT 移動列
    M-UP/DOWN 移動行
    M-S-LEFT/RIGHT 刪除/插入列
    M-S-UP/DOWN 刪除/插入行
    C-c – 新增水平分割線
    C-c RET 新增水平分割線並跳到下一行
    C-c ^ 根據當前列排序，可以選擇排序方式

Org-Babel

Babel，即巴別塔，聖經所載，巴別塔若要完工，需各種語言互通。因此，Org-Babel的作用便在於是各種程式語言和諧協調地運作於同一篇文件中，即Literate Programming（文學化程式設計）。

Org-babel的工作方式很簡單，在Org-Mode中嵌入相應語言的程式碼，然後C-c C-c，Emacs便會呼叫相關的 interpreter 執行程式碼，並按照使用者要求的格式生成結果，而且不同語言的程式碼的執行結果可以互為輸入，實是寫報告、寫文件、居家旅行、殺人放火的必備良方。

因此，上帝禁止的巴別塔建成了，在Org-Mode裡！

就如上文的目錄結構圖便是在博文的org檔案中嵌入shell命令tree，指定釋出html是隻輸出結果而得到的。

#+BEGIN_SRC sh :results output :eval no-export :exports result 
echo "Directory structure:"
tree  -L 2 ~/Cheukyin.github.io
#+END_SRC

Org-babel支援的語言可以在/usr/share/emacs/site-lisp/org-mode/ob-*下看到。

想要新增語言，可以修改變數org-babel-load-languages

常用引數：

  • :exports result | code | both | none

  • :var varname=value 程式碼中可用的變數

  • :eval no-export | 不設定

  • :result output | value

有待深究

[ ] 圖片插入
[ ] 公式插入
[ ] SEO
[ ] 固定側欄Catorgories等
[ ] 新增跟隨頁面移動、可彈出的Table Of Contents
[ ] 尋找更好輸入法
[ ] 程式碼塊輸出html顏色改進

相關文章