当前位置: 首页>>技术教程>>正文


有没有为单个页面/节点添加CSS的方法?

webfans 技术教程 , , , 去评论

问题描述

我正在清理我的大型疯狂样式表(可能与未来的问题相关),我想知道将自定义CSS添加到特定节点或页面的最佳方法。

特别是,我的工作网站的主页是一个面板页面,它有一堆不同的样式。现在CSS只包含在主题样式表中。

有没有办法说,“如果这是节点Foo,那么添加foo.css”?我正在寻找CSS Injector吗?

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

我最终做了什么。

我正在使用Zen subtheme,并在实际阅读template.php时发现,有一些注释掉的代码用于包含条件样式表。下面的代码完全符合我的要求:

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

(股票Zen template.php文件中的第80行,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替换为与您自己的代码相关的值。

次佳解决方案

您可以查看Code per Node模块。它也是这个blog post的特色。

第三种解决方案

为您的页面/部分创建Context,然后使用Context Assets模块为该给定上下文加载CSS和/或javascript。

语境:

Context allows you to manage contextual conditions and reactions for different portions of your site. You can think of each context as representing a “section” of your site. For each context, you can choose the conditions that trigger this context to be active and choose different aspects of Drupal that should react to this active context.

Think of conditions as a set of rules that are checked during page load to see what context is active. Any reactions that are associated with active contexts are then fired.

上下文添加资产:

Context add assets allows you to do this. It has an easy to use UI to allow you to do this all without writing any code. Because it uses ctools all of this is also exportable.

第四种方案

如果它是少量的CSS,可能考虑根据节点制作CSS选择器并在主题的CSS中包含css? Drupal 7提供了body.page-node-NODEID选择器,而Dr 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/addnode/edit页面。

CSS:

The CSS module adds, for users with enough permissions and enabled nodes, a CSS field on the node creation page.

Users might insert CSS rules in the CSS node field and those rules will be parsed on the node viewing.

This way CSS experienced users might create complex CSS based design for nodes contents.

Important: note that the CSS editing permissions should be given only to trusted users (administrators). Malicious users which have this permission might broke your site design and also introduce security issues (XSS).

第八种方案

由于您已经在使用面板,因此可能更容易将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
}

第十种方案

CodePerNode非常棒,但CSS Injector安装起来更简单(无需库)。该模块允许内容管理器动态地将CSS添加到特定页面,而根本不涉及PHP代码或INFO文件。 15777安装不能错 – 这是这个模块工作的社会证明。 CSS也使用常规缓存系统进行缓存。

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/2636.html,转载请务必附带本地址声明。