核心概念：门户模板的结构

Discuz! 3.2 的门户模板主要由以下几个部分构成,它们共同决定了首页的最终呈现效果。

discuz3.2门户模板
（图片来源网络，侵删）

模板文件目录

所有门户相关的模板文件都存放在服务器的以下目录中： /static/portal/

这是您修改模板样式的核心区域，进入这个目录，您会看到一个或多个子文件夹，每个文件夹代表一个门户模板风格，默认的模板文件夹可能是 default。

关键模板文件

在模板文件夹（如 default）内，有几个核心的 HTML 文件,它们各自负责不同的功能：

  • portal.htm: 最重要的文件，这是门户首页的主框架文件，它定义了整个页面的 HTML 结构，包括头部、导航栏、页脚以及最重要的——内容区块的容器，这个文件里会使用特定的代码来调用和显示各个“栏目”。
  • *`portalcategory.htm**: 这个文件用于显示某个特定分类（栏目）下的文章列表页面，星号*会被分类的 ID 数字所替代。portal_category_1.htm` ID 为 1 的分类的模板。
  • portal_list.htm: 这个文件用于显示文章列表的通用样式,通常用于分页或搜索结果页。
  • portal_view.htm: 这是页的模板，当用户点击一篇文章标题进入详情时,看到的就是这个文件渲染出来的页面。
  • *`block/.htm**: 这个目录下的文件是**区块模板**，每个“区块”（如最新文章、热门文章、推荐专题等）都是一个独立的模块，它们都使用block目录下的对应模板文件来渲染自己的内容。block/portalnew.htm` 可能就是“最新文章”区块的模板。

区块

区块是门户页面的基本组成单元，您在后台拖拽、排列的每一个模块（如“最新文章”、“热门评论”、“论坛最新主题”等）都是一个区块。

discuz3.2门户模板
（图片来源网络，侵删）
  • 类型: 区块可以是文章列表、图片轮播、自定义 HTML 代码、论坛主题等。
  • 模板: 每个区块都对应一个 block/*.htm 文件来定义其显示样式。
  • 管理: 在后台“门户” -> “页面管理”中，您可以添加、删除、编辑和排列这些区块。

如何修改和自定义门户模板

修改模板主要涉及编辑 HTML 文件和 CSS 样式。

修改主框架 (portal.htm)

这是最常见的修改需求，比如修改页面宽度、背景色、头部高度等。

  • 找到文件: /static/portal/default/portal.htm
  • 编辑工具: 使用专业的代码编辑器（如 VS Code, Sublime Text, Dreamweaver）打开它，切勿使用 Windows 自带的记事本,因为它可能导致编码错误。
  • 常见修改:
    • 页面宽度: 查找类似 <div id="pt" class="bm cl"> 或 <div id="ct" class="wp cl"> 的容器，修改其 class 或直接添加 style="width: 1200px;" 来调整页面宽度。
    • 背景色: 修改 <body> 标签的 style 属性，或者定义一个全局的 CSS 类，在 <head> 部分添加 <style> body { background-color: #f0f0f0; } </style>。
    • 添加新元素: 您可以直接在 portal.htm 中添加 HTML 代码，比如一个固定的侧边栏、一个公告栏等，但为了更好的模块化管理，推荐使用后台的“区块”功能。

修改区块样式 (block/*.htm 和 CSS)

如果您想改变“最新文章”列表的样式，或者让“图片轮播”看起来更美观,就需要修改区块模板。

  • 示例：修改“最新文章”区块
    1. 定位文件: 找到 /static/portal/default/block/portalnew.htm (文件名可能因模板而异)。
    2. 分析结构: 打开这个文件，您会看到循环代码，{loop $articles $article}，里面包含了文章标题、作者等信息。
    3. 修改HTML: 您可以修改这些 HTML 标签，比如给标题 <h3> 添加一个 class，<h3 class="article-title">。
    4. 添加CSS: 在 portal.htm 的 <head> 部分引入一个自定义的 CSS 文件，或者直接在 <style> 标签里写样式。
      .article-title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
}
  • 使用公共 CSS 文件:
    • 模板的公共样式通常存放在 /static/portal/default/common/style.css 或类似文件中。
    • 修改这个文件可以统一控制整个门户的字体、颜色、间距等,是更高效的方式。

修改文章内容页 (portal_view.htm)

这个文件决定了单篇文章的阅读体验。

discuz3.2门户模板
（图片来源网络，侵删）
  • 找到文件: /static/portal/default/portal_view.htm
  • 常见修改:
    • 样式: 修改 <h1 class="ph"> 相关的样式。
    • 文章正文区域: 修改 <div class="pct"> 或类似容器，调整宽度、边距等。
    • 作者信息、评论区域: 这些都是独立的区块，您可以根据其 ID 或 class 进行精确定位和样式修改。

实用技巧与注意事项

使用开发者工具

这是现代网页开发的必备技能，在浏览器（如 Chrome, Firefox）中打开您的门户首页，按 F12 打开开发者工具。

  • 元素检查: 您可以直接点击页面上的任何元素（如一个标题、一张图片），浏览器会自动定位到对应的 HTML 和 CSS 代码上,这比在成千上万行代码中大海捞针要高效得多。
  • 实时修改: 您可以在开发者工具中实时修改 CSS，看到效果满意后,再将代码复制到您的模板文件中。

保持备份！

在修改任何模板文件之前，务必备份原始文件，一旦修改出错，导致网站首页错乱,备份文件可以帮您快速恢复。

区分模板和缓存

修改完模板文件后，如果页面没有变化,可能是缓存的原因。

  • 浏览器缓存: 按 Ctrl + F5 (或 Cmd + Shift + R) 强制刷新浏览器。
  • Discuz! 缓存: 登录 Discuz! 后台，进入“全局” -> “缓存设置”，然后点击“更新缓存”。
  • 模板编译缓存: 后台“门户” -> “页面管理”，在页面列表上方有“更新”按钮,可以重新编译模板。

使用子主题/子模板

如果您想对现有模板做大量修改，但又希望未来升级 Discuz! 时不被覆盖,可以考虑创建一个新的模板文件夹。

  • 复制 /static/portal/default/ 整个文件夹，并重命名（my_custom_theme）。
  • 在后台“界面” -> “风格管理”中，导入这个新文件夹,并设置为默认门户模板。
  • 这样，您对新模板的所有修改都是独立的,不会影响原始模板。

参考官方和第三方模板

  • 官方模板: Discuz! 官方会提供一些默认模板,是最好的学习范本。
  • 第三方模板: 许多 Discuz! 模板开发者会制作精美的门户模板，您可以在相关论坛或模板网站上下载学习,但要注意来源的可靠性。
模板部分 对应文件 作用
首页主框架 static/portal/*/portal.htm 定义首页整体布局和结构
文章列表页 static/portal/*/portal_category_*.htm 定义栏目/分类下的文章列表样式
页 static/portal/*/portal_view.htm 定义单篇文章的阅读页面样式
区块模块 static/portal/*/block/*.htm 定义首页上各个独立模块（如最新文章）的样式
公共样式 static/portal/*/common/style.css 定义整个模板的公共样式（颜色、字体等）

掌握 Discuz! 3.2 门户模板的核心，就是理解 portal.htm 如何通过区块调用 block/*.htm，并最终由 CSS 控制其外观，结合浏览器开发者工具,您可以高效地打造出独一无二的门户首页。