Wenxin Theme for Trilium Notes

August 5, 2026 · View on GitHub

基于 Trilium Notes 独立 Share 机制的极简中文博客主题，由 Hugo 主题「文心 (Wenxin)」移植而来。

追求极简阅读体验：中文优先排版、自动暗色模式、自托管字体、PJAX 无刷新导航、分层强调。

特性

  • 📖 极简阅读排版 — 中文优先，衬线正文 + 无衬线标题，行宽克制
  • 🌗 自动暗色模式 — 跟随系统 prefers-color-scheme，无需手动切换
  • 🔤 自托管字体 — Lora / EB Garamond / JetBrains Mono，全部本地加载无外部请求
  • ⚡ PJAX 无刷新导航 — 页面切换不闪烁，带进度条与过渡动画
  • 🖱️ Lenis 平滑滚动 — 桌面端丝滑滚动，触摸设备自动跳过
  • 📑 文章大纲 — 右侧栏目录树 + 滚动高亮 + 移动端抽屉
  • 🎨 代码高亮 — Prism.js，自动跟随暗色模式
  • ➗ 数学公式 — KaTeX 支持（CDN 按需加载）
  • 💬 评论系统 — Twikoo 支持（可选）
  • 📱 移动端适配 — 单列布局，侧栏退化为顶部导航

目录结构

wenxin-theme/
├── Wenxin-Theme.ejs        # Trilium Share 主模板（EJS）
├── css/                    # 样式（逐个上传为 Trilium code 笔记）
│   ├── variables.css       # 设计令牌（颜色/字体/间距）
│   ├── theme.css           # 暗色模式 override
│   ├── reset.css           # CSS reset
│   ├── fonts.css           # @font-face 声明
│   ├── layout.css          # 页面布局
│   ├── sidebar.css         # 侧边栏
│   ├── animations.css      # 关键帧动画
│   ├── a11y.css            # 无障碍（减少动效/高对比度适配）
│   ├── responsive.css      # 响应式断点
│   ├── print.css           # 打印样式
│   ├── lenis.css           # Lenis 平滑滚动
│   ├── outline.css         # 文章大纲 + 移动端浮层
│   ├── custom.css          # 用户自定义覆盖 hook
│   ├── phosphor.css        # Phosphor 图标（第三方）
│   ├── prism.css           # 代码高亮
│   └── pages/              # 页面级样式（首页/文章/归档/关于/404）
├── js/                     # 脚本（逐个上传为 Trilium code 笔记）
│   ├── pjax.js             # PJAX 无刷新导航
│   ├── lenis.min.js        # Lenis 库（第三方）
│   ├── lenis-init.js       # Lenis 初始化
│   ├── browser-check.js    # 浏览器兼容检测
│   ├── outline.js          # 大纲生成 + 滚动监听
│   ├── custom.js           # 用户自定义脚本 hook
│   ├── prism.js            # Prism 代码高亮
│   ├── mathjax.js          # 数学公式渲染
│   └── twikoo.js           # 评论系统
└── fonts/                  # 自托管字体（woff2）
    ├── lora/               # Lora（标题衬线）
    ├── eb-garamond/        # EB Garamond（正文衬线）
    ├── jetbrains-mono/     # JetBrains Mono（代码）
    └── Phosphor.woff2      # Phosphor 图标字体

部署到 Trilium

1. 下载release中的.zip

2. 导入到Trilium

在Trilium Notes页面，右键左侧树导航，导入到笔记（取消勾选安全导入）。

导入后的结构：

Wenxin-Notes (根笔记，启用分享)
├── 首页          ← 文章列表页（年份分组，渲染首页下文章）
├── 分类          ← 分类页（渲染根笔记下文章）
├── 关于          ← 关于页
├── Wenxin-Theme  ← 主题资源目录
└── 文章          ← 文章笔记

3. 文章属性

发布文章笔记设置以下示例标签：

标签类型说明示例
datelabel, datetime发表日期（排序依据）2026-07-30T10:00
authorlabel作者（缺省取 bloggerName）博主
taglabel, multi文章标签Trilium
summarylabelSEO 摘要文章摘要...
showCommentslabel, boolean覆盖站点评论开关false
shareAliaslabel自定义分享链接my-post

自定义

  • 样式覆盖：编辑 css/custom.css（最后加载，优先级最高）
  • 脚本扩展：编辑 js/custom.js，可监听 PJAX 事件 pjax:complete 等做页面切换后处理
  • 配色调整：修改 css/variables.css 中的设计令牌即可全局换肤

致谢

License

MIT