PbootCMS模板修改进阶：自定义页面、列表样式、详情页布局与响应式适配
掌握基础修改后，进阶模板修改能实现更复杂的定制需求：自定义页面模板、个性化列表样式、详情页布局调整、响应式适配。下面逐一说明。
自定义页面模板。需要一个独特布局的页面（如产品展示页、案例页），在template目录新建一个HTML文件，如product-show.html。内容结构参考list.html，用PbootCMS标签输出数据。然后在后台"配置设置-栏目管理"里，对应栏目绑定这个新模板（列表模板选product-show.html）。访问该栏目就用自定义模板渲染。单页模板同理，新建about-custom.html，单页管理里绑定。
自定义列表样式。默认列表是标题+时间的简单列表，可以改成卡片式、图文混排、时间轴等样式。在list.html里修改{pboot:list}循环内的HTML结构。卡片式示例：{pboot:list num=9}
{/pboot:list}。配合CSS写.card的样式，实现三列卡片布局。列表字段：[list:title]标题，[list:link]链接，[list:ico]缩略图，[list:description]摘要，[list:date]日期，[list:visits]浏览量。详情页布局定制。content.html里可以调整内容元素的顺序和样式。标准结构：标题、发布信息、正文、上一篇下一篇、相关文章。自定义示例：{content:title}
响应式适配。PbootCMS模板默认响应式，但自定义修改后可能在移动端错位。适配要点：1. 视口meta：head.html里有。2. 图片max-width:100%，不固定宽度。3. 用媒体查询：@media (max-width:768px) { .card { width:100%; } }，移动端单列。4. 导航在移动端变成汉堡菜单，需要JS配合。5. 字体大小用rem或vw，移动端自适应。6. 测试：F12-Ctrl+Shift+M切设备模式，看375px、768px宽度下的效果。
多语言模板。PbootCMS支持多语言，模板里用{lang:xxx}标签输出多语言文本。语言包在/apps/home/lang/目录，加自定义语言项。模板里{lang:contact_us}输出对应语言的"联系我们"。不同语言可以用不同模板，在后台语言配置里指定。
SEO优化模板。head.html里完善meta标签：
性能优化模板。1. CSS放head，JS放body底部。2. 图片加loading="lazy"懒加载。3. 合并压缩CSS/JS。4. 字体用系统字体栈，不用web字体。5. 首屏内容不用JS渲染。6. 模板里减少不必要的标签嵌套。
模板版本管理。用Git管理模板目录，每次修改commit，出问题能回退。或手动备份，改之前复制template目录加日期后缀。模板修改记录在文档里，方便后续维护。
进阶修改需要HTML/CSS基础，不懂代码的话建议找专业人员。小修改可以自己试，大改找开发。
更新时间：2026-08-26 18:08:25