[andy]

商品分類樹（category_tree.lbi）會有多個DWT調用，所以獨立成一個LBI，在DWT如果要調用他，可以使用：

代碼: [選擇]

<!-- #BeginLibraryItem "/library/category_tree.lbi" --><!-- #EndLibraryItem -->

如果在LBI要調用他，則必須使用：

代碼: [選擇]

{include file='library/category_tree.lbi'}

前面說過首頁的布局是為三欄，如果網站是以商品為主的，左側邊欄可以放置商品分類樹，如果網站是以文章為主的，左側邊欄可以放置文章分類樹或最新文章區塊，在不同的設備會呈現不同效果：






底下列出的是我給 category_tree.lbi 的html結構，僅供參考，因為沒有打算共用，所以把css也放到檔案裡...

代碼: [選擇]

<style type="text/css">
    .categore_tree {margin: 0;}
    .categore_tree .title {background: #3b270f;color: #FFF;line-height: 36px;text-align: center;font-size: 1.2em;border-radius: 10px 10px 0 0;}
    .categore_tree .content .parent {background: #d3c08d ;color: #3b270f;line-height: 32px;margin: 3px 0;}
    .categore_tree .content .parent a {color: #3b270f;text-decoration: none;}
    .categore_tree .content .parent a:hover {color: #fff;text-decoration: none;}
    .categore_tree .content .sub {margin-left: 15px;}
    .categore_tree .content .sub a {color: #3b270f;text-decoration: none;}
    .categore_tree .content .sub a:hover {color: #f00;text-decoration: none;}
</style>
<div class="row categore_tree">
  <div class="title"><i class="fa fa-sitemap"></i>  {$lang.goods_category}</div>
  <div class="content">
    <!--{foreach from=$categories item=cat}-->
    <div class="col-md-12 parent"><i class="fa fa-folder-open"></i>  <a href="{$cat.url}"{if $category eq $cat.id} class="active"{/if}>{$cat.name|escape:html}</a></div>
    <!--{if $cat.cat_id}-->
    <div class="row sub">
      <!--{foreach from=$cat.cat_id item=child}-->
      <div class="col-xs-6 col-sm-4 col-md-12"><i class="fa fa-file-text-o"></i>  <a href="{$child.url}""{if $category eq $child.id} class="active"{/if}>{$child.name|escape:html}</a></div>
      <!--{/foreach}-->
    </div>
    <!--{/if}-->
    <!--{/foreach}-->
  </ul>
</div>
</div>