TYPO3 Agency - coding, design and website development

Fluidtemplate 4: Použitie Layout-u

Verzia Typo3: 7.6 >

Zadanie

Pri nasadzovaní HTML šablón do Typo3 sa stále dookola opakuje jeden problém - ako efektívne zariadiť prepínanie vzhľadu stránky. Má to viacero možných riešení, ktorých je dosť na to, že sa mi ich nechce ani len vymenovať. Problém sa v zásade skladá z dvoch častí:

  1. backend: samotný vzhľad, ktorý by sa mal podobať usporiadaniu na frontende a ako umožniť užívateľovi prepínať tento vzhľad súčasne pre backend a frontend,
  2. frontend: zmena vzhľadu stránky podľa nastavenia v backende.

V článku sa pozrieme na jedno z inteligentnejších riešení, použijeme Backend Layouts (backend) v kombinácii s TypoScript objektom FLUIDTEMPLATE a jeho vlastnosti layoutRootPaths a templateName (frontend).

Riešenie

Vytvoríme dva rôzne vzhľady stránok (samozrejme v praxi ich môže byť viac):

  • úvodná stránka (hlavička a tri stĺpce),
  • obsahová stránka (len jeden stĺpec obsahu).

Úvodná stránka

backend_layout {
colCount = 3
rowCount = 2
rows {
1 {
columns {
1 {
name = Header
colspan = 3
colPos = 0
}
}
}
2 {
columns {
1 {
name = Left
colPos = 1
}
2 {
name = Middle
colPos = 2
}
3 {
name = Right
colPos = 3
}
}
}
}
}

Obsahová stránka

backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Content
colPos = 0
}
}
}
}
}

Po vytvorení stránok nastavení Backend Layouts a po naplnení "nejakého" obsahu dostaneme takúto nádheru:

Backend Layout: Úvodná stránka
Backend Layout: Úvodná stránka
Backend Layout: Obsahová stránka
Backend Layout: Obsahová stránka

TypoScript Setup

  • layoutRootPaths: umiestnenie základnej kostry HTML ("puzdro" pre Templates)
  • templateName: názov použitej HTML šablóny; nastavuje sa podľa Backend Layout-u rekurzívne (to znamená, že ak aktuálna stránka nemá nastavený vlastný Backend Layout, preberie sa z rodičovskej stránky z vlastnosti "Backend Layout (subpages of this page)", príklad takéhoto nastavenia je na obrázku vpravo)

Poznámka: Tento TypoScript by sa dal vylepšiť, ale schválne som ho zredukoval len na časti podstatné pre tento článok.

config {
language = en
locale_all = en_GB
htmlTag_langKey = en
metaCharset = utf-8
doctype = html5
baseURL = https://www.domain-name.com/dev/
simulateStaticDocuments = 0
no_cache = 0
}

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
layoutRootPaths {
10 = fileadmin/fluidtemplate/tmpl/Layouts
}
partialRootPaths {
10 = fileadmin/fluidtemplate/tmpl/Partials
}
templateRootPaths {
10 = fileadmin/fluidtemplate/tmpl/Templates
}
templateName = TEXT
templateName.stdWrap.cObject = CASE
templateName.stdWrap.cObject {
key {
data = levelfield:-1, backend_layout_next_level, slide
override.field = backend_layout
}
default = TEXT
default.value = Content.html
1 < .default
2 = TEXT
2.value = Homepage.html
}
variables {
content < styles.content.get
header < .content
left < styles.content.get
left.select.where = colPos = 1
middle < styles.content.get
middle.select.where = colPos = 2
right < styles.content.get
right.select.where = colPos = 3
}
}
Nastavenie vlastností stránky Backend Layout

HTML templates

Layout ("puzdro")

Súbor: fileadmin/fluidtemplate/tmpl/Layouts/Default.html

Element <f:render section="main" /> vyrenderuje v tomto bode príslušnú šablónu podľa nastavenia Backend Layout (Templates/Homepage.html alebo Templates/Content.html).

<header> 
<h1>{data.title}</h1>
</header>
<nav>
<!-- Navigation -->
</nav>
<main>
<f:render section="main" />
</main>
<footer>
<!-- Footer -->
</footer>

Template Homepage (úvodná stránka)

Súbor: fileadmin/fluidtemplate/tmpl/Templates/Homepage.html

<f:layout name="Default" />
<f:section name="main">
<header>
<f:format.html>{header}</f:format.html>
</header>
<section>
<article id="left">
<f:format.html>{left}</f:format.html>
</article>
<article id="middle">
<f:format.html>{middle}</f:format.html>
</article>
<article id="right">
<f:format.html>{right}</f:format.html>
</article>
</section>
</f:section>

Template Content (obsahová stránka)

Súbor: fileadmin/fluidtemplate/tmpl/Templates/Content.html

<f:layout name="Default" />
<f:section name="main">
<section>
<f:format.html>{content}</f:format.html>
</section>
</f:section>

Výsledok (frontend HTML)

Kódy sú kvôli lepšej prehľadnosti skrátené.

Homepage

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="TYPO3 CMS">
<base href="https://navstevnik.spisskanovaves.eu/dev/">
<title>Homepage</title>
<body>
<header>
<h1>Homepage</h1>
</header>
<nav>
<!-- Navigation -->
</nav>
<main>
<header>
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</header>
<section>
<article id="left">
<h3>Left col</h3>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus...</p>
</article>
<article id="middle">
<h3>Middle col</h3>
<p>Etiam blandit vitae erat at pulvinar...</p>
</article>
<article id="right">
<h3>Right col</h3>
<p>Vestibulum ac lectus sapien. Nunc venenatis lacus et massa...</p>
</article>
</section>

</main>
<footer>
<!-- Footer -->
</footer>
</body>
</html>

Content

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="TYPO3 CMS">
<base href="https://navstevnik.spisskanovaves.eu/dev/">
<title>Content</title>
<body>
<header>
<h1>Content</h1>
</header>
<nav>
<!-- Navigation -->
</nav>
<main>
<section>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Donec non ligula vel nisi pharetra dictum...</p>
</section>

</main>
<footer>
<!-- Footer -->
</footer>
</body>
</html>