本期視頻實現(xiàn)了博客的詳情頁面杆勇;
內(nèi)容簡介:使用了標簽函數(shù)layout完成詳情功能
一起學beetl目錄:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598
作者:GK
標簽函數(shù) layout
所謂標簽函數(shù)踱侣,即允許處理模板文件里的一塊內(nèi)容,功能等于同jsp tag井誉。
如Beetl內(nèi)置的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標簽函數(shù)的參數(shù)
第2行l(wèi)ayoutContent 是layout標簽體{}渲染后的結(jié)果
關于layout標簽,參考高級主題布局
layout標簽函數(shù)整胃,相當于把公共部分抽取出來颗圣,包裹主單個頁面的個性化內(nèi)容。
定界符屁使、占位符
通俗易懂的說:
定界符就是 界定動態(tài)beetl語言 與 html靜態(tài)代碼之間的符號在岂。
比如,在<%%>中間的代碼,是beetl代碼(被包裹的代碼會被Beetl模板引擎編譯)蛮寂,
而定界符之外的代碼就是html靜態(tài)代碼(beetl語法不會生效)蔽午。
<%if(a==1){%>
<a href="xxxx">跳轉(zhuǎn)</a>
<%}%>
占位符,就是在靜態(tài)代碼中占一個位置酬蹋。占位符中可以使用表達式及老,以及函數(shù),占位符包裹住的代碼會被Beetl引擎編譯除嘹。
比如下面的url:
<a href="${url}">跳轉(zhuǎn)</a>
因為都是beetl代碼写半,所以在定界符中岸蜗,不需要在使用占位符包裹變量尉咕,可以直接使用變量名!
Beetl作用階段
Beetl的主要作用是把 數(shù)據(jù)(變量)+ 模板 => 編譯成 靜態(tài)代碼璃岳。
靜態(tài)代碼產(chǎn)生之后就沒有 Beetl 什么事情了年缎,瀏覽器打開靜態(tài)代碼才開始執(zhí)行JS腳本。
項目git地址:https://gitee.com/gavink/beetl-blog
視頻地址:下載下來會更清晰铃慷,視頻比較長单芜,可使用倍速看
百度網(wǎng)盤下載: https://pan.baidu.com/s/1LyxAxlKpVXgVjwSXIbzBuA 提取碼: 68im
在線播放地址:bilibili (可以調(diào)節(jié)清晰度): https://www.bilibili.com/video/av36278644/?p=5
博客目錄:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598