羊羽手札

Tinytsunami's Blog

0%

羊羽手札更新歷程 06

發表於 更新於 分類於

話說已經 2022 年了，我都從大學生變成社會新鮮人了！
然後終於這個網站加入了「關於我」頁面 XDD

新增關於我

創站 6 年，終於在 2022 年新增這一頁介紹我自己了（欸！）

原本創站的宗旨就是把內容寫好、演示做好而已；
覺得這些內容跟我本人其實關連不太大，就是說……

文章好不好其實讀文章就可以了，跟我是誰沒有太大的關係。

原本生活化的東西都是放 Facebook 那邊，後來覺得有些東西可以放過來，
應該是說「羊羽手札」這個 Blog 是正在面臨轉型的時候了吧！

如果要開始放一些獨立遊戲、遊記類的東西，那麼技術性的內容會被稀釋，
可是我覺得這個網站會更新更頻繁，也會更有溫度一點。

大概吧。

更新歷程文章說明

以後歷程列表會放到關於我的頁面，所以「羊羽手札更新歷程」類的文章，
都只會紀載做了那些更動，以及遇到的問題這樣。

以免歷程列表越來越長。

雜記

因為更新的時候還是有遇到問題，所以這裡寫一下。

Hexo 文章被當成檔案下載

點入 Hexo Blog 文章，結果文章被當成檔案下載，
參考圖 1，該問題主要原因是文章上的 permalink 結尾忘記放斜線 / 造成的。

圖 1、官方文章的說明

請參考：https://hexo.io/docs/front-matter

Hexo 側邊欄錨點失效

然後我發現更新之後，自動生成的錨點連結失效，所以檢查了一下，
問題出在主題 Next 目錄下的 themes\next\source\js\utils.js 檔案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
// TOC item animation navigate.
link.addEventListener('click', event => {
  event.preventDefault();
  var id = event.currentTarget.getAttribute('href').replace('#', '');
  var target = document.getElementById(id);
  var offset = target.getBoundingClientRect().top + window.scrollY;
  window.anime({
    targets  : document.scrollingElement,
    duration : 500,
    easing   : 'linear',
    scrollTop: offset + 10
  });
});
...

其中 target 解析完位置後，如果是中文的話，
會是 URL-Encoding 的格式（Percent-encoding），像這樣：

1
#%E6%9B%B4%E6%96%B0%E6%AD%B7%E7%A8%8B

此時解析位置會找不到，所以可能要「解碼」一次：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
// TOC item animation navigate.
link.addEventListener('click', event => {
  event.preventDefault();
  var id = event.currentTarget.getAttribute('href').replace('#', '');
  var target = document.getElementById(decodeURI(id)); // 解完碼再找元素
  var offset = target.getBoundingClientRect().top + window.scrollY;
  window.anime({
    targets  : document.scrollingElement,
    duration : 500,
    easing   : 'linear',
    scrollTop: offset + 10
  });
});
...

這樣就可以修復了。

Hexo 文章密碼設定

我打算引入的新功能，針對一些特定類型的文章。
插件是用 hexo-blog-encrypt 但是他的密碼輸入太花俏 XDD

所以自己簡單修改了一下，主題叫做 simple 只有簡單的敘述：

1
2
3
4
5
6
7
8
<div class="hbe hbe-container" id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}">
  <script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script>
  <div class="hbe hbe-content">
    <div class="hbe hbe-input hbe-input-blink">🔒 Encrypted Article
      <input class="hbe hbe-input-field hbe-input-field-blink" type="password" id="hbePass" placeholder="{{hbeMessage}}">
    </div>
  </div>
</div>

CSS 方面我也儘量維持簡單的狀態：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* simple theme {{{ */
.hbe-content {
	font-size: 100%;
	padding: 0 0 4em 0;
}

.hbe-input {
	margin: 1em;
	margin: 0em 0em 0em 0.2em;
  width: auto;
}

.hbe-input-blink {
	padding-top: 0em;
}

.hbe-input-blink::before{
	padding-top: 0em;
}

.hbe-input-field {
padding: 0.5em;
}

.hbe-input-field-blink {
	color: #999;
}
/* simple theme }}} */

Hexo 顯示 CSS 內容

Hexo 顯示 CSS 內容，只要用 raw 搭配 codeblock 就可以顯示大括號了：

1
2
3
4
5
{% codeblock lang:css %}
{% raw %}
// any css
{% endraw %}
{% endcodeblock %}