使用 Logseq #標籤配搭 CSS 自製特色進度條

2021 年 11 月 30 日

在 Logseq 中，通過修改 custom.css 檔案，可以自定義 CSS 樣式。加上 Logseq 的 #標籤都會有一個 [data-ref="標籤"] 屬性的 <a> 元素，我們可以使用 CSS 選取器，利用這個標籤元素，創造出多資多彩的 Logseq #標籤了。

我之前介紹過 Logseq 工具，當中提及「Logseq 的標籤是可以用 CSS 樣式表更改的」。我首先是在這個 Logseq 教學網站中取得靈感的。

首先，我們可以在 Logseq 軟件中打入 #pie-25 這個標籤，然後我們打開 custom.css 開始為這個標籤定制樣式。

Logseq 的 custom.css 檔未放在知識庫資料夾的 logseq 資料夾內。

#pie-25 圖形進度示意圖

使用我們之前學過的使用 CSS 畫圓餅形進度圖，那個效果使用了四邊邊框不同顏色來達成效果。

[data-ref="pie-25"]:before {  
  content: '';
  display: inline-block;
  margin-right: .5em;
  border-radius:  50%;
  width: 0;
  height: 0;
  border-width: 10px;
  transform: rotateZ(45deg);
  border-color:  firebrick gold gold gold;
}

但今次，我們需要從 0 至 100% 的圓形圖，所以我們把上述代碼優化一下，將重覆部份抽取出來，分別變成 0%, 25%, 50%, 75%, 及 100% 的邊框顏色設定：

[data-ref^="pie-"]:before {  
  content: '';
  display: inline-block;
  margin-right: .5em;
  border-radius:  50%;
  width: 0;
  height: 0;
  border-width: 10px;
  border-color:  gold;
  transform: rotateZ(45deg);
}

[data-ref="pie-25"]:before {
  border-color:  firebrick gold gold gold;
}
[data-ref="pie-50"]:before {
  border-color:  firebrick firebrick gold gold;
}
[data-ref="pie-75"]:before {
  border-color:  firebrick firebrick firebrick gold;
}
[data-ref="pie-100"]:before {
  border-color:  firebrick;
}

圓錐漸變畫圖餅圖

另外，上星期我亦介紹了利用 Gradient 漸變色來畫實線的效果。CSS 漸變色也最近加入了圓錐漸變色功能。使用這個功能，我們可以更輕鬆的重製上述的圖餅圖。

圖錐漸變的用法是：

conic-gradient( 顏色停頓位, 顏色停頓位, ...)

預設起始停頓是 0 度，結束位是順時針數一圈的 360 度。例如：

#demo {
  width: 100px;
  height: 100px;
  background: conic-gradient(yellow, green);
  border-radius: 5px;
}

會得出以下圓錐漸變效果。

和使用漸變色畫實線策略一樣，當我們把兩個顏色的停頓位設定為同一個位置時，就不會有漸變出現，而是一個有兩隻色的圓餅圖。又或者當我們把 border-radius 縮少時，就可以形成四格進度圖。

使用 conic-gradient 的四格進度圖代碼：

[data-ref^="square-"]:before {  
  content: '';
  display: inline-block;
  margin-right: .5em;
  border-radius:  3px;
  width: 18px;
  height: 18px;
  background: gold;
}
[data-ref="square-25"]:before {
  background: conic-gradient(firebrick 25%, gold 25%);
}
[data-ref="square-50"]:before {
  background: conic-gradient(firebrick 50%, gold 50%);
}
[data-ref="square-75"]:before {
  background: conic-gradient(firebrick 75%, gold 75%);
}
[data-ref="square-100"]:before {
  background: firebrick;
}

進化之圓餅進度圖

圓錐漸變是瀏覽器上新推出的功能，之前未有這個 conic gradient，唯有使用邊框顏色達成效果。缺點是邊框只有四邊。現在學懂了圓錐漸變效果，需要停頓在甚麼角度也行，所以我們可以擴展我們的圓餅進度圖，例如從 4 格擴展至 10 格。

箇中的 CSS 代碼，就是按比例設定兩個顏色的相同停頓位而已。

[data-ref^="circle-"]:before {  
  content: '';
  display: inline-block;
  margin-right: .5em;
  border-radius:  50%;
  width: 18px;
  height: 18px;
  background: gold;
}
[data-ref="circle-10"]:before {
  background: conic-gradient(firebrick 10%, gold 10%);
}
[data-ref="circle-20"]:before {
  background: conic-gradient(firebrick 20%, gold 20%);
}
[data-ref="circle-30"]:before {
  background: conic-gradient(firebrick 30%, gold 30%);
}
[data-ref="circle-40"]:before {
  background: conic-gradient(firebrick 40%, gold 40%);
}
[data-ref="circle-50"]:before {
  background: conic-gradient(firebrick 50%, gold 50%);
}
[data-ref="circle-60"]:before {
  background: conic-gradient(firebrick 60%, gold 60%);
}
[data-ref="circle-70"]:before {
  background: conic-gradient(firebrick 70%, gold 70%);
}
[data-ref="circle-80"]:before {
  background: conic-gradient(firebrick 80%, gold 80%);
}
[data-ref="circle-90"]:before {
  background: conic-gradient(firebrick 90%, gold 90%);
}
[data-ref="circle-100"]:before {
  background: firebrick;
}

今期我介紹了在 Logseq 工具中配合 #標籤來製作 CSS 進度示意圖，但相同的技術可以應用到其他項目其他元素中，以製作更豐富的樣式效果。

— 麥誠 Makzan，2021-11-30。

我是麥誠軒（Makzan)，除了正職外，平常我要麼辦本地賽與辦世界賽，要麼任教編程與網站開發的在職培訓。現正轉型將面授培訓內容寫成電子書、網上教材等，至今撰寫了 7 本書， 2 個視頻教學課程。

我逢星期二會不定期推出 #CSS樣式星期二，介紹不同的 CSS 特效與技巧。在這個網站技術正在佔領各平台軟件界面的年代，用好 CSS 樣式可以使大家事半功倍。

如果我的文章有價值，請訂閱贊助我持續創作分享。

訂閱贊助：https://liker.land/thomasmak/civic