在Fuwari中添加评论功能(带黑暗模式)

封面图来源：てつぶた(鉄血公国の技術が世界一ィ！)🔗

前言
首先感谢下面两位博主的文章，本博文是在此基础上编写的
《利用giscus给你的网站添加评论功能》 by AULyPc
《How to integrate Giscus to your Astro Blog》 by Maxence Poutord

https://blog.aulypc0x0.online/posts/add_comment_for_your_website_in_fuwari/

How to integrate Giscus to your Astro Blog

Learn how to integrate Giscus (GitHub-powered comments), into your Astro blog. How to deal with dark mode and styles customization.

www.maxpou.fr

2024-08-23T00:00:00Z

前提条件
导入Giscus的部分请参考《利用giscus给你的网站添加评论功能》
本文中写的改动点只涉及到增加黑暗模式

改动点#

在src\components\widget目录下新建Comments.svelte文件
标注的部分需要替换为读者自己的giscus代码，注意第12行不能替换

1
<section>
2
    <script src="https://giscus.app/client.js"
3
        data-repo="[在此输入仓库]"
4
        data-repo-id="[在此输入仓库 ID]"
5
        data-category="[在此输入分类名]"
6
        data-category-id="[在此输入分类 ID]"
7
        data-mapping="pathname"
8
        data-strict="0"
9
        data-reactions-enabled="1"
10
        data-emit-metadata="0"
11
        data-input-position="bottom"
12
        data-theme={$mode === DARK_MODE ? 'dark' : 'light'}
13
        data-lang="zh-CN"
14
        crossorigin="anonymous"
15
        async>
16
    </script>
17
</section>
18

19
<script>
20
import { AUTO_MODE, DARK_MODE } from '@constants/constants.ts'
21
import { onMount } from 'svelte'
22
import { writable } from 'svelte/store';
23
import { getStoredTheme } from '@utils/setting-utils.ts'
24
const mode = writable(AUTO_MODE)
25
onMount(() => {
26
  mode.set(getStoredTheme())
27
})
28

29
function updateGiscusTheme() {
30
  const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
31
  const iframe = document.querySelector('iframe.giscus-frame')
32
  if (!iframe) return
33
  iframe.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, 'https://giscus.app')
34
}
35

36
const observer = new MutationObserver(updateGiscusTheme)
37
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
38

39
window.onload = () => {
40
  updateGiscusTheme()
41
}
42
</script>

修改文件src\pages\friends.astro中的代码

引入Comments组件

1
---
2
import MainGridLayout from '../layouts/MainGridLayout.astro'
3

4
import { getEntry } from 'astro:content'
5
import { i18n } from '../i18n/translation'
6
import I18nKey from '../i18n/i18nKey'
7
import Markdown from '@components/misc/Markdown.astro'
8
import Comments from '@components/widget/Comments.svelte'
9

10
const friendsPost = await getEntry('spec', 'friends')

用组件代码代替原先的代码

1
    </div>
2

3
<script src="https://giscus.app/client.js"
4
        data-repo="[在此输入仓库]"
5
        data-repo-id="[在此输入仓库 ID]"
6
        data-category="[在此输入分类名]"
7
        data-category-id="[在此输入分类 ID]"
8
        data-mapping="pathname"
9
        data-strict="0"
10
        data-reactions-enabled="1"
11
        data-emit-metadata="0"
12
        data-input-position="bottom"
13
        data-theme="preferred_color_scheme"
14
        data-lang="zh-CN"
15
        crossorigin="anonymous"
16
        async>
17
</script>
18
<Comments client:only="svelte"></Comments>
19

20
</MainGridLayout>

文件src\pages\posts\[...slug].astro中也是相同的操作，就不重复了