NuliBlog | 主题介绍

张宁的个人博客2026-08-05阅读 9好好上网

**一款面向内容阅读的 Z-BlogPHP 个人博客主题。**
> ![|30](https://imgs.zgc261.com/blog/2026/10/hA8dr3FwnBY7.png)https://github.com/zgc261/NuliBlog
> 
NuliBlog 以简洁的蓝色配色、清晰的内容层次和舒适的阅读排版为核心，适合发布技术笔记、学习记录、项目分享和生活随笔。主题兼顾电脑与手机浏览，提供可折叠导航、文章目录及显示状态记忆，让读者按自己的习惯安排阅读空间。

- **适用平台：** Z-BlogPHP
- **当前版本：** 1.0.0
- **主题目录：** `zb_users/theme/NuliBlog/`
- **示例网站：** [张宁的个人博客](https://zgc261.com/)

![](https://imgs.zgc261.com/blog/2026/10/8vKdbTUTMKfp.png)

## 设计风格

主题以蓝色作为主要强调色，搭配浅色导航、白色内容区域和柔和的外部背景。标题、链接和当前状态保持统一的视觉语言，便于浏览和定位。

正文采用 MiSans 字体，并提供本地字体分包资源。代码内容使用独立的等宽字体设置，使正文与代码各自保持合适的阅读效果。

## 主要功能
![](https://imgs.zgc261.com/blog/2026/10/DwGS3aDqzHpY.png)

### 响应式导航与工具栏

电脑端采用左侧导航，支持在完整菜单和图标模式之间切换。页脚随导航的展开状态显示或收起，为正文提供更多空间。

手机端使用顶部 Logo 和菜单按钮，点击展开导航。工具栏提供文章前后切换等操作，标签区域支持横向滑动，分页根据可用宽度精简显示。

### 清晰的文章列表

首页通过标题、摘要、分类和时间等信息呈现文章内容，便于快速浏览。

- 置顶文章使用底色和标记突出展示。
- 文章标题采用主题色，首页条目使用虚线分隔。
- 分类和标签筛选页面延续统一的列表风格。
- 摘要统一字号，并对显示内容进行基础清理。

### 自动文章目录

正文包含二级、三级标题时，主题自动生成目录，无需手动维护。

- 支持 Markdown `##`、`###` 渲染后的 H2、H3 标题。
- 电脑端在正文右侧显示目录，区域宽度为 250px。
- 二级标题默认使用主题色，三级标题通过缩进和颜色区分。
- 滚动时高亮当前章节，点击目录跳转至对应位置。
- 跳转预留顶部工具栏高度，避免标题被遮挡。
- 支持显示、关闭目录；窄屏使用弹出面板呈现。
- 兼容 Markdown 正文延迟渲染，没有对应小标题时不生成空目录。

### 菜单与目录状态记忆

文章页分别记住菜单、目录的显示状态。切换文章或刷新页面后，可以继续使用上次的阅读布局，也支持同时展开完整菜单和目录。

首页、分类及筛选页面使用另一组菜单记忆，首次在电脑端访问时默认展开，与文章页的设置互不影响。

状态保存在当前浏览器中，不跨设备同步；清除浏览器站点数据后会恢复默认设置。

### 适合长文的正文排版

主题统一正文与列表的基础字号，并针对常见内容提供样式：

| 内容 | 显示特点 |
| --- | --- |
| 正文与列表 | 统一字号，保持清晰的段落层次 |
| 标题 | 通过字号、间距和颜色区分层级 |
| 引用块 | 独立背景与边线，突出补充说明 |
| 表格 | 无外框、无竖线；表头下方加粗，其他水平分隔线使用灰色 |
| 宽表格与代码 | 支持区域内横向滚动，减少页面溢出 |
| 图片 | 随内容区域缩放，适配手机屏幕 |
| 文章关键词 | 以独立标签展示，支持点击浏览相关内容 |

### 紧凑的评论区域

发表评论区域与评论列表采用统一的视觉样式，减少不必要的纵向占用，保留作者信息、回复和翻页等常用操作。

### 后台主题配置

通过后台的 **NuliBlog 配置**入口，可设置 Logo、二维码、顶部标签数量、联系方式，以及网站描述和关键词等信息。

## 编辑器与插件配合

主题负责文章内容的展示与排版，可以配合富文本编辑器或 Markdown 编辑器使用。

Markdown 解析、Font Awesome 标记、流程图、数学公式、代码高亮及图片对象存储等能力，由对应编辑器或插件提供，不属于主题内置服务。使用时应先启用相应功能，再检查文章前台的实际显示效果。

## 安装与使用

1. 将完整的 `NuliBlog` 文件夹上传至网站的 `zb_users/theme/` 目录。
2. 在 Z-BlogPHP 后台的“主题管理”中启用 **NuliBlog**。
3. 打开 **NuliBlog 配置**，按需设置 Logo、网站描述等内容。
4. 更新后台缓存，刷新前台页面查看效果。

发布文章时，使用编辑器的标题功能设置内容层级，即可获得对应的正文排版和自动目录。更新主题时应同步相关模板、脚本与样式文件；若仍显示旧样式，可更新缓存并强制刷新浏览器。

## 第三方资源

主题使用的 Bootstrap、jQuery、MiSans 字体及其他第三方资源，应遵循各自的许可要求。字体与相关资源随主题目录提供，部署时请保持目录结构完整。

发表评论让交流带来新的灵感

一	二	三	四	五	六	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31