Blogging with Hexo and Inside Theme

blogs
,

Hexo 設定

hexo-cli

Hexo 的快速上手的網頁說的安裝指令：

1
$ npm install -g hexo-cli

可是通常在一般的 Linux 上，這樣安裝的話 hexo-cli 會需要 root 權限。 但是理論上來說應該是不需要的，於是這次先在另外的目錄安裝且初始化， 然後也在 blog目錄裡也安裝一次 hexo-cli, 這樣下次 npm install 的時候也可以使用本地的 hexo-cli 了。

1
2
3
4
$ npm install hexo-cli --save
$ node_modules/hexo-cli/bin/hexo init blog
$ cd blog && npm install hexo-cli --save
$ cd blog && npm install

不像 Python 的 venv，npm 不會直接加入 hexo-cli 的 PATH， 當然也沒有好用的 completion，所以又用了 Makefile 來幫忙執行常用的指令。

1
2
3
4
5
6
7
8
HEXO := node_modules/hexo-cli/bin/hexo
.PHONY: setup
setup:
	@ npm install

.PHONY: clean generate server deploy
clean generate server deploy:
	@ $(HEXO) $@

Markdown 換行

之前用 Hexo 時候，發覺換行的規則跟 Markdown 不一樣， 本來直接在文字檔換行，顯示出來應該要繼續接下去一句才是， 除非特殊在行末加兩個空格，不過 Hexo 預設渲染出來的跟預期的不一樣。

Extra line break when parsing markdown

所以參考一下，也設定把 breaks 給關掉，這樣在寫文字檔的 Markdown 的時候才不會看得那麼飄移。

_config.yml
1
2
3
4
# Marked
marked:
  gfm: true
  breaks: false

Post Asset

_config.yml
1
post_asset_folder: true

Jupyter

想要嵌入之前寫的 jupyter notebook 也是可以的喔，不過遇到一個小問題， 就是如果副檔名不是 .html 的話，放到 github.io 上就會變成直接下載， 而如果是 .html 的話，因為開啟了 Post Asset Hexo 又會自己當作一篇 post，所以要加個設定跳過。

_config.ymk
1
2
skip_render:
  - '_posts/**/*.html'

所以就可以嵌進去了，還特地裝了 jupyterthemes 換個主題配合一下 dark theme，也能夠直接連過去唷。

plotwav.html

Inside 設定

Inside CSS

這次重建選的主題是 Inside**，有提供 **plugins 的介面讓人客製化覺得相當方便， 不過在使用自己的 css 的時候，卻發現有個問題，

custom.css 順序是在 Inside 的 css 之前，
如果 css selector 是同等級，其實還是改不動原本的設定。

所以要更限縮 css 的選擇範圍，通常就多加個 tag 之類的就可以了。

Mathjax-SSR

  • 同一個不知道 為什麼要花這麼久 的式子。 K\_{v246}=\frac{1}{T} \int \limits \frac{dF(t)}{dt}

  • GRU reset_after=True

z_t = \sigma ( W^z x_t+ U^z h_{t-1} )

r_t = \sigma ( W^r x_t + U^r h_{t-1} )

\tilde h_t = \tanh (W^h x_t + r_t \odot ( U^h h_{t-1} )

h_t = (1-z_t)\odot \tilde h_t + z_t \odot h_{t-1}

asciinema

雖然安裝了 hexo-filter-asciinema，不過跑起來沒有辦法顯示，看了一下原本的 asciinema-player.js 的用法，覺得好像順序要反過來，就手動改了 plugin 裡的 code，只產生一個 player 的 tag，也在手動改 index.swig，讓 js 在 最後才跑，這樣就能夠顯示了。

1
2
- data.content = data.content.replace(/[\@asciinema]((.*?))/g, js_tag + css_tag + player_tag);
+ data.content = data.content.replace(/[\@asciinema]((.*?))/g, player_tag);

Mermaid

不知道為什麼在 Android Chrome 沒有正確 rendoer - Fri, 29 Nov 2019

本來是用 Inside 的 plugins: 去加 script tags，後來覺得直接改 在 index.swig 也算是乾淨明瞭的作法。

gantt title Rehearsal [of Rehearsal...] dateFormat YYYY-MM-DD HH:mm section Demonstration Real Demo :crit, demo, 2017-04-25 10:00, 2h section Rehearsals K's Rehearsal :reh-k, 2017-04-21 15:00, 3h R's Rehearsal :reh-r, 2017-04-20 16:00, 3h A's Rehearsal :reh-a, 2017-04-20 11:00, 3h Y's Rehearsal :reh-y, 2017-04-19 15:00, 3h section Preparation Demo Preparation :active, pre, 2017-04-18 09:00, 30h
sequenceDiagram participant Alice participant Bob Alice->John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!