作者 主題: 3、ECSHOP響應式網頁製作-引入 BootStrap 響應式前端框架  (閱讀 476 次)

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

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
載入 BootStrap 可以用CDN的方式也可以將檔案放在自己的空間,我是放在自己的空間然後載入檔案,若要用CDN的方式就不用將檔案放在自己的空間裡,直接引用即可,不管你使用的是哪種方式,請先將DOCTYPE改成html5,作法如下:
將每個 dwt 標頭前四行
代碼: [選擇]
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns = "https://www.w3.org/1999/x html " >   
<head>
<meta  http-equiv = "Content-Type"  content = "text/ html ; charset=utf-8"  />
改成
代碼: [選擇]
<!DOCTYPE html>
< html  lang = "zh-tw" >
<head>
<meta  charset = "UTF-8"  />
<meta  name = "viewport"  content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
提示:使用 EditPlus 的多檔案取代功能會比較方便...


接著將 dwt 內的 <link href="{$ecs_css_path}" rel="stylesheet" type="text/css">(有些模板不是用 smarty 變數)改成
代碼: [選擇]
<link  href = "{$tpl} css / BootStrap .min. css "  rel = "stylesheet" >
<link  href = "{$tpl} css /font-awesome.min. css "  rel = "stylesheet" >
<link  href = "{$ecs_ css _path}"  rel = "stylesheet"  type = "text/ css "  />
提示:使用 EditPlus 的多檔案取代功能會比較方便...


<link href="{$tpl}css/font-awesome.min.css" rel="stylesheet">
雖然 BootStrap 也有自己的 Font Icon,但我用不習慣
Font Awesome 是一款很流行且方便的向量字體圖示工具,我一直在使用,如果你不使用就可以忽略這行
如果你要使用 Font Awesome,請先連結到 下載最新版的 Font Awesome 壓縮檔到你電腦中


解壓縮檔案上傳 css、fonts 兩個資料夾到模板目錄


ICON 預覽和語法獲取網站應用展示: https://we-shop.net/fa/

編輯模板的 library/page_footer.lbi 檔案最後加入
代碼: [選擇]
<script  type = "text/javascript"  src = "{$tpl} js / jquery -3.1.1.min. js " ></script>
<script  type = "text/javascript" >var jq3 =jquery .noConflict (); </script>
<script  type = "text/javascript"  src = "{$tpl} js / BootStrap .min. js " ></script>
<script  type = "text/javascript"  src = "{$tpl} js /custom. js " ></script>
custom.js 是自訂的js檔案,用來放置模板用到的  javasscript,如果js目錄中沒有這個檔案請自行建立

最後編輯 iincludes/lib_main.php 約 1673 行,找到
代碼: [選擇]
$smarty ->assign ('searchkeywords' , $searchkeywords );
在下一行加入:
代碼: [選擇]
$smarty ->assign ('tpl' , 'themes/' .$GLOBALS ['_CFG' ]['template' ].'/' ;);

到此為止,ECSHO 響應式網頁製作的準備工作已大功告成,在開始修改頁面之前,建議你再次檢查整個網站操作是否正常,所有修改動作都在本機進行,千萬不要動到正常運作中的網站,以免遭遇不測...
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php