ECSHOP添加首页文章分类方法『修正版』

2016-07-07 16:20 来源：www.chinab4c.com 作者：ecshop专家

原文地址：http://bbs.ecshop.com/viewthread.php?tid=70753&highlight=%CA%D7%D2%B3%2B%CE%C4%D5%C2
因为里面有点小小的错误：在index.dwt中少加入了一行代码<!-- TemplateEndEditable -->，导致添加的后面两列相同内容而且无法修改。
为方便菜鸟能够操作，所以本人修改之后发出这个，仅仅为了方便大家而已。

演示站：http://www.0573shop.com

一、style.css 底部添加：

 /*====================
首页文章分类
====================*/
#new-list{
width:748px;
height:100％;/* 首页文章分类高度调整*/
float:left;
padding:0 3px 0 0;
}
#new-list .new-left{
width:246px;
height:100％;
float:left;
padding:0 0 2px 0;
overflow:hidden;
}
#new-list .new-center{
width:246px;
height:100％;
float:left;
margin-left:5px;
overflow:hidden;
}
#new-list .new-right{
width:246px;
height:100％;
float:left;
margin-left:5px;
overflow:hidden;
}
#new-list .listStyle{
height:100％;
overflow:hidden;
}
.box_3{
border:1px solid #d4d4d4;
background-color:#fff;
height:200px;
}



二、cat_articles.lbi 文件里面内容

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class="box">
<div class="box_3">
<h3>
<span><a style="color: #565656; text-decoration: none" href="{$articles_cat.url}"
title="{$articles_cat.name|escape:html}">{$articles_cat.name|escape:html}</a></span>
<a href="{$articles_cat.url}"><img src="../images/more.gif" title="浏览更多" /></a>
</h3>
<div class="boxCenterList RelaArticle">
<!--{foreach from=$articles item=article}-->
<a href="{$article.url}" title="{$article.title|escape:html}">{$article.short_title|truncate:16:"...":true}</a><br />
<!--{/foreach}-->
</div>
</div>
</div>
<div class="blank5"></div>



三、index.dwt 右边合适位置添加：

搜索

</div>
<!--right end-->

在前面添加下面的代码：




<!--主区域文章分类 start-->
<div id="new-list">
<div class="new-left">
<!-- TemplateBeginEditable name="主区域左侧文章分类" -->
<!-- #BeginLibraryItem "/library/cat_articles.lbi" -->
<div class="box">
<div class="box_3">
<h3>
<span><a style="color: #565656; text-decoration: none" href="{$articles_cat.url}"
title="{$articles_cat.name|escape:html}">{$articles_cat.name|escape:html}</a></span>
<a href="{$articles_cat.url}"><img src="../images/more.gif" title="浏览更多" /></a>
</h3>
<div class="boxCenterList RelaArticle">
<!--{foreach from=$articles item=article}-->
<a href="{$article.url}" title="{$article.title|escape:html}">{$article.short_title|truncate:16:"...":true}</a><br />
<!--{/foreach}-->
</div>
</div>
</div>
<div class="blank5"></div>
<!-- #EndLibraryItem -->
<!-- TemplateEndEditable -->
</div>
<div class="new-center">
<!-- TemplateBeginEditable name="主区域中部文章分类" -->
<!-- #BeginLibraryItem "/library/cat_articles.lbi" -->
<div class="box">
<div class="box_3">
<h3>
<span><a style="color: #565656; text-decoration: none" href="{$articles_cat.url}"
title="{$articles_cat.name|escape:html}">{$articles_cat.name|escape:html}</a></span>
<a href="{$articles_cat.url}"><img src="../images/more.gif" title="浏览更多" /></a>
</h3>
<div class="boxCenterList RelaArticle">
<!--{foreach from=$articles item=article}-->
<a href="{$article.url}" title="{$article.title|escape:html}">{$article.short_title|truncate:16:"...":true}</a><br />
<!--{/foreach}-->
</div>
</div>
</div>
<div class="blank5"></div>
<!-- #EndLibraryItem -->
<!-- TemplateEndEditable -->
</div>
<div class="new-right">
<!-- TemplateBeginEditable name="主区域右侧文章分类" -->
<!-- #BeginLibraryItem "/library/cat_articles.lbi" -->
<div class="box">
<div class="box_3">
<h3>
<span><a style="color: #565656; text-decoration: none" href="{$articles_cat.url}"
title="{$articles_cat.name|escape:html}">{$articles_cat.name|escape:html}</a></span>
<a href="{$articles_cat.url}"><img src="../images/more.gif" title="浏览更多" /></a>
</h3>
<div class="boxCenterList RelaArticle">
<!--{foreach from=$articles item=article}-->
<a href="{$article.url}" title="{$article.title|escape:html}">{$article.short_title|truncate:16:"...":true}</a><br />
<!--{/foreach}-->
</div>
</div>
</div>
<div class="blank5"></div>
<!-- #EndLibraryItem -->
<!-- TemplateEndEditable -->
</div>
</div>
<!--主区域文章分类 END-->


四、后台模板设置，指定文章分类位置、数量（数量推荐为 8 ）。

如有问题请登录 http://www.0573shop.com 查看


回答：
不错，收藏了

留个脚印,以后再用~~~~~~~

很不错很热心 收藏了

顶起！！

谢谢评分

很好！谢谢分享

谢谢共享,我已经用了
我想让他像新产品那样居中在整个右侧,怎么调

我用的是京模板，采用你的文章分类方法出现如下情况，1.文章的more图标和分类标题在一起，2.文章分类内容没有了前面的小图标,我试过很多方法,把BG.JPG更改了也不行,但在默认模板下是可以的,楼主或各位能否帮忙解决一下？谢谢了！
123.jpg

谢谢楼主分享啊！

谢谢楼主分享

请教LZ:若要每个页面都显示,应该如何改?谢谢!

不错的分享，支持一下。

做个记号...

很好！做个记号。。O(∩_∩)O哈哈~