## 知識點
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
- 窗體操作