Блог

Главная - Вопросы по программированию - атрибут href в ссылке на таблицу стилей не работает в узле

атрибут href в ссылке на таблицу стилей не работает в узле

#html #node.js #express

#HTML #node.js #выразить

Вопрос:

Я попытался запустить свой веб-сайт двумя способами. 1) С помощью node
2) Без использования node (просто index.html на моем компьютере) Однако результаты отличаются с точки зрения связывания таблицы стилей. Без node таблица стилей в теге style могла бы быть связана как обычно. Однако, при использовании node в качестве сервера, таблица стилей не может быть связана.

Вот структура моего кода.

 /app
  /server.js
  /views
    /statics
        /index.html
    /partials
  /public
    /javascript
    /css
        /main.css
    /images

вот index.html тег head

 <link rel="stylesheet" type="text/css" media="screen" href="../../public/css/main.css">

server.js

 const express = require('express')
const app = express()
const path = require('path')
// no need to use app.use(app.router) because of that update
// function signature express.static(root, [options])

app.use(express.static('public'));

// mount root to views/statics
app.use('/', express.static('views/statics'));

const PORT = process.env.PORT || 3000;

app.listen(PORT,() => {
    console.log(`Server is listening on port ${PORT}`)
  });

Ответ №1:

Похоже, что вы не указали путь, по которому ваши ресурсы должны быть доступны в разделе с

 app.use(express.static('public'));

Согласно документам, в таком случае подпапки из общей папки будут обслуживаться по корневому пути.

В общем случае вам следует избегать предоставления ресурсов по относительному пути. В вашем случае href="/css/main.css" должно сработать. Узел действует как сервер, и вы определяете пути, по которым данные ресурсы доступны в server.js . Вы не можете получить к ним доступ по пути структуры каталогов вашей файловой системы

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

1. Большое вам спасибо. Вы упомянули об избежании использования относительного пути, тогда каков абсолютный путь в этом случае? Используя __dirname?

2. использование __dirname немного помогает, когда вам нужно реструктурировать свой проект, но что я улучшаю, так это использование href =»../ ../some / path. Это может сработать, но если вы используете относительные пути подобным образом, вам будет сложно провести рефакторинг структуры вашего сайта в будущем, когда проект станет больше.

3. Итак, каков абсолютный путь в этом случае? Обычно абсолютный путь выглядит примерно example.com нет?

Ответ №2:

Сделайте общедоступный каталог доступным, указав его как каталог ресурсов. На вашем сервере добавьте приведенный ниже код:

 app.use('/assets', express.static(__dirname '/views/public'));

Тогда к статическим файлам можно получить доступ как:

 <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/main.css">