Blog Note 0x03

Source: Twitter @ban62460424

留言板

在上一次 Blog Note 0x02 原本考慮 octomments,但是在簡單查了一下發現普及率實在沒有想像中的高,而且 appearance 不太符合個人喜好 (?) 結果還是找了同樣是 Based on GitHub issue 的另一個留言板 Gitalk

也因為是 Based on GitHub issue 的關係,需要在新文章上線後手動啟用留言板(new issue),所以這部分我希望可以用 CI 的方式做自動化處理 (*TODO*)。

調整標題和內文間距

單純是強迫症看不順眼,把文章標題與內文之間的 margin-bottom 調整成 25px。
放 cover 圖也比較好看

./themes/next/source/css/_common/components/post/post-header.styl
.posts-expand .post-meta {
color: $grey-dark;
font-family: $font-family-posts;
font-size: $font-size-smallest;
margin: 3px 0 25px 0;
text-align: center;
}

新增 darkmode switch

NexT 官方在 v7 加入黑暗模式,但這功能只能對應 OS theme 無法自由切換,在 NexT GitHub 的 PR 可以看見相關的討論,看起來黑暗模式的貢獻者不打算補上 switch,所以討論串後面才出現了 darkmode.js,不過我個人比較懶人直接找其他開發者寫的套件 hexo-next-darkmode ,但實際使用後會讓我的所有圖片無法置中,從網頁 F12 來看是因為被下面的 css 覆蓋。

img, .darkmode-ignore {
isolation: isolate;
display: inline-block;
}

身為前端菜鳥也只能想辦法 google,從該套件作者的部落格的留言區看到解法,但總歸來說還是不知道 hexo 和 node module 之間產生的優先順序,畢竟我試了一些寫法都蓋不掉上面的 css。

./theme/next/layout/_scripts/vendors.swig
 ...
{# Customize darkmode.js - Declaration #}
{%- if theme.darkmode_js %}
{# another way load js from CDN
{%- set darkmode_js_uri = theme.vendors.darkmode_js %}
<script src="{{ darkmode_js_uri }}"></script>
#}
{%- set js_vendors = js_vendors | attr('darkmode_js', 'darkmode-js/lib/darkmode-js.min.js') %}
<style>
{# fix bug that switch button can not be clicked #}
button.darkmode-toggle {
z-index: 9999;
}
{# fix bug that image color is also inverted #}
img, .darkmode-ignore {
isolation: isolate;
display: block;
}
</style>
{%- endif %}

{%- for name, internal in js_vendors %}
{%- set internal_script = next_vendors(internal) %}
<script src="{{ theme.vendors[name] or internal_script }}"></script>
{%- endfor %}

題外話,darkmode 看起來還有一些色調反轉的區塊要調整(例如 note block),對於 note block 我偏好 flat style,但從 相關 issue 看起來 darkmode 不支援 flat style 的色調轉換,從下圖應該蠻容易看得出差異,所以我目前改用 simple style QQ

備份原始文章

最開始使用 GitHub Pages 時,由於我 git 版控的技能不高,所以對於備份真的是整個打包成 .tar 丟到雲端硬碟XD 後來知道有套件可以直接備份到同一份 GitHub repository,但是!! 當時我沒有搞清楚 GitHub Pages 運作的機制,想說把文章原始檔案直接備份在 master branch 應該OK吧 …

嗯 還真的是沒什麼問題。

但 master branch 主要是用來放置靜態檔案,這時塞了包含 _config.yml 等等的設定檔真的相當雜亂,以至於往後在換電腦幫部落格搬家的時候,我是直接把整個 GitHub repository 棄置重建。後來想起曾經問過翔君的備份方式,對於未公開的草稿確實不好直接放在 public repository,因此參考了這篇,開了 private repository 搭配簡單的 script 搞定備份。

Search Service

過去剛開始經營一直都有在使用的功能,直到換電腦順便把部落格改版的時候發現,搜尋結果的功能常常不如預期。舉例來說搜尋 “CTF” 可以成功找到內文的關鍵字,但找不到斗大標題所含有”CTF”的關鍵字,因此把這個功能冷凍一陣子,這次終於有機會重新研究這個功能,如下。

npm install hexo-generator-search
npm install hexo-generator-searchdb

呵 我猜當初應該是少裝其中一項套件吧,欸嘿。

新增標題特效

路過看到這篇 文章,就拔過來借用,看起來很酷ㄋw

./source/_data/styles.styl
.site-title:hover, .post-title:hover {
animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes shake-it {
0% {
text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
}
25% {
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
50% {
text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
}
100% {
text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
}
}