未显示单独路线文件的布局

时间:2019-10-04 16:11:32

标签: node.js express handlebars.js

我有一个使用把手的快速应用程序。我有一个路由文件(index.js-> localhost:3000 /)用于提供一些视图。但是后来我又创建了另一个路由文件(agency.js-> localhost:3000 / agency /),以便在一个文件中没有几百行代码。

问题是,当我加载/ agency端点时,它仅显示把手文件。它不使用app.js中设置的默认布局。

当我加载localhost:3000 /时,它显示布局没有问题。

1 个答案:

答案 0 :(得分:0)

您应该真正显示您拥有的代码,因为您的设置将与我的不同,因此,如果我给您提供我的代码,则会很复杂,因为我没有使用默认值。

您有2个问题。

  1. 您要使用其他路由文件

  2. 布局文件有问题

解决方案1:使用app.use

index.js文件

app.use('/agency', require(`agency`)) // make route use the route file in root/agency.js

agency.js文件

app.get('/', (req, res) => { // this is using your /agency and its only / because its using /agency. If you want /agency/test then you use /test
    res.render(`viewHandlebarsFile`) // calling your handlebar view file
})

车把的主要布局文件(默认设置):确保将其放在body标签中,它将调用车把的视图文件

{{{{body}}}

工作原理:您的index.js文件将/ agency路由指向您的路由文件agency.js

您的agency.js获取车把视图文件。

您的车把视图文件仅是主体。您的默认布局文件将使用{{{body}}}标签,该主体将调用您的车把视图文件。

就像我说的,在不知道如何设置默认值的情况下,没有代码很难帮助您。我为您提供了可以与您的设置配合使用的关键代码。祝你好运。

下面,如果您遇到问题,我会为您提供骨架布局。

位于您根文件夹中的app.js文件

const express = require('express')
const app = express()
const path = require('path')
const exphbs = require('express-handlebars');

app.set('views', path.join(__dirname, 'views'))
app.engine('hbs', exphbs({defaultLayout: 'main', extname: '.hbs'})) // change extension to .hbs
app.set('view engine', 'hbs')

app.set('port', (process.env.PORT || 3000))

app.get('/', (req, res) => {
    res.render('home', {
        content: 'This is some content', // for dynamic content, in view use {{content}} to call this data
        published: false
    })
})

app.use('/agency', require(`./agency`)) 

app.listen(app.get('port'), () => {
    console.log('Server started on port' + app.get('port'))
})

位于根文件夹中的agency.js文件

const express = require('express')
const exphbs = require('express-handlebars')
const app = module.exports = express()

app.get('/', (req, res) => { // this is using your /agency and its only / because its using /agency. If you want /agency/test then you use /test
    res.render(`view2`) // calling your handlebar view file
})

在根目录下的views文件夹中

home.hbs

<h1>Welcome Home Page</h1>

位于您的views文件夹中的view2.hbs

<h1>View 2 page</h1>

位于视图文件夹内的内部布局文件夹

main.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Handlebars Express</title>
</head>
<body>
    {{{body}}}
</body>
</html>