## 知识点
1、准备工作
2、修改基础模板
3、分类页的继承
4、分类页模板制作
5、完善自定义标签
6、数据分页
7、首页自定义标签改进（独立）
公共部分作为一个区块，在其它页面调用该区块
[TOC]
## 一、准备工作
### 1、删除后台模型模板
位置：\template\default\temp\*.*
这个是之前后台建立模型时的模板文件（三个：分类模板、列表模板、内容模板）
### 2、新建default文件夹
位置：\application\index\view\default
移动：将原来的文件夹\application\index\view\index移动到\application\index\view\default\index
新建：base.html
拷贝：将index.html的全部代码拷贝到base.html
说明：base.html（基础模板）、index.html（继承模板）
引入：
模板中引入：index.html模板引入基础模板
~~~
{extend name="../application/index/view/default/index/base.html"}
{block name="title"}test{/block}
~~~
基础模板中的代码：
~~~
<title>{block name="title"}CMS内容管理系统{/block}</title>
~~~
控制器中引入：return view('../application/index/view/default/index/index.html');
### 3、修改build.php
~~~
// 定义index模块的自动生成
'index' => [
'__file__' => ['common.php'],
'__dir__' => ['behavior', 'controller', 'model', 'view'],
'controller' => ['Index'],
'model' => [],
'view' => [],
],
~~~
## 二、修改基础模板
### 1、头部新增CSS或JS文件
{block name="head"}{/block}
### 2、公告
{block name="notice"}{/block}
调用：
~~~
<!-- 公告 -->
{block name="notice"}
<nav class="breadcrumb">
<div class="bull"><i class="fa fa-volume-up"> </i></div>
<div id="scrolldiv">
<div class="scrolltext">
<ul>
<li class="scrolltext-title"><a href="#" rel="bookmark">公告：一！</a></li>
<li class="scrolltext-title"><a href="#" rel="bookmark">公告：二</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#scrolldiv").textSlider({line:1, speed:300, timer:5000});
});
</script>
</nav>
{/block}
~~~
### 3、主要内容
{block name="main"}{/block}
### 4、右侧
{block name="sidebar"}{/block}
### 5、分类内容
{block name="categories"}{/block}
### 6、底部
{block name="footer"}{/block}
## 三、分类页的继承
不同的模型对应不同页面
### 1、修改模型模板位置
文件：\application\admin\controller\Models.php
获取模板文件名
$handle = opendir('../template/default/temp/');
改成
$handle = opendir('../application/index/view/default/index');
### 2、新建文章、图片、下载模板文件
位置：/application/index/view/default/index
article.html、download.html、photo.html
### 3、文章分类模板制作
{extend name="../application/index/view/default/index/base.html"}
### 4、新建Common控制器
~~~
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
use app\admin\model\Menu;
class Common extends Controller {
public function _initialize() {
// 菜单
$categoryArray = Db::name('category')->order('order')->select();
$categoryList = Menu::tree($categoryArray);
$this->assign('menu',$categoryList);
}
}
~~~
~~~
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
use app\admin\model\Menu;
class Index extends Common {
public function category(){
return view('../application/index/view/default/index/article.html');
}
}
~~~
### 5、模板添加分类链接ID
~~~
<li><a href="{:url('category',['id'=>$voson.id])}"> {$voson.catname}</a></li>
~~~
## 四、分类页模板制作
知识点：模板继承和自定义标签
### 1、基础模板
~~~
<ul class="down-menu nav-menu">
<li class="current-menu-item"><a rel="nofollow" href="/"><i class="fa fa-home"></i> 首页</a></li>
{volist name="menu" id="vo"}
<li>
<a href="#"> {$vo.catname}</a>
<ul class="sub-menu">
{volist name="vo.son" id="voson"}
<li><a href="{:url('category',['id'=>$voson.id])}"> {$voson.catname}</a></li>
{/volist}
</ul>
</li>
{/volist}
</ul>
~~~
### 2、继承模板
~~~
{extend name="../application/index/view/default/index/base.html"}
{block name="main"}
{Article:list catid="$id" num="2" /}
{/block}
{block name="sidebar"}
{Article:recommend catid="$id" num="6" /}
{Article:hot catid="$id" num="10" /}
{/block}
~~~
### 3、控制器
~~~
public function category(){
$id = input('id');
$this->assign('id',$id);
return view('../application/index/view/default/index/article.html');
}
~~~
### 4、公共函数
~~~
public function _initialize() {
// 菜单
$categoryArray = Db::name('category')->order('order')->select();
$categoryList = Menu::tree($categoryArray);
$this->assign('menu',$categoryList);
}
~~~
## 五、完善自定义标签
### （一）自定义标签传参格式
备注：自定义标签中不能解析TP标签，只能支持变量
模板传参
~~~
<a href="{:url('category',['id'=>$voson.id])}"> {$voson.catname}</a>
~~~
控制器介绍参数，并赋值给模板
~~~
public function category(){
$id = input('id');
$this->assign('id',$id);
return view('../application/index/view/default/index/article.html');
}
~~~
模板中接受传参
~~~
{block name="main"}
{Article:list catid="$id" num="2" /}
{/block}
{block name="sidebar"}
{Article:recommend catid="$id" num="6" /}
{Article:hot catid="$id" num="10" /}
{/block}
~~~
### （二）根据分类ID获取相应内容
详细见《自定义标签传参格式》
### （三）调用相关数量num内容
#### 1、标签定义
~~~
protected $tags = [
'hot' => ['attr' => 'catid,num', 'close' => 0], //0闭合标签 ，1不闭合（默认）
'recommend' => ['attr' => 'catid,num', 'close' => 0],
'list' => ['attr' => 'catid,num', 'close' => 0],
];
~~~
#### 2、标签申明
热门文章
~~~
public function tagHot($tag) {
if(empty($tag['catid']) || $tag['catid']=='0'){
$where = '';
}else{
$where = "catid=" . $tag['catid'];
}
if(empty($tag['num']) || $tag['num']=='0'){
$num = 8;
}else{
$num = $tag['num'];
}
$php = <<<php
<?php
\$article_hot = think\Db::name('article')->where("$where")->field('id,title')->limit('$num')->order('views desc')->select();
\$__LIST__ = \$article_hot;
?>
php;
$parse ='<aside class="widget widget_hot_post">';
$parse .='<h3 class="widget-title"><i class="fa-bars fa"></i>热门文章</h3>';
$parse .='<div id="hot_post_widget">';
$parse .='<ul>';
$parse .=$php;
$parse .='{volist name="__LIST__" id="vo"}';
$parse .='<li><span class="li-icon li-icon-{$key+1}">{$key+1}</span><a href="#">{$vo.title}</a></li>';
$parse .='{/volist}';
$parse .='</ul>';
$parse .='</div>';
$parse .='</aside>';
return $parse;
}
~~~
本站推荐
~~~
public function tagRecommend($tag) {
if(empty($tag['catid']) || $tag['catid']=='0'){
$where = 'recommend=1';
}else{
$where = "recommend=1 and catid=" . $tag['catid'];
}
if(empty($tag['num']) || $tag['num']=='0'){
$num = 3;
}else{
$num = $tag['num'];
}
$php = <<<php
<?php
\$article_recommend = think\Db::name('article')->where("$where")->field('id,title,thumb,views')->limit('$num')->order('listorder desc')->select();
\$__LIST__ = \$article_recommend;
?>
php;
$parse = '<aside class="widget widget_hot_commend">';
$parse .= '<h3 class="widget-title"><i class="fa-bars fa"></i>本站推荐</h3>';
$parse .= '<div id="hot" class="hot_commend">';
$parse .= '<ul>';
$parse .= $php;
$parse .= '{volist name="__LIST__" id="vo"}';
$parse .= '<li>';
$parse .= '<figure class="thumbnail"><a href="#"><img src="__UPLOADS__/{$vo.thumb}" alt="{$vo.title}"></a></figure>';
$parse .= '<div class="hot-title"><a href="#">{$vo.title}</a></div>';
$parse .= '<div class="views">阅读 {$vo.views}</div>';
$parse .= '<i class="fa-thumbs-o-up fa"> 0</i>';
$parse .= '</li>';
$parse .= '{/volist}';
$parse .= '</ul>';
$parse .= '<div class="clear"></div>';
$parse .= '</div>';
$parse .= '</aside>';
return $parse;
}
~~~
#### 3、标签调用
~~~
{Article:recommend catid="$id" num="6" /}
{Article:hot catid="$id" num="10" /}
{Article:list catid="$id" num="2" /}
~~~
## 六、数据分页
### （一）原始数据
#### 1、控制器
// 最新文章
~~~
$article = Db::name('article')->field('id,catid,title,thumb,description,inputtime,views')->limit(2)->order('listorder desc')->select();
$this->assign('article',$article);
~~~
#### 2、前端模板
~~~
{volist name="article" id="vo"}
<article class="post type-post status-publish format-standard hentry">
<figure class="thumbnail">
<a href="#"> <img src="__UPLOADS__/{$vo.thumb}" alt="{$vo.title}"></a>
<span class="cat"> <a href="#">{$vo.catid|getCatInfoById=catname}</a></span>
</figure>
<header class="entry-header">
<h2 class="entry-title"><a href="#" rel="bookmark">{$vo.title}</a></h2>
</header>
<div class="entry-content">
<div class="archive-content">{$vo.description}</div>
<br/>
<span class="title-l"></span>
<span class="entry-meta">
<span class="date">{$vo.inputtime} </span>
<span class="views"> 阅读 {$vo.views} </span>
<span class="comment"><a href="#"> <i class="fa fa-comment-o"></i> 查看评论</a></span>
</span>
<div class="clear"></div>
</div>
<span class="entry-more"> <a href="#" rel="bookmark">阅读全文</a></span>
</article>
{/volist}
~~~
### （二）实现分页效果
#### 1、控制器
~~~
public function category(){
$id = input('id');
$this->assign('id',$id);
$article = Db::name('article')->field('id,catid,title,thumb,description,inputtime,views')->order('listorder desc')->paginate();
$page = $article->render();
$this->assign('article',$article);
$this->assign('page',$page);
return view('../application/index/view/default/index/article.html');
}
~~~
#### 2、模板
{$page}
### （三）分页组件（layui）
只需要一个layui.css文件
#### 1、CSS位置
\public\static\index\default\css\layui.css
#### 2、引入文件
打开继承模板文件，引入代码
~~~
{block name="head"}
<link rel="stylesheet" type="text/css" href="__INDEX__/default/css/layui.css" />
{/block}
~~~
#### 3、引入layui.php
位置：\thinkphp\library\think\paginator\driver\Layui.php
#### 4、定义配置项
~~~
<?php
//配置文件
return [
'paginate' => [
'type' => 'layui',
'var_page' => 'page',
'list_rows' => '5',
'newstyle' => true,
],
];
~~~
#### 5、模板
~~~
<div class="layui-box layui-laypage layui-laypage-molv" style="float:right;">
{$page}
</div>
~~~
完整代码
~~~
{volist name="article" id="vo"}
<article class="post type-post status-publish format-standard hentry">
<figure class="thumbnail">
<a href="#"> <img src="__UPLOADS__/image/{$vo.thumb}" alt="{$vo.title}"></a>
<span class="cat"> <a href="#">{$vo.catid|getCatInfoById=catname}</a></span>
</figure>
<header class="entry-header">
<h2 class="entry-title"><a href="#" rel="bookmark">{$vo.title}</a></h2>
</header>
<div class="entry-content">
<div class="archive-content">{$vo.description}</div>
<br/>
<span class="title-l"></span>
<span class="entry-meta">
<span class="date">{$vo.inputtime} </span>
<span class="views"> 阅读 {$vo.views} </span>
<span class="comment"><a href="#"> <i class="fa fa-comment-o"></i> 查看评论</a></span>
</span>
<div class="clear"></div>
</div>
<span class="entry-more"> <a href="#" rel="bookmark">阅读全文</a></span>
</article>
{/volist}
<div class="layui-box layui-laypage layui-laypage-molv" style="float:right;">
{$page}
</div>
~~~
#### 6、修改layui.php
新增代码：style="background-color:#00aeff;"
~~~
/**
* 生成一个激活的按钮
*
* @param string $text
* @return string
*/
protected function getActivePageWrapper($text)
{
return '<span class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#00aeff;"></em><em>' . $text . '</em></span>';
}
~~~
### （三）自定义标签分页
思路：num=0，catid>0，可以分页，首页不分页
#### 1、修改自定义标签文件
~~~
public function tagList($tag) {
//首页cid=0,num>0 ; 分类页cid>0,num=0
if(empty($tag['catid']) || $tag['catid']=='0'){
$num = $tag['num'];
$php = <<<php
<?php
\$article_list = think\Db::name('article')->field('id,catid,title,thumb,description,inputtime,views')->limit("$num")->order('listorder desc')->select();
\$__LIST__ = \$article_list;
?>
php;
}else{
$num = 0;
$where = "catid=" . $tag['catid'];
$php = <<<php
<?php
\$article_list = think\Db::name('article')->where("$where")->field('id,catid,title,thumb,description,inputtime,views')->limit("$num")->order('listorder desc')->paginate();
\$__LIST__ = \$article_list;
?>
php;
}
$parse = $php;
$parse .= '{volist name="__LIST__" id="vo"}';
$parse .= '<article class="post type-post status-publish format-standard hentry">';
$parse .= ' <figure class="thumbnail">';
$parse .= ' <a href="#"> <img src="__UPLOADS__/{$vo.thumb}" alt="{$vo.title}"></a>';
$parse .= ' <span class="cat"> <a href="#">{$vo.catid|getCatInfoById=catname}</a></span>';
$parse .= ' </figure>';
$parse .= ' <header class="entry-header">';
$parse .= ' <h2 class="entry-title"><a href="#" rel="bookmark">{$vo.title}</a></h2>';
$parse .= ' </header>';
$parse .= ' <div class="entry-content">';
$parse .= ' <div class="archive-content">{$vo.description}</div>';
$parse .= ' <br/>';
$parse .= ' <span class="title-l"></span>';
$parse .= ' <span class="entry-meta">';
$parse .= ' <span class="date">{$vo.inputtime} </span>';
$parse .= ' <span class="views"> 阅读 {$vo.views} </span>';
$parse .= ' <span class="comment"><a href="#"> <i class="fa fa-comment-o"></i> 查看评论</a></span>';
$parse .= ' </span>';
$parse .= ' <div class="clear"></div>';
$parse .= ' </div>';
$parse .= ' <span class="entry-more"> <a href="#" rel="bookmark">阅读全文</a></span>';
$parse .= '</article>';
$parse .= '{/volist}';
if($num==0){
$parse .= '<div class="layui-box layui-laypage layui-laypage-molv" style="float:right;">';
$parse .= '{$__LIST__->render()}';
$parse .= '</div>';
}
return $parse;
}
~~~
## 七、首页自定义标签改进
思路：重新布局模板，不同模板可以随意切换，自定义标签也需要更换。
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作