一、写在前面

在信息碎片化的时代，写博客似乎成了一件"复古"的事。但总有一些人坚持用文字记录思考——技术笔记、生活感悟、项目复盘……简记（Jianji）就是为这样一群人而生的小程序博客系统。

它不是传统 CMS 的移动端搬运，而是从零设计、面向移动阅读场景的原生小程序解决方案。

二、技术架构

简记采用前后端分离架构，后端基于 Python Flask 构建，前端为微信原生小程序，数据存储使用 SQLite，轻量部署，开箱即用。

三、功能全景

1. 首页 · 内容引力场

首页承载着用户的第一印象。顶部轮播图支持配置跳转链接——可跳转站内文章页，也可通过 mini://appId/path 协议无缝跳转至其他小程序，形成流量互通的生态闭环。

轮播图下方是最近文章横向滚动区和随机阅读推荐，算法层面的"随机"机制让老文章也有曝光机会，避免内容沉底。

2. 文章列表 · 瀑布流 + 分类吸顶

文章列表采用双栏瀑布流布局，相比传统的单列 Feed，在同样可视区域内承载更多内容，浏览效率提升显著。

分类标签栏支持横向滚动，当页面下滑时标签自动吸顶固定在导航栏下方，让用户在任何位置都能快速切换分类，无需回顶操作。

3. 文章详情 · 沉浸式阅读

详情页是简记体验的核心：

• 自定义导航栏：毛玻璃背景，沉浸全屏，返回/分享按钮一目了然
• Hero 封面大图：文章顶部的大图区域配合渐变遮罩，视觉冲击力强
• Markdown 富文本渲染：集成 mp-html 组件，支持标题层级、引用块、代码高亮、表格、图片懒加载
• 图片路径智能处理：后端自动将相对路径转换为 CDN 绝对路径，兼容新旧两种存储格式，彻底解决小程序图片显示异常问题
• 评论区：支持微信用户一键评论，互动零门槛

4. 心情随笔 · 轻量碎片化记录

区别于正式的文章，心情随笔模块提供更轻量的记录方式。卡片式设计，支持心情星级（1-5星）、展开/收起长文、分页加载。每条心情独立成卡，配以不同的主题色（橙色/蓝色/绿色），视觉层次丰富。

5. 搜索 · 即搜即得

搜索页面提供搜索历史记录、关键词联想、即时结果展示。搜索历史存储在本地 Storage 中，支持一键清空，兼顾效率与隐私。

6. 关于页面 · 品牌展示窗口

关于页面集中展示站点品牌信息，支持自定义：

• 站点 Logo 与标题
• 博客简介（富文本）
• 功能亮点展示
• 业务承接信息
• 联系方式

四、后台管理

简记配备完整的 Web 后台管理系统，无需额外开发：

五、设计哲学

1. 视觉语言

简记的 UI 设计围绕三个关键词展开：

• 温暖：主色调采用陶土橙（#D97757），搭配大地色系的辅助色，传递有温度的内容感
• 通透：大面积使用毛玻璃效果（backdrop-filter: blur），卡片半透明浮起，层次分明不沉重
• 呼吸感：恰到好处的间距、圆角（28rpx）和阴影，让内容区透气不拥挤

2. 交互细节

• 导航栏滚动渐变，内容区与标题区无缝切换
• 卡片按压缩放动效（:active 态 scale 0.97），反馈即时
• 瀑布流图片懒加载 + 骨架屏过渡，弱化网络等待感
• 文章详情页的 "— END —" 标记，给阅读一个优雅的收尾

六、部署亮点

• 零云服务依赖：Flask + SQLite 可在任意 VPS 甚至树莓派上运行
• 图片自适应：后端 fix_image_path 自动处理三种历史路径格式（/static/upload/、/upload/、/static/upload/），数据迁移无忧
• 跨小程序跳转：轮播图通过 mini://appId/path 协议实现小程序间跳转，无需额外开发
• 自定义导航栏：全页面使用自定义导航栏，适配各型号手机状态栏高度

七、适用场景

• 个人博主：拥有自己域名的独立博客，小程序作为移动端补充
• 技术团队：内部知识库的移动端入口，搭配分类和搜索功能
• 独立开发者：个人品牌建设，技术笔记 + 心情记录的组合
• 企业官网：资讯发布的轻量级解决方案，支持轮播图推广和业务展示

八、写在最后

简记的定位从来不是"另一个博客系统"。它试图在移动端重新定义阅读体验——让文字回归内容本身，让设计服务于阅读，让技术隐于体验之后。

如果你也在寻找一个轻量、美观、可自部署的小程序博客方案，简记值得一试。