做网站这么多年，我发现一个扎心的事实：只懂切HTML的前端，永远接不到大单。
为什么？因为企业客户要的不是一个「不能动的图片」，而是一个「自己能更新内容」的网站。如果你交付的只是一堆静态文件，客户每次改文字都得找你，最终只会换来一句：「太麻烦了，下次找别人吧。」
其实，让HTML「活起来」并不难。以国内最流行的 CMS ——PageAdmin为例，你只需要掌握模板切割和标签替换，就能在30分钟内把任何静态页面变成可管理的动态网站。
今天，我就把这份压箱底的教程分享出来。全文6000字+完整代码，从模板结构、标签语法到后台配置，一步不落。建议收藏，下次接单直接用！
前期准备
标题1. 了解PageAdmin模板结构
text
/templates/
└── 你的模板文件夹/
├── index.html # 首页模板
├── header.html # 页头公共部分
├── footer.html # 页脚公共部分
├── list.html # 列表页模板
├── content.html # 内容页模板
└── images/ # 图片资源
└── css/ # 样式文件
└── js/ # JS文件
标题2. 准备你的HTML页面
假设这是你的简单HTML：
html
公司logo
首页
关于我们
新闻动态
产品中心
联系我们
标题2. 准备你的HTML页面
假设这是你的简单HTML：
集成步骤
第一步：创建模板文件夹
第二步：分割HTML模板
header.html（页头模板）
html
{site:name}
{nav:nav type=top}
footer.html（页脚模板）
html
index.html（首页模板）
html
{template:header}
{slide:slide type=banner}
[slide:title]
{/slide:slide}
关于我们
{column:content columnid=1}
{template:footer}
第三步：上传资源文件
将你的CSS、JS、图片文件上传到模板文件夹对应的子目录：
第四步：配置PageAdmin后台
设置栏目
进入 栏目管理，创建以下栏目结构：
text
网站首页 (栏目ID:1)
├─ 关于我们 (栏目ID:2) - 单页类型
├─ 新闻动态 (栏目ID:3) - 列表类型
├─ 产品中心 (栏目ID:4) - 列表类型
└─ 联系我们 (栏目ID:5) - 单页类型
绑定模板
进入 栏目管理 → 修改栏目 → 模板选项：
栏目-------------------列表页模板-------------------内容页模板
首页-------------------index.html -------------------
关于我们------------- -------------------content.html
新闻动态-------------list.html -------------------content.html
产品中心-------------list.html -------------------content.html
联系我们------------ -----------------content.html
五步：创建列表页模板（list.html）
html
{template:header}
{column:name}
栏目导航
{nav:nav type=sibling}
{template:footer}
第六步：创建内容页模板（content.html）
html
{template:header}
{content:title}
栏目导航
{nav:nav type=sibling}
{template:footer}
CSS样式适配
在 style .css中添加基础样式：
css
/ 全局样式 /
{ margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: ‘Microsoft YaHei’, Arial, sans-serif; }
/ 布局 /
.header { width: 100%; background: #333; color: #fff; }
.logo { float: left; margin: 15px 0 0 20px; }
. nav { float: right; margin-right: 20px; }
.nav ul li { float: left; list-style: none; margin: 20px 15px; }
.nav ul li a { color: #fff; text-decoration: none; }
.nav ul li a:hover { color: #ff0; }
/ 内容区 /
.content { width: 1200px; margin: 20px auto; overflow: hidden; }
.left { width: 70%; float: left; }
.right { width: 28%; float: right; }
/ 页脚 /
.footer { clear: both; background: #333; color: #fff; text-align: center; padding: 20px; }
/ 列表页 /
.news-list li { padding: 10px; border-bottom: 1px solid #eee; list-style: none; }
.news-list li a { color: #333; text-decoration: none; }
.news-list li span { float: right; color: #999; }
/ 分页 /
.pagination { margin: 20px 0; text-align: center; }
.pagination a { display: inline-block; padding: 5px 10px; border: 1px solid #ddd; margin: 0 2px; }
.pagination .current { background: #333; color: #fff; }
✅ 测试与调试
常见问题 解决
问题------------------------------------------------解决方法
模板不显示------------------------检查模板文件夹名称是否正确
图片无法显示------------------------确认图片路径 使用 {site:tempath}
导航不显示------------------------检查栏目是否已创建并启用
样式错乱------------------------清除浏览器缓存，重新加载
PageAdmin常用标签速查
html
这样，你的HTML前端页面就成功集成到PageAdmin CMS了！现在你可以通过后台方便地管理网站内容了。
