Question

我有一个问题是使用app.css和default.html将我的hapijs文件关联到我的handlebars.js视图。我使用 Cloud9 进行托管。

这是我的应用结构：

root/
   client/
      config/
         route.js
      css/
         app.css
      view/
         layout/
            default.html
         index.html
server.js

我的server.js

'use strict';

const Hapi      = require('hapi');
const Vision    = require('vision');
const Inert     = require('inert');
const Path      = require('path');
const Routes    = require('./client/config/route')

const server = new Hapi.Server();

server.connection({
    host: process.env.IP || '0.0.0.0',
    port: process.env.PORT || 3000
});

server.register([Vision, Inert], (err) => {
    if (err) {
        throw err;
    }

    server.views({
        engines: {
            html: require('handlebars')
        },
        relativeTo: Path.join(__dirname, 'client'),
        path: 'views',
        layoutPath: 'views/layouts',
        layout: 'default', // true
        partialsPath: 'views/partials'
    });

    server.route(Routes);
});

server.start(() => {
    console.log('Server started at: ' + server.info.uri);
});

我的route.js：

const Path  = require('path');

const routes = [
    {
        method: 'GET',
        path: '/{param*}',
        handler: {
            directory: {
                path: Path.join(__dirname, 'client'),
                listing: false,
                index: false
            }
        }
    },
    {
        method: 'GET',
        path: '/',
        handler: (req, rep) => {

            let data = { };                
            rep.view('index', data);
        }
    }
];

module.exports = routes;

我的default.html：

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Title</title>
        <link rel="stylesheet" href="../../css/app.css" />
    </head>
    <body>
        {{{content}}}
    </body>
</html>

我的index.html：

<p id="paragraph"><p>

问题是我的app.css无法加载。我已经关注了this advice和this one，但它仍然不起作用，我不知道下一步要检查什么。

Answer 1

您可以编写单独的路径来提供资源文件

如果在css文件夹中有js和resources文件夹，那么

server.route({
path: "/resources/{path*}",
method: "GET",
handler: {
    directory: {
        path: "./resources",
        listing: false,
        index: false
    }
}});

此路由将为您提供静态内容，然后您可以在html文件中添加这些文件。

<link rel="stylesheet" href="resources/css/main.css" />

更多参考检查 http://jaskokoyn.com/2014/07/28/views-node-js-tutorial-beginners/

Answer 2

试试这个tap

Answer 3

正如Gene Diaz告诉你的那样：

将此权利放在default.html

的头部

<link rel="stylesheet" type="text/css" link="your_file_name.css"/>

Hapi.js视图没有加载css文件

3 个答案: