feat: 加入 heti 排版樣式增強 CSS 的支援 (#64)

* feat: 加入 heti 排版樣式增強 CSS 的支援

「赫蹏」是專為中文網頁內容設計的排版樣式增強。
它基於通行的中文排版規範，可為網站的讀者
帶來更好的內容閱讀體驗。

目前只套用在文章和文章卡片的摘要上。

https://sivan.github.io/heti/

* feat(config): 增加 heti 設定項

取用方式：theme.heti (boolean)

* refactor: add dns-prefetch for unpkg.com

* Update _config.yml

Co-authored-by: xaoxuu <16400144+xaoxuu@users.noreply.github.com>

_config.yml

@@ -248,6 +248,15 @@ plugins:
     enable: true
     css: https://unpkg.com/swiper@6/swiper-bundle.min.css
     js: https://unpkg.com/swiper@6/swiper-bundle.min.js
+  
+  
+  # 赫蹏 (Heti) - 专为中文网页内容设计的排版样式增强
+  # https://github.com/sivan/heti
+  heti: 
+    enable: false
+    css: https://unpkg.com/heti/umd/heti.min.css
+    js: https://unpkg.com/heti/umd/heti-addon.min.js
+
 
 style:
   darkmode: auto # auto / always / false

layout/_partial/head.ejs

@@ -51,6 +51,7 @@ function og_args() {
   <meta http-equiv='x-dns-prefetch-control' content='on' />
   <link rel='dns-prefetch' href='https://cdn.jsdelivr.net'>
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+  <link rel='dns-prefetch' href='//unpkg.com'>
 
   <meta name="renderer" content="webkit">
   <meta name="force-rendering" content="webkit">
@@ -61,6 +62,15 @@ function og_args() {
   <meta name="theme-color" content="#f8f8f8">
   <title><%- generate_title() %></title>
 
+  <% if (theme.heti) { %>
+    <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
+    <script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
+    <script defer>
+      const heti = new Heti('.heti');
+      heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
+    </script>
+  <% } %>
+
   <% if (theme.open_graph && theme.open_graph.enable) { %>
     <%- open_graph(og_args()) %>
   <% } %>

layout/_partial/main/post_list/post_card.ejs

@@ -40,7 +40,7 @@ function div_default() {
   el += '</h2>';
 
   // 摘要
-  el += '<div class="excerpt">';
+  el += '<div class="excerpt heti">';
   el += '<p>';
   if (post.excerpt) {
     el += strip_html(post.excerpt);

layout/post.ejs

@@ -16,7 +16,7 @@ function layoutTitle() {
 %>
 <% let post = page; %>
 <%- partial('_partial/main/navbar/breadcrumb') %>
-<article class='content md <%- post.layout %><%- post.indent ? ' indent' : '' %><%- scrollreveal() %>'>
+<article class='content heti md <%- post.layout %><%- post.indent ? ' indent' : '' %><%- scrollreveal() %>'>
 <%- layoutTitle() %>
 <%- post.content %>
 <%- partial('_partial/main/article/article_footer') %>