typecho主题的页眉header部分常用代码

网站页眉(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>

标签: typecho

移动端可扫我直达哦~

推荐阅读

thumbnail 2025-06-08

聊聊html里的head部分

HTML文档的<head>部分是一个容器,用于包含文档的元数据(metadata)和链接到外部资源的信息,这些内容不会直接显示在网页上,但对网页的功能和表现至关重要。主要元素和功能1. 基础元素<title>:...

建站相关 typecho

thumbnail 2025-06-04

typecho前端实现站点语言的切换

前端修改的数据能及时反馈到后端,那当然需要一个前后端都可以无障碍读取的东西,所以最初是想要用localstorage,但发现php无法直接读取其值,所以就换成了cookie。前端通过js来设置参数值:document.cookie='...

建站相关 typecho

thumbnail 2025-06-02

typecho 主题中的模板与模块的概念

模板是 typecho 主题中一个重要的概念,我们说过typecho的极简主题可以只存在 index.php 这一个文件,但需要展现分类页的时候,typecho事实上会先去寻找名为 category.php 的分类页模板,文章页当然也...

建站相关 typecho

thumbnail 2025-06-02

typecho的几种常见的文章列表调用

处理好了header与面包屑,接下来就按照自己的需求自由发挥了,先放一个分类列表,再挑出一个喜欢的标签,自定义一个该标签下内容展示模块。Typecho 提供了多种文章循环方式,以下是常用的几种方法:标准文章循环<?php whi...

建站相关 typecho

thumbnail 2025-06-02

在typecho里实现面包屑导航

什么是面包屑导航面包屑导航是一种网站导航方式,通常在网站顶部显示,大多会放在站点header的下方,用于显示用户当前位置。 面包屑导航由导航元素构成,每个元素代表一个网站导航项,各个元素通常包含对应链接,供用户跳转。面包屑导航示例首页...

建站相关 typecho

thumbnail 2025-05-29

关于typecho中的路由知识

路由(Routing)是博客系统中将URL地址映射到具体处理逻辑的机制,它决定了当用户访问某个网址时,系统应该执行什么操作、显示什么内容。typecho站点一般都会开启伪静态,伪静态通过URL重写将"漂亮"的URL映射到实际的文件路径...

建站相关 typecho

thumbnail 2025-05-29

Typecho 模板中的翻译函数 _t 与 _e

在 Typecho 模板开发中,_t 和 _e 是用于国际化处理的函数,核心区别在于输出方式:"_t" 函数‌‌功能‌:获取翻译后的字符串但不直接输出,需结合 echo 使用。‌示例‌:<?php echo _t('欢迎语');...

建站相关 typecho

thumbnail 2025-05-26

typecho文章自定义字段的删除与修改

涉及数据库的操作,务必请提前做好备份!提前做好备份!!做好备份!!!小鸟数据的当前主题的缩略图字段命名为augPostThumb,这几天在尝试完善一下原有主题,下载了原站的数据库导入了测试站用于测试页面效果,测试主题的缩略图相关字段拟...

建站相关 typecho

thumbnail 2025-05-26

typecho的文章自定义字段的知识笔记

在typecho中,除了可以自定义设置项之外,我们也可以给文章自定义一些额外的字段,比如给文章编辑界面添加一个缩略图选项,或者增加一个keywords输入框,用来修改编辑当前内容页的关键词信息。// 主题设置 function th...

建站相关 typecho

thumbnail 2025-05-23

typecho前台无法注销用户的原因

尝试制作主题的时候遇到一个奇怪的问题,自定义主题前台死活注销不掉,以为是本地服务器软件配置问题(本地服务器表示锅我不背),结果换其他主题一换一个正常。仔细检查了一下代码,发现是自己复制粘贴代码的时候在退出登录的按钮上也添加了noope...

建站相关 typecho