One Page template feasable?

[henkvantijen]

Hello, been experimenting with Publii with Simple and Massivly templates, and I like it.
A friend wants a One Page website. with the following features:

• a horizontal top menu bar (on non mobile)
• each menu item scrolls the page to a certain #bookmark
• if the user scrolls the page herself, the corresponding menu item is highlighted automagically
  Examples: https://bootstrapmade.com/demo/KnightOne/ or https://bootstrapmade.com/demo/Anyar/

Would it be possible to develop a One Page theme like that for Publii? My friend does not want to delve into html (let alone css..), so maybe the segments of the page could be separate posts ? (by #id ?)

Or is this just a bad fit for Publii (or any CMS...)?

[bobmitro]

It's not, Publii requires at least two pages (files): index (homepage) and the post page.

[bjazmoore]

It's not, Publii requires at minimum two pages (files): index (homepage) and the post page.

But you do not need to use the Post page. If you create a pages page and set it to the homepage and have no other pages then you have effectively a single page website. Can it scroll and hit menu items like you are suggesting. Maybe with some really well tailored JavaScript and CSS, but not out of the box - sorry.

This can be done with raw HTML/CSS/JavaScript, so a fancy CMS is not necessary, but it would probably be just a matter of choosing the write theme and plugins for WordPress.

That said - @bobmitro is too modest to suggest the custom development work that they do. I am sure that if you want it they and the budget is right the team behind Publii can make it happen.

[candidexmedia]

each menu item scrolls the page to a certain #bookmark

Scrolling to an anchor is definitely possible. Here's a quick demo I put together:

Essentially, here's what I did using the Simple Theme:

1. Create a new post using the WYSIWYG editor, and add your text + headings

2. Click on the source code button

4. Add unique IDs to each heading. The content here can also be copy-pasted into a LLM (ChatGPT, Claude, the like) with instructions to add the IDs, and then pasted back.

5. Apply the changes, then Save and close

6. Go to Theme > Layout > Homepage, and set the post you made as the homepage:

7. Create your menu in Menus, assign it to the Main menu, then add your menu items. Set the type as "External link", and give the External URL the ID value of the corresponding heading:

This could probably work with the "Internal link" type too, but I haven't been able to get it working (and I'm not 100% how that's meant to work anyway... couldn't find much in the docs)

if the user scrolls the page herself, the corresponding menu item is highlighted automagically
Examples: https://bootstrapmade.com/demo/KnightOne/ or https://bootstrapmade.com/demo/Anyar/

Based on the examples you sent, it looks like some JavaScript was used to toggle an "active" class:

I'm sure tons of code examples using plain JS + CSS exist on Codepen, though. Shouldn't be too difficult to implement by someone who knows what they're doing.

Would it be possible to develop a One Page theme like that for Publii? My friend does not want to delve into html (let alone css..), so maybe the segments of the page could be separate posts ? (by #id ?)

Would you be helping your friend develop the theme? I'm just not sure how it would be possible to create a custom theme like that without touching some html and css...

[bjazmoore]

That is fantastic. Thanks for figuring this out.