From 4690ce39b22dd3d388cabd6929900485836a966a Mon Sep 17 00:00:00 2001 From: Ad-closeNN <1709301095@qq.com> Date: Sun, 17 Aug 2025 12:09:39 +0800 Subject: [PATCH] =?UTF-8?q?docs(pages):=20=E5=B0=86=20Giscus=20=E8=AF=84?= =?UTF-8?q?=E8=AE=BA=E6=8F=92=E4=BB=B6=E6=B7=BB=E5=8A=A0=E5=88=B0=E5=8D=9A?= =?UTF-8?q?=E5=AE=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2. fix(config): 修复特殊日期判断失败的问题 3. feat(giscus): 加入 Giscus 评论系统 --- .vscode/settings.json | 3 +- src/components/widget/Profile.astro | 74 +++++-- .../images/chrome-github-deny-connection.png | Bin 0 -> 12847 bytes .../assets/images/giscus-no-content.png | Bin 0 -> 29186 bytes src/content/assets/images/giscus-preview.png | Bin 0 -> 53003 bytes src/content/assets/images/giscus-preview2.png | Bin 0 -> 48510 bytes src/content/assets/images/giscus-preview3.png | Bin 0 -> 53003 bytes .../assets/images/giscus-repo-successful.png | Bin 0 -> 100735 bytes .../images/github-giscus-conversation-.png | Bin 0 -> 59980 bytes .../images/github-giscus-conversation.png | Bin 0 -> 59980 bytes .../github-settings-features-discussions.png | Bin 0 -> 54983 bytes src/content/posts/giscus.md | 190 ++++++++++++++++++ src/layouts/Layout.astro | 22 +- src/layouts/MainGridLayout.astro | 123 +++++++----- src/pages/about.astro | 19 ++ src/pages/misans.astro | 16 ++ src/pages/posts/[...slug].astro | 21 +- 17 files changed, 395 insertions(+), 73 deletions(-) create mode 100644 src/content/assets/images/chrome-github-deny-connection.png create mode 100644 src/content/assets/images/giscus-no-content.png create mode 100644 src/content/assets/images/giscus-preview.png create mode 100644 src/content/assets/images/giscus-preview2.png create mode 100644 src/content/assets/images/giscus-preview3.png create mode 100644 src/content/assets/images/giscus-repo-successful.png create mode 100644 src/content/assets/images/github-giscus-conversation-.png create mode 100644 src/content/assets/images/github-giscus-conversation.png create mode 100644 src/content/assets/images/github-settings-features-discussions.png create mode 100644 src/content/posts/giscus.md diff --git a/.vscode/settings.json b/.vscode/settings.json index a643d13..4570936 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -27,5 +27,6 @@ }, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" - } + }, + "markdown.validate.enabled": false } diff --git a/src/components/widget/Profile.astro b/src/components/widget/Profile.astro index 40118f2..a8d8ca7 100644 --- a/src/components/widget/Profile.astro +++ b/src/components/widget/Profile.astro @@ -5,7 +5,6 @@ import { url } from "../../utils/url-utils"; import ImageWrapper from "../misc/ImageWrapper.astro"; const config = profileConfig; -const isSunday = new Date().getDay() === 0; ---
一言 / hitokoto
@@ -30,16 +29,21 @@ const isSunday = new Date().getDay() === 0;
- + + { !isSunday &&
{config.bio}
} + --> +
+ +
{config.links.length > 1 && config.links.map(item => @@ -71,17 +75,64 @@ const isSunday = new Date().getDay() === 0;
- - { isSunday && - - } + +
- - { !isSunday && - - } + + + + + - +``` + +## 插入代码 +打开 `src/pages/posts/[..slug].astro`，在最下方的 `` 的上面插入你在 Giscus 复制的 JavaScript 代码： +```astro title=src/pages/posts/[..slug].astro ins={14-29} startLineNumber=143 + + {entry.data.prevSlug &&
+
+ {entry.data.prevTitle} +
+ +
} + + + + + + + +``` + +放在这个文件 `src/posts/[..slug].astro` 内，仅仅只有 /posts/ 下的文章拥有评论区。 +如果你需要在特定的页面（比如 /about/ ）中使用 Giscus，仅需打开和 Markdown 同名的文件（如 /about/ 的 Markdown 文件是 `about.md`）如 `src/pages/about.astro`，用刚才的方法插入 Giscus 代码即可**实现特定页面拥有 Giscus 评论区**。 + +```astro collapse={2-14} ins={27-42} +--- +import { getEntry, render } from "astro:content"; +import Markdown from "@components/misc/Markdown.astro"; +import I18nKey from "../i18n/i18nKey"; +import { i18n } from "../i18n/translation"; +import MainGridLayout from "../layouts/MainGridLayout.astro"; + +const aboutPost = await getEntry("spec", "about"); + +if (!aboutPost) { + throw new Error("About page content not found"); +} + +const { Content } = await render(aboutPost); +--- + +
+
+ + + +
+
+ +
+ + + +``` + +## 配置网站源 Origin +参考：https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#origins + +如果你的博客是开源的，那么有些人可能会直接 Fork 你的博客仓库，转为自己用。 +这时候如果那人不会配置评论区，那么有意思的来了，他发的评论会**直接到达你 Giscus 配置的仓库**，而不是在他仓库。 + +所以我们可以配置一个 `giscus.json` 在你 **Giscus 设置的仓库** 的根目录（如我在上面 [#在专用仓库存放评论](#在专用仓库存放评论) 中设定了仓库为 `Ad-closeNN/blog-friends`，那就去到这个仓库），新建一个文件 `giscus.json`，例如： + +```json title=giscus.json +{ + "origins": ["https://adclosenn.top"] // 这个域名填你自己的 +} +``` + +:::warning[注意] +`origins` 里面**不推荐**填写 localhost 等本地地址，这样会导致别人把博客 Fork 在本地**依然能发表评论**到你仓库。 +如果你确认这个风险，那么可以直接填 `本地地址` + `端口`，比如 Astro 的本地地址为 `localhost`，端口为 `4321`，那么填写 `http://localhost:4321`： +```json title=giscus.json +{ + "origins": ["https://adclosenn.top", "http://localhost:4321"] +} +``` +::: + +配置好后，本地开发环境(localhost) 和除你设定之外的域名将会直接被 Giscus 切断评论区的连接： ![chrome-github-deny-connection](../assets/images/chrome-github-deny-connection.png) + +# 反垃圾评论 +一般来说不会有人无缘无故就对你的文章评论区发布**脑残**、**降智**、**虚假**的评论，因为 Giscus 的评论需要通过 GitHub 授权登录才能发布，所以这算是一个初级发布门槛。 + +如果真的有，那么确实很不幸了。你可以通过**删评论**的方法解决。 +也可以通过 [配置 Akismet](https://www.2x.nz/posts/giscus-akismet#pei-zhi-akismet) 等来实现自动化反垃圾评论。但是 Akismet 的效果据说十分鸡肋。 \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e132d6a..7804500 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -71,9 +71,6 @@ const bannerOffsetByPosition = { const bannerOffset = bannerOffsetByPosition[siteConfig.banner.position || "center"]; - -// 周日判断 -const isSunday = new Date().getDay() === 0; --- @@ -102,14 +99,10 @@ const isSunday = new Date().getDay() === 0; + + + - { isSunday && - - } - - { !isSunday && - - } {favicons.map(favicon => ( @@ -145,6 +138,13 @@ const isSunday = new Date().getDay() === 0; //const hue = localStorage.getItem('hue') || configHue; document.documentElement.style.setProperty('--hue', hue); + // 设置主题色（新增这部分） + const themeColor = currentDay === 0 ? '#9e8eef' : '#48823b'; + const metaThemeColor = document.getElementById('theme-color-meta'); + if (metaThemeColor) { + metaThemeColor.setAttribute('content', themeColor); + } + // calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100)); offset = offset - offset % 4; @@ -622,4 +622,4 @@ if (window.swup) { } else { document.addEventListener("swup:enable", setup) } - + \ No newline at end of file diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro index ba7b8f8..6c6d772 100644 --- a/src/layouts/MainGridLayout.astro +++ b/src/layouts/MainGridLayout.astro @@ -40,12 +40,6 @@ const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem)` : "5.5rem"; -// 周日判断 -const isSunday = new Date().getDay() === 0; - -// 周六判断 -const isSaturday = new Date().getDay() === 6; - --- @@ -58,26 +52,22 @@ const isSaturday = new Date().getDay() === 6; - - - - -{isSunday && siteConfig.banner.enable && + +
+ + \ No newline at end of file diff --git a/src/pages/misans.astro b/src/pages/misans.astro index d9858f8..326a80f 100644 --- a/src/pages/misans.astro +++ b/src/pages/misans.astro @@ -22,4 +22,20 @@ const { Content } = await render(aboutPost); + \ No newline at end of file diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro index cb48398..56bf8e6 100644 --- a/src/pages/posts/[...slug].astro +++ b/src/pages/posts/[...slug].astro @@ -150,5 +150,22 @@ const customcover = entry.data.customcover; } - - + + + + \ No newline at end of file