1
:root {
2
    --tk-text: black;
3
  }
4

5
  html.dark {
6
    --tk-text: #d1d5db;
7
  }
8

9
  .tk-comments {
10
    @apply text-[var(--tk-text)];
11
  }
12

13
  .tk-submit {
14
    .tk-avatar {
134 collapsed lines
15
      @apply hidden;
16
    }
17
  }
18

19
  /* Text Area */
20
  .tk-row {
21
    .tk-col {
22
      @apply flex-col-reverse;
23
      .tk-input {
24
        textarea {
25
          @apply rounded-[var(--radius-large)] py-4 px-6 !min-h-[150px] focus:border-[var(--primary)];
26
        }
27
      }
28
    }
29
  }
30

31
  /* meta input style */
32
  .tk-meta-input {
33
    @apply relative mt-3;
34
    div {
35
      @apply min-h-10;
36
      .el-input-group__prepend {
37
        @apply !bg-inherit rounded-l-lg;
38
        min-height: inherit;
39
      }
40
      input {
41
        @apply px-4 rounded-r-lg focus:!border-[var(--primary)];
42
        min-height: inherit;
43
      }
44
    }
45
  }
46

47
  /* Button */
48
  .tk-row.actions {
49
    @apply w-full !ml-0 !mt-0;
50
    .__markdown {
51
      @apply !hidden;
52
    }
53
    .tk-preview,
54
    .tk-send,
55
    .tk-cancel {
56
      @apply border-none rounded-lg px-3 py-0 h-8
57
         !bg-[var(--btn-regular-bg-active)] disabled:!bg-[var(--btn-regular-bg)]
58
        !text-[var(--btn-content)] disabled:!text-[#ffffffa1];
59
    }
60
  }
61

62
  /* Comment title */
63
  .tk-comments-title {
64
    .__comments svg {
65
      @apply fill-[var(--primary)];
66
    }
67
  }
68

69
  .tk-comment {
70
    @apply border-[1px] border-[rgba(144,147,153,0.31)] p-4 rounded-2xl hover:shadow-md transition-all;
71
    .tk-action-icon svg {
72
      @apply fill-[var(--primary)];
73
    }
74
  }
75

76
  .tk-action {
77
    .tk-action-count {
78
      @apply text-[var(--btn-content)];
79
    }
80
  }
81

82
  .tk-meta {
83
    .tk-tag {
84
      @apply border-none rounded-lg text-[var(--btn-content)];
85
    }
86

87
    .tk-tag-green {
88
      @apply bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)] dark:text-[var(--deep-text)];
89
    }
90
  }
91

92
  .tk-content,
93
  .tk-preview-container {
94
    a {
95
      @apply link link-underline text-[var(--primary)] font-medium;
96
    }
97

98
    .tk-ruser {
99
      @apply no-underline;
100
    }
101

102
    :not(pre) > code {
103
      @apply bg-[var(--inline-code-bg)] rounded-md text-[--inline-code-color] px-1 py-0.5 font-semibold;
104
    }
105

106
    li{
107
      @apply before:content-['•'] before:text-[var(--primary)];
108
    }
109
  }
110

111
  /* Replies */
112
  .tk-replies {
113
    .tk-comment {
114
      @apply bg-[var(--page-bg)];
115
      .tk-content {
116
        > span:first-of-type {
117
          @apply text-xs;
118
        }
119
      }
120
    }
121
  }
122

123
  .twikoo .code-block {
124
    pre {
125
      @apply !rounded-xl;
126
    }
127

128
    .copy-btn-icon {
129
      width: inherit !important;
130
      height: inherit !important;
131
    }
132
  }
133

134
  .tk-expand-wrap .tk-expand,
135
  .tk-collapse-wrap .tk-expand {
136
    @apply hover:rounded-lg mt-1 hover:bg-[var(--btn-plain-bg-hover)];
137
  }
138

139
  /*让表情组件在表情包数量太多的时候正确显示*/
140
  .card-base {
141
    overflow: visible;
142
}
143

144
/* 让图片类型表情不换行显示 */
145
.tk-content img, .tk-preview-container img {
146
  display: inline;
147
  vertical-align: bottom !important;
148
}

1
// 专用于创建loadComment的事件，即通知评论组件进行一次加载
2
function initCommentComponent() {
3
  const event = new Event("loadComment");
4
  document.dispatchEvent(event);
5
}
6
// twikoo评论
7

8
function init() {
9
  // disableAnimation()()    // TODO
10
  loadTheme();
11
  loadHue();
12
  initCustomScrollbar();
13
  showBanner();
14
  initCommentComponent();  // 调用initCommentComponent()函数，twikoo
15
}
16

17
....
18

19
  window.swup.hooks.on('content:replace', initCustomScrollbar)
20
  // window.swup.hooks.on('content:replace', initCustomScrollbar)
21
    window.swup.hooks.on("content:replace", () => {
22
      initCustomScrollbar();
23
      initCommentComponent(); // 添加代码调用
24
    });
25
  window.swup.hooks.on('visit:start', (visit: {to: {url: string}}) => {
26
    // change banner height immediately when a link is clicked
27
    const bodyElement = document.querySelector('body')

1
---
2
import WidgetLayout from "@components/widget/WidgetLayout.astro";
3
import { commentConfig } from "@/config";
4
import I18nKey from "@i18n/i18nKey";
5
import { i18n } from "@i18n/translation";
6

7
interface Props {
8

9
...
10

11

12
  path: Astro.props.path,
13
};
14
---
15

16
<WidgetLayout name={i18n(I18nKey.comments)} id="comments">
17
<div id="tcomment"></div>
18
</WidgetLayout>
19

20
<script is:inline src="https://cdn.staticfile.org/twikoo/1.6.44/twikoo.all.min.js"></script>
21
<script is:inline define:vars={{ config }}>
22
  twikoo.init(config)

1
---
2
import WidgetLayout from "@components/widget/WidgetLayout.astro";
3
import I18nKey from "@i18n/i18nKey";
4
import { i18n } from "@i18n/translation";
5
import { commentConfig } from "@/config";
6

7
interface Props {
8
  path: string;
9
}
10

11
const config = {
12
  ...commentConfig.twikoo,
13
  el: "#tcomment",
14
  path: Astro.props.path,
15
};
16
---
17
<WidgetLayout name={i18n(I18nKey.comments)} id="comments">
18
<div id="tcomment"></div>
19
</WidgetLayout>
20

21
<script is:inline src="https://cdn.staticfile.org/twikoo/1.6.44/twikoo.all.min.js"></script>
22
<script is:inline define:vars={{ config }}>
23
  twikoo.init(config)
24
<script define:vars={{ config }}>
25
function loadTwikoo() {
26

27
  // 动态加载 Twikoo 脚本,并在加载完成后执行 twikoo.init
28

29
  const script = document.createElement('script');
30
  script.src = 'https://xxx/twikoo.min.js';//js文件
31
  script.defer = true;
32
  script.onload = () => {
33
    if (window.twikoo) {
34
      window.twikoo.init(config);
35
    }
36
  };
37
  // script.onerror = () => {
38
  //   console.error('Twikoo script load failed');
39
  // };
40
  document.body.appendChild(script);
41
}
42
  document.addEventListener("loadComment", loadTwikoo, { once: true }); // 监听加载评论事件,但是我们只能监听一次,从而避免多次触发.
43
</script>