[SOLVED] Create a Singlepage

Hey there,

i am looking for a possability to create a singlepage, but edit the content in the backend in individual pages.
How is it possible to render all children pages on the root page and changing the navigation links to anchor points?

Thanks for your help :slight_smile:

Hi @Matschess,

in this case i would create a starting page of page type “Your.Package:SinglePage” (for example) and only allow childnodes of type “Your.Package:SinglePageContent” or sth.
The pages of type “Your.Package:SinglePageContent” could then be iterated over inside the output of the main Single Page. You could use a custom prototype for this like so:

prototype(Your.Package:SinglePageContent) {
    # Your declarations here
}

prototype(Your.Package:SinglePageContentOutput) {
    # Will be used for rendering in the single page. You can add a wrapper with an id etc here.
    templatePath = 'resource://Your.Package/Private/NodeTypes/SinglePageContentOutput.html'
    attributes.id = ${q(node).property('uriPathSegment')} # Just as an example
}

prototype(Your.Package:SinglePage) {
    body {
        content = Neos.Fusion:Collection {
            collection = ${q(node).children('[instanceof Your.Package:SinglePageContent]')}
            itemRenderer = Your.Package:SinglePageContentOutput
            itemName = 'node'
        }
    }
}

And then simply output the content in your template like

{content -> f:format.raw()}

In the menu you could also use a collection but use an other itemRenderer so you can simply prefix the url with the uriPathSegment of the “subpage”.

Hope this helps as i only wrote the very basics of the idea. If you have questions, just ask.

Hey @BenjaminK,

thank you very much for your reply. I’ve tried out your suggested solution and it seems very evident.
Unfortunately something goes wrong. The output of SinglePage looks like: HTTP/1.1 200 OK (this string for every child page).
In the source code I can see that the output is the head section (indcluding metadata, stylesheets, …) of every child page.

What am I doing wrong here?

Thank you very much,
Matthias

You need @uhlmann here :wink: and here is a nice talk about their experience with long page:

Hey there,

Thank you very much. I have watched the video, but isn’t there a possibility to make the suggested solution from @BenjaminK to work?
The thing is that the node needs to be rendered. I have tried some things, but the very best what I’ve got is the path to the site as an output.
Otherwise I would be very happy of a suggestion from @uhlmann.

Thanks,
Matthias

Hi Matthias
When you create a little repo, I could take a look at it. Sorry for the short answer, I‘m responsing from my mobile right now.

Hey @Matschess,

here’s a little update of my example. Especially the output of the subpages:

prototype(Your.Package:SinglePageContent) {
    # Declaration of your page
}

prototype(Your.Package:SinglePageContentOutput) < prototype(Neos.Fusion:Tag) {
    # Will be used for rendering in the single page. You can add a wrapper with an id etc here.
    tagName = 'section'
    attributes.id = ${q(node).property('uriPathSegment')} # Just as an example

    content = Neos.Neos:ContentCollection {
        # you maybe need to adjust this or change the content collection
        # to "Neos.Fusion:Array" if you have multiple children on the subpages
        nodePath = 'main' 
    }
}

prototype(Your.Package:SinglePageContentMenuItem) < prototype(Neos.Fusion:Tag) {
    tagName = 'li'
    content = Neos.Fusion:Tag {
        tagName = 'a'
        attributes {
            href = Neos.Neos:NodeUri {
                node = ${site}
                format = 'html'
            }
            href.@process.addHash = ${value + '#' + q(node).property('uriPathSegment')}
        }
    }
}

prototype(Your.Package:SinglePage) {
    body {
        menu = Neos.Fusion:Tag {
            tagName = 'ul'
            content = Neos.Fusion:Collection {
                collection = ${q(node).children('[instanceof Your.Package:SinglePageContent]')}
                itemRenderer = Your.Package:SinglePageContentMenuItem
                itemName = 'node'
            }
        }
        content = Neos.Fusion:Collection {
            collection = ${q(node).children('[instanceof Your.Package:SinglePageContent]')}
            itemRenderer = Your.Package:SinglePageContentOutput
            itemName = 'node'
        }
    }
}

I also added the menu, which you can also implement with the built-in menu, but this depends on your preferences and the nesting of your pages.

Also a little Repo could help if you need further information :wink:

Hi @BenjaminK,

thank you very much, it works! But I’ve one more question. To render the main nodePath is not enough for this case because I wrap everything with a background section (with a background color and other attributes).

The prototype of the SinglePageContent looks like this:

background = Fusion:Tag {
    attributes.class = Fusion:RawArray {
        background = 'background'
        color = ${q(node).property('backgroundColor') ? q(node).property('backgroundColor') : false}
        alignment = ${q(node).property('alignment') ? 'align-' + q(node).property('alignment') : false}
    }
    content = PrimaryContent {
        nodePath = 'main'
    }
}

I have different kinds of SinglePageContent pages. Some have other background attritbutes, some with a Fusion:Array as content. Is it possible to render always the whole background section?

Thank you very much,
Matthias

Hi @Matschess,

so you mean you have pages like Your.Package:SubPage1, Your.Package:SubPage2, … that all render the background differently?

If so, i would suggest to do the following:

prototype(Your.Package:SubPage1) {
    # Declaration of your page, maybe some other nesting
    background = Neos.Fusion:Tag {
        attributes.class = Neos.Fusion:RawArray {
            # your classes here
        }
        content = PrimaryContent {
            nodePath = 'main'
        }
    }
}
# and the other pages

# so you can create a prototype for the output of each page
# and customize it like so
prototype(Your.Package:SubPage1Output) < prototype(Neos.Fusion:Tag) {
    # Will be used for rendering in the single page. You can add a wrapper with an id etc here.
    tagName = 'section'
    attributes.id = ${q(node).property('uriPathSegment')} # Just as an example

    # untested, but should work. If not, simply copy&paste.
    content = prototype(Your.Package:SubPage1).background
}

prototype(Your.Package:SinglePage) {
    body {
        content = Neos.Fusion:Collection {
            collection = ${q(node).children('[instanceof Neos.Neos:Document]')}
            itemRenderer = Neos.Neos:ContentCase {
                default {
                    # Use the original name appended with 'Output' as renderer
                    type = ${q(node).property('_nodeType.name') + 'Output'}
                }
            }
            itemName = 'node'
        }
    }
}
1 Like

Hi there,

thank you very much for your reply! You’re such a genius, it worked! Thanks @BenjaminK and thanks @uhlmann too.

Matthias

You’re welcome. If this is solved, could you please edit the title to [SOLVED] …?

Just for future searches: