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.