IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    用Org-Mode和Jekyll写博客

    cheukyin发表于 2017-02-10 16:48:12
    love 0

    前言

    在这个月之前，我一直都是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颜色改进



沪ICP备19023445号-2号
友情链接