第二节 CMS模块化开发实践

【任务描述】

将公共视图模块进行物理拆分，是前端架构走向成熟的标志性软件工程实践。这一解耦动作能够以指数级提高系统代码的可维护性、可重用性及可测试性。本节任务要求学习者依托前期构建的静态 Web 页面，深入 CMS 底层骨架，执行细粒度的“物理切片”。学习者需独立完成全局头部（Header）、全局尾部（Footer）、全局导视（Top Navigation）的模块化封装，并重点掌握如何针对不同的业务载体（独立单页与文章内页）进行视图层级的多态分发与核心数据标签的挂载。

【任务实施：公共模块的工程化拆解与组装】

任务一：全局元数据与环境变量池封装（`header.php`）

网站的任何路由节点都必须依赖 <head> 标签来确立渲染引擎与环境变量。我们需将 c_index.php 等页面中的 <head> 逻辑强行剥离，封装至独立的 header.php 实体中。

1. 剥离与标签重构 将原本硬编码的标题 <title>WEB前端开发</title> 彻底废弃，利用 CMS 引擎的动态上下文变量，将其重构为能够随页面路由自动变动的 {$name}-{$title} 组合。

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{$name}-{$title}</title>
<link
  rel="stylesheet"
  href="{$host}zb_users/theme/{$theme}/style/{$style}.css?{$themeinfo['modified']}"
/>

2. 底层脚本生命周期注入 在 header.php 的闭合边缘，必须显式注入系统级前置 JS 库（如 jQuery），并预留 {$header} 插件挂载钩子（Hook），允许第三方功能包在此处安全地写入代码：

<script src="{$host}zb_system/script/jquery-latest.min.js?v={$version}"></script>
<script src="{$host}zb_system/script/zblogphp.js?v={$version}"></script>
<script src="{$host}zb_system/script/c_html_js_add.php?hash={$html_js_hash}&v={$version}"></script>
{$header}

3. 宏观架构挂载 回到主控文件（c_index.php、c_list.php、single.php），抹除冗长的旧代码，使用 {template:header} 指令完成模块的无缝召回与拼装。

任务二：全局尾部版权与后置脚本池封装（`footer.php`）

通过浏览器 DevTools 审查现有界面的底层 DOM 树，精准框选出底部的版权说明代码，并将其物理迁移至 footer.php 沙箱中。

1. 动态版权标签映射 将静态的“@2025 web前端开发”字样替换为 {$copyright} 标签，将文字的修改权彻底移交给后台的“网站配置”面板，实现内容与视图的绝对分离：

<footer>
  <p>{$copyright}</p>
</footer>
{$footer}

2. 宏观架构挂载 在所有主控文件的闭合标签上方，键入 {template:footer} 完成底部模块的装载。

任务三：全局导视模块的隔离封装（`c_head.php`）

页面的顶部通常包含品牌 Logo 与极其复杂的树状导航流。将其提取至 c_head.php，可以确保全站任意页面的导航视觉保持绝对一致。

<header>
  <h1>HTML+CSS 现代工程首页构建</h1>
</header>
<nav>
  <ul>
    <li><a href="[http://zblog.cm/](http://zblog.cm/)">首页</a></li>
    <li>
      <a href="#">作业体系演示</a>
      <ul class="dropdown">
        <li><a href="#">演示节点 1</a></li>
        <li><a href="#">演示节点 2</a></li>
        <li><a href="#">演示节点 3</a></li>
      </ul>
    </li>
    <li>
      <a
        href="[http://zblog.cm/category-1.html](http://zblog.cm/category-1.html)"
        >技术笔记</a
      >
    </li>
    <li>
      <a href="[http://zblog.cm/2.html](http://zblog.cm/2.html)">关于组织</a>
    </li>
  </ul>
</nav>

同样，在各主页面业务容器的顶部，统一执行 {template:c_head} 引入动作。

任务四：业务多态路由分发与详情页（`single.php`）深层解耦

在 CMS 系统中，文章详情页（Article）与独立关于页（Page）通常共用 single.php 这一主入口。然而，两者的业务诉求截然不同：文章需要展示作者、分类、浏览量等元数据；而独立页面只需呈现纯净的图文排版。因此，我们必须对 single.php 进行“二次切片”，将其业务层进一步解耦为 post-page.php 与 post-single.php。

1. 独立单页组件封装（post-page.php） 提供最纯粹的视图骨架，仅映射标题与核心正文：

<main>
  <section>
    <h2 id="article-title">{$article.Title}</h2>
    <div id="article-content">{$article.Content}</div>
  </section>
</main>

2. 文章详情组件封装（post-single.php） 深度挖掘底层数据库，提取更加丰富的业务元数据（Metadata）：

<main>
  <section>
    <h2 id="article-title">{$article.Title}</h2>
    <p class="article-meta">
      架构师：{$article.Author.StaticName} | 技术分类：{$article.Category.Name}
      | 热度指数：{$article.ViewNums}
    </p>
    <div id="article-content">{$article.Content}</div>
  </section>
</main>

3. 多态路由分发控制器注入 回到父级主控文件 single.php 中，我们需要利用条件分支语句执行动态拦截。系统将探查当前数据对象的底层类型（Type），若判定为标准文章（ZC_POST_TYPE_ARTICLE），则装配 post-single 组件；反之，则向下兼容装配 post-page 单页组件。

{if $article.Type == ZC_POST_TYPE_ARTICLE}
    {template:post-single}
{else}
    {template:post-page}
{/if}

完成这一步的深层解耦，标志着你已经完全掌握了现代 CMS 视图层开发中最核心的“动态模块复用”与“多态路由分发”的工程精髓。

【课程思政】

标准接口的契约精神与代码多态包容

在执行单页（post-page）与文章（post-single）业务的“多态路由拦截”重构时，我们深刻见证了系统底层架构强大的向下兼容与跨场景包容性。这种基于共享上下文环境、又各自保留差异化渲染路径的设计，正是软件开发团队间严守“接口契约（Interface Contract）”、尊重彼此边界的最高体现。良好的模块化组装纪律，从根本上防止了“技术孤岛”的产生，捍卫了整个工程系统的稳健与生机。

【任务描述】​

【任务实施：公共模块的工程化拆解与组装】​

任务一：全局元数据与环境变量池封装（header.php）​

任务二：全局尾部版权与后置脚本池封装（footer.php）​

任务三：全局导视模块的隔离封装（c_head.php）​

任务四：业务多态路由分发与详情页（single.php）深层解耦​

【课程思政】​