Любой способ добавить CSS для одной страницы / узла?

Я очищаю свои большие сумасшедшие таблицы стилей (возможно, относящиеся к будущему вопросу), и мне интересно, как лучше добавить пользовательский CSS для определенного узла или страницы.

В частности, домашняя страница моего рабочего сайта - это страница Panel, и у нее много разных стилей. Прямо сейчас CSS просто включен в основную таблицу стилей темы.

Есть ли способ сказать: «если это узел Foo, то добавьте foo.css»? Является ли CSS Injector тем, что я ищу?

Мне может быть интересно обобщить это на другие узлы / разделы / и т. Д., Но на данный момент я просто хочу обработать этот один элемент.

Что я в итоге делал.

Я использую подтему Zen и обнаружил, что при чтении файла template.php есть закомментированный код для включения таблиц условных стилей. Код ниже сделал именно то, что мне нужно:

if (drupal_is_front_page()) {
  drupal_add_css(path_to_theme() . "/foo.css", 'theme','all'); 
}

(Строка 80 в стандартном файле Zen template.php, FWIW.)

Это то, что я хотел бы сделать с помощью кода, но это потому, что я так катался.

В файле template.php вы захотите что-то вроде:

function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css");
  }
}

Замените foo значениями, связанными с вашим собственным кодом.

Вы могли бы взглянуть на модуль « Код на узел ». Это также показано в этом сообщении в блоге .

Создайте контекст для вашей страницы / раздела, а затем используйте модуль Context Assets для загрузки CSS и / или javascript для этого заданного контекста.

Контекст:

Контекст позволяет вам управлять контекстными условиями и реакциями для разных частей вашего сайта. Вы можете думать о каждом контексте как о представлении «раздела» вашего сайта. Для каждого контекста вы можете выбрать условия, которые активируют этот контекст, и выбрать различные аспекты Drupal, которые должны реагировать на этот активный контекст.

Думайте об условиях как о наборе правил, которые проверяются во время загрузки страницы, чтобы увидеть, какой контекст активен. Любые реакции, связанные с активным контекстом, затем запускаются.

Контекст Добавить активы:

Активы добавления контекста позволяют вам сделать это. Он имеет простой в использовании интерфейс, позволяющий вам делать все это без написания кода. Поскольку он использует ctools, все это также можно экспортировать.

Если это небольшое количество CSS, возможно, стоит подумать о создании CSS-селекторов на основе узла и включении CSS в CSS вашей темы? Drupal 7 предоставляет селектор body.page-node-NODEID, а Zen для Drupal 6 предоставляет аналогичные классы CSS для тела.

Вы можете создать собственный модуль и использовать hook_preprocess_node () для выборочной загрузки таблиц стилей на основе идентификатора узла.

Вот пример:

function MYMODULE_preprocess_node($vars) {
  $nid = 3;
  if (arg(0) == 'node' && is_numeric(arg(1)) && arg(1) == $nid) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Замените MYMODULE на имя вашего модуля и замените MYTHEME на имя темы, содержащей файл css.

Если критерии, для которых добавление стиля CSS зависит от некоторых свойств узла, я бы реализовал MYTHEME_preprocess_node(&$variables); одно из значений, переданных в функцию - $variables['node'](заметить, что это не так $variables['#node']).

MYTHEME_preprocess_node(&$variables) {
  if ($variables['node']->nid == 3) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Если критерии не зависят от каких-либо свойств узла, то я бы реализовал MYTHEME_preprocess_page(&$variables); $variables['node']содержит объект узла, если отображаемая страница является страницей узла. В Drupal 6 функция процесса также получает $variables['is_front'], но в Drupal 7 эта же переменная не передается; если вам нужно знать, является ли страница первой страницей, вам нужно использовать drupal_is_front_page().

MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Для способа администрирования я бы посмотрел на модуль CSS . Это добавляет поле , где вы можете добавить CSS к node/addи node/editстраницам.

CSS:

Модуль CSS добавляет для пользователей с достаточными разрешениями и включенными узлами поле CSS на странице создания узла.

Пользователи могут вставить правила CSS в поле узла CSS, и эти правила будут проанализированы при просмотре узла.

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

Важно: обратите внимание, что разрешения на редактирование CSS должны предоставляться только доверенным пользователям (администраторам). Злоумышленники, имеющие такое разрешение, могут нарушить дизайн вашего сайта, а также вызвать проблемы с безопасностью (XSS).

CodePerNode хорош , но CSS Injector проще в установке (библиотеки не нужны). Модуль позволяет менеджеру контента динамически добавлять CSS на определенные страницы, не затрагивая PHP-код или файлы INFO вообще. 15777 установок не могут быть ошибочными - это социальное доказательство того, что этот модуль работает. CSS также кэшируется с помощью обычной системы кэширования.

Поскольку вы уже используете панели, может быть проще просто добавить свой CSS в качестве стиля панели для каждой области панели домашней страницы. Вы можете определить пользовательскую разметку и использовать ее на своем сайте.

Вы также можете просто перейти в раздел «Общие» правила варианта менеджера страниц для своей домашней страницы. Здесь есть раздел для добавления идентификаторов CSS и правил только для текущей панели.

Примечание: это все в D7, поэтому может оказаться, что этот подход лучше поддерживается панелями, чем в предыдущих версиях.

/ * Пример использования темы bartik для добавления CSS в зависимости от типа контента * /

function bartik_preprocess_node(&$variables) {
if(!empty($variables['node'])) {
    if($variables['node']->type == 'my_custom_content_type')
    {
      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   
    }
  }
  // Some other code here
}

Попробуйте добавить это в ваш файл 'template.php':

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
}

Замените «mytheme» именем вашей директории темы, а «/css/front.css» - путем, где находится ваш файл CSS.

Чтобы удалить файл «front.css» с других страниц, попробуйте добавить в «template.php»:

function hook_css_alter(&$css) {
  if (!drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  }
}

Снова замените «mytheme» именем вашей директории темы.

Если вам нужно удалить файл styles.css с первой страницы, просто объедините эти два кода.

Предположим, вам нужен 'front.css' без 'styles.css' на первой странице и 'style.css' без 'front.css' на всех других страницах. Код будет выглядеть примерно так:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
  else {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
  }
}

function hook_css_alter(&$css) {
  if (drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
  }
  else {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  } 
}

Также замените «mytheme».

Я надеюсь, что это будет полезно.

Я бы вообще пропустил прикосновение к template.php и просто добавил бы еще один элемент в файл .info вашей темы.

Скажите, что ваша таблица стилей в css/foo.css.

Вот как будет выглядеть ваш файл theme_name.info:

name = Theme Name
...
stylesheets[all][] = css/foo.css

Тогда вы получите выгоду от кэширования с основными таблицами стилей, и, поскольку я предполагаю, что это для вашей домашней страницы, это будет иметь смысл.

Помимо подхода Drupal, когда вам нужен только небольшой фрагмент CSS внутри вашего тела HTML5, у вас есть атрибут CSS. См. Https://stackoverflow.com/a/4607092/195812

Это решение избавит вас от редактирования кода и установки дополнительных модулей.

Вы можете распечатать узел страницы в теге body

<body page-node-26419 ...>

Тогда вы можете ограничить

body.page-node-26419 {
    background: red
}

Это полезно для небольших быстрых изменений