目前位置: 首頁 > Boostrap4響應式模板DIy > 2、響應式模板DIY懶人包--載入CSS和JS

2、響應式模板DIY懶人包--載入CSS和JS 超大 稍大 微大

10 發表於: 2020-09-24 最後更新: 最後更新時間:2020-09-24

請注意:在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>
您必須先 登入 註冊 才能下載附件!
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 最後更新時間:2020-09-24