Add Lotusdocs theme

This commit is contained in:
Abner Coimbre
2026-01-11 16:46:05 -08:00
parent d051d46d1f
commit 8a4d04db58
577 changed files with 40404 additions and 0 deletions

View File

@@ -0,0 +1,9 @@
---
weight: 200
title: "Beispielinhalt"
description: "Beispielinhalt"
icon: "edit"
date: "2023-06-08T06:34:57+01:00"
lastmod: "2023-06-08T06:34:57+01:00"
draft: false
---

View File

@@ -0,0 +1,125 @@
---
weight: 100
date: "2023-05-03T22:37:22+01:00"
draft: false
author: "Colin Wilson"
title: "Schnellstart"
icon: "rocket_launch"
toc: true
description: "Ein QuickStart -Leitfaden zum Erstellen neuer Inhalte in Lotus -Dokumenten"
publishdate: "2023-05-03T22:37:22+01:00"
tags: ["Beginners"]
---
## Neue Inhalte erstellen
Navigate to the root of your Hugo project and use the `hugo new` command to create a file in the `content/docs` directory:
```shell
hugo new docs/example-page.md
```
This will create a markdown file named `example-page.md` with the following default front matter:
```toml
+++
title = "Example Page"
description = ""
icon = "article"
date = "2023-05-22T00:27:57+01:00"
lastmod = "2023-05-22T00:27:57+01:00"
draft = false
toc = true
weight = 999
+++
```
Modify the options to suit your needs.
The code below shows the front matter code used to create this page, along with some markdown in the body:
```md
+++
weight = 100
date = "2023-05-03T22:37:22+01:00"
draft = true
author = "Colin Wilson"
title = "Quickstart"
icon = "rocket_launch"
toc = true
description = "A quickstart guide to creating new content in Lotus Docs"
publishdate = "2023-05-03T22:37:22+01:00"
tags = ["Beginners"]
+++
## Create New Content
Navigate to the root of your Hugo project and use the `hugo new` command to create a file in the `content/docs` directory:
```shell
hugo new docs/examplepage.md
```
...
```
## Ordering Content
Lotus Docs uses a simple weighting method for ordering content and creating menus.
The front matter `weight` variable is used to order all content and auto-generate the menu structure (including the sidebar menu and page navigation buttons). Lower weight values take higher precedence. So content with lower weights come first and are so ordered in the menu.
## Auto-Generated Menu
As mentioned, Lotus Docs auto-generates menus and navigation links using the [front matter](https://gohugo.io/content-management/front-matter/#predefined) weight variable. For example, Navigate to the `content/docs` directory and create two content files, `doc-one.md` and `doc-two.md`, then edit the weight values to `100` and `200` respectively:
{{< alert text="It's good practice to increment the weight of your posts by a factor of <code>100</code>. This ensures plenty of room to insert new posts between existing items should you need to." />}}
Your directory structure should now look like this:
```treeview
content/
└── docs/
├── doc-one.md
└── doc-two.md
```
Links to both posts are now visible in the sidebar menu where `doc-one.md` will come before and be placed above `doc-two.md`:
![sidebar menu items example](https://res.cloudinary.com/lotuslabs/image/upload/v1684719173/Lotus%20Docs/images/sidebar_menu_example_01-modified_qkb2si.png)
{{< alert context="info" text="The option to manually arrange content via a predefined menu structure in <code>hugo.toml</code> as opposed to auto-generated via content weights is on the Lotus Docs roadmap." />}}
## Second Level Menu Items
Second level menu items can be generated by first creating a **'parent'** directory containing an `_index.md` file, e.g.:
```shell
hugo new docs/parent-directory/_index.md
```
The above command creates a directory named `parent-directory` under `content/docs`:
```treeview
content/
└── docs/
└── parent-directory/
```
You can now create second level items inside the `parent-directory` as normal. Run the `hugo new` command again to create a post inside the newly created `parent-directory`:
```shell
hugo new docs/parent-directory/doc-three.md
```
Your directory/file structure should now look like this:
```treeview
content/
└── docs/
└── parent-directory/
└── doc-three.md
```
This is reflected in the sidebar menu with `parent-directory` acting as a dropdown menu containing a link to the **Doc Three** post:
![sidebar parent menu example](https://res.cloudinary.com/lotuslabs/image/upload/v1684802032/Lotus%20Docs/images/sidebar_menu_example_02_jsecye.png)

View File

@@ -0,0 +1,9 @@
---
weight: 200
title: "Example Content"
description: "Example content"
icon: "edit"
date: "2023-05-22T00:34:57+01:00"
lastmod: "2023-05-22T00:34:57+01:00"
draft: false
---

View File

@@ -0,0 +1,53 @@
---
title: "Code"
description: ""
icon: "code"
date: "2023-05-22T00:44:31+01:00"
lastmod: "2023-05-22T00:44:31+01:00"
draft: false
toc: true
weight: 210
---
{{% alert context="warning" text="The front matter `description` value for this page has been intentionally left empty in order to demonstrate FlexSearch's suggested results fallback behaviour." /%}}
## Code Block Examples
Code block language examples
### Go
```go
package main
import "fmt"
func main() {
fmt.Println("hello world")
}
```
### HTML
```html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
### Markdown
```md
# H1 heading
**Some bold text**
*Italic text example*
```

View File

@@ -0,0 +1,177 @@
---
weight: 220
title: "Mermaid"
description: "Example Mermaid diagrams"
icon: "function"
date: "2023-09-08T05:12:51+01:00"
lastmod: "2023-09-08T05:12:51+01:00"
draft: false
toc: true
---
## Flowchart
```mermaid
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
## Sequence diagram
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
## Gantt Chart
```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```
## Class diagram
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
>>service>>
int id
size()
}
```
## State diagram
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
## Pie Chart
```mermaid
pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15
```
## Git Graph
```mermaid
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
## Bar chart (using gantt chart)
```mermaid
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
```
## User Journey diagram
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
```
## C4 diagram
```mermaid
C4Context
title System Context diagram for Internet Banking System
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
```

View File

@@ -0,0 +1,297 @@
---
weight: 100
date: "2023-05-03T22:37:22+01:00"
draft: false
author: "Colin Wilson"
title: "Quickstart"
icon: "rocket_launch"
toc: true
description: "A quickstart guide to creating new content in Lotus Docs"
publishdate: "2023-05-03T22:37:22+01:00"
tags: ["Beginners"]
---
## Requirements
- **git**
- **Go ≥ v1.19**
- **Hugo ≥ v0.100.0** (Extended Version)
## Install Hugo
Install the [Hugo CLI](https://github.com/gohugoio/hugo/releases/latest), using the specific instructions for your operating system below:
{{< tabs tabTotal="4">}}
{{% tab tabName="Linux" %}}
Your Linux distros package manager may include Hugo. If this is the case, install it directly using your distros package manager for instance, in Ubuntu, run the following command. This will install the extended edition of Hugo:
```shell
sudo apt install hugo
```
{{% /tab %}}
{{% tab tabName="Homebrew (macOS)" %}}
If you use the package manager [Homebrew](https://brew.sh/), run the `brew install` command in your terminal to install Hugo:
```shell
brew install hugo
```
{{% /tab %}}
{{% tab tabName="Windows (Chocolatey)" %}}
If you use the package manager [Chocolatey](https://chocolatey.org/), run the `choco install` command in your terminal to install Hugo:
```shell
choco install hugo --confirm
```
{{% /tab %}}
{{% tab tabName="Windows (Scoop)" %}}
If you use the package manager [Scoop](https://scoop.sh/), run the `scoop install` command in your terminal to install Hugo:
```shell
scoop install hugo
```
{{% /tab %}}
{{< /tabs >}}
### Manual Installation
The Hugo GitHub repository contains pre-built versions of the Hugo command-line tool for various operating systems, which can be found on the [Releases page](https://github.com/gohugoio/hugo/releases/latest)
For more instruction on installing these releases, refer to [Hugos documentation](https://gohugo.io/getting-started/installing/)
## Create a New Lotus Docs Site
With Hugo installed, create a new Hugo project using the `hugo new` command:
```shell
hugo new site my-docs-site && cd my-docs-site
```
Now initialize your project as a Hugo Module using the `hugo mod init` command:
```
hugo mod init my-docs-site
```
{{% alert context="info" text="**Note**: If your site already has a git repository, you can initialise your site using the path to your site's git repository e.g. `hugo mod init github.com/<user>/<my-docs-site>/`." /%}}
You can now choose your preferred method for adding the Lotus Docs theme to your new site from the options below:
{{< tabs tabTotal="3">}}
{{% tab tabName="Add as a Hugo Module" %}}
Edit the `hugo.toml` configuration file to include the [Lotus Docs theme](https://github.com/colinwilson/lotusdocs) and the [Hugo Bootstrap module](https://github.com/gohugoio/hugo-mod-bootstrap-scss) (lines `5 to 11` below):
```toml {linenos=table,hl_lines=["5-11"]}
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
[module]
[[module.imports]]
path = "github.com/colinwilson/lotusdocs"
disable = false
[[module.imports]]
path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
disable = false
```
{{% alert context="info" text="**Note**: Hugo ≥ v0.110.0 changed the name of the default config base filename to `hugo.toml`. If you're running an earlier version of Hugo, consider renaming your `config.toml` file to `hugo.toml`." /%}}
{{% /tab %}}
{{% tab tabName="Add as a Git submodule" %}}
Initialize Git and clone the Lotus Docs theme repository as a submodule:
```shell
git init
git submodule add https://github.com/colinwilson/lotusdocs themes/lotusdocs
```
Update your existing `hugo.toml` config file with the configuration below:
```toml {linenos=table,hl_lines=["5-11"]}
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
[module]
[[module.imports]]
path = "lotusdocs"
disable = false
[[module.imports]]
path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
disable = false
```
{{% alert context="info" text="**Note**: Hugo ≥ v0.110.0 changed the name of the default config base filename to `hugo.toml`. If you're running an earlier version of Hugo, consider renaming your `config.toml` file to `hugo.toml`." /%}}
{{% /tab %}}
{{% tab tabName="Clone theme files" %}}
In cases where you prefer to customise and maintain the Lotus Docs theme yourself, you can clone the theme into your projects `themes` subdirectory.
Run the following command from your projects root directory to clone the Lotus Docs theme into your `themes` subdirectory:
```shell
git clone https://github.com/colinwilson/lotusdocs themes/lotusdocs
```
Edit the `hugo.toml` configuration file to include the Lotus Docs theme and the Hugo Bootstrap module (lines `5 to 11` below):
```toml {linenos=table,hl_lines=["5-11"]}
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
[module]
[[module.imports]]
path = "lotusdocs"
disable = false
[[module.imports]]
path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
disable = false
```
{{< alert context="info" text="**Note**: Hugo ≥ v0.110.0 changed the name of the default config base filename to `hugo.toml`. If you're running an earlier version of Hugo, consider renaming your `config.toml` file to `hugo.toml`." />}}
{{% /tab %}}
{{< /tabs >}}
## Create New Content
Navigate to the root of your Hugo project and use the `hugo new` command to create a file in the `content/docs` directory:
```shell
hugo new docs/example-page.md
```
This will create a markdown file named `example-page.md` with the following default front matter:
```toml
+++
title = "Example Page"
description = ""
icon = "article"
date = "2023-05-22T00:27:57+01:00"
lastmod = "2023-05-22T00:27:57+01:00"
draft = false
toc = true
weight = 999
+++
```
Modify the options to suit your needs.
The code below shows the front matter code used to create this page, along with a portion of markdown from the body:
{{< prism lang="md" >}}
+++
weight = 100
date = "2023-05-03T22:37:22+01:00"
draft = true
author = "Colin Wilson"
title = "Quickstart"
icon = "rocket_launch"
toc = true
description = "A quickstart guide to creating new content in Lotus Docs"
publishdate = "2023-05-03T22:37:22+01:00"
tags = ["Beginners"]
+++
## Create New Content
Navigate to the root of your Hugo project and use the `hugo new` command to create a file in the `content/docs` directory:
```shell
hugo new docs/examplepage.md
```
...
{{< /prism >}}
## Preview your Site
Now that you've created some sample content you can preview your new Lotus Docs site using the `huge server` command:
```shell
hugo server -D
```
Navigate to `localhost:1313/docs` and you should see a card link to the **Example Page** created earlier:
![New Lotus Docs Site - Example Content](https://res.cloudinary.com/lotuslabs/image/upload/v1690992310/Lotus%20Docs/images/lotus_docs_new_site_and_content_module_setup_oiuyex.png)
## Ordering Content
Lotus Docs uses a simple weighting method for ordering content and creating menus.
The front matter `weight` variable is used to order all content and auto-generate the menu structure (including the sidebar menu and page navigation buttons). Lower weight values take higher precedence. So content with lower weights come first and are so ordered in the menu.
## Auto-Generated Menu
As mentioned, Lotus Docs auto-generates menus and navigation links using the [front matter](https://gohugo.io/content-management/front-matter/#predefined) weight variable. For example, Navigate to the `content/docs` directory and create two content files, `doc-one.md` and `doc-two.md`, then edit the weight values to `100` and `200` respectively:
{{< alert text="It's good practice to increment the weight of your posts by a factor of <code>100</code>. This ensures plenty of room to insert new posts between existing items should you need to." />}}
Your directory structure should now look like this:
```treeview
content/
└── docs/
├── doc-one.md
└── doc-two.md
```
Links to both posts are now visible in the sidebar menu where `doc-one.md` will come before and be placed above `doc-two.md`:
![sidebar menu items example](https://res.cloudinary.com/lotuslabs/image/upload/v1684719173/Lotus%20Docs/images/sidebar_menu_example_01-modified_qkb2si.png)
{{< alert context="info" text="The option to manually configure a predefined menu structure in <code>hugo.toml</code> as opposed to an auto-generated one is part of the Lotus Docs roadmap." />}}
## Second Level Menu Items
Second level menu items can be generated by first creating a **'parent'** directory containing an `_index.md` file, e.g.:
```shell
hugo new docs/parent-directory/_index.md
```
The above command creates an `_index.md` file inside a directory named `parent-directory` under `content/docs`:
```treeview
content/
└── docs/
├── parent-directory/
│ └── _index.md
├── doc-one.md
├── doc-two.md
└── _index.md
```
You can now create second level items inside the `parent-directory` as normal. Run the `hugo new` command again to create a post inside the newly created `parent-directory`:
```shell
hugo new docs/parent-directory/doc-three.md
```
Your directory/file structure should now look like this:
```treeview
content/
└── docs/
├── parent-directory/
│ ├── _index.md
│ └── doc-three.md
├── doc-one.md
├── doc-two.md
└── _index.md
```
This is reflected in the sidebar menu with `parent-directory` functioning as a dropdown menu containing a link to the **Doc Three** post:
![sidebar parent menu example](https://res.cloudinary.com/lotuslabs/image/upload/v1684802032/Lotus%20Docs/images/sidebar_menu_example_02_jsecye.png)

View File

@@ -0,0 +1,9 @@
---
weight: 300
title: "Section Folder"
description: "Example of a folder at the root of the content tree (under `/docs`)"
icon: "folder"
date: "2023-05-22T00:34:57+01:00"
lastmod: "2023-05-22T00:34:57+01:00"
draft: false
---

View File

@@ -0,0 +1,9 @@
---
weight: 310
title: "Section Subfolder"
description: "Subfolder nested inside a root section folder"
icon: "folder"
date: "2023-05-22T00:34:57+01:00"
lastmod: "2023-05-22T00:34:57+01:00"
draft: false
---

View File

@@ -0,0 +1,9 @@
---
weight: 320
title: "Second Section Subfolder"
description: "Subfolder nested inside a section subfolder"
icon: "folder"
date: "2023-05-22T00:34:57+01:00"
lastmod: "2023-05-22T00:34:57+01:00"
draft: false
---

View File

@@ -0,0 +1,9 @@
---
weight: 310
title: "Third Section Subfolder"
description: "Subfolder nested inside a section subfolder"
icon: "folder"
date: "2023-05-22T00:34:57+01:00"
lastmod: "2023-05-22T00:34:57+01:00"
draft: false
---

View File

@@ -0,0 +1,11 @@
---
weight: 330
title: "Example Doc"
date: "2023-05-03T22:37:22+01:00"
draft: false
author: "Colin Wilson"
toc: true
description: "Example document nested inside multiple subfolders"
publishdate: "2023-05-03T22:37:22+01:00"
tags: ["Beginners"]
---

View File

@@ -0,0 +1,9 @@
---
weight: 200
title: "Exemple de Contenu"
description: "Exemple de Contenu"
icon: "edit"
date: "2023-05-22T00:34:57+01:00"
lastmod: "2023-05-22T00:34:57+01:00"
draft: false
---

View File

@@ -0,0 +1,51 @@
---
title: "Code"
description: "Code block examples in different coding languages"
icon: "code"
date: "2023-05-22T00:44:31+01:00"
lastmod: "2023-05-22T00:44:31+01:00"
draft: false
toc: true
weight: 210
---
## Code Block Examples
Code block language examples
### Go
```go
package main
import "fmt"
func main() {
fmt.Println("hello world")
}
```
### HTML
```html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
### Markdown
```md
# H1 heading
**Some bold text**
*Italic text example*
```

View File

@@ -0,0 +1,125 @@
---
weight: 100
date: "2023-05-03T22:37:22+01:00"
draft: false
author: "Colin Wilson"
title: "Démarrage rapide"
icon: "rocket_launch"
toc: true
description: "Un guide qui rapide pour créer un nouveau contenu dans Lotus Docs"
publishdate: "2023-05-03T22:37:22+01:00"
tags: ["Beginners"]
---
## Créer un nouveau contenu
Navigate to the root of your Hugo project and use the `hugo new` command to create a file in the `content/docs` directory:
```shell
hugo new docs/example-page.md
```
This will create a markdown file named `example-page.md` with the following default front matter:
```toml
+++
title = "Example Page"
description = ""
icon = "article"
date = "2023-05-22T00:27:57+01:00"
lastmod = "2023-05-22T00:27:57+01:00"
draft = false
toc = true
weight = 999
+++
```
Modify the options to suit your needs.
The code below shows the front matter code used to create this page, along with some markdown in the body:
```md
+++
weight = 100
date = "2023-05-03T22:37:22+01:00"
draft = true
author = "Colin Wilson"
title = "Quickstart"
icon = "rocket_launch"
toc = true
description = "A quickstart guide to creating new content in Lotus Docs"
publishdate = "2023-05-03T22:37:22+01:00"
tags = ["Beginners"]
+++
## Create New Content
Navigate to the root of your Hugo project and use the `hugo new` command to create a file in the `content/docs` directory:
```shell
hugo new docs/examplepage.md
```
...
```
## Ordering Content
Lotus Docs uses a simple weighting method for ordering content and creating menus.
The front matter `weight` variable is used to order all content and auto-generate the menu structure (including the sidebar menu and page navigation buttons). Lower weight values take higher precedence. So content with lower weights come first and are so ordered in the menu.
## Auto-Generated Menu
As mentioned, Lotus Docs auto-generates menus and navigation links using the [front matter](https://gohugo.io/content-management/front-matter/#predefined) weight variable. For example, Navigate to the `content/docs` directory and create two content files, `doc-one.md` and `doc-two.md`, then edit the weight values to `100` and `200` respectively:
{{< alert text="It's good practice to increment the weight of your posts by a factor of <code>100</code>. This ensures plenty of room to insert new posts between existing items should you need to." />}}
Your directory structure should now look like this:
```treeview
content/
└── docs/
├── doc-one.md
└── doc-two.md
```
Links to both posts are now visible in the sidebar menu where `doc-one.md` will come before and be placed above `doc-two.md`:
![sidebar menu items example](https://res.cloudinary.com/lotuslabs/image/upload/v1684719173/Lotus%20Docs/images/sidebar_menu_example_01-modified_qkb2si.png)
{{< alert context="info" text="The option to manually arrange content via a predefined menu structure in <code>hugo.toml</code> as opposed to auto-generated via content weights is on the Lotus Docs roadmap." />}}
## Second Level Menu Items
Second level menu items can be generated by first creating a **'parent'** directory containing an `_index.md` file, e.g.:
```shell
hugo new docs/parent-directory/_index.md
```
The above command creates a directory named `parent-directory` under `content/docs`:
```treeview
content/
└── docs/
└── parent-directory/
```
You can now create second level items inside the `parent-directory` as normal. Run the `hugo new` command again to create a post inside the newly created `parent-directory`:
```shell
hugo new docs/parent-directory/doc-three.md
```
Your directory/file structure should now look like this:
```treeview
content/
└── docs/
└── parent-directory/
└── doc-three.md
```
This is reflected in the sidebar menu with `parent-directory` acting as a dropdown menu containing a link to the **Doc Three** post:
![sidebar parent menu example](https://res.cloudinary.com/lotuslabs/image/upload/v1684802032/Lotus%20Docs/images/sidebar_menu_example_02_jsecye.png)