序言
Bty5支持首页+用户中心模板（Bty5.0.0-beta.2.3+20200531）、vhost模板多模板设置，让自己也能做模板
大家可以尝试先对接首页+用户中心模板（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后台插件管理中找到离线安装
- 选择插件包即可
- 常规管理中选择启用模版
