Phpcms教程:制作类似于首页头条的效果

vistacn

效果如下图:

vistacn

具体步骤如下
1.        进入templates/XXX/article 目录 复制一份tag_articlelist.html ,重命名为如focus.html
对内容进行修改将版式排成效果图样式,参考代码如下
<!--标题开始 -->
<table width="100%" border="0" align="center" cellpadding="1" cellspacing="1">
{loop $articles $i $article}
  {if $i%$cols==0}  <tr>  {/if}
      <td height="35" width="{$width}"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
  <tr>
    <td height="30" align="center" bgcolor="#F5F5F5"> {if $showcatname}{$article[catname]}{/if} <a href="{$article[url]}" title="{$article[alt]}" target="{$target}" class="focus_link">{$article[title]}</a>
{if $showhits}({$article[hits]}){/if}
{if $showauthor}[作者:{$article[author]}]{/if}
{if $article[showcommentlink]}&nbsp;<a href="{PHPCMS_PATH}comment/?item=articleid&itemid={$article[articleid]}" target="_blank"><span class="color_red">评</span></a>{/if}
{if $datetype}<span class="tag_date">{$article[adddate]}</span>{/if}</td>
  </tr></table>
  <!--标题开始 -->
  <!--内容简介开始 -->
  {if $descriptionlen}
  <table width="100%" height="170" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
    <tr>
    <td bgcolor="#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;{$article[description]}<a href="{$article[url]}" target="_blank"><font color="0000ff">[阅读全文]</font></a></td>
  </tr></table>{/if}



           
      </td>
  {if $i%$cols==($cols-1)}</tr>{/if}
{/loop}
</table>
<!--内容简介开始 -->

{if $pages}
<div class="pages">{$pages}</div>
{/if}

标题部分链接样式用的是focus_link,请到对应的CSS文件中添加
具体内容如下:
a.focus_link {
        font-family: "宋体";
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
}
a.focus_link:hover {
        font-family: "宋体";
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
}
a.focus_link:link {
        font-family: "宋体";
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
}
a.focus_link:visited {
        font-family: "宋体";
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
}
2、建立调用标签

vistacn

建立步骤如下

vistacn

首页调用时使用长标签调用，将{$articlelist('focus',10,0,1,0,0,1,40,300,1,0,1,0,0,0,0,1,1)}放入到首页需调用的地方。
3文章发布
发布文章时请注意在高级选项里将内容简介写上，当然你也可以修改程序直接调用文章的内容
如果标签调用时选用了推荐，那还要记得把发布的信息设为推荐信息，首页才会显示

jvon

顶个。不过到教程区发会更好！

wxy5974478

请问对应的CSS文件是哪个？别笑我，我是菜鸟

wxy5974478

已解决。应设定内容摘要数值

igood888

好贴啊～～～～支持～～～～狂支持～～～

激情就是财富

好东西～～收藏．．急缺．

ysbe

留名睡觉回头来看!!!!

http://0398.vicp.cc

hooyang

请教一下，我按照上面的操作，但首页不显示，是是么原因啊？

hooyang

原帖由 hooyang 于 2007-1-4 03:33 PM 发表
请教一下，我按照上面的操作，但首页不显示，是是么原因啊？

用js和短标签调用能显示，但新改的模版不起作用，用长标签调用，没有任何反映，模版和标签设置都是按照上面的没有改动，文章也设置了推荐文章，仍不能显示。请教一楼和已经应用了的大侠们，这问题出在是么地方啊？

crazyabc

{$articlelist('focus',1,1,10,0,0,1,76,80,0,0,1,0,0,0,0,1,1)}


这个会显示了.

但标题
标题部分链接样式用的是focus_link,请到对应的CSS文件中添加
具体内容如下:
a.focus_link {
        font-family: "宋体";
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
}
a.focus_link:hover {
        font-family: "宋体";
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
}
a.focus_link:link {
        font-family: "宋体";
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
}
a.focus_link:visited {
        font-family: "宋体";
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
}

这个怎么弄.没反应.是在那个CSS弄?

sadgharama

谢谢！非常好用，而且可以举一反三调用其它的 比如 热点/最新 ……

还可以用循环 自动调用所有 频道的：
{loop $cha_articles $cha}
{$articlelist('focus',$cha[channelid],0,1, 0,0,1,40,300,1,0,1,0,0,0,0,1,1)}
{/loop}

那个 300 是控制 显示的文章摘要字符数的。没有成功的检查一下是不是字符数设置为 0 了。
最好还是在后台生成标签，然后把默认模版替换成 forcus 就可以了。
推荐长标签，不需要数据库支持。移植性好。

嘿嘿，循环是刚从huyyee 学来的，再次感谢！
http://bbs.phpcms.cn/thread-20352-1-1.html

[ 本帖最后由 sadgharama 于 2007-1-18 07:04 PM 编辑 ]

crazyabc

郁闷,按所说的方法做,只能做成这个样,郁闷!


1,标题没能变大边粗.
2,简介那,上下太多空白的地方.

[ 本帖最后由 crazyabc 于 2007-1-19 10:35 AM 编辑 ]