2、響應式模板DIY懶人包--載入CSS和JS
2020-09-24
267
相關文章
請注意：在CSS資料夾內的root.css中，是整站的預設CSS設定，你可以依照個人喜好更改其中的配色樣式設定，例如:把網頁的預設顏色 --color: #121212; 改為 --color: #363636; 然後刷新頁面看看，這是CSS3的強大功能之，支援使用變數，如果哪天也能在變數中使用參數，那就完美了。
當然，在這之前你必須先連結樣式表，這些設定才有作用，為了以後增減方便，所以將所有的CSS檔案用css.lbi連結到網頁，以ECSHOP為例，請將懶人包解壓縮之後把 css、images、js、webfonts 四個資料夾上傳到目前的模板目錄，附件的css.lbi上傳到目前的模板目錄的library目錄內，然後將所有DWT內的
<link href="{$ecs_css_path}" rel="stylesheet" type="text/css" /> 點擊圖片可以放大檢視
改為
{include file='library/css.lbi'} 點擊圖片可以放大檢視
如果你是和我一樣龜毛的人，網頁原始碼中盡可能沒有多餘的垃圾代碼，那麼請將原本style.css內的樣式清空，保留頭部的註解區塊就好，其他的css設定請刪除或註解掉，以確保日後沒有多餘的代碼。否則請保留，因為過程中會盡可能地使用font icon來代替圖片，響應式模板的度局寬度是由CSS依不同設備動態調整的，為避免原有的設定造成干擾，很多樣式直接由懶人包中的CSS套用即可
有些特效能讓網頁提升體驗，因此加入適當的Javascript特效是必須的，但是很多外掛或稱插件，都必須依賴Jquery庫才能運作，導致一個網站可能同時載入多個不同版本的Jquery，因此懶人包中我把Boostrap自帶的JS捨去，並使用Jquery1.11.2版和幾個不須依賴JQ的JS原生插件，以便能順利套用在ECSHOP中，Javascript是一種客戶端動態執行的語言，為了不讓他暫用網頁的載入時間，建議在頁尾(</body>之前)載入即可。
ecshop請加在 page_footer.lbi 最後 <script type="text/javascript" src="js/wow.min.js"></script><!-- 動畫 -->
<script type="text/javascript" src="js/macy.js"></script><!-- 瀑布流 -->
<script type="text/javascript" src="js/sweetalert2.js"></script><!-- 彈窗 -->
<script type="text/javascript">
new WOW().init();
swal.setDefaults({
confirmButtonText: "確定",
cancelButtonText: "取消"
});
</script>
<script type="text/javascript" src="js/custom.js"></script><!-- 自訂 -->
如果是全新網頁，便可以直接載入Jquery，整體網頁結構如下:
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0" />
<meta name="Keywords" content="關鍵字" />
<meta name="Description" content="網頁描述" />
<title>網頁標題</title>
<link href="css/all.min.css" rel="stylesheet" type="text/css" />
<link href="css/sweetalert2.css" rel="stylesheet" type="text/css" />
<link href="css/animate.min.css" rel="stylesheet" type="text/css" />
<link href="css/base.css?{$time}" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>網頁內容</h3>
<script type="text/javascript" src="js/wow.min.js"></script><!-- 動畫 -->
<script type="text/javascript" src="js/macy.js"></script><!-- 瀑布流 -->
<script type="text/javascript" src="js/sweetalert2.js"></script><!-- 彈窗 -->
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery.okayNav-min.js"></script>
<script type="text/javascript">
var navigation = $('#nav-main').okayNav();
new WOW().init();
swal.setDefaults({
confirmButtonText: "確定",
cancelButtonText: "取消"
});
</script>
<script type="text/javascript" src="js/custom.js"></script><!-- 自訂 -->
</body>
</html>
如果你對2、響應式模板DIY懶人包--載入CSS和JS有任何問題請到討論區發帖。