Somoe Season 四季代行者记事簿

2026-10-15 （分类：技术）

项目简介

Somoe Season（四季代行者记事簿）是一款以原创世界观《春夏秋冬代行者》为核心概念的个人文艺博客系统。博客以四季代行者的记事簿为载体，四套完整季节主题 + 纯白/纯黑两套极简主题，全局配色、装饰元素、背景粒子同步变化，营造季节更迭的仪式感。

项目基于 Vue 3 + TypeScript + Vite 构建，支持 Markdown 与 MDX 双格式写作，内置 170+ MDX 排版组件，覆盖内容表达、数据展示、季节主题、交互反馈等场景。

首页-春主题

技术栈

层级 技术 说明
框架 Vue 3.5 + TypeScript Composition API + <script setup>
构建 Vite 8 极速 HMR，Rollup 生产打包
路由 Vue Router 5 History 模式，尾部斜杠自动重定向
状态 Pinia 4 主题/配色/粒子状态持久化
样式 CSS Variables + Tailwind CSS 4 主题变量驱动，原子化辅助
内容 Markdown (marked) + MDX (@mdx-js/rollup) 双格式支持，MDX 组件化排版
图标 Lucide Vue 统一图标风格
SEO 自研 Vite 插件 robots.txt / sitemap.xml / RSS / JSON-LD

六套主题体系

每套主题不仅是配色切换，而是完整的视觉体系——从主色、辅助色、背景渐变，到粒子效果、导航风格、卡片配色，全部联动变化。

主题 代行者 主色 粒子效果 氛围
春 花叶雏菊 #f8c8d8 樱花飘落 温柔、新生、治愈
夏 叶樱琉璃 #87ceeb 阳光光斑 热烈、鲜活、通透
秋 祝月抚子 #d48b47 落叶飘零 静谧、更迭、朦胧
冬 寒椿狼星 #8ca2b8 雪花纷飞 清冷、沉静、守护
纯白 — #333333 樱花 极简、克制、纯净
纯黑 — #cccccc 雪花 深邃、沉浸、微光

主题切换时全局 0.3s 缓动过渡，配色/边框/阴影同步渐变，粒子实时切换形态与色彩。纯白/纯黑主题本身就是亮色/暗色模式，无需额外配色切换。

页面概览

首页

博客入口，展示站点标题、副标题与季节氛围。背景粒子随主题联动，营造沉浸感。

首页

文章列表

支持三栏方形卡片（grid）和列表（list）两种展示样式，通过站点配置切换。三栏筛选（四季/分类/标签）+ 分页或滚动加载。

文章列表

每张卡片无 cover 时从 171 张图片池确定性分配背景，同一篇文章始终对应同一张图。

文章详情

文章头部展示背景大图（可配置开关 postDetailBg），标题/时间/标签在图片下方正常展示。底部上下篇导航。支持 Markdown 和 MDX 两种格式渲染。

文章详情

归档

按时间线浏览所有文章。

归档

分类

四季分类（春记/夏录/秋笺/冬书）+ 内容分类双视图，带文章计数与季节配色。

分类

标签

标签云 + 输入筛选，快速定位相关文章。

标签

友链

友情链接展示，卡片配色由 HSL 哈希确定性生成，无需外部图片请求，无 CORS 问题。

友链

关于

站点介绍 + 站点导航（somoe.net / somoe.xyz / qiumonster.com / gbk.ink），四色卡片。

关于

导航栏

两种导航风格可选：

  • floating：悬浮居中胶囊导航，滚动时背景虚化，默认启用
  • fixed：顶部全宽固定导航

移动端自动切换为汉堡菜单 + slide 动画，主题切换按钮触屏设备仅响应 click（避免 hover 伪事件导致的两次点击问题）。

导航栏-悬浮模式

MDX 排版组件体系

项目内置 170+ MDX 组件，按功能分为 11 个类别，为四季代行者世界观的内容创作提供完整的排版支持。

季节主题组件

与世界观深度绑定，根据 season 属性自动匹配配色与图标：

组件 说明
SeasonBadge 季节徽章
SeasonQuote 季节引用框
SeasonBanner 季节横幅
SeasonDivider 季节分隔线
SeasonPoem 季节诗句
SeasonMood 季节心情标签
SeasonCountdown 季节倒计时
SeasonProfile 代行者档案卡片（名号/意象/特质）
SeasonCycle 四季循环可视化
RealmCard 领域卡片（带光晕效果）
WeatherCard 天气卡片
IconGrid 图标网格

内容表达组件

组件 说明
Lead 导语
DropCap 首字下沉
PhilosophyQuote 哲思引用（「」装饰）
DialogueExchange 多角色对话
LetterBlock 书信格式
PoemBlock 诗句排版
NoteBox / Callout / QuoteBox 提示/标注/引用框
Spoiler 隐藏内容
Highlight / Badge 高亮/徽章
KeyPoint / Caption 要点/说明文字
Ruby 注音
Heading / Paragraph 标题/段落增强

数据展示组件

图表（BarChart / LineChart / DonutChart / GaugeChart / RadarChart / HeatMap）、进度（ProgressBar / PercentRing）、时间线（Timeline）、步骤（Steps）、对比表（ComparisonTable）等。

交互组件

手风琴（Accordion）、标签页（Tabs）、翻转卡片（FlipCard）、滑块（Slider）、评分（Rating）、投票（Poll）、测验（Quiz）等。

其他类别

媒体（Gallery / AudioPlayer / GradientBox）、导航（TableOfContents / ReadingProgress）、反馈（Alert / LoadingSpinner / StatusBadge）、布局（Grid / StickyNote）、工具（Divider / Kbd / FileTree / Terminal / LinkCard / VideoEmbed / CopyBlock）等。

站点配置体系

所有可调项集中在 src/config/site.ts，含完整 JSDoc 注释：

配置项 类型 默认值 说明
title string 四季代行者记事簿 站点标题
subtitle string 春夏秋冬，轮回不息 副标题
navbarStyle 'floating' | 'fixed' floating 导航栏样式
navbarTitle string 四季代行者记事簿 导航栏标题
postListStyle 'list' | 'grid' grid 文章列表样式
paginationMode 'paginate' | 'scroll' paginate 分页模式
postsPerPage number 9 每页文章数
postDetailBg boolean true 文章详情页背景图开关
friendCardColor boolean true 友链卡片配色效果
postsDir string[] 7 个目录 文章扫描目录

项目结构

somoe-season/
├── public/
│   └── images/              # 171+ 背景图片池 + 项目截图
├── src/
│   ├── components/
│   │   ├── common/          # 通用组件（Navbar / Footer / ParticleBg / MarkdownView…）
│   │   ├── layout/          # 布局组件
│   │   ├── mdx/             # 170+ MDX 排版组件
│   │   │   ├── content/     # 内容表达
│   │   │   ├── season/      # 四季主题
│   │   │   ├── data/        # 数据展示
│   │   │   ├── interactive/ # 交互组件
│   │   │   ├── media/       # 媒体组件
│   │   │   ├── nav/         # 导航辅助
│   │   │   ├── feedback/    # 反馈状态
│   │   │   ├── layout/      # 布局组件
│   │   │   ├── table/       # 表格数据
│   │   │   ├── utility/     # 工具组件
│   │   │   └── index.ts     # 组件注册 barrel
│   │   └── skeleton/        # 骨架屏
│   ├── composables/         # 组合式函数
│   ├── config/              # 站点/导航/主题/粒子/加载配置
│   ├── data/                # 文章数据加载
│   ├── pages/               # 页面组件
│   ├── posts/               # 文章源文件（7 子目录）
│   │   ├── release/         # 发布文章
│   │   │   ├── creative/
│   │   │   ├── dream/
│   │   │   ├── essay/
│   │   │   ├── review/
│   │   │   ├── tech/
│   │   │   └── life/
│   │   └── test/            # MDX 组件测试文章
│   ├── stores/              # Pinia 状态
│   ├── types/               # TypeScript 类型
│   └── utils/               # 工具函数（postBg / theme / avatarColors）
├── plugins/                 # Vite 插件（SEO）
├── docs/mdx/                # MDX 组件使用文档
└── package.json

关键设计决策

  • 主题即模式：纯白/纯黑主题本身就是亮色/暗色模式，不需要额外的配色切换层
  • 确定性分配：无 cover 的文章通过双重 FNV-1a 哈希从图片池确定性分配背景，同一文章始终同一张图
  • 友链配色去 CORS：友链卡片配色由纯 HSL 哈希生成，不依赖 canvas 提取外部图片颜色
  • FOUC 防治：index.html 内联脚本在 CSS 加载前从 localStorage 设置 data-theme / data-mode，避免首屏白闪
  • MDX 组件 barrel：所有 MDX 组件通过 mdx/index.ts 统一注册，MDX 文件中直接使用标签名调用
  • 文章扫描白名单：postsDir 配置决定哪些子目录被扫描，未列入的目录（如草稿）不会出现在线上

链接

← 返回博客列表