1---
 2import { commentConfig, siteConfig } from '@/config';
 3import '@/styles/waline.css?url';
 4
 5const walineConfig = commentConfig.waline!;
 6const pathName = walineConfig.path ? walineConfig.path(Astro.url.pathname) : Astro.url.pathname;
 7---
 8
 9<div id="waline-wrapper"></div>
10
11<script
12  type="module"
13  is:inline
14  define:vars={{
15    walineConfig,
16    pathName,
17    lang: siteConfig.lang,
18  }}
19>
20  import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
21
22  function setup() {
23    const el = document.getElementById('waline-wrapper');
24    if (!el) return;
25    init({
26      el,
27      lang,
28      serverURL: walineConfig.serverURL,
29      path: pathName,
30      dark: false,
31      meta: walineConfig.meta || ['nick', 'mail', 'link'],
32      requiredMeta: walineConfig.requiredMeta || [],
33      login: walineConfig.login || 'enable',
34      wordLimit: walineConfig.wordLimit || 500,
35      pageSize: walineConfig.pageSize || 10,
36      reaction: walineConfig.reaction || false,
37    });
38  }
39
40  document.addEventListener('astro:page-load', setup);
41  setup();
42</script>
43
44<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
45<style is:inline>
46  :root {
47    /* 字体大小 */
48    --waline-font-size: 1rem;
49
50    /* 常规颜色 */
51    --waline-white: #fff;
52    --waline-light-grey: #999;
53    --waline-dark-grey: #666;
54
55    /* 主题色 */
56    --waline-theme-color: var(--color-primary);
57    --waline-active-color: var(--color-secondary);
58
59    /* 布局颜色 */
60    --waline-color: var(--color-base-content);
61    --waline-bg-color: var(--color-base-100);
62    --waline-bg-color-light: var(--color-base-200);
63    --waline-bg-color-hover: var(--color-base-200);
64    --waline-border-color: var(--color-base-200);
65    --waline-disable-bg-color: color-mix(in oklab, var(--color-base-200) 25%, transparent);
66    --waline-disable-color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
67    --waline-code-bg-color: var(--color-base-100);
68
69    /* 特殊颜色 */
70    --waline-bq-color: #f0f0f0;
71
72    /* 头像 */
73    --waline-avatar-size: 3.25rem;
74    --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
75
76    /* 徽章 */
77    --waline-badge-color: var(--color-accent);
78    --waline-badge-font-size: 0.775em;
79
80    /* 信息 */
81    --waline-info-bg-color: color-mix(in oklab, var(--color-base-content) 15%, transparent);
82    --waline-info-color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
83    --waline-info-font-size: 0.625em;
84
85    /* 渲染选择 */
86    --waline-border: 1px solid var(--waline-border-color);
87    --waline-avatar-radius: 50%;
88    --waline-box-shadow: none;
89  }
90</style>