Photo by Cherry Lin on Unsplash

部落格上展示中文詩詞和古文，有時候會遇到排版的挑戰。好在，像 Zola （本站便是以 Zola 架設）這樣的平台提供了 shortcode 功能，讓這件事變得容易多了。而且，用上赫蹏 Heti 這種專門為中文設計的排版工具，我們的文章看起來會更加漂亮、更有中文風味。這樣一來，無論是在 Hugo、Wrodpress 還是其他平台，我們都能讓古文詩詞在部落格上熠熠生輝。

啟用 CSS

首先，我們必須在頁面的 </head> 標籤之前引入heti.css樣式文件。

<head>
<style>
    <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
</style>
</head>

安裝 JS

由於某些CSS特性尚未獲得瀏覽器支持，因此可以選擇使用增強型腳本來優化排版效果。只需在頁面的 </body> 標籤之前引入JavaScript腳本並進行初始化即可：

建立 Shortcode poetry

赫蹏不建議使用在<body> 或是 <div class="container" /> 上。要使用時，在要作用的容器加上 class="heti" 即可。 直接撰寫 HTML 使用的方式如下。

<article class="entry heti">
  <h1>我的世界觀</h1>
  <p>有錢人的生活就是這麼樸實無華，且枯燥。</p>
  ……
</article>

但這樣很囉唆，所以我們會想把它封裝成一個特別的區塊，重復使用。每次使用只需要填不一樣的地方即可。這個需求可透過 shortcode 達成。

Zola 從 WordPress 借鑑了短代碼（shortcodes）的概念。在 Zola 中，短代碼是指可以在 md 文件中使用的模板片段，這些片段通常存放在 templates/shortcodes 目錄下。

短代碼主要應用於兩種情境：

  1. 插入複雜的 HTML。雖然 markdown 格式適合創作，但在嵌入 HTML 或樣式時可能不夠方便。
  2. 輕鬆完成基於數據的重複性任務。

建立 shortcode 的方式很簡單，我們建立 template/poerty.html，接者把下面的程式碼直接貼上。

<div class="heti heti--poetry">
  <h2>
    {% if title %}
    {{ title }}
    {% endif %}
    <span class="heti-meta heti-small">
      {% if dynasty %}[{{ dynasty }}]{% endif %}
      {% if abbr_title %}
      <abbr title="{{ abbr_title }}">{{ author }}</abbr>
      {% else %}
        {% if author %}
        {{ author }}
        {% endif %}
      {% endif %}
    </span>
  </h2>
  <div class="heti-verse heti-x-large">
    {{ body| safe }}
  </div>
  <br />
</div>

要注意的是，如果在文件里需要添加一些類似shortcode的文本，又不希望 zola 去渲染它們（例如展示示例代碼），可以用 {{/* 和 */}} 代替 {{ 和 }}。

用法

當我們增加 templates/poetry.html 後，便可在任意的 content/*.md 中利用 poetry 這個 shortcode 排版詩詞。

{% poetry(title="木蘭花", dynasty="宋" author="張先") %}
人意共憐花月滿，花好月圓人又散 <span class="heti-hang">。</span><br>
歡情去逐遠雲空，往事過如幽夢斷 <span class="heti-hang">。</span><br>
草樹爭春紅影亂，一唱雞聲千萬怨 <span class="heti-hang">。</span><br>
任教遲日更添長，能得幾時抬眼看 <span class="heti-hang">。</span><br>
{% end %}

排出來的效果如下：

木蘭花 [宋] 張先

人意共憐花月滿，花好月圓人又散 。
歡情去逐遠雲空，往事過如幽夢斷 。
草樹爭春紅影亂，一唱雞聲千萬怨 。
任教遲日更添長，能得幾時抬眼看 。

上述只展示了簡單的 shortcode 用法，更進階的使用請參閱 Zola 官方文檔。

不只這樣

此刻，來自清風寨的林沖揚聲喊道：站住！

赫蹏除了前面的展示，還能做到更細膩的中文標點符號標注，如專名號，文本變動，文本更新，強調，以及著重號等等。 你可以看個人需求，再做成對應的 shortcode 使用。