KesionCMS-万能列表标签实例打造常见网页效果

导航：返回上一页

KesionCMS-万能列表标签实例打造常见网页效果

为大家介绍一些常见的网页效果的标签制作:

首先上一个最最常见的文章列表,如下图:

上图是我们最常见的文章列表,新建万能列表标签.

标签名称自命名,如文章列表;

• 标签目录:即这个标签要存放于哪个目录,这样方便以后编辑标签时查找.

• 选择范围:可以指定模型或不指定模型,如果指定模型的话可以选择多个栏目,调用多个栏目下的文章;

• 所属专题:根据需要,可以不指定专题,如果有需要归属于哪个专题指向专题;

• 属性控制:即推荐,滚动,头条,热门,幻灯新闻,有打勾的话就是要调用这个属性的文章,同时添加文章时也要在文章属性中打勾,这样才可以调用出来;

• 排序方法:有文档ID升/降;更新时间升/降;点击数升/降和随机显示,可以根据需求选择;

链接目标即点击浏览文章时是同个窗口打开还是弹出新窗口,可以自己选择;

文档数量,标题字数,行距,列数可以直接输入,我们要显示几篇就输入多少,标题字数即一行要显示多少个字,行距即一行一行之间的距离,列数即一行显示几列,这些都适合文本列表(table)样式输出;

输出格式:可以从文本列表(table),图片列表(table);自定义输出样式(不带自定义字段);自定义输出样式(带自定义字段).

其中,文本列表(table),图片列表(table),输出样式是table格式的,下图中,是以自定义输出样式(不带自定义字段)输出.

如果要在文章列表中调用日期,则选择日期格式,并在语句中增加日期的字段,如:

[loop={@num}] 
<li>·<a href="{@linkurl}" target="_blank">{@title}</a> {@adddate}</li>
[/loop]

调用其它的,同样只需点击上面的字段.

保存标签,到模板中要调用的位置输入如{LB_文章列表}即可.

章列表样式二,效果图

分析:

上图中其实也是刚上面的文章列表,只是它分5条新闻中间有一条虚线隔开,那么这种效果怎么做呢?

其实一样,只是循环语句中有点区别:

[loop=5] 
<li>·<a href="{@linkurl}" target="_blank">{@title}</a> </li>
[/loop]
<div style="border-bottom:1px dotted #ccc"></div>
[loop=5] 
<li>·<a href="{@linkurl}" target="_blank">{@title}</a> </li>
[/loop]

下面,我们看下这种常见的图片文章列表:

这种效果,我们可以选择图片文章列表(table),选择样式3,如下图:

或者采用自定义样式输出,循环语句如下,然后通过CSS来控制;

[loop=5] 
 <div><a href="{@linkurl}"><img 
src="{@photourl}" width="90" height="65" 
border="0" class="img1" /></a><span 
class="font_w_b line_h_22"><a 
href="{@linkurl}">{@title}</a></span><br />
          <span class="color_666">“{@intro}”</span></div>
[/loop]

参考来源

• 参考来源