最近把博客迁移到了 Astro & Fuwari, 并新加了一些内容. 然而所有代码都是 Claude Sonnet 4 写的 😂. 后续可能会加一下 giscus.

改动#

配置文件#

一开始发现配置文件是 ts, 虽然基本没差, 但是个人还是更想用 toml, 所以新加了 /src/utils/build-config.mjs 来根据 /config.toml 生成 ts 配置, 然后其他文件用生成的 Record.

友链#

原主题模版是不带友链功能的, 于是增加了一个友链 Nav 和 Side Bar. 可以看 src/components/widget/FriendLinks.astro 和 src/pages/friends.astro.

Post Meta#

expired#

新加了 expired: boolean 选项, 方便用于以后设置一下部分文章是否可能过时, 主要给读者一个 warning. 这篇 blog 设置了 expired: true, 因此顶部会有一个提示.

published#

稍微修改了一下 /scripts/new-post.mjs 让其按照 ${year}-${month}-${day}T${hour}:${minutes}:${seconds}Z 的格式输出.

1
function getDate() {
2
  const today = new Date()
3
  const year = today.getFullYear()
4
  const month = String(today.getMonth() + 1).padStart(2, "0")
5
  const day = String(today.getDate()).padStart(2, "0")
6
  const hours = String(today.getHours()).padStart(2, "0")
7
  const minutes = String(today.getMinutes()).padStart(2, "0")
8
  const seconds = String(today.getSeconds()).padStart(2, "0")
9

10
  return `${year}-${month}-${day}`
11
  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}Z`
12
}

Page#

背景#

把背景加了一个 “深->浅->深” 的渐变.

html {
    background: var(--page-bg);
    position: relative;
}

body {
    background: transparent;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background:
        linear-gradient(
            45deg,
            var(--page-bg) 0%,
            color-mix(in oklch, var(--page-bg), oklch(0.98 0.005 var(--hue)) 70%) 25%,
            color-mix(in oklch, var(--page-bg), oklch(0.96 0.01 var(--hue)) 50%) 10%,
            color-mix(in oklch, var(--page-bg), oklch(0.97 0.008 var(--hue)) 30%) 35%,
            var(--page-bg) 100%
        );
    pointer-events: none;
}

光标#

添加了一个简单的光标尾迹. 也在 main.css 中.

1
/* Cursor Trail Animation */
2
.cursor-trail {
3
    position: fixed;
43 collapsed lines
4
    width: 20px;
5
    height: 20px;
6
    border-radius: 50%;
7
    background: radial-gradient(
8
        circle,
9
        color-mix(in oklch, var(--cursor-trail-bg), transparent 20%) 0%,
10
        color-mix(in oklch, var(--cursor-trail-secondary), transparent 60%) 50%,
11
        transparent 100%
12
    );
13
    pointer-events: none;
14
    z-index: 9999;
15
    transform: translate(-50%, -50%);
16
    animation: trail-fade 0.8s ease-out forwards;
17
    mix-blend-mode: multiply;
18
}
19

20
html.dark .cursor-trail {
21
    background: radial-gradient(
22
        circle,
23
        color-mix(in oklch, white, oklch(0.8 0.15 var(--hue)) 30%) 0%,
24
        color-mix(in oklch, white, oklch(0.7 0.12 var(--hue)) 50%) 50%,
25
        transparent 100%
26
    ) !important;
27
    mix-blend-mode: normal !important;
28
}
29

30
@keyframes trail-fade {
31
    0% {
32
        opacity: 1;
33
        transform: translate(-50%, -50%) scale(1);
34
    }
35
    100% {
36
        opacity: 0;
37
        transform: translate(-50%, -50%) scale(0.3);
38
    }
39
}
40

41
/* Enhanced cursor for interactive elements */
42
a, button, [role="button"], input, textarea, select {
43
    cursor: pointer;
44
}
45

46
a:hover .cursor-trail,
47
button:hover .cursor-trail,
48
[role="button"]:hover .cursor-trail {
49
    animation-duration: 1.2s;
50
    background: radial-gradient(
51
        circle,
52
        hsl(var(--hue) 90% 60% / 0.9) 0%,
53
        hsl(var(--hue) 70% 50% / 0.5) 50%,
54
        transparent 100%
55
    );
56
}

Toc#

原本的 toc 会因为滚动屏幕而离开屏幕外, toc 被 fix 到了固定位置没有跟随内容滚动. 这里需要调整 /src/layout/MainGridLayout.astro. 主要是让 toc 在 page 中会一直在屏幕中可以被看见.

<!-- The things that should be under the banner, only the TOC for now -->
<div class="fixed top-0 right-3.5 w-[var(--toc-width)] h-screen z-0 hidden 2xl:block pointer-events-none">
    <div class="relative h-full pointer-events-auto" style="transform: translateX(0);">
        <!-- TOC component -->
        {siteConfig.toc.enable && <div id="toc-wrapper" class:list={["transition w-full h-full flex items-start justify-end",
            {"toc-hide": siteConfig.banner.enable}]}
        >
            <div id="toc-inner-wrapper" class="sticky top-20 w-[var(--toc-width)] h-[calc(100vh_-_6rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar">
                <div id="toc" class="w-full h-full transition-swup-fade ">
                    <div class="h-8 w-full"></div>
                    <TOC headings={headings}></TOC>
                    <div class="h-8 w-full"></div>
                </div>
            </div>
        </div>}

        <!-- #toc needs to exist for Swup to work normally -->
        {!siteConfig.toc.enable && <div id="toc"></div>}
    </div>
</div>

Math#

原来的 Math 用的 Katex 进行渲染, 效果挺好的, 但是个人换成了 Typst, 主要是 https://hanwen.io/en/posts/use_typst_for_math_in_blog/ 这篇博客帮助很大.

依赖#

只需要安装一下 @myriaddreamin/rehype-typst. remark-math 是已经安装过了的.

pnpm add @myriaddreamin/rehype-typst remark-math

修改 Astro 配置项#

1
import rehypeTypst from "@myriaddreamin/rehype-typst";
2
import rehypeKatex from "rehype-katex";
3

4
export default defineConfig({
5
  markdown: {
6
    remarkPlugins: [
7
      remarkMath,
6 collapsed lines
8
      remarkReadingTime,
9
      remarkExcerpt,
10
      remarkGithubAdmonitionsToDirectives,
11
      remarkDirective,
12
      remarkSectionize,
13
      parseDirectiveNode,
14
    ],
15
    rehypePlugins: [
16
      rehypeKatex,
17
      rehypeTypst,
37 collapsed lines
18
      rehypeSlug,
19
      [
20
        rehypeComponents,
21
        {
22
          components: {
23
            github: GithubCardComponent,
24
            note: (x, y) => AdmonitionComponent(x, y, "note"),
25
            tip: (x, y) => AdmonitionComponent(x, y, "tip"),
26
            important: (x, y) => AdmonitionComponent(x, y, "important"),
27
            caution: (x, y) => AdmonitionComponent(x, y, "caution"),
28
            warning: (x, y) => AdmonitionComponent(x, y, "warning"),
29
          },
30
        },
31
      ],
32
      [
33
        rehypeAutolinkHeadings,
34
        {
35
          behavior: "append",
36
          properties: {
37
            className: ["anchor"],
38
          },
39
          content: {
40
            type: "element",
41
            tagName: "span",
42
            properties: {
43
              className: ["anchor-icon"],
44
              "data-pagefind-ignore": true,
45
            },
46
            children: [
47
              {
48
                type: "text",
49
                value: "#",
50
              },
51
            ],
52
          },
53
        },
54
      ],
55
    ],
56
  },
57
});

配置 svg.typst-doc#

由于公式被渲染成 svg 插入文章, 先解决一下主题适配明暗主题, 这里 color 值使用 currentColor 就行.

之后需要考虑一下行内公式, 因为 svg 插入, 可能造成大于 <p> 等行内元素的现象, 实际上调整为 display: inline 就足够了, 但是还需要根据页面调整一些行内大小 padding 等, 至少看起来居中且不会过小.

1
.custom-md {
2
    svg.typst-doc {
3
        @apply transition;
4
        /* Force all elements inside to use current color */
5
        color: currentColor !important;
6
        /* Default alignment for block formulas */
7
        vertical-align: middle !important;
8
    }
9

10
    /* Inline formulas - align with prose text baseline */
11
    p svg.typst-doc,
12
    span svg.typst-doc,
13
    li svg.typst-doc {
14
        /* Fine-tuned alignment for prose-base typography (16px font, 1.75 line-height) */
15
        vertical-align: -0.575em !important; /* Slight downward adjustment for mathematical symbols */
16
        /* Slightly larger than text for better readability */
17
        font-size: 1.2em !important;
18
        /* Ensure it stays inline */
19
        display: inline !important;
20
        margin-left: 0.1em !important; /* Small left margin for spacing */
21
        margin-right: 0.1em !important; /* Small right margin for spacing */
22
        margin-bottom: 0em !important;
23
    }
24

25
    /* Typst SVG complete color override - target everything */
26
    svg.typst-doc,
27
    svg.typst-doc *,
28
    svg.typst-doc .typst-text,
29
    svg.typst-doc g,
30
    svg.typst-doc path,
31
    svg.typst-doc use,
32
    svg.typst-doc text,
33
    svg.typst-doc tspan,
34
    svg.typst-doc .outline_glyph {
35
        fill: currentColor !important;
36
        stroke: currentColor !important;
37
        --glyph_fill: currentColor !important;
38
        --glyph_stroke: currentColor !important;
39
        transition: fill 0.3s ease, stroke 0.3s ease !important;
40
        margin-bottom: 0.75em !important;
41
        font-size: 1.25em;
42
    }
43

44
    .katex-display-container {
45
        max-width: 100%;
46
        overflow-x: auto;
47
        margin: 1em 0;
48
    }
49
}

内容可能已过时

改动#