话说在前#

本章为对于github/afoim/fuwari的二改项目的实现解析,以当前仓库25-08-15最新一次commit6936133为准

这篇文章是经群U启发而来的

里面所有内容均个人理解,如有不对,欢迎指出~~虽然我没评论区~~

功能实现#

网站信息#

位于src/config.ts,~~说真的感觉没必要提这一句~~

永久暗色并隐藏切换面板

1
forceDarkMode: true, // 强制加载暗色主题css

域名检测#

当你尝试直接fork而不修改的时候会发现每次访问都会有非官方域名的警告

其功能具体实现于src/layout/Layout.astro,具体我也不赘述了,相信应该都看得懂

这版位于第276行,在head里面的一个script,若找不到建议搜索关键词

1
...
2
    <head>
3
        ...
4
        <!-- 域名检测脚本 -->
5
    <script is:inline define:vars={{officialSites: ["https://www.2x.nz", "https://www.072103.xyz"]}}>
6
      // 域名检测功能
7
      function checkDomain() {
8
        try {
9
          // 获取当前访问的完整URL
10
          const currentUrl = window.location.href;
11
          // 获取当前域名
12
          const currentDomain = window.location.hostname;
13

14
          // 获取所有官方域名
15
          const officialDomains = officialSites.map(site => {
16
            try {
17
              return new URL(site).hostname;
18
            } catch (e) {
19
              return null;
20
            }
21
          }).filter(domain => domain !== null);
22

23
          // 检查当前域名是否为官方域名或本地开发环境
24
          const isOfficialDomain = officialDomains.includes(currentDomain);
25
          const isLocalDev = currentDomain === 'localhost' || currentDomain === '127.0.0.1';
26

27
          // 如果当前域名不是官方域名且不是本地开发环境
28
          if (!isOfficialDomain && !isLocalDev) {
29
            // 创建警告弹窗
30
            const shouldRedirect = confirm(
31
              `⚠️ 域名安全警告\n\n` +
32
              `您当前访问的域名：${currentDomain}\n` +
33
              `官方域名：${officialDomains.join(', ')}\n\n` +
34
              `您可能正在访问非官方网站，存在安全风险！\n\n` +
35
              `点击"确定"跳转到官方网站\n` +
36
              `点击"取消"继续访问当前网站（不推荐）`
37
            );
38

39
            // 如果用户选择跳转到官方网站
40
            if (shouldRedirect) {
41
              // 构建官方网站的对应页面URL（使用第一个官方网站）
42
              const currentPath = window.location.pathname + window.location.search + window.location.hash;
43
              const officialPageUrl = officialSites[0] + currentPath;
44
              // 跳转到官方网站
45
              window.location.href = officialPageUrl;
46
            }
47
          }
48
        } catch (error) {
49
          // 如果检测过程中出现错误，静默处理，不影响正常访问
50
          console.warn('域名检测失败:', error);
51
        }
52
      }
53

54
      // 页面加载完成后执行域名检测
55
      if (document.readyState === 'loading') {
56
        document.addEventListener('DOMContentLoaded', checkDomain);
57
      } else {
58
        checkDomain();
59
      }
60
    </script>
61
    ...

Giscus评论区#

具体实现于src/pages/posts/[...slug].astro

1
<!-- Giscus 评论区 -->
2
<script src="https://giscus.app/client.js"
3
        data-repo="afoim/giscus-fuwari"
4
        data-repo-id="R_kgDOOi8quw"
5
        data-category="Announcements"
6
        data-category-id="DIC_kwDOOi8qu84CprDV"
7
        data-mapping="pathname"
8
        data-strict="0"
9
        data-reactions-enabled="1"
10
        data-emit-metadata="0"
11
        data-input-position="top"
12
        data-theme="noborder_gray"
13
        data-lang="zh-CN"
14
        data-loading="lazy"
15
        crossorigin="anonymous"
16
        async>
17
</script>

umami#

~~挺神金的~~

配置umami#

在src/layout/Layout.astro中配置umami分析,~~其实你如果只要umami分析,不用显示访问量之类的到这就行了~~

1
        <!-- Umami分析（自建） -->
2
    <script defer src="https://umami.2x.nz/script.js" data-website-id="4b4e430d-a12c-4a5c-8cf9-df48eb20fd6d"></script>

显示访问量#

首先是在src/config.ts里面定义了umami的相关配置

1
import type {
2
    ...
3
  UmamiConfig,
4
} from "./types/config";
5
...
6
export const umamiConfig: UmamiConfig = {
7
  enable: true,
8
  baseUrl: "https://umami.2x.nz",
9
  shareId: "ZyDjOrmjaBTlmGtd",
10
  timezone: "Asia/Shanghai",
11
};
12
...

以及在src/types/config.ts里面相关配置

1
export type UmamiConfig = {
2
  enable: boolean;
3
  baseUrl: string;
4
  shareId: string;
5
  timezone: string;
6
};

啊没错,这就是2x所说的页面会加载3次的那个,天才o3给出的解决办法是在config定义然后再导入,然后2x就搁那夸起o3了,~~所以说挺无语的~~

然后显示出访问量的部分在于src/components/PostCard.astro,以及./PostMeta.astro,./widget/Profile.astro

奥对,还有‎public/js/umami-share.js

这里就不贴出来了,毕竟这几个文件里面大部分都是umami的,看不懂就去问ai,~~懒得写了~~

Umami并没有给配置来更改CORS,这个访问量统计是2x逆向出来的,~~讲人话就是调API~~

时间戳#

这个精确到秒的时间戳,似乎不需要改,原本就支持?也可能是我之前改过相关逻辑的原因,但我翻commit好像确实原本就支持

背景图及透明卡片#

在SiteConfig类型中添加background配置选项
新增透明背景颜色变量—card-bg-transparent和—float-panel-bg-transparent
实现背景图片加载检测及卡片透明效果切换
添加背景图片样式配置,包括位置、大小、重复方式等

1
       let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100));
2
       offset = offset - offset % 4;
3
       document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
4

5
// Background image loading detection
6
      const bgUrl = getComputedStyle(document.documentElement).getPropertyValue('--bg-url').trim();
7
      const bgEnable = getComputedStyle(document.documentElement).getPropertyValue('--bg-enable').trim();
8

9
      if (bgUrl && bgUrl !== 'none' && bgEnable === '1') {
10
        const img = new Image();
11
        const urlMatch = bgUrl.match(/url\(["']?([^"')]+)["']?\)/);
12
        if (urlMatch) {
13
          img.onload = function() {
14
// 背景图片完全加载后，显示背景并启用卡片透明效果
15
            document.body.classList.add('bg-loaded');
16
            document.documentElement.style.setProperty('--card-bg', 'var(--card-bg-transparent)');
17
            document.documentElement.style.setProperty('--float-panel-bg', 'var(--float-panel-bg-transparent)');
18
          };
19
          img.onerror = function() {
20
// Keep cards opaque if background image fails to load
21
            console.warn('Background image failed to load, keeping cards opaque');
22
          };
23
          img.src = urlMatch[1];
24
        }
25
      }
26
     </script>
27
     <style define:vars={{
28
configHue,
29
'page-width': `${PAGE_WIDTH}rem`,
30
    }}></style>  <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
31
'bg-url': siteConfig.background.src ? `url(${siteConfig.background.src})` : 'none',
32
'bg-enable': siteConfig.background.enable ? '1' : '0',
33
'bg-position': siteConfig.background.position || 'center',
34
'bg-size': siteConfig.background.size || 'cover',
35
'bg-repeat': siteConfig.background.repeat || 'no-repeat',
36
'bg-attachment': siteConfig.background.attachment || 'fixed',
37
'bg-opacity': (siteConfig.background.opacity || 0.3).toString()
38
    }}>
39
      :root {
40
        --bg-url: var(--bg-url);
41
+--bg-enable: var(--bg-enable);
42
+--bg-position: var(--bg-position);
43
+--bg-size: var(--bg-size);
44
+--bg-repeat: var(--bg-repeat);
45
+--bg-attachment: var(--bg-attachment);
46
+--bg-opacity: var(--bg-opacity);
47
      }
48

49
/* Background image configuration */
50
body {
51
        --bg-url: var(--bg-url);
52
+--bg-enable: var(--bg-enable);
53
+--bg-position: var(--bg-position);
54
+--bg-size: var(--bg-size);
55
+--bg-repeat: var(--bg-repeat);
56
+--bg-attachment: var(--bg-attachment);
57
+--bg-opacity: var(--bg-opacity);
58
      }
59

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

79
body.bg-loaded::before {
80
        opacity: calc(var(--bg-opacity) * var(--bg-enable)) !important;
81
      }
82
</style>  <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->

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

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

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
  },

友链#

我友链具体思路就是,spec里面新建一个friends.md,然后去pages里面写单独的friends.astro,友链的页面就是这么写的(2x的直接写的astro,没有md)

也就是说2x的友链页面全写在src/pages/friends.astro

可选,去做i18n,去i18n里面写Key值就是,然后最后到config.ts里面引用

赞助#

思路同上,位于src/pages/donate.astro

页脚#

在src/components/Footer.astro

写在最后#

暂时就写到这吧,毕竟也想不出来能写什么,大部分commit都是修bug和优化

重要的改动上面也写了,至于什么时候更新这篇文章,随缘吧

The end Ciallo~