maglev
WebsiteGithub
  • Introduction
  • Quick start
  • Concepts
    • Overview
    • Site
    • Theme
    • Page
    • Section
    • Setting
    • Block
  • Guides
    • Create a new section
    • Setup collections
    • Personalize the editor
    • Setup multiple languages
    • Secure the editor
    • Build a menu section
    • Render a section outside the Maglev layout
    • Use an icon library
    • Upgrades
    • Troubleshooting
  • Integrations
    • Avo
  • Pro
    • Introduction
    • Getting started
Powered by GitBook
On this page
  • Generate the section files
  • Code the section
  • Provide a sample content

Was this helpful?

  1. Guides

Create a new section

This guide helps you to create a maglev section and integrates it in the editor UI.

Generate the section files

The maglev gem offers a Rails generator to quickly generate the files required by a maglev section.

The following command will generate a sample section with a few settings and blocks.

> bundle exec rails g maglev:section example

Syntax

> bundle exec rails g maglev:section <ID of your section> \
--category=<CATEGORY> \
--settings \
<ID of the setting 1>:<TYPE> \
...
<ID of the setting N>:<TYPE> \
block:<TYPE>:<ID of setting 1>:<TYPE> \
...
block:<TYPE>:<ID of setting N>:<TYPE> \

Example

Here is an example of a section with one single type of block

> bundle exec rails g maglev:section showcase_01 \
--category=showcase \
--settings \
title:text overall_description:text \
block:project:name:text block:project:screenshot:image

Code the section

Once the different files of the section have been generated, it's time to complete the definition and template files.

There are 3 different buttons on this screen:

  • Open editor: it opens the Editor UI

  • Open in a new tab: it opens the section in a new tab without the maglev admin layout. Very useful when coding the template of the section.

  • Take screenshot: once your section looks good (please visit the next sub chapter before) , it's time to take a screenshot of it for the editor UI. It will be displayed in the list of sections available for the editors.

Provide a sample content

Providing a sample content for a section is helpful in 3 main cases:

  • when writing the template of the section with "real" content.

  • when generating a screenshot of the section with "real" content".

  • when an editor picks the section in the editor UI. She won't see a blank section.

This can be achieved by declaring the sample attribute in the definition file of the section.

Example:

app/theme/sections/showcase_01.yml
name: showcase_01

...

settings:
....

blocks:
....

# By default, in the editor UI, blocks will be listed below the "Content" title.
# The title can be changed with the following property:
# blocks_label: "My list of items"

# By default, blocks are presented as a list in the editor UI. 
# If you like to use blocks to build a menu with sub menu items, 
# consider using the tree presentation
# blocks_presentation: "tree"

sample:
  settings:
    title: "Let's create the product<br/>your clients<br/>will love."
    image: "/maglev-placeholder.jpg"
  blocks: 
    - type: list_item
      settings: 
        title: "Item #1"
        image: "/maglev-placeholder.jpg"
    - type: list_item
      settings: 
        title: "Item #2"
        image: "/maglev-placeholder.jpg"
    - type: list_item
      settings: 
        title: "Item #3"
        image: "/maglev-placeholder.jpg"
    - type: list_item
      settings: 
        title: "Item #4"
        image: "/maglev-placeholder.jpg"
  

PreviousBlockNextSetup collections

Last updated 2 years ago

Was this helpful?

Start by visiting the once you've started your Rails server and click to the title of your newly generated section. You will see a screen like this one.

admin url
Maglev admin page