这一篇我们要对log_list.php日志列表页模板的制作进行说明，上一篇文章中说到，把目标站的原代码保存到IKUJIA文件夹下，命名为index.htm，OK这里（以后我们也都会用到）我们用DW打开，删除上一文章中说到的头部部分，然后我们再逐个删除内容显示和边栏显示多余的部分。

怎么样判断是多余的呢，举个例：下面是目标站的原代码做个简单的修改，但大体一样

<ul class="recentcomment"> <li class="rc"> <a href="#" title="酷家小屋 on Ultimo 主题测试">酷家小屋</a>: <span class="excerpt">博主,可否借用模板样式改做成emlog程...</span></li> <li class="rc"> <a href="#" title="酷家小屋 on Ultimo 主题测试">酷家小屋</a>: <span class="excerpt">博主,可否借用模板样式改做成emlog程...</span></li> <li class="rc"> <a href="#" title="酷家小屋 on Ultimo 主题测试">酷家小屋</a>: <span class="excerpt">博主,可否借用模板样式改做成emlog程...</span></li> </ul>

这里我们可以看到，内容<li></li>部分是在<ul></ul>标签里显示的，所以我们删除多余的部分，留下一个来就可以了，为啥要留一个，恩……很简单，用循环标签（如循环标签就加<li></li>的前后面）就可以让他们自动实现多条信息的显示，就这样，删除机关是这样的

<ul class="recentcomment"> <li class="rc"> <a href="#" title="酷家小屋 on Ultimo 主题测试">酷家小屋</a>: <span class="excerpt">博主,可否借用模板样式改做成emlog程...</span></li> </ul>

OK，页面上的全部（除一条）多余的都得删除了，这将为我们以后把EMLOG的标签好一一对应加上去有一定的帮助（小窍门：在删除的时候，可以在”设计模式“下进行，鼠标移动到DIV标签上的时候，线条就会程红色壮，点击后就可以右键删除了）。

接着我们在新建一个名为log_list.php的文件，保存到ikujia文件夹下，清空所有代码后我们加入入下代码：

<?php /* * 首页日志列表部分 */ if(!defined('EMLOG_ROOT')) {exit('error!');} ?>

不要问我这是什么意思，不知道的可以去EMLOG论坛或前面几篇文章看看

接着我们把index.htm删除后的代码复制粘贴近来

然后一一对应加上EMLOG标签，标签使用方法参考《emlog主题模板制作教程：标签分析》。

举几个例：

<h2><a href="#" rel="bookmark" title="Permalink to: Ultimo 主题测试">标题</a></h2> </div> <!-- end title --> <div class="postmeta"> <span class="category">Posted in <a href="#" title="View all posts in WordPress" rel="category tag">分类</a></span> <span class="date">on 2010.09.16</span> <span class="comments"><a href="#" title="Comment on Ultimo 主题测试">146 comments</a></span> </div> <!-- end postmeta --> <div class="entry"> <p>内容</p> <div class="clear"></div> </div> <!-- end entry --> <div class="postmeta_bottom"> <span class="tag">Tags:<span><a href="#" rel="tag">关键字</a> <a href="#" rel="tag">关键字</a> <a href="#" rel="tag">关键字</a></span></span>

从上面代码我们可以看到，标题的部分在<h2></h2>标签里，这样的话我们就把emlog显示标题的标签替换<h2></h2>里面的代码即可。

<h2><?php topflg($value['top']); ?><a href="<?php echo $value['log_url']; ?>"><?php echo $value['log_title']; ?></a></h2>

其他的一样，可以参考：emlog4模板制作详解(二)标签分析进行

在替换完所有的标签后，我们得加个循环标签上去，这样才可以显示多篇文章，我们可以在DW下看到是从<div class="post" id="post-500">开始（方法和删除选取一样，点击DIV布局线条，在”代码模式“我们就可以看到这个DIV容器被选取，选取的前面加上开始循环的代码，选取的后面加上循环结束的代码），循环代码如下：开始循环代码<?php foreach($logs as $value): ?>结束循环代码<?php endforeach; ?>
OK，最后弄帖出鄙人转换后的代码：

<?php 
/*
* 首页日志列表部分
*/
if(!defined('EMLOG_ROOT')) {exit('error!');} 
?> <div id="container"> <div id="main"> <!-- end post --><!-- end post --> <!-- end post --> <?php doAction('index_loglist_top'); ?>
<?php foreach($logs as $value): ?> <div class="post" id="post-500"> <div class="title"> <h2><?php topflg($value['top']); ?><a href="<?php echo $value['log_url']; ?>"><?php echo $value['log_title']; ?></a></h2> </div> <!-- end title --> <div class="postmeta"> <span class="category">Posted in <?php blog_sort($value['logid']); ?></span> <span class="date">on <?php echo gmdate('Y.n.j', $value['date']); ?></span> <span class="comments"><a href="<?php echo $value['log_url']; ?>"><?php echo $value['comnum']; ?> comments</a></span> </div> <!-- end postmeta --> <div class="entry"> <?php echo $value['log_description']; ?> <div class="clear"></div> </div> <!-- end entry --> <p class="att"><?php blog_att($value['logid']); ?></p> <div class="postmeta_bottom"> <span class="tag"><?php blog_tag($value['logid']); ?></span> <div class="clear"></div> </div> <!-- end postmeta_bottom --> </div> <?php endforeach; ?> <!-- end post --> <!-- end post --> <div class="pagination" style="display: none;"> <span class="left"></span> <span class="right"><?php echo $page_url;?></span> <div class="clear"></div> </div><!-- end pagination --> </div><!-- end main --> <div id="sidebar"> <ul> <?php include View::getView('side'); ?> </ul><!-- end ul --> </div><!-- end sidebar --> <div class="clear"></div> </div><!-- end container --> <div class="clear"></div><!--ie6--> </div><!-- end page_wrap --> <?php include View::getView('footer'); ?>

恩，对了，你会发现为什么我的代码里有<?php include View::getView('side'); ?>和<?php include View::getView('footer'); ?>标签，是的，我把这部分的代码删除了，前者是调用显示边栏的，后者是调用显示底部的，你也可以新建side.php和footer.php这2个文件，把对应删除的部分直接复制粘贴进去，保存到ikujia文件夹下，后面我们将慢慢对这些文件的修改做说明，OK，这篇文章就写到这里，希望看完的你有一定的收获

 　最后来张效果图：

本教程转自爱酷家，内容略有整理，原文地址：http://www.ikujia.com/tal/html/40.html

扫一扫