二、H-ui.admin 模板引入与继承




一、H-ui.admin简介

官网首页 是这么描述的
H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版采用源生html语言,完全免费,简单灵活,兼容性好让您快速搭建中小型网站后台。

在这里插入图片描述



二、模板导入与资源文件替换

1. 模板导入

在这里插入图片描述

在这里插入图片描述



2. 修改 index.php

在这里插入图片描述

在这里插入图片描述


3. 资源文件替换

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


4. 访问localhost:8088/www.edu.com

在这里插入图片描述

此时访问www.edu.com已经可以看到模板了


三、模板分离

1. 对index.php进行修改

创建 Base.php 注意修改的时候命名空间的修改
在这里插入图片描述
在这里插入图片描述


2. 开始模板分离(分割 index.html)

对 meta 分离
在这里插入图片描述

在这里插入图片描述

对 header 分离
在这里插入图片描述

对 menu 分离
在这里插入图片描述

对 footer 分离
在这里插入图片描述

刷新页面并未报出任何错误


四、模板继承与区块设计

1. 创建父类 html 文件 base.html

从index.html将全部内容复制过来,用{block name=""}{/block}替代原来的代码
在这里插入图片描述

index.html 继承 base.html

{extend name="base" /}

用 block 将内容括起来

{block name=""}{/block}

在这里插入图片描述

其实也是网站中对页面中重复出现的内容的处理办法
刷新后页面仍然正常显示


2. 模板内容的引入

例如:

{block name=""}
	{__block__}
{/block}

这样就可以引入父模板中的内容了。



3. 引入CSS和HTML

{load href="JS或CSS文件名称" /}

下面分别修改 footer.html 中的 JS 引入 和 meta.html 中的 CSS 引入;且查看网页源代码正常导入。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述





在这里插入图片描述

知乎:叁贰壹

简书:带只拖鞋去流浪

关注我,带你一起写bug

warning :未经授权,不得转载

有问题的小伙伴请在下方留言,喜欢就点个赞吧

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章