thinkPHP6.0入门笔记（六）——模板继承

1.构建简易导航栏

    bootstrap提供了很多样式，但是怎么说，很多样式直接使用还是有点别扭，这里在PC端自定义一个导航栏，HTML代码如下：

<!--创建导航栏-->
  <nav class="create-nav">
    <div class="left-logo"><img src="https://img0.baidu.com/it/u=2743095369,633820497&fm=26&fmt=auto&gp=0.jpg"/></div>
    <div class="nav-item dropdown right-nav-box">
      <button href="#" class="dropdown btn btn-default text-secondary" data-toggle="dropdown">
        蜡笔小新 <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li class="text-center">
          <a href="#" class="dropdown-item">个人中心</a>
        </li>
        <li class="text-center">
          <a href="#" class="dropdown-item">退出管理</a>
        </li>
      </ul>
    </div>
  </nav>

补充相关CSS代码：

 .create-nav{
      padding:0 8%;
      width:100%;
      height:50px;
      background-color:#f1f1f1;
    }
    .create-nav .left-logo{
      float: left;
      width:50px;
    }
    .create-nav .left-logo img{
      width:100%;
      height:auto;
    }
    .create-nav .right-nav-box{
      margin-top:8px;
      float: right;
    }

得到效果如下：

2.thinPHP6.0模板继承

    其实，上述第一步是为了接下来理解thinkPHP6.0框架下的模板继承规则做铺垫。
    我们知道，很多网站在设计上往往顶部的nav部分和底部的footer部分是在多个页面中出现的，因此为了提高代码的重用率，thinkPHP推出模板继承。为了深入理解thinkPHP的模板继承，接下来以导航栏从index.html扩展到create.html和edit.html页面为例展开。
    首先，我们将之前自定义的一下CSS内卷到public/static/style.css文件中。类似于之前的toast.html的提示内容，我们在view/public目录下新建一个base.html文件。为了实现代码有效重用，接下来将index、edit、create三个页面中相同的代码进行比较，发现头部部分都是一致的。
    其实thinkPHP中有个一比较固定的模式，在base.html文件中，文件结构截图如下：

解释：base.html中存在两块表特殊的代码（既不像CSS又不像JS），其实它既可以代表CSS，又可以代表JS。这里的block可以抽象成两个代码块儿。而其中的那么就是用于区分每个代码块的，代码代码块将按照名字以同样的顺序加载到base.html中。
    对于之前的create、edit、index页面只需要按照如下模板来写：

{extend name="public/base"}
{block name="main"}具体main代码{/block}
{block name="JS"}具体JS代码{/block}

这样就很爽了，只需要将不同页面的代码做个区分，每个页面按照实际需要将对应的特殊代码导入base页面的代码块区域就行。当然，也不得不承认，这样虽然代码重用性高，但是单个页面的可读性不高，而且一旦base页面丢失，这个网站就废了。不管怎么说，这种引入代码片段的思想还是挺妙的。