如何在 Plone <h1> 元素中添加 <span> 标签答案

【问题标题】：How to add <span> tags inside Plone <h1> element如何在 Plone <h1> 元素中添加 <span> 标签
【发布时间】：2011-03-16 21:09:37
【问题描述】：

我想更改页面元素的标准顶部，以便我可以设置它的样式。

<h1 class="documentFirstHeading">My Heading</h1>

是 Plone 将此元素放置在每个页面上的方式。我想添加一个这样的行：

<h1 class="documentFirstHeading"><span>My Heading</span></h1>

很明显，这段代码是由宏生成的 - 但我不知道如何修改宏以添加我的跨度标签。有人可以指点我适当的 Plone 文件进行修改？这设置了一个通用的 CSS 图像替换技术，其他 Plone 站点经常使用它，正如我所见在其他 Plone 网站上，将标签准确地放在我需要它们的位置。

TIA 为您提供专业知识！

【问题讨论】：

你为什么在 h1 里面这么无意义的跨度？
@pynator 不是毫无意义的，如果你想应用某些 CSS 技术。
@saskiano 你用的是什么版本的 Plone？
不幸的是，它并不是没用的。用于开窗和角落和边缘效果的各种技术需要额外的非语义标签。我是否可以建议，没有亲自看到问题的重点不是投反对票的充分理由？
如果您对 CSS 样式有所了解，那也没什么用。标准图像替换技术：将 span 内的文本设置为 display:none，然后将背景图像设置为 h1 元素。保持 h1 的语义意图，同时允许图形渲染的许多创意选项。

标签： templates customization plone

【解决方案1】：

这并不重要（操作几乎相同），但我假设您正在创建主题包。我还假设您使用的是 Plone 4.0 或更高版本。行动是：

将位于 *Products.CMFPlone/Products/CMFPlone/skins/plone_kss* 中的 *kss_generic_macro.pt* 文件复制到您主题的 *skins/your_templates_folder*。一般而言，这称为“根据您的主题自定义模板”。
在第20行（不同Plone版本的行号可能不同），你会找到你需要的块：

标题

要获得 h1 中的跨度，请将上面 sn-p 中的 tal:replace 替换为 tal:content。

您可能需要重新启动您的 Plone 站点才能看到您所做的更改。检查您的 h1 - 它应该包含您需要的跨度。

重要提示！上面的操作将为您提供每个没有特定模板的通用视图，覆盖 .对于这些情况，您需要自定义这些特定模板。

【讨论】：

【解决方案2】：

我不是 100% 确定（欢迎编辑 :-D），我也不确定你想要什么，但我认为你需要自定义页面视图模板。

在 Plone 3.x 中，模板是 /portal_skins/plone_content/document_view 模板，您可能需要更改

    <h1 class="documentFirstHeading"> 
        <metal:field use-macro="python:here.widget('title', mode='view')">
        Title
        </metal:field>
    </h1>

到

    <h1 class="documentFirstHeading"> 
        <span>
        <metal:field use-macro="python:here.widget('title', mode='view')">
        Title
        </metal:field>
        </span>
    </h1>

在 Plone 4 和 4.1 中，密钥模板是 portal_skins/plone_kss/kss_generic_macros。寻找：

      <span metal:define-slot="inside" 
            tal:replace="context/Title">title</span>

并将“替换”更改为“内容”。

【讨论】：

谢谢，albieback。我查看了所有的 Plone 文件，确实找到了 document_view_template.pt，但它不包含对 h1.documentFirstHeading 的任何引用。事实上，文件树的搜索找不到任何引用该元素的文件！ .pt 文件包含以下内容：
糟糕 - 这是标题 stuiff 下面的代码： Cooked Body
干预点已在版本之间移动。我已经编辑了涵盖 Plone 4 和 4.1 的答案。

【解决方案3】：

感谢 spliter，我现在已经完成了部分页面的样式。正如他所提到的，这些更改还影响了所有没有特定模板覆盖的通用视图。我猜这些是细节视图之类的东西，当单击给定部分下的特定文章的链接时会出现这种情况。

因此，尽管我的部分页面按预期显示，但当我点击一篇文章时，会发生以下情况：

如果我将 span 标签之间的文本设置为 display:none，则该行为根本不会反映在详细信息页面中，因为跨度不会应用于详细信息页面上的 h1 标记内。

但是，由于我在 Section 页面上为 h1 元素设置了特定的背景图片，所以该背景图片确实会出现在详细页面 h1 上。

如何为我的详情页面覆盖该行为？ - 也就是说，我不想在详细信息页面 h1 元素上使用背景图像。我需要能够分别处理 Section 和 Detail 页面上的 h1 元素。

很抱歉我在这里缺乏经验，但习惯 Plone 的工作方式似乎很耗时，至少对我来说是这样。

【讨论】：

【解决方案4】：

在为您做了一些探索之后，我发现您正在寻找的宏位于“/portal_skins/plone_kss/kss_generic_macros/”，特别是您正在寻找“generic_title_view 宏”。

如果你想知道我是如何得到这个的，我首先查看了 main_template.pt 文件并看到：

<metal:title define-slot="content-title">                              
    <metal:comment tal:content="nothing">
        If you write a custom title always use 
        <h1 class="documentFirstHeading"></h1> for it
    </metal:comment>
    <h1 metal:use-macro="context/kss_generic_macros/macros/generic_title_view">              
       Generic KSS Title. Is rendered with class="documentFirstHeading".                    
    </h1>                                                                                    
</metal:title>

从那里我只是在皮肤中四处寻找 kss，希望这就是你要找的。p>

【讨论】：

不是这样的，只在通过KSS替换header时使用。
他并没有说他想自定义标题的实际内容，除了添加跨度标签，我用这种方法得到了他正在寻找的确切结果。不想再猜测你或任何事情，因为我知道你知识渊博，几天前实际上回答了我的一个问题，只是想学习（大学生）。