Discuz! DIY 全方位教程：从入门到精通

什么是 Discuz! DIY？

DIY 是 Do It Yourself 的缩写，在 Discuz! 中，它指的是“页面自定义”功能，这个功能允许你无需编写任何代码，通过拖拽、点击等可视化操作，来自由设计和搭建论坛首页、频道页、自定义页面等。

核心优势：

• 零代码门槛：适合所有站长，无论你是否懂 HTML/CSS/PHP。
• 所见即所得：在后台拖拽模块，前台实时看到效果。
• 高度灵活：可以创建出独一无二的论坛首页，打造品牌特色。
• 功能强大：内置多种模块（文章、帖子、用户、图片等），可满足绝大多数展示需求。

第一部分：准备工作与核心概念

在开始之前,我们先了解几个核心概念，这会让你事半功倍。

DIY 的两种模式

Discuz! DIY 主要在 模板 和 插件 中进行。

• 模板 DIY：这是最常用、最核心的 DIY 模式，它直接作用于你当前使用的主题（模板）的首页，我们通常说的“DIY 首页”指的就是这个。
• 插件 DIY：某些功能型插件（如门户、商城）会提供自己的 DIY 功能，用于自定义该插件相关的页面，原理与模板 DIY 类似。

本教程将重点讲解模板 DIY。

DIY 的三大核心元素

一个 DIY 页面由以下三部分组成：

1. 布局：页面的“骨架”，决定了内容的排列方式，它由多个“区块”组成。

   • 区块：页面中的一个区域，顶部横幅”、“左侧内容区”、“右侧边栏”等。
   • 区块位置：每个区块都有一个固定的位置名称（如 header, main, footer, left, right），你可以在后台为不同位置设置不同的样式。

2. 模块：页面的“血肉”，是填充在区块里的具体内容。

   • 模块类型：Discuz! 提供了丰富的模块，如：
     • 文章模块：调用指定分类的文章列表。
     • 帖子模块：调用指定版块的最新/热门/精华帖子。
     • 图片模块：调用指定分类的图片。
     • 友情链接：展示你的友情链接。
     • 自定义 HTML：最强大的模块！允许你插入自定义的 HTML、CSS、JavaScript 代码，实现无限可能。
     • 用户模块：展示最新注册用户、积分排行等。
     • 投票/数据调用 等。

3. 模板：页面的“皮肤”，决定了页面的整体视觉风格。

   
   （图片来源网络，侵删）

   每个主题（模板）都可以有自己的 DIY 布局，这意味着你切换主题后，需要重新 DIY。

第二部分：实战教程 - DIY 你的论坛首页

假设我们要将默认的 Discuz! 首页改造成一个更具吸引力的门户首页。

进入 DIY 后台

1. 登录你的 Discuz! 后台。

2. 在顶部菜单栏找到 界面 -> 页面管理。

3. 在“页面管理”页面，你会看到当前主题的所有页面，默认情况下，首页的标识是 portal_index，点击 首页 后面的 [DIY] 按钮。

4. 系统会弹出一个提示,告诉你 DIY 模式会锁定模板，防止被覆盖，点击 “进入DIY”。

你将看到 DIY 的主界面，通常分为三个部分：

• 左侧：模块库，里面有你所有可以使用的模块。
• 中间：预览区，显示你的页面效果，你可以直接在这里拖拽。
• 右侧：当前页面结构，显示你页面中已经添加的模块和布局。

规划你的首页布局

在动手之前,先想好首页要有什么，我们规划如下布局：

+----------------------------------+
|         顶部横幅 (Banner)         |
+------------------+---------------+区       |  右侧边栏     |
|  - 最新文章       |  - 热门帖子   |
|  - 精华推荐       |  - 最新用户   |
|                  |  - 友情链接   |
+------------------+---------------+
|         底部信息 (Footer)         |
+----------------------------------+

添加和布局区块

1. 添加顶部横幅：

   • 在右侧的“页面结构”中，找到 header（顶部）区块。
   • 点击它旁边的 号，选择 添加模块。
   • 在弹出的窗口中,选择 自定义 HTML 模块。
   • 给模块起个名字,顶部 Banner”。
   • 框中,插入你的 HTML 代码，例如一个简单的图片轮播：

     <div style="width: 100%; height: 200px; background-color: #f0f0f0; text-align: center; line-height: 200px;">
         <img src="https://你的域名/images/banner.jpg" style="max-width: 100%; max-height: 100%;" />
     </div>

   • 点击 “提交”。
   • 回到预览区,你可以拖动这个模块，调整它在 header 区块中的位置。

2. 构建左右主内容区：

   • 在右侧的“页面结构”中，找到 main区）。
   • main 区块默认包含 left（左）和 right（右）两个子区块，没有，你可以点击 main 区块的 号，添加一个 区块，并命名为 left，再添加一个，命名为 right。
   • 为左右区块设置宽度：
     • 在右侧的“页面结构”中，点击 left 区块。
     • 在下方出现的设置中,找到 区块宽度，设置为 65% 或 750px。
     • 点击 right 区块，将其宽度设置为 35% 或 300px。
     • 这样,你的页面就分成了左右两栏。

向区块中添加功能模块

1. 填充左侧内容区：

   • 点击右侧的 left 区块，点击其旁边的 号，选择 添加模块。
   • 添加最新文章：
     • 选择 文章 模块。
     • 命名为“最新资讯”。
     • 在设置中,选择你要调用的文章分类，设置显示数量（如10篇），排序方式（如发布时间倒序）。
     • 提交。
   • 添加精华推荐：
     • 再次点击 left 区块的 号，选择 帖子 模块。
     • 命名为“精华推荐”。
     • 在设置中,选择“精华”帖子，选择版块，设置数量。
     • 提交。

2. 填充右侧边栏：

   • 点击右侧的 right 区块，点击其旁边的 号。
   • 添加热门帖子：选择 帖子 模块，设置为“热门”排序。
   • 添加最新用户：选择 用户 模块，设置为“最新注册”。
   • 添加友情链接：选择 友情链接 模块，选择你要显示的类型（文本、图片等）。

调整、预览与发布

1. 拖拽排序：在右侧的“页面结构”中，你可以通过拖拽模块来调整它们的上下顺序。
2. 实时预览：随时切换到前台浏览器标签页，刷新页面，查看你的 DIY 成果。
3. 调整样式（进阶）：
   • 如果你对某个模块的样式不满意（比如标题颜色、间距），可以回到后台。
   • 在右侧的“页面结构”中，点击该模块。
   • 在设置下方,找到 模块样式 或 自定义样式。
   • 在这里你可以编写简单的 CSS 代码来覆盖默认样式，想把标题改成红色：

     .ms_title a { color: red !important; }

     注意：使用 !important 可以提高你的 CSS 优先级。

4. 保存并发布：
   • 当你对所有修改都满意后,回到 DIY 后台界面。
   • 点击右上角的 “提交” 按钮。
   • 系统会提示你“DIY 锁定已被解除”，并生成一个缓存，再次点击 “提交” 即可。
   • 你的新首页已经正式上线了！

第三部分：高级技巧与常见问题

使用“自定义 HTML”模块实现复杂效果

这是 DIY 的精髓，你可以用它来做：

• 第三方代码集成：如 Google Analytics 百度统计、客服代码、在线客服等。
• HTML5 动画：结合 CSS3 和 JavaScript，制作酷炫的动画效果。
• 自定义表单：插入 <form> 标签，制作简单的报名、反馈表单。
• 嵌入第三方内容：如嵌入优酷视频、Google 地图、微博秀等。

示例：嵌入一个优酷视频 在“自定义 HTML”模块中，插入优酷提供的 <iframe> 代码即可。

如何创建一个独立的自定义页面？

除了首页,你可能需要一个“关于我们”或“联系方式”的独立页面。

1. 进入 界面 -> 页面管理。
2. 点击右上角的 “创建页面”。
3. 填写页面名称（如“关于我们”）和页面标识（如 about_us，英文，不能重复）。
4. 选择一个布局（通常选择 portal 布局，它包含左右区块）。
5. 点击 “创建”。
6. 创建成功后,你会进入该页面的 DIY 模式，操作方法和首页 DIY 完全一样。
7. DIY 完成并提交后，你还需要在 导航设置 中为这个新页面添加一个菜单链接，让用户可以访问到。

常见问题与解决方法

• Q: DIY 后，前台页面没有变化，还是旧的样子？

  • A:
    1. 检查是否点击了右上角的 “提交” 按钮。
    2. 检查浏览器是否开启了缓存,尝试 强制刷新（Ctrl + F5 或 Cmd + Shift + R）。
    3. 检查你使用的主题是否支持 DIY，或者主题文件是否损坏。

• Q: 我想在首页添加一个全屏宽度的 Banner，但被左右边栏限制了？

  • A: 不要把 Banner 模块放在 left 或 right 区块里，应该把它放在 header 区块，并确保 header 区块的父容器（通常是 container 或 wrap）设置了 width: 100%，如果不行，可以在“自定义 HTML”模块中使用 CSS 来强制其全屏：

    .your-banner-module {
        width: 100vw; /* 视口宽度 */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto;
    }

• Q: DIY 过程中不小心弄乱了，想恢复怎么办？

  • A: 在 DIY 界面，有一个 “恢复默认” 或 “重置” 按钮。注意：这会清除你当前页面的所有 DIY 内容，请谨慎使用！ 如果只是想撤销某一步，可以尝试在浏览器中后退。

Discuz! DIY 是一个非常强大的工具，它赋予了站长极大的自由度来塑造自己的论坛，核心思路就是：

规划布局 -> 搭建骨架 -> 填充血肉 -> 美化皮肤

多尝试,多练习，你会发现用 Discuz! DIY 可以创造出非常专业和漂亮的网站，祝你 DIY 愉快！