如何在Typo3中集成“自己的” HTML

Question

I'm pretty new to TYPO3. Just learned how to write a template with Fluid and integrate the Bootstrap Framework. Somehow it worked. https://enkomp.com

But I really haven't understand, how I integrate my own HTML (from the template) into TYPO3 Maybe I learn it with another easy example - a sticky footer

I have put this into my template boottpl.html

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

But after loading it in my templatefolder (where the other template is stored AND works) the sticky footer doesn't show up in the frontend. Where do I need to place it?

Answer 1

You need to understand the usage of typoscript and the folder-structure of fluid. And the usage of the word "template". In TYPO3 multiple items are called template:

1. the records for typoscript
2. the prototypes for any kind of output (so HTML is preferred)
   a. (old) marker templates
   b. any fluid templates ( Layouts/ , Partials/ and Templates/ )
   c. the fluid templates in the Templates/ folder

First you have to enhance the pathes to the fluid templates(b) which is defined in a typoscript template(a).

lib.fluidContent {  
   // use `lib.contentElement` for TYPO3 8
   templateRootPaths {
      200 = EXT:your_extension_key/Resources/Private/FSC/Templates/
   }
   partialRootPaths {
      200 = EXT:your_extension_key/Resources/Private/FSC/Partials/
   }
   layoutRootPaths {
      200 = EXT:your_extension_key/Resources/Private/FSC/Layouts/
   }
}

now for each template file(b) your folders are scanned first for a matching file and so your templates(b) can override the default ones.

now you need to know the logic of template files(c):

Any call goes to a template file(c) located in the Templates/ folder.
That file can start with a <f:layout name="layoutname" /> tag.
If that tag is given the rendering starts at the layout template(b) Layouts/layoutname.html .
In that file you can call sections (by default from your template file(c)) and partials.
So you render your output with smaller blocks, you can use multiple times.

In this way you also can replace just one single block (eg partial) without the need to copy all template files(b).

Answer 2

Thank you for answering @Riccardo Here't the code I put inside my setup.ts (stored under .../fileadmin/...:

page = PAGE
page {
10 = FLUIDTEMPLATE
10 {
    file = fileadmin/private/templates/boottpl.html
    partialRootPath = fileadmin/private/partials
    layoutRootPath = fileadmin/private/layouts

    variables {


    mitte < styles.content.get
    mitte.select.where = colPos=0


    }

}

includeCSS.bootmin = fileadmin/private/frameworks/bootstrap-3.3.7/css/bootstrap.min.css
includeCSS.boot = fileadmin/private/frameworks/bootstrap-3.3.7/css/bootstrap.css
includeCSS.startertemplate = fileadmin/private/styles/starter-template.css

includeJSFooter.jquery = fileadmin/private/frameworks/jquery-3.2.1.min.js
includeJSFooter.bootjs = fileadmin/private/frameworks/bootstrap-3.3.7/js/bootstrap.min.js
}

within my template .../boottpl.html I make the connection via section-tags:

<f:section name="content">        
    {mitte -> f:format.raw()}
</f:section>

Well it does work perfectly fine for the name="content" and name="navigation"...and I thought, that I've understood that process - but I couldn't manage it with the sticky footer 😕