Adakah cara untuk menambahkan CSS untuk satu halaman / simpul?


79

Saya sedang membersihkan style sheet besar saya yang gila (mungkin berhubungan dengan pertanyaan di masa depan) dan saya bertanya-tanya cara terbaik untuk menambahkan CSS khusus ke node atau halaman tertentu.

Secara khusus, beranda situs kerja saya adalah Halaman Panel dan memiliki banyak gaya berbeda. Saat ini CSS hanya disertakan dengan lembar gaya tema utama.

Apakah ada cara untuk mengatakan, "jika ini simpul Foo, lalu tambahkan foo.css"? Apakah CSS Injector yang saya cari?

Saya mungkin tertarik untuk menggeneralisasi ini ke node lain / bagian / etc, tetapi saat ini saya hanya ingin menangani item yang satu ini.

Apa yang akhirnya saya lakukan.

Saya menggunakan subtitle Zen, dan ternyata benar-benar membaca template.php bahwa ada beberapa kode yang dikomentari untuk menyertakan style sheet bersyarat. Kode di bawah ini melakukan apa yang saya butuhkan:

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

(Baris 80 di file stok template.php Zen, FWIW.)



buat page--front.tpl.phpdanpage.tpl.php
M ama D

Jawaban:


69

Ini adalah jenis hal yang akan saya lakukan dengan kode, tetapi itu karena itulah cara saya melakukan roll.

Di template.php Anda akan menginginkan sesuatu seperti:

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");
  }
}

Ganti foo dengan nilai yang terkait dengan kode Anda sendiri.


jadi untuk halaman rumah, yang akan Anda gunakan if(drupal_is_front_page()) {bukan if(drupal_get_path_alias [etc]?
epersonae

Ya, kondisinya sepenuhnya terserah Anda. Anda bisa melakukan $vars['#node']->nid == $nidpemeriksaan jika Anda mau.
Menguraikan

8
Menguraikan, tidak dapat menemukan kesalahan dengan kode Anda. Tetapi harap Anda tidak keberatan saya menunjukkan bahwa kecuali Anda berbicara tentang konfigurasi izin Drupal, cara peran Anda seharusnya menjadi cara Anda bermain. ;-)
medden

2
FYI, saya menggunakan Drupal 7 dan menemukan bahwa saya perlu menggunakan $vars['elements']['#node']->nidsebagai gantinya di pencarian alias. Tidak ada #noderoot di varsdalam Drupal 7 terbaru dari tampilannya.
Wes Johnson

Bukankah seharusnya memiliki fungsi di depan MYTHEME__preprocess_node ($ vars) Saya melihat semua kode di sana hanya dalam hal fungsi?
pal4life


16

Buat Konteks untuk halaman / bagian Anda dan kemudian gunakan modul Aset Konteks untuk memuat CSS dan / atau javascript untuk konteks yang diberikan.

Konteks:

Konteks memungkinkan Anda untuk mengelola kondisi dan reaksi kontekstual untuk berbagai bagian situs Anda. Anda dapat menganggap setiap konteks sebagai mewakili "bagian" dari situs Anda. Untuk setiap konteks, Anda dapat memilih kondisi yang memicu konteks ini menjadi aktif dan memilih berbagai aspek Drupal yang harus bereaksi terhadap konteks aktif ini.

Pikirkan kondisi sebagai seperangkat aturan yang diperiksa selama pemuatan halaman untuk melihat konteks apa yang aktif. Reaksi apa pun yang terkait dengan konteks aktif kemudian dipecat.

Konteks Tambahkan Aset:

Menambahkan aset konteks memungkinkan Anda untuk melakukan ini. Ini memiliki UI yang mudah digunakan untuk memungkinkan Anda melakukan ini semua tanpa menulis kode apa pun. Karena menggunakan ctools, semua ini juga dapat diekspor.


Saya menggunakan Aset Tambah Konteks dalam harfiah setiap situs web yang saya buat - jika Anda masuk ke dalam Konteks (yang mendorong setiap bagian bangunan saya) Tambahkan Aset sempurna!
electblake

13

Jika itu adalah sejumlah kecil CSS, mungkin mempertimbangkan untuk membuat pemilih CSS Anda berdasarkan node dan termasuk css di CSS tema Anda? Drupal 7 menyediakan pemilih body.page-node-NODEID, dan Zen untuk Drupal 6 menyediakan kelas-kelas CSS tubuh yang serupa.


yang pada dasarnya apa yang saya sedang lakukan ... dan itu hampir 200 baris, sehingga tampak seperti ide yang baik untuk memindahkannya ke tempat lain. (ya, mungkin seharusnya lebih pendek. Itu mungkin langkah terpisah.)
epersonae

Di sisi lain, respons Anda mengilhami saya untuk membaca template.php di templat (anak Zen) saya, yang memberi saya jawaban akhir.
epersonae

7

Anda bisa membuat modul khusus dan menggunakan hook_preprocess_node () untuk memuat stylesheet secara selektif berdasarkan id node.

Ini sebuah contoh:

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");
  }
}

Ganti MYMODULE dengan nama modul Anda dan ganti MYTHEME dengan nama tema yang berisi file css.


hook_init () berjalan pada setiap pemuatan halaman, dan seringkali berkali-kali (AHAH), mengapa tidak menggunakan hook_preprocess_node () (baik dalam tema atau dalam modul) yang hanya berjalan ketika sebuah node dirender?
Menguraikan

Poin baiknya, tidak tahu bahwa init dimuat beberapa kali.
Camsoft

Menguraikan, saya telah memperbaiki contoh saya untuk menggunakan fungsi preprocess. Masih belajar!
Camsoft

Maka pertanyaan selanjutnya adalah mengapa menggunakan arg (1) untuk nid ketika variabel node dilewatkan melalui $ vars :) Yang kemudian akan mengarah pada pertanyaan berikutnya tentang bagaimana hal ini berbeda dengan jawaban saya: p
Decipher

Saya kira saya harus membaca dokumentasi hook_preprocess_node (). Anda benar sekali. epersonae, saya sarankan Anda menerima jawaban Decipher.
Camsoft

7

Jika kriteria yang menambahkan gaya CSS tergantung dari beberapa properti node, maka saya akan menerapkan MYTHEME_preprocess_node(&$variables); salah satu nilai yang diteruskan ke fungsi adalah $variables['node'](untuk memperhatikan itu tidak $variables['#node']).

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

Jika kriteria tidak tergantung dari properti node, maka saya akan menerapkan MYTHEME_preprocess_page(&$variables); $variables['node']berisi objek simpul, jika halaman yang ditampilkan adalah halaman simpul. Dalam Drupal 6, fungsi proses juga mendapat $variables['is_front'], tetapi dalam Drupal 7 variabel yang sama tidak lulus; jika Anda perlu tahu apakah halaman tersebut adalah halaman depan, Anda perlu menggunakannya drupal_is_front_page().

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

5

Untuk cara admin yang melakukannya, saya akan melihat modul CSS . Itu menambahkan bidang di mana Anda dapat menambahkan CSS ke halaman node/adddan node/edit.

CSS:

Modul CSS menambahkan, untuk pengguna dengan izin yang cukup dan node yang diaktifkan, bidang CSS pada halaman pembuatan simpul.

Pengguna mungkin memasukkan aturan CSS di bidang simpul CSS dan aturan itu akan diuraikan pada tampilan simpul.

Dengan cara ini pengguna yang berpengalaman CSS dapat membuat desain berbasis CSS yang kompleks untuk konten node.

Penting: perhatikan bahwa izin pengeditan CSS harus diberikan hanya kepada pengguna tepercaya (administrator). Pengguna jahat yang memiliki izin ini dapat merusak desain situs Anda dan juga memperkenalkan masalah keamanan (XSS).


3

CodePerNode bagus, tetapi CSS Injector lebih mudah dipasang (tidak perlu pustaka). Modul ini memungkinkan manajer konten untuk secara dinamis menambahkan CSS ke halaman tertentu, tanpa menyentuh kode PHP atau file INFO sama sekali. 15777 pemasangan tidak dapat salah - ini adalah bukti sosial modul ini berfungsi. CSS juga di-cache dengan sistem caching biasa.


2

Karena Anda sudah menggunakan Panel, mungkin lebih mudah untuk hanya menambahkan CSS Anda sebagai Gaya Panel untuk setiap wilayah panel beranda Anda. Anda dapat menentukan markup kustom di sana dan menggunakannya kembali di situs Anda.

Anda juga bisa langsung ke bagian Umum dari aturan varian pengelola halaman untuk beranda Anda. Ada bagian di sini untuk menambahkan ID CSS dan aturan hanya untuk panel saat ini.

Catatan: ini semua ada di D7, jadi mungkin pendekatan ini lebih baik didukung oleh Panel daripada di versi sebelumnya.


2

/ * Contoh menggunakan tema bartik untuk menambahkan css berdasarkan tipe konten * /

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

Coba tambahkan ini di file 'template.php' Anda:

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

Ganti 'mytheme' dengan nama direktori tema Anda dan '/css/front.css' dengan path di mana file CSS Anda.

Untuk menghapus file 'front.css' dari halaman lain, coba tambahkan ke 'template.php':

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

Sekali lagi, ganti 'mitos' dengan nama direktori tema Anda.

Jika Anda perlu menghapus 'styles.css' dari halaman depan cukup gabungkan kedua kode ini.

Mari kita asumsikan bahwa Anda memerlukan 'front.css' tanpa 'styles.css' di halaman depan, dan 'style.css' tanpa 'front.css' di semua halaman lainnya. Kode akan terlihat seperti ini:

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

Juga, ganti 'mitos'.

Saya berharap ini akan membantu.


Sepotong kode terakhir adalah apa yang saya butuhkan. Dan itu berfungsi, yaitu, setelah saya menghapus stylesheet [semua] [] = css / front.css dari theme.info saya - saya kira saya berasumsi salah bahwa kita perlu memilikinya bersama dengan stylesheet [semua] [] = css / styles .css. Saya juga khawatir karena saya menimpa page.tpl.php dengan halaman - front.tpl.php mungkin tidak berfungsi tetapi semuanya tampaknya berjalan dengan baik. Ini sangat membantu. Terima kasih!
Sd1

Hanya untuk memastikan semua orang mendapatkan solusi ini; pastikan untuk menghapus styles.css (default) dan front.css dari file theme.info Anda. Siram semua cache dan harusnya baik.
Sd1

1

Saya akan melewatkan menyentuh template.php sama sekali dan hanya menambahkan item lain di file .info tema Anda

Katakanlah stylesheet Anda ada css/foo.css.

Ini adalah tampilan file theme_name.info Anda:

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

Maka Anda mendapat manfaat dari membuatnya di-cache dengan stylesheet utama, dan karena saya menganggap ini untuk beranda Anda, itu masuk akal.


Dan tentu saja Anda harus memenuhi syarat penyeleksi Anda berdasarkan atribut simpul, yaitu nid, jenis simpul, dll
Alexander Hripak

Masalah dengan pendekatan ini adalah itu akan mempengaruhi semua halaman di situs dengan css ditambahkan di sini
pal4life

1

Selain pendekatan Drupal, ketika Anda hanya membutuhkan sepotong css pendek di dalam tubuh HTML5 Anda, Anda memiliki Atribut css scoped. Lihat https://stackoverflow.com/a/4607092/195812

Solusi ini akan menyelamatkan Anda dari mengedit kode dan memasang lebih banyak modul


0

Anda dapat mencetak simpul halaman dalam tag-tubuh

<body page-node-26419 ...>

Maka Anda bisa membatasi

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

Ini berguna untuk perubahan cepat kecil


selamat datang di Jawaban Drupal! Jawaban ini sudah disediakan di atas oleh Dave Reid.
Kojo
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.