ModernMag - 现代杂志主题

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

✨ 主题特色

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

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

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

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

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

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

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

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

⚙️ 功能配置

基本设置

Logo 设置

• 支持文字 Logo 或图片 Logo

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

Banner 横幅

• 开启/关闭首页横幅

• 自定义背景图片

• 设置标题和副标题

• 调整横幅高度

• 可添加搜索框

缩略图设置

• 上传默认缩略图

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

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

文章设置

列表显示

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

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

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

• 阅读时长估算

相关文章

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

• 推荐同分类文章

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

分类过滤

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

💻 代码高亮（核心功能）

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

边框样式（8 种可选）

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

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

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

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

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

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

高亮主题（200+ 种可选）

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

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

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

功能选项

• ✅ 显示代码块阴影

• ✅ 显示代码语言类型

• ✅ 显示行号

• ✅ 行号分割线

• ✅ 代码自动换行

• ✅ 设置代码块最大高度

工具按钮

• 📋 一键复制代码

• 🖥️ 全屏查看代码

• 📁 折叠/展开代码块

配置步骤

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

🙏 致谢

感谢以下项目的支持：

• Z-BlogPHP 团队

• Bootstrap 框架

• Highlight.js 项目