X2.5门户文章列表_门户文章图片列表制作代码解说

大家肯定有发现了，我们系统默认门户文章列表很是不好看，今天给大家讲一下门户文章列表文件代码解说，以及如何制作自己的门户文章列表，如有错误的地方，大家回帖指出，我会及时修改。
需要技术：DIV+CSS 即可

很简单，大家只要肯动手，都可以学会。
如图：这个是我刚刚做的一个门户文章列表
 
附件在最底部。

------------------------------------------------华丽的分割线----------------------------------------------------------

template/default/portal/list.htm代码解说：
这个文件是我们默认风格中文章列表的模版文件，就拿这个文件来给大家讲一下代码中的调用，大家可以根据这个文件，做出自己的文章列表。

1. <!--{subtemplate common/header}-->

复制代码

以上代码是调用全局头部文件，前台效果如图：
 

1. <!--[name]{lang portalcategory_listtplname}[/name]-->

复制代码

以上代码的意思是 列表模版的名称，如：<!--[name]文章图片列表[/name]-->

1. <div id="pt" class="bm cl">
   
2. <div class="z"> <a href="./" class="nvhm" title="{lang homepage}">$_G[setting][bbname]</a> <em>›</em> <a href="$_G[setting][navs][1][filename]">{lang portal}</a> <em>›</em>
   
3. <!--{loop $cat[ups] $value}-->
   
4. <a href="{echo getportalcategoryurl($value[catid])}">$value[catname]</a><em>›</em>
   
5. <!--{/loop}-->
   
6. $cat[catname] </div>
   
7. </div>

复制代码

以上代码是当前位置代码，前台效果如图：
 

1. <div class="bm_h cl">
   
2. <!--{if $_G[setting][rssstatus] && !$_GET['archiveid']}-->
   
3. <a href="portal.php?mod=rss&catid=$cat[catid]" class="y xi2 rss" target="_blank" title="RSS">{lang rss_subscribe_this}</a>
   
4. <!--{/if}-->
   
5. <!--{if ($_G['group']['allowpostarticle'] || $_G['group']['allowmanagearticle'] || $categoryperm[$catid]['allowmanage'] || $categoryperm[$catid]['allowpublish']) && empty($cat['disallowpublish'])}-->
   
6. <a href="portal.php?mod=portalcp&ac=article&catid=$cat[catid]" class="y xi2 addnew">{lang article_publish}</a>
   
7. <!--{/if}-->
   
8. <h1 class="xs2">$cat[catname]</h1>
   
9. </div>

复制代码

以上代码是文章列表的标题信息，前台效果如图：
 

1. <!--{if $cat[subs]}-->
   
2. <div class="bm_c bbda"> {lang sub_category}:  
   
3. <!--{eval $i = 1;}-->
   
4. <!--{loop $cat[subs] $value}-->
   
5. <!--{if $i != 1}-->
   
6. <span class="pipe">|</span>
   
7. <!--{/if}-->
   
8. <a href="{echo getportalcategoryurl($value[catid]);}" class="xi2">$value[catname]</a>
   
9. <!--{eval $i--;}-->
   
10. <!--{/loop}-->
    
11. </div>
    
12. <!--{/if}-->

复制代码

以上代码的意思是，如果频道有下级分类，就显示下级分类信息。前台如图：
 

1. <div class="bm_c xld">
   
2. <!--{loop $list['list'] $value}-->
   
3. <!--{eval $highlight = article_title_style($value);}-->
   
4. <dl class="bbda cl">
   
5. <dt class="xs2"><a href="portal.php?mod=view&aid=$value[aid]" target="_blank" class="xi2" $highlight>$value[title]</a>
   
6. <!--{if $value[status] == 1}-->
   
7. ({lang moderate_need})
   
8. <!--{/if}-->
   
9. </dt>
   
10. <dd class="xs2 cl">
    
11. <!--{if $value[pic]}-->
    
12. <div class="atc"><a href="portal.php?mod=view&aid=$value[aid]" target="_blank"><img src="$value[pic]" alt="$value[title]" class="tn" /></a></div>
    
13. <!--{/if}-->
    
14. $value[summary] </dd>
    
15. <dd>
    
16. <!--{if $value[catname] && $cat[subs]}-->
    
17. {lang category}:
    
18. <label><a href="{echo getportalcategoryurl($value[catid]);}" class="xi2">$value[catname]</a></label>
    
19.   
    
20. <!--{/if}-->
    
21. <span class="xg1"> $value[dateline]</span>
    
22. <!--{if $_G['group']['allowmanagearticle'] || ($_G['group']['allowpostarticle'] && $value['uid'] == $_G['uid'] && (empty($_G['group']['allowpostarticlemod']) || $_G['group']['allowpostarticlemod'] && $value['status'] == 1)) || $categoryperm[$value['catid']]['allowmanage']}-->
    
23. <span class="xg1"> <span class="pipe">|</span>
    
24. <label><a href="portal.php?mod=portalcp&ac=article&op=edit&aid=$value[aid]">{lang edit}</a></label>
    
25. <span class="pipe">|</span>
    
26. <label><a href="portal.php?mod=portalcp&ac=article&op=delete&aid=$value[aid]" id="article_delete_$value[aid]">{lang delete}</a></label>
    
27. </span>
    
28. <!--{/if}-->
    
29. </dd>
    
30. </dl>
    
31. <!--{/loop}-->
    
32. </div>

复制代码

这段代码的意思就是循环显示文章列表信息，下面做详细说明这段代码，我们在做文章列表风格的时候，修改这段代码就OK。

1. <dt class="xs2"><a href="portal.php?mod=view&aid=$value[aid]" target="_blank" class="xi2" $highlight>$value[title]</a>
   
2. <!--{if $value[status] == 1}-->
   
3. ({lang moderate_need})
   
4. <!--{/if}-->
   
5. </dt>

复制代码

以上代码的意思是调用文章的标题信息，前台如图：
 

1. <dd class="xs2 cl">
   
2. <!--{if $value[pic]}-->
   
3. <div class="atc"><a href="portal.php?mod=view&aid=$value[aid]" target="_blank"><img src="$value[pic]" alt="$value[title]" class="tn" /></a></div>
   
4. <!--{/if}-->
   
5. $value[summary] </dd>
   
6. <dd>

复制代码

以上代码的意思是调用文章的封面图片，其中$value[summary] 是显示文章摘要信息，前台如图：
 
 

1. <!--{if $value[catname] && $cat[subs]}-->
   
2. {lang category}:
   
3. <label><a href="{echo getportalcategoryurl($value[catid]);}" class="xi2">$value[catname]</a></label>
   
4.   
   
5. <!--{/if}-->

复制代码

以上代码的意思是 如果有下级分类，则显示当前文章属于哪个分类，前台如图：
 

1. <span class="xg1"> $value[dateline]</span>

复制代码

以上代码的意思是 显示文章的发布日期，前台如图：
 

1. <!--{if $_G['group']['allowmanagearticle'] || ($_G['group']['allowpostarticle'] && $value['uid'] == $_G['uid'] && (empty($_G['group']['allowpostarticlemod']) || $_G['group']['allowpostarticlemod'] && $value['status'] == 1)) || $categoryperm[$value['catid']]['allowmanage']}-->
   
2. <span class="xg1"> <span class="pipe">|</span>
   
3. <label><a href="portal.php?mod=portalcp&ac=article&op=edit&aid=$value[aid]">{lang edit}</a></label>
   
4. <span class="pipe">|</span>
   
5. <label><a href="portal.php?mod=portalcp&ac=article&op=delete&aid=$value[aid]" id="article_delete_$value[aid]">{lang delete}</a></label>
   
6. </span>
   
7. <!--{/if}-->

复制代码

以上代码的意思是 显示操作信息，前台如图：
 



------------------------------------------------华丽的分割线----------------------------------------------------------

搞懂以上代码，大家就可以制作自己的文章列表了，很简单吧。
继续解析代码：

1. <!--{if $list['multi']}-->
   
2. <div class="pgs cl">{$list['multi']}</div>
   
3. <!--{/if}-->

复制代码

以上代码是显示列表分页信息，前台如图：
 

1. <div class="sd pph">
   
2. <div class="drag">
   
3. <!--[diy=diyrighttop]-->
   
4. <div id="diyrighttop" class="area"></div>
   
5. <!--[/diy]-->
   
6. </div>
   
7. <!--{if $cat[others]}-->
   
8. <div class="bm">
   
9. <div class="bm_h cl">
   
10. <h2>{lang category_related}</h2>
    
11. </div>
    
12. <div class="bm_c">
    
13. <ul class="xl xl2 cl">
    
14. <!--{loop $cat[others] $value}-->
    
15. <li><a href="{echo getportalcategoryurl($value[catid]);}">$value[catname]</a></li>
    
16. <!--{/loop}-->
    
17. </ul>
    
18. </div>
    
19. </div>
    
20. <!--{/if}-->
    
21. <div class="drag">
    
22. <!--[diy=diy2]-->
    
23. <div id="diy2" class="area"></div>
    
24. <!--[/diy]-->
    
25. </div>
    
26. </div>

复制代码

以上代码文章列表的右侧的信息包。括分类信息，以及下级分类信息和DIY信息。

1. <!--{subtemplate common/footer}-->

复制代码

以上代码是调用全局底部信息，如图：

 



------------------------------------------------华丽的分割线----------------------------------------------------------

到这里，template/default/portal/list.htm就解说完了，大家应该就可以自己动手了。
对了，在文件中看到的类似于这样的代码
<!--[diy=diy2]-->
   <div id="diy2" class="area"></div>
<!--[/diy]-->
大家不要管他干什么的，只要记住，有了这样的代码出现，就代表这个地方可以在前台DIY就行了
只有在前台DIY模式下才能看到他，diy和id不要重复就行了。



下面给大家讲解如何制作门户文章列表模版和如何使用
第一步：
我们到自己的风格模版下进入portal文件夹，template/你的风格/portal，建立文件list_*.htm文件 *代表你的文件名，如list_pic.htm
list_*.htm中的内容，你直接复制 template/default/portal/list.htm的内容就行，把<!--[name]{lang portalcategory_listtplname}[/name]-->修改成自己的模版名称
第二布：
到后台—门户—频道栏目—列表，编辑一个频道，如图：
 
进入编辑页面里，找到列表页模板名，如图：
 

QQ截图20121105173231.png (13.54 KB, 下载次数: 32)

下载附件  保存到相册

2012-11-5 19:00 上传

选择自己的模版就OK了。好了，哈哈，结束了，就这样。





 list_lynnpic.rar 
这个模版文件中，有我的注释哈，大家可以解析解析。