Как я могу включить отдельный файл CSS из ejs, который позаимствован из файла layout.ejs? - PullRequest
Новая
       15

Как я могу включить отдельный файл CSS из ejs, который позаимствован из файла layout.ejs?

1 голос
/ 15 апреля 2019

У меня есть файл layout.ejs, который предоставляет базовый макет каждой страницы, которая у меня есть для моего узла приложения. Это включает в себя некоторые основные CSS-файлы (т.е. начальную загрузку). У меня есть другие файлы ejs, тело которых отображается с использованием этого файла layout.ejs, но я также хочу, чтобы они могли включать свои собственные файлы CSS для некоторых пользовательских стилей.

Я пытался включить CSS непосредственно в другие файлы ejs, но это просто устанавливает файл css в теле html. Я думал об использовании файла javascript, который внедряет файл CSS на стороне клиента, но мне это кажется слишком «хакерским».

В настоящее время мой тестовый макет (тот, который наследуется от layout.ejs) выглядит в основном так: 

<head>
    <link href="../public/styles/index.css" rel="stylesheet" type="text\css">
</head>
<section id="box-section" class="blox-mf route">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="title-box text-center">
            <h3 class="title-a">
              Title2
            </h3>
            <p class="subtitle-a" style="color: #be3131;">
                Subtitle 2
            </p>
            <div class="line-mf"></div>
          </div>
        </div>
      </div>
    </div>
</section>

<script src="/scripts/index.js" crossorigin="anonymous"></script>

Как я уже сказал, все, что у меня есть, это CSS, прикрепленный к телу html, а не к заголовку, так что все сохраняет стиль по умолчанию как файл layout.ejs. Есть ли способ, которым я могу достичь этого, найдя способ получить разные маршруты, чтобы использовать базовые файлы компоновки CSS, но допускают некоторые вариации, используя свои собственные CSS?

1 Ответ

0 голосов
/ 15 апреля 2019

Я нашел способ сделать это.Все, что нужно, это передать переменную в шаблон ejs, которая является массивом URI для ваших CSS-файлов.Затем ejs перебирает массив и создает шаблон с необходимыми CSS-файлами.

Вот код для прохождения через css-файлы: 

myCss.push({
    uri: 'public/styles/index.css'
})
res.render('./home', {
    styles: myCss,
});

А затем в шаблоне все, что вам нужно сделать, это: 

<% for(var i=0; i < styles.length; i++) { %>
    <link href="<%= styles[i].uri %>" rel="stylesheet"  type="text/css">
<% } %>

Теперь вселисты, необходимые для маршрута, могут быть переданы.Немного рефакторинга кода необходимо для того, чтобы заменить необходимость добавления ссылок вручную, но вы можете понять суть этого.

РЕДАКТИРОВАТЬ: для настройки статических файлов требуется некоторая настройка.Вы можете сделать это, включив это в вашу экспресс-заявку: 

app.use(express.static(__dirname + '/public'));
...