在 Fuwari 中添加 Twikoo 评论

首先，你需要部署一个 Twikoo 后端#

你可以参考 Twikoo 文档部署一个 Twikoo 后端。

接下来，我们来在 Fuwari 中添加 Twikoo 评论#

在 Fuwari 项目中选择 Comments 分支

saicaca

fuwari

Waiting for api.github.com...

00K

Waiting...

下载后，将 /src/components/comment 文件夹复制到博客的 /src/components 目录下

并只保留 index.astro 和 Twikoo.astro 文件。

打开 index.astro ，把里面的内容替换成下面的内容喵：

1
---
2
import type { CollectionEntry } from 'astro:content'
3
import { commentConfig } from '@/config'
4
import Twikoo from './Twikoo.astro'
5
interface Props {
6
  post: CollectionEntry<'posts'>
7
}
8

9
const { id, data, slug } = Astro.props.post
10

11
const path = `/posts/${slug}`
12
const url = `${Astro.site?.href}${path}`
13

14
let commentService = ''
15
if (commentConfig?.twikoo) {
16
  commentService = 'twikoo'
17
}
18
---
19
<div class="card-base p-6 mb-4">
20
  {commentService === 'twikoo' && <Twikoo path={path} />}
21
  {commentService === '' && null}
22
</div>

接着将 twikoo 配置添加到 /src/types/config.ts 文件中喵：

1
export type CommentConfig = {
2
    twikoo?: TwikooConfig
3
}
4

5
type TwikooConfig = {
6
    envId: string
7
    region?: string
8
    lang?: string
9
}

就像这样子喵：

然后打开 /src/config.ts ，引入 CommentConfig，并在末尾添加一点点代码：

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

11
/* --- 省略中间部分代码 --- */
12

13
export const commentConfig: CommentConfig = {
14
  twikoo: {
15
    envId: '这里替换为你的 envId',
16
  },
17
}

我们还需要在 /src/pages/posts/[...slug].astro 中添加 Twikoo 评论组件的引用喵

添加 import Comment from "@components/comment/index.astro"：

1
---
2
import path from "node:path";
3
import License from "@components/misc/License.astro";
4
import Markdown from "@components/misc/Markdown.astro";
5
import I18nKey from "@i18n/i18nKey";
6
import { i18n } from "@i18n/translation";
7
import MainGridLayout from "@layouts/MainGridLayout.astro";
8
import { getSortedPosts } from "@utils/content-utils";
9
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
10
import { Icon } from "astro-icon/components";
11
import { licenseConfig } from "src/config";
12
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
13
import PostMetadata from "../../components/PostMeta.astro";
14
import { profileConfig, siteConfig } from "../../config";
15
import { formatDateToYYYYMMDD } from "../../utils/date-utils";
16
import Comment from "@components/comment/index.astro"
17

18
/* --- 省略中间部分代码 --- */
19

20
<Comment post={entry}></Comment>

当你做完上面的步骤后，就可以在文章底部看到你的 Twikoo 评论区了喵~

最后，为了暗色主题，我们还需要再加一步喵#

这里使用 Cherry 大佬编写的css，你可以在这里查看。

将 twikoo.css 放到 /src/styles 目录下就可以啦~

到这里，Twikoo 评论就添加完成了喵~