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 typetop}。在首页index.html中继承在首页模板的最顶部用继承标签引入公共部分并把中间独有的内容区域用{template:footer}标签分隔开。html!-- 在 index.html 的顶部调用头部 -- {template:header} !-- 这是首页独有的轮播图或内容区域 -- div classbanner.../div !-- 在 index.html 的底部调用尾部 -- {template:footer}️ 第二步分析和使用Razor标签这是最关键的一步。PageAdmin使用Razor 语法来获取数据它和JavaScript很像但运行在服务器上。你只需要记住所有后台数据都要通过符号开头来获取 。1. 常用标签速查与理解场景你需要用的标签代码示例在模板中直接使用一句话解释显示站点信息{site:name}{site:logo}{site:name}显示你在后台设置的网站标题或Logo。调用栏目导航{nav:nav typetop}{nav:nav typetop}自动生成顶部导航菜单的所有链接和文字。调用文章列表Html.InfoDataListforeach (var item in Html.InfoDataList(new { ColumnId 3, ShowNumber 10 })) { liitem.Title/li }从ID为3的栏目如新闻中心中循环调用10篇文章的标题 。显示栏目名称{column:name}{column:name}显示当前栏目如“新闻中心”的名称。显示文章详情{content:title}{content:content}{content:title}{content:content}在内容页模板中显示当前文章的标题和详细正文。提示如果后台有自定义字段如“产品价格”可以在模板中直接用item.自定义字段名来调用 。2. 深度解析从“是什么”到“怎么用”光看速查表可能还不太理解下面我挑两个最常用的场景结合真实的代码示例带你看看标签具体是怎么工作的。场景一调用文章列表页假设你要在首页“新闻动态”区域调用最新的5条新闻。你需要复制下面这段代码替换掉原来HTML里写死的新闻条目。csharpul classnews-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 hrefurlitem.Title/a spanitem.Thedate/span * 显示文章日期 * /li } /ul分析Html.InfoDataList是核心函数负责从数据库捞数据 。foreach是循环语句用来遍历捞出来的每一条新闻。item.Title和item.Thedate则是取具体某条新闻的标题和日期。场景二制作文章详情页这是content.html内容页模板的核心代码用来展示你点击进去的那篇文章的完整内容。htmldiv classarticle-detail h1{content:title}/h1 * 显示文章标题 * div classinfo 作者{content:author} | 发布时间{content:thedate} /div div classcontent {content:content} * 显示文章的完整正文内容 * /div /div分析在内容页模板中标签都换成了以{content:开头因为系统已经知道你要操作的是“当前这篇文章”了。{content:content}这个标签输出的是一段带HTML格式的富文本内容。 第三步后台配置与测试上传与配置把MyTemplate整个文件夹通过FTP上传到服务器的/templates/目录下 。绑定模板登录PageAdmin后台进入“栏目管理”。对于每个栏目如“产品中心”在“模板选项”里选择你刚刚上传的对应模板如列表页选list.html内容页选content.html。测试与调试刷新网站前台检查内容是否显示。图片不显示确保模板中的图片路径使用相对路径或{site:tempath}标签 。导航没出来确认后台是否已创建了栏目并设置为“启用”。把静态HTML变成CMS模板核心就是“做减法”删掉HTML里写死的文字和链接替换成对应的Razor标签。这就像给网站的每个位置都贴上一个“数据标签”告诉系统“这里显示后台的标题”、“这里循环调用5篇文章”。