【discuz x3.1教程】别人的list.htm代码分析

admin

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

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

附件在最底部。

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

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

• <!--{subtemplate common/header}-->
  

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

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

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

• <div id="pt" class="bm cl">
• <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>
• <!--{loop $cat[ups] $value}-->
• <a href="{echo getportalcategoryurl($value[catid])}">$value[catname]</a><em>›</em>
• <!--{/loop}-->
• $cat[catname] </div>
• </div>
  

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

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

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

• <!--{if $cat[subs]}-->
• <div class="bm_c bbda"> {lang sub_category}:
• <!--{eval $i = 1;}-->
• <!--{loop $cat[subs] $value}-->
• <!--{if $i != 1}-->
• <span class="pipe">|</span>
• <!--{/if}-->
• <a href="{echo getportalcategoryurl($value[catid]);}" class="xi2">$value[catname]</a>
• <!--{eval $i--;}-->
• <!--{/loop}-->
• </div>
• <!--{/if}-->
  

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

• <div class="bm_c xld">
• <!--{loop $list['list'] $value}-->
• <!--{eval $highlight = article_title_style($value);}-->
• <dl class="bbda cl">
• <dt class="xs2"><a href="portal.php?mod=view&aid=$value[aid]" target="_blank" class="xi2" $highlight>$value[title]</a>
• <!--{if $value[status] == 1}-->
• ({lang moderate_need})
• <!--{/if}-->
• </dt>
• <dd class="xs2 cl">
• <!--{if $value[pic]}-->
• <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>
• <!--{/if}-->
• $value[summary] </dd>
• <dd>
• <!--{if $value[catname] && $cat[subs]}-->
• {lang category}:
• <label><a href="{echo getportalcategoryurl($value[catid]);}" class="xi2">$value[catname]</a></label>
• <!--{/if}-->
• <span class="xg1"> $value[dateline]</span>
• <!--{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']}-->
• <span class="xg1"> <span class="pipe">|</span>
• <label><a href="portal.php?mod=portalcp&ac=article&op=edit&aid=$value[aid]">{lang edit}</a></label>
• <span class="pipe">|</span>
• <label><a href="portal.php?mod=portalcp&ac=article&op=delete&aid=$value[aid]" id="article_delete_$value[aid]">{lang delete}</a></label>
• </span>
• <!--{/if}-->
• </dd>
• </dl>
• <!--{/loop}-->
• </div>
  

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

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

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

• <dd class="xs2 cl">
• <!--{if $value[pic]}-->
• <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>
• <!--{/if}-->
• $value[summary] </dd>
• <dd>
  

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

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

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

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

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

• <!--{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']}-->
• <span class="xg1"> <span class="pipe">|</span>
• <label><a href="portal.php?mod=portalcp&ac=article&op=edit&aid=$value[aid]">{lang edit}</a></label>
• <span class="pipe">|</span>
• <label><a href="portal.php?mod=portalcp&ac=article&op=delete&aid=$value[aid]" id="article_delete_$value[aid]">{lang delete}</a></label>
• </span>
• <!--{/if}-->
  

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




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

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

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

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

• <div class="sd pph">
• <div class="drag">
• <!--[diy=diyrighttop]-->
• <div id="diyrighttop" class="area"></div>
• <!--[/diy]-->
• </div>
• <!--{if $cat[others]}-->
• <div class="bm">
• <div class="bm_h cl">
• <h2>{lang category_related}</h2>
• </div>
• <div class="bm_c">
• <ul class="xl xl2 cl">
• <!--{loop $cat[others] $value}-->
• <li><a href="{echo getportalcategoryurl($value[catid]);}">$value[catname]</a></li>
• <!--{/loop}-->
• </ul>
• </div>
• </div>
• <!--{/if}-->
• <div class="drag">
• <!--[diy=diy2]-->
• <div id="diy2" class="area"></div>
• <!--[/diy]-->
• </div>
• </div>
  

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

• <!--{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]-->修改成自己的模版名称
第二布：
到后台—门户—频道栏目—列表，编辑一个频道，如图：

进入编辑页面里，找到列表页模板名，如图：

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