首页 > 模板开发 > 正文

模板制作新手教程(四)-制作导航,领会模块化

  • 更新时间:2021-01-18 22:17:06
  • 28阅读
  • 0评论

现在,我们开始制作真正的模板了,先来做导航,导航分为:一级导航多级导航。

在制作之前我们先领会一个名词“模块”。通俗的理解,就是把公共部分或重复使用的部分提出来。理解了这个,我们的模板代码体积才会更小,冗余更少。


一、优化模板文件

    上一篇我们创建了author.json和index.php两个文件,这一篇我们在加两个:header.php和footer.php,这两个文件不是模板必须的,为什么要创建它们呢?这个就是模块的概念。

    通常我们把网站分为上中下三部分(国内大多数都是),上就是导航这些,中就是列表、内容这些,下版权信息这些。

    所以我们加这两个文件,从字面上就可以理解,header就是上,也叫头部;footer就是下,也叫底部;index是首页中间部分。


二、common.php

    这里我们再认识一个新文件:common.php,它是模板辅助函数集合或者模板公共函数文件,你可以把模板中用到的辅助函数放到这里。比如,今天我们制作的导航,它就会被封装成函数放到这里。


三、写导航辅助函数

    导航可以用后台设置的导航,也有人喜欢直接用分类(我这暴脾气)。不管用啥吧,系统对这些数据有缓存,可以直接调用,方法参考《帮助文档-缓存》。

    在common.php中写入如下内容:

<?php

use rp/Cache;

/*
*导航
*/
function navs(){
	$nav=Cache::read('nav');
	foreach($nav as $k=>$v){
		if($v['status'] != 0) continue;
		$newtab = $v['newtab'] == 1 ? 'target="_blank"' : '';
		echo '<li '.(!empty($v['children']) ? 'class="menu"' : '').'><a href="'.$v['url'].'" '.$newtab.'>'.$v['navname'].'</a>';
		if(!empty($v['children'])){
			echo '<ul class="sub">';
			foreach($v['children'] as $sk=>$sv){
				if($sv['status'] != 0) continue;
				$newtab2 = $sv['newtab'] == 1 ? 'target="_blank"' : '';
				echo '<li><a href="'.$sv['url'].'" '.$newtab2.'>'.$sv['navname'].'</a></li>';
			}
			echo '</ul>';
		}
		echo'</li>';
	}
}


四、调用导航

在header.php文件中写入

<?php if (!defined('CMSPATH')){exit('error!');}?>
<!DOCTYPE html>
<html>
<head>
<title>{$title}</title>
<meta name="keywords" content="{$keywords}">
<meta name="description" content="{$description}">
<link rel="stylesheet" href="{$tempUrl}/css/style.css">
<script src="/static/js/jquery-3.2.0.min.js"></script>
</head>
<body>
<header class="header">
	<div class="container">
		<a href="/"><img src="{$tempUrl}/image/logo.png" alt="logo" class="logo"/></a>
		<ul class="navs">
			{:navs()}
		</ul>
	</div>
</header>

在index.php中引入header.php模板文件

<?php if (!defined('CMSPATH')){exit('error!');}?>
{include:header}
<div class="container">
hello word!
</div>


五、美化

css、js、图片等这些静态资源建议放到模板的文件夹中,这里就把静态资源分别建立文件夹放置了。

在style.css中写入导航的css,此处css仅供参考。

*{margin:0;padding:0;font-size:14px;box-sizing: border-box;}
ul,li{list-style:none;}
a{text-decoration:none;}
.container{width:1000px;margin:0 auto;}
.header{height: 50px;line-height: 50px;background: #19afdc;}
.logo{height: 40px;margin: 5px 0;}
.navs{float: right;}
.navs li{float: left;width: 100px;text-align: center;position: relative;}
.navs li a{color: #fff;width: 100%;height: 100%;display: block;}
.navs li .sub{position: absolute;background: rgb(25 175 220 / 90%);top: 100%;left: 0;right: 0;display: none;z-index: 9999;}
.navs li:hover .sub{display:block;}


六、保存文件,预览效果

在浏览器中打开你的网址,浏览效果吧。

微信截图_20210102191023.png


总结:合理使用common.php模板公共函数文件,合理模块化,模板制作会更好。


PS:请先在后台设置导航,要不然导航处会显示空白

0 位网友评论:

欢迎 来评论

请填写验证码
Top