积木魔方 (Blocks) 模板

Emlog Pro 多模式自适应模板 — CMS / 传统博客 / 卡片 三种首页布局自由切换

• 模板名称： 积木魔方 (Blocks)
• 版本： 2.2.4
• 作者： zhongyishenghi
• 适用于： Emlog Pro

目录

• 功能特性
• 环境要求
• 安装与激活
• 后台配置详解
  • 全局设置
  • 首页公共设置
  • 首页个性设置
  • 分类页设置
  • 文章页设置
  • 微语页设置
• 首页模式说明
  • CMS 模式
  • 传统博客模式
  • 卡片模式
• CMS 分类板块配置指南
• 用户中心
• 积分系统
• 深色模式
• 社交分享
• 文件结构
• 自定义与二次开发
• 常见问题

功能特性

布局与展示

• 三种首页模式：CMS 杂志式多分类展示、传统博客左图右文列表、图文卡片网格
• CMS 分类板块：5 种内置布局（默认文章列表、新闻资讯、网格卡片、教程布局、软件布局），自由配置分类与顺序
• 最新文章轮播：首页左侧轮播图 + 右侧最新文章列表
• 快捷入口：可配置 4 个快捷导航按钮
• 热门推荐跑马灯：按浏览量自动排行，横向滚动展示
• 分类页双样式：传统列表或网格卡片，可独立控制侧边栏
• 文章页灵活布局：独立控制侧边栏显示/隐藏

用户系统

• 完整用户中心：个人资料、账户设置、微语管理、文章管理、草稿箱、评论管理、回复管理
• 每日签到：积分签到系统，支持连续签到奖励
• 积分系统：登录、发表文章、评论、浏览文章等行为自动获得积分
• 积分记录：完整积分变动历史

微语系统

• 微语广场：微博风格卡片布局，展示所有用户公开微语，支持分页浏览
• 微语详情页：完整微语内容、全部回复、回复表单，动态页面标题
• 回复系统：登录用户直接回复，未登录用户可填写昵称+邮箱回复；支持 @提及回复、展开/收起
• 点赞功能：支持点赞/取消点赞
• 发表微语：登录用户可在广场直接发表微语
• 后台设置：侧边栏显示/隐藏、每页显示数量、侧边栏左右位置切换

视觉与体验

• 深色模式：跟随系统偏好或手动切换，全站暗色适配
• Font Awesome 6 图标：全站统一图标体系，CDN 加载含本地后备
• 社交分享：支持微信好友、朋友圈、QQ、QQ 空间、微博、X (Twitter)、Facebook
• 微信分享二维码：一键生成当前页面二维码
• 文章版权信息：可配置版权声明、作者联系方式、文章链接一键复制
• 相关文章推荐：基于同分类的文章推荐
• 文章点赞/点踩：支持点赞和点踩操作，可在后台模板设置中控制显示/隐藏
• 演示地址入口：文章自定义字段中填写在线演示网址，前台独立展示入口按钮
• 文章附件/网盘：支持登录下载、提取码、文件图标映射，内置 UC 网盘、GitHub 平台选项

安全与性能

• 安全响应头：X-Frame-Options、X-Content-Type-Options、Referrer-Policy
• CDN 后备机制：Font Awesome 和 jQuery 均具备 CDN 加载失败自动切换本地
• 深色模式防 FOUC：内联脚本在渲染前读取主题偏好，消除闪烁
• 响应式设计：完整适配桌面端、平板、手机
• 打印样式：文章页专用打印优化
• 无障碍：跳转链接、aria 标签、focus-visible 焦点样式、prefers-reduced-motion

环境要求

安装与激活

1. 将 blocks 文件夹上传到 content/templates/ 目录
2. 登录 Emlog 后台 → 外观 → 模板
3. 找到"积木魔方"模板，点击 启用
4. 启用后进入 模板设置 根据需求配置各项参数

提示： 首次启用时模板会自动执行初始化回调（创建积分系统所需的数据库表等）。如果从旧版本升级，请重新保存一次模板设置以确保回调完整执行。

后台配置详解

模板提供 6 个配置选项卡，通过后台 外观 → 模板设置 访问。

1. 全局设置

2. 首页公共设置

3. 首页个性设置

4. 分类页设置

5. 文章页设置

6. 微语页设置

首页模式说明

CMS 模式

杂志式多分类展示，从上到下依次排列：

┌──────────────────────────────────────┐
│  最新文章轮播（左图轮播 + 右列文章）      │
├──────────────────────────────────────┤
│  快捷入口（4 个导航按钮）                 │
├──────────────────────────────────────┤
│  热门推荐跑马灯                          │
├──────────────────────────────────────┤
│  分类板块 1（可配置布局与排序）            │
├──────────────────────────────────────┤
│  分类板块 2                            │
├──────────────────────────────────────┤
│  ...                                  │
└──────────────────────────────────────┘

适合内容丰富的博客、资讯类网站。

传统博客模式

标准的左图右文文章列表，与 Emlog 默认模板风格类似。每篇文章显示缩略图、标题、摘要、元信息。

卡片模式

图文卡片网格布局，每篇文章以卡片形式展示，适合图片较多的博客。

CMS 分类板块配置指南

在"首页个性设置"的 CMS 分类板块配置 中，每行定义一个板块，格式如下：

分类ID|布局样式|文章数量

参数说明

布局类型

示例

1|default|8
3|news|10
5|live|6
7|tutorial|4
9|software|12

上面配置表示：分类 1 以 default 布局显示 8 篇文章，分类 3 以 news 布局显示 10 篇，以此类推。板块按配置顺序从上到下排列。

提示

• 如果指定了不存在的分类 ID，该板块会被自动跳过
• 如果想临时隐藏某个板块但保留配置，可以在这行前面加 # 注释掉

用户中心

模板内置完整的前台用户中心，登录后通过导航栏"个人中心"进入。

功能页面

积分系统

模板内置完整的积分激励系统。

积分规则

注意： 积分系统相关数据库表在模板首次启用时自动创建。切换模板后重新启用本模板也会自动重建。

深色模式

模板支持完整的深色模式：

• 自动检测：首次访问时根据系统 prefers-color-scheme 自动选择
• 手动切换：点击右下角的月亮/太阳按钮切换
• 持久保存：选择结果保存在 localStorage，下次访问自动生效
• 防闪烁：内联脚本在页面渲染前读取偏好设置，消除明暗切换时的白色闪烁

切换按钮位置：页面右下角固定位置浮动的圆形按钮。

社交分享

文章页底部提供社交分享按钮，支持：

备选方案： 如果分享 API 加载失败，会自动复制链接到剪贴板作为后备。

文件结构

content/templates/blocks/
├── 404.php                  # 404 页面
├── README.md                # 本说明文件
├── callback.php             # 模板激活/停用回调
├── credits.php              # 积分系统
├── custom_fields.php        # 自定义字段模板
├── echo_log.php             # 文章详情页
├── footer.php               # 页脚 + 登录弹窗
├── functions.php            # 辅助函数
├── header.php               # 头部 + 导航栏
├── log_list.php             # 首页文章列表
├── module.php               # 模块函数库（widget、评论、导航等）
├── options.php              # 模板设置配置文件
├── page.php                 # 独立页面模板
├── plugins.php              # 插件注册（钩子）
├── pw.php                   # 加密文章密码输入页
├── side.php                 # 侧边栏
├── user.php                 # 用户中心入口
├── preview.jpg              # 模板预览图
│
├── css/
│   ├── style.css            # 主样式表
│   ├── user-center.css      # 用户中心样式
│   └── markdown.css         # Markdown 内容样式
│
├── js/
│   └── main.js              # 主 JavaScript
│
├── images/                  # 图片资源
│
└── user/                    # 用户中心子页面 + 公开页面
    ├── _sidebar.php         # 用户中心侧边导航
    ├── account.php          # 账户设置
    ├── archive.php          # 文章归档页（公开）
    ├── articles.php         # 我的文章
    ├── checkin.php          # 每日签到
    ├── comments.php         # 我的评论
    ├── credits_log.php      # 积分记录
    ├── drafts.php           # 我的草稿
    ├── edit_article.php     # 编辑文章
    ├── profile.php          # 个人资料
    ├── replies.php          # 我的回复
    ├── tags.php             # 标签列表页（公开）
    ├── tweets.php           # 微语广场（公开）
    ├── view_tweet.php       # 微语详情页（公开）
    └── weiyu.php            # 我的微语

自定义与二次开发

CSS 变量

模板使用 CSS 自定义属性（变量）统一管理颜色和尺寸，在 style.css 的 :root 和 [data-theme="dark"] 中定义。修改变量值可快速全局换肤：

:root {
    --primary: #0f52ba;          /* 主题主色 */
    --primary-light: #42a5f5;    /* 主题浅色 */
    --primary-dark: #0d47a1;     /* 主题深色 */
    --bg-card: #ffffff;          /* 卡片背景 */
    --text-primary: #1a1a2e;     /* 主要文字色 */
    --radius-lg: 16px;           /* 大圆角 */
    --shadow-md: 0 6px 20px rgba(15,82,186,0.12);  /* 阴影 */
}

导航栏深浅色自适应

导航栏背景色通过 options.php 配置。模板会自动计算背景色亮度，当背景色较亮时自动添加 .header-is-light 类，确保文字在浅色背景上可读。

钩子（Hooks）

模板在以下位置预留了 Emlog 钩子：

常见问题

Q: 启用模板后页面空白怎么办？

检查是否已安装并启用了 TplOptions 插件。本模板依赖该插件提供模板设置功能。

Q: 如何更换首页轮播图？

在后台 → 模板设置 → 首页公共设置 → 轮播图文章 ID 中填写 3 篇文章的 ID。轮播图会使用这些文章的封面图片。

Q: 如何添加更多的快捷入口？

目前支持 4 个快捷入口。如需增加，编辑 options.php 和 log_list.php 中添加对应的配置项和渲染代码。

Q: 积分系统不工作怎么办？

确认模板已正确激活（检查 callback.php 是否执行了 callback_init()）。如果数据库表未自动创建，可手动执行 credits.php 中的 credits_init() 函数，或在后台重新保存一次模板。

Q: 如何完全禁用积分系统？

在后台 → 插件/模板中移除 credits.php 的钩子注册（编辑 plugins.php 注释相关行），或直接删除 credits.php 文件。

Q: 深色模式切换按钮不显示？

检查浏览器是否禁用了 JavaScript。深色模式切换依赖 JS 实现。如果按钮被其他元素遮挡，检查 back-to-top 按钮的 z-index。

Q: 如何更新 Font Awesome 图标版本？

修改 header.php 和 pw.php 中 font-awesome CDN 链接的版本号（当前为 6.5.1），同时更新 css/all.min.css 本地后备文件。

Q: CMS 分类板块不显示内容？

确认：

1. 对应分类下有已发布的文章
2. 分类板块配置格式正确（分类ID|布局|数量）
3. 分类 ID 存在（可在后台分类管理中查看）

更新日志

v2.2.4

• 修复： CMS 模式 news 板块轮播图链接全部指向最后一张图 — 非活跃幻灯片添加 pointer-events: none; z-index: 0，活跃幻灯片添加 pointer-events: auto; z-index: 1，防止 DOM 顺序靠后的幻灯片拦截点击事件
• 修复： Hero 区域轮播图同样存在链接问题 — 应用相同的 pointer-events / z-index 修复
• 修复： news 板块轮播右下角指示点被活跃幻灯片覆盖 — 指示点容器添加 z-index: 2，确保始终在幻灯片之上
• 优化： CSS 缓存版本号更新

v2.2.3

• 修复： 微语图片九宫格分组不正确 — 行末内联图片（文字后紧跟的图片）未纳入网格分组，已修复
• 修复： 微语图片4张时布局错误（3+1）— 4张图应显示为2×2，现单独分配 .grid-4 类名
• 修复： Chrome 浏览器上传微语图片失败 — 上传完成前清空文件input导致文件引用被回收，改为上传完成后才清空；添加 FileReader 错误处理和 AJAX 错误详情日志
• 修复： 微语广场所有注册用户均可发布微语 — 放宽权限判断条件
• 修复： 微语前台图片未加入 Emlog 资源库 — upload2local() 后补充 Media_Model::addMedia() 调用

v2.2.2

• 新增： 微语多媒体支持 — 图片上传、链接插入、YouTube/Bilibili 视频嵌入，列表页和详情页完整渲染
• 新增： 微语图片九宫格展示 — 多张图片自动排列为 CSS Grid 网格布局（1-9张自适应），正方形裁剪
• 新增： 微语内联编辑 — 已登录作者可在微语广场直接编辑自己的微语内容
• 新增： 微语长内容展开/收回 — 超过200字的微语自动截断为纯文本预览，点击展开查看完整内容，收回时自动定位到当前微语
• 新增： 微语发布工具栏布局优化 — 图片/链接按钮与发布按钮同行，发布按钮靠右对齐
• 修复： 微语嵌入视频导致侧边栏被挤压到下方 — 修复占位符替换顺序，防止 <div> 嵌套在 <p> 内
• 修复： 微语图片九宫格不生效 — 修复 Parsedown 将连续图片行渲染到同一 <p> 标签的问题
• 修复： 微语详情页图片未渲染（显示原始 Markdown）— 改用 render_tweet_content() 渲染
• 优化： 页脚快捷入口链接在新标签页打开（target="_blank"）

v2.2.1

• 修复： 搜索框点击后出现蓝色阴影边框问题
• 修复： 部分文章页面右侧出现绿色小圆点和横向滚动条问题
• 修复： 微语页面移动端错位问题
• 优化： 响应式断点从 1024px 调整为 768px
• 优化： 侧边栏粘性跟随（sticky）功能完善

v2.2.0

• 新增： 文章归档页 /user/archive — 可折叠年/月/文章三级结构，直接 SQL 查询显示每篇文章标题与分类
• 新增： 标签列表页 /user/tags — 云/列表双模式切换，每标签独立 RGB 配色
• 新增： 微语广场 /user/tweets — 微博风格卡片布局，展示所有用户公开微语，支持分页浏览
• 新增： 微语详情页 /user/tweets?view=ID — 完整微语内容、全部回复、回复表单、动态页面标题与描述
• 新增： 微语回复系统 — 登录用户直接回复，未登录用户可填写昵称+邮箱回复；支持 @提及回复、回复展开/收起
• 新增： 微语点赞/取消点赞功能
• 新增： 发表微语表单（登录用户，管理员和编辑角色）
• 新增： 微语后台设置 — 侧边栏显示/隐藏、每页显示数量、侧边栏位置（左侧/右侧）
• 新增： 页脚快捷导航 — 模板设置可自由添加/删除/排序链接，| 分隔显示在版权区下方
• 优化： 批量加载作者与回复作者信息，避免 N+1 查询问题
• 优化： 归档页和标签页复用独立页面白色卡片容器，视觉统一
• 优化： 完整深色模式与移动端响应式适配

v2.1.5

• 优化： 文章点赞/点踩功能改为后台可设置显示/隐藏（模板设置 → 文章页设置）
• 新增： 自定义网盘下载新增"GitHub平台"选项
• 修复： 首页 Hero 区"最新文章"列表未按后台全站置顶排序的问题

v2.1.4

• 新增： 文章点赞/点踩功能 — 支持 Emlog Pro 2.6.16+ 原生 dislike 机制，前端异步交互
• 新增： 自定义网盘下载增加 UC 网盘选项
• 新增： 自定义字段新增演示地址字段，前台独立展示入口按钮
• 优化： 点赞/点踩区块位置调整至标签之后、版权信息之前
• 优化： CSS/JS 缓存版本号更新

v2.1.3

• 新增： 网站背景图片自定义上传 — 后台模板设置 → 全局设置可自由更换全站背景
• 新增： 网站圆角/扁平风格切换 — 后台可一键切换全站圆角或直角风格
• 优化： 全站圆角值统一为 CSS 变量管理体系（--radius-sm/md/lg/xl），便于二次开发
• 修复： Markdown 表格列宽不均衡 — 修复 style.css 与 markdown.css 冲突的表格规则，移除 th:last-child { width: 100% }，单元格文本自动换行
• 优化： CSS/JS 缓存版本号更新

v2.1.2

• 修复： 个人中心退出登录按钮点击后未实际注销 — 修复表单提交与跳转的竞态条件
• 优化： 退出登录改用直接链接，简化流程

v2.1.1

• 修复： $blogname 未定义错误，改用 Option::get('blogname')（header/footer）
• 修复： 文章详情页和单页评论区内容不显示 — 适配 Emlog Pro 新版 $comments 数组结构
• 修复： 评论 "Undefined offset" 及空指针报错 — 增加 null 安全检查
• 修复： PC 端导航栏误显示汉堡菜单图标 — 恢复丢失的 .menu-toggle CSS 选择器
• 修复： 手机端横向滚动条 — CSS Grid 溢出控制
• 优化： 手机端最新文章区由隐藏改为自适应单列布局（轮播 + 文章列表）
• 优化： 手机端快捷入口区多余空白间距清理
• 优化： 手机端轮播高度、列表内边距、排版字号适配
• 优化： 移除约 87 行死 CSS（深色模式冗余、未用响应式规则）
• 优化： 新增 TplOptions 兼容性检查，防止白屏
• 优化： 新增 RSS 订阅链接
• 文档： 新增 README.md 详细说明文档和 intro.md 简介

v2.1.0

• 集成积分系统（签到、发文、评论积分）
• 完整用户中心（10 个功能页面）
• 新增三种首页模式（CMS / 传统 / 卡片）
• 新增 CMS 分类板块自定义布局
• 完整深色模式支持
• 社交分享（7 个平台）
• 微信二维码分享
• 文章版权信息
• Font Awesome 6.5.1 图标
• 响应式设计全面优化
• 安全响应头
• CDN 后备机制
• 无障碍支持（跳转链接、aria、reduced-motion）

v2.0.0

• 初始发布