功能实现#

1.自适应Giscus评论区
1.背景图及透明卡片
2.文章置顶
3.文章帮助反馈
4.右上角友链+赞助+统计

至于什么时候更新这篇文章？ ps: 跟随本站魔改同步更新

ps: 文章太过粗略，不会请自行查教程理解

自适应Giscus评论区#

Giscus是利用 GitHub Discussions 实现的评论系统

1.前往GitHub创建一个公开仓库，否则访客将无法查看

在仓库设置中启用 Discussion功能

前往Giscus进行配置
填写用户名/仓库名
特性:✅将评论框放在评论上方 ✅懒加载评论
其他保持默认即可

配置好之后，下方会自动生成对应JS代码，复制下来保存，接下来我们要修改自适应㳀色/深色，将刚刚复制的JS替换，在加上 data-theme这行

2.在src/pages/posts目录下创建Giscus.svelte文件

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-theme="preferred_color_scheme"
14
        data-lang="zh-CN"
15
        crossorigin="anonymous"
16
        async>
17
    </script>
18
</section>
19

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

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

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

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

3.在 src\pages\posts\[...slug].astro中引入 Giscus 组件，在前5行插入既可

1
import Giscus from "../../pages/Giscus.svelte"

在下引入组件就完成了，不知道在哪里可以搜索关键词

1
{licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
2

3
<Giscus client:only="svelte"></Giscus>

2.背景图及透明卡片#

检测背景图片加载状态，成功加载后启用透明效果

修改点 : `/src/layouts/Layout.astro`#

1
  document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
2

3
    const bgUrl = getComputedStyle(document.documentElement).getPropertyValue('--bg-url').trim();
4
    const bgEnable = getComputedStyle(document.documentElement).getPropertyValue('--bg-enable').trim();
5
    if (bgUrl && bgUrl !== 'none' && bgEnable === '1') {
6
    const img = new Image();
7
    const urlMatch = bgUrl.match(/url\(["']?([^"')]+)["']?\)/);
8
    if (urlMatch) {
9
      img.onload = function() {
10
        document.body.classList.add('bg-loaded');
11
        document.documentElement.style.setProperty('--card-bg', 'var(--card-bg-transparent)');
12
        document.documentElement.style.setProperty('--float-panel-bg', 'var(--float-panel-bg-transparent)');
13
      };
14
      img.onerror = function() {
15
        console.warn('Background image failed to load, keeping cards opaque');
16
      };
17
      img.src = urlMatch[1];
18
    }
19
    }
20

21
</script>
22
<style define:vars={{
23
  configHue,
24
  'page-width': `${PAGE_WIDTH}rem`,
25

26
  'bg-url': siteConfig.background.src ? `url(${siteConfig.background.src})` : 'none',
27
  'bg-enable': siteConfig.background.enable ? '1' : '0',
28
  'bg-position': siteConfig.background.position || 'center',
29
  'bg-size': siteConfig.background.size || 'cover',
30
  'bg-repeat': siteConfig.background.repeat || 'no-repeat',
31
  'bg-attachment': siteConfig.background.attachment || 'fixed',
32
  'bg-opacity': (siteConfig.background.opacity || 0.3).toString()
33
 }}>
34
  :root {
35
    --bg-url: var(--bg-url);
36
    --bg-enable: var(--bg-enable);
37
    --bg-position: var(--bg-position);
38
    --bg-size: var(--bg-size);
39
    --bg-repeat: var(--bg-repeat);
40
    --bg-attachment: var(--bg-attachment);
41
    --bg-opacity: var(--bg-opacity);
42
  }
43

44
  /* Background image configuration */
45
  body {
46
    --bg-url: var(--bg-url);
47
    --bg-enable: var(--bg-enable);
48
    --bg-position: var(--bg-position);
49
    --bg-size: var(--bg-size);
50
    --bg-repeat: var(--bg-repeat);
51
    --bg-attachment: var(--bg-attachment);
52
    --bg-opacity: var(--bg-opacity);
53
  }
54

55
  body::before {
56
    content: '' !important;
57
    position: fixed !important;
58
    top: 0 !important;
59
    left: 0 !important;
60
    width: 100% !important;
61
    height: 100% !important;
62
    background-image: var(--bg-url) !important;
63
    background-position: var(--bg-position) !important;
64
    background-size: var(--bg-size) !important;
65
    background-repeat: var(--bg-repeat) !important;
66
    background-attachment: var(--bg-attachment) !important;
67
    opacity: 0 !important;
68
    pointer-events: none !important;
69
    z-index: -1 !important;
70
    display: block !important;
71
    transition: opacity 0.3s ease-in-out !important;
72
  }
73

74
  body.bg-loaded::before {
75
    opacity: calc(var(--bg-opacity) * var(--bg-enable)) !important;
76
  }
77

78
</style>  <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->

修改点 : `/src/types/config.ts`#

1
background: {
2
  enable: boolean;++   src: string;
3
  position?: "top" | "center" | "bottom";
4
  size?: "cover" | "contain" | "auto";
5
  repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
6
  attachment?: "fixed" | "scroll" | "local";
7
  opacity?: number;
8
};

修改点 : `/src/styles/variables.styl`#

1
--card-bg-transparent: hsl(var(--hue) 10% 10% / 0.6);
2
--float-panel-bg-transparent: hsl(var(--hue) 10% 10% / 0.6);

修改点 : `/src/config.ts`#

1
  background: {
2
  enable: true, // Enable background image
3
  src: "https://pic.2x.nz/?img=h", // Background image URL (supports HTTPS)
4
  position: "center", // Background position: 'top', 'center', 'bottom'
5
  size: "cover", // Background size: 'cover', 'contain', 'auto'
6
  repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'
7
  attachment: "fixed", // Background attachment: 'fixed', 'scroll', 'local'
8
  opacity: 0.5, // Background opacity (0-1)
9
},

3.加文章置顶#

修改点 : `/src/utils/content-utils.ts`#

1
const sorted = allBlogPosts.sort((a, b) => {
2

3
    // 如果一个是置顶一个不是置顶，置顶的排在前面
4
    if (a.data.pinned !== b.data.pinned) {
5
      return a.data.pinned ? -1 : 1;
6
    }
7
    // 都是置顶或都不是置顶，按发布日期时间排序（包含小时分钟秒）
8
    const dateA = new Date(a.data.published);
9
    const dateB = new Date(b.data.published);
10
    return dateA > dateB ? -1 : 1;
11
  });
12
  return sorted;
13
}

修改点 : `/src/components/PostCard.astro`#

1
const isPinned = entry.data.pinned === true;

修改点 : `/src/components/PostCard.astro`#

1
before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
2
">
3

4
 {isPinned && (
5
 <span class="inline-flex items-center mr-2 px-2 py-0.5 text-sm font-medium bg-[oklch(95%_0.2_var(--hue))] dark:bg-[oklch(25%_0.2_var(--hue))] text-[oklch(55%_0.2_var(--hue))] dark:text-[oklch(85%_0.2_var(--hue))] rounded">
6
     <Icon name="material-symbols:push-pin" class="mr-1 text-base" /> 置顶
7
 </span>
8
 )}

修改点 : `/src/pages/posts/[...slug].astro`#

1
    before:absolute before:top-[0.75rem] before:left-[-1.125rem]
2
">
3

4
         {entry.data.pinned && (
5
         <span class="inline-flex items-center mr-3 px-2.5 py-1 text-sm font-medium bg-[oklch(95%_0.2_var(--hue))] dark:bg-[oklch(25%_0.2_var(--hue))] text-[oklch(55%_0.2_var(--hue))] dark:text-[oklch(85%_0.2_var(--hue))] rounded">
6
             <Icon name="material-symbols:push-pin" class="mr-1.5 text-base" /> 置顶
7
         </span>
8
     )}

修改点 : `/src/content/config.ts`#

1
pinned: z.boolean().optional().default(false),

4.文章帮助反馈#

修改点 : `/src/pages/posts/[...slug].astro`#

1
    {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
2

3
     <!-- 文章帮助反馈区域 -->
4
     <div class="mb-4 p-3 rounded-lg bg-[var(--license-block-bg)] border border-[var(--line-divider)] onload-animation">
5
         <div class="flex items-center justify-between">
6
             <div class="flex items-center gap-2">
7
                 <div class="h-4 w-4 rounded bg-[var(--primary)] flex items-center justify-center">
8
                     <Icon name="material-symbols:help-outline" class="text-[0.75rem] text-white dark:text-black/70"></Icon>
9
                 </div>
10
                <p class="text-black/80 dark:text-white/80 text-sm">这篇文章是否对你有帮助？</p>
11
             </div>
12
             <div class="flex gap-2">
13
                 <a href="路径" class="group flex items-center gap-1 px-3 py-1.5 rounded bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)] text-[var(--btn-content)] text-xs font-medium transition-all active:scale-95">
14
                     <Icon name="material-symbols:contact-mail-outline" class="text-[0.875rem] group-hover:scale-110 transition-transform"></Icon>
15
                    联系
16
                 </a>
17
                 <a href="路径" class="group flex items-center gap-1 px-3 py-1.5 rounded bg-[var(--primary)] hover:bg-[oklch(0.65_0.16_var(--hue))] active:bg-[oklch(0.60_0.18_var(--hue))] text-white dark:text-black/80 text-xs font-medium transition-all active:scale-95">
18
                     <Icon name="material-symbols:favorite-outline" class="text-[0.875rem] group-hover:scale-110 transition-transform"></Icon>
19
                     赞助
20
              </a>
21
       </div>
22
 </div>
23
</div>

5.右上角友链+赞助+统计#

修改点 : `/src\config.ts`#

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    LinkPreset.About,
6
    {
7
      name: "友链",
8
      url: "/friends/",
9
      external: false,
10
    },
11
    {
12
      name: "赞助",
13
      url: "/donate/",
14
      external: false,
15
    },
16
    {
17
      name: "统计",
18
      url: "https://us.umami.is/share/xxxxxxxxx",
19
      external: true,
20
    },
21
    {
22
      name: "GitHub",
23
      url: "https://github.com/saicaca/fuwari",
24
      external: true,
25
    },
26
  ],
27
};

创建赞助文件写入修改参数#

赞助命名alipay.svg跟wechat.svg二维码svg格式放在/donate/会改的也可以其他地方随便

1
---
2
import MainGridLayout from "@layouts/MainGridLayout.astro";
3
import { Icon } from "astro-icon/components";
4
---
5

6
<MainGridLayout title="赞助支持">
7
    <div class="card-base p-6 md:p-8">
8
        <div class="flex items-center gap-2 mb-6">
9
            <div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
10
                <Icon name="material-symbols:favorite" class="text-[1.5rem]">
11
            </div>
12
            <h1 class="text-2xl font-bold text-black dark:text-white">赞助支持</h1>
13
        </div>
14

15
        <div class="mb-6">
16
            <p class="text-lg text-black/80 dark:text-white/80 mb-3">
17
                如果您觉得我的内容对您有帮助，欢迎通过以下方式支持我的创作。您的每一份支持都是我持续创作的动力！
18
            </p>
19
            <p class="text-sm text-black/60 dark:text-white/60">
20
                所有赞助将用于网站维护、服务器费用以及内容创作。
21
            </p>
22
        </div>
23

24
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6 max-w-4xl mx-auto">
25
            <!-- 支付宝 -->
26
            <div class="donate-card">
27
                <div class="flex items-center gap-3 mb-4">
28
                    <div class="h-10 w-10 rounded-lg bg-blue-500 flex items-center justify-center">
29
                        <Icon name="fa6-brands:alipay" class="text-[1.5rem] text-white">
30
                    </div>
31
                    <div>
32
                        <h3 class="text-lg font-bold text-black dark:text-white">支付宝</h3>
33
                        <p class="text-sm text-black/60 dark:text-white/60">扫码支付</p>
34
                    </div>
35
                </div>
36
                <div class="qr-code-placeholder">
37
                    <img src="/donate/alipay.svg" alt="支付宝二维码" class="w-48 h-48 mx-auto rounded-lg" />
38
                </div>
39
            </div>
40

41
            <!-- 微信支付 -->
42
            <div class="donate-card">
43
                <div class="flex items-center gap-3 mb-4">
44
                    <div class="h-10 w-10 rounded-lg bg-green-500 flex items-center justify-center">
45
                        <Icon name="fa6-brands:weixin" class="text-[1.5rem] text-white">
46
                    </div>
47
                    <div>
48
                        <h3 class="text-lg font-bold text-black dark:text-white">微信支付</h3>
49
                        <p class="text-sm text-black/60 dark:text-white/60">扫码支付</p>
50
                    </div>
51
                </div>
52
                <div class="qr-code-placeholder">
53
                    <img src="/donate/wechat.svg" alt="微信支付二维码" class="w-48 h-48 mx-auto rounded-lg" />
54
                </div>
55
            </div>
56
        </div>
57

58
        <br>
59

60
        <!-- 其他支持方式 -->
61
        <div class="card-base p-6 mb-6">
62
            <h2 class="text-xl font-bold text-black dark:text-white mb-3">其他支持方式</h2>
63
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
64
                <div class="support-card">
65
                    <div class="flex items-center gap-2 mb-2">
66
                        <Icon name="material-symbols:share" class="text-[1.2rem] text-[var(--primary)]">
67
                        <span class="font-semibold text-black dark:text-white">分享推荐</span>
68
                    </div>
69
                    <p class="text-sm text-black/60 dark:text-white/60">
70
                        将我的博客分享给更多朋友
71
                    </p>
72
                </div>
73

74
                <div class="support-card">
75
                    <div class="flex items-center gap-2 mb-2">
76
                        <Icon name="material-symbols:comment" class="text-[1.2rem] text-[var(--primary)]">
77
                        <span class="font-semibold text-black dark:text-white">留言互动</span>
78
                    </div>
79
                    <p class="text-sm text-black/60 dark:text-white/60">
80
                        在文章下方留下您的想法
81
                    </p>
82
                </div>
83

84
                <div class="support-card">
85
                    <div class="flex items-center gap-2 mb-2">
86
                        <Icon name="material-symbols:star" class="text-[1.2rem] text-[var(--primary)]">
87
                        <span class="font-semibold text-black dark:text-white">关注订阅</span>
88
                    </div>
89
                    <p class="text-sm text-black/60 dark:text-white/60">
90
                        订阅RSS或关注社交媒体
91
                    </p>
92
                </div>
93
            </div>
94
        </div>
95
        <div class="sponsors-section card-base p-6">
96
            <h2 class="text-xl font-bold text-black dark:text-white mb-3 flex items-center gap-2">
97
                <Icon name="material-symbols:group" class="text-[1.5rem] text-[var(--primary)]"></Icon>
98
                <span>已赞助的小伙伴</span>
99
            </h2>
100
            <p class="text-sm text-black/60 dark:text-white/60 mb-4">
101
            如果您已赞助，并且想加入赞助名单，请自行提交 <a target="_blank" href="mailto:242531778@qq.com" class="transition link text-[var(--primary)] font-medium underline">点击这里提交</a>
102
            </p>
103
            <div class="sponsors-grid">
104

105
                <div class="sponsor-card">
106
                    <div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
107
                        <div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
108
                          <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=242531778&spec=0" alt="" class="w-full h-full object-cover">
109
                        </div>
110
                        <div class="flex-1">
111
                            <h4 class="font-semibold text-black dark:text-white text-sm">ShiMahiru</h4>
112
                            <p class="text-xs text-black/60 dark:text-white/60">2025-09-1</p>
113
                        </div>
114
                        <div class="text-xs text-[var(--primary)] font-medium">100 ￥</div>
115
                    </div>
116
                </div>
117
            </div>
118
        </div>
119
    </div>
120
</MainGridLayout>
121

122
<style>
123
.donate-card {
124
    @apply flex flex-col p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10 hover:border-black/20 dark:hover:border-white/20 transition;
125
}
126

127
.support-card {
128
    @apply p-4 rounded-lg bg-[var(--card-bg)] hover:bg-black/5 dark:hover:bg-white/5 transition;
129
}
130

131
.qr-code-placeholder {
132
    @apply text-center;
133
}
134

135
.sponsors-section {
136
    @apply mt-6;
137
}
138

139
.sponsors-grid {
140
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
141
}
142

143
.sponsor-placeholder {
144
    @apply transition-all duration-200 hover:scale-105;
145
}
146

147
.sponsor-card {
148
    @apply transition-all duration-200 hover:shadow-md hover:scale-105;
149
}
150
.crypto-info {
151
    @apply space-y-3;
152
}
153

154
.wallet-address, .bybit-uid {
155
    @apply text-center;
156
}
157

158
.copy-btn {
159
    @apply transition-colors duration-200;
160
}
161

162
.copy-btn:hover {
163
    color: var(--primary);
164
    opacity: 0.8;
165
}
166
</style>
167

168
<script>
169
function copyToClipboard(text) {
170
    navigator.clipboard.writeText(text).then(function() {
171
        // 可以添加复制成功的提示
172
        alert('已复制到剪贴板');
173
    }, function(err) {
174
        console.error('复制失败: ', err);
175
    });
176
}
177
</script>

创建友链文件写入修改参数#

1
---
2
import MainGridLayout from "@layouts/MainGridLayout.astro";
3
import { Icon } from "astro-icon/components";
4
---
5

6
<MainGridLayout title="友链">
7
    <div class="card-base p-6 md:p-8">
8
        <div class="flex items-center gap-2 mb-6">
9
            <div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
10
                <Icon name="material-symbols:diversity-3" class="text-[1.5rem]">
11
            </div>
12
            <h1 class="text-2xl font-bold text-black dark:text-white">友链</h1>
13
        </div>
14
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
15
            <a href="https://vercel.com/" target="_blank" class="friend-card">
16
                <div class="flex items-center gap-2">
17
                    <img src="https://assets.vercel.com/image/upload/front/favicon/vercel/apple-touch-icon-256x256.png" loading="lazy" class="w-5 h-5 rounded">
18
                    <div class="font-bold text-black dark:text-white">Vercel</div>
19
                </div>
20
                <div class="text-sm text-black/50 dark:text-white/50">该网站由 Vercel 部署并加速。</div>
21
            </a>
22
        </div>
23

24
        <!-- 申请友链 -->
25
        <div class="sponsors-section mt-8">
26
          <h2 class="text-xl font-bold text-black dark:text-white mb-4 flex items-center gap-2">
27
            <Icon name="material-symbols:group" class="text-[1.5rem] text-[var(--primary)]"/>
28
            将您的网站加入本站友链
29
              </h2>
30
          <p class="text-sm text-black/60 dark:text-white/60">
31
            请自行提交 <a target="_blank" href="mailto:242531778@qq.com" class="transition link text-[var(--primary)] font-medium underline">点击这里提交</a>
32
          </p>
33
        <br>
34
    </div>
35

36
</MainGridLayout>
37

38
<style>
39
.friend-card {
40
    @apply flex flex-col gap-1 p-4 rounded-lg bg-[var(--card-bg)] hover:bg-black/5 dark:hover:bg-white/5 transition;
41
}
42
</style>

引入umami#

修改点 : `/src/layout/Layout.astro`#

1
<script defer src="https://us.umami.is//script.js" data-website-id="xxxxxxxxxxxxxxxx"></script>

这个去 umami 注册设置添加既可

功能实现#

自适应Giscus评论区#

2.背景图及透明卡片#

修改点 : /src/layouts/Layout.astro#

修改点 : /src/types/config.ts#

修改点 : /src/styles/variables.styl#

修改点 : /src/config.ts#

3.加文章置顶#

修改点 : /src/utils/content-utils.ts#

修改点 : /src/components/PostCard.astro#

修改点 : /src/components/PostCard.astro#

修改点 : /src/pages/posts/[...slug].astro#

修改点 : /src/content/config.ts#

4.文章帮助反馈#

修改点 : /src/pages/posts/[...slug].astro#

5.右上角友链+赞助+统计#

修改点 : /src\config.ts#

创建赞助文件写入修改参数#

创建友链文件写入修改参数#

引入umami#

修改点 : /src/layout/Layout.astro#

修改点 : `/src/layouts/Layout.astro`#

修改点 : `/src/types/config.ts`#

修改点 : `/src/styles/variables.styl`#

修改点 : `/src/config.ts`#

修改点 : `/src/utils/content-utils.ts`#

修改点 : `/src/components/PostCard.astro`#

修改点 : `/src/components/PostCard.astro`#

修改点 : `/src/pages/posts/[...slug].astro`#

修改点 : `/src/content/config.ts`#

修改点 : `/src/pages/posts/[...slug].astro`#

修改点 : `/src\config.ts`#

修改点 : `/src/layout/Layout.astro`#