Homepage blokken

Thema component
1
:information_source: Summary Build a custom homepage with configurable block components
:hammer_and_wrench: Repository Manuel Kostka / Discourse / Blocks / Homepage Blocks · GitLab
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This component combines features from Right Sidebar Blocks and the custom homepage route. It initializes the route and allows you to organize content blocks on the homepage, offering flexibility in layout and content presentation.

Below are two example views: the first shows a homepage with basic blocks stacked on top of each other, while the second demonstrates the same layout with custom styles applied:

Screenshot 2025-01-14 at 10-40-23 Homepage Blocks
Screenshot 2025-01-14 at 10-40-23 Homepage Blocks1486×1654 215 KB

Screenshot 2025-01-14 at 10-41-01 Homepage Blocks
Screenshot 2025-01-14 at 10-41-01 Homepage Blocks1486×2797 321 KB

Editing blocks

You can customize blocks through the component settings. Each block is added by specifying its Ember component name:

A screenshot of an interface with multiple dropdown menus and name inputs labeled "block-banner", "block-top-tags", and "block-upcoming-events", among others. (Captioned by AI)
A screenshot of an interface with multiple dropdown menus and name inputs labeled "block-banner", "block-top-tags", and "block-upcoming-events", among others. (Captioned by AI)726×1152 46.5 KB

After adding a block, you can adjust its properties using available parameters:

The image shows a user interface with text fields for a "block banner," including title, subtitle, and class options. (Captioned by AI)
The image shows a user interface with text fields for a "block banner," including title, subtitle, and class options. (Captioned by AI)726×753 28.9 KB

Available blocks

You can add any Ember component using its component name. Additionally, I have a collection of blocks available at Blocks · GitLab. These are primarily variations from Right Sidebar Blocks.

For detailed information on each block, like the component name, available parameters and template layout, refer to their README file.

A documentation page for the "Featured List" block component, detailing parameters and template code for creating a featured list with multiple filters. (Captioned by AI)
A documentation page for the "Featured List" block component, detailing parameters and template code for creating a featured list with multiple filters. (Captioned by AI)964×1114 57.8 KB

23 likes
2

This is really cool, Manuel, good job! :+1:

4 likes
3

@nolo kan dit ook gebruikt worden om aangepaste pagina’s te maken en ze toe te voegen aan de zijbalknavigatie?

4

Dit is een layout-oplossing voor de aangepaste homepage-route. Natuurlijk kun je iets soortgelijks gebruiken op andere nieuwe routes. Maar het creëren van deze routes en het integreren ervan in je app is een andere taak.

1 like
7

Fout: Poging om een dynamisch component op te lossen met een stringdefinitie, block-banner in een strict mode template. In strict mode is het gebruik van strings om componentdefinities op te lossen verboden. Je kunt de componentdefinitie in plaats daarvan importeren en direct gebruiken.
Ik krijg deze foutmelding.

1 like
8

Thanks for reporting @xin_wei. Though I can’t reproduce, on Discourse version 3.6.0.beta1-dev and using my block component from Manuel Kostka / Discourse / Blocks / Banner · GitLab.