更改面板生成的HTML:可以吗?


15

我喜欢使用面板,但是面板会给样式带来麻烦,因为它会产生大量的div。同样,适用于这些div的类也没有意义,而且也太庞大了。在我的前线同事之间造成混乱。

为了显示它们生成的输出:

面板输出

问题是我正在使用960.gs,面板添加了自己的类和笨重的div结构,这使我不得不覆盖它们的类。这是我不想做的事,我想清理div。有什么办法吗?

编辑:

我为清理一些我认为无用的div所做的工作:

从flexible.inc中的第388行开始(面板/插件/布局/ flexible)

$output = '';     
//$output = "<div class=\"panel-flexible " . $renderer->base['canvas'] . " clearfix\" $renderer->id_str>\n";
    //  $output .= "<div class=\"panel-flexible-inside " . $renderer->base['canvas'] . "-inside\">\n";

      $output .= panels_flexible_render_items($renderer, $settings['items']['canvas']['children'], $renderer->base['canvas']);

      // Wrap the whole thing up nice and snug
      //$output .= "</div>\n</div>\n";

我实际上制作了一个灵活布局的副本并进行了编辑,但是如果我在这个项目上有更多的时间,我会为此创建一个更简洁的插件。

注意:这不是最佳解决方案,这是实现我的目标的最快途径。创建自己的小插件是最好的方法,您可以始终使用现有插件之一作为基础。

Answers:


19

我之前已经研究过这个问题。这是您要阅读的问题。乍一看似乎很疯狂,但是实际上有充分的理由要这样做。

底线:将Panels Flexible Layouts视为原型工具。使用它来尝试并在开发,登台,用户测试等过程中草拟想法,然后在您批准了完美的布局后,使用干净,清晰,手工优化的HTML作为自定义的Panels布局将其实现以进行生产(更多在下面的那些上)。

根据我链接到的那个问题,这是为什么如此的简要说明:

  • 面板的HTML输出需要所有疯狂的标记,以便能够容纳任何人都想创建的最疯狂的灵活布局-并排考虑嵌套流体和固定区域的负载。
  • 自动生成的内容对HTML纯粹主义者而言还不够好,因此面板专家们并未尝试在灵活的布局功能中让他们满意。因此,没有HTML优化器算法试图将布局所生成的HTML缩减到最低限度,因为无论其质量如何,它仍然不是最佳标准HTML。
  • 他们没有提到的东西:如果有这样的优化器,则对布局的某些更改将导致现在多余的div和类消失。如果您不使用CSS,则在大多数情况下,需要对Panels灵活的布局进行一些小的更改时,都需要重新编写CSS。这意味着,如果他们尝试(失败了)使Panels Flexible Layouts成为最佳标准的生产工具,他们也将削弱它作为原型制作工具的能力。
  • 可以获得干净,精益的Panels HTML输出。我相信预期的工作流在两行之间读取,是这样的:
    • 您可以在早期开发期间使用Panels Flexible Layouts,同时尝试一些想法。
    • 确定了特定的布局后,如果您想要干净的HTML,则可以使用自定义布局来实现它,仅使用布局需要的精确数量的HTML标记,以及适合您网站的正确类,语义等(下面的操作方法) )。

虽然我一开始不喜欢它,但经过反思,我认为这是有道理的。与其尝试去做不可能的事情,并创建一个在生产环境中既适用于原型设计又符合最佳标准的工具,它们既有非常不同的需求,又只会导致两者都不适合的折衷方案,而是已经使用了一种最适合原型制作的工具,另一种单独的适合精益生产的工具(自定义布局)。

这意味着您可以充分利用这两者的优势,但要付出更多的工作,而最终的布局却无法以基于最佳标准HTML的模板为模板-但是HTML纯粹主义者无论如何都会想做一点点额外的工作来获得他们的输出完美。


如何创建自定义面板布局?文档中的详细指南对如何做到这一点。这是一个快速的基本摘要:

  1. 复制现有布局,从/sites/all/modules/panels/plugins/layouts变为/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
  2. 重命名新副本中的文件以使其与新文件夹名称匹配。请注意,该.tpl.php文件应带有连字符而不是下划线。
  3. 在主题信息文件中添加一行:plugins[panels][layouts] = layouts告诉面板您在此主题中具有自定义布局,以及它们的位置(layouts如果不是从主题到自定义布局文件夹的路径,请替换字符串)
  4. 使用完美,流畅,最少,语义最佳的HTML和CSS编辑文件。

    • 别忘了还.inc使用有关布局的信息(例如名称,类别,文件名等)来更新文件。
    • theme.inc文件中的.tpl.php文件名应与文件名匹配,但不带扩展名。您在theme值中输入的任何下划线都将转换为连字符。
    • 还可以考虑编辑.png图标以更好地反映您的实际布局。
  5. 清除缓存。新布局作为选项显示在面板中,其中包含您在.inc文件中指定的名称,类别等。用它。

1
伙计,这将为我占用整个下午的时间...但是可以做到这一点,而无需“乱砍”,这使我的心情有所缓解。顺便说一句:我希望这篇帖子以某种方式出现在Google上,因为我找不到有关此问题的帖子:S。
thecodeassassin 2012年

@Stephen我对提出问题并最终提出自己的问题后6个月以上的搜索频率感到惊讶。还是同样的SE问题...
WernerCD

我认为这个问题和答案很有用,因此我建议对其标题进行编辑,并被接受。我自己在那边问了同样的问题:drupal.stackexchange.com/questions/69807/theming-panels-html,它是重复的
George Katsanos,

5

您可能还考虑使用Clean Markup Drupal 7模块来控制面板的标记输出。

我在浏览器中搜索了该页面,但尚未找到提及它的内容,包括在user568458给出的非常好的综合答案中。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.