如何通过编程将类添加到HTML“ body”标签？

13

我想向标签添加自定义CSS类<body>。我正在使用Drupal 7 / Corolla。

如何从自定义模块中以编程方式进行操作？

7 theming

— giorgio79
source

13

预处理功能可以通过模块和主题来实现。

您需要的预处理功能是hook_preprocess_html()，要设置的变量是$variables['classes_array']，这是一个数组，其中包含为<body>元素设置的所有类。Drupal默认使用的html.tpl.php文件的内容（如果主题不使用其他模板文件）是以下内容：

<!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>

在您的模块中，您只需实现预处理功能，如下所示：

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

然后使用template_process（）$variables['classes_array']填充$variables['classes']以下代码：

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

如果您的站点使用多个主题，或者为您的站点设置的主题不是您创建的主题，则最好在模块中使用预处理功能。在这种情况下，您可以设置自定义CSS类，而在更新主题或仅更改站点使用的默认主题时不会丢失它们。如果您的站点仅使用主题，并且该主题是您创建的自定义主题，则可以在自定义主题中实现预处理功能。维护主题时，更新主题时CSS类别不会丢失。

— kiamlaluno
source

是的，我通常通过每个模块中的preprocess_html添加模块名称，以便主题JS可以根据需要进行检测。

— mpdonadio

9

添加到MODULENAME.module并清除缓存

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

— Xandeadx
source

4

尽管您可以通过hook_preprocess_html进行此操作，但是当您需要此代码时，通常您会处在代码库的完全不同的部分。如果是这种情况，那么我建议您ctools_class_add改用：

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

您可以在任何地方调用它，只要hook_preprocess_html尚未运行即可，并且将添加类。

— 愤怒的丹
source

1

假设您使用pathauto模块根据菜单路径为内容页面自动创建语义路径，则可以使用页面路径创建所需的类：

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

— 伊克巴尔
source

1

您可以通过进行此操作template_preprocess_html()。您可以将其放在您template.php的主题/基础主题认为最合适的任何位置（例如，Omega预处理文件夹），或放在自定义模块中，具体取决于最合适的主题。

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

尽管API参考中有名称，但可以从模块（而不仅仅是主题）中调用theme_preprocessand theme_process函数。您需要做的就是命名该挂钩以匹配您的模块，例如mymodule_preprocess_html()。

— mpdonadio
source