次世代 Hugo

佔據剩餘高度

實務上常遇到只有一些 column 要指定高度，但最後剩下的 column 自動佔據剩餘高度即可，可用 calc() 或 flex = 1 達成。

2024-06-22

もっと読む

佔據剩餘寬度

實務上常遇到只有一些 column 要指定寬度，但最後剩下的 column 自動佔據剩餘寬度即可，可用 calc() 或 flex = 1 達成。

2024-06-22

もっと読む

使用 where() 實現 filter()

Go 並沒有內建 filter()，但 Hugo 則提供 where() 類似 filter() 功能。

2024-06-02

もっと読む

使用 apply() 實踐 map()

Go 並沒有內建 map()，但 Hugo 則提供 apply() 類似 map() 功能。

2024-06-01

もっと読む

實作 Tooltip (JavaScript + CSS)

Tooltip 為實務上常見效果，可使用 JavaScript + CSS 實現。

2024-05-27

もっと読む

實作 Tooltip (純 CSS)

Tooltip 為實務上常見效果，可完全使用 CSS 實現。

2024-05-26

もっと読む

自動均分所有 Column

實務上會遇到某些 Column 會指定寬度，但剩下 Column 則自動 均分 剩餘寬度，可使用 flex-grow 或 flex 實現。

2024-05-26

もっと読む

實作字幕動態向上捲動

當字幕不斷動態地增加時，字幕會向上捲動，需使用一些 JavaScript 與 CSS 技巧才能實現。

2024-05-26

もっと読む

使用 JSON 檔案儲存自訂資料

除了將自訂的資料放在 hugo.json 外，也能將 .json 檔案放在 data 目錄下。

2024-04-29

もっと読む

如何將 Object Array 轉 CSV 並下載 ?

雖然可以從 Server 端直接處理 CSV 下載，但若 CSV 內必須處理多國語言，則必須將 Object Array 先下載到 Browser，然後再轉成 CSV 下載。

2024-04-23

もっと読む