FLUIDTEMPLATE: Použitie Bootstrap šablóny
Verzia Typo3: 6.2
Zadanie
Uvedieme príklad nasadenia CSS frameworku Bootstrap.
Použijeme Typo3 objekt FLUIDTEMPLATE a HTML šablónu Jumbotron Template for Bootstrap.
Potrebujeme:
- vytvoriť Backend layout, ktorý bude svojím rozložením zhodný s HTML šablónou
- stiahnuť a nahrať do zložky fileadmin/ všetky potrebné súbory pre použitú šablónu
- vytvoriť základnú šablónu pre Typo3
- nastaviť Typoscript, ktorý spracuje použitú šablónu a naplní ju obsahom stránky
Poznámka: Bude to len jedna stránka (úvodná), ktorá bude zobrazovať štyri obsahové "boxy":
- hlavičku
- obsah vľavo
- obsah v strede
- obsah vpravo
Riešenie
Backend Layout
Názov: Úvodná stránka
Konfigurácia:
backend_layout {
colCount = 3
rowCount = 2
rows {
1 {
columns {
1 {
name = Hlavička
colPos = 0
colspan = 3
}
}
}
2 {
columns {
1 {
name = Vľavo
colPos = 1
}
2 {
name = Stred
colPos = 2
}
3 {
name = Vpravo
colPos = 3
}
}
}
}
}
Úvodnej stránke nastavíme tento layout, backend potom bude vyzerať takto (už s naplneným testovacím obsahom):

Bootstrap súbory
V zložke fileadmin/user_upload/fluidtemplate_3/ vytvoríme štruktúru zložiek so súbormi Boostrap šablóny:
- css/
- bootstrap.css
- jumbotron.css
- js/
- bootstrap.js
- ie10-viewport-bug-workaround.js
- ie-emulation-modes-warning.js
- jquery.js
- tmpl/
- Index.html
Súbor Index.html
Všetky CSS a JS súbory ponecháme bez zmien, ale Index.html si upravíme pre potreby FLUIDTEMPLATE:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<f:format.raw>{header}</f:format.raw>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<f:format.raw>{contentLeft}</f:format.raw>
</div>
<div class="col-md-4">
<f:format.raw>{contentMiddle}</f:format.raw>
</div>
<div class="col-md-4">
<f:format.raw>{contentRight}</f:format.raw>
</div>
</div>
<hr>
<footer>
<p>© Company 2015</p>
</footer>
</div>
Typoscript setup
page = PAGE
page {
includeCSS {
10 = fileadmin/user_upload/fluidtemplate_3/css/bootstrap.css
20 = fileadmin/user_upload/fluidtemplate_3/css/jumbotron.css
}
includeJS {
10 = fileadmin/user_upload/fluidtemplate_3/js/ie-emulation-modes-warning.js
}
includeJSFooter {
10 = fileadmin/user_upload/fluidtemplate_3/js/jquery.js
20 = fileadmin/user_upload/fluidtemplate_3/js/bootstrap.js
30 = fileadmin/user_upload/fluidtemplate_3/js/ie10-viewport-bug-workaround.js
}
}
page.10 = FLUIDTEMPLATE
page.10 {
file = fileadmin/user_upload/fluidtemplate_3/tmpl/Index.html
variables {
header < styles.content.get
contentLeft < styles.content.get
contentLeft {
select.where = colPos=1
}
contentMiddle < styles.content.get
contentMiddle {
select.where = colPos=2
}
contentRight < styles.content.get
contentRight {
select.where = colPos=3
}
}
}
Výsledok (frontend HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TS object FLUIDTEMPLATE 2 + Bootstrap</title>
<meta name="generator" content="TYPO3 6.2 CMS">
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_0be170db1d.css" media="all">
<link rel="stylesheet" type="text/css" href="fileadmin/user_upload/fluidtemplate_3/css/bootstrap.css" media="all">
<link rel="stylesheet" type="text/css" href="fileadmin/user_upload/fluidtemplate_3/css/jumbotron.css" media="all">
<script src="fileadmin/user_upload/fluidtemplate_3/js/ie-emulation-modes-warning.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>FLUIDTEMPLATE + Bootstrap</h1><p>This is a template for a simple marketing...</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Obsah vľavo</h2><p>Donec id elit non mi porta gravida at eget metus... (vľavo).</p>
</div>
<div class="col-md-4">
<h2>Obsah v strede</h2><p>Donec id elit non mi porta gravida at eget metus... (stred).</p>
</div>
<div class="col-md-4">
<h2>Obsah vpravo</h2><p>Donec id elit non mi porta gravida at eget metus... (vpravo).</p>
</div>
</div>
<hr>
<footer>
<p>© Company 2015</p>
</footer>
</div>
<script src="fileadmin/user_upload/fluidtemplate_3/js/jquery.js" type="text/javascript"></script>
<script src="fileadmin/user_upload/fluidtemplate_3/js/bootstrap.js" type="text/javascript"></script>
<script src="fileadmin/user_upload/fluidtemplate_3/js/ie10-viewport-bug-workaround.js" type="text/javascript"></script>
</body>
</html>
Generátor typoscriptu
Vytvára typoscript pre bežné použitie. Generátor je jednoduchý na obsluhu, stačí vyplniť zopár položiek formulára.