↓ 快轉到主要內容
CYChen

Waline採到的坑

·1829 字·4 分鐘
Hugo Waline
目錄

Layout調整
#

一開始甚麼都不做時會很醜，整個layout有嚴重的擠壓感，而且無法跟著day/night mode調整，在layout/partials/comments.html加上以下CSS code:

調整day/night mode和layout 
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
<div id="waline"></div>
<script type="module">
import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
  init({
    el: '#waline',
    ..
    lang: 'en',
    dark: 'html.dark', // 跟隨主題切換
});
</script>

<!-- 設定視覺風格 -->
<style>
  /* 基礎設定：讓 Waline 背景透明，適配所有主題 */
  #waline {
    --waline-bgcolor: transparent !important;
  }

  /* 淺色模式微調 (當 html 沒有 .dark 時) */
  :root {
    --waline-color: #2c3e50;
    --waline-border-color: #ebedef;
  }

  /* 深色模式微調 (當 html 標籤有 .dark class 時) */
  html.dark #waline {
    --waline-white: #ffffff;
    --waline-color: #f0f6fc !important;      /* 讓留言文字變白 */
    --waline-theme-color: #58a6ff;           /* 連結與按鈕亮藍色 */
    --waline-info-color: #8b949e;            /* 時間與瀏覽量灰色 */
    --waline-border-color: #30363d;          /* 分隔線深灰色 */
  }

  /* 強制修正：確保留言內容在深色模式下不會黑漆漆 */
  html.dark .wl-content, 
  html.dark .wl-editor {
    color: #ffffff !important;
  }
</style>

多個網站的留言管理
#

假設有兩個網頁Site_A和Site_B，是可以共用Waline整套架構，只要在layout/partials/comments.html裡waline的init()中添加path。Site_A、Site_B是讓不同網頁的留言在supabase上可以被區別，取你能識別的名稱就好。

<script type="module">
  import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
  init({
    el: '#waline',
    path: '/Site_A' + window.location.pathname,
    ....
});

加入觀看次數
#

之前用busuanzi的次數其實有點詭異，它顯示的似乎是整站的觀看次數，即便是我已經為每個頁面設定url了，他算出來還是蠻怪的。剛好Waline有支援計算每篇文章的觀看次數，就將busuznzi放到首頁顯示全站的觀看總數，個別文章就用Waline的pageview。一樣修改layout/partials/comments.html，pageview一定要設為true；data-path讓他抓實際的網頁位置:

<!-- 閱讀次數顯示，注意data-path -->
<div class="text-base mt-2">
  閱讀次數：<span class="waline-pageview-count" data-path="/Site_A{{ .RelPermalink }}"></span>
</div>
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />

<div id="waline"></div>
<script type="module">
  import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
  init({
    el: '#waline',
    path: '/MyLife' + window.location.pathname,
    pageview: true, // 啟用觀看次數統計
    ....
});
註記

若你有多個網站，你在span中的data-path就需要前綴和你waline init()中的path一樣的內容。上述例子是用Site_A

用busuanzi計算總人數
#

我的想法是把它放到網站首頁，畢竟都用了一陣子，直接移除有點可惜，雖然他的數字是不正確的(尤其和Google Analytics相比)，放到首頁顯示就是圖個儀式感而已啦~ 到layouts/patrials/footer.html新增下面程式碼，我上放在Copyright上方:

<!-- 只會顯示在首頁  -->
  {{ if .IsHome }}
  <div class="text-sm mt-2">
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv">
        全站總觀看次數：<span id="busuanzi_value_site_pv"></span> 次
    </span>
  </div>
  {{ end }}

留言者資訊暫存的問題
#

Waline有一個討厭的問題，當你留言時，若你填了nickname、email..等資訊，他會一直記住；下一個留言的人，沒有手動清掉的話，就會用上一個人的資料submit出去，而且reload是沒用的。這個問題，是在同一個瀏覽器上會發生(local storage)，但若都用自己的手機/電腦留言，記住也沒甚麼關係，但公用電腦就得清了。其實現在都用手機上網，除非你有跟人家共用，不然這個問題不解也沒甚麼。但測試時就是不爽快 XD 跟一幫AI工具聊了超久，終於湊出了一個可接受的解法:

清暫存資訊

到layouts/partials/comments.html, waline下面加上以下程式碼:

<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
<div id="waline"></div>
<script type="module">
  import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
  init({
    el: '#waline',
    ...
    resetAfterSubmit: true,
});
// ==================== submit/網頁更新清空editor ====================
  function clearText() {
    // 清 DOM 中的輸入框: nick, mail, link
    // Waline 的 resetAfterSubmit 只會清掉 editor 的內容，這三個欄位的值
    // 會殘留在頁面上（下一個留言者會看到前一個人的暱稱和郵箱）
    ['input[name="nick"', 'input[name="mail"]', 'input[name="link"]'].forEach(sel => {
      const el = document.querySelector(sel);
      if (el) {
        el.value = '';
        // 觸發 input 事件，讓 Vue 的雙向綁定同步清空
        el.dispatchEvent(new Event('input', { bubbles: true }));
      }
    });
  }

  // 頁面載入時也清一次（防止上一個人留下的值）
  window.addEventListener('load', () => {
    setTimeout(clearText, 800);
    // 清掉editor, 不然會有上次留言的內容殘留在editor裡
    localStorage.removeItem('WALINE_COMMENT_BOX_EDITOR');
  });

  // 監聽送出按鈕點擊，因為是用timeout，所以可能會比editor內的文字更早被清掉
  const submitBtn = document.querySelector('#waline button[type="submit"]');
  if (submitBtn) {
    submitBtn.addEventListener('click', () => {
      setTimeout(clearText, 1800);
    });
  }
</script>
資訊

在網頁按F12 -> DevTool -> Application(應用程式) -> 本機儲存空間，找WALINE開頭的參數。會記錄留言者資訊的是WALINE_UER_META，留言內容是WALINE_COMMENT_BOX_EDITOR

comment too fast的問題
#

Waline本身會擋快速灌水文章 - 如果留言太頻繁會被擋掉。這裡要從Vercel下手，新增一個environment variables WALINE_COMMENT_INTERVAL，值是秒數，設定10就10秒內同一個使用者的留言會被擋掉。

用Waline取代Cusdis →
閱讀次數：