最后编辑时间2020年6月2日

序言

Bty5支持首页+用户中心模板（Bty5.0.0-beta.2.3+20200531）、vhost模板多模板设置，让自己也能做模板
大家可以尝试先对接首页+用户中心模板
由于vhost模板文件设计复杂，及功能居多，有能力的可以尝试对接
模版文件名大小写区分，除公共文件夹以外的所有文件名都必须一致

首页+用户中心

文件目录树解析

模版文件目录树

Hustbe             主题模版名及文件夹名
    ├─common                        模版公共文件夹
    │      banner.html              公共banner
    │      base.html                默认公共模版
    │      captcha.html             注册验证模版
    │      captcha_code.html        发信码模版
    │      captcha_login.html       登录验证模版
    │      default.html             登录、注册页公共模版
    │      error.html               错误页面
    │      foot.html                文件底部
    │      head.html                文件顶部
    │      nav.html                 顶部导航
    │      script.html              引用js
    │      user_menu.html           用户中心菜单
    │
    ├─index                 主页模块
    │      article.html             文章列表
    │      article_info.html        文章内容页
    │      index.html               网站首页
    │
    ├─third
    │      prepare.html             第三方互联绑定、注册页
    │
    ├─user                  用户中心模块
    │      autonym.html             实名认证
    │      changepwd.html           修改密码
    │      console.html             主机控制台
    │      console_info.html        主机详情页
    │      customize_info.html      自定义产品详情
    │      invite.html              邀请插件页面
    │      login.html               登录页
    │      moneylog.html            余额日志
    │      msg.html                 站内信列表
    │      msg_info.html            站内信详情
    │      order.html               订单列表
    │      pay.html                 支付页
    │      profile.html             个人资料
    │      register.html            注册页
    │      support.html             工单及列表
    │      support_reply.html       工单详情及回复
    │      user.html                用户中心
    │
    └─ware                  商城模块
            panel.html              主机商城
            renew.html              主机续费

模版文件存放路径
public\static\index\Hustbe
模版静态文件存放路径（存放模版静态文件，如js，css，字体，图片资源等）
public\static\index\Hustbe

公共资源

核心js

集成js文件树（该js不需要单独应用和修改及打包，里面有一些写好的方法可以调用，调用时请注意class/id名）
路径 public\assets\js\frontend
├─frontend
│    console.js                      控制台js
│    index.js                        首页js
│    messages.js                     站内信js
│    order.js                        订单js
│    pay.js                          支付js
│    shop.js                         商城js
│    support.js                      工单js
│    user.js                         用户中心js

必须引入核心js才能触发集成js的调用
<script src="__CDN__/assets/js/require{$Think.config.app_debug?'':'.min'}.js" data-main="__CDN__/assets/js/require-frontend{$Think.config.app_debug?'':'.min'}.js?v={$site.version|htmlentities}"></script>

公共js

jQuery v3.4.1
<script src="__STATIC__/lib/js/jquery.min.js?v={$site.version}"></script>
更多请参考public下的文件

核心css（由核心js进行引入，如需单独使用，请手动引入）

<!-- 基准css -->
<link rel="stylesheet" href="/assets/css/fastadmin.css">
<!-- fa图标 -->
<link rel="stylesheet" href="/assets/libs/font-awesome/css/font-awesome.min.css">
<!-- 弹出提醒 -->
<link rel="stylesheet" href="/assets/libs/toastr/toastr.min.css">
<!-- layer弹窗 -->
<link rel="stylesheet" href="/assets/libs/fastadmin-layer/dist/theme/default/layer.css">
<!-- 表单效验 -->
<link rel="stylesheet" href="/assets/libs/nice-validator/dist/jquery.validator.css">

模版制作参考资料

Thinkphp5.0完全开发手册
 Fastadmin开发者文档

公共配置

{$site.name}			站点名
{$site.domain}			域名（不带http://）
{$site.keywords}		关键词
{$site.description}		网站描述
{$site.beian}			备案号
{$site.tongji}			统计代码
{$site.qq}				站长QQ
{$site.email}			站长邮箱
{$site.logo}			网站logo
{$site.ico}				favicon图标
{$site.tel}				联系电话
{$site.notice_title}	        网站公告标题
{$site.notice_site}		网站公告内容
等等，网站后台系统配置中的部分变量名都是可以直接在模版中进行调用

上面说的是模版中php可调用的公共配置，下面说说js中的配置参数

{
    "site": {
        "name": "分销系统",
        "timezone": "Asia/Shanghai",
        "autonym_info": "网站实名认证是为了保障平台正常运行",
        "languages": {
            "backend": "zh-cn",
            "frontend": "zh-cn"
        },
        "cdnurl": "",
        "version": 1591103073,
        "notice_title": "这是网站公告1",
        "notice_site": "这是网站公告<br/>这是换行\n<p>这是p标签1</p>",
        "notice_status": "1",
        "login_captcha": "text",
        "vaptcha_vid": "5ea144559b2032272aa6d520"
    }
}
使用config读取即可

模版制作方法及教程（下面以andhost 为例）

1、创建（可以考虑使用fastadmin一键生成插件命令，在此基础上进行开发）一个模版名的文件夹到 application\index\view 下，如application\index\view\andhost
2、在andhost目录中创建五个文件夹common index third user ware （如果你只做首页模版的话去掉third、user）
3、common文件夹中创建模版文件base.html这个主要放置整个模版布局的html
4、然后在index目录中创建文件 index.html 这个就是首页
5、篇幅过长，省略…………………………………………………………

模版代码解析

base.html文件解析

<!-- 标题 -->
<title>{block name="title"}{$site.title}{/block}{if $Request.controller != 'Index' } - {/if}{$site.name}</title>

<!-- 引入网站配置 -->
<script type="text/javascript">
    var require = {
        config: {$config|json_encode}
    };
</script>

<!-- 主体内容 -->
{block name="main" }{/block}

甚至你可以使用更多模版引擎，只需要在common文件夹中创建好文件，如head，nav，foot，script等等
<!-- 调用顶部 -->
{include file="andhost/common/head" }
<!-- 调用导航 -->
{include file="andhost/common/nav" /}
<!-- 引入底部 -->
{include file="andhost/common/foot" /}
<!-- 引入js -->
{include file="andhost/common/script" /}

index.html文件解析

{extend name="andhost/common/base" /}                   这个是引入andhost模版中common文件夹下的base公共模版文件，请先创建该文件，并做好模版布局准备
{block name="title"}这是标题{/block}                     这是页面标题
{block name="main"}                                     这是页面主体内容
这里是主体内容
{volist name="vhostList" id="vhost"}
<!-- 商品是否促销 -->
{if $vhost.is_promotion}
<h6 class="popular-price-tag text-warning">促销</h6>
{/if}
<!-- 商品是否热销 -->
{if $vhost.is_hot}
<h6 class="popular-price-tag">热卖</h6>
{/if}
<!-- 商品名 -->
{$vhost.name}
<!-- 商品价格 -->
{$vhost.new_money}
<!-- 商品价格单位 -->
{:__($vhost.unit_money)}
<!-- 商品描述 -->
{$vhost.describe}
<!-- 商品链接 -->
{:url('index/shop/panel',['wid'=>$vhost.wid])}
{volist}

{volist name="articleList" id="article" offset="0"}
<!-- 文章链接 -->
{:url('index/article/articleInfo',['id'=>$article.id])}
<!-- 文章创建时间 -->
{$article.createtime}
<!-- 文章标题 -->
{$article.title}
{/volist}
{/block}

nav.html文件解析

<!-- 链接管理中顶部连接 -->
{notempty name="linkList.head"}
{volist name="linkList.head" id="head"}
<!-- 链接地址 -->
{$head.url}
<!-- 链接打开方式，请配合target使用 -->
{$head.target}
<!-- 链接名称 -->
{$head.name}
{/volist}
{/notempty}

<!-- 判断用户是否登录并显示注册、登录或用户信息按钮 -->
{if $user}
<!-- 用户中心链接 -->
{:url('index/user/index')}
<!-- 已登录的用户名 -->
{$user.nickname|default="无名氏"}
<!-- 退出登录链接 -->
{:url('index/user/logout')}

{else/}
<!-- 用户登录链接 -->
{:url('index/user/login')}
<!-- 用户注册链接 -->
{:url('index/user/register')}
{/if}

user_menu.html文件解析

<!-- 用户菜单钩子，用于插件预置 -->
{:hook('user_sidenav_before')}
<!-- 用户中心首页及链接 -->
{if condition=" ($Request.controller=='User' ) AND ($Request.action=='index') "}active{/if}
{:url('index/User/index')}
<!-- 订单列表及链接 -->
{switch name=" $Request.controller"}{case value="Order" }active{/case}{/switch}
{:url('index/Order/index')}
<!-- 控制台列表及链接 -->
{switch name=" $Request.controller"}{case value="Console" }active{/case}{/switch}
{:url('index/Console/index')}
<!-- 充值中心及链接 -->
{switch name=" $Request.controller"}{case value="Pay" }active{/case}{/switch}
{:url('index/Pay/index')}
<!-- 用户资料及链接 -->
{switch name=" $Request.action"}{case value="profile" }active{/case}{/switch}
{:url('index/User/profile')}
<!-- 站内信及链接 -->
{switch name=" $Request.controller"}{case value="Messages" }active{/case}{/switch}
{:url('index/Messages/index')}
<!-- 工单及链接 -->
{switch name=" $Request.controller"}{case value="Support" }active{/case}{/switch}
{:url('index/Support/index')}
<!-- 修改密码集链接 -->
{switch name=" $Request.action"}{case value="changepwd" }active{/case}{/switch}
{:url('index/User/changepwd')}
<!-- 用户菜单钩子，用于插件预置 -->
{:hook('user_sidenav_after')}

article.html文件解析

{extend name="andhost/common/base" /}
{block name="title"}{notempty name="articlesort.name"}{$articlesort.name}{else/}服务支持{/notempty}{/block}
<!-- 文章页面主体 -->
{block name="main"}
<!-- 文章列表 -->
{volist name="articleList" id="article"}
<!-- 文章链接 -->
{:url('index/article/articleinfo',['id'=>$article.id])}
<!-- 文章创建时间 -->
{$article.createtime}
<!-- 文章标题 -->
{$article.title}
<!-- 文章内容预览，100位数截断 -->
{:subtext(strip_tags($article.content),100)}
{/volist}
<!-- 翻页按钮 -->
{$articleList->render()}
{/block}

等等文件，篇幅过长，请参考模版中使用的数据代码

模版打包

请参考 andhost 模版插件的文件目录进行打包，打包后请使用测试站进行安装测试，请勿在生产环境（模版编写环境）进行安装，否则将会覆盖原有文件

├─application\index\view             模版主题文件目录
	├─andhost							模版文件夹（将同目录文件全部拷贝过来即可）
├─public\static             		模版静态文件目录
	├─andhost							模版静态资源文件夹（将同目录文件全部拷贝过来即可）
├─assets							模版封面图
	│ 	preview_index.png				模版首页封面图
	│ 	preview_user.png				模版用户中心封面图
config.php							配置文件
Andhost.php							插件控制器
info.ini							插件信息
install.sql							插件安装sql语句

Andhost.php插件控制器文件请按照php规范进行编写，如不懂php语法，请将该文件名以第一个字母大写进行命名，里面的内容请请按照如下修改

namespace addons\andhost;
andhost修改成功你模版名

class Andhost extends Addons
Andhost请修改成该文件名

其余内容保持不动

info.ini请按照如下说明进行修改

name = andhost          修改成插件名（模版名）
title = andhost         模版标题
intro = 这是一款基于andhost。       模版描述
author = Youngxj        模版作者
website = https://www.btai.cc       作者链接
version = 1.0.0         模版版本号
state = 1               默认为1

install.sql请按照如下说明进行修改

-- 其中andhost为模版名
-- 这一条说明这个模版支持首页模版
INSERT INTO `__PREFIX__theme` VALUES (null,'andhost', 'index', '0');
-- 这一条说明模版支持用户中心
INSERT INTO `__PREFIX__theme` VALUES (null,'andhost', 'user', '0');
-- 按需选取sql域名，模版插件请勿放置其他sql语句

上述文件复制好之后压缩成功zip即可测试离线安装

模版安装

Bty5后台插件管理中找到离线安装
选择插件包即可
常规管理中选择启用模版