网站架构初始化

基于 Nuxt 3 完成了日历、侧边栏和时间轴组件的搭建。

网站架构初始化

今天正式完成了同好会官网的基础架构搭建。本次更新不仅是视觉组件的堆砌,更多是对底层开发模式的一次升级。

🚀 技术栈选型与优化

在初始化过程中,我们重点落实了以下三个方向:

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() 实现动态聚合

© 2026 同好会项目组 / 既然你发现了这里,试试输入 "th" 触发彩蛋