Tek bir sayfa / düğüm için CSS eklemenin bir yolu var mı?

Büyük çılgın stil sayfalarımı temizleyeceğim (muhtemelen gelecekteki bir soruyla ilgili) ve belirli bir düğüme veya sayfaya özel CSS eklemenin en iyi yolunu düşünüyorum.

Özellikle, çalışma sitemin ana sayfası bir Panel Sayfasıdır ve farklı stillere sahiptir. Şu anda CSS sadece ana tema stil sayfasına dahil edilmiştir.

"Bu, Foo düğümü ise, o zaman foo.css ekleyin" demenin bir yolu var mı? Aradığım CSS Enjektör mü ?

Ben belki vb diğer düğümler / bölümlere / bu genelleme ilgi, ama şu anda ben sadece bu bir öğe işlemek istiyorum.

Yaptığım şeyi yaptım.

Bir Zen alt öğesi kullanıyorum ve template.php yoluyla okurken, koşullu stil sayfalarını dahil etmek için bazı kodların yorumlandığını keşfettim. Aşağıdaki kod tam olarak ihtiyacım olanı yaptı:

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

(Bir hisse senedi Zen template.php dosyasındaki Satır 80, FWIW.)

Bu kodla yapacağım türden bir şey, ama bunun nedeni sadece yuvarlamam.

Template.php'de şöyle bir şey isteyeceksiniz:

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'yu kendi kodunuzla ilgili değerlerle değiştirin.

Düğüm başına kod modülüne bir göz atabilirsiniz . Aynı zamanda bu blog yazısında yer alıyor .

Sayfanız / bölümünüz için bir Bağlam oluşturun ve verilen bağlam için CSS ve / veya javascript'i yüklemek için Bağlam Varlıkları modülünü kullanın.

Bağlam:

Bağlam, sitenizin farklı bölümleri için bağlamsal koşulları ve reaksiyonları yönetmenizi sağlar. Her bağlamı sitenizin bir "bölümünü" temsil ediyor olarak düşünebilirsiniz. Her içerik için, bu içeriği aktif olmak üzere tetikleyen koşulları seçebilir ve Drupal'ın bu aktif içeriğe tepki vermesi gereken farklı yönlerini seçebilirsiniz.

Hangi içeriğin aktif olduğunu görmek için koşulları sayfa yükleme sırasında kontrol edilen bir kurallar kümesi olarak düşünün. Aktif bağlamlarla ilişkili olan herhangi bir reaksiyon daha sonra ateşlenir.

Bağlam Varlıkları Ekleme:

Bağlam ekleme varlıkları bunu yapmanıza izin verir. Bunları herhangi bir kod yazmadan yapabilmeniz için kullanıcı arayüzünü kullanmak kolaydır. Ctools kullandığı için bunların hepsi de ihraç edilebilir.

Küçük bir CSS tutarıysa, CSS seçicinizi düğüme göre oluşturup css'inizin CSS'sine dahil etmeyi düşünebilirsiniz. Drupal 7, body.page-node-NODEID seçicisini sağlar ve Drupal 6 için Zen, benzer vücut CSS sınıfları sağlar.

Özel bir modül oluşturabilir ve stilel sayfaları düğüm kimliğine göre seçmeli olarak yüklemek için hook_preprocess_node () işlevini kullanabilirsiniz.

İşte bir örnek:

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'ı modülünüzün adıyla değiştirin ve MYTHEME'yi css dosyasını içeren temanın adıyla değiştirin.

Bir CSS stili ekleme kriterleri bir düğümün bazı özelliklerine bağlıysa, uygulayacağım MYTHEME_preprocess_node(&$variables); işleve iletilen değerlerden biri $variables['node'](olmadığını fark etmek $variables['#node']).

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

Kriterler herhangi bir düğüm özelliğine bağlı değilse, uygulayacağım MYTHEME_preprocess_page(&$variables); $variables['node']Gösterilen sayfa bir düğüm sayfasıysa, bir düğüm nesnesi içerir. Drupal 6'da işlem fonksiyonu da alır $variables['is_front'], ancak Drupal 7'de aynı değişken geçilmez; Sayfanın ön sayfa olup olmadığını bilmeniz gerekiyorsa, kullanmanız gerekir drupal_is_front_page().

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

Yönetici tabanlı bir şekilde yapmak için CSS modülüne bakarım . Size ekleyebilirsiniz alanı ekler CSS ile node/addve node/editsayfalara.

CSS:

CSS modülü, yeterli izinlere ve etkin düğümlere sahip kullanıcılar için, düğüm oluşturma sayfasındaki bir CSS alanını ekler.

Kullanıcılar CSS düğüm alanına CSS kuralları ekleyebilir ve bu kurallar düğüm görüntüleme üzerinde ayrıştırılır.

Bu şekilde CSS deneyimli kullanıcıları, düğüm içerikleri için karmaşık CSS tabanlı tasarım oluşturabilir.

Önemli: CSS düzenleme izinlerinin yalnızca güvenilir kullanıcılara (yöneticiler) verilmesi gerektiğini unutmayın. Bu izne sahip kötü niyetli kullanıcılar, site tasarımınızı bozabilir ve ayrıca güvenlik sorunları (XSS) sunabilir.

CodePerNode harika, ancak CSS Enjektörünün kurulumu daha kolaydır (kitaplığa gerek yoktur). Modül, içerik yöneticisinin PHP koduna veya INFO dosyalarına hiç dokunmadan belirli sayfalara dinamik olarak CSS eklemesini sağlar. 15777 kurulumları yanlış olamaz - bu, modülün çalıştığı sosyal bir kanıt. CSS ayrıca normal önbellekleme sistemi ile önbelleğe alınır.

Zaten Paneller kullandığınızdan, ana panelinizin her bölgesi için CSS'nizi Panel Stili olarak eklemeniz daha kolay olabilir. Özel biçimlendirmeyi burada tanımlayabilir ve sitenizde yeniden kullanabilirsiniz.

Ayrıca, ana sayfanız için sayfa yöneticisi değişken kuralının Genel bölümüne de gidebilirsiniz. Burada sadece mevcut panel için CSS kimlikleri ve kuralları eklemek için bir bölüm var.

Not: Bunların hepsi D7’dedir, bu nedenle bu yaklaşım Paneller tarafından önceki sürümlerde olduğundan daha iyi destekleniyor olabilir.

/ * İçerik türüne göre css eklemek için bartik temasını kullanan bir örnek * /

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
}

Bunu 'template.php' dosyanıza eklemeyi deneyin:

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

'Mytheme'i' tema dizininizin adı ve '/css/front.css' yerine CSS dosyanızın bulunduğu yolla değiştirin.

'Front.css' dosyasını diğer sayfalardan kaldırmak için 'template.php' dizinine eklemeyi deneyin:

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

Yine, 'mit'i' tema dizininizin adıyla değiştirin.

'Styles.css' dosyasını ön sayfadan kaldırmanız gerekirse, bu iki kodu birleştirmeniz yeterlidir.

Ön sayfada 'styles.css' olmadan 'front.css' ve diğer tüm sayfalarda 'front.css' olmadan 'style.css' gerektiğini varsayalım. Kod şöyle görünecek:

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']);
  } 
}

Ayrıca, 'mit'i değiştirin.

Umuyorum ki faydalı olacaktır.

Template.php dosyasına dokunmayı tamamen atlar ve temanızın .info dosyasına başka bir öğe eklerdim

Stil sayfanızın içinde olduğunu söyleyin css/foo.css.

Bu, theme_name.info dosyanızın şöyle görünmesini sağlar:

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

O zaman ana stil sayfalarıyla önbelleğe alınmasından faydalanırsınız ve bunun ana sayfanız için olduğunu varsaydığımdan, mantıklı olacağını düşünüyorum.

Drupal yaklaşımının dışında, HTML5'inizin gövdesinde sadece kısa bir css parçasına ihtiyacınız olduğunda, css kapsamı Attribute'e sahipsiniz. Bkz. Https://stackoverflow.com/a/4607092/195812

Bu çözüm kod düzenlemekten ve daha fazla modül kurmaktan tasarruf etmenizi sağlar

Gövde etiketinde sayfa düğümünü yazdırabilirsiniz

<body page-node-26419 ...>

Sonra kısıtlayabilirsiniz

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

Bu küçük hızlı değişiklikler için kullanışlıdır