Use DM Editor to make section layout
DM Editor is not only for page making, but also can be used for layout making. This article demo dynamically displaying content based on menu click, and shares some layout thinking.
In version 0.2.1, DM Editor introduced 2 widgets: section menu and Content view.
Conceptually, the content view widget is to show content from another content, like another page, block depending on specific CMS's concept. DM Editor's content-view widget can show fixed content, or from menu.
Section layout scenarios
A typical section layout scenario is "Sub menu" or "Side menu" with content inside. If a company website has a "About us" menu, then it can have "About", "History", "Employee".
Below shows how how menu and content-view together create some 'section layout'.
Create layout
Step 1: add a section menu
We added a section menu with "Arrangement" and "Photo" where value is another page/block's id.
Step 2: add a content view
We add a content view block.
You can choose content from other place, then the content will be shown, but then it's a fixed content, meaning it's not connected to the section menu.
Also you can use dependency from a section menu, which is our case here.
Step 3: see result
The result looks like below. When clicking a menu item, the content is change to what the menu item refers to(using 'value'). It's the same in frontend.
Styling
You can style menu like align to right, more padding, background, or make position like vertical(so the menu is up down), by developing widget style for section menu.
You can customize content view like padding, background color, etc.
You can even put a 2 columns layout under the menu and put content-view inside the layout.
Development
See here (coming soon) about how to develop content-view rendering.
Further ideas
The section menu and content view bring some interesting thoughts about how to use it properly:
- When to use tabs and when to use section menu?
- Can we use content view to make template page for dynamic content, eg. news detail?
- Bolder idea: can we use section menu and content view for base layout where the main is a content view
Below can explain it more.
Thought: section menu or tabs?
With widget style tabs widget can have similar result as section menu, should we use tabs?
The key difference between tabs and section menu is: tabs load everything at once, which affects:
- Performance. When content is too much, tabs loading can be slow.
- SEO. Tabs shows content when click, so it's using hidden content, while section menu uses independent page, which is more SEO friendly.
Of course with small amount of data, tabs has its advantage of performance.
Idea: can we use similar way for news detail page?
Kind of yes - but use "Content View" only, as you don't need "section menu" here.
The advantage is that the news detail template will be a DM Editor page, which brings flexibility - you can add general message, or the layout online.
For example, url /news?id=3 is a news detail page, and /news is the news detail 'template' page, where you just need to add a "Content View" widget and set its data source to use parameter "id".
Idea: use this way for base layout?
Since DM Editor can do layout, how about using it for whole layout? eg. base layout is a DM Editor data and page is a loaded from content view.
Short answer is no in general. Even if section menu + content view has some concept for page layout, it's not recommended to use this way for base page layout, especially for enterprise case.
Note: using DM Editor for header and footer editing is still a good idea.
The reason is not about possibility, but routing and maintainability.
- Routing becomes less obvious if base layout is a DM Editor content, even if we solve the mapping between "menuitem's URL" (eg. ?menu1=page1) and direct page URL(/page1).
- Having a page layout in code is more maintainable.
Unless for example if you use DM Editor in multi sites, and the base layout needs to be completely customizable, yes it can be used for base layouts :).
So in most of projects, implementation can be like below:
Layout/Page | Implemented in |
|---|---|
Base layout | Project code (eg. nextjs layout) |
Static page | DM Editor page |
section layout | DM Editor page, with content view widget to load content based on current menu item in section menu. |
News/content list | DM Editor page, with content list widget to load dynamic content list. |
News/content detail | DM Editor page, with content view and id parameter as data source to load dynamic content based on id. |
Updated: 2025-01-23 21:45
