Oggi rientrano in corsa, non come backend layout, ma come fluidpages. Questa estensione fa parte del mondo FEDEXT, e permette di personalizzare le pagine proprio come faceva templavoilà.
Ecco come facilmente possiamo creare un template nuovo per il nostro sito:
Struttura
La struttura si basa sulla struttura dei template di fluid (in realtà è un template di fluid esteso):
Nella cartella Layouts vanno messi i layouts che vengono usati, i partial li vediamo dopo, e nella cartella Page dentro a Templates i template di Fluid.
Il layout sarà una pagina HTML come questa:
- {namespace v=Tx_Vhs_ViewHelpers}
- <f:layout name="LayoutForNature2Column"/>
- <v:page.header name="fluitutorialheader">
- <f:render section="Resources" optional="TRUE" arguments="{_all}"/>
- </v:page.header>
- <div id='background'>
- <div class="menu">Qui ci metti il menu</div>
- <div class="colonnaDiSinistra"><v:page.content.render column="0"/></div>
- <div class="colonnaPrincipale"><v:page.content.render column="1"/></div>
- <div id="footer">Footer</div>
- </div>
Il layout quindi rappresenta l'intelaiatura del sito (o del template) e può essere condiviso da più template.
come vedete dal nome io ho chiamato il mio layout "LayoutForNature2Column.html" e l'ho messo nella cartella Layouts.
Il passo successivo è quello di creare il template vero e proprio, ecco un template:
Come vedete, anche questo è un template in formato fluid ed usa due namespace di viewhelpers: vhs e flux, entrambi creati in FEDEXT.
La sezione Configuration che inizia alla riga 10 è la griglia che definirà la struttura della pagina nel backend e con che colonna verranno salvati nella tabella tt_content.
Alla riga 11 è necessario definire l'id del template (univoco) e il titolo che sarà mostrato nella lista dei templates disponibili.
Dalla riga 12 alla 16 viene, invece, definita la tabella con le colonne e le righe, in questo caso semplicemente una riga con 2 colonne. Si può però creare una struttura molto più complessa con n righe, n colonne, colspan e rowspan.
Alla riga 20 invece viene creata la sezione Resources che era poi richiamata alla riga 5 del layout, e viene usato lo helper di Fluid render per recuperare il contenuto del file partial Resources.html che si trova dentro la cartella Partials.
Ritornando, invece, al layout alla riga 9 e alla riga 10 vengono recuperati i contenuti della colonna 0 e della colonna 1.
Per finire basta soltanto un piccolo typoscript da inserire ed il gioco è fatto:
Ed infine, come per templavoilà devo rendere la pagina e lo faccio usando il plugin di fluipages:
et voilà, il vostro sito è già funzionante, ora andate nel backend e nel tab appearance trovate la scelta del layout, sia per la pagina in cui siete, sia per le eventuali sottopagine.
come vedete dal nome io ho chiamato il mio layout "LayoutForNature2Column.html" e l'ho messo nella cartella Layouts.
Il passo successivo è quello di creare il template vero e proprio, ecco un template:
- {namespace v=Tx_Vhs_ViewHelpers}
- {namespace flux=Tx_Flux_ViewHelpers}
- <f:layout name="LayoutForNature2Column"/>
- <div xmlns="http://www.w3.org/1999/xhtml" lang="en"
- xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
- xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
- xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
- <f:section name="Configuration">
- <flux:flexform id="nature2column" label="Nature 2 Column">
- <flux:flexform.grid>
- <flux:flexform.grid.row>
- <flux:flexform.grid.column colPos="0" name="Left Column"/>
- <flux:flexform.grid.column colPos="1" name="Main Column"/>
- </flux:flexform.grid>
- </flux:flexform>
- </f:section>
- <f:section name="Resources">
- <f:render partial="Resources" section="Resources"/>
- </f:section>
- </div>
Come vedete, anche questo è un template in formato fluid ed usa due namespace di viewhelpers: vhs e flux, entrambi creati in FEDEXT.
La sezione Configuration che inizia alla riga 10 è la griglia che definirà la struttura della pagina nel backend e con che colonna verranno salvati nella tabella tt_content.
Alla riga 11 è necessario definire l'id del template (univoco) e il titolo che sarà mostrato nella lista dei templates disponibili.
Dalla riga 12 alla 16 viene, invece, definita la tabella con le colonne e le righe, in questo caso semplicemente una riga con 2 colonne. Si può però creare una struttura molto più complessa con n righe, n colonne, colspan e rowspan.
Alla riga 20 invece viene creata la sezione Resources che era poi richiamata alla riga 5 del layout, e viene usato lo helper di Fluid render per recuperare il contenuto del file partial Resources.html che si trova dentro la cartella Partials.
Ritornando, invece, al layout alla riga 9 e alla riga 10 vengono recuperati i contenuti della colonna 0 e della colonna 1.
Per finire basta soltanto un piccolo typoscript da inserire ed il gioco è fatto:
0: #include basic path for dynamic backend template 1: plugin.tx_fed { 2: page.NatureTheme { 3: templateRootPath = fileadmin/Resources/Private/Templates/ 4: partialRootPath = fileadmin/Resources/Private/Partials/ 5: layoutRootPath = fileadmin/Resources/Private/Layouts/ 6: } 7: } 8: 9: plugin.tx_flux.view.widget.Tx_Fluid_ViewHelpers_Widget_PaginateViewHelper.templateRootPath < plugin.tx_fed.page.fluidpages.templateRootPath 10: plugin.tx_news.view.widget.Tx_Fluid_ViewHelpers_Widget_PaginateViewHelper.templateRootPath < plugin.tx_fed.page.fluidpages.templateRootPath
Ed infine, come per templavoilà devo rendere la pagina e lo faccio usando il plugin di fluipages:
0: page = PAGE 1: page { 2: typeNum = 0 3: 4: 10 = USER 5: 10.userFunc = tx_extbase_core_bootstrap->run 6: 10.extensionName = Fluidpages 7: 10.pluginName = Page 8: }
et voilà, il vostro sito è già funzionante, ora andate nel backend e nel tab appearance trovate la scelta del layout, sia per la pagina in cui siete, sia per le eventuali sottopagine.
Nessun commento:
Posta un commento