Будь-який спосіб додати CSS для однієї сторінки / вузла?

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

Зокрема, домашня сторінка мого робочого сайту - це «Панельна сторінка», і вона має купу різних стилів. Зараз CSS просто включений до основного аркуша стилів теми.

Чи є спосіб сказати: "якщо це вузол Foo, то додайте foo.css"? Чи шукаю CSS Injector, що я шукаю?

Мені може бути цікаво узагальнити це до інших вузлів / розділів / тощо, але на даний момент я просто хочу обробити цей один елемент.

Що я закінчив робити.

Я використовую підтему Дзен і виявив, що насправді читає через 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 значеннями, пов'язаними з власним кодом.

Ви можете подивитися модуль Код на вузол . Він також представлений у цій публікації в блозі .

Створіть контекст для своєї сторінки / розділу, а потім використовуйте модуль активів контексту для завантаження CSS та / або javascript для даного контексту.

Контекст:

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

Подумайте про умови як набір правил, які перевіряються під час завантаження сторінки, щоб побачити, який контекст активний. Після цього будь-які реакції, пов'язані з активними контекстами, звільняються.

Контекст Додати активи:

Активність додавання контексту дозволяє вам це зробити. Він має простий користувальницький інтерфейс, який дозволяє вам робити все це без написання коду. Оскільки він використовує ctools, все це також можна експортувати.

Якщо це невелика кількість CSS, можливо, варто розглянути можливість створення ваших CSS-селекторів на основі вузла та включення css у CSS вашої теми? Drupal 7 забезпечує селектор body.page-node-NODEID, а Zen для Drupal 6 забезпечує схожі класи CSS тіла.

Ви можете створити спеціальний модуль і використовувати kuk_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 простіший в установці (бібліотеки не потрібні). Модуль дозволяє диспетчеру вмісту динамічно додавати 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']);
  } 
}

Крім того, замініть "міфему".

Я сподіваюся, що це буде корисно.

Я б взагалі пропустив торкання template.php і просто додав ще один елемент у файл .info вашої теми

Скажіть, що ваша таблиця стилів є css/foo.css.

Ось як виглядатиме ваш файл theme_name.info:

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

Тоді ви отримаєте користь від кешування основними таблицями стилів, і оскільки я припускаю, що це для вашої домашньої сторінки, це мало б сенс.

Крім підходу Drupal, коли вам потрібен лише короткий фрагмент css всередині вашого HTML5 тіла, у вас є атрибут css Scoped. Дивіться https://stackoverflow.com/a/4607092/195812

Це рішення позбавить вас від редагування коду та встановлення більшої кількості модулів

Ви можете надрукувати вузол сторінки у тезі body

<body page-node-26419 ...>

Тоді ви можете обмежитися

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

Це корисно для незначних швидких змін