ModernMag - 现代杂志主题

一款现代化的 Z-BlogPHP 博客主题，采用清新优雅的杂志式布局设计，专注于提供优质的阅读体验。

✨ 主题特色

• 📱 完美响应式 - 自适应各种设备，手机、平板、电脑完美显示

• 🎨 现代化设计 - 清新优雅的界面，杂志式卡片布局

• 💻 代码高亮 - 内置强大代码高亮功能，支持 200+ 种主题配色

• 🔐 登录界面美化 - 渐变背景 + 毛玻璃效果，现代感十足

• 🔍 智能搜索 - 全站内容快速搜索

• ⚡ 首页性能面板 - Banner 右侧支持 SSE 实时性能监控，后台可开关

• 📊 数据统计 - 文章浏览量、评论数、阅读时长

• 🖼️ 缩略图支持 - 自动提取文章首图或自定义缩略图

• 🧭 导航体验优化 - Header 高度更紧凑，选中指示线贴合底边

• 🎯 SEO 优化 - 完善的搜索引擎优化设置

📦 安装方法

1. 下载主题压缩包并解压

2. 将 ModernMag 文件夹上传到网站的 zb_users/theme/ 目录

3. 登录网站后台，进入"主题管理"

4. 找到并启用 "ModernMag" 主题

5. 点击"主题设置"进行个性化配置

⚙️ 功能配置

基本设置

Logo 设置

• 支持文字 Logo 或图片 Logo

• 可自定义网站图标（Favicon）

Banner 横幅

• 开启/关闭首页横幅

• 自定义背景图片

• 设置标题和副标题

• 调整横幅高度

• 首页 Banner 右侧性能面板可独立开关

• 基于 SSE 的 1 秒实时状态推送

缩略图设置

• 上传默认缩略图

• 自动提取文章第一张图片

• 文章编辑时可单独设置缩略图

文章设置

列表显示

• 选择显示作者、发布日期、分类等信息

• 设置文章摘要字数（默认 200 字）

• 相对时间显示（如：3 天前）

• 阅读时长估算

相关文章

• 开启/关闭相关文章推荐

• 推荐同分类文章

• 设置显示数量（默认 6 篇）

分类过滤

• 可设置某些分类不在首页显示

💻 代码高亮（核心功能）

主题内置了专业的代码高亮功能，无需安装插件。

边框样式（8 种可选）

• 明亮风格 - 简洁白色背景

• 暗黑风格 - 深色护眼背景

• Mac 彩色明亮 - Mac 风格三色按钮，明亮背景（推荐⭐）

• Mac 彩色暗黑 - Mac 风格三色按钮，暗黑背景

• Mac 明亮/暗黑 - 简约 Mac 风格

• Layui 明亮/暗黑 - 框架式风格

高亮主题（200+ 种可选）

• 推荐：a11y-light（明亮）、atom-one-dark（暗黑）

• 流行：github、vs2015、monokai、dracula、nord 等

• 可在设置页面实时预览效果

功能选项

• ✅ 显示代码块阴影

• ✅ 显示代码语言类型

• ✅ 显示行号

• ✅ 行号分割线

• ✅ 代码自动换行

• ✅ 设置代码块最大高度

工具按钮

• 📋 一键复制代码

• 🖥️ 全屏查看代码

• 📁 折叠/展开代码块

使用方法

在文章编辑器中使用 Markdown 语法：

```javascript
function hello() {
    console.log('Hello World');
}
```（这里去掉反斜杠）

或者使用 HTML 编辑器：

<pre><code class="language-php">
<?php
echo "Hello World";
?>
</code></pre>

配置步骤

1. 进入主题设置 > 💻 代码高亮

2. 开启代码高亮功能

3. 选择喜欢的边框样式（推荐 Mac 彩色明亮）

4. 选择高亮主题（推荐 a11y-light）

5. 勾选需要的功能选项

6. 点击保存设置

SEO 设置

全站 SEO

• 自定义网站标题

• 设置 Meta 关键词

• 设置 Meta 描述

单独 SEO

• 每篇文章可单独设置标题、关键词、描述

• 每个分类可单独设置 SEO 信息

• 每个标签可单独设置 SEO 信息

在文章/分类/标签编辑页面底部可以找到 SEO 设置选项。

侧边栏设置

• 开启/关闭侧边栏

• 显示热门文章

• 显示最新评论

• 显示标签云

• 显示分类列表

社交链接

在页脚添加社交媒体链接：

• 微博

• GitHub

• Twitter

• 邮箱

🔐 登录与用户系统

前端登录入口

• 导航栏右侧自动显示登录按钮

• 已登录用户显示用户名和下拉菜单

• 快速访问后台管理、修改密码、退出登录

• 圆角设计，悬停动画效果

登录界面美化

• 紫色渐变背景，科技感十足

• 毛玻璃效果登录框

• 装饰性背景光效

• 平滑的动画过渡

• 输入框聚焦高亮

• 按钮悬停抬起效果

• 响应式设计，支持移动端和暗色模式

无需任何配置，启用主题即可使用。

其他功能

• 返回顶部按钮（可开关）

• 文章页评论功能（可开关）

• 页面评论功能（可开关）

• 首页性能面板后台可配置显示

• 顶部导航高度与激活态指示线优化

• 外链新窗口打开

• 灰色模式（哀悼日）

📝 使用技巧

如何设置文章缩略图？

1. 在文章编辑页面，找到"自定义缩略图"输入框

2. 点击"上传图片"按钮选择图片，或手动输入图片地址

3. 如果不设置，主题会自动提取文章第一张图片

4. 如果都没有，会显示默认缩略图

如何优化 SEO？

1. 在主题设置中填写网站的标题、关键词、描述

2. 编辑文章时，在页面底部填写该文章的 SEO 信息

3. 编辑分类/标签时，也可以单独设置 SEO 信息

4. 使用有意义的 URL 别名

如何调整首页布局？

1. 在主题设置 > Banner 横幅，可以开关横幅

2. 在主题设置 > 侧边栏，可以开关侧边栏

3. 在主题设置 > 文章列表，选择要显示的信息

❓ 常见问题

Q: 代码高亮不显示怎么办？

A: 请检查：

1. 主题设置中是否开启了代码高亮功能

2. 代码块是否使用了正确的格式（三个反引号或 <pre><code>）

3. 清理浏览器缓存后重新访问

Q: 缩略图不显示？

A: 请检查：

1. 是否上传了默认缩略图

2. 是否开启了"自动提取文章首图"

3. 文章中是否包含图片

Q: 如何更换配色？

A: 目前主题使用固定配色方案，如需自定义配色，可以在 style/style.css 文件中修改 CSS 变量。

Q: 主题支持哪些浏览器？

A: 支持所有现代浏览器（Chrome、Firefox、Safari、Edge）以及 IE11+。

Q: 如何隐藏某些分类？

A: 在主题设置 > 文章列表 > 分类过滤，输入要隐藏的分类 ID（多个用逗号分隔）。

Q: 代码高亮会影响性能吗？

A: 不会。代码高亮仅在包含代码块的文章页面加载，不影响整体性能。

📞 技术支持

如有问题或建议，欢迎联系：

• 作者：Yojack

• 邮箱：laylwenl@gmail.com

• 网站：https://lwenl.cn

🔄 更新日志

v1.2.4 (2026-05-18)

• ⚡ 新增首页 Banner 站点性能面板，支持实时延迟、SQL 查询、服务响应与峰值内存展示

• 📡 性能面板改为 SSE 推送，默认 1 秒刷新一次，并保留非 EventSource 浏览器的回退逻辑

• 🎛️ 后台新增 Banner 性能面板显示开关，可按需启用或关闭

• 🧹 移除首页旧的文章、分类、标签、浏览统计排布，首屏信息更聚焦

• 🧭 优化顶部 Header 高度、品牌区比例与导航间距

• 🎯 调整导航激活蓝线位置，使其贴合 Header 底部边框

v1.2.3 (2026-05-07)

• 🔒 修复 XSS 安全漏洞，所有用户输入都经过严格过滤

• ♻️ 重构 SEO 设置代码，提取公共函数减少重复

• ⚡ 优化代码高亮加载逻辑，添加资源版本控制

• 🎨 登录界面样式独立为 CSS 文件，便于维护

• ✅ 添加配置验证功能，确保数据安全性

• 🐛 修复评论错误处理逻辑，提供更友好的提示

• 📦 优化文件结构，分离评论和动画增强功能

• 🚀 性能优化，减少不必要的资源加载

• 📝 完善代码注释和文档

v1.1.0 (2025-11-06)

• ✅ 完全原创化重构，移除第三方项目痕迹

• ✅ 优化目录结构，提升代码质量

• ✅ 完善代码高亮功能

• ✅ 新增登录界面美化（渐变背景 + 毛玻璃效果）

• ✅ 优化文档说明

v1.0.0 (2025-10-05)

• 首次发布

• 完整的响应式布局

• 内置代码高亮功能

• 丰富的主题配置选项

🙏 致谢

感谢以下项目的支持：

• Z-BlogPHP 团队

• Bootstrap 框架

• Highlight.js 项目

如果觉得主题不错，欢迎分享给更多人使用 ⭐️