Drupal Panels实现干净的标签结构

确实,当你使用Panels模块时,你会得到许多丑陋的HTML标签结构,即使你创建一个单列的页面,而且不改变任何设置。这是因为渲染系统的每一层都在引入自己的标签结构。

Panels和其层次关系

Panels的结构是通过层来组织的,这就是它为什么能够对任意给出的需求都能如此灵活的原因。首先是一种包含多个区域的页面布局,里面是一些内容区块。

每一个内容区块可以通过提供CTools插件来配置。你可以使用样式插件改变区块和区域,使用布局插件改变布局。每一个层都有自己的包装标签,很快就使得HTML结构变得过分复杂起来。

帮助就在眼前

幸运的是,Panels内置了许多的帮助,首先有一个“小清新”(Naked)样式插件,可以抛弃所有的包装标签结构,其可以被用于区块和区域。这是一个好的开始,布局结构仍然需要特定的标签来帮助实现站点的主题效果。

对大多数Panels页面来说,就是将Panels模板拷贝到主题目录下,并美化和自定义结构的过程。

如果你正在使用一个栅格系统的CSS框架,那么这个文件就是你要重构HTML结构以适配你当前的系统的地方。

我的Panels页面

基于上面的方法,我创建了一个简单的Panels页面,列出注册用户最近发布的内容。这个页面基于一个bean, 一个view和一些自定义的标签构建。使用了单列布局。

这就是我的简单的单列布局Panels的模板文件:

<div class="panel-display panel-1col clearfix" <?php if (!empty($css_id)) { print "id="$css_id""; } ?>>
  <?php print $content['middle']; ?>
</div>       

而这是匿名状态下看到的HTML标签结构

<section id="block-system-main">
  <div class="panel-display panel-1col clearfix">
    <div class="panel-pane pane-block pane-bean-recent-content-header">
      <h2 class="pane-title">Recent content</h2>
      <div typeof="" about="/block/recent-content-header" class="entity entity-bean bean-editable clearfix">[...]</div>
    </div>
    <div class="panel-pane pane-custom pane-1">
      <p>Login or create an account to view this content...</p>
    </div>
  </div>
</section>     

你觉得怎么样?

原文作者:Dan James
译者:理查