VTemplate模板引擎的使用--入门篇

1、什么是VTemplate模板引擎？

详细请点击这里。

2、怎样使用VTemplate模板引擎？

第1步: 下载VTemplate模板引擎的最新库文件（从这里下载），下载回来后将库文件引入到你的项目中。

第2步: 针对你的目的设计好VT模板（如HTML页面）。

第3步: 根据VT模板在代码里实例化模板引擎对象，并处理相关的逻辑数据。

第4步: 输出模板引擎的最终呈现数据（直接显示或存储到文件）

3、如何设计VT模板？

设计VT模板其时就是在于如何设计VT模板元素，类似于你设计HTML页面时如何设计那些HTML标签元素一样。而设计VT模板，则主要是将那些你觉得应该要时常改变数据的地方设计为VT模板元素。比如针对单数据变动的地方（如文章的标题、内容），则设计变量元素；针对列表数据变动的地方（如文章排行、栏目列表等数据），则设计循环元素（for或foreach标签元素）

注：关于VT模板元素请参考这文章的第3点以下的内容。

下面让我们来做一个例子，设计一个类似于博客园中的日志页面（也就是你现在看到的这个页面）的VT模板。页面效果如下：

日记的标题区

---

日记的内容 

posted @ 2008-06-19 10:31 Kingthy 阅读(1) 评论(2)

评论列表

---

#1楼 2008-06-19 11:14 | 张三

沙发

---

#2楼 2008-07-19 11:14 | 李四

顶楼主

---

#3楼 2008-08-19 11:14 | 王五

板凳啊

页面HTML代码如下：

<div class=”bloglog”><strong>日记的标题区</strong> 
  <hr class=”blogsplit”/>

 日记的内容 

  <div style="margin-bottom: 20px" align="right">posted @ 2008-06-19 10:31 Kingthy 阅读(1) 评论(2)</div>

  <strong>评论列表</strong> 

  <hr class=”blogsplit”/>
  <div class=”blogcomment”>#1楼 2008-06-19 11:14 | 张三 </div>
  <div style="padding-left: 20px">沙发</div>
  <hr class=”blogsplit”/>
  <div class=”blogcomment”>#2楼 2008-07-19 11:14 | 李四 </div>
  <div style="padding-left: 20px">顶楼主</div>
  <hr class=”blogsplit”/> 

  <div class=”blogcomment”>#3楼 2008-08-19 11:14 | 王五 </div>
  <div style="padding-left: 20px">板凳啊</div>

</div>

观察上面HTML代码中已被加背景色的区域，对于博客系统来说，显示博客日记的页面大概需要变动的地方就只有上面已加背景色的地方，因此只要将上面变动的地方设计为VT模板元素即可。对于黄色区域，只是单数据变动地方，则只要设计为变量元素；对于绿色区域，是显示评论数据列表，所以需要设计为循环元素，如用foreach标签元素。最终设计好的VT模板如下（各位可上下对比一下黄色与绿色背景区域的不同）：

<div class=”bloglog”><strong>{$:blogarchive.title htmlencode=”true”}</strong> 
  <hr class=”blogsplit”/>

  {$:blogarchive.content}

  <div style="margin-bottom: 20px" align="right">posted @ {$:blogarchive.time format=”yyyy-MM-dd HH:mm”} {$:blogarchive.author htmlencode=”true”} 阅读(1) 评论(2)</div>

  <strong>评论列表</strong> 

  <vt:foreach from=”$blogarchive.comments” item=”#.comment” index=”#.floor”>


  <hr class=”blogsplit”/> 

  <div class=”blogcomment”>#{$:#.floor}楼 {$:#.comment.time format=”yyyy-MM-dd HH:mm”} | {$:#.comment.author htmlencode=”true”} </div>
  <div style="padding-left: 20px">{$:#.comment.content htmlencode=”true”}</div>
  </vt:foreach>

</div>

 

4、怎么使用VT模板？

利用我们上面设计好的VT模板，我们实例化VTemplate模板引擎的里的模板文档对象TemplateDocument。

假如我们的VT模板保存在blogarchive.html文件里，则实例化代码如下：

TemplateDocument document =  new  TemplateDocument(context.Server.MapPath( "template/blogarchive.html"),  Encoding.UTF8);

或者我们从缓存模板里构造实例：

TemplateDocument document =  TemplateDocument.FromFileCache(context.Server.MapPath( "template/blogarchive.html"),  Encoding.UTF8);

到此，我们就可以使用document对象来操作VT模板变量里的元素对象了，比如对VT模板里红色的blogarchive变量赋于某篇博客日记数据，如下：

//对VT模板里的blogarchive变量赋值 
document.Variables.SetValue( "blogarchive",  this.GetBlogArchive());

注：对于GetBlogArchive()方法，则只是一个获取数据实体的函数，比如从数据库获取的数据实体。

 

经过这简单的两步操作，我们就已完成了对VT模板的操作，剩下就是“告诉”模板引擎将数据呈现出来，我们的博客日记页面就做好了;)是不是很简单？

//输出最终呈现的数据 
document.Render(context.Response.Output);

 

注：本篇的例子代码摘自VTemplate.WebTester项目下的blogarchive.ashx文件

 

VTemplate项目托管在Google code上。 
URL: http://net-vtemplate.googlecode.com/ 
SVN: http://net-vtemplate.googlecode.com/svn/src/VTemplate.Engine/

更多例子请参考VTemplate.WebTester项目：

http://net-vtemplate.googlecode.com/svn/src/VTemplate.WebTester/

或观看在线演示例子：（感谢网友“DOLT”、“疯子” 提供）

http://61.155.39.222:8888/index.ashx

注：已建立VTemplate模板引擎技术交流QQ群，欢迎各位加入参与项目开发或技术探讨。QQ群：884468