我一般都不熟悉网站内容,我无法弄清楚如何在使用把手时创建部分内容。
我正在尝试为我的导航栏使用局部文件,因此不必将其复制到每个车把文件中,并且在进行任何更改后都无需更改所有文件。我在网上看到的大多数地方都在使用快递。当我查看车把指南时,部分创建包括:
Handlebars.registerPartial(“ myPartial”,“ {{name}}”);
我不知道什么是{{name}},我尝试包含{{UserType}},但是它只会在页面顶部显示Admin,而不会在导航栏上显示部分内容。
使用Handlebars.registerPartial时,我知道第一个参数是部分的名称。我已经在同一views文件夹中创建了该文件,并在partials文件夹中创建了它,以防万一。我不明白第二个参数应该是什么,如果我将其保留为空白,则会引发错误“错误:尝试将名为“ navBar”的部分注册为未定义”。
非常感谢任何帮助,谢谢。
以下是重要文件:index.js
#!/usr/bin / env node
//Routes File
'use strict'
/* MODULE IMPORTS */
const Koa = require('koa')
const Router = require('koa-router')
const views = require('koa-views')
const staticDir = require('koa-static')
const bodyParser = require('koa-bodyparser')
const session = require('koa-session')
const path = require('path')
const Handlebars = require('handlebars')
Handlebars.registerPartial('navBar', ???)
const app = new Koa()
const router = new Router()
/* CONFIGURING THE MIDDLEWARE */
app.keys = ['darkSecret']
app.use(staticDir('public'))
app.use(bodyParser())
app.use(session(app))
app.use(views(`${__dirname}/views`, { extension: 'handlebars' }, { map: { handlebars: 'handlebars' } }))
const home = require('./routes/home.js')
const user = require('./routes/user.js')
const restaurant = require('./routes/restaurant.js')
const review = require('./routes/review.js')
const defaultPort = 8080
const port = process.env.PORT || defaultPort
/*Session Data
ctx.session.authorised
ctx.session.user
ctx.session.usertype
*/
app.use(home.routes())
app.use(user.routes())
app.use(restaurant.routes())
app.use(review.routes())
Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
if (arg1 === arg2) {
return options.fn(this)
} else {
return options.inverse(this)
}
})
app.use(router.routes())
module.exports = app.listen(port, async() => console.log(`listening on port ${port}`))
navBar.handlebars
<div class="navBar">
<a name="NavbarHome" href="http://localhost:8080/">Home</a>
{{#if Authorised}}
{{#ifEquals UserType "Admin"}}
<a name='NavbarAddRestaurant' href="http://localhost:8080/addRestaurant">Add Restaurant</a>
<a name='NavbarPendingReviews' href="http://localhost:8080/pendingReviews">Pending Reviews</a>
{{/ifEquals}}
{{#ifEquals UserType "Customer"}}
<a name='NavbarCustomer' href="#Customer">Customer</a>
{{/ifEquals}}
<a name="NavbarLogout" href="http://localhost:8080/logout">Logout</a>
{{else}}
<a name="NavbarLogin" href="http://localhost:8080/login">Login</a>
<a name="NavbarRegister" class="active" href="http://localhost:8080/register">Register</a>
{{/if}}
</div>
register.handlebars
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create an Account</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
{{> navBar}}
<h1>Create an Account</h1>
</body>
</html>
我找到了这个站点,它指示了如何正确设置部分站点。
https://blog.fossasia.org/using-partials-in-handlebars-and-reusing-code/