TYPO3 Agency - coding, design and website development

Typoscript objekt FLUIDTEMPLATE

Zadanie

V príklade si ukážeme najjednoduchšie použitie objektu FLUIDTEMPLATE
na zobrazenie stránky so základnými prvkami:

  • názov stránky (title)
  • menu (menu)
  • obsah (content)
  • statický text (footer)

 

Riešenie

TS setup

config {
  disableAllHeaderCode = 1
}

temp.menu = HMENU
temp.menu {
  special = directory
  special.value = 24
}
temp.menu.1 = TMENU
temp.menu.1 {
  wrap = <ul>|</ul>
  NO {
    allWrap = <li>|</li>
    ATagTitle.field = title
  }
}

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/user_upload/fluidtemplate/index.html
  variables {
    # page title
    title = TEXT
    title {
      field = title
    }
    # main menu
    menu < temp.menu
    # page content
    content < styles.content.get
    # static footer info text
    footer = TEXT
    footer {
      value = Powered by CMS Typo3
    }
  }
}

HTML šablóna (súbor index.html)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Example of using Typoscript object FLUIDTEMPLATE.">
        <title>{title}</title>
        <link href="fileadmin/user_upload/fluidtemplate/style.css" rel="stylesheet">
    </head>
    <body>
        <section>
            <header>
                <h1>{title}</h1>
                <nav>
                    <f:format.raw>{menu}</f:format.raw>
                </nav>
            </header>
            <article>
                <f:format.raw>{content}</f:format.raw>
            </article>
            <footer>
                {footer}
            </footer>
        </section>
    </body>
</html>

Výsledok

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Example of using Typoscript object FLUIDTEMPLATE.">
        <title>TS object FLUIDTEMPLATE</title>
        <link href="fileadmin/user_upload/fluidtemplate/style.css" rel="stylesheet">
    </head>
    <body>
        <section>
            <header>
                <h1>TS object FLUIDTEMPLATE</h1>
                <nav>
                    <ul>
                        <li><a href="index.php?id=25" title="Úvod">Úvod</a></li>
                        <li><a href="index.php?id=26" title="Novinky">Novinky</a></li>
                        <li><a href="index.php?id=27" title="Wiki">Wiki</a></li>
                        <li><a href="index.php?id=28" title="Kontakt">Kontakt</a></li>
                    </ul>
                </nav>
            </header>
            <article>
                <p>The TypoScript object FLUIDTEMPLATE works in a similar way to the regular...</p>
            </article>
            <footer>
                Powered by CMS Typo3
            </footer>
        </section>
    </body>
</html>