Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-02 03:16:11 +01:00
Code Issues Packages Projects Releases Activity

docs(user): document presentation view

Browse Source
This commit is contained in:
Elian Doran
2025-10-17 21:19:43 +03:00
parent 0f52e42017
commit 9403ea2028
17 changed files with 471 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
docs/User Guide/!!!meta.json vendored
View File

@@ -202,14 +202,14 @@
{
"type": "relation",
"name": "internalLink",
"value": "tAassRL4RSQL",
"value": "l2VkvOwUNfZj",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "l2VkvOwUNfZj",
"value": "tAassRL4RSQL",
"isInheritable": false,
"position": 20
},
@@ -252,14 +252,14 @@
{
"type": "relation",
"name": "internalLink",
"value": "WOcw2SLH6tbX",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"value": "WOcw2SLH6tbX",
"isInheritable": false,
"position": 20
}
@@ -741,19 +741,19 @@
"type": "text",
"mime": "text/markdown",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "LLzSMXACKhUs",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "shareAlias",
"value": "nginx-proxy-setup",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "LLzSMXACKhUs",
"isInheritable": false,
"position": 20
}
],
"format": "markdown",
@@ -777,19 +777,19 @@
"type": "text",
"mime": "text/markdown",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "LLzSMXACKhUs",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "shareAlias",
"value": "apache-proxy-setup",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "LLzSMXACKhUs",
"isInheritable": false,
"position": 20
}
],
"format": "markdown",
@@ -860,17 +860,24 @@
{
"type": "relation",
"name": "internalLink",
"value": "tAassRL4RSQL",
"value": "vcjrb3VVYPZI",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "Gzjqa934BdH4",
"value": "tAassRL4RSQL",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "Gzjqa934BdH4",
"isInheritable": false,
"position": 40
},
{
"type": "label",
"name": "shareAlias",
@@ -878,13 +885,6 @@
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "vcjrb3VVYPZI",
"isInheritable": false,
"position": 40
},
{
"type": "label",
"name": "iconClass",
@@ -1096,24 +1096,31 @@
{
"type": "relation",
"name": "internalLink",
"value": "bwg0e8ewQMak",
"value": "nRqcgfTb97uV",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "WOcw2SLH6tbX",
"value": "bwg0e8ewQMak",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"value": "WOcw2SLH6tbX",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 40
},
{
"type": "label",
"name": "shareAlias",
@@ -1127,13 +1134,6 @@
"value": "bx bx-mobile-alt",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "nRqcgfTb97uV",
"isInheritable": false,
"position": 70
}
],
"format": "markdown",
@@ -8740,6 +8740,107 @@
"dataFileName": "Board View_image.png"
}
]
},
{
"isClone": false,
"noteId": "zP3PMqaG71Ct",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"GTwFsgaA0lCt",
"zP3PMqaG71Ct"
],
"title": "Presentation View",
"notePosition": 70,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-slideshow",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "R9pX4DGra2Vt",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "0ESUbbAxVnoK",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "s1aBHPd79XYj",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "grjYqerjn243",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "gBbsAeiuUxI5",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "AlhDUqhENtH7",
"isInheritable": false,
"position": 90
}
],
"format": "markdown",
"dataFileName": "Presentation View.md",
"attachments": [
{
"attachmentId": "aJa7vIrYknDw",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Presentation View_image.png"
},
{
"attachmentId": "aPooMxP74PeA",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Presentation View_image.png"
}
]
}
]
},
@@ -9686,6 +9787,13 @@
"value": "oPVyFC7WL2Lp",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "zP3PMqaG71Ct",
"isInheritable": false,
"position": 30
}
],
"format": "markdown",

BIN
docs/User Guide/User Guide/Note Types/Collections/1_Presentation View_image.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

85
docs/User Guide/User Guide/Note Types/Collections/Presentation View.md vendored Normal file
View File

@@ -0,0 +1,85 @@
# Presentation View
<figure class="image"><img style="aspect-ratio:1120/763;" src="Presentation View_image.png" width="1120" height="763"></figure>
The Presentation view allows the creation of slideshows directly from within Trilium.
## How it works
* Each slide is a child note of the collection.
* The order of the child notes determines the order of the slides.
* Unlike traditional presentation software, slides can be laid out both horizontally and vertically (see belwo for more information).
* Direct children will be laid out horizontally and the children of those will be laid out vertically. Children deeper than two levels of nesting are ignored.
## Interaction and navigation
In the floating buttons section (top-right):
* Edit button to go to the corresponding note of the current slide.
* Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view of the slides. Press the button again to disable it.
* Press the “Start presentation” button to show the presentation in full-screen.
The following keyboard shortcuts are supported:
* Press <kbd>←</kbd> and <kbd>→</kbd> (or <kbd>H</kbd> and <kbd>L</kbd>) to go to the slide on the left or on the right (horizontal).
* Press <kbd>↑</kbd> and <kbd>↓</kbd>  (or <kbd>K</kbd> and <kbd>J</kbd>) to go to the upward or downward slide (vertical).
* Press <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> or  to go to the next/previous slide in order.
* And a few more, press <kbd>?</kbd> to display a popup with all the supported keyboard combinations.
## Vertical slides and nesting
Unlike traditional presentation software such as Microsoft PowerPoint, the slides in Trilium can be laid out horizontally or vertically in order to create depth or better organize the slides by topic.
This horizontal/vertical organization affects transitions (especially on the “slide” transition), however it is most noticeable in navigation.
* Pressing <kbd>←</kbd> and <kbd>→</kbd> will navigate through slides horizontally, thus skipping vertical notes under the current slide. This is useful to skip entire chapters/related slides.
* Pressing <kbd>↑</kbd> and <kbd>↓</kbd> will navigate through the vertical slides at the current level.
* Pressing <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> will go to the next/previous slide in order, regardless of the direction. This is generally the key combination to use when presenting.
* The arrows on the bottom-right of the slide will also reflect this navigation scheme.
<figure class="image image-style-align-right image_resized" style="width:55.57%;"><img style="aspect-ratio:890/569;" src="1_Presentation View_image.png" width="890" height="569"></figure>
All direct children of the collection will be laid out horizontally. If a direct child also has children, those children will be placed as vertical slides.
In the following example, the note structure is as follows:
* Presentation collection
* Trilium Notes (demo page)
* “Introduction” slide
* “The challenge of personal knowledge management”
* “Note-taking structures”
* “Demo & Feature highlights” slide
* “Really fast installation process”
* Video slide
## Customization
At collection level, it's possible to adjust:
* The theme of the entire presentation to one of the predefined themes by going to the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Ribbon.md">Ribbon</a> and looking for the _Collection Properties_ tab.
* It's currently not possible to create custom themes, although it is planned.
* Note that it is note possible to alter the CSS via <a class="reference-link" href="../../Theme%20development/Custom%20app-wide%20CSS.md">Custom app-wide CSS</a> because the slides are rendered isolated (in a shadow DOM).
At slide level:
* It's possible to adjust the background color of a slide by using the [predefined promoted attribute](../../Advanced%20Usage/Attributes/Promoted%20Attributes.md) for the color or manually setting `#slide:background` to a hex color.
* More complex backgrounds can be achieved via gradients. There's no UI for it; it has to be set via `#slide:background` to a CSS gradient definition such as: `linear-gradient(to bottom, #283b95, #17b2c3)`.
## Tips and tricks
* Text notes generally respect the formatting (bold, italic, foreground and background colors) and font size. Code blocks and tables also work.
* Try using more than just text notes, the presentation uses the same mechanism as [shared notes](../../Advanced%20Usage/Sharing.md) and <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a> so it should be able to display <a class="reference-link" href="../Mermaid%20Diagrams.md">Mermaid Diagrams</a>, <a class="reference-link" href="../Canvas.md">Canvas</a> and <a class="reference-link" href="../Mind%20Map.md">Mind Map</a> in full-screen (without the interactivity).
* Consider using a transparent background for <a class="reference-link" href="../Canvas.md">Canvas</a>, if the slides have a custom background (go to the hamburger menu in the Canvas, press the button select a custom color and write `transparent`).
* For <a class="reference-link" href="../Mermaid%20Diagrams.md">Mermaid Diagrams</a>, some of them have a predefined background which can be changed via the frontmatter. For example, for XY-charts:
```
---
config:
themeVariables:
xyChart:
backgroundColor: transparent
---
```
## Under the hood
The Presentation view uses [Reveal.js](https://revealjs.com/) to handle the navigation and layout of the slides.

BIN
docs/User Guide/User Guide/Note Types/Collections/Presentation View_image.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 KiB

10
docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md vendored
View File

@@ -5,7 +5,7 @@ It is possible to provide a CSS file to be used regardless of the theme set by t
| --- | --- |
| ![](Custom%20app-wide%20CSS_image.png) | Start by creating a new note and changing the note type to CSS |
| ![](2_Custom%20app-wide%20CSS_image.png) | In the ribbon, press the “Owned Attributes” section and type `#appCss`. |
| ![](3_Custom%20app-wide%20CSS_image.png) | Type the desired CSS.  <br> <br>Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
| ![](3_Custom%20app-wide%20CSS_image.png) | Type the desired CSS.   <br> <br>Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
## Seeing the changes
@@ -78,4 +78,10 @@ To change the color of the note title and the icon (above the content):
opacity: 0.5;
z-index: 0;
}
```
```
## Limitations
Some parts of the application can't be styled directly via custom CSS because they are rendered in an isolated mode (shadow DOM), more specifically:
* The slides in a <a class="reference-link" href="../Note%20Types/Collections/Presentation%20View.md">Presentation View</a>.