1
// ✅ src/types/config.ts
2
export type WalineConfig = {
3
  serverURL: string;                                    // 服务器地址（必填）
4
  lang?: "en" | "zh" | "zh-CN" | "zh-TW" | "jp" | "jp-JP";  // 语言
5
  pageview?: boolean;                                   // 浏览量统计
6
  comment?: boolean;                                    // 评论数统计
7
  emoji?: string[];                                     // 表情包
8
  meta?: ("nick" | "mail" | "link")[];                 // 用户信息字段
9
  requiredMeta?: ("nick" | "mail" | "link")[];         // 必填字段
10
  wordLimit?: number | [number, number];               // 字数限制
11
  pageSize?: number;                                    // 每页评论数
12
  login?: "enable" | "disable" | "force";              // 登录模式
13
  reaction?: boolean | string[];                        // 文章反应
14
  locale?: {                                            // 文案配置
15
    placeholder?: string;
16
    sofa?: string;
17
    [key: string]: string | undefined;
18
  };
19
  placeholderConfig?: {                                 // 输入框占位符
20
    nick?: string;
21
    mail?: string;
22
    link?: string;
23
  };
24
};

1
// ✅ src/config.ts
2
import type { WalineConfig } from "./types/config";
3

4
export const walineConfig: WalineConfig = {
5
  // === 必填配置 ===
6
  serverURL: "https://waline.xieyi.org/",
7

8
  // === 语言配置 ===
9
  lang: "en", // 留空则自动使用 siteConfig.lang 映射
10

11
  // === 统计功能 ===
12
  pageview: true,
13
  comment: true,
14

15
  // === 表情包配置 ===
16
  emoji: [
17
    "https://unpkg.com/@waline/emojis@1.2.0/weibo",
18
    "https://unpkg.com/@waline/emojis@1.2.0/alus",
19
    "https://unpkg.com/@waline/emojis@1.2.0/bilibili",
20
  ],
21

22
  // === 用户信息 ===
23
  meta: ["nick", "mail", "link"],
24
  requiredMeta: ["nick", "mail"],
25

26
  // === 评论限制 ===
27
  wordLimit: 0,
28
  pageSize: 5,
29

30
  // === 登录配置 ===
31
  login: "enable",
32

33
  // === 文章反应 ===
34
  reaction: ["https://api.iconify.design/material-symbols-light:heart-check-outline-rounded.svg"],
35

36
  // === 文案配置 ===
37
  locale: {
38
    placeholder: "Leave your thoughts here... 💭",
39
    sofa: "Be the first to share your thoughts!",
40
  },
41

42
  // === 输入框占位符 ===
43
  placeholderConfig: {
44
    nick: "Your Name ✨",
45
    mail: "Your Email 📧",
46
    link: "Your Website 🌐",
47
  },
48
};

1
<!-- ✅ src/components/Waline.astro -->
2
---
3
import { siteConfig, walineConfig } from "@/config";
4
import type { WalineConfig } from "@/types/config";
5

6
// Props 支持覆盖全局配置
7
interface Props extends Partial<WalineConfig> {
8
  path?: string;
9
}
10

11
const { path, ...propsConfig } = Astro.props;
12

13
// 配置合并：Props > 全局配置 > 默认值
14
const mergedConfig: WalineConfig = {
15
  ...walineConfig,
16
  ...propsConfig,
17
};
18

19
// 语言自动映射
20
const langMap: Record<string, string> = {
21
  en: "en",
22
  zh_CN: "zh-CN",
23
  zh_TW: "zh-TW",
24
  ja: "jp",
25
  ko: "en", // Waline 不支持韩语，使用英语
26
  // ... 其他映射
27
};
28

29
const WALINE_LANG = mergedConfig.lang || langMap[siteConfig.lang] || "en";
30

31
// 配置序列化，传递给客户端
32
const walineClientConfig = JSON.stringify({
33
  lang: WALINE_LANG,
34
  serverURL: mergedConfig.serverURL,
35
  pageview: mergedConfig.pageview,
36
  comment: mergedConfig.comment,
37
  emoji: mergedConfig.emoji,
38
  meta: mergedConfig.meta,
39
  requiredMeta: mergedConfig.requiredMeta,
40
  wordLimit: mergedConfig.wordLimit,
41
  pageSize: mergedConfig.pageSize,
42
  login: mergedConfig.login,
43
  reaction: mergedConfig.reaction,
44
  locale: mergedConfig.locale,
45
  placeholderConfig: mergedConfig.placeholderConfig,
46
});
47
---
48

49
<div
50
  id="waline"
51
  class="rounded-[var(--radius-large)]"
52
  data-config={walineClientConfig}
53
  data-path={path || Astro.url.pathname}
54
></div>

1
<!-- 1. 使用全局配置 -->
2
<Waline />
3

4
<!-- 2. 自定义路径 -->
5
<Waline path="/custom-path" />
6

7
<!-- 3. 覆盖特定配置 -->
8
<Waline reaction={false} comment={false} />
9

10
<!-- 4. 组合使用 -->
11
<Waline path="/about" reaction={false} pageview={false} />

1
---
2
// Props 类型定义
3
interface Props extends Partial<WalineConfig> {
4
  path?: string;
5
}
6

7
const { path, ...propsConfig } = Astro.props;
8

9
// 配置合并（Props 优先级最高）
10
const mergedConfig: WalineConfig = {
11
  ...walineConfig,      // 全局配置
12
  ...propsConfig,       // Props 覆盖
13
};
14
---

1
function initWaline() {
2
  const currentPath = window.location.pathname;
3

4
  // 1. 容器检查
5
  const walineEl = document.querySelector('#waline') as HTMLElement | null;
6
  if (!walineEl) {
7
    console.warn('[Waline] Container element not found');
8
    return;
9
  }
10

11
  // 2. 配置验证
12
  const configStr = walineEl.dataset.config;
13
  if (!configStr) {
14
    console.error('[Waline] Configuration not found');
15
    return;
16
  }
17

18
  // 3. JSON 解析保护
19
  let config;
20
  try {
21
    config = JSON.parse(configStr);
22
  } catch (error) {
23
    console.error('[Waline] Failed to parse configuration:', error);
24
    return;
25
  }
26

27
  // 4. Waline 初始化
28
  const walineInstance = init({
29
    el: '#waline',
30
    serverURL: config.serverURL,
31
    path: currentPath,
32
    lang: config.lang,
33
    locale: config.locale,
34
    // ... 其他配置
35
  });
36

37
  return walineInstance;
38
}

1
// 应用 Placeholder 的函数
2
const applyPlaceholders = () => {
3
  if (!config.placeholderConfig) return;
4

5
  const inputs = {
6
    nick: document.querySelector('#waline .wl-header input[name="nick"]') as HTMLInputElement | null,
7
    mail: document.querySelector('#waline .wl-header input[name="mail"]') as HTMLInputElement | null,
8
    link: document.querySelector('#waline .wl-header input[name="link"]') as HTMLInputElement | null,
9
  };
10

11
  if (inputs.nick && config.placeholderConfig.nick) {
12
    inputs.nick.placeholder = config.placeholderConfig.nick;
13
  }
14
  if (inputs.mail && config.placeholderConfig.mail) {
15
    inputs.mail.placeholder = config.placeholderConfig.mail;
16
  }
17
  if (inputs.link && config.placeholderConfig.link) {
18
    inputs.link.placeholder = config.placeholderConfig.link;
19
  }
20
};
21

22
// 初始应用
23
setTimeout(applyPlaceholders, 100);
24

25
// 监听 DOM 变化，确保登录/退出后 placeholder 依然生效
26
const observer = new MutationObserver(applyPlaceholders);
27
const walineContainer = document.querySelector('#waline') as HTMLElement | null;
28
if (walineContainer) {
29
  observer.observe(walineContainer, { childList: true, subtree: true });
30
}

1
let walineInstance: ReturnType<typeof initWaline>;
2

3
// 初始化：页面加载完成时
4
if (document.readyState === 'loading') {
5
  document.addEventListener('DOMContentLoaded', () => {
6
    walineInstance = initWaline();
7
  });
8
} else {
9
  walineInstance = initWaline();
10
}
11

12
// 重新初始化：Astro 页面切换时（支持 ViewTransitions）
13
document.addEventListener('astro:after-swap', () => {
14
  walineInstance = initWaline();
15
});

1
/* 反应图标 - 未激活状态（空心） */
2
#waline .wl-reaction-item img {
3
  content: url('https://api.iconify.design/material-symbols-light:heart-check-outline-rounded.svg');
4
  filter: invert(25%);
5
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
6
}
7

8
/* 反应图标 - 激活状态（实心） */
9
#waline .wl-reaction-item.active img {
10
  content: url('https://api.iconify.design/material-symbols-light:heart-check-rounded.svg');
11
  animation: reaction-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
12
}
13

14
/* 点赞弹跳动画 */
15
@keyframes reaction-bounce {
16
  0% { transform: scale(1); }
17
  25% { transform: scale(1.3) rotate(-10deg); }
18
  50% { transform: scale(1.1) rotate(10deg); }
19
  75% { transform: scale(1.2) rotate(-5deg); }
20
  100% { transform: scale(1); }
21
}

1
<div class="flex flex-row flex-wrap text-black/30 dark:text-white/30 gap-3 md:gap-5 mb-3">
2
  <!-- 每个统计项 -->
3
  <div class="flex flex-row items-center">
4
    <div class="...">
5
      <Icon name="..." />
6
    </div>
7
    <div class="text-sm">
8
      <span class="waline-pageview-count">123</span>
9
      <!-- 关键：移动端隐藏文字标签 -->
10
      <span class="waline-text-views hidden sm:inline">views</span>
11
    </div>
12
  </div>
13
</div>