是否可以为单个页面/节点添加CSS？

我正在整理疯狂的样式表（可能与将来的问题有关），并且想知道将自定义CSS添加到特定节点或页面的最佳方法。

特别是，我的工作网站的主页是“面板页面”，并且具有许多不同的样式。现在，CSS仅包含在主主题样式表中。

有没有办法说“如果这是节点Foo，则添加foo.css”？是CSS喷油器我在寻找什么呢？

我可能有兴趣将其推广到其他节点/节/等，但此刻我只想处理这一项。

我最终做了什么。

我使用的是Zen子主题，在实际阅读template.php时发现其中包含条件样式表的代码已注释掉。下面的代码正是我所需要的：

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

（Zen template.php库存文件FWIW中的第80行。）

这是我将通过代码执行的操作，但这是因为那只是我滚动的方式。

在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和/或javascript。

内容：

上下文使您可以管理站点不同部分的上下文条件和反应。您可以将每个上下文都视为代表网站的“部分”。对于每个上下文，您可以选择触发该上下文激活的条件，并选择应对此激活上下文做出反应的Drupal的不同方面。

将条件视为一组规则，这些规则在页面加载期间进行检查以查看活跃的上下文。然后触发与活动上下文相关的任何反应。

上下文添加资产：

上下文添加资产允许您执行此操作。它具有易于使用的UI，可让您无需编写任何代码即可完成所有操作。因为它使用ctools，所以所有这些都可以导出。

如果是少量CSS，也许考虑考虑根据节点创建CSS选择器，并在主题的CSS中包含CSS？Drupal 7提供了body.page-node-NODEID选择器，Zen for Drupal 6提供了相似的body CSS类。

您可以创建一个自定义模块，并使用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也与常规缓存系统一起缓存。

由于您已经在使用面板，因此将CSS添加为首页面板每个区域的面板样式可能会更容易。您可以在此处定义自定义标记，然后在整个站点中重复使用它。

您也可以只转到首页的页面管理器变体规则的“常规”部分。这里有一个部分仅用于为当前面板添加CSS ID和规则。

注意：这一切都在D7中完成，因此Panel可能比以前的版本更好地支持此方法。

/ *使用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”，只需组合这两个代码即可。

假设您需要在首页上没有“ styles.css”的“ front.css”，在所有其他页面上都没有“ front.css”的“ style.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文件中添加另一个项目

假设您的样式表在中css/foo.css。

这是您的theme_name.info文件的外观：

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

然后，您可以从它与主要样式表一起缓存中受益，并且由于我假设这是用于您的主页，因此这是有道理的。

除了Drupal方法外，当您在HTML5正文中只需要一小段CSS时，就可以使用CSS范围属性。参见https://stackoverflow.com/a/4607092/195812

该解决方案将使您免于编辑代码和安装更多模块的麻烦。

您可以在正文标签中打印页面节点

<body page-node-26419 ...>

那你可以限制

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

这对于较小的快速更改很有用