TYPO3 Agency - coding, design and website development

Fluidtemplate 3: 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:

  1. vytvoriť Backend layout, ktorý bude svojím rozložením zhodný s HTML šablónou
  2. stiahnuť a nahrať do zložky fileadmin/ všetky potrebné súbory pre použitú šablónu
  3. vytvoriť základnú šablónu pre Typo3
  4. 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":

  1. hlavičku
  2. obsah vľavo
  3. obsah v strede
  4. 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):

Backend layout: Úvodná stránka

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>&copy; 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>&copy; 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>

Výsledok použitia Bootstrap šablóny v Typo3 (frontend)

Jumbotron Template for Bootstrap
Súbory pre FLUIDTEMPLATE