younisekai

younisekai 是什么

一句话：一个「写完 Markdown 就能发」的静态博客模板。

它用 Astro 做构建，用 Tailwind CSS 排版，用 Svelte 写交互组件，最终产出的是一堆纯静态文件——没有数据库，没有运行时服务端，dist/ 目录丢到任何静态托管上就能跑。

• 内容是文件：文章是 Markdown，项目、技能、历程、日记、相册是 JSON，全部放在 src/content/ 里，可以用 Git 管理、可以随时整体迁移。
• 自带后台：接上内容管理系统之后，可以在浏览器里直接写文章、改数据，不用装编辑器。
• 该有的细节都有：暗色模式、全站搜索、无限级目录树、代码高亮与折叠、文章加密、复制保护、阅读进度与字数统计。
• 零后端依赖：搜索索引在构建时生成，文章加密在浏览器端完成，评论等外部服务默认关闭、需要时再打开。

Tip

这套模板是移植并改造自开源项目 Spr-Aachen/Twilight（MIT 许可），在此基础上重新设计了中文内容结构、数据集合页面与示例文档。协议与致谢写在关于页面里。

目录结构

1
项目根目录/
2
├── public/                     # 直接拷贝进产物的静态资源
3
│   └── assets/images/          # 封面、头像、占位图、壁纸
4
├── src/
5
│   ├── components/             # 组件（卡片、侧栏挂件、评论……）
6
│   ├── content/                # 所有内容与数据
7
│   │   ├── posts/              # 文章（Markdown）
8
│   │   ├── projects/           # 项目（JSON + 封面图）
9
│   │   ├── skills/             # 技能（JSON）
10
│   │   ├── timeline/           # 历程（JSON）
11
│   │   ├── diary/              # 日记（JSON + 配图）
12
│   │   ├── albums/             # 相册（JSON + 图片）
13
│   │   ├── friends/            # 友链（JSON）
14
│   │   ├── about.md            # 「关于」页正文
15
│   │   └── friends.md          # 「友链」页正文
16
│   ├── layouts/                # 页面骨架
17
│   ├── pages/                  # 路由：文件即页面
18
│   ├── styles/                 # 样式与主题变量
19
│   └── utils/                  # 读取与整理内容的工具函数
20
├── astro.config.mjs            # 构建与插件配置
21
└── younisekai.config.yaml      # 站点、主题、侧栏、评论等总配置

内容集合速查

Note

页面是按目录约定生成的，所以文件名就是数据的一部分：文章的文件名决定它的网址，数据文件的名字决定它在列表里的 id。取名时用英文小写加连字符，最省心。

十分钟发出第一篇

1. 安装依赖：在项目根目录执行 npm install。
2. 新建文件：在 src/content/posts/ 下建一个 Markdown 文件，例如 my-first-note.md——文件名会成为网址的一部分。
3. 写 frontmatter：文件开头两行 --- 之间填写标题、日期、分类等信息，最少写 title、published、description 就够。
4. 写正文：常规 Markdown 语法即可，需要图表、提示框、数学公式时参考排版速查与图表与公式。
5. 本地预览：npm run dev，打开终端提示的地址，文章位于 /posts/my-first-note/。
6. 构建发布：npm run build，把生成的 dist/ 上传到任意静态托管即可。

接下来看什么

• 想先把环境和部署跑通：快速上手：从本地到线上
• 想搞清楚每个 frontmatter 字段：写作指南：frontmatter 全解析
• 想知道正文能用哪些语法：排版速查表
• 想换主题色、改侧栏挂件：主题与站点配置

写博客最难的一步从来不是技术，而是「打开编辑器」。既然第一篇已经在这里了，第二篇就顺手写掉吧。