SaBlog2026博客主题

SaBlog2026 主题介绍

一款面向 Typecho 1.3.0、以 Markdown 长文阅读为核心的轻量双栏个人博客主题。

演示

在线预览作者博客演示

下载

基本信息

主题定位

SaBlog2026 的核心目标不是堆叠复杂组件，而是让文章成为页面真正的主角。主题主要面向长期写作、技术资料整理和知识沉淀场景，在保证视觉品质的同时，重点解决以下问题：

1. 长文章在桌面、2K、4K 和手机屏幕上都应保持舒适的阅读宽度。
2. Markdown 标题、代码、表格和流程图需要具备清晰、稳定的展示能力。
3. 侧栏应提供有效导航，不能在长文章中留下大片空白或抢占正文空间。
4. 页面 HTML 应具有清楚的语义结构，方便搜索引擎和 AI 爬虫理解内容。
5. 主题功能尽量本地化、轻量化，减少不必要的网络请求和第三方依赖。

设计思路

1. 内容优先

首页文章列表采用纯文字卡片，不读取或展示文章封面。卡片只保留分类、标题、摘要、发布日期、阅读时间和“阅读全文”入口，使访客可以快速判断文章价值，也避免大图影响加载速度和信息密度。

文章页使用独立阅读卡片承载标题、元数据、正文、标签、上一篇/下一篇和评论。正文排版针对 Markdown 的标题、段落、列表、引用、代码、表格、任务列表、图片、脚注和详情块进行了统一设计。

2. 清晰的信息层级

主题以深蓝文字、浅灰背景、白色卡片和可配置强调色构成主要视觉体系。圆角、细边框、轻阴影和适度留白用于区分内容层级，但不让装饰压过文章本身。

分类采用两列图标卡片，作者信息使用深色身份卡片，最新文章、最新评论、友情链接和订阅入口保持相同的组件语言，使整个侧栏既有辨识度又保持一致。

3. 为长文章设计的侧栏

首页侧栏用于内容发现，可显示作者信息、分类、友情链接、最新文章、最新评论和 RSS 订阅。

文章页和独立页面不显示分类与友情链接，侧栏按“作者信息 → 最新文章 → 订阅更新 → 文章目录”的顺序组织。文章目录放在最后，随页面正常滚动；到达页头下方后自动固定。目录或长侧栏超过视口时，侧栏内部出现独立细滚动条，正文仍保持自然滚动。

如果文章没有有效目录，桌面端固定作者信息和最新文章组合，避免长文章右侧出现大面积无内容区域。

4. 面向多种桌面分辨率

主题不使用单一固定宽度，而是根据 CSS 视口分档调整页面容器、主栏、侧栏和栏间距。普通笔记本保持紧凑，2K/4K 显示器则扩大有效阅读区域，减少两侧无效留白。

5. 移动端独立适配

960px 及以下自动转换为单栏，文章目录进入正文标题下方的折叠面板。760px 及以下启用移动导航，搜索面板、菜单、文章卡片、表格、代码块、评论表单和相邻文章导航都会重新排布。移动菜单使用独立覆盖层，避免菜单文字与页面正文重叠。

6. 本地优先与渐进增强

主题不依赖前端框架。即使 JavaScript 没有执行，服务端仍会输出标题、正文、分类、链接、评论和 SEO 语义数据。代码复制、目录高亮、深浅色切换、移动菜单、返回顶部和 Mermaid 图表属于渐进增强能力。

Mermaid 11.17.2 直接放在主题目录中，只在正文检测到 Mermaid 代码块时按需加载，不访问外部 CDN。普通首页和不含图表的文章不会产生 Mermaid 运行时请求。

亮点功能

Markdown 长文排版

• 支持 H1–H6、段落、列表、引用、链接、图片和分隔线。
• 支持行内代码、代码块、一键复制和长代码横向滚动。
• 支持表格窄屏滚动、任务列表、脚注和 details/summary 详情块。
• 正文图片自适应容器宽度并启用懒加载。
• 自动估算文章阅读时间。

H1/H2/H3 三级文章目录

• 自动读取正文中的 H1、H2、H3。
• 分别映射为一级、二级、三级嵌套目录。
• 自动为标题生成稳定锚点，并随滚动高亮当前章节。
• 图片型标题、空标题以及 H4–H6 不进入目录。
• 没有有效目录时自动隐藏目录模块。
• PC 端使用侧栏目录，移动端使用可折叠目录。

Mermaid 图表

主题支持以下常用 Mermaid 图表：

• flowchart：流程图
• sequenceDiagram：时序图
• classDiagram：类图
• stateDiagram / stateDiagram-v2：状态图
• erDiagram：ER 图

每个图表都支持：

• 图形与原始代码自由切换。
• 一键复制 Mermaid 源码。
• 原生全屏或页面内全屏预览。
• Esc 退出全屏。
• 根据浅色/深色主题重新渲染。
• 渲染失败时保留源码，不影响文章其他内容。
• 使用 securityLevel: strict 的严格安全模式。

Markdown 写法示例：

```mermaid
flowchart LR
    A[开始] --> B{条件成立？}
    B -->|是| C[继续执行]
    B -->|否| D[结束]
```

首页内容发现

• 纯文字文章卡片，不展示列表封面图。
• 两列彩色分类卡片及文章数量。
• 可配置友情链接，支持名称、URL 和简短说明。
• 最近 5 篇文章。
• 最近 5 条已审核评论，直接链接到文章内对应评论。
• RSS 订阅入口。

评论体验

• 使用 Typecho 1.3.0 原生评论数据和回复结构。
• 支持多条评论、长评论和嵌套回复。
• 评论作者、时间、内容和回复入口具有清楚层级。
• 评论表单支持登录用户和访客模式。
• 手机端自动调整头像、字段和嵌套间距。

深浅色模式

• 可设置跟随系统、默认浅色或默认深色。
• 访客可通过页头按钮随时切换。
• 手动选择保存在浏览器本地，下次访问继续使用。
• 代码、表格、评论、侧栏和 Mermaid 图表同步适配主题颜色。

搜索与导航

• 页头内置站内搜索面板。
• PC 端居中主导航，手机端折叠菜单。
• 提供“跳到正文”无障碍链接。
• 长页面显示返回顶部按钮。
• 文章页提供上一篇和下一篇导航。

首页与文章页的侧栏差异

SEO、Google 与 AI 爬虫适配

服务端语义 HTML

主题直接由 PHP 输出文章标题、正文、时间、作者、分类、标签、导航、侧栏和评论，不依赖 JavaScript 再生成核心内容。页面使用 header、nav、main、article、aside、footer 等语义元素，方便搜索引擎、阅读器和 AI 爬虫提取正文结构。

页面级 SEO

• 自动生成非空且与页面内容对应的 <title>。
• 输出页面描述、作者和 robots 策略。
• 首页及归档页输出 canonical；文章永久链接继续由 Typecho 管理。
• 输出 Open Graph 与 Twitter Card 元数据。
• 文章页输出发布时间、修改时间、分类和标签信号。
• 文章存在正文图片时，优先把第一张图片用于分享元数据，但不会在文章列表重新展示该图片。
• 搜索页使用 noindex,follow，404 页使用 noindex,nofollow。

JSON-LD 结构化数据

• 首页：WebSite + Blog + Person。
• 普通文章：BlogPosting + Person。
• 独立页面：Article + Person。
• 包含标题、摘要、永久链接、作者、分类、标签、发布时间和修改时间等字段。

Google 与 AI 入口

• 支持 Google Search Console HTML 验证码配置。
• 保留 Typecho RSS 2.0 与 Atom 自动发现。
• 项目另附网站根目录使用的 robots.txt 和 llms.txt。
• robots.txt 与 llms.txt 必须部署到网站文档根目录，放在主题目录中不会自动生效。
• SEO 和结构化数据可以帮助爬虫发现与理解内容，但不保证搜索排名、富结果展示或 AI 引用。

主题配置参数

进入 Typecho 后台的“控制台 → 外观 → 设置外观”即可配置以下 18 项参数。

友情链接示例：

aijun's blog|https://aijun.org/|夏爱军
Typecho|https://typecho.org/|轻量博客程序

推荐配置流程

1. 在 Typecho 基本设置中填写站点名称、站点地址和站点描述。
2. 在主题设置中填写品牌文字、作者名称、标语、简介和头像。
3. 配置 GitHub、联系邮箱、友情链接和备案号。
4. 选择主题强调色和默认颜色模式。
5. 根据内容类型决定是否启用文章目录、最新评论和各侧栏模块。
6. 填写 SEO 作者主页、默认分享图片和 Google Search Console 验证码。
7. 把项目 site-root/robots.txt 与 site-root/llms.txt 部署到站点根目录。
8. 清理 Typecho、反向代理和 CDN 缓存，然后分别检查首页、文章页、独立页面、评论页和手机端。

安装方法

1. 安装或升级到 Typecho 1.3.0。
2. 备份数据库、/usr 目录和现有主题配置。
3. 将完整的 SaBlog2026 文件夹上传到 /usr/themes/。
4. 登录 Typecho 后台，在“控制台 → 外观”中启用 SaBlog2026。
5. 进入“设置外观”完成主题参数配置。
6. 清理缓存并验证首页、文章、独立页面、评论、搜索和 404 页面。

主题切换不会主动修改文章、分类、标签或评论数据，但正式切换前仍建议完成备份。

内容编写建议

• 文章标题由 Typecho 管理，正文目录标题从 H1 开始组织，并保持 H1 → H2 → H3 的自然层级。
• 不要只用加粗段落模拟章节标题，否则不会进入文章目录。
• Mermaid 图表必须使用带 mermaid 语言标识的围栏代码块。
• 大表格应尽量控制列数；主题支持横向滚动，但手机端仍应避免单元格内容过长。
• SEO 摘要优先来自 Typecho 页面描述或文章摘要，应避免只有代码而没有文字说明。
• 需要社交分享大图的文章，可在正文前部放置一张与文章直接相关的图片。

兼容范围与功能边界

• 目标环境为 Typecho 1.3.0。
• 主题没有独立后端、数据库迁移、依赖管理器或构建系统。
• 不依赖 Handsome 主题函数，也不会自动迁移 Handsome 的主题设置。
• Handsome 专用短代码能否继续显示，取决于短代码由插件、文章 HTML 还是原主题实现，切换前应抽样检查历史文章。
• AI 摘要、点赞、豆瓣卡片、音乐播放器、访问统计和评论增强不属于当前主题核心能力，可通过独立插件扩展。
• Mermaid 只负责渲染合法语法，图表内容和结构仍由文章作者维护。
• 网站根目录中的 robots、sitemap 与服务器缓存策略不由主题安装包自动修改。

目录结构

SaBlog2026/
├─ assets/
│  ├─ css/style.css
│  ├─ img/default-avatar.png
│  ├─ js/theme.js
│  └─ vendor/mermaid/
├─ components/post-card.php
├─ 404.php
├─ archive.php
├─ comments.php
├─ footer.php
├─ functions.php
├─ header.php
├─ index.php
├─ page.php
├─ post.php
├─ sidebar.php
├─ screenshot.png
└─ style.css

许可说明

SaBlog2026 主题代码采用 MIT License。内置 Mermaid 11.17.2 使用 MIT License，许可证原文位于 assets/vendor/mermaid/LICENSE。主题内置头像由站点所有者提供，其图像著作权和使用权限独立于主题代码许可证。

SaBlog2026 希望在视觉表现、长文阅读、技术内容展示、搜索可理解性和维护成本之间取得平衡：保持页面足够精致，同时让写作者可以把主要精力放回内容本身。