网站页眉(Header)是网页顶部固定区域,包含网站核心导航和品牌标识,通常由Logo、主导航菜单、搜索框、实用工具(如登录/注册、购物车)和联系方式等组成。其特点是保持全站一致性、固定显示、响应式设计并强化品牌形象,设计需简洁明了、突出重要功能、符合整体风格并考虑加载速度和移动端体验,直接影响用户导航效率和整体体验。
这一部分的外在展现虽然并不起眼,但实际开发主题中所需的精力投入往往是最大的,博主经常在处理完header模块之后,就感觉难以为继,-_-!!!太耗时间精力了。
网站名称与logo
第一句的 if 判断是判断模板是否通过模板设置设置了 logo 的地址,如果设置了就显示 logo 图片,否则就显示博客标题。 <?php $this->options->siteUrl(); ?>
是网站地址, <?php $this->options->title() ?>
是网站名字, <?php $this->options->description() ?>
是网站描述。
<?php if ($this->options->logoUrl): ?>
<a id="logo" href="<?php $this->options->siteUrl(); ?>">
<img
src="<?php $this->options->logoUrl() ?>"
alt="<?php $this->options->title() ?>"
/>
</a>
<?php else: ?>
<a id="logo" href="<?php $this->options->siteUrl(); ?>"
><?php $this->options->title() ?></a
>
<p class="description"><?php $this->options->description() ?></p>
<?php endif; ?>
站内搜索
当你的文章很多很多,这个搜索就必不可少。美化搜索框不要动 form action 和 input name,action 和 name 是必须这么写的。
<form id="search" method="post" action="<?php $this->options->siteUrl(); ?>" role="search">
<label for="s" class="sr-only"><?php _e('搜索关键字'); ?></label>
<input type="text" id="s" name="s" class="text" placeholder="<?php _e('输入关键字搜索'); ?>"/>
<button type="submit" class="submit"><?php _e('搜索'); ?></button>
</form>
页面导航
其中<?php $this->options->siteUrl(); ?>
是网站地址, \Widget\Contents\Page\Rows::alloc()
是获取所有页面,然后下面的 while 循环是循环输出独立页面的,其中<?php $pages->permalink(); ?>
是独立页面的超链接,<?php $pages->title(); ?>
是独立页面的标题。
<nav id="nav-menu" class="clearfix" role="navigation">
<a<?php if ($this->is('index')): ?> class="current"<?php endif; ?>
href="<?php $this->options->siteUrl(); ?>"><?php _e('首页'); ?></a>
<?php \Widget\Contents\Page\Rows::alloc()->to($pages); ?>
<?php while ($pages->next()): ?>
<a<?php if ($this->is('page', $pages->slug)): ?> class="current"<?php endif; ?>
href="<?php $pages->permalink(); ?>"
title="<?php $pages->title(); ?>"><?php $pages->title(); ?></a>
<?php endwhile; ?>
</nav>
登录与注册
前台登录
<form action="<?php $this->options->loginAction()?>" method="post" name="login" rold="form">
<input type="hidden" name="referer" value="<?php $this->options->siteUrl(); ?>">
<input type="text" name="name" autocomplete="username" placeholder="请输入用户名" required/>
<input type="password" name="password" autocomplete="current-password" placeholder="请输入密码" required/>
<button type="submit">登录</button>
</form>
注销与常用登陆后功能
<div id="primary-user-logo"><img src="<?= AUG_IMAGE_URI . '/' . $this->options->Auguserlogo ?>" alt="primary-user-logo">
</div>
<ul id="primary-user-list">
<?php if ($this->user->group == 'administrator' || $this->user->group == 'editor' || $this->user->group == 'contributor'):?>
<li class="primary-user-item"><a rel="noopener noreferrer nofollow" href="<?php $this->options->adminUrl("manage-posts.php"); ?>">管理文章</a></li>
<?php endif; ?>
<?php if ($this->user->group == 'administrator' || $this->user->group == 'editor') :?>
<li class="primary-user-item"><a rel="noopener noreferrer nofollow" href="<?php $this->options->adminUrl("manage-comments.php"); ?>">管理评论</a></li>
<?php endif; ?>
<?php if ($this->user->group == 'administrator') : ?>
<li class="primary-user-item"><a rel="noopener noreferrer nofollow" href="<?php $this->options->adminUrl("options-theme.php"); ?>">修改外观</a></li>
<?php endif; ?>
<li class="primary-user-item"><a rel="noopener noreferrer nofollow" href="<?php $this->options->adminUrl();?>">进入后台</a></li>
<li class="primary-user-item"><a href="<?php $this->options->logoutUrl();?>">退出登录</a></li>
</ul>
</div>
前台注册
<form action="<?php $this->options->registerAction();?>" method="post" name="register" role="form">
<input type="hidden" name="_" value="<?php echo $this->security->getToken($this->request->getRequestUrl());?>">
用户名<input type="text" name="name">
邮箱:<input type="email" id="mail" name="mail" >
<button type="submit" name="loginsubmit" value="true">注册</button>
</form>