本期視訊實現了部落格的詳情頁面；

內容簡介：使用了標籤函式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