[SOLVED] Separation of Templates

Using Neos & Flow Frontend & Integration
1

Hello,

i’m pretty new to Neos so i was using a Neos Workshop Tutorial from Daniel Lienert. What i wan’t to do now is separating my template into sections. I haven’t found anything in the web so far thats why i thought im going to ask you guys how you do it. What i actually want to do right now is separate the footer, like in an footer.html file, and link it to my Default.html. The footer should not be editable by an editor, so i guess it shoud be easy :wink:

It’s possible to just add the template part to the Default.html, but in my opinion it’s a little bit messy.

Thank you very much!

2

Hey Ben,

yep separate your code in small parts and compose your site from it is best practice and also pretty easy. If you want to use Fluid, just define a new Fusion prototype:

Footer.fusion:

prototype(YourProject:Footer) < prototype(Neos.Fusion:Template) {
   templatePath = 'resource://YourProject/Private/Templates/Footer/Footer.html'
}

Footer.html:

<footer>
</footer>

And use it in you Page Fusion:

Footer = YourProject:Footer

Since Neos 3.3 another way is to use Fusion Components to structure your code and build small reusable components. https://www.neos.io/blog/atomic-fusion.html would be a good starting point to dive into that topic.

Cheers,
Daniel

1 Like
3

Hey Daniel,

thank you very much! I’m going to try that asap! :slight_smile:

Regards,
Ben

4

Hey Daniel,

it worked well with the footer! Thank you very much! So I’ve tried to do the same with my Navigation and i’ve created a Navigation.html and added a Navigation.fusion file with the referring template in it. But inside this Template i’m not able to call

{parts.menu -> f:format.raw()}, to get the menu levels, but it’s working inside my Default.html

(It’s a complex navigation, with a lot of levels which only should be visible on different templatefiles, and sometimes inside the body)

/Edit/

I want to separate it to something like this:

00_LandingPage.html
10_Navigation.html
–11_Element.html
–12_Secondlevel.html
–13_Dropdown.html
20_Search.html
30_Content.html
40_Footer.html
–41_Breadcrumb.html
–42_SocialMedia.html
–43_Quicklinks.html

For example, the footer is separted in breadcrumbmenu, socialmedia and quicklinks but the parent element is the LandingPage which has a reference to the footer like: {content.footer -> f:format.raw()}. This is working well, but new references inside the footer won’t show up.

I’ve added something like this:

prototype(vendorNamespace:Footer) < prototype(Neos.Fusion:Template) {
   templatePath = 'resource://vendorNamespace/Private/Templates/Page/40_Footer.html'
}
prototype(vendorNamespace:Breadcrumb) < prototype(Neos.Fusion:Template) {
   templatePath = 'resource://vendorNamespace/Private/Templates/Page/Footer_Partials/41_Breadcrumb.html'
}

and referenced in my Root.fusion under content { }:

footer = vendorNamespace:Footer { }
and
breadcrumb = vendorNamespace:Breadcrumb { }

but it’s not possible to get the breadcrumb via:
{content.breadcrumb -> f:format.raw()}
@ the 40_Footer.html, everything is just working inside the landingpage.

/Edit done/

Do you know how i can manage this? :slight_smile:

Greetings,
Ben

5

Luckily i found a solution for my needs by stacking my template like this:

footer = vendorNamespace:Footer {
    breadcrumb = vendorNamespace:Breadcrumb {
    }
}

But it wasn’t working like this way: {content.breadcrumb -> f:format.raw()}

It just worked with <ts:render path="footer" /> and using the namespace for ts with {namespace ts=Neos\Fusion\ViewHelpers}