標題：在 markdown / GitHub Pages 中使用的 CSS 唯一時間進度條
已發布：真實
說明：一種在 github 上以 HTML 頁面形式發布的 Markdown 文件中顯示時間的方法
標籤：css、markdown、githubpages
封面圖片：https://direct\_url\_to\_image.jpg
使用 100:42 的比例可獲得最佳效果。
發佈時間：2025-01-28 12:16 +0000
在我們每週的WeAreDevelopers 直播節目中，我希望能夠將時間進度條加入我們展示的頁面中。問題在於，這些是使用 GitHub Pages 的 Markdown 文件，雖然我確實在其中使用了一些腳本，但我希望確保能夠用純 CSS 實現此功能，以便可以在 GitHub 上使用，而無需建立 HTML 模板。現在，我們實現了它。
您可以查看演示頁面，使用 liquid 原始程式碼查看實際效果，或嘗試codepen中的幾行 CSS。您可以 fork 此 repo 將其用於您的頁面，或直接複製_includes資料夾。
使用CSS時間進度條
您可以在單一頁面中使用任意數量的欄位。新增欄的語法如下：
{% include cssbar.html duration="2s" id="guesttopic" styleblock="yes" %}-
duration變數定義進度需要多長時間 -
id變數是必需的，並且必須是唯一的，才能使功能正常工作 -
如果設定了
styleblock，include 會新增一個包含必要CSS 規則的style，因此您無需將它們新增至主網站樣式。您只需在其中一個 include 中執行此操作即可。
在 HTML 文件中使用欄
當然，你也可以在純 HTML 文件中使用該欄，如codepen所示。文法如下：
<div class="progressbar" style="--duration: 2s;">
<input type="checkbox" id="progress">
<label for="progress">start</label>
</div>不要忘記在複選框和標籤中設定唯一的 ID，並在內聯樣式中定義持續時間。
缺點
-
這有點 hack ，因為它無法被非視覺用戶存取，並且濫用複選框來使其僅支援 CSS。不過它可以透過鍵盤存取。
-
在一個更好的世界中，我會使用 HTML
progress元素並對其進行樣式化…
原文出處：https://dev.to/codepo8/a-css-only-time-progress-bar-to-use-in-markdown-github-pages-465f
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
