Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[待审核] X2.5门户文章列表_门户文章图片列表制作代码解说

[复制链接]
lynn.sh 发表于 2012-11-5 19:21:34 | 显示全部楼层 |阅读模式
本帖最后由 lynn.sh 于 2012-11-6 15:25 编辑

大家肯定有发现了,我们系统默认门户文章列表很是不好看,今天给大家讲一下门户文章列表文件代码解说,以及如何制作自己的门户文章列表,如有错误的地方,大家回帖指出,我会及时修改。
需要技术: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>&#8250;</em> <a href="$_G[setting][navs][1][filename]">{lang portal}</a> <em>&#8250;</em>
  3. <!--{loop $cat[ups] $value}-->
  4. <a href="{echo getportalcategoryurl($value[catid])}">$value[catname]</a><em>&#8250;</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]-->修改成自己的模版名称
第二布:
到后台—门户—频道栏目—列表,编辑一个频道,如图:

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

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






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






本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

评分

2

查看全部评分

kele3 发表于 2012-11-8 11:25:07 | 显示全部楼层
非常有用的东西。希望能做出更多的风格来。谢谢。你的东西收藏了
回复

使用道具 举报

钻石家族 发表于 2012-11-8 15:10:41 | 显示全部楼层
不错 这个必须支持
回复

使用道具 举报

 楼主| lynn.sh 发表于 2012-11-8 16:54:13 | 显示全部楼层
kele3 发表于 2012-11-8 11:25
非常有用的东西。希望能做出更多的风格来。谢谢。你的东西收藏了

谢谢您的支持。
回复

使用道具 举报

 楼主| lynn.sh 发表于 2012-11-8 16:54:45 | 显示全部楼层
kele3 发表于 2012-11-8 11:25
非常有用的东西。希望能做出更多的风格来。谢谢。你的东西收藏了

谢谢您的支持,你问题可以问我哈
回复

使用道具 举报

 楼主| lynn.sh 发表于 2012-11-8 16:55:08 | 显示全部楼层
钻石家族 发表于 2012-11-8 15:10
不错 这个必须支持

谢谢支持哈
回复

使用道具 举报

沐目忠诚 发表于 2012-11-8 17:02:00 | 显示全部楼层
支持啦 很好
回复

使用道具 举报

 楼主| lynn.sh 发表于 2012-11-8 17:05:39 | 显示全部楼层
沐目忠诚 发表于 2012-11-8 17:02
支持啦 很好

感谢支持。
回复

使用道具 举报

kele3 发表于 2012-11-10 14:37:31 | 显示全部楼层
楼主.你的QQ多少.我加你.想问一些关于文章页的东西
回复

使用道具 举报

 楼主| lynn.sh 发表于 2012-11-10 16:15:19 | 显示全部楼层
kele3 发表于 2012-11-10 14:37
楼主.你的QQ多少.我加你.想问一些关于文章页的东西


我的QQ是1550061700,QQ消息我一般不会回复的

您有什么问题,回帖提出来吧,我在线的话会及时给你回复。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-14 14:43 , Processed in 0.038594 second(s), 6 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表