ฉันจะเพิ่มคลาสให้กับแท็ก HTML "body" โดยทางโปรแกรมได้อย่างไร

13

ฉันต้องการเพิ่มคลาส CSS ที่กำหนดเองให้กับ<body>แท็ก ฉันกำลังใช้ Drupal 7 / Corolla

ฉันจะทำได้โดยใช้โปรแกรมจากโมดูลที่กำหนดเองได้อย่างไร

7 theming

13

ฟังก์ชั่น preprocess สามารถนำมาใช้จากโมดูลและธีม

ฟังก์ชัน preprocess ที่คุณต้องการคือhook_preprocess_html()และตัวแปรที่จะตั้งค่า$variables['classes_array']ซึ่งเป็นอาร์เรย์ที่มีคลาสทั้งหมดที่ตั้งค่าไว้สำหรับ<body>องค์ประกอบ เนื้อหาของไฟล์html.tpl.phpที่ใช้เป็นค่าเริ่มต้นโดย Drupal (หากธีมไม่ได้ใช้ไฟล์เทมเพลตอื่น) เป็นสิ่งต่อไปนี้:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>

<head profile="<?php print $grddl_profile; ?>">
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</body>
</html>

ในโมดูลของคุณคุณเพียงแค่ใช้ฟังก์ชั่น preprocess ดังนี้:

function mymodule_preprocess_html(&$variables) {
  $variables['classes_array'][] = "new-class";
}

template_process ()จากนั้นใช้$variables['classes_array']เพื่อเติม$variables['classes']ด้วยรหัสต่อไปนี้:

$variables['classes'] = implode(' ', $variables['classes_array']);

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

— kiamlaluno
แหล่งที่มา

ใช่ฉันมักจะยึดติดกับชื่อโมดูลผ่าน preprocess_html ในทุกโมดูลเพื่อให้ชุดรูปแบบ JS สามารถตรวจจับได้หากต้องการ

— mpdonadio

9

เพิ่มใน MODULENAME.module และล้างแคช

function MODULENAME_preprocess_html(&$vars) {
  $vars['classes_array'][] = 'custom-class';
}

— xandeadx
แหล่งที่มา

4

ในขณะที่คุณสามารถทำได้ผ่าน hook_preprocess_html แต่บ่อยครั้งที่คุณจะอยู่ในส่วนที่แตกต่างกันโดยสิ้นเชิงของ codebase เมื่อคุณต้องการสิ่งนี้ หากเป็นกรณีนี้ฉันขอแนะนำให้คุณใช้ctools_class_addแทน:

ctools_class_add(array('class1', 'class2', 'class3'));

คุณสามารถเรียกสิ่งนั้นได้จากทุกที่ตราบใดที่ hook_preprocess_html ยังไม่ได้เรียกใช้และจะเพิ่มคลาส

— Angry Dan
แหล่งที่มา

1

สมมติว่าคุณกำลังใช้โมดูล pathauto เพื่อสร้างเส้นทาง semantic สำหรับหน้าเนื้อหาของคุณโดยอัตโนมัติตามเมนูพา ธ คุณสามารถใช้พา ธ ของเพจเพื่อสร้างคลาสที่คุณต้องการ:

function THEMENAME_preprocess_html(&$vars) {
  $path = drupal_get_path_alias();
  $aliases = explode('/', $path);

  foreach($aliases as $alias) {
    $vars['classes_array'][] = drupal_clean_css_identifier($alias);
  } 
}

— อิคบาล
แหล่งที่มา

1

template_preprocess_html()คุณสามารถทำเช่นนี้ผ่านทาง คุณสามารถใส่สิ่งนี้ลงในtemplate.phpชุดรูปแบบ / ฐานของคุณเห็นว่าเหมาะสมที่สุด (เช่นโฟลเดอร์Omega preprocess) หรือในโมดูลที่กำหนดเองขึ้นอยู่กับสิ่งที่เหมาะสมที่สุด

function mytheme_preprocess_html(&$variables) {
  $variables['classes_array'][] = "class1";
  $variables['classes_array'][] = "class2";
  $variables['classes_array'][] = "class3";
}

แม้จะมีชื่อในการอ้างอิง API แต่ก็สามารถเรียกใช้ฟังก์ชันtheme_preprocessและtheme_processจากโมดูลได้ mymodule_preprocess_html()ทั้งหมดที่คุณต้องทำคือการตั้งชื่อเบ็ดเพื่อให้ตรงกับโมดูลของคุณเช่น

— mpdonadio
แหล่งที่มา