您现在的位置是:首页 > 文章详情

05.Beetl标签函数以及定界符、占位符介绍---《Beetl视频课程》

日期:2018-12-10点击:379

本期视频实现了博客的详情页面;

内容简介:使用了标签函数layout完成详情功能

一起学beetl目录:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598

作者:GK


标签函数 layout

所谓标签函数,即允许处理模板文件里的一块内容,功能等于同jsp tag。

如Beetl内置的layout标签

index.html

<% layout("/inc/layout.html",{title:'主题'}){ %> Hello,this is main part <% } %>

layout.html

title is ${title} body content ${layoutContent} footer

第1行变量title来自于layout标签函数的参数

第2行layoutContent 是layout标签体{}渲染后的结果

关于layout标签,参考高级主题布局

layout标签函数,相当于把公共部分抽取出来,包裹主单个页面的个性化内容。


定界符、占位符

通俗易懂的说:

定界符就是 界定动态beetl语言 与 html静态代码之间的符号。
比如,在<%%>中间的代码,是beetl代码(被包裹的代码会被Beetl模板引擎编译),
而定界符之外的代码就是html静态代码(beetl语法不会生效)。

<%if(a==1){%> <a href="xxxx">跳转</a> <%}%>

占位符,就是在静态代码中占一个位置。占位符中可以使用表达式,以及函数,占位符包裹住的代码会被Beetl引擎编译。

比如下面的url:

<a href="${url}">跳转</a>

因为都是beetl代码,所以在定界符中,不需要在使用占位符包裹变量,可以直接使用变量名!


Beetl作用阶段

Beetl的主要作用是把 数据(变量)+ 模板 => 编译成 静态代码。

静态代码产生之后就没有 Beetl 什么事情了,浏览器打开静态代码才开始执行JS脚本。


项目git地址:https://gitee.com/gavink/beetl-blog

视频地址:下载下来会更清晰,视频比较长,可使用倍速看

百度网盘下载: https://pan.baidu.com/s/1LyxAxlKpVXgVjwSXIbzBuA 提取码: 68im

在线播放地址:bilibili (可以调节清晰度): https://www.bilibili.com/video/av36278644/?p=5

博客目录:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598

原文链接:https://yq.aliyun.com/articles/676049
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章