编辑“KesionCMS-SQL函数标签实现分页式的图片文章列表”

<span style="border:1px solid #000; float:right; text-align:center; padding:6px;"><strong>导航：</strong>[[KesionCMS教程|返回上一页]]</span>
<div style="clear:both;"></div>
[[KesionCMS]]-SQL函数[[标签]]实现分页式的图片文章列表

效果

[[Image:SQL函数标签实现分页式的图片文章列表1.png]]

首先,我们在系统后台添加图片文章，然后到标签-新建自定义[[SQL]]函数[[标签]],名为”型男色女”,采用[[AJAX]]调用,因为我们是要分页的,所以我们选择终级分页[[标签]]类型,分页样式可以选择。

点击下一步继续,我们选择主表如下,选中的蓝色部份where tid in ({$CurrClassChildID})是指定当前栏目（即型男色女）

[[Image:SQL函数标签实现分页式的图片文章列表2.png]]


 

点击”下一步”继续,如下图:


[[Image:SQL函数标签实现分页式的图片文章列表3.png]]


我们在循环体中输入要循环的内容,再看看我们的效果图,每行显示四列,每列都有图片与文章,图片在上,标题在下,都有链接,那么我们在循环体中输入内容如下:

<pre>
<table cellSpacing=5 cellPadding=0 
width=577 align=center bgColor=#f1f1ee border=0
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' 
target="_blank"> ?(注释:给图片加链接并在新窗口打开) 
<img width="120" height="90" 
src="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" 
border="0">(注释:控制图片宽度为120,高度为90,如果没图片即显示图片nopic.gif) 
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' 
target="_blank"> (注释:给文章标签加链接并在新窗口打开) 
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
</table>
</pre>
建好后,我们到[[模板]]插入标签,如下图:


[[Image:SQL函数标签实现分页式的图片文章列表4.png]]


保存[[模板]],我们到前台预览效果,如下图:

[[Image:SQL函数标签实现分页式的图片文章列表5.png]]


因为我们只循环一次,所以我们每页只显示一行四列,下面我们把循环体复制4下,即4行4列,代码如下:

<pre>
<table cellSpacing=5 cellPadding=0
 width=577 align=center bgColor=#f1f1ee border=0
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
<img width="120" height="90" s
rc="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" border="0">
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
<img width="120" height="90" 
src="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" border="0">
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
<img width="120" height="90" 
src="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" border="0">
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
<img width="120" height="90" 
src="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" border="0">
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
</table>
</pre>
最终前台显示的确效果图如下:


[[Image:SQL函数标签实现分页式的图片文章列表6.png]]




==参考来源==
*[http://www.kesion.com/ 参考来源]


[[category:KesionCMS|K]]