ams系统模版文件集-腾讯互娱重构外包页面规范

ams系统模版文件集

一、模版文件注意事项

二、广告系统

三、首页模版

普通资讯
主KV展示视频或背景图
含条件判断模版
json格式模版

四、列表页模版

普通列表页模版
移动端上滑加载更多

五、详情页模版

资讯详情页模版
视频详情页模版

六、活动中心模版

七、官网首页赛事弹窗

注意事项：

1. 模版文件中比较运算符种类：大于：> 、小于：< 、不等于：! 、等于：=

>=和 <= 均不合法

2. 字段不够用，自定义字段来凑：$sExtField1.DATA$ 、$sExtField2.DATA$

最常用
资讯标题	$sTitle.DATA$
正文内容	$sContent.DATA$
发布日期短格式（月/日）	$dtReleaseDate.DATA$
当前页链接	$infoPath.DATA$
主题图片-大图	$sInfoImageAddr.DATA$
当前频道名称	$sTypeName.DATA$
当前频道列表页	$typeIndexPath.DATA$
资讯ID	$iInfoId.DATA$
文章属性类
关键字	$sKeyWord.DATA$
对外作者	$sUserCreator.DATA$
资讯摘要	$sSubContent.DATA$
是否跳转	$sIsRedirect.DATA$
跳转地址	$sRedirectAddress.DATA$
标题属性类
标题[首页]颜色	$sTitleIndexColor.DATA$
标题[列表页]颜色	$sTitleListColor.DATA$
标题加粗（输出1）	$sTitleBold.DATA$
热门、最新图标（1：热门；2：最新）	$sTitleIcon.DATA$
是否置顶（0非，1是）	$sIsTop.DATA$
是否精华（0非，1是）	$sIsDigest.DATA$
图片类
主题图片-大图	$sInfoImageAddr.DATA$
主题图片-缩略图	$sInfoImageAbbrAddr.DATA$
主题图片-中图	$sInfoImageAbbrAddrMiddle.DATA$
主题图片-小图	$sInfoImageAbbrAddrSmall.DATA$
所属频道预设的主题图-宽	$sImageAbbrSizeWidth.DATA$
所属频道预设的主题图-高	$sImageAbbrSizeHeight.DATA$
时间类
创建时间完整格式（年-月-日时:分:秒）	$dtCreateTime_org.DATA$
创建日期正常格式（年-月-日）	$dtCreateTime.DATA$
创建日期短格式（月/日）	$dtCreateDate.DATA$
创建日期短格式（月/日）	$dtCreateDateShort.DATA$
发布时间完整格式（年-月-日时:分:秒）	$dtReleaseTime_org.DATA$
发布日期正常格式（年-月-日）	$dtCreateDateShort.DATA$

发布日期短格式（月/日）	$dtReleaseDateShort.DATA$
活动类
活动状态（2:即将开始；1:进行中；0:非活动）	$iActivityStats.DATA$
资讯活动开始时间	$dtBegTime.DATA$
资讯活动结束时间	$dtEndTime.DATA$
相关资讯类
相关资讯标题	$sTitle.DATA$
相关资讯详情页连接	$infoPath.DATA$
上一页数	$pagePrevious.DATA$

[-]广告系统

<style>
.ggBox { width:640px; height:300px;}/*修改成广告图片的尺寸即可*/
.ggBox { position:relative; background:#0e97dc; overflow:hidden}
/*以下是轮播的图片样式，不用修改*/
.adPic { position:absolute; width:100%; height:100%; left:0; top:0}
.adPic a { display:block; width:100%; height:100%; overflow:hidden; position:absolute; left:0; top:0; background:#0e97dc}
.adPic img { width:100%; height:100%; position:absolute; top:0; left:0}
.adPic p { position:relative; padding-top:50px}
.loadI { width:130px; text-align:center; line-height:20px; color:#FFF; background:#18b2ff; margin:0px auto; display:block}
.adPicUl { width:1000%; height:100%; overflow:hidden; -webkit-transition: all 0.1s linear; -webkit-transform-style:preserve-3d;-webkit-backface-visibility: hidden}
 .adPicUl li { float:left; width:14.3%; height: 100%;}
.adPicUl a { display:block; width:100%; height: 100%}
.adPicUl img { display:block; width:100%; height:100%}
 /*以下是轮播小按钮样式，可按设计稿自己修改~*/
.adBtn { position:absolute; z-index:2; right:17px; bottom:20px; height:20px}
.adBtn a { display:block; float:left; text-indent:-5000px; margin-right:3px; overflow:hidden; width:19px; height:19px; background-image:url(http://ossweb-img.qq.com/images/game/portal2012/roll_btn.png); background-repeat:no-repeat;
 background-position:0 1px}/*小按钮样式*/
a.on { background-position:-19px 1px;_background:#efefef}/*小按钮当前帧样式*/
.adBtn a:hover { background-position:-19px -18px}/*小按钮鼠标经过样式*/
</style>
<div class="ggBox" id="ggBox"></div>
<script src="http://ossweb-img.qq.com/images/js/comm/tgAds.min.js"></script>
<script>
 var rollad = new tgAds({
 ggID: '15938',//填写轮播广告所属的频道ID("频道管理"-"频道ID")
 info: '201710',
 //info的值可以有2种形式：1.直接填写需要的这几帧的广告位ID("广告位管理"-"广告位ID")
 // |或者| 2.填写广告位所属组ID("广告位管理"-"广告位所属组ID"),
 box: 'ggBox',//[可选参数]填写放置广告的div的ID//以下参数都是可选！
 pgv: 'mainAd',// PTT点击流'mainAd'：点击流名称，序号会自动加会自动上报:PTTSendClick('adRoll','mainAd1','轮播广告1')
 auto: false,//[可选参数]false移动端禁止自动滚动，不添加此项或者true为定时自动滚动
 mouse: false,
 //[可选参数,若点击触发请删掉此项]，true为鼠标经过小按钮触发翻页。
 //false和默认为点击小按钮触发翻页。最好是点击触发，不然晃得眼花
 noUrl: false,//[可选参数]如果只纯展示不希望点击跳转请用这个参数
 callBack: function () {
 //[可选参数]在广告准备完毕后运行的回调函数
 //console.log('一共有' + this.btns.length + '个广告')
 }
 });
</script>

使用详情请见：

http://tgideas.qq.com/webplat/info/news_version3/804/25810/26096/m16274/201708/628340.shtml#goto6

[-]新闻系统

场景一：首页模版

顾名思义，是对首页的各个模块接入ams（新闻系统）

1. 普通资讯

<%root%>
 <%NewsListData%>
 <%NewsData%>
 <li>
 <span class="new">[$sTypeName.DATA$]</span>
 <a href="$infoPath.DATA$"> 
 <span class="time">$dtReleaseDate.DATA$</span>
 $sTitle.DATA$
 </a>
 </li> 
 <%/NewsData%>
 <%/NewsListData%>
<%/root%>

2. 首页主KV展示背景图或视频

<%root%>
<%NewsListData%>
<%NewsData%>
<div class="kv-bg" style="background-image: url($sInfoImageAddr.DATA$);">
 <%@if($sField1Value.DATA$!)%>
 <video><source src="$sField1Value.DATA$" type="video/mp4"></source></video>
 <%@endif%>
 <a href="$infoPath.DATA$" onclick="PTTSendClick('btn','topkv','进入专题');" class="kv_link" title="查看详情">查看详情</a>
</div>
<%/NewsData%>
<%/NewsListData%>
<%/root%>

3. 含条件判断模版

<%root%>
 <%@SetVar(i,1)%>
 <%NewsListData%>
 <%NewsData%> 
 <li class="<%@if(GetVar(i)=1)%>line_sp<%@endif%>"> 
 <span class="new">[$sTypeName.DATA$]</span>
 <a href="$infoPath.DATA$"> 
 <span class="time">$dtReleaseDate.DATA$</span>
 $sTitle.DATA$
 </a>
 </li> 
 <%@SetVar(i,Plus(GetVar(i),1))%> 
 <%/NewsData%>
 <%/NewsListData%>
<%/root%>

4.json格式模版

<%root%>
var FreeHeroIndexData = [{}
<%NewsListData%>
<%NewsData%>
,{"sTitle":"$sTitle.DATA$","sSubContent":"$sSubContent.DATA$"}
<%/NewsData%>
<%/NewsListData%>
];
<%/root%>

场景二、列表页模版

1.普通列表页模版

%root%>
 
 <!DOCTYPE html>
<html lang="zh-CN">
<head>
 
 <meta charset="gbk" />
 ...
 <title></title> 
 </head>
<body>
 
 <ul> 
 <%NewsListData%>
 <%NewsData%>
 <li>
 <img src="$sInfoImageAddr.DATA$" />
 <div class="content-name s-left">
 <p>$sTitle.DATA$</p>
 <p>$sSubContent.DATA$</p>
 </div>
 </li>
 <%/NewsData%>
 <%/NewsListData%>
 </ul>
 <%PageData%>
 <%@if($pagePrevious.DATA$!)%>
 <a data-href="$pagePrevious.DATA$" href="#" class="next prev"><上一页</a>
 <%@endif%>
 <%@if($pageNext.DATA$!)%>
 <a data-href="$pageNext.DATA$" href="#" class="next">下一页></a>
 <%@endif%>
 <%/PageData%>
 </body>
</html>
 
<%/root%>

2.移动端上滑或点击加载更多

<%root%>
 <%@SetVar(i,1)%>
 <%NewsListData%>
 <%NewsData%>
 <li class="clearfix">
 <a href="$infoPath.DATA$" class="img s-left">
 <img src="$sInfoImageAddr.DATA$" />
 </a>
 <a href="$infoPath.DATA$" class="data s-left">
 <span>$sTitle.DATA$</span>
 <span>$dtReleaseDate.DATA$</span>
 </a>
 <%@if(GetVar(i)<4)%>
 <span class="spr num-ph"><%@GetVar(i)%></span>
 <%@else%>
 <p class="gxqm">$sSubContent.DATA$</p>
 <%@endif%>
 </li>
 <%@SetVar(i,Plus(GetVar(i),1))%>
 <%/NewsData%>
 <%/NewsListData%>
 <li>
 <%PageData%>
 <%@if($pageNow.DATA$>5|$pageNow.DATA$=$pageTotal.DATA$)%>
 <div class="video-more" data-pagenow="$pageNow.DATA$" data-pagetotal="$pageTotal.DATA$" data-pagenext="$pageNext.DATA$">
 <a href="javascript:;" class="s-left">已显示全部内容</a>
 </div>
 <%@else if($pageTotal.DATA$>1)%>
 <div class="video-more" data-pagenow="$pageNow.DATA$" data-pagetotal="$pageTotal.DATA$" data-pagenext="$pageNext.DATA$">
 <img class="s-left" src="//game.gtimg.cn/images/poker/cp/a20170730wsop/more.png" />
 <a href="javascript:;" class="s-left">拖动加载更多</a>
 </div>
 <%@else%>
 <div class="video-more" data-pagenow="$pageNow.DATA$" data-pagetotal="$pageTotal.DATA$" data-pagenext="$pageNext.DATA$">
 <a href="javascript:;" class="s-left">已显示全部内容</a>
 </div>
 <%@endif%>
 <%/PageData%>
 </li>
<%/root%>

场景三、详情页模版

1.资讯详情页模版

<%root%>
<%OneNewsData%>
 
 <!DOCTYPE html>
<html lang="zh-CN">
<head>
 
 <meta charset="gbk" />
 ...
 <title>$sTitle.DATA$- 新闻详情-官网</title>
 </head>
<body> 
<div class="header"> 
 <span class="s-left">新闻资讯 /</span>
 <span class="s-left"> NEWS INFOMATION</span>
</div>
<div>
 <h1>$sTitle.DATA$</h1>
 $sContent.DATA$
</div> 
 
 </body>
</html>
<%/OneNewsData%>
<%/root%>

2.视频详情页模版

<%root%>
<%OneNewsData%> 
<!DOCTYPE html>
 ... 
<div class="cont">
 <div class="detail-nav-guid">
 您当前的位置：<a target="_blank">首页</a>/<a target="_blank">游戏攻略</a>/<span>攻略详情</span>
 </div>
 <div class="main-cont">
 <h3> $sTitle.DATA$</h3>
 <span>$dtReleaseDate.DATA$</span>
 <div id="live_player"></div>
 <div>$sContent.DATA$</div>
 </div>
</div>
<script src="//ossweb-img.qq.com/images/js/jquery/jquery-1.11.3.min.js"></script>
<script src="//ossweb-img.qq.com/images/js/PTT/ping_tcss_tgideas_https_min.js"></script>
<script src="//imgcache.gtimg.cn/tencentvideo_v1/tvp/js/tvp.player_v2.js" charset="utf-8"></script>
<script>
liveTV('$sKeyWord.DATA$')
function liveTV(vid) {
 var video = new tvp.VideoInfo(); video.setVid(vid);
 var player = new tvp.Player();
 player.create({ width: 1000, height: 600, video: video, modId: "live_player", //live_player是刚刚在页面添加的div容器 autoplay: true });
}
</script>
 </body>
</html> 
<%/OneNewsData%>
<%/root%>

场景四、活动中心模版（活动状态$iActivityStats.DATA$（2:即将开始；1:进行中；0:非活动））

<%root%> 
...
<meta charset="gbk" />
...
 
<div class="act_top">
 <ul>
 <li class="current">全部</li>
 <li>进行中</li>
 <li>已结束</li>
 </ul>
</div>
<div class="act_content">
 <ul class="act_list" style="display: block;">
 <%NewsListData%>
 <%NewsData%>
 <li class="actnormal actend">
 <div class="act_img">
 <img width="383" height="166" alt="$sTitle.DATA$" src="$sInfoImageAddr.DATA$" />
 </div>
 <div class="act_innr">
 <div class="act_desc"><span class="act_tit">$sTitle.DATA$</span></div>
 <div class="act_desc"><span class="act_date">开始时间：$dtBegTime.DATA$</span><span class="act_date">结束时间：$dtEndTime.DATA$</span></div>
 <p class="act_intro">$sSubContent.DATA$</p>
 </div>
 <div>
 <em>
 <%@if($iActivityStats.DATA$=2)%><span class="ac_ing">即将开始</span>
 <%@else if($iActivityStats.DATA$=1)%><span class="ac_ing">进行中</span>
 <%@else%><span class="ac_ing end_ac">已结束</span>
 <%@endif%>
 </em>
 </div>
 <a class="act-info" href="$infoPath.DATA$" target="_blank"><h5 class="act-tit2">活动简介</h5><p class="act-tx">$sSubContent.DATA$</p><span class="act-lnk"><i class="commspr commico-arrright"> </i> 查看活动详情</span><i class="act-sbg2"> </i></a>
 </li>
 <%/NewsData%>
 <%/NewsListData%>
 </ul>
 
 <ul class="act_list" style="display: none;">
 <%NewsListData%>
 <%NewsData%>
 <%@if($iActivityStats.DATA$=1)%>
 <li class="actnormal">
 <div class="act_img">
 <img width="383" alt="$sTitle.DATA$" height="166" src="$sInfoImageAddr.DATA$" />
 </div>
 <div class="act_innr">
 <div class="act_desc"><span class="act_tit">$sTitle.DATA$</span></div>
 <div class="act_desc"><span class="act_date">开始时间：$dtBegTime.DATA$</span><span class="act_date">结束时间：$dtEndTime.DATA$</span></div>
 <p class="act_intro">$sSubContent.DATA$</p>
 </div>
 <div class="publicspr act-times act-timesing act-img$iActivityStats.DATA$"><em>进行中</em></div>
 <a class="act-info" href="$infoPath.DATA$" target="_blank"><h5 class="act-tit2">活动简介</h5><p class="act-tx">$sSubContent.DATA$</p><span class="act-lnk"><i class="commspr commico-arrright"> </i> 查看活动详情</span><i class="act-sbg2"> </i></a>
 </li>
 <%@endif%>
 <%/NewsData%>
 <%/NewsListData%>
 </ul>
 <ul class="act_list" style="display: none;">
 <%NewsListData%>
 <%NewsData%>
 <%@if($iActivityStats.DATA$=0)%>
 <li class="actnormal">
 <div class="act_img">
 <img width="383" alt="$sTitle.DATA$" height="166" src="$sInfoImageAddr.DATA$" />
 </div>
 <div class="act_innr">
 <div class="act_desc"><span class="act_tit">$sTitle.DATA$</span></div>
 <div class="act_desc"><span class="act_date">开始时间：$dtBegTime.DATA$</span><span class="act_date">结束时间：$dtEndTime.DATA$</span></div>
 <p class="act_intro">$sSubContent.DATA$</p>
 </div>
 <div class="publicspr act-times act-timesing act-img$iActivityStats.DATA$"><em>已结束</em></div>
 <a class="act-info" href="$infoPath.DATA$" target="_blank"><h5 class="act-tit2">活动简介</h5><p class="act-tx">$sSubContent.DATA$</p><span class="act-lnk"><i class="commspr commico-arrright"></i> 查看活动详情</span><i class="act-sbg2"></i></a>
 </li>
 <%@endif%>
 <%/NewsData%>
 <%/NewsListData%>
 </ul>
</div>
 
<%/root%>

场景五、赛事弹窗（弹窗自动上下线，自定义一天弹出次数）

模版文件：

<%root%>
<script>
<%NewsListData%>
<%NewsData%>
var popData={"title":"$sTitle.DATA$","txt":"$sSubContent.DATA$","vid":"$sField1Value.DATA$","num":"$sField2Value.DATA$","img":"$sInfoImageAddr.DATA$","link":"$infoPath.DATA$","time":"$dtReleaseDateShort.DATA$"};
var videoLinkUrl = "$sDetailUrl.DATA$";
if(videoLinkUrl && document.getElementById('popVideoLink')){
	document.getElementById('popVideoLink').href = videoLinkUrl;
}
<%/NewsData%>
<%/NewsListData%>
</script>
<%/root%>

js部分：

(function() {
 function createChannel(wrapId, cid, width, height) {
 $.getScript("//game.gtimg.cn/images/js/swfobject.js",function(){
 $.getScript("//imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2_jq.js",function(){
 var video = new tvp.VideoInfo();
 video.setChannelId(cid);
 var player = new tvp.Player();
 player.create({
 width: width,
 height: height,
 type: 1,
 video: video,
 modId: wrapId,
 autoplay: true
 });
 })
 })
}
function popVideo() {
 $("#video_pop").css("background", "url(" + popData.img + ") no-repeat 0 0");
 createChannel("mod_player", cid, '100%', 490);
 setTimeout(function() {
 TGDialogS('video_pop');
 }, 500);
 }
 var cid = popData.vid,
 num = popData.num,
 showpop,
 showflag = false;
 /*cid等于0，下线弹窗，num为弹窗次数，1次或N次*/
 if (cid !== '0') {
 if (num == '1') {
 var mvShowed = JSON.parse(localStorage.getItem('mvshowflag'));
 if (!mvShowed || (mvShowed && +new Date().getTime() - mvShowed.expire > 1000 * 60 * 60 * 24)) {
 popVideo();
 localStorage.setItem('mvshowflag', JSON.stringify({ 'show': true, 'expire': new Date().getTime() }));
 }
 } else {
 popVideo();
 }
 } 
})();