跳轉至

格線（Grids）

Grids 可以把性質相近、重要性相當的區塊排成矩形，特別適合用來做首頁或章節的概覽頁。

zensical.toml 設定

[project.markdown_extensions]
attr_list = {}
md_in_html = {}

Note

範例中用到的圖示與 Emoji 需要另外設定，見 圖示。

格線有兩種：卡片格線（每個項目包成一張滑過會浮起的卡片）與一般格線（把任意區塊排成矩形）。

卡片格線：清單語法

用 <div class="grid cards" markdown> 包住一個清單，每個清單項目就成為一張卡片：

原始程式

<div class="grid cards" markdown>

- :fontawesome-brands-html5: __HTML__ 負責內容與結構
- :fontawesome-brands-js: __JavaScript__ 負責互動
- :fontawesome-brands-css3: __CSS__ 負責讓文字不要跑出框框
- :fontawesome-brands-internet-explorer: __Internet Explorer__ ……嗯？

</div>

輸出結果

  • HTML 負責內容與結構
  • JavaScript 負責互動
  • CSS 負責讓文字不要跑出框框
  • Internet Explorer ……嗯？

只要外層 div 有 markdown 屬性，清單項目裡可以放任意 Markdown。下面是包含圖示、分隔線與連結的完整卡片：

原始程式

<div class="grid cards" markdown>

-   :material-clock-fast:{ .lg .middle } __5 分鐘完成安裝__

    ---

    用 `pip` 安裝 `zensical`，幾分鐘就能開始寫文件

    [:octicons-arrow-right-24: 開始使用](zensical_basics.md)

-   :fontawesome-brands-markdown:{ .lg .middle } __只要會 Markdown__

    ---

    專心寫內容，就能產生響應式、可搜尋的靜態網站

    [:octicons-arrow-right-24: 文字格式化](zensical_formatting.md)

-   :material-format-font:{ .lg .middle } __量身打造__

    ---

    只要幾行設定，就能改顏色、字型、語言、圖示、Logo

    [:octicons-arrow-right-24: 網站客製化](zensical_customization.md)

</div>

輸出結果

  • 5 分鐘完成安裝

    用 pip 安裝 zensical，幾分鐘就能開始寫文件

    開始使用

  • 只要會 Markdown

    專心寫內容，就能產生響應式、可搜尋的靜態網站

    文字格式化

  • 量身打造

    只要幾行設定，就能改顏色、字型、語言、圖示、Logo

    網站客製化

空間不夠時，項目會拉滿整個寬度（例如手機）；空間夠大時（例如收起側邊欄），一列會排 3 個以上。

卡片格線：區塊語法

區塊語法是在一般格線裡，替任意區塊元素加上 { .card }，讓卡片可以和其他元素混排：

原始程式

<div class="grid" markdown>

:fontawesome-brands-html5: __HTML__ 負責內容與結構
{ .card }

:fontawesome-brands-js: __JavaScript__ 負責互動
{ .card }

> :fontawesome-brands-internet-explorer: __Internet Explorer__ ……嗯？

</div>

輸出結果

HTML 負責內容與結構

JavaScript 負責互動

Internet Explorer ……嗯？

一般格線

一般格線可以把提示框、程式區塊、頁簽等任意區塊並排，只要用 <div class="grid" markdown> 包起來：

原始程式

<div class="grid" markdown>

=== "無序清單"
    * 第一項
    * 第二項

=== "有序清單"
    1. 第一項
    2. 第二項

```markdown title="頁簽語法"
=== "無序清單"
    * 第一項
    * 第二項
```

</div>

輸出結果

  • 第一項
  • 第二項
  1. 第一項
  2. 第二項
頁簽語法
=== "無序清單"
    * 第一項
    * 第二項

總結

想做的事 語法
卡片格線（清單） <div class="grid cards" markdown> + 清單
卡片格線（區塊） <div class="grid" markdown> + 區塊後加 { .card }
一般格線 <div class="grid" markdown> + 任意區塊
卡片內的分隔線 在清單項目裡寫 ---

參考資料