This Site

1 前言

时光飞逝,岁月如染。

是的,你没有看错,我又重新设计了一下自己的知识书写系统。荒废了好多年之后, 又回到了这里。最近遇到一些事情感触挺大的。感觉一年过去了,自己也贬值了许多。 我也不知道说什么好,于是我又开始折腾起自己写字的地方。 也许是想找一个地方慢慢的度过这么多时光吧。这么说真是暴殄天物啊!!

到现在已经工作差不多一年多了。我成长了多少呢?我感觉我是没有什么实质性的进展,仍然像一个刚刚毕业的学生。 技能上也么有什么大的提升,被人说成刚刚入门。嗯,就是刚刚入门嘛~

2 设计

下面的文字是介绍这个blog是如何一步一步搭建起来的。(功能比较的弱,>_<)

2.1 舍弃Jekyll

不得不说Jekyll是开了一个好头,把我带入了这么神奇的世界。从最初开始接触到现在,Jekyll都给了我很大的启发。 但是,无奈,找了半天,也没有找到对org文件的直接支持,所以之前的实现方案比较的丑陋,使用了2次“编译”的方式解决。

首先将org文件用org-mode导出成html,然后再用Jekyll进行2次处理,最终变成一个完成的页面。 现在分支 Jekyll 仍然保存着我之前的实现方案。算是对之前的一点点怀念吧。

可以看到,通过上面的步骤来进行文章的编写和发布,比之前直接编写md文件多了一步,这个让我非常的不爽。但是为了不写md,而写org,我选择了隐忍。就这么持续了几个月。 期间一直想改变这个,重新设计。于是有了下面的想法。

2.2 又一想法:富前端

这个也是在学习了 JavaScript 之后,想提升自己JavaScript水平而产生的一个想法。思路很简单:

首先,编写一个前端的解析框架,可以将org格式的文本翻译成html,然后动态的插入的页面中去即可。编写好的org文件被放在了dropbox这类可以存储文件的服务器上面, 通过ajax请求获取(这个可能需要查看相应厂商提供的API来实现)。我找了一个 这个 来干翻译的事情,看了一下,效果还是很好的。文件通过 Dropbox API 来获取。

一切都是这么的美好。但是,问题是我当时没有能过解决通过Ajax从Dropbox获取文件的功能,之后也就不了了之了。 哦,对了,突然想起来,那个解析的js库貌似也是有一点点让我纠结的地方,想通过改源代码实现自己的效果,但是奈何当时技术不行,搞了一个国庆也没有完成。之后也就不了了之了。 (PS:那个国庆回了一次学校,见了 van9oghJohnChain ,在学校的湖边写了一会儿代码,再也没有那个时光了。 国庆之后因为工作上的事情,也没有时间搞这个了。如果有空,再说吧。估计,应该是不会来搞这个解决方案了。 因为我有了现在的方案。)

2.3 全Org-mode(现行方案)

嗯,这次我全部用Org-mode这个来实现现在的文章发布系统。其实也是很简单的,就是之前的Jekyll方案中去掉了Jekyll二次编译的那一步。通过自己写js来进行交互,写css来美化网站。 当然,功能上也会比之前的弱一点。但是没有什么关系,我想了其它的替代方案。理论上,还是说的过去的:)

2015-12-26这天我又一次把 blog 重新整合,从 OE-NK 的项目中剥离了出来。去掉了 org-publish 中的 org-publish-attachment 。使用同一个 static 文件夹来存放和文章无关的静态文本。 我突然发现导出速度有了提高,不知道是不是我的幻觉。然后使用 Github-LFS 服务,存放静态的图片。解决我之前不知道如何安放图片的问题。

感谢 Flickr 之前的免费服务,后面的话主要是放游记、旅游等拍摄的照片。

2.3.1 创建核心(.emacs)

通过编辑.emacs文件,来实现对org文件的导出。最近也是学习了一些elisp的语法,所以对之前直接copy来的项目配置做了一些修改。 主要是将项目地址变量化,这样子变动项目路径也会相对方便一点。需要说明的是这个 `() , 这个语法结构让列表中的元素可以选择性的求解。 比如这里的 creamidea 可以被求解。

;;; package --- Summary
;;; Commentary:

;;; Code:

;; (add-hook 'window-configuration-change-hook
;;           (lambda ()
;;             (setq frame-title-format
;;                   (concat
;;                    ;; "creamidea@gmail.com: "
;;                    ;; invocation-name "@" system-name ": "
;;                    "Au9ustTrek@" system-name ":"
;;                    (replace-regexp-in-string
;;                     (concat "/home/" user-login-name) "~"
;;                     (or buffer-file-name "%b"))))))
(custom-set-variables
 '(user-full-name "Junjia Ni")
 '(user-mail-address "creamidea@gmail.com")
 '(display-battery-mode t)
 '(display-time-mode t)
 '(menu-bar-mode nil)
 '(tool-bar-mode nil)
 '(custom-enabled-themes (quote (sanityinc-tomorrow-night))))
;; font family: Hack, Monaco
(custom-set-faces
 ;; Monaco; DejaVu Sans Mono;
 '(default ((t (:family "Hack" :weight Regular :height 120 :width normal)))))

;;; Setting Chinese Font
(if (display-graphic-p)
    (dolist (charset '(kana han symbol cjk-misc bopomofo))
      (set-fontset-font
       (frame-parameter nil 'font)
       charset
       ;; (font-spec :family "PingFang SC" :size 14))))
       (font-spec :family "Microsoft Yahei" :size 15 :height 15))))

;; themes:
;; '(custom-enabled-themes (quote (sanityinc-solarized-dark)))
;; sanityinc-tomorrow-night
;; sanityinc-solarized-light
;; sanityinc-solarized-dark
;; sanityinc-tomorrow-eighties

;; (x-focus-frame nil)
;; :font Menlo Monaco Fira-Mono Source-Code-Pro
;; (let ((my-favourite-font "Fira Mono")
;;       (my-font-size "16"))
;;   (add-to-list 'initial-frame-alist `(font . ,(concat my-favourite-font "-" my-font-size)))
;;   (add-to-list 'default-frame-alist `(font . ,(concat my-favourite-font "-" my-font-size)))
;;   (set-face-attribute 'default nil :family my-favourite-font :height 160))

;; emacs-color-themes
;; https://github.com/owainlewis/emacs-color-themes
;; (add-to-list 'custom-theme-load-path "~/.emacs.d/themes/emacs-color-themes/themes")
;; (load-theme 'brin t)
;; (load-theme 'junio t)

;; solarized
;; (add-to-list 'custom-theme-load-path "~/.emacs.d/themes/emacs-color-theme-solarized")
;; (load-theme 'solarized t)
;; (custom-set-variables
;;  '(solarized-termcolors 256)
;;  '(solarized-contrast 'high)
;;  '(solarized-visibility 'high)
;;  '(solarized-degrade t))
;; (set-frame-parameter nil 'background-mode 'dark)
;; (set-terminal-parameter nil 'background-mode 'dark)
;; (enable-theme 'solarized)

;; tomorrow-theme
;; (require 'color-theme-sanityinc-tomorrow)
;; (load-theme 'color-theme-sanityinc-tomorrow-night)
;; (load-file "~/.emacs.d/themes/tomorrow-theme/color-theme-tomorrow.el")
;; (require 'color-theme-tomorrow)
;; (load-theme 'tomorrow-night-bright t)
;; (load-theme 'tomorrow-night t)
;; (load-theme 'tomorrow-night tomorrow-night-eighties t)

;; or use (string-equal system-type "windows-nt")
(when window-system
  "1) try to improve slow performance on windows."
  (set-frame-size (selected-frame) 80 24)
  (setq w32-get-true-file-attributes nil))
(setq default-directory "~/Repository/")
(setq make-backup-files nil)
(setq vc-handled-backends nil)
(setq vc-make-backup-files t)
(setq visible-bell t)
;; (setq linum-mode t)
;; (set-language-environment "UTF-8")
;; (format-time-string "%d %b %Y")
;; set transparency
;; (set-frame-parameter (selected-frame) 'alpha '(95 95))
;; (add-to-list 'default-frame-alist '(alpha 95 95))

;; Require
;; yasnippet
(require-package 'yasnippet)
;; (after-load 'yasnippet
;;   (yas-global-mode 1))
(yas-global-mode 1)


(require 'epa-file)
;; (setq epa-file-select-keys nil)
(global-set-key (kbd "C-c g e") 'epa-encrypt-region)
(global-set-key (kbd "C-c g d") 'epa-decrypt-region)
(global-set-key (kbd "C-c g v") 'epa-verify-region)
(global-set-key (kbd "C-c g s") 'epa-sign-region)


(defun insert-comment ()
  (interactive)
  (insert
   (format
    "/**%s\n */"
    (mapconcat 'identity
               (mapcar
                (lambda (x) (append myComment (format "\n * %s" x)))
                (split-string (buffer-string) "\n" t)) " "))))

;; auto mode alist
;; (add-to-list 'auto-mode-alist '("\\.gpg\\'" . text-mode))


;; keymap binding
;; set M-space to setmark, repalce C-@ with C-space
(global-set-key (kbd "M-<SPC>") 'set-mark-command)

;; (server-start)

(provide 'init-local)
;;; init-local.el ends here

复制完成之后,在.emacs这个buffer下面,按住 M-x 调出输入命令的buffer,然后输入 eval-buffer 即可。 可以当场生效,不需要重启Emacs。

2.3.2 固定开头(snippet)

我使用的是 Yasnippet 这个自动“填充”工具。然后写了一个这个 Snippet

# -*- mode: snippet -*-
# name: blog
# key: blog
# --
#+TITLE: ${1:`(file-name-base (buffer-file-name (window-buffer (minibuffer-selected-window))))`}
${2:$$(yas-choose-value '("#+AUTHOR: 冰糖火箭筒(Junjia Ni)\n#+EMAIL: creamidea(AT)gmail.com" "#+AUTHOR: 蜂蜜甜甜圈(Yi Ou)\n#+EMAIL: 718413182(AT)qq.com"))}
#+DATE: `(format-time-string "%Y-%m-%d" (current-time))`
#+CATEGORY: article
#+DESCRIPTION: ${3:$1}
#+KEYWORDS: ${4:emacs,orgmode}
#+OPTIONS: H:4 num:t toc:t \n:nil @:t ::t |:t ^:nil f:t tex:nil email:t <:t date:t timestamp:t
#+LINK_HOME: https://creamidea.github.io
#+STARTUP: showall


* 前言
$0
* 尾声

稍作修改即可,然后打开.emacs文件。在.emacs这个buffer下面,按住 M-x 调出输入命令的buffer,然后输入 eval-buffer 即可。 可以当场生效,不需要重启Emacs。

2.3.3 美化字体(CSS)

为了达到美观的阅读效果,参考了 medium 的设计哲学, 文章正文部分采用居中、width:700px的样式,正文字体使用-apple-system,标签放在正文底部等。 达到的效果如本文所示。style.css

2.3.4 增加互动(JavaScript)

为了实现一些交互效果, 如:首页公式(banner)的处理,图片点击放大,显示标签,显示文章元信息(打开终端即可用看见)等, 都是通过js来动态处理的,然后这个写的比较的丑陋,不是很美,后面有空的时候要来改一下。app.js

3 演化历史

  • 2015-12-26 从 OE-NK 项目中剥离,自成体系。去掉了 org-publish 带的 org-publish-attachment 功能,使结构精简
  • 2015-12-08 增加首页分页的机制,每页显示4个。另修复首页banner图片为加载完成出现白屏的问题
  • 2015-11-26 增加Google Analytics.js
  • 2015-11-24 首页改版,增加一些动画效果
  • 2015-11-17 将预览发布功能和文章库分离,具体的可以看 OE-NK
  • 2015-11-14 增加预览/发布功能
  • 2015-11-13 增加Disqus社会化评论功能,将文章和发布版本分开
  • 2015-11-09 初始化版本

4 尾声

基本上,这个就是全部的内容了。写完一篇文章之后,可以使用 C-c x 进行文章的发布。效果就是现在这个效果了。

之前还做了上文和下文之间的链接,一些快捷键的功能,在这个版本中我都去掉了。 我的想法是可以回到首页(目录)进行选择跳转。回到首页的按钮我暂时也不准备做, 可以通过浏览器的回退按钮回到首页,前提是你是从那里过来的。也可以修改URL来达到同样的目的。 充分利用浏览器本身的设计理念。

关于标签的这个功能,我交给了Google搜索引擎,我拼接了链接,点击标签即可。可能会由于Google搜录的速度, 及时性可能不是那么的好。但是,这个小站估计也没有什么点击量,自己玩玩就好了。PS:因为Google在天朝水土 不服,所以我用了我一个朋友(@forestgump)的Google搜索代理,如果感兴趣可以去了解一些,或者资助一下:) 后面如果有兴趣,可以考虑写一段elisp代码来搞定这个。

关于代码高亮,这个我暂时也不搞了,有兴趣的可以用 highlight.js 来搞定。 我准备后面如果有时间自己来实现一下玩玩。(哎,又是以后,不知道又要到什么时候来填坑了。)

关于评论的问题,可以采用 disqus 来解决。因为考虑到目前没有这个需求,所以暂时就不搞了。 有需要的时候再加上去吧。

关于图片,我使用了 flickr 的服务。感觉还行吧(现在已经被qiang了,我最近在想换哪一家呢?)。 就是获取图片的链接比较的麻烦,后面想想要不用chrome脚本搞定,或者换一家(笑)。 后来我把一些类似于结构图的这种图片放到了 github-lfs 的服务上面 :-)

关于之前的文章,我移动了 _draft 这个目录下边,感兴趣的可以去 这里 看看。因为要有一个全新的开始嘛~。 404页面也不做了,反正也是抄,直接用Github的吧。

其他的问题,后面边写边改吧,哦,对了,如果你感兴趣,可以fork一下自己修改 :)

有什么问题,写信给我就好了。我会及时回复的,邮箱地址请戳页脚上的作者,或者在 issue 这里创建你的问题:)

嘛~自娱自乐。以上です。

Junjia Ni

2015-12-27

2016-11-10 Thu 13:03

Emacs 25.1.1 (Org mode 9.0)

2016-11-10 Thu 13:00