docs: 用户文档 0~2

src/components/DocsLeftAside.astro

@@ -6,9 +6,9 @@ const allDocs = await getCollection("docs");
 ---
 
 <ul id="docs-nav-list" class="w-[18rem] p-8 text-[18px] grow overflow-y-auto">
-    <li class="hover:text-ark-blue duration-300">
-        <a target="_self" href={base + "docs/"}>开始</a>
-    </li>
+    <!--<li class="hover:text-ark-blue duration-300">-->
+    <!--    <a target="_self" href={base + "docs/"}>开始</a>-->
+    <!--</li>-->
     {allDocs.map(({id, slug, body, collection, data}, index) =>
             <li class="hover:text-ark-blue line-clamp-3 duration-300">
                 <!-- TODO: 按文件夹分层可折叠 -->

src/content/docs/01-用户文档/00-前端初探.md

@@ -0,0 +1,7 @@
+---
+title: 前端初探
+---
+
+# 前端初探
+
+TODO: 介绍并指导安装配置 Git、Node.js、PNPM、VSCode 等开发环境。

src/content/docs/01-用户文档/01-项目介绍.md

@@ -0,0 +1,59 @@
+---
+title: 项目介绍
+---
+
+# 项目介绍
+
+[AstroArknights] 的目标是基于 [Astro](https://docs.astro.build/zh-cn/getting-started/) 框架构建 *全特性*
+[静态网站生成器（<abbr title="Static Site Generator">SSG</abbr>）](https://en.wikipedia.org/wiki/Static_site_generator)。
+其设计致敬了 [明日方舟](https://ak.hypergryph.com/) 手游简中官方网站。
+
+:::caution
+[AstroArknights] 目前处于开发阶段，未来可能会出现破坏性变更。
+:::
+
+## 目标特性
+
+- [x] 文档
+- [x] 博客
+- [ ] 作品集（视频、音频、摄影、绘画、漫画、）
+- [ ] 以及更多……
+
+## 相比其他静态网站生成器
+
+> [为什么选择 Astro？](https://docs.astro.build/zh-cn/concepts/why-astro/)
+
+现阶段相比其他静态网站生成器仍有较大差距，正在努力追赶！`ᕕ(◠ڼ◠)ᕗ`
+
+01. [Hexo](https://hexo.io/zh-cn/) - [hexo-theme-arknights](https://github.com/Yue-plus/hexo-theme-arknights)
+
+    超越自己！TODO: 亮色模式、评论系统、数学公式、图表、全站搜索、页面加密、……
+
+02. [Starlight](https://starlight.astro.build/zh-cn/)
+
+    超越官方！TODO:
+    [各种组件](https://starlight.astro.build/zh-cn/guides/components/)、
+    [旁白](https://starlight.astro.build/zh-cn/guides/authoring-content/#%E6%97%81%E7%99%BD)、
+    [国际化（i18n）](https://starlight.astro.build/zh-cn/guides/i18n/)、
+
+03. [Docusaurus](https://docusaurus.io/zh-CN/)
+04. [VitePress](https://vitepress.dev/zh/) / [VuePress](https://vuepress.vuejs.org/zh/) 
+
+99. 欢迎补充……
+
+## 许可证
+
+代码部分使用 [MIT License](https://github.com/Yue-plus/astro-arknights/blob/main/LICENSE)；
+
+[内容集合（`src/content`）](https://github.com/Yue-plus/astro-arknights/tree/main/src/content) 内的所有内容使用
+<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">
+    CC BY-NC-SA 4.0
+    <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt="">
+    <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt="">
+    <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt="">
+    <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt="">
+</a>；
+
+
+
+[AstroArknights]: https://github.com/Yue-plus/astro-arknights

src/content/docs/01-用户文档/02-快速启动.md

@@ -0,0 +1,57 @@
+---
+title: 快速启动
+---
+
+# 快速启动
+
+## 在线尝试
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/Yue-plus/astro-arknights)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/Yue-plus/astro-arknights)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/Yue-plus/astro-arknights)
+
+## 本地运行
+
+### 先决条件
+
+- [Git](https://git-scm.com/) - 免费开源的分布式版本控制系统
+- [Node.js](https://nodejs.org/zh-cn) - JavaScript 运行时环境；
+  始终建议使用最新的长期支持（<abbr title="Long-term Support">LTS</abbr>）版本；
+    - [`pnpm`](https://pnpm.io/zh/) - 快速的，节省磁盘空间的包管理工具；
+- 文本编辑器 - 推荐使用 [VS Code](https://code.visualstudio.com/) 并安装 [Astro 官方扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)；
+
+### 通过 GitHub 开启一个新项目
+
+克隆 [AstroArknights] 仓库内容：
+
+```shell
+git clone https://github.com/Yue-plus/astro-arknights.git --depth=1
+cd astro-arknights
+```
+
+> `--depth=1` 命令表示只克隆仓库最近的一次提交，可以加快克隆速度。
+>
+> 如果想要长期使用本主题可以先 [Fork](https://github.com/Yue-plus/astro-arknights/fork) 一份，然后从自己的仓库克隆，方便日后拉取更新。
+
+安装项目依赖：
+
+```shell
+pnpm install
+```
+
+启动 Astro 开发服务器：
+
+```shell
+pnpm dev
+```
+
+如果没有报错，就可以通过浏览器访问 http://localhost:4321/ 看到和本站点一模一样的网站了！
+
+## 下一步
+
+- 如果是初次使用 [Astro] 建议先阅读官方文档；
+- TODO: 配置文件介绍、项目结构介绍、相关技术栈介绍、内置组件介绍、默认内容集合管理……
+
+
+
+[AstroArknights]: https://github.com/Yue-plus/astro-arknights

src/layouts/InfoLayout.astro

@@ -128,7 +128,7 @@ const subNavigationItems = Astro.props.subNavigationItems
 
     ::selection {
       color: black;
-      background-color: #18deff;
+      background-color: #fe2;
     }
 
     h1 {
@@ -168,7 +168,11 @@ const subNavigationItems = Astro.props.subNavigationItems
     }
 
     p {
-      padding-bottom: 1rem;
+      margin: .3rem 0;
+
+      img {
+        display: inline-block;
+      }
     }
 
     ul {
@@ -181,9 +185,16 @@ const subNavigationItems = Astro.props.subNavigationItems
       }
     }
 
+    ol {
+      margin: 1rem 0;
+      padding-left: 2.5rem;
+      list-style: decimal outside;
+    }
+
     a {
       color: #18d1ff;
       padding: 0 3px;
+      display: inline-block;
       transition: color, background-color;
       transition-duration: 300ms;
 
@@ -202,26 +213,25 @@ const subNavigationItems = Astro.props.subNavigationItems
     }
 
     blockquote {
-      background-color: rgba(black, .3);
-      margin: 2rem 0;
-      border-left: .5rem solid #18d1ff;
-      padding: 1rem 2rem;
+      /*background-color: rgba(black, .2);*/
+      margin: .5rem 0;
+      border-left: .25rem solid #5a5a5a;
+      padding: .3rem .6rem;
       box-sizing: border-box;
     }
 
     p, th, td {
       code {
         background-color: rgba(255, 255, 255, 0.125);
         padding: 0 3px;
-
       }
     }
 
     .astro-code {
       margin: 1rem 0;
       padding: 1rem 2rem;
       box-sizing: border-box;
-      /* TODO: 中英文等宽字体、复制代码按钮、切换自动换行按钮 */
+      /* TODO: 显示行号、可设置高亮行、中英文等宽字体、复制代码按钮、切换自动换行按钮、可折叠、 */
     }
   }
 </style>

src/pages/docs/[...slug].astro

@@ -36,6 +36,7 @@ const subNavigationItems: SubNavigationItem[] = (await getCollection("docs"))
     <div id="docs-content"
          class="max-w-[80.75rem] h-full mx-auto overflow-y-auto transition-[height] duration-300">
         <!--<Debug {allDocs}/>-->
+        <!-- TODO: 面包屑导航 -->
         <details class="pb-8 landscape:hidden">
             <summary class="text-black bg-white text-[24px] font-bold px-3 font-oswaldMedium">
                 Document Index - 文档索引

src/pages/docs/index.astro

@@ -26,7 +26,7 @@ const subNavigationItems: SubNavigationItem[] = (await getCollection("docs"))
         <!--<Debug/>-->
         <h1 class="font-benderBold">Astro Arknights 文档</h1>
         <p class="font-benderRegular">指南、资源和 API 参考，帮助你使用 Astro 进行构建。</p>
-        <a target="_self" href="./getting-started"
+        <a target="_self" href="./用户文档/01-项目介绍"
            class="w-[18rem] h-[4.8rem] text-inherit no-underline hover:text-black hover:bg-ark-blue bg-[#5a5a5a] px-[2.5rem] flex items-center justify-between cursor-pointer transition-[color,background-color] duration-300">
             <div>
                 <div class="text-[1.6rem] font-bold">开始使用</div>