基地.ejs：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Diary</title>
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script src="javascripts/jquery.js" ></script>
<script src="javascripts/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</body>
索引.ejs：
<div class="container">
<!-- Button trigger modal -->
<h1>Welcome to Your Diary</h1>
<div>
<span class="label label-default">What would you like to do? </span>
<span class="label label-primary">Here are your Categories:</span>
</div>
</div>
我想要块继承
EJS 并不特别支持块，但可以通过包含页眉和页脚来实现布局，如下所示：
Run Code Online (Sandbox Code Playgroud)<%- include('header') -%> <h1> Title </h1> <p> My page </p> <%- include('footer') -%>
https://github.com/mde/ejs#layouts
您可以将 base.ejs 拆分为两个文件，页眉和页脚，如下所示：
头文件.ejs
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Diary</title>
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script src="javascripts/jquery.js" ></script>
<script src="javascripts/bootstrap.min.js"></script>
</head>
<body>
页脚.ejs
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</body>
</html>
有人制作了具有块继承能力的EJS（ https://github.com/mafintosh/pejs）
直接来自文档（检索于 2018 年 1 月 1 日）：
使用块很容易实现模板继承。只需
base.html用一些锚定块声明一个：Run Code Online (Sandbox Code Playgroud)<body> Hello i am base <%{{ content }}%> </body>然后一个
child.html渲染base.htmlRun Code Online (Sandbox Code Playgroud)<%{ './base.html' }%> <%{ content %> i am inserted in base <%} %>渲染示例只需渲染
child.htmlRun Code Online (Sandbox Code Playgroud)pejs.render('./child.html', function(err, result) { console.log(result); });
看起来不错。我将在我自己的项目中尝试这个。
| 归档时间： |
|
| 查看次数： |
12155 次 |
| 最近记录： |