xhw-xtpl v1.0.0
新华随心模板 Xtpl： 叫板翔宇？
非常抱歉的告诉你，随心模板并不能取代翔宇模板， 相反，她更像是翔宇模板系统精心包装后的礼物 🎁， 包装后的翔宇看起来光彩熠熠，老脸上泛着昔日王者的荣耀……
注：就像她的名字一样，"随心模板" 希望你工作开心 😊 ，随心所欲。so，不要在意名字的俗气。那么，她是如何帮助翔宇获得新生的呢？
那先得从翔宇"大爷"的几个老毛病说起：
模板编辑困难。
翔宇毕竟是老了，走路离不开dreamware这个拐杖。修改模板的时候，我们不得不惯着他的坏脾气，然后我们的气色也变差了，越来越像翔宇“大爷”。
难以测试
从测试模板到翔宇模板一共需要几步？
打开dreamware 》 剪贴需要配置模板的内容 》 点击高级标题列表 》 点击一下空白处（神马鬼? 》 点击编辑模板 》 复制剪贴内容到编辑窗口 》 点击右侧列表，小心翼翼的编辑每一个属性 》 点击确定，心里一顿担心，然后重复以上步骤N次 ...
纳尼!! 废什么话，老夫轻车熟路，早就配完了。好吧，老司机求带！！
灵活度太差
实现一个新闻列表？easy!! 实现一个swiper? easy !!... 翔宇 "大爷" 美滋滋。那实现一个效果，当稿件标题出现关键词 "重要" 时加粗 ？ easy !! "等等，这个效果我做不了!!" 翔宇“大爷”一脸懵逼，老脸耷拉下来，愤愤不平为什么你要这么难为他 😠。
语法晦涩，学习成本高
length="-1"？needcode=0？needcode=1?needcode=5? ... what?? 😖 看着新手不知所措的样子，翔宇大爷露出鄙视的眼神。
代码难以复用，无法实现组件化
什么组件？什么化？👿 老夫只会复制粘贴。 组件化之路在翔宇“大爷”看起来是一条不归路。
无法对接新的前端技术
老夫只会jQuery，学什么reactjs,vue。翔宇“大爷”强忍着苦笑，刻意显现出对这些新事物的漫不经心。也许，在内心深处，翔宇“大爷”正等着你注入新的生命之水，争取再活他500年！
扯了这么久 ，随心模板到底有多大能耐？
接下来的文章将保持文档本来的枯燥性，因为实在编不下去了......
为了获得他的能力，你需要做许多事情，但相信我，翔宇你都学会了，接下来的工作应该比你想象的容易的多
引入 Xtpl.js 。
引入jquery，然后紧接着引入 xtpl.js (可选的，xtpl.js 也支持无jq环境，只是需要把你的代码写在
Xtpl.ready(fn)中，而不是$.ready(), 请暂时忽略这种用法，毕竟 "老夫只会 jquery ")。没什么可说的，直接上地址
编写模板
如果你用过 handlebars 、ejs、jade 等模板引擎中的一种或几种，那么接下来的部分你只需要2分钟。什么？？一个也没用过？？！！你可能真的需要反省了... 没关系，随心模板是没有底线的，只要会写 html 就行。
下面是一个带图文新闻列表结构的 随心模板 示例，其中 li 结构需要由翔宇数据渲染。
<html> <head> </head> <body> <!-- 页面其他结构 --> <ul> <!-- 随心模板 BEGIN --> <script type="text/xtpl" data-name="list1"> <li> <a href="{{$.url}}"> <img src="{{$.imgsrc}}" alt="{{$.title}}"/> <h2>{{$.title}}</h2> </a> </li> </script> <!-- 随心模板 END--> </ul> <!-- 页面其他结构 --> </body> </html>可以看到，不同于翔宇模板，随心模板非常接近于渲染后的实际html，只需要两步就能完成模板配置过程：
将需要由翔宇渲染的部分用 模板容器包装起来（想想用DW配翔宇时候的类似操作）, 其中，
type="text/xtpl"为随心模板容器标识,data-name为模板数据片段名,具体使用方法将在后文描述。将需要由翔宇渲染的数据用
{{$.propName}}的形式替换 ，如文章链接 {{$.url}}、标题 {{$.title}}等。
是的，这就是配随心模板的过程，全程没有翔宇，不需要繁琐的配置过程，是不是有点小激动了。 翔宇 “大爷” 不高兴了，没有我提供数据，你随心模板还不是个笑话。
配置数据
随心模板最 "神气" 的地方就是将翔宇模板作为数据独立了出来，并按一定结构
<div id="xData" style="display:none;">放置在页面最下方( 其后紧邻</body>) 并隐藏起来，仅仅为页面供给翔宇数据，没有更多。<div id="xData" style="display:none;"> <!-- 列表1 数据 --> <ul data-name="list1"> <!--webbot bot="AdvTitleList" nodeid="11114313" type="0" spanmode="0" dayspan="0" attr="" comstring="<Repeat Begin=0 End=5><Article><li> <span data-prop=#enpquot#title#enpquot#><Title length=#enpquot#-1#enpquot#>TitlePh</Title></span> <span data-prop=#enpquot#imgsrc#enpquot#><Picture needcode=0>PictureUrlPh</Picture></span> </li></Article></Repeat>" TAG="BODY" PREVIEW="[高级标题列表]" artattr="0" isshowcode="0" titlekeyword="" keyword="" tagstring="00" starttime="" endtime="" id="0" startspan --> <!--webbot bot="AdvTitleList" endspan i-checksum="0" --> </ul> <!-- 列表2 数据 --> <ul data-name="list2"> <!--webbot bot="AdvTitleList" nodeid="11114313" type="0" spanmode="0" dayspan="0" attr="" comstring="<Repeat Begin=0 End=5><Article><li> <span data-prop=#enpquot#title#enpquot#><Title length=#enpquot#-1#enpquot#>TitlePh</Title></span> <span data-prop=#enpquot#imgsrc#enpquot#><Picture needcode=0>PictureUrlPh</Picture></span> </li></Article></Repeat>" TAG="BODY" PREVIEW="[高级标题列表]" artattr="0" isshowcode="0" titlekeyword="" keyword="" tagstring="00" starttime="" endtime="" id="0" startspan --> <!--webbot bot="AdvTitleList" endspan i-checksum="0" --> </ul> </div> </body>目测一下这段代码，可以发现这
TMD就是一个翔宇模板, 由id等于xData的div元素 包裹，内部由多个列表ul元素组成，每个列表元素包裹了一个翔宇模板。所以......我是来搞笑的吗？？还得配翔宇？？消消气，我娓娓道来其中奥妙。
怀着对翔宇的万分不舍，我们还是决定削弱了他的职能，让他看起来更纯粹一点。
因为只充当数据，每个翔宇片段格式是相对固定的，不同的地方只有 nodeid（信息片id） , repeat(稿件个数) , attr（稿件属性）等参数设置。
所以某种程度上来说这些仅充当数据的片段可以复用的（复制粘贴），或者更进一步，是可以自动生成的。
如你所想，我们提供了一个在线可视化工具来自动生成以上内容，该工具功能截图如下：
通过填写该表单，可以生成翔宇模板的 每个 ul 内的模板内容（对应一个信息片id 的特定数据）。
每个参数的含义如下：
参数名 含义 填写内容 注 释 数据说明 一般用使用该数据源的版块注明, 比如： 头条轮播新闻、高清大图、最新播报、高层动态等 dataKey 数据引用名 随心模板 script 容器 的data-key 属性使用该名称引用模板数据源 信息片id 数据信息片id 信息片id 稿件类别 按类别过滤稿件 勾选类别，可选择多个 属性列表 配置稿件可读属性 由随心模版的访问，如勾选 标题将可使用{{$.title}}循环条数 过滤稿件数量 begin: 稿件起始序号，end: 稿件结束序号，如 begin:5 ,end:20, 将过滤出5至20条共15条数据 稿件类型 稿件类型 关键词过滤 按稿件关键词过滤列表 稿件关键词
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>随心模版脚手架</title>
<!-- 引入jquery -->
<script src="http://www.xinhuanet.com/global/lib/jq/jquery1.12.4/jquery1.12.4.min.js"></script>
<!-- 引入随心模板xtpl -->
<script src="http://www.xinhuanet.com/global/lib/xtpl/xtpl.min.js"></script>
</head>
<body>
<!-- 随心模板片段 -->
<ul>
<script type="text/xtpl" data-name="list1">
<li>
<a href="{{$.link}}">
<img src="{{$.imgsrc}}" alt="{{$.title}}"/>
<h2>{{$.title}}</h2>
</a>
</li>
</script>
</ul>
<!-- 随心模板数据，由工具在线生成 (http://www.xinhuanet.com/global/lib/xtpl/builder/json2xy.html)-->
<div id="xData" style="display:none;">
<!-- 片段注释 -->
<ul data-name="list1">
<!--webbot bot="AdvTitleList" nodeid="11114313" type="0" spanmode="0" dayspan="0" attr="" comstring="<Repeat Begin=0 End=5><Article><li>
<span data-prop=#enpquot#title#enpquot#><Title length=#enpquot#-1#enpquot#>TitlePh</Title></span>
<span data-prop=#enpquot#imgsrc#enpquot#><Picture needcode=0>PictureUrlPh</Picture></span>
</li></Article></Repeat>" TAG="BODY" PREVIEW="[高级标题列表]" artattr="0" isshowcode="0" titlekeyword="" keyword="" tagstring="00" starttime="" endtime="" id="0" startspan -->
<!--webbot bot="AdvTitleList" endspan i-checksum="0" -->
</ul>
</div>
</body>
</html>进一步
随心模板语法
通过为模板 script 容器添加属性来过滤稿件
截取稿件 data-count="number"
<script data-name="list1" data-count="2" type="text/xtpl">{{$.title}}</script>跳稿 data-skip="number"
<script data-name="list1" data-skip="1" type="text/xtpl">{{$.title}}</script>关键词过滤 data-keywords="key1 key2 ..."
<script data-name="list1" data-keywords="流行 热点" type="text/xtpl">{{$.title}}</script>思考一下？ 如何实现过滤稿件关键字含有 "国际" 的第2到第4条稿子
可使用稿件属性
标题：{{$.title}}
链接：{{$.url}}
标题图：{{$.imgsrc}}
摘要：{{$.abstract}}
引题：{{$.pretitle}}
副题：{{$.subtitle}}
关键词：{{$.keyword}}
发布时间：{{$.pubtime}}
作者：{{$.author}}
编辑：{{$.editor}}
来源：{{$.source}}随心模板原理
随心模板基于 mixT的模板引擎，所以背后存在 随心模板 向 mixT模板 的转化过程
下面的随心模板
<script type="text/xtpl" data-name="list1">
<li>
<a href="{{$.link}}">
<img src="{{$.imgsrc}}" alt="{{$.title}}"/>
<h2>{{$.title}}</h2>
</a>
</li>
</script>将被转化成 mixT 模板引擎（添加前缀和后缀的方式）
<script type="text/xtpl" data-name="list1">
{{#each data as $,__idx}}
{{%$.index = __idx;}}
<li>
<a href="{{$.link}}">
<img src="{{$.imgsrc}}" alt="{{$.title}}"/>
<h2>{{$.title}}</h2>
</a>
</li>
{{/each}
</script>其中，渲染数据 data 实际为 Xtpl.data.list1 , 通过模板容器 script 的 data-name 属性确定 , 并被 script 的其他属性预处理(过滤) ，比如 data-count="5" 相当于 data = data.slice(0,5)
所以，你可以在 随心模板 里添加 mixT 支持的模板语法，实现完整的模板引擎功能。
mixT 文档
8 years ago