Emacs org批量生成HTML手册

效果展示:

• 我们花时间去考虑使用org生成HTML形成的静态网页到底长什么样子:
  

• 如上图, 看上去是一个干干净净的界面, 有列表内容, 标题, 图片等等.

• 但它的强大远远不止于此, 它还可以套入MathJax来完美的渲染数学公式. 如果用它用于整理笔记, 无疑这是一个轻便, 简洁并且十分强大的笔记软件.

• 看完以上效果, 好, 那让我们一起开始制作一个org批量生成html制作自己的静态网页的环境吧！

重要的文件和目录

• ~/Documents/Manual/publish-config.el
• ~/Documents/Manual/makefile
• ~/Documents/Manual/org/
• ~/Documents/Manual/output/

控制org文件输出位置

• 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 "~/Documents/Manual/Org" ;; 修改为你所使用的路径
         :base-extension "org"
         :publishing-directory "~/Documents/Manual/Output"
         :recursive t
         :publishing-function org-html-publish-to-html ;;org-publish-org-to-html
         :headline-levels 4             ; 默认即可
         :auto-preamble t
         :auto-sitemap nil
         :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 "~/Documents/Manual/Org" ;; 修改为你所使用的路径
         :base-extension "css\|js\|png\|jpg\|gif\|pdf\|mp3\|ogg\|swf\|txt\|asc"
         :publishing-directory "~/Documents/Manual/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)
  

• Makefile(makefile启动时候会调用publish_config.el)

  EMACS=emacsclient
  ORG_CONFIG_FILE=publish-config.el
  EMACS_OPTS=--eval "(load-file "$(ORG_CONFIG_FILE)")"
  
  DEST_HOST='myhost.com:public_html/'
  OUTPUT_DIR=~/Documents/Manual/Output
  
  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)
  

手册 ReadtheORG 主题

• git ReadtheORG

  git clone https://github.com/fniessen/org-html ~/Downloads
  

• 创建两个文件夹

  • ~/Documents/Manual/setup/
  • ~/Documents/Manual/Output/styles/

• Org文件头部的定义:

  #+TITLE:     Page Name
  #+AUTHOR:    jingpeng
  #+EMAIL:     (concat "fniessen" at-sign "pirilampo.org")
  #+DESCRIPTION:
  #+KEYWORDS:
  #+LANGUAGE:  en
  #+OPTIONS: H:4 num:t toc:3 html5-fancy:non-nil html-preamble:nil
  #+OPTIONS: html-style:nil html-scripts:nil toc:t author:t f:t
  #+HTML_DOCTYPE: html5
  #+HTML_CONTAINER:div
  #+HTML_LINK_HOME:
  #+html_mathjax:
  
  #+SETUPFILE: ../setup/theme-readtheorg-local.setup
  

  • SETUPFILE: 引用CSS和javascript

• 完整的目录:

  ## Important files and directories:
  ~/Documents/Manual/publish-config.el
  ~/Documents/Manual/makefile
  ~/Documents/Manual/Org/
  ~/Documents/Manual/Output/
  ~/Documents/Manual/Output/styles/
  ~/Documents/Manual/setup/
  
  ## Images and pdf books... :
  ~/Documents/Manual/Images/
  ~/Documents/Manual/Books/
  

自定义位置

• 直接移动位置, 记得要修改input和output目录, 如下:

  :base-directory "~/Documents/Manual/Org" ;; 修改一下这里的路径
  :publishing-directory "~/Documents/Manual/Output"
  
  :base-directory "~/Documents/Manual/Org" ;; 修改一下这里的路径
  :publishing-directory "~/Documents/Manual/Output"
  

Gitee克隆模板

• 直接克隆一个可用模板, 直接使用

  git clone https://gitee.com/eeqc/emacs-org-batch-to-html.git ~/Documents/Manual/
  

一键生成

• 将org文件移动到~/Documents/Manual/Org目录下

• 打开EmacsAlt+x输入server start
  

• 进入~/Documents/Manual/目录下启动makefile

  make