README

简化语义标题结构

Semantilizer可以提升TYPO3网站的SEO和可访问性，并增强内容创建的可能性。这个易于使用的工具可以自动验证和纠正标题结构，扩展标题的功能。

您的编辑人员和用户都会喜欢它。您的SEO专家和设计师也会喜欢它——您肯定也会喜欢Semantilizer！

安装

通过composer获取扩展： composer require zeroseven/z7-semantilizer
确保TypoScript设置在配置fluid_styled_content之后包含，以覆盖标题的局部设置

工作原理

Semantilizer将网站内容元素的标题设置分为两个不同的字段。通过将语义标记从header_layout字段分离出来，编辑员可以更简单地更改标题的字体大小，而不改变其在标题层次结构中的位置。

在TYPO3后端，Semantilizer提供实时验证。它会立即通知您关于不合理的标题结构，然后可以一键自动修复。在TYPO3页面模块中，您可以获得页面及其结构的清晰概览，并可以使用拖放轻松调整标题层次结构。

验证

当显示页面的标题结构时，Semantilizer加载其前端而不是仅从数据库中爬取信息。这样，它会自动包括来自其他扩展和后端布局的信息——无需任何特殊配置。它还包括RTE内容和引用内容元素中的标题。这个功能使得扩展非常可靠和灵活，因为概览包括了所有可能存在的标题。

设置

渲染标题

您需要通过额外的ViewHelper渲染标题，以便能够在后端概览中自动编辑或纠正它们。ViewHelper的edit属性为Semantilizer提供了关于当前标题所需的所有信息。

<html xmlns:semantilizer="http://typo3.org/ns/Zeroseven/Semantilizer/ViewHelpers" data-namespace-typo3-fluid="true">

    <semantilizer:headline edit="{table: 'tt_content', uid: '{data.uid}', field: 'header_type'}" type="{data.header_type}">
        {data.header}
    </semantilizer:headline>

    <!-- Shorter syntax based on the syntax of TypoScript function getText:DB (https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/DataTypes/Properties/GetText.html#db) -->
    <semantilizer:headline edit="tt_content:{data.uid}:header_type" type="{data.header_type}">
        {data.header}
    </semantilizer:headline>

</html>

💡 这些信息仅在编辑器登录到TYPO3后端并且请求由Semantilizer发起时添加到标题。此外，还将进行关于所需编辑器访问权限的后台检查。

禁用Semantilizer

让我们以“新闻”扩展的详细页面为例：禁用Semantilizer是有意义的。在类似这样的页面上，通常根据参数有不同页面内容。因此，您可以通过TSconfig禁用Semantilizer。

tx_semantilizer.disabledPages := addToList(22)

可以为通用页面类型执行相同的配置

tx_semantilizer.disabledDoktypes := addToList(33)

定义验证区域

当选择标准设置时，Semantilizer会检查整个页面的body。如果您想要检查页面的特定部分，可以在TSconfig设置中通过提供必要的querySelector进行调整

tx_semantilizer.contentSelectors = #main-content, .sidebar, div[role=banner]

连接标题

使用Semantilizer通过为标题分配一个relationId来创建逻辑连接，以便其他内容可以与其连接。现在您可以通过ChildViewHelper以动态分层的方式控制它们的语义标记（见示例）。或者，您可以使用SiblingViewHelper在不改变的情况下镜像连接标题上的语义标记，而不是使它们分层。

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:semantilizer="http://typo3.org/ns/Zeroseven/Semantilizer/ViewHelpers" data-namespace-typo3-fluid="true">
    <semantilizer:headline type="{data.header_type}" relationId="product{data.uid}" class="content-header">{data.header}</semantilizer:headline>

    <f:for each="products" as="product">
        <div>
            <semantilizer:headline.child of="product{data.uid}" class="product-title">{product.header}</semantilizer:headline.child>
            <p>{product.description}</p>
        </div>
    </f:for>
</html>

💡 当标题的edit属性被设置时，将默认使用[tablename]:[uid]作为relationId。

技巧

如果您想使header_layouts的标签更易于理解，可以像这样重写它们

TCEFORM.tt_content.header_layout {
  removeItems = 1,2,3,4,5,6
  altLabels.. = Medium
  addItems {
    large = Large
    small = Small
    pink_sparkling_bouncing_header = 🦄
  }
}

发行说明

版本 4.0

与TYPO3 12兼容（不再支持TYPO3 10和11）
基于TypeScript重构JavaScript
使用ES6 JavaScript模块进行工作

版本 3.0

基于TypeScript重构的标题验证
重构后台概览
自定义视图助手

版本 2.2

与TYPO3 11兼容
从npm切换到yarn

版本 2.1

根据backend_layout支持多个colPos（带排序）

版本 2.0

在PHP端重构后台验证
为TYPO3 10引入仪表板小部件🎉
重大变更：FixedTitleInterface已更新参数，请相应调整

zeroseven / z7-semantilizer

维护者

详细信息