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


79

Я очищаю свои большие сумасшедшие таблицы стилей (возможно, относящиеся к будущему вопросу), и мне интересно, как лучше добавить пользовательский 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.)



создать page--front.tpl.phpиpage.tpl.php
M Ama D

Ответы:


69

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

В файле 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 значениями, связанными с вашим собственным кодом.


так что для домашней страницы, вы бы использовали if(drupal_is_front_page()) {вместо if(drupal_get_path_alias [etc]?
epersonae

Да, условия полностью зависят от вас. Вы можете просто сделать $vars['#node']->nid == $nidпроверку, если хотите.
Расшифровка

8
Расшифровать, не могу найти ошибку с вашим кодом. Но, надеюсь, вы не возражаете, если я укажу, что, если вы не говорите о конфигурации разрешений в Drupal, ваша роль должна быть именно такой, как вы катаетесь. ;-)
Medden

2
К вашему сведению, я использую Drupal 7 и обнаружил, что мне нужно использовать $vars['elements']['#node']->nidвместо этого в поиске псевдонима. #nodeСудя по varsвсему, в последней версии Drupal 7 нет корня .
Уэс Джонсон

разве не должно быть функции впереди MYTHEME__preprocess_node ($ vars) Я вижу весь код в терминах функций?
pal4life


16

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

Контекст:

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

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

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

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


Я использую Context Add Assets буквально на каждом веб-сайте, который я создаю, - если вы в Context (который движет каждым разделом моих сборок), Add Assets идеально подходит!
Electblake

13

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


это в основном то , что я был делать ... и это почти 200 строк, так что это казалось хорошей идеей , чтобы переместить его в другое место . (да, это, вероятно, должно быть короче. Это может быть отдельный шаг.)
epersonae

С другой стороны, ваш ответ вдохновил меня на чтение template.php в моем (дзенском дочернем) шаблоне, что дало мне окончательный ответ.
epersonae

7

Вы можете создать собственный модуль и использовать 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.


hook_init () запускается при каждой загрузке страницы и часто несколько раз (AHAH), почему бы не использовать hook_preprocess_node () (либо в теме, либо в модуле), который запускается только при визуализации узла?
Расшифровка

Хороший вопрос, не знал, что init был загружен несколько раз.
Camsoft

Расшифруй, я исправил свой пример использования функции препроцессора. Все еще учусь!
Camsoft

Тогда следующий вопрос: зачем использовать arg (1) для nid, когда переменные узла передаются через $ vars :) Что приведет к следующему вопросу о том, как это отличается от моего ответа: p
Decipher

Думаю, мне следовало прочитать документацию по hook_preprocess_node (). Вы совершенно правы. epersonae, предлагаю принять ответ Дешифера.
Camsoft

7

Если критерии, для которых добавление стиля 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");
  }
}

5

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

CSS:

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

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

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

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


3

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


2

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

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

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


2

/ * Пример использования темы 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
}

2

Попробуйте добавить это в ваш файл '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».

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


Последний кусок кода - это то, что мне нужно. И это работает, т. Е. После того, как я удалил таблицы стилей [все] [] = css / front.css из моей theme.info - наверное, я ошибочно предположил, что нам нужно это иметь вместе с таблицами стилей [все] [] = css / styles .css. Я также был обеспокоен тем, что, поскольку я переопределяю page.tpl.php с page - front.tpl.php, он может не работать, но все выглядит хорошо. Это действительно полезно. Спасибо!
Сд1,

Просто чтобы убедиться, что все получают это решение; Убедитесь, что удалили styles.css (по умолчанию) и front.css из вашего файла theme.info. Сбросьте все кэши, и все должно быть хорошо.
Сд1,

1

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

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

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

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

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


И, конечно, вам нужно будет квалифицировать ваши селекторы на основе атрибутов узла, то есть nid, типа узла и т. Д.
Александр Хрипак,

Проблема с этим подходом заключается в том, что он затронет все страницы сайта с добавленной здесь css
pal4life

1

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

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


0

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

<body page-node-26419 ...>

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

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

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


добро пожаловать в ответы Drupal! Этот ответ уже был предоставлен Дэйвом Ридом выше.
Кожо
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.