Stalux Astro博客主题自荐

发布时间： 2026-01-30 19:53:49

🕒 阅读时间：6 min read 👀 阅读量： Loading...

历经多次打磨和稍微的优化,终于完成了Stalux这一个astro主题,也就是当前xingwangzhe.fun所使用的主题.

主题特点

简洁美观

从背景图就能看到,极简主义（Minimalism） + 微妙装饰（subtle decorative）的设计风格,虽然背景图每次刷新都是繁杂的物品事物平铺,但又不失简约的线条风格,正所谓繁中有简,简中有繁,有没有让你回忆起找你妹这个游戏呢?. 背景图来自于figma-Telegram SVG Wallpapers(CC BY 4.0)

当然,主题为了保持简洁,只存在暗色主题,没有浅色主题的打算,很多DOM的组件几乎都是毛玻璃透明的,进一步简化了渲染的复杂度,让用户可以专注于内容本身

视图过渡

Astro有特点,那就是静态站点生成(SSG),所以在页面跳转时,会有白屏闪烁的问题,为了解决这个问题,主题使用了视图过渡动画的方式来实现页面的无刷新跳转,比如说导航和页脚,以及某些与页面内容无关的时间,作者信息等组件都保持状态,刷新页面时,只会更新中间的内容区域,从而达到无刷新跳转的效果

当然,某些脚本可能会出现问题,官方的astro:page-load事件监听解决了问题,使得在页面跳转后,评论,导航等脚本都能正常工作

内容优先

支持CommonMark语法,并且内置了很多实用的功能,比如说代码高亮,Mermaid,Katex(类似于Latex)等,让用户可以专注于内容的创作,而不是花费大量时间在排版上

注意,不同于固定的Astro模板定义,内容合集不在src/content目录下,而是在stalux/posts和stalux/about下,这样用户可以更方便地管理自己的内容,而且也能更好地利用Astro的内容集合功能

1
function world(params: type) {
2
  console.log("hello world");
3
}

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

$E=MC^2$

yaml配置

综合考量ts,json,toml等配置文件的优缺点,最终选择了yaml作为主题的配置文件格式,因为yaml相对于其他格式来说,更简洁易读,并且支持注释,方便用户理解和修改配置项

而且,Astro原生支持yaml作为内容合集,那么我就可以定义一个config.yaml文件,来集中管理主题的配置项,比如说站点标题,描述,作者信息,社交链接等

1
import { defineCollection } from "astro:content";
2
...
3
const config = defineCollection({
4
  loader: file("config.yml"),
5
  schema: z.object({
6
    title: z.string(),
7
    url: z.string().url(),
8
    description: z.string(),
9
    canonical: z.string().url().optional(),
10
    twitterSite: z.string().optional(),
11
    noindex: z.boolean().optional().default(false),
12
    nofollow: z.boolean().optional().default(false),
13
    anyhead: z.string().optional(),
14
    favicon: z.string().optional().default("/favicon.ico"),
15
    author: z.object({
16
      name: z.string(),
17
      avatar: z.string(),
18
      bio: z.string(),
19
    }),
20
    navs: z.array(
21
      z.object({
22
        title: z.string(),
23
        icon: z.string(),
24
        link: z.string(),
25
      }),
26
    ),
27
    typetexts: z.array(z.string()).optional(),
28
    mediaLinks: z
29
      .array(
30
        z.object({
31
          icon: z.string(),
32
          link: z.string(),
33
        }),
34
      )
35
      .optional(),
36
    links: z.object({
37
      title: z.string(),
38
      description: z.string(),
39
      sites: z.array(
40
        z.object({
41
          name: z.string(),
42
          description: z.string(),
43
          icon: z.string(),
44
          link: z.string(),
45
        }),
46
      ),
47
    }),
48
    footer: z
49
      .object({
50
        startYear: z.number().optional(),
51
        icp: z.string().optional(),
52
        pubsec: z.string().optional(),
53
        pubsecNumber: z.string().optional(),
54
        buildtime: z.string().optional(),
55
        copyright: z
56
          .object({
57
            enabled: z.boolean().optional().default(true),
58
            startYear: z.number().optional(),
59
            customText: z.string().optional(),
60
          })
61
          .optional(),
62
        theme: z
63
          .object({
64
            showPoweredBy: z.boolean().optional().default(true),
65
            showThemeInfo: z.boolean().optional().default(true),
66
          })
67
          .optional(),
68
        beian: z
69
          .object({
70
            icp: z
71
              .object({
72
                enabled: z.boolean().optional().default(false),
73
                number: z.string().optional(),
74
              })
75
              .optional(),
76
            security: z
77
              .object({
78
                enabled: z.boolean().optional().default(false),
79
                text: z.string().optional(),
80
                number: z.string().optional(),
81
              })
82
              .optional(),
83
          })
84
          .optional(),
85
        badges: z
86
          .array(
87
            z.object({
88
              label: z.string(),
89
              message: z.string(),
90
              color: z.string().optional(),
91
              style: z.string().optional(),
92
              alt: z.string().optional(),
93
              href: z.string().optional(),
94
            }),
95
          )
96
          .optional(),
97
        custom: z.string().optional(),
98
      })
99
      .optional(),
100
    comment: z
101
      .object({
102
        enabled: z.boolean().optional().default(false),
103
        waline: z
104
          .object({
105
            serverURL: z.string().url().optional(),
106
            lang: z.string().optional().default("zh-CN"),
107
            locale: z.any().optional(),
108
            emoji: z
109
              .array(z.string())
110
              .optional()
111
              .default(["https://unpkg.com/@waline/emojis@1.1.0/weibo"]),
112
            reaction: z.boolean().optional().default(false),
113
            meta: z.array(z.string()).optional().default(["nick", "mail", "link"]),
114
            requiredMeta: z.array(z.string()).optional().default([]),
115
            login: z.string().optional().default("enable"),
116
            recaptchaV3Key: z.string().optional(),
117
            turnstileKey: z.string().optional(),
118
            dark: z.union([z.string(), z.boolean()]).optional().default(true),
119
            noCopyright: z.boolean().optional().default(false),
120
            commentSorting: z.string().optional().default("latest"),
121
            imageUploader: z.any().optional(),
122
            highlighter: z.any().optional(),
123
            texRenderer: z.any().optional(),
124
            search: z.any().optional(),
125
            wordLimit: z.number().optional().default(200),
126
            pageSize: z.number().optional().default(10),
127
          })
128
          .optional(),
129
      })
130
      .optional(),
131
  }),
132
});

看起来非常地多,但实际上写yaml配置的适合,还是很轻松的,而且得益于内容集合,配置项即使出现错误,丢失,也会有content.config.ts的类型校验来保障配置的正确性

丰富的功能

waline评论区配置,社交媒体链接使用simple-icons图标库,导航图标使用feather图标库,多种徽章支持,等等就不一一列举

结语

总的来说,如果你喜欢SSG类型的博客,并且想要一个简洁美观,功能丰富的主题,那么Stalux绝对是一个不错的选择,希望大家能够喜欢这个主题,并且在使用过程中提出宝贵的意见和建议,让这个主题变得更加完善和优秀.