你是否经历过这样的痛苦：
网站有 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>© 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%。
今日金句： 不想当架构师的前端不是好切图仔。模板继承就是最基础的"页面架构"。