更多 HTML5 響應式模板免費下載 
目前位置: 首頁 > ecshop4 購物網站通用響應式模板 > ECSHOP 響應式模板DIY-頁首

ECSHOP 響應式模板DIY-頁首 超大 稍大 微大

發表於: 2022-03-05 最後更新: 最後更新時間:2022-03-07
原本希望能詳細說明模板修改方法,但是 ecshop 的模板實在太多了,除了原有的檔案之外,在修改的過程中還會將部分程式碼獨立成 lbi ,以免代碼過長而不利閱讀與編輯,編輯器 Hbuider 和 Editplus 交叉使用,如果你有自己慣用的編輯器,也可以繼續使用...,由於我對配色沒啥概念,因此若顏色相關修改有不適用的地方,歡迎不吝賜教 ...
在修改之前我先把下列檔案的 1 都去掉,page_footer1、page_header1 改為 page_footer、page_header,這樣才不會相同的檔案要編輯兩次
exchange_list.dwt
<!-- #BeginLibraryItem "/library/page_footer1.lbi" --> => <!-- #BeginLibraryItem "/library/page_footer.lbi" -->
user_passport.dwt
<!-- #BeginLibraryItem "/library/page_header1.lbi" --> => <!-- #BeginLibraryItem "/library/page_header.lbi" -->
flow.dwt
<!-- #BeginLibraryItem "/library/page_header1.lbi" --> => <!-- #BeginLibraryItem "/library/page_header.lbi" -->
<!-- #BeginLibraryItem "/library/page_footer1.lbi" --> => <!-- #BeginLibraryItem "/library/page_footer.lbi" -->

底下是編輯後的 page_header.lbi 的程式碼
為了日後方便維護,只有多頁共用的樣式設定才會放在 style.css 內
LOGO圖片使用透明的PNG格式,放在自訂的 public/images 目錄裡
導航欄部分是為了代碼容易閱讀,因此獨立出來再以 {include file='library/nav.lbi'} 的方式引入
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
	.logo {
		 max-width: 90%;
		 max-height: 50px;
	}
	.shop_notice {
		color: #620053;
		line-height: 3;
	}
	.shop_notice a, .bi-hospital a {
		color: #620053;
		text-decoration: none;
	}
	.shop_notice a:hover, .bi-hospital a:hover {
		color: #34022c;
	}
@media screen and (min-width:769px) {
	.cart_info {
		width: 27%;
		top: 5px;
	}
	.ur_here {
		width: 72.5%;
	}
}	
@media screen and (max-width:769px) {
	.cart_info {
		width: 40%;
		bottom: 50px;
	}
	.ur_here {
		width: 90%;
	}
}	
	.cart_info {
		background-color: #620053;
		position: absolute;
		right: 0;
		line-height: 40px;
	}
	.cart_info:hover {
		background-color: #34022c;
	}
	.search {
		color: #620053;
		line-height: 49px;
		cursor: pointer;
		position: relative;
		display: inline-block;
	}
	.search em {
		font-size: 1rem;
		color: #fff;
		position: absolute;
		top: -3px;
		left: 3px;
	}
	.search:hover {
		color: #34022c;
	}
	#search {
		display: none;
		position: absolute;
		left: 0;
	}
</style>
<a name="top"></a>
<div id="side" class="navbar-fixed-top">
	<div id="logo" class="text-center">
		<a href="index.php">
			<img src="{$public}images/logo.png" alt="LOGO" class="logo" />
		</a>
	</div>
	{include file='library/nav.lbi'}
</div>
<a title="{$lang.gotop}" id="gotop" href="javascript:;">
	<div><i class="bi bi-caret-up-square-fill bi-0 bi-4x"></i></div>
</a>
<div class="container-fluid" id="main">
	<header class="">
		<div class="search float-start" onclick="$('#search').toggle('slow');">
			<i class="bi bi-search-heart-fill bi-2x"><em>搜</em></i>
		</div>
		<div id="search" style="width: 250px;">
			<!-- 搜索框 -->
			{include file='library/search.lbi'}	
		</div>
		<div id="ur_here" class="text-overflow ur_here"></div>
		<div class="cart_info text-end">
			<!-- #BeginlibraryItem "/library/cart.lbi" -->
			<div class="cart" id="ECS_CaRTINFO"> {insert name='cart_info'} </div>
			<!-- #EndlibraryItem -->
		</div>
	</header>
	<script>
		var pname = '{$pname}';
		var shop_notice = '{$shop_notice}';
		var page_title = '{$page_title}';
		var ur_here = '{$ur_here}';
		var home = '<a href="index.php"><i class="bi bi-hospital bi-3x bi-lr"></i></a>';
	</script>

整個頁首共用於所有頁面,為了盡量在寬度有限的移動設備上,也能展示出與PC頁面接近的區塊,最終決定以側邊欄的方式呈現,當然這是我個人的風格,你應該也有自己的做法,從下圖中可以看出我將它分成六個部分,第六部分是屬於 index 的範圍
1、自訂義導航欄:{include file='library/nav.lbi'} 內容包含LOGO、商品分類、文章分類、中間導航、頂部導航、會員操作等區塊的整合,使用多級選單呈現...
2、商品搜索框:平常是隱藏的,當點擊放大鏡 icon 後便會顯示或隱藏
3、目前位置:在首頁時會顯示網站公告,非首頁則顯示目前頁面位置
4、購物車資訊:平常顯示購物車數量,游標移至上方則顯示購買商品清單,點擊則進入結帳頁面
5、首頁主廣告:支援手指左右撥動換圖,可根據螢幕寬度顯示不同圖片
6、首頁上架資訊:虛擬銷量是4.X板新增的功能,可在後台設置,當點擊圖片後會以燈箱開啟原圖


從上圖可看出雖然整個頁首部分在不同裝置上排版略有不同,但可操作功能並無差異,這就是響應式模板的優點,對管理者來說節省了大量的時間與成本,對消費者來說使用任何設備都能順利瀏覽,不會有手機與PC的網址不同的問題,在 nav.lbi 裡也包含了其他的 lbi
nav.lbi
<link rel="stylesheet" type="text/css" href="{$public}ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="{$public}ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<link rel="stylesheet" type="text/css" href="{$public}ddlevelsfiles/ddlevelsmenu-mobile.css" />
<style type="text/css">
	.caption {
		background-color: rgba(98, 0, 83, 0.8);
		color: orange;
		font-size: 1.1rem;
		font-weight: 700;
	}
</style>
<script>
	var dir = '{$public}';
</script>
<script type="text/javascript" src="{$public}ddlevelsfiles/ddlevelsmenu.js"></script>
<div id="ddsidemenubar" class="markermenu">
	<ul>
		<!--{if $categories} 產品分類-->
		<li class="caption">
			<i class="bi bi-minecart-loaded"></i>{$lang.goods_category}
		</li>
		{include file='library/categories.lbi'}
		<!--{/if} 商品分類-->
		<!-- {if $article_categories} 文章分類-->
		<li class="caption">
			<i class="bi bi-pencil-square"></i>{$lang.article_cat}
		</li>
		{include file='library/article_category_tree.lbi'}
		<!-- {/if} 文章分類 -->
		<!-- {if $navigator_list.middle} 中間導航-->
		{include file='library/nav_middle.lbi'}
		<!--{/if} 中間導航-->
		<!-- {if $navigator_list.top}特價訊息 -->
		<li>
			<a href="#" rel="ddsubmenuside3">
				<i class="bi bi-tags-fill"></i>{$lang.special_offer}
			</a>
		</li>
		<!-- {/if}特價訊息 -->
		<span id="ECS_MEMBERZONE">
			{* ECSHOP 提醒您:根據會員id來呼叫member_info.lbi顯示不同的界面 *}
			{insert name='member_info'}
		</span>
	</ul>
</div>
<a class="animateddrawer" id="ddsidemenubar-mobiletoggle" href="#">
	<span></span>
</a>
<script type="text/javascript">
	ddlevelsmenu.setup("ddsidemenubar", "sidebar") 
</script>
<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">
</ul>
<ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">
	{include file='library/nav_top.lbi'}
</ul>

以下列出了在 nav.lbi 包含的樣板檔
categories.lbi
<!--{foreach from=get_categories_tree() item=cat name=catename }-->
<li>
	<a href="<!--{if $cat.cat_id}-->javascript:;<!--{else}-->{$cat.url}<!--{/if}-->"<!--{if $cat.cat_id}--> rel="goods{$cat.cat_id}"<!--{/if}-->>
		<i class="bi bi-<!--{if $cat.cat_id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>{$cat.name|escape:html}
		<!--{if !$cat.cat_id}-->
		<span class="goods_num">{insert name="cat_num" id=$cat.id}</span>
		<!--{/if}-->
	</a>
	<!--{if $cat.cat_id}-->
	<ul id="goods{$cat.cat_id}" class="ddsubmenustyle blackwhite">
		<!--{foreach from=$cat.cat_id item=child name=childname}-->
		<li>
			<a href="<!--{if $child.cat_id}-->javascript:;<!--{else}-->{$child.url}<!--{/if}-->">
				<i class="bi bi-<!--{if $child.cat_id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>{$child.name|escape:html}
				<!--{if !$child.cat_id}-->
				<span class="goods_num">{insert name="cat_num" id=$child.id}</span>
				<!--{/if}-->
			</a>
			<!--{if $child.cat_id}-->
			<ul>
				<!--{foreach from=$child.cat_id item=children name=childrenname}-->
				<li>
					<a href="{$children.url}">
						<i class="bi bi-<!--{if $children.cat_id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>{$children.name|escape:html}
						<!--{if !$children.cat_id}-->
						<span class="goods_num">
							{insert name="cat_num" id=$children.id}
						</span>
						<!--{/if}-->
					</a>
				</li>
				<!--{/foreach}-->
			</ul>
			<!--{/if}-->
		</li>
		<!--{/foreach}-->
	</ul>
	<!--{/if}-->
</li>
<!--{/foreach}-->

article_category_tree.lbi
<!--{foreach from=$article_categories item=cat}-->
<li>
	<a href="<!--{if $cat.children.id}-->javascript:;<!--{else}-->{$cat.url}<!--{/if}-->"<!--{if $cat.children.id}--> rel="article{$cat.children.id}"<!--{/if}-->>
		<i class="bi bi-<!--{if $cat.children.id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>
		{$cat.name|escape:html}
		<span class="article_num">{insert name="cat_num" id=$cat.id table=article}</span>
	</a>
	<!-- {if $cat.children} -->
	<ul id="article{$cat.children.id}" class="ddsubmenustyle blackwhite">
		<!--{foreach from=$cat.children item=child}-->
		<li>
			<a href="{$child.url}">
				<i class="bi bi-<!--{if $child.id}-->folder-symlink-fill<!--{else}-->file-earmark-check-fill<!--{/if}-->"></i>
				{$child.name|escape:html}
				<span class="article_num">
					{insert name="cat_num" id=$child.id table=article}
				</span>
			</a>
		</li>
		<!--{/foreach}-->
	</ul>
	<!-- {/if} -->
</li>
<!--{/foreach}-->

nav_middle.lbi
<!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav key=key} -->
<!-- {if $nav.name eq '首頁'} -->
{assign var=bi value=home}
<!-- {elseif $nav.name eq '留言板'} -->
{assign var=bi value=chat-dots-fill}
<!-- {elseif $nav.name eq '聯絡我們'} -->
{assign var=bi value=telephone-forward-fill}
<!-- {elseif $nav.name eq '部落格'} -->
{assign var=bi value=edit-2-fill}
<!-- {elseif $nav.name eq '討論區'} -->
{assign var=bi value=chat-left-quote-fill}
<!-- {else} -->
{assign var=bi value=basket-fill}
<!-- {/if} -->
<li>
	<a href="{$nav.url}"<!-- {if $nav.opennew eq 1} --> target="_blank"<!-- {/if} --><!-- {if $nav.active eq 1} --> class="active"<!-- {/if} -->>
		<i class="bi bi-{$bi}"></i>{$nav.name}
	</a>
</li>
<!-- {/foreach} -->	

nav_top.lbi
<!-- {foreach name=nav_top_list from=$navigator_list.top item=nav key=key} -->
<!-- {if $nav.name eq '選購中心'} -->
{assign var=bi value=shop}
<!-- {elseif $nav.name eq '團購商品'} -->
{assign var=bi value=people-fill}
<!-- {elseif $nav.name eq '奪寶奇兵' or $nav.name eq '限時搶購'} -->
{assign var=bi value=alarm-fill}
<!-- {elseif $nav.name eq '優惠活動'} -->
{assign var=bi value=tag-fill}
<!-- {elseif $nav.name eq '報價單'} -->
{assign var=bi value=bar-chart-steps}
<!-- {else} -->
{assign var=bi value=shop}
<!-- {/if} -->
<li>
	<a href="{$nav.url}"<!-- {if $nav.opennew eq 1} --> target="_blank"<!-- {/if} --><!-- {if $nav.active eq 1} --> class="selected"<!-- {/if} -->>
		<i class="bi bi-{$bi}"></i>{$nav.name}
	</a>
</li>
<!-- {/foreach} -->	

member_info.lbi
<div id="append_parent"></div>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- {if $user_info} -->
<li>
	<a href="user.php" title="{$lang.user_center}">
		<i class="bi bi-person-video2"></i>{$user_info.username}
	</a>
</li>
<li>
	<a href="user.php?act=logout">
		<i class="bi bi-box-arrow-left"></i>{$lang.user_logout}
	</a>
</li>
<!-- {else} -->
<li>
	<a href="user.php">
		<i class="bi bi-box-arrow-in-right"></i>{$lang.label_login}
	</a> 
</li>
<li class="menu-item">
	<a href="user.php?act=register">
		<i class="bi bi-person-plus-fill"></i>{$lang.free_regist}
	</a> 
</li>
 <!-- {/if} -->	

DEMO

對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 最後更新時間:2022-03-07