Блог

Главная - Вопросы по программированию - Добавление CSS на hapi.js это не woking

Добавление CSS на hapi.js это не woking

#javascript #html #css #node.js #hapijs

#javascript #HTML #css #node.js #hapi.js

Вопрос:

Используя инертный плагин, я попытался добавить общую папку, в которой я хранил свои css-файлы, js-файлы. Но в моей папке views я не могу получить к ним доступ. Я использую handlebars. Даже если я сохраню только style.css в папке views, html все равно не сможет получить доступ к этому файлу стиля.

Это моя структура папок:

 app.js
public
   css
     style.css
 views
     home.html
 routes
     user.js

App.js

 const server = hapi.server({
   port: Number(process.argv[2] || 3000),
});
const init = async () => {

   await server.register(vision);
   await server.register(inert);
   server.views({
        engines: {
            html: handlebars
        },
        path: path.join(__dirname, 'views'),
        relativeTo: path.join(__dirname, 'public')

    });

}

Я попытался добавить относительный путь также на сервере следующим образом :

 const server = hapi.server({
   port: Number(process.argv[2] || 3000),
   routes: {
        files: {
            relativeTo: Path.join(__dirname, 'public')
       }
   }
});

Но тщетно.

Home.html

 <html>
<head>
   <title>Login page</title>
   <link rel="stylesheet" href="../css/style.css" />
 </head>
   <body>
        <h2> Welcome </h2>
  </body>
</html>

style.css

 body {
background: #456;
font-family: 'Open Sans', sans-serif;
}

Ответ №1:

Вы должны определить маршрут для обслуживания содержимого вашей общей папки.

Это можно сделать с помощью обработчика каталогов:

 const init = async () => {
    await server.register(vision);
    await server.register(inert);

    server.views(...)

    server.route({
        method: 'GET',
        path: '/public/{param*}',
        handler: {
            directory: {
                path: path.join(__dirname, 'public')
            }
        }
    })
}

Это создаст маршрут, который будет обслуживать любой контент в public каталоге, поэтому ваш css будет доступен через http://localhost:3000/public/css/style.css.

Это означает, что вам не нужно обращаться к таблице стилей по относительному пути и вы можете использовать абсолютный путь в своем home.html:

 <link rel="stylesheet" href="/public/css/style.css" />

Комментарии:

1. это сработало, спасибо. Но что, если вместо того, чтобы поддерживать этот маршрут app.js файл, я хочу сохранить его в папке routes в user.js файл? для этого мне нужно изменить свою html-ссылку на href="../public/css/style.css" ? Я пытался, но это не сработало. Я изменил структуру своих папок. Пожалуйста, взгляните

2. Маршрут, который обслуживает статический контент, в основном, не имеет отношения к вашим файлам шаблонов, фактически routes.files.relativeTo директива только указывает hapi использовать путь, который вы указываете, поэтому при вызове h.view в обработчике маршрута путь будет разрешен из relativeTo , поэтому он полезен только внутри сервера, а не от клиента (например: views). Что вы user.js файл нужен?

3. user.js содержит все мои server.routes т.е. return h.view('home') files . Я экспортировал их для использования на app.js . Ну, я понял это, изменив путь к каталогу на path.join(__dirname, ../'public')