作者 主題: 10、RWD響應式網頁設計-DWT調用商品分類樹  (閱讀 528 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
10、RWD響應式網頁設計-DWT調用商品分類樹
« 於: 七月 22, 2019, 02:10:12 下午 »
商品分類樹(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>
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php