mirror of
https://github.com/lowdefy/lowdefy.git
synced 2025-02-23 14:39:32 +08:00
197 lines
7.0 KiB
YAML
197 lines
7.0 KiB
YAML
# Copyright 2020-2021 Lowdefy, Inc
|
|
|
|
# Licensed under the Apache License, Version 2.0 (the "License");
|
|
# you may not use this file except in compliance with the License.
|
|
# You may obtain a copy of the License at
|
|
|
|
# http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
# Unless required by applicable law or agreed to in writing, software
|
|
# distributed under the License is distributed on an "AS IS" BASIS,
|
|
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
# See the License for the specific language governing permissions and
|
|
# limitations under the License.
|
|
|
|
_ref:
|
|
path: templates/general.yaml.njk
|
|
vars:
|
|
pageId: tutorial-create-page
|
|
pageTitle: 2. Creating a page
|
|
section: Tutorial
|
|
filePath: tutorial/tutorial-create-page.yaml
|
|
prefetchPages:
|
|
- tutorial-add-blocks
|
|
content:
|
|
- id: tutorial_video
|
|
type: DangerousMarkdown
|
|
properties:
|
|
DOMPurifyOptions:
|
|
ADD_TAGS:
|
|
- iframe
|
|
ADD_ATTR:
|
|
- allowfullscreen
|
|
- allow
|
|
- frameborder
|
|
content: |
|
|
<iframe
|
|
width="800"
|
|
height="470"
|
|
src="https://www.youtube.com/embed/U5TDhz3x7Tk" frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
|
</iframe>
|
|
- id: body_create_page
|
|
type: MarkdownWithCode
|
|
properties:
|
|
content: |
|
|
Let's create a page for a web form where users can log a new ticket.
|
|
|
|
#### Step 2.1 - Create `new-ticket.yaml`
|
|
|
|
Create a new YAML file in the project directory (the same directory as the `lowdefy.yaml` file) called `new-ticket.yaml`, with the following content:
|
|
|
|
```yaml
|
|
id: new-ticket
|
|
type: PageHeaderMenu
|
|
properties:
|
|
title: New ticket # The title in the browser tab.
|
|
layout:
|
|
contentJustify: center # Center the contents of the page.
|
|
blocks:
|
|
- id: content_card
|
|
type: Card
|
|
layout:
|
|
size: 800 # Set the size of the card so it does not fill the full screen.
|
|
contentGutter: 16 # Make a 16px gap between all blocks in this card.
|
|
blocks:
|
|
- id: page_heading
|
|
type: Title
|
|
properties:
|
|
content: Log a ticket # Change the title on the page.
|
|
level: 3 # Make the title a little smaller (an html `<h3>`).
|
|
```
|
|
|
|
#### Step 2.2 - Update `lowdefy.yaml`
|
|
|
|
Change the `lowdefy.yaml` to look like this:
|
|
|
|
```yaml
|
|
name: lowdefy-project-template
|
|
lowdefy: 3.10.2
|
|
|
|
pages:
|
|
################ -------- Copy from here -------- ################
|
|
- _ref: new-ticket.yaml
|
|
################ -------- Copy to here ---------- ################
|
|
- id: welcome
|
|
type: PageHeaderMenu
|
|
properties:
|
|
title: Welcome
|
|
# ...
|
|
```
|
|
|
|
- id: warning_indent
|
|
type: Alert
|
|
properties:
|
|
type: warning
|
|
icon: WarningFilled
|
|
message: Indentation is important
|
|
description: YAML files use indentation to determine the data structure represented. If you are having any problems, make sure the indentation is the same as in the instructions.
|
|
|
|
- id: body_view_in_browser
|
|
type: Markdown
|
|
properties:
|
|
content: |
|
|
#### Step 2.3 - Navigate to the new page
|
|
|
|
Your browser should reload, and you should see a link in the header menu to the booking page. If you click on that link it should take you to a page that looks like this:
|
|
|
|
- id: example1
|
|
type: PageHeaderMenu
|
|
layout:
|
|
contentJustify: center
|
|
properties:
|
|
style:
|
|
minHeight: 300px
|
|
menu:
|
|
links:
|
|
- id: new-ticket
|
|
properties:
|
|
title: new-ticket
|
|
type: MenuLink
|
|
- id: welcome
|
|
type: MenuLink
|
|
properties:
|
|
title: welcome
|
|
|
|
blocks:
|
|
- id: content_card
|
|
type: Card
|
|
layout:
|
|
size: 600
|
|
blocks:
|
|
- id: page_heading
|
|
type: Title
|
|
properties:
|
|
content: Log a ticket
|
|
level: 3
|
|
|
|
- id: body_menus
|
|
type: MarkdownWithCode
|
|
properties:
|
|
content: |
|
|
If you click on the link in the menu, you should see that your browser path (the part after `localhost:3000` or `example.com`) changes from `welcome` to `new-ticket`.
|
|
|
|
### What happened
|
|
|
|
- We created a new page with id `new-ticket`.
|
|
- We used a `_ref` operator to reference configuration in another file.
|
|
- That page can now be found at the `/new-ticket` route.
|
|
- A link to that page was created in the menu. These links are in the order of the pages.
|
|
|
|
## Menus
|
|
|
|
A menu is created by default from all the pages in your app, in the order that they appear in the pages array. Often more control is needed over the menu. You might want to group menu items into different groups, change the title, exclude a page or add an icon. To do this, we can define a menu in the `menus` section of the `lowdefy.yaml` file.
|
|
|
|
#### Step 2.4 - Add the menu configuration
|
|
|
|
Copy the following and add it to your `lowdefy.yaml` file just before the pages section:
|
|
|
|
```yaml
|
|
################ -------- Copy from here -------- ################
|
|
menus:
|
|
- id: default
|
|
links:
|
|
- id: new-ticket
|
|
type: MenuLink
|
|
properties:
|
|
icon: AlertOutlined
|
|
title: New ticket
|
|
pageId: new-ticket
|
|
- id: welcome
|
|
type: MenuLink
|
|
properties:
|
|
icon: HomeOutlined
|
|
title: Home
|
|
pageId: welcome
|
|
################ -------- Copy to here ---------- ################
|
|
pages:
|
|
- _ref: new-ticket.yaml
|
|
# ...
|
|
```
|
|
|
|
The menu links will now have icons and titles.
|
|
|
|
> If you would like to see how your config should look at this point, you can find it [here](tutorial-create-page-config).
|
|
|
|
### Up next
|
|
|
|
In the next section we will add some more blocks to our page to create a form to capture the ticket data.
|
|
|
|
- _ref:
|
|
path: templates/navigation_buttons.yaml
|
|
vars:
|
|
previous_page_title: Getting started
|
|
previous_page_id: tutorial-start
|
|
next_page_title: Adding blocks
|
|
next_page_id: tutorial-add-blocks
|