docs(pages): 将 Giscus 评论插件添加到博客
2. fix(config): 修复特殊日期判断失败的问题 3. feat(giscus): 加入 Giscus 评论系统
@@ -27,5 +27,6 @@
|
|||||||
},
|
},
|
||||||
"[json]": {
|
"[json]": {
|
||||||
"editor.defaultFormatter": "vscode.json-language-features"
|
"editor.defaultFormatter": "vscode.json-language-features"
|
||||||
}
|
},
|
||||||
|
"markdown.validate.enabled": false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import { url } from "../../utils/url-utils";
|
|||||||
import ImageWrapper from "../misc/ImageWrapper.astro";
|
import ImageWrapper from "../misc/ImageWrapper.astro";
|
||||||
|
|
||||||
const config = profileConfig;
|
const config = profileConfig;
|
||||||
const isSunday = new Date().getDay() === 0;
|
|
||||||
---
|
---
|
||||||
<div class="card-base p-3">
|
<div class="card-base p-3">
|
||||||
<div class="text-center text-sm text-neutral-500 dark:text-neutral-400 border-neutral-100 dark:border-neutral-700">一言 / hitokoto</div>
|
<div class="text-center text-sm text-neutral-500 dark:text-neutral-400 border-neutral-100 dark:border-neutral-700">一言 / hitokoto</div>
|
||||||
@@ -30,15 +29,20 @@ const isSunday = new Date().getDay() === 0;
|
|||||||
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
|
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
|
||||||
|
|
||||||
<!-- bio: 名言部分 -->
|
<!-- bio: 名言部分 -->
|
||||||
<!-- 星期日 -->
|
<!--
|
||||||
|
|
||||||
{ isSunday &&
|
{ isSunday &&
|
||||||
<div class="text-center text-neutral-400 mb-2.5 transition">调整你的步伐,跟着节拍摇摆,举起双手拥抱你想成为的人</div>
|
<div class="text-center text-neutral-400 mb-2.5 transition">调整你的步伐,跟着节拍摇摆,举起双手拥抱你想成为的人</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
<!-- 其他日 -->
|
|
||||||
{ !isSunday &&
|
{ !isSunday &&
|
||||||
<div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
|
<div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
|
||||||
}
|
}
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div class="text-center text-neutral-400 mb-2.5 transition" id="bio"></div>
|
||||||
|
|
||||||
|
|
||||||
<div class="flex gap-2 justify-center mb-1">
|
<div class="flex gap-2 justify-center mb-1">
|
||||||
{config.links.length > 1 && config.links.map(item =>
|
{config.links.length > 1 && config.links.map(item =>
|
||||||
@@ -71,17 +75,64 @@ const isSunday = new Date().getDay() === 0;
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 星期日 -->
|
<!-- 星期日等 -->
|
||||||
{ isSunday &&
|
<div id="sunday-music"></div>
|
||||||
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=250 height=86 src="https://music.163.com/outchain/player?type=2&id=2155423467&auto=0&height=66"></iframe>
|
|
||||||
}
|
|
||||||
|
|
||||||
<!-- 其他日 -->
|
|
||||||
{ !isSunday &&
|
|
||||||
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=250 height=86 src="https://music.163.com/outchain/player?type=2&id=2608813264&auto=0&height=66"></iframe>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 名言 -->
|
||||||
|
<script>
|
||||||
|
const bio = document.getElementById("bio");
|
||||||
|
if (bio){
|
||||||
|
const isSunday = new Date().getDay() === 0;
|
||||||
|
if (isSunday){
|
||||||
|
bio.textContent = "调整你的步伐,跟着节拍摇摆,举起双手拥抱你想成为的人"
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
bio.textContent = "永远相信美好的事情即将发生";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 音乐 -->
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
const sundayMusicElement = document.getElementById('sunday-music');
|
||||||
|
// 检查是否已经存在播放器
|
||||||
|
if (sundayMusicElement && sundayMusicElement.querySelector('iframe')) {
|
||||||
|
return; // 如果已经存在播放器,则不再添加
|
||||||
|
}
|
||||||
|
const isSunday = new Date().getDay() === 0;
|
||||||
|
if (!isSunday){
|
||||||
|
const iframe = document.createElement('iframe');
|
||||||
|
iframe.setAttribute('frameborder', '0');
|
||||||
|
iframe.setAttribute('marginwidth', '0');
|
||||||
|
iframe.setAttribute('marginheight', '0');
|
||||||
|
iframe.width = '250';
|
||||||
|
iframe.height = '86';
|
||||||
|
iframe.src = 'https://music.163.com/outchain/player?type=2&id=2608813264&auto=0&height=66';
|
||||||
|
const sundayMusicElement = document.getElementById('sunday-music');
|
||||||
|
if (sundayMusicElement) {
|
||||||
|
sundayMusicElement.appendChild(iframe);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
const iframe = document.createElement('iframe');
|
||||||
|
iframe.setAttribute('frameborder', '0');
|
||||||
|
iframe.setAttribute('marginwidth', '0');
|
||||||
|
iframe.setAttribute('marginheight', '0');
|
||||||
|
iframe.width = '250';
|
||||||
|
iframe.height = '86';
|
||||||
|
iframe.src = 'https://music.163.com/outchain/player?type=2&id=2155423467&auto=0&height=66';
|
||||||
|
|
||||||
|
const sundayMusicElement = document.getElementById('sunday-music');
|
||||||
|
if (sundayMusicElement) {
|
||||||
|
sundayMusicElement.appendChild(iframe);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 傻逼脑子 Merge 的时候怎么把这个删了
|
// 傻逼脑子 Merge 的时候怎么把这个删了
|
||||||
@@ -152,7 +203,6 @@ fetch("https://v1.hitokoto.cn")
|
|||||||
// 页面加载完成后获取统计数据
|
// 页面加载完成后获取统计数据
|
||||||
document.addEventListener('DOMContentLoaded', loadSiteStats);
|
document.addEventListener('DOMContentLoaded', loadSiteStats);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- 获取 Commit 信息 via API -->
|
<!-- 获取 Commit 信息 via API -->
|
||||||
<script>
|
<script>
|
||||||
async function loadCommitStats() {
|
async function loadCommitStats() {
|
||||||
|
|||||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 54 KiB |
@@ -0,0 +1,190 @@
|
|||||||
|
---
|
||||||
|
title: 将 Giscus 评论插件添加到博客
|
||||||
|
published: 2025-08-17
|
||||||
|
tags: ["插件", "网站"]
|
||||||
|
description: 博客没有评论区?来试试 Giscus 吧!
|
||||||
|
image: ../assets/images/giscus-preview.png
|
||||||
|
customcover: ../assets/images/giscus-no-content.png
|
||||||
|
showcover: false
|
||||||
|
category: 教程
|
||||||
|
---
|
||||||
|
|
||||||
|
# 前言
|
||||||
|
如果你的静态博客没有评论区,又不想自己搭建一个评论系统,那么 Giscus 就是一个不错的选择。
|
||||||
|
接下来就手把手教你添加这个[插](https://giscus.app/client.js)件并配置它。
|
||||||
|
|
||||||
|
:::warning[注意]
|
||||||
|
接下来的教程将以 Astro 网站为例子。由于 Giscus 使用 JavaScript 脚本,所以大多数博客网站都能顺利接入。
|
||||||
|
如果你用的博客是 [Astro](https://astro.build) 或以它为架构的 [Fuwari](https://github.com/saicaca/fuwari),那么这篇文章或许 99% 适合。
|
||||||
|
:::
|
||||||
|
|
||||||
|
# 需求
|
||||||
|
1. 一个 [GitHub](https://github.com) 账号。
|
||||||
|
|
||||||
|
# 配置 Giscus
|
||||||
|
## 在博客仓库存放评论
|
||||||
|
:::warning[注意]
|
||||||
|
如果你博客是**开源的**(选择这种方法**必须**要开源!如果**不想开源**可以选择存放评论于 [#在专用仓库存放评论](#在专用仓库存放评论) ),那么我更推荐你直接跟下面这个步骤配置使用前的安装,这么做是为了**更好地集中管理关于博客的东西**。
|
||||||
|
当然,如果你想分开来存放,把**博客源代码**和**评论区的内容**分开,那么请选择使用第二种方法,然后这里的内容可以不用看了,可以前往 [#在专用仓库存放评论](#在专用仓库存放评论) 查看对应的方法。
|
||||||
|
:::
|
||||||
|
|
||||||
|
1. 打开 GitHub 上你博客的仓库地址,点击顶部 **Settings**(设置),拉到 **Features**(功能),选择 **Discussions** 前面的小方格,点击一下,打开 Discussions 功能。等到出现一个小勾即代表开启了 Discussions 讨论功能。 
|
||||||
|
2. 点击打开 https://github.com/apps/giscus ,选择带色按钮 Install ,将其安装在你的 GitHub 个人账户中(如果你博客仓库在别的组织,请选择安装到**组织**)。
|
||||||
|
3. 安装完毕,可以跳到 [#获取专用代码](#获取专用代码) 查看需要插入的 JS 代码了。
|
||||||
|
|
||||||
|
## 在专用仓库存放评论
|
||||||
|
:::tip[提示]
|
||||||
|
这是个通用的方法,你依然可以将其设置为你博客评论存放的仓库,即使你的博客是开源的;但是如果你的博客不开源,那么请务必使用这个方法。
|
||||||
|
注意:使用这种方法并不能**更好地集中管理关于博客的东西**,但是能防止某些脑残人物的评论污染了你的主仓库。
|
||||||
|
:::
|
||||||
|
|
||||||
|
1. 打开 https://github.com/new ,创建一个新的仓库。
|
||||||
|
2. 在新仓库内,点击顶部 **Settings**(设置),拉到 **Features**(功能),选择 **Discussions** 前面的小方格,点击一下,打开 Discussions 功能。等到出现一个小勾即代表开启了 Discussions 讨论功能。 
|
||||||
|
3. 点击打开 https://github.com/apps/giscus ,选择带色按钮 Install ,将其安装在你的 GitHub 个人账户中(如果你博客仓库在别的组织,请选择安装到**组织**)。
|
||||||
|
4. 安装完毕。
|
||||||
|
|
||||||
|
## 获取专用代码
|
||||||
|
打开 https://giscus.app/zh-CN ,在其页面进行必要的配置:
|
||||||
|
- 语言:如果你的博客不搞 i18n 国际化,那我推荐选择 **简体中文**(博客使用的语言)。反之推荐选择 **English**。
|
||||||
|
- 仓库:如果你选择上面第一种方案(在博客仓库内),那么就填写**你博客仓库地址**(以 `用户名/仓库名` 形式填写,填你自己的。比如 `Ad-closeNN/blog-fuwari`)。如果是新的专用仓库,那么就填写**新的专用仓库地址**,格式同理。成功了为如图所示: 
|
||||||
|
- 页面 ↔️ discussion 映射关系:这个有说法。如果你博客没有很多重复标题的页面,**且不更换文章标题**,推荐选择 **Discussion 的标题包含页面的 `<title>`**,这将会以 `页面标题 -或/或其他分隔符 网站名` 为 title 开一个新讨论。如:  其他如 `pathname`,将会把 `/post/xxx` 显示出来。但是显示效果(特别是中文路径)可能没那么好?
|
||||||
|
参考&图片原出处: https://www.2x.nz/posts/you-is-me-huh/ 
|
||||||
|
- Discussion 分类:推荐选择 **General**。如果你只想让访客在博客发布评论,就选择 **Announcements**。这样即使在
|
||||||
|
- 特性:推荐启用 `启用主帖子上的反应(reaction)` `将评论框放在评论上方` `懒加载评论`。
|
||||||
|
- 其他无关紧要的请自行配置。
|
||||||
|
|
||||||
|
配置完成后,将会获得一串**独特的** JavaScript 代码(例如下面的)。将其复制下来:
|
||||||
|
```js
|
||||||
|
<script src="https://giscus.app/client.js"
|
||||||
|
data-repo="Ad-closeNN/blog-friends"
|
||||||
|
data-repo-id="R_kgDOPb5ZJw"
|
||||||
|
data-category="Announcements"
|
||||||
|
data-category-id="DIC_kwDOPb5ZJ84CuPmR"
|
||||||
|
data-mapping="title"
|
||||||
|
data-strict="0"
|
||||||
|
data-reactions-enabled="1"
|
||||||
|
data-emit-metadata="0"
|
||||||
|
data-input-position="top"
|
||||||
|
data-theme="preferred_color_scheme"
|
||||||
|
data-lang="zh-CN"
|
||||||
|
data-loading="lazy"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
async>
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 插入代码
|
||||||
|
打开 `src/pages/posts/[..slug].astro`,在最下方的 `</MainGridLayout>` 的上面插入你在 Giscus 复制的 JavaScript 代码:
|
||||||
|
```astro title=src/pages/posts/[..slug].astro ins={14-29} startLineNumber=143
|
||||||
|
<a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
|
||||||
|
class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
|
||||||
|
{entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
|
||||||
|
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
|
||||||
|
{entry.data.prevTitle}
|
||||||
|
</div>
|
||||||
|
<Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
|
||||||
|
</div>}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 上面是你的其他原本的代码 -->
|
||||||
|
<!-- 评论区在这 -->
|
||||||
|
<script src="https://giscus.app/client.js"
|
||||||
|
data-repo="Ad-closeNN/blog-friends"
|
||||||
|
data-repo-id="R_kgDOPb5ZJw"
|
||||||
|
data-category="General"
|
||||||
|
data-category-id="DIC_kwDOPb5ZJ84CuPmR"
|
||||||
|
data-mapping="title"
|
||||||
|
data-strict="0"
|
||||||
|
data-reactions-enabled="1"
|
||||||
|
data-emit-metadata="0"
|
||||||
|
data-input-position="top"
|
||||||
|
data-theme="preferred_color_scheme"
|
||||||
|
data-lang="zh-CN"
|
||||||
|
data-loading="lazy"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
async>
|
||||||
|
</script>
|
||||||
|
</MainGridLayout>
|
||||||
|
```
|
||||||
|
|
||||||
|
放在这个文件 `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);
|
||||||
|
---
|
||||||
|
<MainGridLayout title={i18n(I18nKey.about)} description="关于">
|
||||||
|
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
|
||||||
|
<div class="card-base z-10 px-9 py-6 relative w-full ">
|
||||||
|
<Markdown class="mt-2">
|
||||||
|
<Content />
|
||||||
|
</Markdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<!-- 评论区 -->
|
||||||
|
<script src="https://giscus.app/client.js"
|
||||||
|
data-repo="Ad-closeNN/blog-friends"
|
||||||
|
data-repo-id="R_kgDOPb5ZJw"
|
||||||
|
data-category="General"
|
||||||
|
data-category-id="DIC_kwDOPb5ZJ84CuPmR"
|
||||||
|
data-mapping="title"
|
||||||
|
data-strict="0"
|
||||||
|
data-reactions-enabled="1"
|
||||||
|
data-emit-metadata="0"
|
||||||
|
data-input-position="top"
|
||||||
|
data-theme="preferred_color_scheme"
|
||||||
|
data-lang="zh-CN"
|
||||||
|
data-loading="lazy"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
async>
|
||||||
|
</script>
|
||||||
|
</MainGridLayout>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 配置网站源 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 切断评论区的连接: 
|
||||||
|
|
||||||
|
# 反垃圾评论
|
||||||
|
一般来说不会有人无缘无故就对你的文章评论区发布**脑残**、**降智**、**虚假**的评论,因为 Giscus 的评论需要通过 GitHub 授权登录才能发布,所以这算是一个初级发布门槛。
|
||||||
|
|
||||||
|
如果真的有,那么确实很不幸了。你可以通过**删评论**的方法解决。
|
||||||
|
也可以通过 [配置 Akismet](https://www.2x.nz/posts/giscus-akismet#pei-zhi-akismet) 等来实现自动化反垃圾评论。但是 Akismet 的效果据说十分鸡肋。
|
||||||
@@ -71,9 +71,6 @@ const bannerOffsetByPosition = {
|
|||||||
const bannerOffset =
|
const bannerOffset =
|
||||||
bannerOffsetByPosition[siteConfig.banner.position || "center"];
|
bannerOffsetByPosition[siteConfig.banner.position || "center"];
|
||||||
|
|
||||||
|
|
||||||
// 周日判断
|
|
||||||
const isSunday = new Date().getDay() === 0;
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
@@ -103,13 +100,9 @@ const isSunday = new Date().getDay() === 0;
|
|||||||
<meta name="twitter:title" content={pageTitle}>
|
<meta name="twitter:title" content={pageTitle}>
|
||||||
<meta name="twitter:description" content={description || pageTitle}>
|
<meta name="twitter:description" content={description || pageTitle}>
|
||||||
|
|
||||||
{ isSunday &&
|
|
||||||
<meta name="theme-color" content="#9e8eef" />
|
|
||||||
}
|
|
||||||
|
|
||||||
{ !isSunday &&
|
<meta id="theme-color-meta" name="theme-color" content="#48823b" />
|
||||||
<meta name="theme-color" content="#48823b" />
|
|
||||||
}
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
{favicons.map(favicon => (
|
{favicons.map(favicon => (
|
||||||
@@ -145,6 +138,13 @@ const isSunday = new Date().getDay() === 0;
|
|||||||
//const hue = localStorage.getItem('hue') || configHue;
|
//const hue = localStorage.getItem('hue') || configHue;
|
||||||
document.documentElement.style.setProperty('--hue', hue);
|
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
|
// 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));
|
let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100));
|
||||||
offset = offset - offset % 4;
|
offset = offset - offset % 4;
|
||||||
|
|||||||
@@ -40,12 +40,6 @@ const mainPanelTop = siteConfig.banner.enable
|
|||||||
? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem)`
|
? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem)`
|
||||||
: "5.5rem";
|
: "5.5rem";
|
||||||
|
|
||||||
// 周日判断
|
|
||||||
const isSunday = new Date().getDay() === 0;
|
|
||||||
|
|
||||||
// 周六判断
|
|
||||||
const isSaturday = new Date().getDay() === 6;
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}>
|
<Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}>
|
||||||
@@ -58,26 +52,22 @@ const isSaturday = new Date().getDay() === 6;
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 控制 Banner -->
|
<!-- Banner - 渲染两套,客户端控制显示 -->
|
||||||
<!-- Banner -->
|
<!-- 默认banner -->
|
||||||
|
{siteConfig.banner.enable && <div id="banner-wrapper-default" class={`absolute z-10 w-full transition duration-700 overflow-hidden`} style={`top: -${BANNER_HEIGHT_EXTEND}vh`}>
|
||||||
<!-- 周日版本 -->
|
<ImageWrapper id="banner-default" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0"]}
|
||||||
{isSunday && siteConfig.banner.enable && <div id="banner-wrapper" class={`absolute z-10 w-full transition duration-700 overflow-hidden`} style={`top: -${BANNER_HEIGHT_EXTEND}vh`}>
|
src={siteConfig.banner.src} position={siteConfig.banner.position}>
|
||||||
<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
|
|
||||||
src={"/assets/132398672_p0_master1200_edited.jpg"} position={siteConfig.banner.position}
|
|
||||||
>
|
|
||||||
</ImageWrapper>
|
</ImageWrapper>
|
||||||
</div>}
|
</div>}
|
||||||
|
|
||||||
<!-- 其他版本 -->
|
<!-- 周日banner -->
|
||||||
<!-- 使用 ! 取反号取反 false 为 true -->
|
{siteConfig.banner.enable && <div id="banner-wrapper-sunday" class={`absolute z-10 w-full transition duration-700 overflow-hidden hidden`} style={`top: -${BANNER_HEIGHT_EXTEND}vh`}>
|
||||||
{!isSunday && siteConfig.banner.enable && <div id="banner-wrapper" class={`absolute z-10 w-full transition duration-700 overflow-hidden`} style={`top: -${BANNER_HEIGHT_EXTEND}vh`}>
|
<ImageWrapper id="banner-sunday" alt="Sunday banner image" class:list={["object-cover h-full transition duration-700 opacity-0"]}
|
||||||
<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
|
src={"/assets/132398672_p0_master1200_edited.jpg"} position={siteConfig.banner.position}>
|
||||||
src={siteConfig.banner.src} position={siteConfig.banner.position}
|
|
||||||
>
|
|
||||||
</ImageWrapper>
|
</ImageWrapper>
|
||||||
</div>}
|
</div>}
|
||||||
|
|
||||||
|
|
||||||
<!-- Main content -->
|
<!-- Main content -->
|
||||||
<div class="absolute w-full z-30 pointer-events-none" style={`top: ${mainPanelTop}`}>
|
<div class="absolute w-full z-30 pointer-events-none" style={`top: ${mainPanelTop}`}>
|
||||||
<!-- The pointer-events-none here prevent blocking the click event of the TOC -->
|
<!-- The pointer-events-none here prevent blocking the click event of the TOC -->
|
||||||
@@ -85,40 +75,28 @@ const isSaturday = new Date().getDay() === 6;
|
|||||||
<div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]
|
<div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]
|
||||||
mx-auto gap-4 px-0 md:px-4"
|
mx-auto gap-4 px-0 md:px-4"
|
||||||
>
|
>
|
||||||
<!-- Banner image credit -->
|
<!-- Banner credits - 渲染两套 -->
|
||||||
<!-- 周日版本 -->
|
<!-- 默认banner credit -->
|
||||||
{isSunday && hasBannerCredit && <a href={"https://www.pixiv.net/artworks/132398672"} id="banner-credit" target="_blank" rel="noopener" aria-label="Visit image source"
|
{hasBannerCredit && <a href={siteConfig.banner.credit.url} id="banner-credit-default" target="_blank" rel="noopener" aria-label="Visit image source"
|
||||||
class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
|
class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
|
||||||
"px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
|
"px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}>
|
||||||
>
|
<Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded"></Icon>
|
||||||
<Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
|
<div class="text-white/75 text-xs">{siteConfig.banner.credit.text}</div>
|
||||||
<div class="text-white/75 text-xs">{"Pixiv @KiraraShss"}</div>
|
|
||||||
<Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0",
|
<Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0",
|
||||||
{"group-hover:opacity-100": hasBannerLink}]}
|
{"group-hover:opacity-100": hasBannerLink}]} name="fa6-solid:arrow-up-right-from-square">
|
||||||
name="fa6-solid:arrow-up-right-from-square">
|
|
||||||
</Icon>
|
</Icon>
|
||||||
</a>}
|
</a>}
|
||||||
|
|
||||||
<!-- 其他版本 -->
|
<!-- 周日banner credit -->
|
||||||
{!isSunday && hasBannerCredit && <a href={siteConfig.banner.credit.url} id="banner-credit" target="_blank" rel="noopener" aria-label="Visit image source"
|
{hasBannerCredit && <a href="https://www.pixiv.net/artworks/132398672" id="banner-credit-sunday" target="_blank" rel="noopener" aria-label="Visit image source"
|
||||||
class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
|
class:list={["hidden group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
|
||||||
"px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
|
"px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}>
|
||||||
>
|
<Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded"></Icon>
|
||||||
<Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
|
<div class="text-white/75 text-xs">Pixiv @KiraraShss</div>
|
||||||
<div class="text-white/75 text-xs">{siteConfig.banner.credit.text}</div>
|
|
||||||
<Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0",
|
<Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0",
|
||||||
{"group-hover:opacity-100": hasBannerLink}]}
|
{"group-hover:opacity-100": hasBannerLink}]} name="fa6-solid:arrow-up-right-from-square">
|
||||||
name="fa6-solid:arrow-up-right-from-square">
|
|
||||||
</Icon>
|
</Icon>
|
||||||
</a>}
|
</a>}
|
||||||
{isSaturday && (
|
|
||||||
<script>
|
|
||||||
if (!localStorage.getItem("hasSeenPopup")) {
|
|
||||||
alert("网站可能会在每个周日变个样...\n点击确认后将不再显示此弹窗");
|
|
||||||
localStorage.setItem("hasSeenPopup", "true"); // 记录已弹出
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
)}
|
|
||||||
<SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}></SideBar>
|
<SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}></SideBar>
|
||||||
|
|
||||||
<main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden">
|
<main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden">
|
||||||
@@ -161,4 +139,55 @@ const isSaturday = new Date().getDay() === 6;
|
|||||||
{!siteConfig.toc.enable && <div id="toc"></div>}
|
{!siteConfig.toc.enable && <div id="toc"></div>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const currentDay = new Date().getDay();
|
||||||
|
const isSunday = currentDay === 0;
|
||||||
|
const isSaturday = currentDay === 6;
|
||||||
|
|
||||||
|
// 控制banner显示
|
||||||
|
const defaultBanner = document.getElementById('banner-wrapper-default');
|
||||||
|
const sundayBanner = document.getElementById('banner-wrapper-sunday');
|
||||||
|
const defaultCredit = document.getElementById('banner-credit-default');
|
||||||
|
const sundayCredit = document.getElementById('banner-credit-sunday');
|
||||||
|
|
||||||
|
if (isSunday) {
|
||||||
|
// 显示周日版本
|
||||||
|
if (defaultBanner) defaultBanner.style.display = 'none';
|
||||||
|
if (sundayBanner) {
|
||||||
|
sundayBanner.style.display = 'block';
|
||||||
|
sundayBanner.id = 'banner-wrapper'; // 添加这行,设置正确的ID
|
||||||
|
// 移除图片透明度,让图片显示出来
|
||||||
|
}
|
||||||
|
const sundayImg = sundayBanner.querySelector('#banner-sunday');
|
||||||
|
if (sundayImg) {
|
||||||
|
sundayImg.id = 'banner'; // 添加这行,设置正确的ID
|
||||||
|
sundayImg.classList.remove('opacity-0');
|
||||||
|
sundayImg.classList.add('opacity-100');
|
||||||
|
}
|
||||||
|
if (defaultCredit) defaultCredit.classList.add('hidden');
|
||||||
|
if (sundayCredit) sundayCredit.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
// 显示默认版本
|
||||||
|
if (defaultBanner) {
|
||||||
|
defaultBanner.style.display = 'block';
|
||||||
|
defaultBanner.id = 'banner-wrapper';
|
||||||
|
// 修改这里,直接使用原始ID查询
|
||||||
|
const defaultBannerInner = document.getElementById('banner-default');
|
||||||
|
if (defaultBannerInner) {
|
||||||
|
defaultBannerInner.id = 'banner';
|
||||||
|
defaultBannerInner.classList.remove('opacity-0');
|
||||||
|
defaultBannerInner.classList.add('opacity-100');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 周六弹窗逻辑(只在真正的周六显示)
|
||||||
|
if (isSaturday && !localStorage.getItem("hasSeenPopup")) {
|
||||||
|
alert("网站可能会在每个周日变个样...\n点击确认后将不再显示此弹窗");
|
||||||
|
localStorage.setItem("hasSeenPopup", "true");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@@ -22,4 +22,23 @@ const { Content } = await render(aboutPost);
|
|||||||
</Markdown>
|
</Markdown>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<!-- 评论区 -->
|
||||||
|
<script src="https://giscus.app/client.js"
|
||||||
|
data-repo="Ad-closeNN/blog-friends"
|
||||||
|
data-repo-id="R_kgDOPb5ZJw"
|
||||||
|
data-category="General"
|
||||||
|
data-category-id="DIC_kwDOPb5ZJ84CuPmR"
|
||||||
|
data-mapping="title"
|
||||||
|
data-strict="0"
|
||||||
|
data-reactions-enabled="1"
|
||||||
|
data-emit-metadata="0"
|
||||||
|
data-input-position="top"
|
||||||
|
data-theme="preferred_color_scheme"
|
||||||
|
data-lang="zh-CN"
|
||||||
|
data-loading="lazy"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
async>
|
||||||
|
</script>
|
||||||
</MainGridLayout>
|
</MainGridLayout>
|
||||||
@@ -22,4 +22,20 @@ const { Content } = await render(aboutPost);
|
|||||||
</Markdown>
|
</Markdown>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="https://giscus.app/client.js"
|
||||||
|
data-repo="Ad-closeNN/blog-friends"
|
||||||
|
data-repo-id="R_kgDOPb5ZJw"
|
||||||
|
data-category="General"
|
||||||
|
data-category-id="DIC_kwDOPb5ZJ84CuPmR"
|
||||||
|
data-mapping="title"
|
||||||
|
data-strict="0"
|
||||||
|
data-reactions-enabled="1"
|
||||||
|
data-emit-metadata="0"
|
||||||
|
data-input-position="top"
|
||||||
|
data-theme="preferred_color_scheme"
|
||||||
|
data-lang="zh-CN"
|
||||||
|
data-loading="lazy"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
async>
|
||||||
|
</script>
|
||||||
</MainGridLayout>
|
</MainGridLayout>
|
||||||
@@ -151,4 +151,21 @@ const customcover = entry.data.customcover;
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 评论区 -->
|
||||||
|
<script src="https://giscus.app/client.js"
|
||||||
|
data-repo="Ad-closeNN/blog-friends"
|
||||||
|
data-repo-id="R_kgDOPb5ZJw"
|
||||||
|
data-category="General"
|
||||||
|
data-category-id="DIC_kwDOPb5ZJ84CuPmR"
|
||||||
|
data-mapping="title"
|
||||||
|
data-strict="0"
|
||||||
|
data-reactions-enabled="1"
|
||||||
|
data-emit-metadata="0"
|
||||||
|
data-input-position="top"
|
||||||
|
data-theme="preferred_color_scheme"
|
||||||
|
data-lang="zh-CN"
|
||||||
|
data-loading="lazy"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
async>
|
||||||
|
</script>
|
||||||
</MainGridLayout>
|
</MainGridLayout>
|
||||||