Question

base.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>

index.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>&nbsp;
<span class="label label-primary">Here are your Categories:</span>&nbsp;


</div>
</div>

我想要块继承

Answer 1

EJS并不专门支持块，但可以通过包含页眉和页脚来实现布局，如下所示：
<%- include('header') -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer') -%>

https://github.com/mde/ejs#layouts

您可以将base.ejs拆分为两个文件，页眉和页脚，如下所示：

<强> header.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>

<强> footer.ejs

<script type="text/javascript">

$(document).ready(function(){

});
</script>

</body>
</html>

Answer 2

有人使用块继承功能（https://github.com/mafintosh/pejs）

制作了EJS

直接从文档中获取（2018年1月1日检索）：

使用块，它很容易实现模板继承。只是声明带有一些锚定块的base.html：
<body>
  Hello i am base
  <%{{ content }}%>
</body>
然后呈现child.html
的base.html
<%{ './base.html' }%>
<%{ content %>
  i am inserted in base
<%} %>
要渲染示例，只需渲染child.html
pejs.render('./child.html', function(err, result) {
  console.log(result);
});

看起来很不错。我将在我自己的项目中尝试这个。

Answer 3

您可以将ejs-locals或ejs-mate引擎用于ejs

如何在EJS模板中使用块继承

3 个答案: