一套面向独立博客的现代化前端主题模板，全面拥抱 Vite 工程化，开箱即用。
中文说明书 | English README
- 🌐 InkFlow 博客主题演示: https://zidony.github.io/inkflow-theme
- ⚙️ InkFlow 管理后台演示: https://zidony.github.io/inkflow-admin
INKFLOW 以「墨水流动」为意象，追求内容优先、克制而精致的视觉语言。主色调采用深林绿（#0a6640），搭配 Playfair Display 衬线标题字体与 DM Sans 无衬线正文字体，在技术感与人文气质之间取得平衡。
从 v3.0 开始，Inkflow 全面升级为基于 Vite 的现代前端工程：
- 生产级工程化：由 Vite 驱动，提供瞬间热更新 (HMR) 和极致优化的生产构建。
- 现代化架构：深度拆分的组件化源码，采用 BEM 命名法结合 CSS 变量。
- 自动化交付：一键执行
npm run release，自动提取出纯净的商业发布包。 - 云端部署：内置 GitHub Actions，向 GitHub Pages 零配置一键发版。
inkflow-theme/
├── index.html # 博客首页
├── post-list.html # 文章列表页
├── post-show.html # 文章详情页
├── category-list.html # 分类页
├── tag-list.html # 标签页
├── archive-list.html # 归档页
├── album-list.html # 相册列表页
├── album.html # 相册详情页
├── photo.html # 图片详情页
├── link-list.html # 友情链接页
├── profile.html # 个人资料页
├── login.html # 登录/注册页
├── src/ # v3.0 新增：现代模块化源码目录
│ ├── assets/
│ │ ├── css/
│ │ │ ├── main.css # 样式主入口
│ │ │ ├── base/ # 设计变量、Bootstrap 覆盖与基础排版
│ │ │ ├── components/# BEM 组件化样式
│ │ │ └── pages/ # 页面级样式
│ │ └── js/
│ │ ├── inkflow.js # 现代 ES Module 脚本入口
│ │ ├── core/ # 全局基础能力
│ │ ├── components/# 可复用组件行为
│ │ └── pages/ # 页面级行为
│ └── partials/ # head/navbar/footer/search/scripts 等公共片段
├── dist/ # v3.0 新增：生产构建输出目录 (部署用)
└── vite.config.mjs # Vite 工程化配置
| 依赖 | 版本 | 用途 |
|---|---|---|
| Vite | 8.0.x | 底层构建基座 |
| Bootstrap | 5.3.8 | 响应式栅格、组件基础 |
| Bootstrap Icons | 1.13.1 | 全站图标 |
| Playfair Display | Google Fonts | 标题字体 |
| DM Sans | Google Fonts | 正文字体 |
| JetBrains Mono | Google Fonts | 代码字体 |
从 v3.0 起，所有主题配置集中于 src/assets/css/base/variables.css，大幅简化了维护成本：
/* 主色 */
--ink-primary: #0a6640 /* 深林绿（亮色模式）*/
--ink-accent: #00c98d /* 荧光绿（高亮/按钮）*/
/* 排版 */
--font-display: 'Playfair Display', serif
--font-body: 'DM Sans', sans-serif
--font-mono: 'JetBrains Mono', monospace
/* 圆角 */
--radius-sm: 6px
--radius-md: 12px
--radius-lg: 20px
--radius-xl: 32px通过 <html data-bs-theme="light|dark"> 一键切换，所有颜色变量自动适配。导航栏右侧的月亮图标按钮由 initTheme() 驱动，主题偏好持久化存储于 localStorage。
全站门面页，完整展示博客的内容矩阵与品牌形象：
- 全屏 Hero 区 — 渐变背景 + 打字机效果标语 + 文章数量/阅读量统计徽章，下方滚动指示器引导用户深入
- 分类卡片区 — 6 张大图渐变分类卡，悬停时浮起并展示文章数，点击跳转对应分类
- 最新文章 — 卡片 + 列表双视图可切换，每张卡片含封面占位色块、分类标签、阅读时长、作者头像
- 精选引言区 — 全宽深色卡片，展示博主座右铭或精选文字
- 深度阅读侧边栏 — 热门文章排行榜（带序号）+ 订阅周刊 Newsletter 表单 + 热门标签云
- 阅读进度条 — 滚动时顶部细线实时显示页面阅读进度
- 全站搜索浮层 — 键盘快捷键或点击搜索按钮触发，支持热门搜索词快速填充
内容发现与浏览的核心页面，交互功能最丰富：
- 筛选工具栏 — 实时关键词搜索输入框 + 分类 Tab 快速过滤 + 排序下拉（最新/最热/最长）
- 卡片/列表视图切换 — 图标按钮一键在网格卡片与紧凑列表间切换，状态实时保存
- 文章卡片 — 封面色块 + 分类角标 + 标题 + 两行摘要 + 元信息（作者头像/日期/阅读时长/阅读量）
- 右侧粘性侧边栏 — 热门文章列表（带阅读量）+ 热门标签 + 归档速览年份跳转
- 分页导航 — 带页码 + 上下翻页的标准分页组件
整套主题功能最完整的页面：
- 文章 Hero 封面区 — 全宽渐变背景 + 面包屑导航 + 分类标签 + 标题 + 元信息（作者/日期/阅读时长/阅读量）+ 标签列表
- 左侧浮动操作栏 — 点赞（带计数）/ 书签 / 评论锚点 / 搜索，随页面滚动吸附侧边
- 右侧粘性目录（TOC） — 自动高亮当前阅读章节，点击平滑滚动定位
- 正文防溢出保护 — 超长 URL 自动换行、图片/视频/iframe 宽度限制、宽表格横向滚动、代码块横向滚动
- 代码块 — 深色主题 + 语言标签 + 一键复制按钮
- Callout 提示框 — 信息（蓝）/ 警告（黄）/ 技巧（绿）三种样式
- Reaction Bar — 文章末尾点赞/收藏互动区 + 社交分享按钮行
- 作者卡片 — 头像 + 简介 + 社交按钮
- 上下篇导航 — 两列布局展示前后文章标题与封面色
- 相关文章 — 三列关联文章推荐卡片
- 评论区 — 发表评论表单 + 评论列表（含作者回复特殊标记徽章）
- 分类 Hero 卡 — 每个分类一张大图渐变卡，展示名称、描述、文章数，悬停高亮
- 实时搜索 — 输入框即时过滤分类卡片
- 标准分类条目 — 图标 + 名称 + 文章数 + 最新文章标题的紧凑列表布局
- 统计横幅 — 标签总数、文章总数、本月新增的三项数字统计
- 彩色词云 — 24 个标签以不同颜色与字号动态渲染，字号与热度正相关
- 三种排序 — 按热度（文章数）/ 按字母 / 按最近使用切换，动画过渡
- 实时搜索过滤 — 输入即时筛选词云中的标签
- 标签分组列表 — 按技术方向分组，每组展示标签与文章数
- 活跃度热力图 — 类 GitHub Contributions 风格，按周/天展示发文频率，鼠标悬停显示具体日期与文章数
- 年份切换 — 顶部 Tab 按钮切换不同年份的热力图数据
- 时间线 — 按月份分组的文章时间线，每条目含日期、分类标签、阅读时长
- 大图 Hero 相册卡 — 首屏展示精选相册封面，悬停后分别选择大图预览或图片详情
- 分类筛选 — Tab 按钮按主题（旅行/城市/自然/生活/建筑）过滤相册
- 照片瀑布流 — 不等高 Masonry 布局展示照片缩略图，统一使用预览/详情双操作层
- Lightbox 全屏预览 — 放大按钮进入全屏灯箱，详情按钮保持独立页面导航
- 三级浏览路径 — 相册列表 → 相册内容 → 单张图片详情
- 图片元数据 — 图片详情页预留拍摄时间、地点、相机、镜头、参数和版权字段
- 渐进增强 — JavaScript 可用时打开灯箱，无脚本时详情链接仍可正常访问
- 精选推荐卡 — 顶部展示 3 张精选友链大卡，底部含彩色进度条动画（影响力/活跃度指标）
- 分类分组展示 — 链接按「技术博客」「设计灵感」「实用工具」等分组，每组网格布局
- 申请友链表单 — 可展开/收起的申请卡，含站名、URL、介绍、Logo 输入项
- 本站信息一键复制 — 展示本站信息卡片，含一键复制所有字段的便捷按钮
- 侧边栏统计 — 友链总数、今日新增、待审核的数字看板
- Hero 个人卡 — 渐变背景 + 可更换头像（点击 + 编辑图标）+ 姓名/简介/社交链接/发布/阅读/点赞数据概览
- 连续写作条纹 — 小卡片展示连续写作天数与最近 21 天活跃条形图
- 左侧锚点导航 — 粘性侧边栏，点击跳转基本信息/账号安全/通知偏好/危险操作各区块
- 基本信息编辑 — 显示/编辑双态切换，含头像、昵称、邮箱（已验证标识）、简介、个人网站
- 账号安全 — 密码修改 + 两步验证开关（含状态标签同步切换）
- 通知偏好 — 新文章发布 / 评论回复 / 周刊推送三项开关，复选框驱动颜色变化
- 危险操作区 — 红色警示区域，注销账号按钮需二次确认
- 左右分栏布局 — 左侧品牌宣传面板（标语 + 功能清单）+ 右侧表单区，移动端自动退化为单列
- 登录 / 注册 Tab — 自定义 Tab 切换，动画流畅；「立即注册」/「立即登录」交叉链接同步切换
- 第三方登录 — Google OAuth + GitHub OAuth 社交登录按钮
- 密码显示切换 — 输入框右侧眼睛图标切换明文/密文
- 记住我 & 忘记密码 — 常规登录辅助选项
- 主题切换 — 右上角独立的明暗切换按钮，不依赖主导航
从 v3.0 起全面拥抱现代工程化。请使用 Vite 启动开发服务器：
# 1. 安装依赖
npm install
# 2. 启动本地开发服务器 (支持热更新)
npm run dev# 构建优化过的生产级代码 (极致压缩的 CSS/JS 输出到 dist/)
npm run build
# 静态质量扫描：阻断 inline style/event、重复 class、乱码、自定义 window 全局等回归
npm run quality
# 发版前完整检查：ESLint + 静态质量扫描 + 生产构建
npm run check
# 一键自动化发版 (提取 dist 生成无源码污染的 zip 压缩包)
npm run release因为项目中配置了 vite.config.mjs 的 base: './'，您可以直接将生成的 dist/ 目录上传至任意静态平台（GitHub Pages / Vercel / Netlify）。
强烈建议： 我们已配置好 .github/workflows/ci.yml、.github/workflows/deploy.yml 与 .github/workflows/release.yml。PR / push 会自动运行 npm run check、npm audit 与 Chromium Smoke Tests，部署和发版流程也会先通过同一套质量门禁。
InkFlow Theme 是静态前端主题模板，登录、评论、订阅、点赞、收藏、个人资料等交互默认为演示逻辑。正式商用前请阅读 生产集成说明，并接入真实 CMS、认证系统、后端 API 与安全防护。
前端脚本入口为 src/assets/js/inkflow.js，并按职责拆分为 core、components、pages 三层：
| 目录 | 说明 |
|---|---|
core/ |
主题切换、滚动动画、通用工具、键盘快捷键、质量更高的复制兜底等基础能力 |
components/ |
导航栏、搜索弹层、登录状态等跨页面组件 |
pages/ |
归档、相册、文章详情、个人资料、登录、标签云、友链等页面级交互 |
请查看 CHANGELOG.md 了解详细的版本更新记录。
本主题基于 CC BY 4.0 协议发布，允许自由使用、修改与分发，需保留署名。
INKFLOW Theme · 基于 Vite & Bootstrap 5.3.8 构建