มีวิธีใดในการเพิ่ม CSS สำหรับหน้า / โหนดเดียว

ฉันกำลังล้างสไตล์ชีตบ้าใหญ่ของฉัน (อาจเกี่ยวข้องกับคำถามในอนาคต) และฉันสงสัยว่าวิธีที่ดีที่สุดในการเพิ่ม CSS ที่กำหนดเองไปยังโหนดหรือหน้าเฉพาะ

โดยเฉพาะอย่างยิ่งหน้าแรกของเว็บไซต์ทำงานของฉันคือหน้าจอพาเนลและมันมีสไตล์ที่แตกต่างกันออกไป ขณะนี้ 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 ในไฟล์หุ้น template.php ของ Zen, 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 และ / หรือจาวาสคริปต์สำหรับบริบทที่กำหนด

บริบท:

บริบทช่วยให้คุณจัดการเงื่อนไขบริบทและปฏิกิริยาสำหรับส่วนต่าง ๆ ของไซต์ของคุณ คุณสามารถนึกถึงแต่ละบริบทว่าเป็น "ส่วน" ของเว็บไซต์ของคุณ สำหรับแต่ละบริบทคุณสามารถเลือกเงื่อนไขที่ทำให้บริบทนี้ทำงานและเลือกแง่มุมต่าง ๆ ของ Drupal ที่ควรตอบสนองต่อบริบทที่ใช้งานอยู่นี้

คิดว่าเงื่อนไขเป็นชุดของกฎที่มีการตรวจสอบระหว่างการโหลดหน้าเพื่อดูบริบทที่ใช้งานอยู่ ปฏิกิริยาใด ๆ ที่เกี่ยวข้องกับบริบทที่ใช้งานจะถูกไล่ออก

บริบทเพิ่มสินทรัพย์:

การเพิ่มเนื้อหาตามบริบทช่วยให้คุณทำสิ่งนี้ได้ มี UI ที่ใช้งานง่ายเพื่อให้คุณทำสิ่งนี้ได้โดยไม่ต้องเขียนโค้ดใด ๆ เพราะมันใช้ ctools ทั้งหมดนี้ก็สามารถส่งออกได้เช่นกัน

หากเป็นจำนวนเล็กน้อยของ CSS อาจพิจารณาเลือกตัวเลือก CSS ของคุณตามโหนดและรวมถึง CSS ใน CSS ของธีมของคุณด้วย? Drupal 7 ให้ตัวเลือก body.page-node-NODEID และ Zen สำหรับ Drupal 6 มีคลาส CSS ของ body ที่คล้ายกัน

คุณสามารถสร้างโมดูลที่กำหนดเองและใช้ hook_preprocess_node () เพื่อโหลดสไตล์ชีทที่เลือกโดยยึดตาม ID โหนด

นี่คือตัวอย่าง:

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 ยังถูกแคชด้วยระบบแคชปกติ

เนื่องจากคุณใช้ Panels อยู่แล้วคุณอาจเพิ่ม CSS เป็นสไตล์พาเนลได้ง่ายขึ้นสำหรับแต่ละพื้นที่ของพาเนลหน้าแรกของคุณ คุณสามารถกำหนดมาร์กอัปที่กำหนดเองที่นั่นและนำมาใช้ซ้ำได้ทั่วทั้งไซต์ของคุณ

คุณสามารถไปที่ส่วนทั่วไปของกฎตัวจัดการหน้าสำหรับหน้าแรกของคุณ มีส่วนที่นี่สำหรับการเพิ่ม CSS ID และกฎสำหรับแผงปัจจุบันเท่านั้น

หมายเหตุ: ทั้งหมดนี้อยู่ใน D7 ดังนั้นจึงอาจเป็นไปได้ว่าวิธีนี้ได้รับการสนับสนุนจาก Panels ดีกว่าในรุ่นก่อน

/ * ตัวอย่างการใช้ชุดรูปแบบ 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 ของธีมของคุณ

Say css/foo.cssสไตล์ชีตของคุณอยู่ใน

นี่คือลักษณะของไฟล์ theme_name.info ของคุณ:

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

จากนั้นคุณได้รับประโยชน์จากการใช้แคชกับสไตล์หลักและเนื่องจากฉันสมมติว่านี่เป็นหน้าแรกของคุณมันจะสมเหตุสมผล

นอกเหนือจากวิธี Drupal เมื่อคุณต้องการ css สั้น ๆ ภายใน HTML5 body ของคุณคุณจะมี css ที่กำหนดขอบเขต ดูhttps://stackoverflow.com/a/4607092/195812

โซลูชันนี้จะช่วยคุณประหยัดจากการแก้ไขโค้ดและการติดตั้งโมดูลเพิ่มเติม

คุณสามารถพิมพ์โหนดหน้าใน body-tag

<body page-node-26419 ...>

จากนั้นคุณสามารถ จำกัด

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

สิ่งนี้มีประโยชน์สำหรับการเปลี่ยนแปลงอย่างรวดเร็วเล็กน้อย