README

Headless允许您从TYPO3内容中渲染JSON。您可以通过更改字段类型、名称和嵌套来自定义输出。

此扩展为TYPO3 PWA解决方案提供后端部分（JSON API）。第二部分是JavaScript应用程序nuxt-typo3，它消费JSON API并使用Vue.js和Nuxt渲染内容。请在此处查看前端文档：https://typo3-headless.github.io/nuxt-typo3/

如果您有任何问题，请在#initiative-headless-pwa Slack频道发消息。

功能

• 内容元素的JSON API
• 页面和元数据的JSON API
• 导航和布局的JSON API
• 考虑所有语言和翻译配置（例如回退）
• 易于通过自定义字段或自定义内容元素扩展
• 直接为无头使用提供自定义数据处理程序
• 支持EXT:form
• 支持EXT:felogin
• 支持EXT:redirects
• 支持EXT:seo
• [BETA]用于模拟页面预览的后端模块（具有特定页面类型、语言、用户组）请参阅headless_dev_tools

附加扩展和集成

• EXT:news的无头支持 headless_news
• EXT:solr的无头支持 headless_solr
• EXT:powermail的无头支持 headless_powermail
• EXT:gridelements的无头支持 headless_gridelements
• 用于本地无头开发的工具/调整 headless_dev_tools
• EXT:container的支持 headless-container-support 和 headless_container

要求和兼容性

快速入门/演示

如果您想查看包括前端、后端和演示数据的示例，请使用我们的基于DDEV的演示项目： https://github.com/TYPO3-Initiatives/pwa-demo

安装

使用composer安装扩展

composer require friendsoftypo3/headless

文档

扩展文档

如何开始使用TYPO3 Headless视频教程

无论您是开发者、内容管理员还是技术爱好者，此教程都旨在提供对TYPO3 Headless的全面介绍，帮助您自信地开始您的旅程。

配置

自版本：4.2 | 3.5 在网站配置中需要配置标志headless！

此标志指示EXT:headless在多站实例中的行为。

对于每个站点，您都可以设置站点以哪种模式运行（标准即HTML响应、无头或混合模式）。

您可以通过yaml文件手动设置headless标志或通过后端中的网站配置设置

'headless': 0|1|2

可能的值

虽然仍然识别旧标志（true|false），但建议过渡到整数表示法。

• 0（以前：false）= 在TYPO3实例中的站点内禁用无头模式。 默认值！
• 1（以前：true）= 在TYPO3实例中的站点内完全激活无头模式。
• 2 = 混合模式无头模式被激活（在TYPO3实例的单个站点中可以访问流体和json API）。

配置步骤

在TYPO3中选择一个站点，按照以下步骤操作

启用无头模式

• 在站点的typoscript模板中，加载“无头”配置文件。
• 在站点配置文件中将headless标志设置为1，或者在站点管理后端的编辑器中配置该标志。

启用混合模式

• 在站点的typoscript模板中，加载“Headless - Mixed mode JSON response”配置文件，而不是默认的无头模式。
• 在站点配置文件中将headless标志设置为2，或者在站点管理后端的编辑器中配置该标志。

混合模式标志（值为2）指示EXT:headless扩展在处理对TYPO3实例中特定站点的请求时，除其他外，还会检查值为application/json的Accept标题。

• 在缺少Accept标题或Accept的值不同于application/json的情况下，TYPO3将以HTML内容（标准TYPO3响应）响应。
• 当请求的标题Accept与application/json的值匹配时，TYPO3将以JSON响应。

JSON内容对象

在无头扩展中，我们实现了新的JSON内容对象，允许您指定要输出的字段以及它们的显示方式。首先，让我们看一个简单的例子

lib.page = JSON
lib.page {
  fields {
    header = TEXT
    header {
      field = header
    }
  }
}

输出

{
    "header" : "headerFieldValue"
}

此外，关键字fields允许您在json中多次嵌套字段，例如。

lib.page = JSON
lib.page {
  fields {
    data {
      fields {
        foo = TEXT
        foo {
          field = bar
        }

        foo1 = TEXT
        foo1 {
          field = bar1
        }
      }
    }
  }
}

输出

{
    "data": [
        {
            "foo": "bar",
            "foo1": "bar1"
        }
    ]
}

用于JSON内容对象的INT、FLOAT和BOOL内容对象

我们引入了新的简单内容对象，以改进前端开发人员的JSON API响应。我们可以设置正确的属性类型，因此前端无需处理具有数值的字段或应该为true/false的字段的字符串值。

lib.page = JSON
lib.page {
  fields {
    data {
      fields {
        foo = INT
        foo {
          # db value of foo_field = 1
          field = foo_field
        }
        bar = BOOL
        bar {
          # db value of bar_field = 0
          field = bar_field
        }
      }
    }
  }
}

输出

{
    "data": [
        {
            "foo": 1,
            "bar": false
        }
    ]
}

自定义

您可以使用typoscript覆盖输出中的每个字段。此扩展允许您使用标准typoscript对象，如TEXT、COA、CASE。

示例页面响应 ⬇️

数据处理

您可以使用数据处理程序，就像在FLUIDTEMPLATE内容对象中一样，例如。

lib.languages = JSON
lib.languages {
  dataProcessing {
    10 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
    10 {
      languages = auto
      as = languages
    }
  }
}

内置数据处理器

我们为无头渲染提供了多个数据处理器。

DatabaseQueryProcessor

用于从数据库中检索记录。

FilesProcessor

应用于处理文件（标准或媒体文件）。

它还允许您处理图像。有关详细信息，请参阅文档章节：图像。

GalleryProcessor

应与FilesProcessor（链式）一起使用。用于处理多个媒体文件。

MenuProcessor

用于导航。与标准菜单处理器类似。

FlexFormProcessor

用于处理flexforms。

RootSitesProcessor

为您的前端应用程序渲染所有无头站点的配置。

贡献

开发

此扩展的开发是作为TYPO3 PWA倡议的一部分进行的，请参阅https://typo3.org/community/teams/typo3-development/initiatives/pwa/如果您有任何问题，请加入#initiative-headless-pwa Slack频道。

鸣谢

特别感谢macopedia.com公司，该公司赞助了此解决方案的开发。