Contents

部落格復活紀錄

最近搞了許久的 Touch Designer 做互動藝術,想寫點筆記給其他同學,時隔五年的決定把部落格復活(好像每次都是為了教人重啟的)。

之前沒提到我從 Hexo 轉移到 Hugo,總之呢都五年了 Hugo 也更新非常多版本,原本使用的主題 LeaveIt 上次更新都七年前了,勢必會有許多問題,在此紀錄花費整晚的血淚。

選主題

前文提到 LeaveIt 實在太久沒更新,要改不是不行但這麼好看的 template 肯定有人改過了,到處逛逛後發現 LoveItKeepIt 都蠻符合我的期望的,其中,KeepIt 整體 style 就是 LeaveIt 同個模子刻出來的,LoveIt 則是沒有原本那麼可愛,相對正式了些。至於其他 template 可參考 hugo themes,我是沒認真逛完就是了。

一開始先花費一些時間看 KeepIt,修了幾個主題本身的 Bug 後,意識到 code block 實在太醜,issue 的回應看起來作者沒要處理,想了下我也不是一定要可愛風,加上修 KeepIt bug 時逛到其他原使用者也跳槽了,就跟著跳 LoveIt,跳槽後只遇到一個 theme 本身的 bug,其他一切快樂。

文章 Migrate

原本想說文章無縫套用就好,意外發現原本居然都沒加上 Category,考慮到有 Category 可以用另一種方式做分類的概覽,我的文章數也不算多,就加了。

另一個問題是我有些文章的 code block 居然沒指定語言!少了 highlight 完全不能接受,順手也一起做了。

整個 Migrate 過程比較有趣的是基本上重讀了一篇各個筆記,還好還沒荒廢到被六年前的自己打敗(笑)。也想吐槽身為一個後端工程師,怎麼一篇後端文都沒有。

Three.js

由於最近做了不少互動藝術,加上前陣子回味了高中做的 three.js 應用網頁,也跟著想把 blog 套個動畫,也是目前網站的背景效果。這篇先只說明在 LoveIt 增加自定 JS 時需要的行為,動畫怎麼做有機會再開一篇紀錄(感覺沒人會問所以沒有那一天)。

Import JS

觀察 Hugo 編譯時組 Theme 的行為,注意到基本上是從 Layouts 用 template 的方式組裝。而 import js 的 html file 是 /layouts/partials/assets.html,最快有兩個選擇:

  1. 寫一個新的 template,在 assets.html import
  2. 直接 rewrite 一個 assets.html

天快亮了所以我選後者,基本上是把 JS 放在自己的 blog folder 下的 /static/js 內,在自己 blog folder 下的 /layouts/partials/ 寫一個 assets.html 即可。

Render DOM

下一個問題是 WebGL 的效果該放哪,直接硬幹在 body 上其實不是不行,但後續想換其他特效或是 theme 改版一下可能會炸,我的選擇是直接多寫一個 node 去放他。

Dark Mode / Light Mode

切換 mode 時點特效其實挺麻煩的,原本我的做法是 listen click event 後看來源,決定是否更換粒子和線的顏色,後續感覺這維護起來不是很輕鬆,決定直接從整體 UI 下手——找個兩個模式看起來都不會很刺眼的顏色,最後發現目前的配色還不錯,如果有人覺得太刺歡迎給 feedback。

總結

整個血淚史大概是這樣,耗時大約 6hr,某方面來說算是自己在搞自己。總之趁最近暫時沒有工作,會頻繁更新一下文章,預期會包含:

  1. TouchDesigner 筆記
  2. 進行中的旅遊行程規劃網的一些 feature 研究紀錄
  3. 推薦系統讀書心得(突然對 IR 有點興趣)
  4. 突然撿到題目後順手做的解題紀錄

Fine, 希望別富奸。