作者 主題: 14、RWD響應式網頁設計-index 網站幫助與友情連結  (閱讀 514 次)

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

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
14、RWD響應式網頁設計-index 網站幫助與友情連結
« 於: 七月 22, 2019, 03:20:39 下午 »
網站幫助與友情連結這兩個區塊可以放在網頁的任何位置,或任何頁面上,只要將css調整好即可,所以我將檔案分成 help.lbi 和 links.lbi 方便調用,其實還有一個底部導航,我希望它全站顯示因此直接寫到 page_footer.lbi 了,:
代碼: [選擇]
    <!-- #BeginLibraryItem "/library/help.lbi" --><!-- #EndLibraryItem -->
    <!-- #BeginLibraryItem "/library/links.lbi" --><!-- #EndLibraryItem -->
  <!-- {if $navigator_list.bottom} -->
  <!-- 底部導航 -->
  <div class="row">
    <div class="col-md-12 text-center">
      <!-- {foreach name=nav_bottom_list from=$navigator_list.bottom item=nav} -->
        <a href="{$nav.url}"{if $nav.opennew eq 1} target="_blank"{/if}>{$nav.name}</a>
        <!-- {if !$smarty.foreach.nav_bottom_list.last} --> - <!-- {/if} -->
      <!-- {/foreach} -->
    </div>
  </div>
  <!-- {/if} -->


網站幫助與友情連結依項目多寡決定佔12格或6格,避免頁面過多空白區域:
代碼: [選擇]
<!--{if $helps}-->
<div class="block">
  <div class="col-md-12">
    <div class="title"><i class="fa fa-question-circle"></i>  網站幫助<span class="tip"><em>HELP</em></span></div>
    <table class="table table-hover table-bordered">
      <tr>
        <!-- {foreach from=$helps item=help_cat} -->
        <th class="help-name"><i class="fa fa-question"></i>  {$help_cat.cat_name}</th>
        <!-- {/foreach} -->
      </tr>
      <tr>
        <!-- {foreach from=$helps item=help_cat} -->
        <td valign="top">
          <!-- {foreach from=$help_cat.article item=item} -->
          <div class="help-link">  <i class="fa fa-angle-double-right"></i>  <a href="{$item.url}" title="{$item.title|escape:html}" class="">{$item.short_title}</a></div>
          <!-- {/foreach} -->
        </td>
        <!-- {/foreach} -->
      </tr>
    </table>
  </div>
</div>
<!--{/if}-->
<!-- {if $img_links  or $txt_links } -->
<div class="block">
  <div class="col-md-12">
    <div class="title"><i class="fa fa-link"></i>  友情連結<span class="tip"><em>LINKS</em></span></div>
    <div class="col-md-12 links">
      <div class="">
        <!-- {if $txt_links} -->
        <!-- {foreach from=$txt_links item=link} -->
        <a class="btn btn-info" href="{$link.url}" target="_blank" title="{$link.name}">{$link.name}</a>
        <!-- {/foreach} -->
        <!-- {/if} -->
       
        <!-- {if $img_links} -->
        <!-- {foreach from=$img_links item=link} -->
        <a href="{$link.url}" target="_blank" title="{$link.name}"><img src="{$link.logo}" alt="{$link.name}" /></a>
        <!-- {/foreach} -->
        <!-- {/if} -->
      </div>
    </div>
  </div>
</div>
<!-- {/if} -->


截至目為止已經完成頁首、頁尾和首頁的模板,你應該會發現自己設定的樣式並不多,除了區塊共用樣式之外,很多樣式在 BootStrap 都已經幫你寫好了,不用死記只要記住網址,像我一樣用到的時候再來查就好了, BootStrap
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php