CMS模板继承机制详解：从HTML静态页面到PageAdmin后台的完整接入教程
将做好的HTML静态页面集成到PageAdmin CMS，核心是把“死”的HTML代码变成“活”的模板文件，并用Razor标签把后台数据动态地“拉”到前台来。
下面我把这个过程拆解成两个部分来讲：如何切割和继承模板，以及如何分析和使用Razor标签。
📁 第一步：将HTML切割并继承到CMS模板
PageAdmin的模板机制是基于模板继承的，可以避免重复代码，方便后期维护。一般建议把一个页面的公共部分（如头部、底部）分离出来。
创建模板文件夹：在
/templates/目录下创建一个你自己的文件夹，比如MyTemplate。标准的模板结构如下：text
/templates/MyTemplate/ ├── index.html # 首页模板 ├── header.html # 页头公共模板 ├── footer.html # 页脚公共模板 ├── list.html # 列表页模板（如新闻列表） ├── content.html # 内容页模板（如新闻详情） ├── css/ # 样式文件夹 └── images/ # 图片文件夹
切割公共部分：
把你静态HTML文件的头部和顶部导航区域代码，整个复制到
header.html文件中。把底部版权信息等区域代码，整个复制到
footer.html文件中。在
header.html中，记得把原来写死的栏目（如“关于我们”、“新闻动态”）替换成动态导航标签{nav:nav type=top}。
在首页
index.html中继承：
在首页模板的最顶部，用继承标签引入公共部分，并把中间独有的内容区域用{template:footer}标签分隔开。html
<!-- 在 index.html 的顶部调用头部 --> {template:header} <!-- 这是首页独有的轮播图或内容区域 --> <div class="banner">...</div> <!-- 在 index.html 的底部调用尾部 --> {template:footer}
🏷️ 第二步：分析和使用Razor标签
这是最关键的一步。PageAdmin使用Razor 语法来获取数据，它和JavaScript很像，但运行在服务器上。你只需要记住，所有后台数据都要通过@符号开头来获取 。
1. 常用标签速查与理解
| 场景 | 你需要用的标签 | 代码示例（在模板中直接使用） | 一句话解释 |
|---|---|---|---|
| 显示站点信息 | {site:name}{site:logo} | {site:name} | 显示你在后台设置的网站标题或Logo。 |
| 调用栏目导航 | {nav:nav type=top} | {nav:nav type=top} | 自动生成顶部导航菜单的所有链接和文字。 |
| 调用文章列表 | Html.InfoDataList | @foreach (var item in Html.InfoDataList(new { ColumnId = 3, ShowNumber = 10 })) { <li>@item.Title</li> } | 从ID为3的栏目（如新闻中心）中，循环调用10篇文章的标题 。 |
| 显示栏目名称 | {column:name} | {column:name} | 显示当前栏目（如“新闻中心”）的名称。 |
| 显示文章详情 | {content:title}{content:content} | {content:title}{content:content} | 在内容页模板中，显示当前文章的标题和详细正文。 |
提示：如果后台有自定义字段（如“产品价格”），可以在模板中直接用
@item.自定义字段名来调用 。
2. 深度解析：从“是什么”到“怎么用”
光看速查表可能还不太理解，下面我挑两个最常用的场景，结合真实的代码示例，带你看看标签具体是怎么工作的。
场景一：调用文章列表页
假设你要在首页“新闻动态”区域调用最新的5条新闻。你需要复制下面这段代码，替换掉原来HTML里写死的新闻条目。
csharp
<ul class="news-list"> @{ // 数据调用参数：ColumnId=栏目ID, ShowNumber=调用条数, OrderBy=按ID倒序（即最新在前） var newsList = Html.InfoDataList(new { ColumnId = 3, ShowNumber = 5, OrderBy = "id desc" }); } @foreach (var item in newsList) { // 动态生成文章详情页的URL var url = Html.InfoDataUrl((int)item.ColumnId, (int)item.Id); <li> <a href="@url">@item.Title</a> <span>@item.Thedate</span> @* 显示文章日期 *@ </li> } </ul>分析：
Html.InfoDataList是核心函数，负责从数据库捞数据 。@foreach是循环语句，用来遍历捞出来的每一条新闻。@item.Title和@item.Thedate则是取具体某条新闻的标题和日期。
场景二：制作文章详情页
这是
content.html（内容页模板）的核心代码，用来展示你点击进去的那篇文章的完整内容。html
<div class="article-detail"> <h1>{content:title}</h1> @* 显示文章标题 *@ <div class="info"> 作者：{content:author} | 发布时间：{content:thedate} </div> <div class="content"> {content:content} @* 显示文章的完整正文内容 *@ </div> </div>分析：
在内容页模板中，标签都换成了以
{content:开头，因为系统已经知道你要操作的是“当前这篇文章”了。{content:content}这个标签输出的是一段带HTML格式的富文本内容。
🚀 第三步：后台配置与测试
上传与配置：把
MyTemplate整个文件夹通过FTP上传到服务器的/templates/目录下 。绑定模板：登录PageAdmin后台，进入“栏目管理”。对于每个栏目（如“产品中心”），在“模板选项”里选择你刚刚上传的对应模板（如列表页选
list.html，内容页选content.html）。测试与调试：刷新网站前台，检查内容是否显示。
图片不显示：确保模板中的图片路径使用相对路径或
{site:tempath}标签 。导航没出来：确认后台是否已创建了栏目并设置为“启用”。
把静态HTML变成CMS模板，核心就是“做减法”：删掉HTML里写死的文字和链接，替换成对应的Razor标签。这就像给网站的每个位置都贴上一个“数据标签”，告诉系统：“这里显示后台的标题”、“这里循环调用5篇文章”。