Jade: измените <head> из любого места, кроме главной страницы

Обновить:

Я также разместил этот вопрос в хранилище Jade GitHub. Я опускаю это здесь также для будущей (круговой) ссылки: https://github.com/jadejs/jade/issues/1943

Исходное сообщение:

В приложении по умолчанию node + express + jade я пытаюсь создать некоторые часто используемые компоненты (menu, footer...), которые я могу включить в некоторые страницы. Я застрял при попытке добавить ссылки на файлы.css или.js из блока или включенного файла. Я хочу сделать это, потому что я не хочу включать все стили и сценарии, если они мне не нужны.

Структура папок выглядит примерно так:

  • корень
    • общественности
      • JavaScripts
        • main.js
        • menu.js
      • таблицы стилей
        • main.css
        • menu.css
    • Просмотры
      • общий
        • layout.jade
        • menu.jade
        • footer.jade
      • index.jade

Файл layout.jade:

doctype html
html
  head
    title= title
    link(rel="stylesheet", href="stylesheets/main.css")
    script(src="javascripts/main.js")
  body
    block content

Файл index.jade:

extends shared/layout

block content
  h1= title
  p Welcome to #{title}

В menu.jade есть некоторый код, которому нужны файлы menu.css и menu.js.

Теперь мне нужен способ добавить эти файлы в <head> страницы, только когда я использую файл menu.jade.

Я начал использовать Jade несколько часов назад, поэтому вполне возможно, что я что-то пропустил в документации.

Спасибо!

Источник

1 ответ

Решение

Вы можете сделать это с JQuery в вашем menu.js вот так:

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='stylesheets/menu.css' type='text/css'>");

Я бы предупредил вас об этой практике, однако. Одной из альтернатив может быть этап сборки, который объединяет все ваши CSS-файлы вместе и обслуживает весь ваш стиль в одном CSS-файле. LESS и cssmin являются хорошими вариантами здесь, и у них есть хорошие модули, чтобы автоматизировать это для вас в grunt или gulp, в зависимости от того, что вы используете.

Вы упомянули, что не хотите включать все стили, если они вам не нужны, но я бы посоветовал загружать в веб-браузер много небольших CSS-файлов медленнее, чем загружать один большой, особенно если вы обслуживаете эти файлы через веб-сервер, такой как nginx, который использует gzip, или если вы обслуживаете свои статические файлы через CDN, такой как CloudFront.

Источник
Другие вопросы по тегам