搜索
  • Node.js中如何使用Handlebars创建高级模板
  • 发布于 2个月前
  • 467 热度
    0 评论
在这一部分我们将学习可复用组件。在前面的章节我们给每一个页面的header和footer创建了相同的组件。这里的重复性工作就可以通过高级模板来简化。也就是说我们创建一个组件，并在需要的地方反复使用。
Handlebars引入部分（Partials）的概念
Partials是可被其他模板调用的handlebar文件。Partials是一个被广泛应用的模板类概念，所以不仅限于Handlebars。想要构建可以复用的模板，可以将它们单独放在同一个文件夹内（Partial），然后在不同的模板中使用。可以将Partial理解为模块化模板的一种简单技术。

可以通过以下步骤创建partial：
1.初始化npm → npm init -y
2.安装必要的包、Express以及hbs → npm i express hbs
3.创建文件夹模板
4.在文件夹模板内部创建另外两个文件夹：partials和views
5.创建文件app.js

文件结构类似
让我们创建两个partial文件：header.hbs和footer.hbs。同时也创建两个视图：index.hbs和about.hbs。

index.hbs
<html lang="en">  
    <head>   
        <title>Advanced Templating</title>  
    </head>  
    <body>    
        {{>header}} <!--包含header组件-->
        <p>I'm a savior</p>    
        {{>footer}} <!-- 包含footer组件-->
    </body>
</html>
about.hbs
<html lang="en">  
    <head>    
        <title>Advanced Templating -- About</title> 
    </head>
    <body>   
        {{>header}}   
        <p>Handlebars</p>    
        {{>footer}} 
    </body>
</html>
header.hbs
<header>  
    <h1>Advanced Templating</h1> 
    <h3>{{title}}</h3><!--服务器传来的动态数据-->
    <a href="/">Home</a> 
    <a href="/about">About</a>
</header>
footer.hbs
<footer>  
    <p>Created by {{name}}</p> <!--name -> 动态数据 -->
</footer>
app.js
const express = require("express");
const hbs = require("hbs");
const path = require("path");
const app = express();
app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "/templates/views"));
hbs.registerPartials(path.join(__dirname, "/templates/partials"));
app.get("/", (req, res) => {  
    res.render("index", {    
        title: "Home",    
        name: "Arash Arora",  
    });
});
app.get("/about", (req, res) => {  
    res.render("about", {    
        title: "About",    
        name: "Arash Arora",  
    });
});
app.listen(3000, () => {  
    console.log("Listening on port 3000");
});
这里基本和在Express中渲染动态数据章节类似，除了使用partial的时候我们需要注册partials。

如何注册partials
hbs.registerPartials(path_to_partials)
由于我们在模板文件夹中创建了partials目录，这里是 partials 的路径：
hbs.registerPartials(path.join(__dirname, "/templates/partials"));

用户评论
可能感兴趣的话题