网站架构初始化
今天正式完成了同好会官网的基础架构搭建。本次更新不仅是视觉组件的堆砌,更多是对底层开发模式的一次升级。
🚀 技术栈选型与优化
在初始化过程中,我们重点落实了以下三个方向:
1. 采用 Nuxt 4
使用最新的 Nuxt 4 进行编写,使网页更加现代化。
2. 原子化 CSS 驱动:Tailwind CSS
全局集成了 Tailwind CSS,通过配置文件定义了同好会的品牌色主题。
- 响应式设计:所有组件(尤其是时间轴和侧边栏)均已适配移动端。
3. 数据层:Nuxt Content v3 集合查询
这是本次架构的核心。通过 Nuxt Content v3,我们实现了:
- 集合查询 (Collection Queries):高效筛选
content/目录下的开发日志。 - 自动渲染:利用
<ContentDoc />直接将 Markdown 转换为 Vue 组件。 - 类型安全:为不同的内容类型(如
anniversary,dev-log)定义了严格的数据 Schema。
🧱 已完成组件展示
| 组件名称 | 核心功能 | 实现逻辑 |
|---|---|---|
| 日历组件 | 展示活动排期 | 基于 v-calendar 结合 Content 数据源 |
| 时间轴 | 记录里程碑时刻 | 自动抓取 date 字段进行逆序排列 |
| 侧边栏 | 目录与分类导航 | 使用 queryContent().where() 实现动态聚合 |