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:那个国庆回了一次学校,见了 van9ogh 和 JohnChain ,在学校的湖边写了一会儿代码,再也没有那个时光了。 国庆之后因为工作上的事情,也没有时间搞这个了。如果有空,再说吧。估计,应该是不会来搞这个解决方案了。 因为我有了现在的方案。)
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)
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 这里创建你的问题:)
嘛~自娱自乐。以上です。