[Markdown] 

Creating Website with Hubzilla: 5. Layouts

Layouts

Disclaimer: This part I'm still figuring out myself, but I'm hoping to give you a basic idea from which to get started.

Now, as stated at the end of the page creation tutorial, without layouts the page is very basic, with no sidebars.

There is a section in the Hubzilla help about the Comanche language, but at this point I'm still trying to make sense of it. I'm giving you the gist here of what I figured out so far.

The page layouts are based on regions.

There are several pre-configured regions. For some very basic structuring, you only need two, really: the aside and content regions. Those will give you a sidebar on the left and the content area. There is also right_aside, which will add a second sidebar on the right; be aware though that there is currently no way to show this one in the mobile interface.

Now let's set up a basic example.

Open the Webpages app, and click on "Layouts" on the left, then click on "Create". Give your layout a name to easily identify it by. I'm calling this one "two-pane".

Now, in the big input field, where it says "Share" and where you would normally write your post or page content, write the following:

[region=aside]
[widget=profile][/widget]
[/region]
[region=content][/region]

This will create a sidebar to the left of your content with the profile widget (same as on your channel home, with your profile picture, short info, and connection list (unless hidden).)

Now, this looks much better already: Simple two-column layout with profile widget

There is a List of widgets that you can add.

You can also add custom menus to the sidebar:

[region=aside]
[widget=profile][/widget]
[menu]main[/menu]
[/region]
[region=content][/region]

This will add the menu we created in an earlier step: Two-column layout with Menu

If you named the menu something else, this is what would have to go in between the two menu tags:

[menu]my-awesome-links[/menu]

Finally (for this tutorial at least), you can add Blocks to your layout:

[region=aside]
[widget=profile][/widget]
[block]about-me[/block]
[menu]main[/menu]
[/region]
[region=content][/region]

I added the "About Me" block we created earlier, and I put it in above the menu "Main", as in this case it makes more sense:

Added block About Me to layout

Now, whenever you create a new page, you can select your newly created layout:

New page with layout picker

Here's a live link to the page I created in this tutorial.