1 模板目录结构
了解模板文件结构是开发自定义模板的第一步。
模板文件说明
玉兔CMS模板包含以下核心文件：
| 文件名 | 说明 |
|---|---|
| header.html | 公共头部模板文件 |
| footer.html | 公共尾部模板文件 |
| index.html | 首页模板文件 |
| video_list.html | 视频列表模板文件 |
| video_detail.html | 视频详情模板文件 |
| video_conter.html | 视频内容模板文件 |
| video_search.html | 视频搜索模板文件 |
注意：模板文件必须放置在正确的模板目录中，系统才能正确识别和使用。
2 模板公共标签
公共标签在所有模板文件中均可使用，用于引入公共部分和输出网站基本信息。
公共标签列表
| 标签代码 | 标签说明 |
|---|---|
| {ytcms-include:Header} | 引入公共头部文件 |
| {ytcms-include:Footer} | 引入公共尾部文件 |
| {ytcms:$StylePath} | 模板目录路径，用于引入样式文件 |
| {ytcms:$WebTitle} | 输出网站标题 |
| {ytcms:$WebKeywords} | 输出网站关键词 |
| {ytcms:$WebDescription} | 输出网站介绍 |
| {ytcms:$WebLogo} | 输出网站LOGO图片链接 |
| {ytcms:$WebEmail} | 输出联系邮箱账号 |
| {ytcms:$WEBUrl} | 输出网站域名带http协议 |
| {ytcms:$WebAdS} | 输出广告与统计等JS，一般放置于footer.html结尾 |
使用示例：
<!DOCTYPE html>
<html>
<head>
<title>{ytcms:$WebTitle}</title>
<meta name="keywords" content="{ytcms:$WebKeywords}">
<meta name="description" content="{ytcms:$WebDescription}">
<link rel="stylesheet" href="{ytcms:$StylePath}/css/style.css">
</head>
<body>
{ytcms-include:Header}
<!-- 页面内容 -->
{ytcms-include:Footer}
</body>
</html>
3 公共头部标签
公共头部标签用于构建网站导航菜单、搜索功能和顶部广告。
分类菜单循环标签
| 标签代码 | 标签说明 |
|---|---|
| 开头:{ytcms:Type=1,2,3} | Type=1,2,3为分类ID，","分割，末尾不需要 |
| 分类链接: {ytcms:Url} | 内循环分类链接 |
| 分类标题: {ytcms:Name} | 内循环分类标题 |
| 结尾:{/ytcms:Type} | 标签结尾 |
使用示例：
<nav>
<ul>
{ytcms:Type=1,2,3}
<li><a href="{ytcms:Url}">{ytcms:Name}</a></li>
{/ytcms:Type}
</ul>
</nav>
搜索表单
搜索表单使用GET方式提交，搜索内容input的name为"search"：
<form>
<input type="text" name="search" placeholder="搜索视频...">
<button type="submit">搜索</button>
</form>
TOP横幅广告循环标签
| 标签代码 | 标签说明 |
|---|---|
| 开头:{9CCMS-TAd} | 广告循环开始 |
| 广告链接:{ytcms-TAd:Url} | 广告链接地址 |
| 广告图片:{ytcms-TAd:Pic} | 广告图片链接 |
| 广告图片宽度:{ytcms-TAd:Width} | 广告图片宽度 |
| 广告图片高度:{ytcms-TAd:Height} | 广告图片高度 |
| 结尾:{/ytcms-TAd} | 广告循环结束 |
使用示例：
{9CCMS-TAd}
<a href="{ytcms-TAd:Url}" target="_blank">
<img src="{ytcms-TAd:Pic}" width="{ytcms-TAd:Width}" height="{ytcms-TAd:Height}" alt="广告">
</a>
{/ytcms-TAd}
4 公共尾部标签
公共尾部标签用于构建网站底部信息、友情链接和统计代码。
单标签(广告邮箱)
| 标签代码 | 标签说明 |
|---|---|
| 广告邮箱:{ytcms:$WebEmail} | 输出网站联系邮箱 |
使用示例：
<div class="contact">
广告合作邮箱：{ytcms:$WebEmail}
</div>
友情链接循环标签
| 标签代码 | 标签说明 |
|---|---|
| 开头:{ytcms-IeUrl} | 友情链接循环开始 |
| 友情链接Url:{ytcms-IeUrl:Url} | 友情链接地址 |
| 友情链接标题:{ytcms-IeUrl:Name} | 友情链接标题 |
| 结尾:{/ytcms-IeUrl} | 友情链接循环结束 |
使用示例：
<div class="friend-links">
<h3>友情链接</h3>
<ul>
{ytcms-IeUrl}
<li><a href="{ytcms-IeUrl:Url}" target="_blank">{ytcms-IeUrl:Name}</a></li>
{/ytcms-IeUrl}
</ul>
</div>
单标签(流量统计JS)
| 标签代码 | 标签说明 |
|---|---|
| {ytcms:$WebAdS} | 广告/流量/JS中枢标签，尾部必要参数 |
使用示例：
<!-- 网站统计代码 -->
{ytcms:$WebAdS}
</body>
</html>
5 首页模板标签
首页模板标签用于构建网站首页内容，包括推荐视频分类和推荐视频列表。
单标签(推荐视频分类名称)
| 标签代码 | 标签说明 |
|---|---|
| {ytcms-Index-Type:1} | 1为视频推荐分类，需配合下方视频推荐标签使用 |
推荐视频列表循环标签
| 标签代码 | 标签说明 |
|---|---|
| 开始：{ytcms-Index:Type=1,Count=6} | Type=1为视频分类，Count=6为视频数量 |
| 详情链接：{ytcms-Index:DUrl} | 视频详情链接 |
| 图片链接：{ytcms-Index:Pic} | 视频图片链接 |
| 视频名称：{ytcms-Index:Name} | 视频名称 |
| 视频随机数：{ytcms-Index:Rand} | 视频随机数 |
| 结束：{/ytcms-Index} | 循环结束 |
使用示例：
<div class="recommend-videos">
<h2>{ytcms-Index-Type:1}</h2>
<div class="video-list">
{ytcms-Index:Type=1,Count=6}
<div class="video-item">
<a href="{ytcms-Index:DUrl}">
<img src="{ytcms-Index:Pic}" alt="{ytcms-Index:Name}">
<h3>{ytcms-Index:Name}</h3>
</a>
</div>
{/ytcms-Index}
</div>
</div>
6 列表模板标签
列表模板标签用于构建视频列表页面和搜索列表页面。
1. 视频列表模板
单标签(视频列表分类名称)
| 标签代码 | 标签说明 |
|---|---|
| {ytcms-Video-List:Title} | 视频列表分类名称 |
循环标签(视频列表)
| 标签代码 | 标签说明 |
|---|---|
| 开始:{ytcms-Video-List:Count=9} | Count=9为显示数量 |
| 详情:{ytcms-Video-List:DUrl} | 视频详情页面链接 |
| 图片:{ytcms-Video-List:Pic} | 视频封面图片链接 |
| 标题:{ytcms-Video-List:Name} | 视频标题或名称 |
| 随机数:{ytcms-Video-List:Rand} | 视频列表随机数字 |
| 结束:{/ytcms-Video-List} | 循环结束 |
循环标签(视频列表分页按钮)
| 标签代码 | 标签说明 |
|---|---|
| {ytcms-Video-List:PageUrl} | 视频列表首页链接 |
| {ytcms-Video-List:prevUrl} | 视频列表上一页链接 |
| {ytcms-Video-List:nextUrl} | 视频列表下一页链接 |
| {ytcms-Video-List:totalUrl} | 视频列表尾页链接 |
使用示例：
<div class="video-list-page">
<h1>{ytcms-Video-List:Title}</h1>
<div class="video-list">
{ytcms-Video-List:Count=9}
<div class="video-item">
<a href="{ytcms-Video-List:DUrl}">
<img src="{ytcms-Video-List:Pic}" alt="{ytcms-Video-List:Name}">
<h3>{ytcms-Video-List:Name}</h3>
</a>
</div>
{/ytcms-Video-List}
</div>
<div class="pagination">
<a href="{ytcms-Video-List:PageUrl}">首页</a>
<a href="{ytcms-Video-List:prevUrl}">上一页</a>
<a href="{ytcms-Video-List:nextUrl}">下一页</a>
<a href="{ytcms-Video-List:totalUrl}">尾页</a>
</div>
</div>
2. 搜索列表模板(只有视频搜索)
单标签(搜索列表名称)
| 标签代码 | 标签说明 |
|---|---|
| {ytcms-Search-List:Title} | 搜索列表名称~搜索的内容 |
循环标签(搜索列表)
| 标签代码 | 标签说明 |
|---|---|
| 开始:{ytcms-Search-List:Count=9} | Count=9为显示数量 |
| 详情:{ytcms-Search-List:DUrl} | 视频详情页面链接 |
| 图片:{ytcms-Search-List:Pic} | 视频封面图片链接 |
| 标题:{ytcms-Search-List:Name} | 视频标题或名称 |
| 随机数:{ytcms-Search-List:Rand} | 视频列表随机数字 |
| 结束:{/ytcms-Search-List} | 循环结束 |
循环标签(视频列表分页按钮)
| 标签代码 | 标签说明 |
|---|---|
| {ytcms-Search-List:PageUrl} | 视频列表首页链接 |
| {ytcms-Search-List:prevUrl} | 视频列表上一页链接 |
| {ytcms-Search-List:nextUrl} | 视频列表下一页链接 |
| {ytcms-Search-List:totalUrl} | 视频列表尾页链接 |
使用示例：
<div class="search-results">
<h1>搜索结果：{ytcms-Search-List:Title}</h1>
<div class="video-list">
{ytcms-Search-List:Count=9}
<div class="video-item">
<a href="{ytcms-Search-List:DUrl}">
<img src="{ytcms-Search-List:Pic}" alt="{ytcms-Search-List:Name}">
<h3>{ytcms-Search-List:Name}</h3>
</a>
</div>
{/ytcms-Search-List}
</div>
<div class="pagination">
<a href="{ytcms-Search-List:PageUrl}">首页</a>
<a href="{ytcms-Search-List:prevUrl}">上一页</a>
<a href="{ytcms-Search-List:nextUrl}">下一页</a>
<a href="{ytcms-Search-List:totalUrl}">尾页</a>
</div>
</div>
7 详情模板标签
详情模板标签用于构建视频详情页面，包括视频基本信息和相关推荐。
详情模板标签-公共通用
循环标签(DC横幅广告)
| 标签代码 | 标签说明 |
|---|---|
| 开头:{ytcms-DCAd} | 广告循环开始 |
| 广告链接:{ytcms-DCAd:Url} | 广告链接地址 |
| 广告图片:{ytcms-DCAd:Pic} | 广告图片链接 |
| 广告图片宽度:{ytcms-DCAd:Width} | 广告图片宽度 |
| 广告图片高度:{ytcms-DCAd:Height} | 广告图片高度 |
| 结尾:{/ytcms-DCAd} | 广告循环结束 |
1-1. 视频详情模板标签
| 标签代码 | 标签说明 |
|---|---|
| {ytcms:$Name} | 视频名称 |
| {ytcms:$Pic} | 视频封面图片链接 |
| {ytcms:$CUrl} | 视频内容页链接 |
| {ytcms:$Time} | 视频更新时间 |
| {ytcms:$ListName} | 视频分类名称 |
| {ytcms:$ListUrl} | 视频分类列表链接 |
使用示例：
<div class="video-detail">
<h1>{ytcms:$Name}</h1>
<div class="video-info">
<img src="{ytcms:$Pic}" alt="{ytcms:$Name}">
<div class="info">
<p>分类：<a href="{ytcms:$ListUrl}">{ytcms:$ListName}</a></p>
<p>更新时间：{ytcms:$Time}</p>
<a href="{ytcms:$CUrl}" class="play-btn">立即播放</a>
</div>
</div>
</div>
1-2. 视频详情推荐列表标签
| 标签代码 | 标签说明 |
|---|---|
| 开始:{ytcms-Video-Popular:Count=9} | Count=9为显示数量 |
| 详情:{ytcms-Video-Popular:DUrl} | 视频详情页面链接 |
| 图片:{ytcms-Video-Popular:Pic} | 视频封面图片链接 |
| 名称:{ytcms-Video-Popular:Name} | 视频标题或名称 |
| 随机数:{ytcms-Video-Popular:Rand} | 视频列表随机数字 |
| 结束:{/ytcms-Video-Popular} | 循环结束 |
使用示例：
<div class="recommend-videos">
<h2>相关推荐</h2>
<div class="video-list">
{ytcms-Video-Popular:Count=9}
<div class="video-item">
<a href="{ytcms-Video-Popular:DUrl}">
<img src="{ytcms-Video-Popular:Pic}" alt="{ytcms-Video-Popular:Name}">
<h3>{ytcms-Video-Popular:Name}</h3>
</a>
</div>
{/ytcms-Video-Popular}
</div>
</div>
8 内容模板标签
内容模板标签用于构建视频播放页面，包括视频播放器和相关推荐。
详情模板标签-公共通用
循环标签(DC横幅广告)
| 标签代码 | 标签说明 |
|---|---|
| 开头:{ytcms-DCAd} | 广告循环开始 |
| 广告链接:{ytcms-DCAd:Url} | 广告链接地址 |
| 广告图片:{ytcms-DCAd:Pic} | 广告图片链接 |
| 广告图片宽度:{ytcms-DCAd:Width} | 广告图片宽度 |
| 广告图片高度:{ytcms-DCAd:Height} | 广告图片高度 |
| 结尾:{/ytcms-DCAd} | 广告循环结束 |
1-1. 视频内容模板标签
| 标签代码 | 标签说明 |
|---|---|
| {ytcms:$Id} | 视频ID |
| {ytcms:$Name} | 视频名称 |
| {ytcms:$Pic} | 视频封面图片链接 |
| {ytcms:$Play} | 视频iframe播放器 |
| {ytcms:$Time} | 视频更新时间 |
| {ytcms:$ListName} | 视频分类名称 |
| {ytcms:$ListUrl} | 视频分类列表链接 |
使用示例：
<div class="video-content">
<h1>{ytcms:$Name}</h1>
<div class="video-player">
{ytcms:$Play}
</div>
<div class="video-info">
<p>视频ID：{ytcms:$Id}</p>
<p>分类：<a href="{ytcms:$ListUrl}">{ytcms:$ListName}</a></p>
<p>更新时间：{ytcms:$Time}</p>
</div>
</div>
1-2. 视频内容推荐列表标签
| 标签代码 | 标签说明 |
|---|---|
| 开始:{ytcms-Video-Popular:Count=9} | Count=9为显示数量 |
| 详情:{ytcms-Video-Popular:DUrl} | 视频详情页面链接 |
| 图片:{ytcms-Video-Popular:Pic} | 视频封面图片链接 |
| 名称:{ytcms-Video-Popular:Name} | 视频标题或名称 |
| 随机数:{ytcms-Video-Popular:Rand} | 视频列表随机数字 |
| 结束:{/ytcms-Video-Popular} | 循环结束 |
使用示例：
<div class="recommend-videos">
<h2>相关推荐</h2>
<div class="video-list">
{ytcms-Video-Popular:Count=9}
<div class="video-item">
<a href="{ytcms-Video-Popular:DUrl}">
<img src="{ytcms-Video-Popular:Pic}" alt="{ytcms-Video-Popular:Name}">
<h3>{ytcms-Video-Popular:Name}</h3>
</a>
</div>
{/ytcms-Video-Popular}
</div>
</div>