前端组件化：模板继承拯救发际线

你是否经历过这样的痛苦：

网站有 20 个页面（首页、列表页、详情页、关于我们...），突然老板说："把头部导航栏的字号改大一点 "。

如果你还在每个 HTML 文件里复制粘贴 <header>...</header>，那你得改 20 次。万一漏了一个，就是 Bug。

📅 今日知识点：前端组件化思维------模板继承 (`extend` 与 `block`)

核心逻辑：

ThinkCMF 的模板引擎支持类似 Vue/React 的"Layout 布局"概念。

你可以定义一个**"母版文件" (Layout)，把头部、底部、CSS/JS 引用都写在这里。其他页面只需要"继承"**这个母版，然后只写自己独特的内容即可。

1. 第一步：打造"母版" (Base Layout)

在你的主题目录（public/themes/your_theme/）下，新建一个文件夹 layout（非强制，为了规范），里面新建 base.html。

把所有页面共用的东西都扔进去，用 <block> 标签挖好"坑"：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>{$site_info.site_name|default='ThinkCMF'}</title>
    <link href="__TMPL__/assets/css/style.css" rel="stylesheet">
    
    <block name="css"></block>
</head>
<body>

    <header>我是导航栏，改我一个，全站生效！</header>

    <div class="main-container">
        <block name="main">
            这里是默认内容
        </block>
    </div>

    <footer>&copy; 2026 My Website</footer>

    <script src="__STATIC__/js/jquery.js"></script>
    
    <block name="js"></block>
</body>
</html>

2. 第二步：子页面"填坑"

现在写文章详情页 (article.html)，你不需要再写 <html>、<head> 这些东西了。直接继承！

这就像是 Vue 的 Slot（插槽）：

html 复制代码

<extend name="layout/base" />

<block name="css">
    <style>
        .article-content { color: #333; }
    </style>
</block>

<block name="main">
    <h1>{$article.post_title}</h1>
    <div class="article-content">
        {$article.post_content}
    </div>
</block>

<block name="js">
    <script>
        console.log("这篇文章的 ID 是 {$article.id}");
    </script>
</block>

💡 前端视角的优势

修改秒生效 ：老板再说改导航栏，你只需要改 base.html 这一次，全站自动同步。
代码极其干净 ：你的业务页面（如 article.html）里只有纯粹的业务代码，没有那些杂乱的 <meta> 标签和 CSS 引用。
防止冲突 ：每个页面的 JS 都在 <block name="js"> 里，页面加载顺序被母版严格控制（通常放在 </body> 之前），不会出现"jQuery 还没加载就报错"的问题。

🧩 补充技巧：小组件用 `include`

extend 是用来做大布局的，那如果是一个**"侧边栏热门文章"**模块，在很多页面都有，但位置不一样，怎么办？

用 <include>（类似 Vue 的 Component）：

新建 public/themes/your_theme/public/widget_hot_posts.html。
在里面写好 <portal:articles> 的循环代码。
在任何页面引入：

html 复制代码

<div class="sidebar">
    <include file="public/widget_hot_posts" />
</div>

🛠️ 今日作业

打开你的主题文件夹，看看 index.html、list.html、page.html 里面是不是重复写了大量的 Header 和 Footer 代码？
动手重构一下吧！ 创建一个 base.html，把它们统统收纳起来。你的代码量至少能减少 40%。

今日金句： 不想当架构师的前端不是好切图仔。模板继承就是最基础的"页面架构"。

前端组件化：模板继承拯救发际线

📅 今日知识点：前端组件化思维------模板继承 (extend 与 block)

1. 第一步：打造"母版" (Base Layout)

2. 第二步：子页面"填坑"

💡 前端视角的优势

🧩 补充技巧：小组件用 include

🛠️ 今日作业

📅 今日知识点：前端组件化思维------模板继承 (`extend` 与 `block`)

🧩 补充技巧：小组件用 `include`