Vapor 大型教程
美化页面
内容有了，页面还丑？本文用 Leaf 的模板嵌套复用骨架，再引入 Bootstrap，让 Vapor 3 的网站快速变美观、且移动端友好。
一、模板嵌套
Leaf 模板可以相互嵌套，达到 HTML 代码复用的目的。首先把 index.leaf 中可复用的部分抽出来，放到 base.leaf 里供其它页面复用。
基础模板 base.leaf：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#(title) | Acronyms</title>
</head>
<body>
#get(content)
</body>
</html>页面模板 index.leaf 用 #set("content") 定义内容块，再用 #embed("base") 套上骨架：
#set("content") {
<h1>Acronyms</h1>
#if(acronyms) {
<table>
<thead>
<tr>
<th>Short</th>
<th>Long</th>
</tr>
</thead>
<tbody>
#for(acronym in acronyms) {
<tr>
<td><a href="/acronyms/#(acronym.id)">#(acronym.short)</a></td>
<td>#(acronym.long)</td>
}
</tbody>
</table>
} else {
<h2>There aren't any acronyms yet!</h2>
}
}
#embed("base")这里用到了 Leaf 的三个 tag：#get()、#set()、#embed()。其中 #set() 需要用引号把变量名注册给 Leaf。base.leaf 就是一份可被 index.leaf 复用的模板。
二、引入 Bootstrap
Bootstrap 是一个由 Twitter 建立的开源前端框架，提供了很多易用的组件。它移动端优先，能适配多种屏幕尺寸，并提供一份定义各种样式的 CSS 文件，以及一些提供组件能力的 JS 文件。
为了避免每个页面都重复引入，把这些文件统一加在模板 base.leaf 里，其它页面复用即可。下面是改造后的 base.leaf（来自 Bootstrap 官方模板）：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>#(title) | Acronyms</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href = "/">TIL</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id = "navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item #if(title == "Homepage"){active}">
<a href="/" class="nav-link">Home</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-3">
#get(content)
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>页面模板 index.leaf 也顺势用上 Bootstrap 的表格样式：
#set("content") {
<h1>Acronyms</h1>
#if(acronyms) {
<table class = "table table-bordered table-hover">
<thead class="thead-light">
<tr>
<th>Short</th>
<th>Long</th>
</tr>
</thead>
<tbody>
#for(acronym in acronyms) {
<tr>
<td><a href="/acronyms/#(acronym.id)">#(acronym.short)</a></td>
<td>#(acronym.long)</td>
}
</tbody>
</table>
} else {
<h2>There aren't any acronyms yet!</h2>
}
}
#embed("base")小提示：把通用布局放在
base.leaf 里，每个页面只关心自己的 content，既减少重复代码，又保证整站风格统一。Bootstrap 的 CSS/JS 只引入一次，所有页面都受益。