积木魔方 (Blocks) 模板介绍

让您的 Emlog 博客拥有杂志般精美的布局体验

这是什么模板？

积木魔方（英文名 Blocks）是专为 Emlog Pro 设计的一款多功能博客模板。就像名字"积木"一样，它允许您像搭积木一样自由组合首页的各个模块——轮播图、快捷入口、热门推荐、分类板块，想摆什么就摆什么，想要几个就要几个。

三大首页模式，一键切换

这是积木魔方最核心的特色。一个模板，三种截然不同的首页风格：

1. CMS 模式（杂志风格）

像新闻门户网站一样，首页从上到下分为多个区域：

┌──────────────────────────────────────┐
│  最新文章轮播（左轮播图 + 右文章列表）    │
├──────────────────────────────────────┤
│  快捷入口（4 个导航按钮）                │
├──────────────────────────────────────┤
│  热门推荐跑马灯                         │
├──────────────────────────────────────┤
│  分类板块 1（自定义布局：新闻/教程/软件…） │
├──────────────────────────────────────┤
│  分类板块 2                            │
├──────────────────────────────────────┤
│  ……更多分类板块                         │
└──────────────────────────────────────┘

适合内容丰富的网站，比如资讯站、资源分享站、软件下载站。

2. 传统博客模式

经典的"左图右文"文章列表。每篇文章显示缩略图、标题、摘要、发表日期等。和大多数博客风格一致，简洁直观。

3. 卡片模式

每篇文章以卡片形式展示，图文并茂，视觉上更现代。适合图片较多的博客，看起来像 Pinterest 或小红书风格。

在哪切换？ 后台 → 外观 → 模板设置 → 首页个性设置 → 首页模式

CMS 分类板块：真正的"搭积木"体验

如果您选择了 CMS 模式，最强大的功能就来了——CMS 分类板块。

每个板块可以单独配置：

• 显示哪个分类的文章
• 用什么布局样式
• 显示多少篇文章

内置 5 种布局样式

配置示例

在模板设置的输入框中，每行写一个板块：

1|news|10
3|tutorial|6
5|software|8

意思就是：分类 1 以新闻资讯样式展示 10 篇文章，分类 3 以教程样式展示 6 篇，分类 5 以软件样式展示 8 篇。板块会按照您写的顺序从上到下排列。

小技巧： 在行前面加 # 可以临时注释掉某个板块，下次想恢复时去掉 # 就行。

用户中心：把博客变成社区

积木魔方内置了完整的前台用户中心，登录后点击导航栏的"个人中心"就能进入。不需要进入后台就能管理自己的内容。

用户中心包含的功能

公开页面（无需登录也能看）

微语系统：博客版微博

积木魔方把 Emlog 的微语（类似微博/推文）功能做到了前台，让大家都能看到和互动。

微语广场 (/user/tweets) 就像一个微型微博：

• 所有人公开的微语按时间排列
• 支持文字、图片、视频（YouTube/Bilibili）
• 可以点赞、回复
• 支持 @ 提及回复
• 每条微语有独立的详情页

发表微语：已登录的用户在广场上可以直接发微语，带图片上传和链接插入功能。

后台设置：可以控制侧边栏显示位置（左/右）、每页显示数量等。

积分系统：让用户活跃起来

模板内置了完整的积分激励机制，像游戏一样给用户的行为"打分"：

积分记录页面可以查看完整的积分变动历史。

积分系统相关的数据库表在模板首次启用时自动创建，不需要手动操作。

深色模式：护眼又美观

• 自动跟随：第一次访问时，自动根据电脑/手机的系统设置（深色/浅色模式）显示对应风格
• 手动切换：点击页面右下角的月亮/太阳图标，一键切换
• 记住选择：切换后浏览器会记住您的偏好，下次访问自动应用
• 防闪烁：页面加载时不会出现"先白后黑"的闪烁

文章页功能丰富

单篇文章页面包含多个可选模块，都可以在后台独立开关：

• 社交分享：支持微信（扫码）、朋友圈（扫码）、QQ、QQ 空间、微博、Twitter、Facebook 共 7 个平台
• 微信二维码：一键生成当前文章的二维码，手机扫码就能看
• 点赞/点踩：给文章投票，支持取消操作
• 相关文章推荐：同分类的文章自动推荐
• 版权信息：可自定义版权声明，显示作者联系方式，一键复制文章链接
• 文章内图片点击放大：点击文章里的图片可以放大查看
• 自定义下载字段：文章可以附带下载链接，支持提取码、文件图标，内置 UC 网盘和 GitHub 选项

后台设置说明

积木魔方的后台设置通过 TplOptions 插件 实现（需要先安装并启用该插件）。设置入口：后台 → 外观 → 模板设置。

设置分为 6 个选项卡：

模板是如何与 Emlog 配合的？

积木魔方在 Emlog 的基础上做了大量扩展，以下是它的工作方式：

1. 模板设置（TplOptions 插件）

积木魔方的所有配置项（首页模式、颜色、开关等）都通过 TplOptions 插件 存储。数据存在 MySQL 数据库的 emlog_tpl_options_data 表中。模板代码中用 _g() 函数读取配置值，比如 _g('home_mode') 获取当前首页模式。

2. 钩子系统（Hooks）

模板在关键位置预留了 Emlog 的钩子，方便其他插件扩展：

3. 用户路由系统

模板通过 user.php 接管了 Emlog 的用户中心路由。在 Emlog 后台设置中，将"用户中心"导航项链接到模板路径，就可以让所有用户相关页面使用积木魔方的界面。

路由示例：

• /user/profile → 加载 user/profile.php
• /user/tweets → 加载 user/tweets.php
• /user/checkin → 加载 user/checkin.php

4. 数据库扩展

模板在 Emlog 原数据库基础上新增了表/字段：

• emlog_credits_log — 记录用户积分变动明细
• emlog_checkin — 记录每日签到和连续签到天数
• emlog_user.credits 字段 — 在用户表中增加积分字段

这些表在模板启用时通过 callback.php 的 callback_init() 函数自动创建。

5. 独立 AJAX 处理

模板的点赞/点踩（vote.php）、微语回复等功能使用独立的 PHP 文件处理 AJAX 请求，不依赖 Emlog 核心控制器，保证了兼容性。

6. 安全措施

• 所有输出都经过 htmlspecialchars() 转义，防止 XSS 攻击
• header.php 设置了 X-Frame-Options、X-Content-Type-Options、Referrer-Policy 安全响应头
• 侧边栏自定义文本做了 HTML 标签白名单过滤
• 输入数据使用 Emlog 的 Input 类，而不是直接操作 $_GET/$_POST

视觉风格自定义

导航栏颜色自适应

您可以在后台设置导航栏的背景色。模板会自动判断背景色的亮度：

• 如果背景色较深 → 文字自动显示为白色
• 如果背景色较浅 → 文字自动显示为深色

这样不管您选什么颜色，文字都能清晰可读。

圆角/扁平风格

一键切换全站风格：

• 圆角模式（默认）：按钮、卡片、输入框都有圆角，看起来更柔和现代
• 扁平模式：所有元素变为直角，风格更简洁利落

网站背景图片

可以上传自己喜欢的图片作为全站背景，建议使用浅色纹理大图。

辅助功能

模板还考虑到了以下细节：

• 响应式设计：完美适配电脑、平板、手机，在不同屏幕上都好看
• 打印样式：打印文章时自动优化排版，省墨省纸
• CDN 后备：Font Awesome 图标和 jQuery 如果 CDN 加载失败，会自动切换到本地文件
• 无障碍：支持屏幕阅读器、键盘导航、跳转到主要内容链接
• RSS 订阅：自动输出 RSS 订阅链接

环境要求

快速开始

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

模板首次启用时会自动创建积分系统所需的数据库表，无需手动操作。

积木魔方 v2.2.2 — 让 Emlog 博客更精彩