完全控制 TYPO3 的 HTML 输出答案

【问题标题】：Complete control over HTML output from TYPO3完全控制 TYPO3 的 HTML 输出
【发布时间】：2015-02-06 02:36:48
【问题描述】：

我正在 TYPO3 中建立一个使用 AngularJS 的站点。要在 body 上获得正确的 CSS 类，我需要编辑 <body> 标签。我还想完全控制模板中的 HTML 输出。

我目前的尝试是使用从后端配置的模板：

page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/Template/index.html

这会输出以下 HTML：

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<!-- 
    This website is powered by TYPO3 - inspiring people to share!
    TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
    TYPO3 is copyright 1998-2014 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
    Information and contribution at http://typo3.org/
-->

<title>My site - Title from Typo3</title>
<meta name="generator" content="TYPO3 6.2 CMS">

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_8b9c2e8d89.css?1418032603" media="all">

</head>
<body>

<!-- HTML basics -->
<!-- My template start here -->
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="ie lt-ie9 lt-ie8 lt-ie7" ng-app="app"> <![endif]-->
<!--[if IE 7]>         <html class="ie lt-ie9 lt-ie8" ng-app="app"> <![endif]-->
<!--[if IE 8]>         <html class="ie lt-ie9" ng-app="app"> <![endif]-->
<!--[if gt IE 8]><!--> <html ng-app="app"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My site - Title from template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" CONTENT="noindex, nofollow">

Templates guide in documentation 不会告诉高级的东西，比如把整个模板换成别的东西。

我可以为此使用扩展程序吗？
我可以为我的模板创建扩展吗？
我的模板如何创建添加内容的 TYPO3 占位符？

我想将我的模板和 CSS/Javascript 放在存储库中，而不是在后端 GUI（数据库）中配置。

相关问题：TYPO3 integrating HTML

【问题讨论】：

您的帖子中有很多不同的问题

标签： html angularjs templates typo3

【解决方案1】：

您应该试试Templating Tutorial，而不是阅读Getting Started Guide：http://docs.typo3.org/typo3cms/TemplatingTutorial/

您可以将所有 TS 排除在文件中，并将其仅包含在一个模板记录中。这就是Introduction Package 正在做的事情。 http://docs.typo3.org/typo3cms/TyposcriptSyntaxReference/Syntax/Includes/Index.html

【讨论】：

【解决方案2】：

对于“完全控制模板”问题还有另一种鲜为人知的解决方案

http://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Config/Index.html#pagerenderertemplatefile

config.pageRendererTemplateFile = my/path/template.html

然后您可以从typo3/sysext/tslib/template/tslib_page_frontend.html 复制模板并根据需要对其进行编辑，例如

###XMLPROLOG_DOCTYPE###
<!--[if lt IE 7 ]> <html lang="de" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="de" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="de" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="de" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
  <html lang="de" class="no-js"> 
<!--<![endif]-->
###HEADTAG###

###METACHARSET###
###INLINECOMMENT###

###BASEURL###
###SHORTCUT###
###TITLE###
###META###

###CSS_INCLUDE###
###CSS_INLINE###

###JS_LIBS###
###JS_INCLUDE###
###JS_INLINE###

###HEADERDATA###
</head>
###BODY###
###JS_LIBS_FOOTER###
###JS_INCLUDE_FOOTER###
###JS_INLINE_FOOTER###
###FOOTERDATA###
</body>
</html>

如果这真的很强大（我在一个站点上拥有它并且没有任何问题），那么与config.disableAllHeaderCode 相比的优势在于 - 例如 - 您仍然可以获取包含默认 JS 的能力，例如解密config.spamProtectEmailAddresses 的函数，否则，您必须手动添加。

要输出 RSS 提要，我也更喜欢config.disableAllHeaderCode，但如果是关于输出 HTML 文档，这可能是一个可行的选择。

我可以为我的模板创建扩展吗？

现在将模板保留在扩展中被认为是一种很好的做法。我个人仍然在fileadmin/templates/myproject 中拥有它们

我的模板如何创建添加内容的 TYPO3 占位符？

请参阅@pcampe 答案中的链接。您可以直接从 FLUIDTEMPLATE 开始，因此您将学习最新的模板语言。开始使用 TYPO3 需要阅读一些基本文档。

我想将我的模板和 CSS/Javascript 放在存储库中，而不是在后端 GUI（数据库）中配置。

你是对的，这也是最佳实践，请参阅@pgampe 的链接。在数据库中，你只有。

<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templates/main/ts/config.ts">

甚至（我说对了吗？）：

<INCLUDE_TYPOSCRIPT: source="FILE: EXT:mytemplateext/path/to/config.ts">

等等。包括 TypoScript 也适用于 Page TSConfig 和 User TSConfig。我不想以任何其他方式工作！

您还需要为您喜欢的编辑器获取代码着色，例如对于崇高在这里：https://sublime.wbond.net/packages/TypoScript

【讨论】：

【解决方案3】：

您不需要创建任何扩展，因为可以使用 TypoScript（设置字段）轻松禁用它

config.disableAllHeaderCode = 1

@See the docs

当然，在这种情况下，您需要将所有标题添加到模板中。

当你想通过 bootsrtap 将 Extbase ext 中包含的纯 JSON（或其他数据）渲染到指定 typeNum 时，此标志也很有用

【讨论】：