彼の一存

The place where the past meets the present to contemplate the future

org-page 的配置与使用

CAUTION: 本文已过时并不再更新，想了解更新信息，请转到 emacs-china 上查看 Next-Link

org-page 的特点

这是一个基于 org-mode、git 和 emacs 自身（这三个你都得耍的起来）的静态站点生成器（static site generator），实现了 org 文档内容 和 文档修饰（主题） 的分离。它本身具有高度的可定制性1。

org-page 的安装

使用命令 M-x package-list-packages 找到 org-page 安装即可，或者去这个链接 org-page 下载。

下载完的安装步骤请看那个链接的代码目录下的 doc 目录之下的 quick-guide.org 。

org-page 的用法

首先，在想写 blog 的文件夹下用 git init 建立一个 git repository，然后创建并进入 source 分支，再新建三个基本文件：

blog 文件夹
主要的 blog 文件放里面。
about.org 文件
在这里介绍自己。
index.org 文件
在这里写自己博客的首页。

剩下的交给 M-x op/do-publication 命令。

接下来，英语好的话，参考之前提到的 quick-guide.org ，英语不好，请 慎用 emacs。

org-page 效果举例

列表
删除线 下划线 强调 代码
数学公式
\(X(f)=\int{x(t)e^{-i 2\pi ft}dt}\)

悬停卡片2

  1. 有序列表
  2. 有序列表

org-page 的主题定制

正常定制法
使用命令 M-x customize-group 再输入 org-page 即可。（这种定制法定制能力有限）
hack 定制法
参看 themes 文件夹，里面的 template 文件夹使用了 mustache 模板 。而另外一个 source 文件夹有 css、js 等文件，这些东西各位懂的……如果你是一个好的前端设计师的话，这些就能让你制作一个漂亮的界面了，毕竟标签不多。

关于 org-page 的正常定制法以及 custom 页面里各个选项的含义，还请各位参照英文字典分析……

下面讲解使用 hack 定制法时，一些有用的 hack 手法（如果不想自己 hack，请点我右上角3）：

使用 org-page 管理多个站点

在 emacs 的配置文件中定义如下函数： 

(add-to-list 'load-path "~/github/org-page")
(require 'org-page)
(defun kd/custom-org-page (&optional site)
  "choose the org-page's main repository"
  (interactive (let ((sitet (read-string "静态站点名：")))
                 (list sitet)))
  (cond ((equal site "kuangdash")
         (setq op/repository-directory "~/github/kuangdash.github.io"
               op/site-domain "kuangdash.github.io"
               op/theme 'kd_mdo
               op/personal-github-link "https://github.com/kuangdash"
               op/personal-disqus-shortname "kuangdash"
               op/personal-duoshuo-shortname "kuangdash"
               op/site-main-title "有为山深"
               op/site-sub-title "It's only when it is truly dark that we can see the stars")
         )

        ;;emacs-china
        ((equal site "emacs-china")
         (setq op/repository-directory "~/github/emacs-china.github.io"
               op/site-domain "emacs-china.github.io"
               op/theme 'emacs_love
               op/personal-github-link "https://github.com/emacs-china"
               op/personal-disqus-shortname "emacs-china"
               op/personal-duoshuo-shortname "emacs-china"
               op/site-main-title "EMACS-CHINA"
               op/site-sub-title "=============>集思广益")
         )
        (t (message "error! no repository"))))

那个 kd/custom-org-page 函数才是代码的主体， add-to-list 和 require 则用来导入本函数对 org-page 的依赖关系。实际上，该 交互 函数是每次都重新定义了正常定制法的内容，看懂它然后使用吧（做个填空题就行）。

在 kd/custom-org-page 的 cond 里面我们还可以写一些其他代码，以方便对 org-page 生成的站点进行测试。

对 org-page 生成的站点进行测试

本人使用基于 emacs 的 simple-httpd 来进行站点测试，根据实际情况，各位也可以用自己喜欢的 web 服务器来进行测试。

在 kd/custom-org-page 的 cond 里面我们还可以写一些其他代码，这样就能起到测试的效果了： 

(require 'simple-httpd)
(defun kd/test-org-page (&optional site)
  "test the org-page's main repository"
  (interactive (let ((sitet (read-string "测试静态站点名：")))
                 (list sitet)))
  (cond ((equal site "kuangdash")
         (op/do-publication t nil "~/webRoot/kuangdash.github.io")
         (httpd-serve-directory "~/webRoot/kuangdash.github.io")
         )

        ;;emacs-china
        ((equal site "emacs-china")
         (op/do-publication t nil "~/webRoot/emacs-china.github.io")
         (httpd-serve-directory "~/webRoot/emacs-china.github.io")
         )
        (t (message "error! no repository"))))

这里也是填空题，修改字符串部分的内容就可以了。如果你觉得上面的步骤过于麻烦，可以直接使用 tumashu 先生的 org-webpage 项目：一个 org-page + emacs-web-server 的解决方案。

本人在 org-page 和 org-mode 间周旋的记录

由于我一直用 git 更新 org-page 和 org-mode 的源，所以这里会写一些两者遇上冲突的地方：

插入 svg 图片的问题

<2015-04-15 周三>

如果你在 org-mode 文档里使用了 svg 图片，那么恭喜你，你用 org-page 导出的网页不会显示该图片。那么以下是我解决该问题的方法，写在配置文件里： 

(require 'ox)
(require 'ox-html)

(defun kd/org-html--format-image (source attributes info)
  "Return \"img\" tag with given SOURCE and ATTRIBUTES.
SOURCE is a string specifying the location of the image.
ATTRIBUTES is a plist, as returned by
`org-export-read-attribute'.  INFO is a plist used as
a communication channel."
  (org-html-close-tag
   "img"
   (org-html--make-attribute-string
    (org-combine-plists
     (list :src source
           :alt (if (string-match-p "^ltxpng/" source)
                    (org-html-encode-plain-text
                     (org-find-text-property-in-string 'org-latex-src source))
                  (file-name-nondirectory source)))
     attributes))
   info))

(advice-add 'org-html--format-image :override #'kd/org-html--format-image)

代码的最后一行相信聪明的人已经看懂了，傻的人还没反应过来4。

org-mode 的中文 target 和 radio target 无法导出

<2015-04-15 周三>

这个我上报了 org-mode 制作组的 maillist，目前好像还没添加进代码库，可以在配置文件里写下以下代码以修正。 

(defun kd/org-export-solidify-link-text (s)
  "Take link text S and make a safe target out of it."
  (save-match-data
    (mapconcat 'identity (org-split-string (prin1-to-string (encode-coding-string s 'utf-8)) "[^a-zA-Z0-9_.-:]+") "-")))

(advice-add 'org-export-solidify-link-text :override #'kd/org-export-solidify-link-text)

<2015-07-01 周三> 更新，该问题在 org 最新版本里已解决。\<\<target\>\> 不会被导出，仅作为一个标记。

org-mode 的 "src"_<language>{<body>}

<2015-04-15 周三>

这个还真没法用……

脚注:

1

……如果你是前端工程师的话。

2

这里是悬停卡片的内容哦~~~

3

（新手提示：想回去继续阅读博客本体，请点本句最左边）如果不想自己 hack 一个主题，可以使用博主自己的主题 emacs_love ，下载后放置于 org-page 的 themes 文件夹下，再用 M-x customize-group RET org-page 修改 op/themes 项为 emacs_love 即可。

4

参见 emacs manual 的 advice-add 函数。

2015-04-15 2016-12-07 org-page 皐月中二

Comments

使用Disqus评论
comments powered by Disqus

Generated by Emacs 26.x(Org mode 9.x)

Copyright © 2014 - 皐月中二   -   Powered by EGO
  -   Analysized by
Creative Commons License