1
import type {
2
  ExpressiveCodeConfig,
3
  LicenseConfig,
4
  ArtalkConfig,
5
  NavBarConfig,
6
  ProfileConfig,
7
  SiteConfig,
8
} from "./types/config";

85
};
86

87
// 自己根据内容定义ArtalkConfig类
88
export const arTalkConfig: ArtalkConfig = {
89
  enable: true,
90
  site: "青漫手记",
91
  url: "https://talk.16c.top",
92
};
93

94
export const expressiveCodeConfig: ExpressiveCodeConfig = {

1
---
2
import 'artalk/Artalk.css'
3
---
4

5
<div id="artalk"></div>
6

7
<script>
8
  import Artalk from 'artalk'
9
  import { arTalkConfig } from "../../config";
10

11
  let artalk;
12
  let observer;
13

14
  // console.log("加载评论系统")
15
  try{
16
    initArtalk();
17
  }catch(e){
18
    console.log("加载评论功能失败")
19
  }
20

21
  function bindThemeObserver() {
22
    if (observer) observer.disconnect();
23

24
    observer = new MutationObserver(() => {
25
      if (!artalk) return;
26
      const isDark = document.documentElement.classList.contains('dark');
27
      artalk.setDarkMode(isDark);
28
    });
29

30
    observer.observe(document.documentElement, {
31
      attributes: true,
32
      attributeFilter: ['class'],
33
    });
34
  }
35

36
  function initArtalk() {
37
    // console.log("初始化评论")
38
    const el = document.getElementById("artalk");
39
    if (!el) return;
40

41
    if (artalk) {
42
      artalk.destroy();
43
      artalk = null;
44
    }
45

46
    artalk = Artalk.init({
47
      el,
48
      pageKey: location.pathname,
49
      pageTitle: document.title,
50
      server: arTalkConfig.url,
51
      site: arTalkConfig.site,
52
      darkMode: false, // 初始值无所谓，后面 observer 会立刻更新
53
    });
54

55
    // 开启主题监听
56
    bindThemeObserver();
57

58
    // 初始化时同步一次
59
    const isDark = document.documentElement.classList.contains('dark');
60
    artalk.setDarkMode(isDark);
61
  }
62

63
  // -----------------------
64
  // 页面加载 & 导航事件
65
  // -----------------------
66
  const initEvents = ['DOMContentLoaded', 'astro:after-swap', 'pjax:complete', 'swup:contentReplaced']
67
  for (const e of initEvents) {
68
    document.addEventListener(e, () => {
69
      // console.log(`触发事件: ${e}`, document.location.pathname)
70
      if(document.location.pathname != '/' && document.location.pathname != '/index.html'){
71
        initArtalk()
72
      }
73
    })
74
  }
75

76
  window.addEventListener("beforeunload", () => {
77
    if (artalk) artalk.destroy();
78
    if (observer) observer.disconnect();
79
  });
80
</script>