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

时间:2018-01-08 13:20:40

标签: twitter-bootstrap typo3 fluid

我是TYPO3的新手。刚学会了如何使用Fluid编写模板并集成Bootstrap Framework。不知怎的,它奏效了。 https://enkomp.com

但我真的不明白,我如何将自己的HTML(来自模板)整合到TYPO3中 也许我用另一个简单的例子 - 粘性页脚

来学习它

我已将此放入我的模板boottpl.html

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

但是在将它加载到我的模板文件夹(其中存储其他模板并且正常工作)之后,粘性页脚不会显示在前端中。 我需要在哪里放置它?

2 个答案:

答案 0 :(得分:1)

您需要了解typoscript的用法和流体的文件夹结构。 并且使用了单词&#34; template&#34;。 在TYPO3中,多个项目称为模板:

  1. typoscript的记录
  2. 任何类型输出的原型(因此首选HTML)
    一个。 (旧)标记模板
    湾任何流体模板(Layouts/Partials/Templates/
    C。 Templates/文件夹
  3. 中的流体模板

    首先,您必须增强在typoscript模板(a)中定义的流体模板(b)的路径。

    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/
       }
    }
    

    现在为每个模板文件(b)首先扫描您的文件夹以查找匹配的文件,因此您的模板(b)可以覆盖默认文件。

    现在你需要知道模板文件的逻辑(c):

    任何电话都会转到位于Templates/文件夹中的模板文件(c) 该文件可以以<f:layout name="layoutname" />标记开头 如果给出了该标签,则渲染从布局模板开始(b)Layouts/layoutname.html 在该文件中,您可以调用部分(默认情况下从模板文件(c))和部分 因此,您使用较小的块渲染输出,您可以多次使用。

    通过这种方式,您还可以只替换一个块(例如部分块),而无需复制所有模板文件(b)。

答案 1 :(得分:0)

感谢您回答@Riccardo这不是我放在我的setup.ts中的代码(存储在... / 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
}

在我的模板中... / boottpl.html我通过section-tags建立连接:

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

对于name =“content”和name =“navigation”来说它确实工作得很好......我想,我已经理解了这个过程 - 但我无法使用粘性页脚来管理它