历经多次打磨和稍微的优化,终于完成了Stalux这一个astro主题,也就是当前xingwangzhe.fun所使用的主题.
演示地址: stalux.needhelp.icu
主题特点
简洁美观
从背景图就能看到,极简主义（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的内容集合功能
hello world
function world(params: type) { console.log("hello world");
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]
yaml配置
综合考量ts,json,toml等配置文件的优缺点,最终选择了yaml作为主题的配置文件格式,因为yaml相对于其他格式来说,更简洁易读,并且支持注释,方便用户理解和修改配置项
而且,Astro原生支持yaml作为内容合集,那么我就可以定义一个config.yaml文件,来集中管理主题的配置项,比如说站点标题,描述,作者信息,社交链接等
src/content.config.ts
import { defineCollection } from "astro:content";const config = defineCollection({ loader: file("config.yml"), url: z.string().url(), description: z.string(), canonical: z.string().url().optional(), twitterSite: z.string().optional(), noindex: z.boolean().optional().default(false), nofollow: z.boolean().optional().default(false), anyhead: z.string().optional(), favicon: z.string().optional().default("/favicon.ico"), avatar: z.string(), title: z.string(), icon: z.string(), link: z.string(), typetexts: z.array(z.string()).optional(), icon: z.string(), link: z.string(), description: z.string(), name: z.string(), description: z.string(), icon: z.string(), link: z.string(), startYear: z.number().optional(), icp: z.string().optional(), pubsec: z.string().optional(), pubsecNumber: z.string().optional(), buildtime: z.string().optional(), enabled: z.boolean().optional().default(true), startYear: z.number().optional(), customText: z.string().optional(), showPoweredBy: z.boolean().optional().default(true), showThemeInfo: z.boolean().optional().default(true), enabled: z.boolean().optional().default(false), number: z.string().optional(), .optional(), enabled: z.boolean().optional().default(false), text: z.string().optional(), number: z.string().optional(), .optional(), label: z.string(), message: z.string(), color: z.string().optional(), style: z.string().optional(), alt: z.string().optional(), href: z.string().optional(), custom: z.string().optional(), enabled: z.boolean().optional().default(false), serverURL: z.string().url().optional(), lang: z.string().optional().default("zh-CN"), locale: z.any().optional(), .array(z.string()) .optional() .default(["https://unpkg.com/@waline/emojis@1.1.0/weibo"]), reaction: z.boolean().optional().default(false), meta: z.array(z.string()).optional().default(["nick", "mail", "link"]), requiredMeta: z.array(z.string()).optional().default([]), login: z.string().optional().default("enable"), recaptchaV3Key: z.string().optional(), turnstileKey: z.string().optional(), dark: z.union([z.string(), z.boolean()]).optional().default(true), noCopyright: z.boolean().optional().default(false), commentSorting: z.string().optional().default("latest"), imageUploader: z.any().optional(), highlighter: z.any().optional(), texRenderer: z.any().optional(), search: z.any().optional(), wordLimit: z.number().optional().default(200), pageSize: z.number().optional().default(10),
看起来非常地多,但实际上写yaml配置的适合,还是很轻松的,而且得益于内容集合,配置项即使出现错误,丢失,也会有content.config.ts的类型校验来保障配置的正确性
丰富的功能
waline评论区配置,社交媒体链接 使用simple-icons图标库,导航图标 使用feather图标库,多种徽章支持,等等就不一一列举
结语
总的来说,如果你喜欢SSG类型的博客,并且想要一个简洁美观,功能丰富的主题,那么Stalux绝对是一个不错的选择,希望大家能够喜欢这个主题,并且在使用过程中提出宝贵的意见和建议,让这个主题变得更加完善和优秀.
Stalux Astro博客主题自荐
作者：xingwangzhe
本文链接： xingwangzhe.fun/posts/stalu…
本文采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
