Templating
Die AMP-Erweiterung nutzt einfache Fluid-Templates zum Rendern der AMP-Seiten. Normalerweise brauchen Sie den Partial-Rootpath nur überschreiben, wenn Sie Ihre eigenen Fluid-Templates erstellen wollen. Hierfür müssen Sie die TypoScript-Konstante für den Partial-Rootpath auf Ihren Partial-Ordner setzen:
Im Partial-Order finden Sie eine Header.html und eine Footer.html. Diese beiden Dateien werden in allen AMP-Ansichten verwendet. Wenn Sie beispielsweise Ihr grafisches Design für den Kopf-Bereich in die Datei Header.html einfügen, wird es von der AMP-Erweiterung für alle AMP-Ansichten auf Ihrer Website (News, OpenImmo, ...) verwendet. Es gibt auch Partial-Dateien für jede Erweiterung. Der Name jeder Partial-Datei ist der Erweiterungsschlüssel (extension-key) der zugehörigen Erweiterung (upper-camel-case). Diese Dateien enthalten Formatierungen für die Datensätze der Erweiterung und werden zwischen header.html und Footer.html angezeigt.
Kopf-Bereich (Header)
Der Kopf-Bereich (Header) beinhaltet normalerweise das Logo der Webseite mit einer Verlinkung zu Startseite. Der Standard Kopf sieht wie folgt aus:
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:amp="http://typo3.org/ns/CodingMs/Amp/ViewHelpers">
<f:section name="Default">
<!-- Header:start -->
<f:if condition="{settings.header.logo.main.file}">
<a href="{settings.baseurl}" class="logo">
<amp-img src="{f:uri.image(
src: settings.header.logo.main.file,
width: settings.header.logo.main.width,
height: settings.header.logo.main.height
)}"
width="{settings.header.logo.main.width}"
height="{settings.header.logo.main.height}"
class="logo"
layout="responsive"
alt="{settings.header.logo.main.title}"
title="{settings.header.logo.main.title}"></amp-img>
</a>
</f:if>
<hr />
<!-- Header:end -->
</f:section>
</div>
Dieser Kopf kann mit den folgenden TypoScript-Konstanten konfiguriert werden:
themes.configuration {
extension {
amp {
header {
logo {
file =
width = 230
height = 71
title = TYPO3-AMP - Accelerated mobile pages for TYPO3
alt = TYPO3-AMP - Accelerated mobile pages for TYPO3
}
}
}
}
}
Fußzeile (Footer)
Die Fußzeile beinhaltet normalerweise das Urheberrechte (Copyright Notiz) und einen Link zur Web-Version dieser Anzeige. Dies können so aussehen:
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:amp="http://typo3.org/ns/CodingMs/Amp/ViewHelpers">
<f:section name="Default">
<!-- Footer:start -->
<hr />
<a href="{f:cObject(typoscriptObjectPath: 'lib.amp.canonicalUrl')}">
<f:translate key="tx_amp_label.display_web_version"/>
</a>
<!-- Footer:end -->
</f:section>
</div>
Info:
Stellen Sie sicher, dass Sie einen gültigen AMP-Quellecode verwenden - überprüfen Sie es einfach hier: https://validator.ampproject.org/
Wenn Sie die AMP PRO-Version verwenden, können Sie ein Kontakt-Formular anzeigen. Ihre Besucher können das Formular verwenden, um auf einfache Weise Anfragen zu erstellen, ohne die Ansicht zu verlassen. Eine Integration könnte so aussehen:
<!-- Footer-Form:start -->
<amp:extension.loaded extensionName="AmpPro">
<f:if condition="{settings.amp.forms.contact.enabled}">
<amp:render.template file="EXT:amp_pro/Resources/Private/Templates/Amp/Form.html"
variables="{form: settings.amp.forms.contact, settings: settings}"
paths="{amp:variable.typoscript(path: 'plugin.tx_amp.view')}" />
</f:if>
</amp:extension.loaded>
<!-- Footer-Form:end -->
Info:
Um einen kleineren, optimierten Quellcode zu erhalten, testen Sie die Erweiterung sourceopt. Sie finden die Erweiterung im TYPO3-TER: https://typo3.org/extensions/repository/view/sourceopt.