apeblog/public/template/default/pc/public/header.html

<header>
	<div class="header-main-plane">
		<div class="header-main container  header-main-location-left">
			<script>
				function openMenu() {
					$('body').css('overflow', 'hidden');
					$(".drawer-menu-plane").addClass("drawer-menu-plane-show");
					$(".menu-plane").appendTo($(".drawer-menu-list"));
					$(".user-menu-plane").appendTo($(".drawer-menu-list"));
					$(".user-menu-main").not('.user-menu-main-notlogin').append('<div class="m-dropdown" onclick="mobile_menuclick(event,this)"><i class="fa fa-angle-down"></i></div>')
				}

				function closeMenu() {
					$('body').css('overflow', 'auto');
					$(".drawer-menu-plane").removeClass("drawer-menu-plane-show");
					$(".user-menu-plane").prependTo($(".header-menu"));
					$(".menu-plane").prependTo($(".header-menu"));
					$(".m-dropdown").remove();
				}

				function openSearch() {
					$(".dialog-search-plane").addClass("dialog-search-plane-show");
				}

				function closeSearch() {
					$(".dialog-search-plane").removeClass("dialog-search-plane-show");
				}

				function darkMode() {
					if (window.isdark == true) {
						removedarkcss();
						cp_user_set_dark('0');
					} else {
						loaddarkcss();
						cp_user_set_dark('1');
					}
				}
			</script>
			<div class="mobile-menu-btn" onclick="openMenu()">
				<i class="fa fa-bars" aria-hidden="true"></i>
			</div>
			<div class="drawer-menu-plane">
				<div class="drawer-menu-list">
					<div class="menu-mobile">
						<ul class="menu-mobile-header-list">
							{ape:nav type="all"}
							<li id="menu-item-{$field.id}" class="menu-item {notempty name="field['child']"}menu-item-has-children{/notempty} {:is_active_nav($cid,$field['id'])?'current-menu-item current_page_item':''} menu-item-{$field['id']}">
							{notempty name="field['child']"}
								<a href="#" aria-current="page">{$field['title']}</a>
							{else /}
								<a href="{$field['url']}" aria-current="page">{$field['title']}</a>
							{/notempty}
							{notempty name="field['child']"}
							<ul class="sub-menu">
								{ape:nav type="son" typeId="$field['id']" void="vo"}
								<li id="menu-item-{$vo.id}" class="menu-item menu-item-{$vo.id} {:is_active_nav($cid,$vo['id'])?'current-menu-item':''}">
									<a title="{$vo['title']}" aria-current="page" href="{$vo['url']}" {if $vo['target']} target="_blank"{/if}>{$vo['title']}</a>
								</li>
								{/ape:nav}
							</ul>
							{/notempty}
							</li>
							{/ape:nav}
						</ul>
					</div>
				</div>
				<div class="drawer-menu-write" onclick="closeMenu()"></div>
			</div>
			<div class="header-logo-plane">
				<div class="header-logo"><a href="/"><img src="{:file_cdn(web_config('logo'))}" alt=""></a></div>
			</div>
			<div class="mobile-search-btn" onclick="openSearch()">
				<i class="fa fa-search"></i>
			</div>
			<div class="dialog-search-plane">
				<div class="dialog-mask" onclick="closeSearch()"></div>
				<div class="dialog-plane">
					<h2>搜索内容</h2>
					<form class="search-form" action="{:url('/index/article/search')}" method="get" role="search">
						<div class="search-form-input-plane">
							<input type="text" class="search-keyword" name="kw" placeholder="搜索内容" value="">
						</div>
						<div>
							<button type="submit" class="search-submit" value="&#xf002;">搜索</button>
						</div>
					</form>
				</div>
			</div>
			<div class="header-menu">
				<div class="menu-plane">
					<nav class="menu-header-plane">
						<ul id="menu-header-list" class="menu-header-list">
							{ape:nav type="all"}
							<li class="menu-item {notempty name="field['child']"}menu-item-has-children{/notempty} {:is_active_nav($cid,$field['id'])?'current-menu-item':''} menu-item-{$field['id']}">
								{notempty name="field['child']"}
								<a href="#" aria-current="page">{$field['title']}</a>
								{else /}
								<a href="{$field['url']}" aria-current="page">{$field['title']}</a>
								{/notempty}
								{notempty name="field['child']"}
								<ul class="sub-menu">
									{ape:nav type="son" typeId="$field['id']" void="vo"}
									<li id="menu-item-{$vo.id}" class="menu-item menu-item-{$vo.id} {:is_active_nav($cid,$vo['id'])?'current-menu-item':''}">
										<a title="{$vo['title']}" href="{$vo['url']}" {if $vo["target"]} target="_blank"{/if}>{$vo['title']}</a>
									</li>
									{/ape:nav}
								</ul>
								{/notempty}
							</li>
							{/ape:nav}
						</ul>
					</nav>
				</div>
				<div class="user-menu-plane">
					<div class="user-menu-pc-search" onclick="openSearch()" title="搜索">
						<i class="fal fa-search"></i>
					</div>
					<div class="user-menu-pc-dark" onclick="darkMode()" title="深色模式">
						<i class="far fa-moon" id="darkModeicon"></i>
					</div>
					{if web_config('is_register')}
					{notempty name="user_info"}
					<ul class="user-menu">
						<li>
							<a class="user-menu-main">
								<img class="user-avatar" width="30" height="30" src="{$user_info.avatar}"  onerror="this.src='__IMG__/avatar.png';">
								<span class="user-menu-name">{$user_info.username}</span>
							</a>
							<ul class="user-sub-menu sub-menu">
								<li>
									<a href="{:url('index/user/profile')}"><i class="fas fa-user-cog"></i> 账号设置</a>
								</li>
<!--								<li>-->
<!--									<a href="{:url('index/login/loginout')}"><i class="far fa-edit"></i>新建文章</a>-->
<!--								</li>-->
								<li>
									<a href="{:url('index/user/logout')}"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
								</li>
							</ul>
						</li>
					</ul>
					{else /}
					<span class="user-menu-main user-menu-main-notlogin">
                 		<a href="{:url('/index/user/login')}"><button class="login-btn-header">登录</button></a>
                    </span>
					{/notempty}
					{/if}
				</div>
			</div>
		</div>
	</div>
</header>