听晴空讲Drupal主题——第六章主题中的CSS（11）

由 qingkong 提交于 8 May 2015

6.11 在主题中应用smacss（2）——Apply SMACSS in Drupal theme（2）

3 高级办法——template.php

你可以在block模块中找到block.tpl.php文件，这是Drupal区块的默认模版文件：

<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>

  <?php print render($title_prefix); ?>

<?php if ($block->subject): ?>

  <h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2>

<?php endif;?>

  <?php print render($title_suffix); ?>

  <div class="content"<?php print $content_attributes; ?>>

    <?php print $content ?>

  </div>

</div>

仔细阅读这段代码你会发现有三处可以供我们使用预处理函数添加指定的选择器，它们分别用于包装区块本身，区块标题和区块内容，即： $classes, $title_attributes，$content_attributes。同时，你必须删除区块内容中的这段代码：class=“content”，因为这里对区块内容的选择器进行了硬编码，会导致你的预处理函数无效，关于这个问题请参见https://www.drupal.org/node/1286532。这里所谓的删除，指的是通过覆写block.tpl.php文件，为Drupal指定一个新的区块模版。

template.php中的预处理函数大致是这样的：

<?php

/**

 * Implements hook_preprocess_block()

 */

function mytheme_preprocess_block(&$vars) {



  $block_id = $vars['block']->module . '-' . $vars['block']->delta;

  $classes = &$vars['classes_array'];

  $title_classes = &$vars['title_attributes_array']['class'];

  $content_classes = &$vars['content_attributes_array']['class'];



  $title_classes[] = 'block-title';

  $content_classes[] = 'block-content';



  switch ($block_id) {

   

    case 'system-navigation':

      $classes[] = 'block-rounded';

      $title_classes[] = 'block-fancy-title';

      $content_classes[] = 'block-fancy-content';

      break;

    

    case 'system-main-menu':

   

    case 'user-login':

      $title_classes[] = 'element-invisible';

      break;

  }

}

其中第一个变量$block_id是创建区块的模块名称和delta值的字符串组合，中间用短横线连接。它的作用是让我们通过下面的switch条件判断语句，为特定的区块指定选择器。

接下来的三个变量，$classes, $title_classes和$content_classes，是三个数组的引用，它们对应的是区块本身，区块标题和区块内容的选择器。要为某一个区块指定选择器，只需要将选择器加到对应的数组里。比如，接下来，我们就用 $title_classes[] = 'block-title';和

$content_classes[] = 'block-content';语句对所有区块的标题统一加上了block-title选择器，对所有区块的内容统一加上了block-content选择器。当然，这并不是必须的，只是一个例子。同时，如果你不喜欢drupal核心和其它第三方模块为你添加的各种“奇葩”选择器，你就可以在这里将他们统统干掉。方法很简单，只要将这三个数组重置为空数组就可以了，如：$classes = array();

接下来，我们利用switch语句进行判断，当变量$block_id等于相应值的时候，为$classes, $title_classes和$content_classes变量各自指派所需的选择器。上面的例子分别为system-navigation区块、system-main-menu区块和user-login区块的相应元素添加了所需的选择器。

那么，这里的一个问题是，写switch判断的时候，如何知道一个区块的$block_id值是什么呢？其实，你只需要用print $block_id;语句将变量打印出来，就可以在浏览器中看到这个值了。

板块

标签

Drupal 版本