列表页替换，首先把文件名前边加个前缀list，代表列表页：
我们以list_news为例进行替换，先看一下替换前的页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="css/news.css" rel="stylesheet" type="text/css" /> </head> <body> <!--内容开始--> <div id="newsimgwai"> <div id="newsimg"> <img src="images/1.jpg" width="1200" height="290" /> </div> </div> <div id="newsnrwai"> <div id="newsnr"> <div class="news_item"> <div class="news_img"> <a href="#"><img src="images/cpzhanshi.jpg" width="237" height="160" /></a> </div> <div class="news_nr"> <a href="#"><div class="news_title"> 什么东西吃得越多越苗条 </div></a> <div class="news_jj"> 每种食品中蛋白质、脂肪、碳水化合物和水分的比例不同，吃进去之后给身体增加的能量数额也不同。 按照同样的重量来说，水分大的食物能量少，因为水是没有能量的;含油脂多的食... </div> <div class="news_sj"> 2017-03-14 </div> </div> </div> <div class="news_item"> <div class="news_img"> <img src="images/cpzhanshi.jpg" width="237" height="160" /> </div> <div class="news_nr"> <div class="news_title"> 什么东西吃得越多越苗条 </div> <div class="news_jj"> 每种食品中蛋白质、脂肪、碳水化合物和水分的比例不同，吃进去之后给身体增加的能量数额也不同。 按照同样的重量来说，水分大的食物能量少，因为水是没有能量的;含油脂多的食... </div> <div class="news_sj"> 2017-03-14 </div> </div> </div> <div class="news_item"> <div class="news_img"> <img src="images/cpzhanshi.jpg" width="237" height="160" /> </div> <div class="news_nr"> <div class="news_title"> 什么东西吃得越多越苗条 </div> <div class="news_jj"> 每种食品中蛋白质、脂肪、碳水化合物和水分的比例不同，吃进去之后给身体增加的能量数额也不同。 按照同样的重量来说，水分大的食物能量少，因为水是没有能量的;含油脂多的食... </div> <div class="news_sj"> 2017-03-14 </div> </div> </div> <div class="news_item"> <div class="news_img"> <img src="images/cpzhanshi.jpg" width="237" height="160" /> </div> <div class="news_nr"> <div class="news_title"> 什么东西吃得越多越苗条 </div> <div class="news_jj"> 每种食品中蛋白质、脂肪、碳水化合物和水分的比例不同，吃进去之后给身体增加的能量数额也不同。 按照同样的重量来说，水分大的食物能量少，因为水是没有能量的;含油脂多的食... </div> <div class="news_sj"> 2017-03-14 </div> </div> </div> <div class="news_item"> <div class="news_img"> <img src="images/cpzhanshi.jpg" width="237" height="160" /> </div> <div class="news_nr"> <div class="news_title"> 什么东西吃得越多越苗条 </div> <div class="news_jj"> 每种食品中蛋白质、脂肪、碳水化合物和水分的比例不同，吃进去之后给身体增加的能量数额也不同。 按照同样的重量来说，水分大的食物能量少，因为水是没有能量的;含油脂多的食... </div> <div class="news_sj"> 2017-03-14 </div> </div> </div> <div class="news_item"> <div class="news_img"> <img src="images/cpzhanshi.jpg" width="237" height="160" /> </div> <div class="news_nr"> <div class="news_title"> 什么东西吃得越多越苗条 </div> <div class="news_jj"> 每种食品中蛋白质、脂肪、碳水化合物和水分的比例不同，吃进去之后给身体增加的能量数额也不同。 按照同样的重量来说，水分大的食物能量少，因为水是没有能量的;含油脂多的食... </div> <div class="news_sj"> 2017-03-14 </div> </div> </div> <div class="news_item"> <div class="news_img"> <img src="images/cpzhanshi.jpg" width="237" height="160" /> </div> <div class="news_nr"> <div class="news_title"> 什么东西吃得越多越苗条 </div> <div class="news_jj"> 每种食品中蛋白质、脂肪、碳水化合物和水分的比例不同，吃进去之后给身体增加的能量数额也不同。 按照同样的重量来说，水分大的食物能量少，因为水是没有能量的;含油脂多的食... </div> <div class="news_sj"> 2017-03-14 </div> </div> </div> </div> </div> <!--分页--> <div id="news_fenye"> <div id="news_fy_nr"> 共 1页6条记录 </div> </div> <!--内容结束--> </body> </html>
新闻中心添加内容：
我们先从头尾开始替换，把头尾删除，把样式也替换掉：
{template "content","header"}
<link href="{CSS_PATH}css/news.css" rel="stylesheet" type="text/css" />
{template "content","footer"}
注意替换头尾时要把页面里的body和html删除，因为header.html页面已经有这两个标签了。
然后开始替换内容，先调取当前栏目图片：
<div id="newsimgwai"> <div id="newsimg"> <img src="{$CATEGORYS[$catid][image]}" width="1200" height="290" /><!--调取当前栏目图片--> </div> </div>
跟其他的一样对内容进行循环，替换分页、题目、时间、简介：
<div id="newsnrwai"> <div id="newsnr"> {pc:content action="lists" catid="$catid" order="listorder asc" num="4" moreinfo="1" page="$page"}<!--分页--> {loop $data $val}<!--循环开始--> <div class="news_item"> <div class="news_img"> <a href="{$val[url]}"><img src="{$val[thumb]}" width="237" height="160" /></a><!--thumb缩略图路径--> </div> <div class="news_nr"> <a href="{$val[url]}"><div class="news_title"> {$val[title]}<!--题目--> </div></a> <div class="news_jj"> {$val[description]}<!--简介--> </div> <div class="news_sj"> {date('Y-m-d',$val[inputtime])}<!--时间格式替换--> </div> </div> </div> {/loop} {/pc} </div> </div>
最后分页替换很简单写一个{$pages}：
<!--分页--> <div id="news_fenye"> <div id="news_fy_nr"> {$pages}<!--分页--> </div> </div> <!--内容结束--> {template "content","footer"}
这样list_news就替换完成了。
最终效果：
