[TYPO3-german] Struktureller Aufbau, Blogansicht

[bernd wilke]

Am 17.09.15 um 13:48 schrieb Ben Ner:
> Ich habe das PageTS entfernt und der Installation das css_styled_content
> und meine distribution hinzugefügt.
>
> In der Configuration/TypoScript/setup.txt steht folgendes:
> [code]
> <INCLUDE_TYPOSCRIPT:source="FILE:
> EXT:trend_distribution/Configuration/TypoScript/Setup/page.ts">
> <INCLUDE_TYPOSCRIPT:source="FILE:
> EXT:trend_distribution/Configuration/TypoScript/Setup/libs.ts">
> [/code]
>
> page.ts:
> [code]
> page = PAGE
> #page.config.metaCharset = utf-8
> page{
>      config{
>          metaCharset = utf-8
>          additionalHeaders = Content-Type:text/html;charset=utf-8
>      }
>
[...]
>
>      10 = FLUIDTEMPLATE
>      10{
>          file =
> EXT:trend_distribution/Resources/Private/Template/index.html
>          layoutRootPath = EXT:trend_distribution/Resources/Private/Layouts/
>          partialRootPath =
> EXT:trend_distribution/Resources/Private/Partials/
>          variables{
>              hallo = TEXT
>              hallo.value = Hallo welt
>              content < styles.content.get

[1]

>          }
>      }
>
> }
> [/code]
>
> libs.ts: (erzeugt ein Menu mit dropdowns, habe ich mir nur schonmal
> angeschaut, wird so nicht benötigt)
> [code]
> lib.field_topmenu = HMENU
> lib.field_topmenu{
>      entryLevel = 0
>      1 = TMENU
>      1{
>          wrap = <ul class="nav navbar-nav"> | </ul>
>          noBlur = 1
>          NO = 1
>          NO{
>              wrapItemAndSub = <li> | </li>
>              stdWrap.htmlSpecialChars = 1
>              ATagTitle.field = title
>          }
>          ACT <.NO
>          ACT{
>              wrapItemAndSub = <li class="active"> | </li>
>          }
>      }
> }
>
> lib.field_submenu = HMENU
> lib.field_submenu{
>      entryLevel = 0
>      1 = TMENU
>      1{
>          expAll = 1
>          wrap = <ul class="nav navbar-nav"> | </ul>
>          noBlur = 1
>          NO = 1
>          NO{
>              wrapItemAndSub = <li> | </li>
>              stdWrap.htmlSpecialChars = 1
>              ATagTitle.field = title
>          }
>          ACT <.NO
>          ACT{
>              wrapItemAndSub = <li class="active"> | </li>
>          }
>          IFSUB <.NO
>          IFSUB{
>              allWrap = <!!==:>|
>              wrapItemAndSub = <li class="dropdown">|</li>
>              ATagBeforeWrap = 1
>              linkWrap = |�<b class="caret"></b>
>              ATagParams = class="dropdown-toggle" data-toggle="dropdown"
>          }
>          ACTIFSUB <.IFSUB
>          ACTIFSUB{
>              allWrap = <!!==:>|
>          }
>      }
>
>      2 = TMENU
>      2{
>          wrap = <ul class="dropdown-menu" role="menu"
> aria-labelledby="dLabel">|</ul>
>          expAll = 1
>          NO = 1
>          NO{
>              allWrap = <li>|</li>
>              stdWrap.htmlSpecialChars = 1
>          }
>          ACT <.NO
>          ACT{
>              ATagParams = class="active"
>              allWrap = <li class="active">|</li>
>          }
>      }
> }
> [/code]
>
> resources/private/template/index.html:
> [code]
> <f:layout name="Default" />
> <f:section name="page">
>     <nav class="navbar navbar-inverse navbar-fixed-top">
>       <div class="container">
>         <div class="navbar-header">
>           <button type="button" class="navbar-toggle collapsed"
> data-toggle="collapse" data-target=".navbar-collapse">
>             <span class="sr-only">Toggle navigation</span>
>             <span class="icon-bar"></span>
>             <span class="icon-bar"></span>
>             <span class="icon-bar"></span>
>           </button>
>           <a class="navbar-brand" href="#">Project name</a>
>         </div>
>         <div class="collapse navbar-collapse">
>           <f:cObject typoscriptObjectPath="lib.field_topmenu" />

[*]

>         </div>
>       </div>
>     </nav>
>
>     <div class="container">
>
>          <div class="container">
>              <div class="navbar-header">
>                <button type="button" class="navbar-toggle"
> data-toggle="collapse" data-target=".navbarsub-collapse">
>                  <span class="sr-only">Toggle navigation</span>
>                  <span class="icon-bar"></span>
>                  <span class="icon-bar"></span>
>                  <span class="icon-bar"></span>
>                </button>
>                <a class="navbar-brand" href="#">Project name</a>
>              </div>
>              <div class="collapse navbar-collapse navbarsub-collapse">
>                <f:cObject typoscriptObjectPath="lib.field_submenu" />

[*]

>              </div>
>          </div>
>
>          <div class="starter-template">
>              <h1>{hallo}</h1>
>              <p class="lead"><f:format.raw>{content}</f:format.raw></p>
>          </div>
>
>     </div>
> </f:section>
> [/code]
>
> wie wäre in diesem Fall eine gute Vorgehensweise?


[*] so etwas hab ich jetzt schon öfters gesehen. Ich bin mir nicht 
sicher ob das so optimal ist.

Ich würde es anders realisieren (es gibt mal wieder diverse Lösungswege, 
vielleicht ist es ja egal, vielleicht beeinflusst es aber auch die 
Render-/ Response-Zeiten. vielleicht kann das mal wer testen?)

grundsätzlich versuche ich mein TS kleiner zu halten:
dazu verwende ich bevorzugt temp.* Objekte, die ich final irgendwo 
kopiere. zb.

temp.field_topmenu = HMENU
temp.field_topmenu {
	:
}

um später (Reihenfolge der includes beachten!) kopiert zu werden:
page.10.variables {
	:
	field_topmenu < temp.field_topmenu
}

(Wenn das gesamte TS zusammengeparst wurde werden alle temp.* Objekte 
gelöscht und mit dem restliche Konfigurations-Array wird das Rendering 
gestartet.)

dadurch habe ich das Menu fertig in einer Fluid-Variablen vorliegen. 
Achtung: im Fluid-Template wird das dann mit dem VH format.raw  eingebunden:
{field_topmenu->f:format.raw()}
was nur eine andere Schreibweise ist für
<f:format.raw>{field_topmenu}</f:format.raw>


bernd
-- 
http://www.pi-phi.de/cheatsheet.html