mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-27 18:12:29 +08:00
chore(docs): bring back figure sizes
This commit is contained in:
parent
c80d016305
commit
173fa36fca
@ -1715,6 +1715,13 @@
|
|||||||
"value": "bx bx-cog",
|
"value": "bx bx-cog",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 10
|
"position": 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "relation",
|
||||||
|
"name": "internalLink",
|
||||||
|
"value": "_options",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 60
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"format": "markdown",
|
"format": "markdown",
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# Jump to Note
|
# Jump to Note
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:991/403;" src="Jump to Note_image.png" width="991" height="403"></figure>
|
||||||
|
|
||||||
The _Jump to Note_ function allows easy navigation between notes by searching for their title. In addition to that, it can also trigger a full search or create notes.
|
The _Jump to Note_ function allows easy navigation between notes by searching for their title. In addition to that, it can also trigger a full search or create notes.
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# Quick search
|
# Quick search
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:659/256;" src="Quick search_image.png" width="659" height="256"></figure>
|
||||||
|
|
||||||
The _Quick search_ function does a full-text search (that is, it searches through the content of notes and not just the title of a note) and displays the result in an easy-to-access manner.
|
The _Quick search_ function does a full-text search (that is, it searches through the content of notes and not just the title of a note) and displays the result in an easy-to-access manner.
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@ By default, the notes will be displayed in a grid, however there are also some o
|
|||||||
|
|
||||||
### Grid view
|
### Grid view
|
||||||
|
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:1025/655;" src="1_Note List_image.png" width="1025" height="655"></figure>
|
||||||
|
|
||||||
This view presents the child notes in a grid format, allowing for a more visual navigation experience.
|
This view presents the child notes in a grid format, allowing for a more visual navigation experience.
|
||||||
|
|
||||||
@ -23,12 +23,12 @@ This is the default view type.
|
|||||||
|
|
||||||
### List view
|
### List view
|
||||||
|
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:1013/526;" src="Note List_image.png" width="1013" height="526"></figure>
|
||||||
|
|
||||||
In the list view mode, each note is displayed in a single row with only the title and the icon of the note being visible by the default. By pressing the expand button it's possible to view the content of the note, as well as the children of the note (recursively).
|
In the list view mode, each note is displayed in a single row with only the title and the icon of the note being visible by the default. By pressing the expand button it's possible to view the content of the note, as well as the children of the note (recursively).
|
||||||
|
|
||||||
### Calendar view
|
### Calendar view
|
||||||
|
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:1090/598;" src="2_Note List_image.png" width="1090" height="598"></figure>
|
||||||
|
|
||||||
In the calendar view, child notes are represented as events, with a start date and optionally an end date. The view also has interaction support such as moving or creating new events. See <a class="reference-link" href="Note%20List/Calendar%20View.md">Calendar View</a> for more information.
|
In the calendar view, child notes are represented as events, with a start date and optionally an end date. The view also has interaction support such as moving or creating new events. See <a class="reference-link" href="Note%20List/Calendar%20View.md">Calendar View</a> for more information.
|
@ -1,5 +1,5 @@
|
|||||||
# Calendar View
|
# Calendar View
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:767/606;" src="4_Calendar View_image.png" width="767" height="606"></figure>
|
||||||
|
|
||||||
The Calendar view of Book notes will display each child note in a calendar that has a start date and optionally an end date, as an event.
|
The Calendar view of Book notes will display each child note in a calendar that has a start date and optionally an end date, as an event.
|
||||||
|
|
||||||
@ -14,10 +14,7 @@ Unlike other Book view types, the Calendar view also allows some kind of interac
|
|||||||
|
|
||||||
## Creating a calendar
|
## Creating a calendar
|
||||||
|
|
||||||
| | | |
|
<figure class="table"><table><thead><tr><th> </th><th> </th><th> </th></tr></thead><tbody><tr><td>1</td><td><img src="2_Calendar View_image.png"></td><td>The Calendar View works only for Book note types. To create a new note, right click on the note tree on the left and select Insert note after, or Insert child note and then select <em>Book</em>.</td></tr><tr><td>2</td><td><img src="3_Calendar View_image.png"></td><td>Once created, the “View type” of the Book needs changed to “Calendar”, by selecting the “Book Properties” tab in the ribbon.</td></tr></tbody></table></figure>
|
||||||
| --- | --- | --- |
|
|
||||||
| 1 |  | The Calendar View works only for Book note types. To create a new note, right click on the note tree on the left and select Insert note after, or Insert child note and then select _Book_. |
|
|
||||||
| 2 |  | Once created, the “View type” of the Book needs changed to “Calendar”, by selecting the “Book Properties” tab in the ribbon. |
|
|
||||||
|
|
||||||
## Creating a new event/note
|
## Creating a new event/note
|
||||||
|
|
||||||
@ -39,7 +36,7 @@ Unlike other Book view types, the Calendar view also allows some kind of interac
|
|||||||
|
|
||||||
The following attributes can be added to the book type:
|
The following attributes can be added to the book type:
|
||||||
|
|
||||||
<table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>#calendar:hideWeekends</code></td><td>When present (regardless of value), it will hide Saturday and Sundays from the calendar.</td></tr><tr><td><code>#calendar:weekNumbers</code></td><td>When present (regardless of value), it will show the number of the week on the calendar.</td></tr><tr><td><code>#calendar:view</code></td><td><p>Which view to display in the calendar:</p><ul><li><code>timeGridWeek</code> for the <em>week</em> view;</li><li><code>dayGridMonth</code> for the <em>month</em> view;</li><li><code>multiMonthYear</code> for the <em>year</em> view;</li><li><code>listMonth</code> for the <em>list</em> view.</li></ul><p>Any other value will be dismissed and the default view (month) will be used instead.</p><p>The value of this label is automatically updated when changing the view using the UI buttons.</p></td></tr><tr><td><code>~child:template</code></td><td>Defines the template for newly created notes in the calendar (via dragging or clicking).</td></tr></tbody></table>
|
<figure class="table"><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>#calendar:hideWeekends</code></td><td>When present (regardless of value), it will hide Saturday and Sundays from the calendar.</td></tr><tr><td><code>#calendar:weekNumbers</code></td><td>When present (regardless of value), it will show the number of the week on the calendar.</td></tr><tr><td><code>#calendar:view</code></td><td><p>Which view to display in the calendar:</p><ul><li><code>timeGridWeek</code> for the <em>week</em> view;</li><li><code>dayGridMonth</code> for the <em>month</em> view;</li><li><code>multiMonthYear</code> for the <em>year</em> view;</li><li><code>listMonth</code> for the <em>list</em> view.</li></ul><p>Any other value will be dismissed and the default view (month) will be used instead.</p><p>The value of this label is automatically updated when changing the view using the UI buttons.</p></td></tr><tr><td><code>~child:template</code></td><td>Defines the template for newly created notes in the calendar (via dragging or clicking).</td></tr></tbody></table></figure>
|
||||||
|
|
||||||
In addition, the first day of the week can be either Sunday or Monday and can be adjusted from the application settings.
|
In addition, the first day of the week can be either Sunday or Monday and can be adjusted from the application settings.
|
||||||
|
|
||||||
@ -47,21 +44,7 @@ In addition, the first day of the week can be either Sunday or Monday and can be
|
|||||||
|
|
||||||
For each note of the calendar, the following attributes can be used:
|
For each note of the calendar, the following attributes can be used:
|
||||||
|
|
||||||
| Name | Description |
|
<figure class="table"><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>#startDate</code></td><td>The date the event starts, which will display it in the calendar. The format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus sign).</td></tr><tr><td><code>#endDate</code></td><td>Similar to <code>startDate</code>, mentions the end date if the event spans across multiple days. The date is inclusive, so the end day is also considered. The attribute can be missing for single-day events.</td></tr><tr><td><code>#startTime</code></td><td>The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is <code>HH:MM</code> (hours in 24-hour format and minutes).</td></tr><tr><td><code>#endTime</code></td><td>Similar to <code>startTime</code>, it mentions the time at which the event ends (in relation with <code>endDate</code> if present, or <code>startDate</code>).</td></tr><tr><td><code>#color</code></td><td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or hex such as <code>#FF0000</code>). This will also change the color of the note in other places such as the note tree.</td></tr><tr><td><code>#calendar:color</code></td><td>Similar to <code>#color</code>, but applies the color only for the event in the calendar and not for other places such as the note tree.</td></tr><tr><td><code>#iconClass</code></td><td>If present, the icon of the note will be displayed to the left of the event title.</td></tr><tr><td><code>#calendar:title</code></td><td>Changes the title of an event to point to an attribute of the note other than the title, can either a label or a relation (without the <code>#</code> or <code>~</code> symbol). See <em>Use-cases</em> for more information.</td></tr><tr><td><code>#calendar:displayedAttributes</code></td><td>Allows displaying the value of one or more attributes in the calendar like this: <br><br><img src="9_Calendar View_image.png"> <br><br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code> <br><br>It can also be used with relations, case in which it will display the title of the target note: <br><br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code></td></tr><tr><td><code>#calendar:startDate</code></td><td>Allows using a different label to represent the start date, other than <code>startDate</code> (e.g. <code>expiryDate</code>). The label name <strong>must not be</strong> prefixed with <code>#</code>. If the label is not defined for a note, the default will be used instead.</td></tr><tr><td><code>#calendar:endDate</code></td><td>Similar to <code>#calendar:startDate</code>, allows changing the attribute which is being used to read the end date.</td></tr><tr><td><code>#calendar:startTime</code></td><td>Similar to <code>#calendar:startDate</code>, allows changing the attribute which is being used to read the start time.</td></tr><tr><td><code>#calendar:endTime</code></td><td>Similar to <code>#calendar:startDate</code>, allows changing the attribute which is being used to read the end time.</td></tr></tbody></table></figure>
|
||||||
| --- | --- |
|
|
||||||
| `#startDate` | The date the event starts, which will display it in the calendar. The format is `YYYY-MM-DD` (year, month and day separated by a minus sign). |
|
|
||||||
| `#endDate` | Similar to `startDate`, mentions the end date if the event spans across multiple days. The date is inclusive, so the end day is also considered. The attribute can be missing for single-day events. |
|
|
||||||
| `#startTime` | The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is `HH:MM` (hours in 24-hour format and minutes). |
|
|
||||||
| `#endTime` | Similar to `startTime`, it mentions the time at which the event ends (in relation with `endDate` if present, or `startDate`). |
|
|
||||||
| `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. |
|
|
||||||
| `#calendar:color` | Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. |
|
|
||||||
| `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. |
|
|
||||||
| `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, can either a label or a relation (without the `#` or `~` symbol). See _Use-cases_ for more information. |
|
|
||||||
| `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this: <br> <br> <br> <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"` <br> <br>It can also be used with relations, case in which it will display the title of the target note: <br> <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` |
|
|
||||||
| `#calendar:startDate` | Allows using a different label to represent the start date, other than `startDate` (e.g. `expiryDate`). The label name **must not be** prefixed with `#`. If the label is not defined for a note, the default will be used instead. |
|
|
||||||
| `#calendar:endDate` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the end date. |
|
|
||||||
| `#calendar:startTime` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the start time. |
|
|
||||||
| `#calendar:endTime` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the end time. |
|
|
||||||
|
|
||||||
## How the calendar works
|
## How the calendar works
|
||||||
|
|
||||||
@ -96,7 +79,7 @@ Based on the `#calendarRoot` (or `#workspaceCalendarRoot`) attribute, the calend
|
|||||||
* Clicking on the empty space on a date will automatically open that day's note or create it if it does not exist.
|
* Clicking on the empty space on a date will automatically open that day's note or create it if it does not exist.
|
||||||
* Direct children of a day note will be displayed on the calendar despite not having a `dateNote` attribute. Children of the child notes will not be displayed.
|
* Direct children of a day note will be displayed on the calendar despite not having a `dateNote` attribute. Children of the child notes will not be displayed.
|
||||||
|
|
||||||

|
<img src="8_Calendar View_image.png" width="1217" height="724">
|
||||||
|
|
||||||
### Using a different attribute as event title
|
### Using a different attribute as event title
|
||||||
|
|
||||||
@ -104,7 +87,7 @@ By default, events are displayed on the calendar by their note title. However, i
|
|||||||
|
|
||||||
To do so, assign `#calendar:title` to the child note (not the calendar/book note), with the value being `name` where `name` can be any label (make not to add the `#` prefix). The attribute can also come through inheritance such as a template attribute. If the note does not have the requested label, the title of the note will be used instead.
|
To do so, assign `#calendar:title` to the child note (not the calendar/book note), with the value being `name` where `name` can be any label (make not to add the `#` prefix). The attribute can also come through inheritance such as a template attribute. If the note does not have the requested label, the title of the note will be used instead.
|
||||||
|
|
||||||
<table><thead><tr><th> </th><th> </th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre></td><td><img src="5_Calendar View_image.png"></td></tr></tbody></table>
|
<figure class="table" style="width:100%;"><table><thead><tr><th> </th><th> </th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre></td><td><p> </p><figure class="image image-style-align-center"><img style="aspect-ratio:445/124;" src="5_Calendar View_image.png" width="445" height="124"></figure></td></tr></tbody></table></figure>
|
||||||
|
|
||||||
### Using a relation attribute as event title
|
### Using a relation attribute as event title
|
||||||
|
|
||||||
@ -112,12 +95,8 @@ Similarly to using an attribute, use `#calendar:title` and set it to `name` wher
|
|||||||
|
|
||||||
Moreover, if there are more relations of the same name, they will be displayed as multiple events coming from the same note.
|
Moreover, if there are more relations of the same name, they will be displayed as multiple events coming from the same note.
|
||||||
|
|
||||||
| | |
|
<figure class="table" style="width:100%;"><table><thead><tr><th> </th><th> </th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code></pre></td><td><img src="6_Calendar View_image.png" width="294" height="151"></td></tr></tbody></table></figure>
|
||||||
| --- | --- |
|
|
||||||
| `#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"` |  |
|
|
||||||
|
|
||||||
Note that it's even possible to have a `#calendar:title` on the target note (e.g. “John Smith”) which will try to render an attribute of it. Note that it's not possible to use a relation here as well for safety reasons (an accidental recursion of attributes could cause the application to loop infinitely).
|
Note that it's even possible to have a `#calendar:title` on the target note (e.g. “John Smith”) which will try to render an attribute of it. Note that it's not possible to use a relation here as well for safety reasons (an accidental recursion of attributes could cause the application to loop infinitely).
|
||||||
|
|
||||||
| | |
|
<figure class="table" style="width:100%;"><table><thead><tr><th> </th><th> </th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">#calendar:title="shortName" #shortName="John S."</code></pre></td><td><figure class="image image-style-align-center"><img style="aspect-ratio:296/150;" src="1_Calendar View_image.png" width="296" height="150"></figure></td></tr></tbody></table></figure>
|
||||||
| --- | --- |
|
|
||||||
| `#calendar:title="shortName" #shortName="John S."` |  |
|
|
@ -1,5 +1,5 @@
|
|||||||
# Floating buttons
|
# Floating buttons
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:893/144;" src="Floating buttons_image.png" width="893" height="144"></figure>
|
||||||
|
|
||||||
Depending on the current note, a panel will appear near the top-right of the note, right underneath the <a class="reference-link" href="Ribbon.md">Ribbon</a>. These buttons offer additional interaction that is specific to that particular note.
|
Depending on the current note, a panel will appear near the top-right of the note, right underneath the <a class="reference-link" href="Ribbon.md">Ribbon</a>. These buttons offer additional interaction that is specific to that particular note.
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# Options
|
# Options
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:1189/709;" src="Options_image.png" width="1189" height="709"></figure>
|
||||||
|
|
||||||
The Options section allows the configuration of the TriliumNext client and server.
|
The Options section allows the configuration of the TriliumNext client and server.
|
||||||
|
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
# Split View
|
# Split View
|
||||||
In Trilium, is possible to work with two or more notes side-by-side.
|
In Trilium, is possible to work with two or more notes side-by-side.
|
||||||
|
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:1398/1015;" src="Split View_2_Split View_im.png" width="1398" height="1015"></figure>
|
||||||
|
|
||||||
## **Interactions**
|
## **Interactions**
|
||||||
|
|
||||||
* Press the <img src="Split View_Split View_imag.png" width="16" height="16"> button to the right of a note's title to open a new split to the right of it.
|
* Press the  button to the right of a note's title to open a new split to the right of it.
|
||||||
* It is possible to have as many splits as desired, simply press again the button.
|
* It is possible to have as many splits as desired, simply press again the button.
|
||||||
* Only horizontal splits are possible, vertical or drag & dropping is not supported.
|
* Only horizontal splits are possible, vertical or drag & dropping is not supported.
|
||||||
* When at least one split is open, press the  button next to it to close it.
|
* When at least one split is open, press the  button next to it to close it.
|
||||||
* Use the <img src="Split View_4_Split View_im.png" width="7" height="10"> or the <img src="Split View_1_Split View_im.png" width="7" height="10"> button to move around the splits.
|
* Use the  or the  button to move around the splits.
|
||||||
* Each [tab](Tabs.md) has its own split view configuration (e.g. one tab can have two notes in a split view, whereas the others are one-note views).
|
* Each [tab](Tabs.md) has its own split view configuration (e.g. one tab can have two notes in a split view, whereas the others are one-note views).
|
||||||
* The tab will indicate only the title of the main note (the first one in the list).
|
* The tab will indicate only the title of the main note (the first one in the list).
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# Tabs
|
# Tabs
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:1119/43;" src="2_Tabs_image.png" width="1119" height="43"></figure>
|
||||||
|
|
||||||
In Trilium, tabs allow easy switching between notes.
|
In Trilium, tabs allow easy switching between notes.
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@ To create a new note of a different type, head to the <a class="reference-link"
|
|||||||
* _Insert note after_, to put the new note underneath the one selected.
|
* _Insert note after_, to put the new note underneath the one selected.
|
||||||
* _Insert child note_, to insert the note as a child of the selected note.
|
* _Insert child note_, to insert the note as a child of the selected note.
|
||||||
|
|
||||||
<img src="Note Types_image.png" width="613" height="529">
|

|
||||||
|
|
||||||
## Creating a new note of a different type via add link or new tab
|
## Creating a new note of a different type via add link or new tab
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@ Since we set the script to be run on start-up, all we need to do is to [refresh
|
|||||||
|
|
||||||
## Understanding how the script works
|
## Understanding how the script works
|
||||||
|
|
||||||
<table class="ck-table-resized"><colgroup><col style="width:50%;"><col style="width:50%;"></colgroup><tbody><tr><td><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
|
<table class="ck-table-resized"><colgroup><col><col></colgroup><tbody><tr><td><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
|
||||||
title: "New task",
|
title: "New task",
|
||||||
icon: "task",
|
icon: "task",
|
||||||
shortcut: "alt+n",
|
shortcut: "alt+n",
|
||||||
|
@ -12,7 +12,7 @@ Since these files come from an external source, it is not possible to create a _
|
|||||||
|
|
||||||
### PDFs
|
### PDFs
|
||||||
|
|
||||||
<img src="File_image.png" width="933" height="666">
|
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:933/666;" src="File_image.png" width="933" height="666"></figure>
|
||||||
|
|
||||||
PDFs can be browsed directly from Trilium.
|
PDFs can be browsed directly from Trilium.
|
||||||
|
|
||||||
@ -29,7 +29,7 @@ Interaction:
|
|||||||
|
|
||||||
### Images
|
### Images
|
||||||
|
|
||||||
<img src="4_File_image.png" width="879" height="766">
|
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:879/766;" src="4_File_image.png" width="879" height="766"></figure>
|
||||||
|
|
||||||
Interaction:
|
Interaction:
|
||||||
|
|
||||||
@ -37,7 +37,7 @@ Interaction:
|
|||||||
|
|
||||||
### Videos
|
### Videos
|
||||||
|
|
||||||
<img src="1_File_image.png" width="854" height="700">
|
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:854/700;" src="1_File_image.png" width="854" height="700"></figure>
|
||||||
|
|
||||||
Video files can be added in as well. The file is streamed directly, so when accessing the note from a server it doesn't have to download the entire video to start playing it.
|
Video files can be added in as well. The file is streamed directly, so when accessing the note from a server it doesn't have to download the entire video to start playing it.
|
||||||
|
|
||||||
@ -46,7 +46,7 @@ Video files can be added in as well. The file is streamed directly, so when acce
|
|||||||
|
|
||||||
### Audio
|
### Audio
|
||||||
|
|
||||||
<img src="3_File_image.png" width="850" height="243">
|
<figure class="image image_resized image-style-align-center" style="width:50%;"><img style="aspect-ratio:850/243;" src="3_File_image.png" width="850" height="243"></figure>
|
||||||
|
|
||||||
Adding a supported audio file will reveal a basic audio player that can be used to play it.
|
Adding a supported audio file will reveal a basic audio player that can be used to play it.
|
||||||
|
|
||||||
@ -59,7 +59,7 @@ Interactions:
|
|||||||
|
|
||||||
### Text files
|
### Text files
|
||||||
|
|
||||||
<img src="2_File_image.png" width="926" height="347">
|
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:926/347;" src="2_File_image.png" width="926" height="347"></figure>
|
||||||
|
|
||||||
Files that are identified as containing text will show a preview of their content. One common use case for this type of file is to embed text files whose content is not necessarily of interest to the user, such as third-party libraries or generated content, that can then be downloaded if needed.
|
Files that are identified as containing text will show a preview of their content. One common use case for this type of file is to embed text files whose content is not necessarily of interest to the user, such as third-party libraries or generated content, that can then be downloaded if needed.
|
||||||
|
|
||||||
@ -69,7 +69,7 @@ Since one of the use cases for having files instead of notes is to display large
|
|||||||
|
|
||||||
### Unknown file types
|
### Unknown file types
|
||||||
|
|
||||||
<img src="5_File_image.png" width="532" height="240">
|
<figure class="image image_resized image-style-align-center" style="width:50%;"><img style="aspect-ratio:532/240;" src="5_File_image.png" width="532" height="240"></figure>
|
||||||
|
|
||||||
If the file could not be identified as any of the supported file types from above, it will be treated as an unknown file. In this case, all the default interactions will be available such as downloading or opening the file externally, but there will be no preview of the content.
|
If the file could not be identified as any of the supported file types from above, it will be treated as an unknown file. In this case, all the default interactions will be available such as downloading or opening the file externally, but there will be no preview of the content.
|
||||||
|
|
||||||
@ -84,6 +84,9 @@ If the file could not be identified as any of the supported file types from abov
|
|||||||
|
|
||||||
## Relation with other notes
|
## Relation with other notes
|
||||||
|
|
||||||
* Files are also displayed in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a> based on their type:<img src="6_File_image.png" width="853" height="315">
|
* Files are also displayed in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a> based on their type:
|
||||||
|
|
||||||
|
<img class="image_resized" style="aspect-ratio:853/315;width:50%;" src="6_File_image.png" width="853" height="315">
|
||||||
|
|
||||||
* Non-image files can be embedded into text notes as read-only widgets via the <a class="reference-link" href="Text/Include%20Note.md">Include Note</a> functionality.
|
* Non-image files can be embedded into text notes as read-only widgets via the <a class="reference-link" href="Text/Include%20Note.md">Include Note</a> functionality.
|
||||||
* Image files can be embedded into text notes like normal images via <a class="reference-link" href="Text/Images/Image%20references.md">Image references</a>.
|
* Image files can be embedded into text notes like normal images via <a class="reference-link" href="Text/Images/Image%20references.md">Image references</a>.
|
@ -1,14 +1,11 @@
|
|||||||
# Geo Map
|
# Geo Map
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:892/675;" src="10_Geo Map_image.png" width="892" height="675"></figure>
|
||||||
|
|
||||||
This note type displays the children notes on a geographical map, based on an attribute. It is also possible to add new notes at a specific location using the built-in interface.
|
This note type displays the children notes on a geographical map, based on an attribute. It is also possible to add new notes at a specific location using the built-in interface.
|
||||||
|
|
||||||
## Creating a new geo map
|
## Creating a new geo map
|
||||||
|
|
||||||
| | | |
|
<figure class="table"><table><thead><tr><th> </th><th> </th><th> </th></tr></thead><tbody><tr><td>1</td><td><figure class="image image_resized image-style-align-center" style="width:51.25%;"><img style="aspect-ratio:1256/1044;" src="7_Geo Map_image.png" width="1256" height="1044"></figure></td><td>Right click on any note on the note tree and select <em>Insert child note</em> → <em>Geo Map (beta)</em>.</td></tr><tr><td>2</td><td><figure class="image image_resized image-style-align-center" style="width:53.44%;"><img style="aspect-ratio:1720/1396;" src="9_Geo Map_image.png" width="1720" height="1396"></figure></td><td>By default the map will be empty and will show the entire world.</td></tr></tbody></table></figure>
|
||||||
| --- | --- | --- |
|
|
||||||
| 1 |  | Right click on any note on the note tree and select _Insert child note_ → _Geo Map (beta)_. |
|
|
||||||
| 2 |  | By default the map will be empty and will show the entire world. |
|
|
||||||
|
|
||||||
## Repositioning the map
|
## Repositioning the map
|
||||||
|
|
||||||
@ -19,18 +16,13 @@ The position on the map and the zoom are saved inside the map note and restored
|
|||||||
|
|
||||||
## Adding a marker using the map
|
## Adding a marker using the map
|
||||||
|
|
||||||
| | | |
|
<figure class="table"><table><thead><tr><th> </th><th> </th><th> </th></tr></thead><tbody><tr><td>1</td><td>To create a marker, first navigate to the desired point on the map. Then press the <img src="11_Geo Map_image.png"> button in the <a href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md">Floating buttons</a> (top-right) area. <br><br>If the button is not visible, make sure the button section is visible by pressing the chevron button (<img src="17_Geo Map_image.png">) in the top-right of the map.</td><td> </td></tr><tr><td>2</td><td><img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png" width="1730" height="416"></td><td>Once pressed, the map will enter in the insert mode, as illustrated by the notification. <br><br>Simply click the point on the map where to place the marker, or the Escape key to cancel.</td></tr><tr><td>3</td><td><img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="8_Geo Map_image.png" width="1586" height="404"></td><td>Enter the name of the marker/note to be created.</td></tr><tr><td>4</td><td><img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map_image.png" width="1696" height="608"></td><td>Once confirmed, the marker will show up on the map and it will also be displayed as a child note of the map.</td></tr></tbody></table></figure>
|
||||||
| --- | --- | --- |
|
|
||||||
| 1 | To create a marker, first navigate to the desired point on the map. Then press the  button in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) (top-right) area. <br> <br>If the button is not visible, make sure the button section is visible by pressing the chevron button () in the top-right of the map. | |
|
|
||||||
| 2 |  | Once pressed, the map will enter in the insert mode, as illustrated by the notification. <br> <br>Simply click the point on the map where to place the marker, or the Escape key to cancel. |
|
|
||||||
| 3 |  | Enter the name of the marker/note to be created. |
|
|
||||||
| 4 |  | Once confirmed, the marker will show up on the map and it will also be displayed as a child note of the map. |
|
|
||||||
|
|
||||||
## How the location of the markers is stored
|
## How the location of the markers is stored
|
||||||
|
|
||||||
The location of a marker is stored in the `#geolocation` attribute of the child notes:
|
The location of a marker is stored in the `#geolocation` attribute of the child notes:
|
||||||
|
|
||||||

|
<img src="18_Geo Map_image.png" width="1288" height="278">
|
||||||
|
|
||||||
This value can be added manually if needed. The value of the attribute is made up of the latitude and longitude separated by a comma.
|
This value can be added manually if needed. The value of the attribute is made up of the latitude and longitude separated by a comma.
|
||||||
|
|
||||||
@ -54,7 +46,7 @@ If moved by mistake, there is currently no way to undo the change. If the mouse
|
|||||||
|
|
||||||
## Icon and color of the markers
|
## Icon and color of the markers
|
||||||
|
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:523/295;" src="Geo Map_image.jpg" alt="image" width="523" height="295"></figure>
|
||||||
|
|
||||||
The markers will have the same icon as the note.
|
The markers will have the same icon as the note.
|
||||||
|
|
||||||
@ -68,35 +60,23 @@ The value of the attribute is made up of the latitude and longitude separated by
|
|||||||
|
|
||||||
### Adding from Google Maps
|
### Adding from Google Maps
|
||||||
|
|
||||||
| | | |
|
<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:2.77%;"><col style="width:33.24%;"><col style="width:63.99%;"></colgroup><thead><tr><th> </th><th> </th><th> </th></tr></thead><tbody><tr><td>1</td><td><figure class="image image_resized image-style-align-center" style="width:56.84%;"><img style="aspect-ratio:732/918;" src="13_Geo Map_image.png" width="732" height="918"></figure></td><td>Go to Google Maps on the web and look for a desired location, right click on it and a context menu will show up. <br><br>Simply click on the first item displaying the coordinates and they will be copied to clipboard. <br><br>Then paste the value inside the text box into the <code>#geolocation</code> attribute of a child note of the map (don't forget to surround the value with a <code>"</code> character).</td></tr><tr><td>2</td><td><figure class="image image_resized image-style-align-center" style="width:100%;"><img style="aspect-ratio:518/84;" src="4_Geo Map_image.png" width="518" height="84"></figure></td><td>In Trilium, create a child note under the map.</td></tr><tr><td>3</td><td><figure class="image image_resized image-style-align-center" style="width:100%;"><img style="aspect-ratio:1074/276;" src="12_Geo Map_image.png" width="1074" height="276"></figure></td><td>And then go to Owned Attributes and type <code>#geolocation="</code>, then paste from the clipboard as-is and then add the ending <code>"</code> character. Press Enter to confirm and the map should now be updated to contain the new note.</td></tr></tbody></table></figure>
|
||||||
| --- | --- | --- |
|
|
||||||
| 1 |  | Go to Google Maps on the web and look for a desired location, right click on it and a context menu will show up. <br> <br>Simply click on the first item displaying the coordinates and they will be copied to clipboard. <br> <br>Then paste the value inside the text box into the `#geolocation` attribute of a child note of the map (don't forget to surround the value with a `"` character). |
|
|
||||||
| 2 |  | In Trilium, create a child note under the map. |
|
|
||||||
| 3 |  | And then go to Owned Attributes and type `#geolocation="`, then paste from the clipboard as-is and then add the ending `"` character. Press Enter to confirm and the map should now be updated to contain the new note. |
|
|
||||||
|
|
||||||
### Adding from OpenStreetMap
|
### Adding from OpenStreetMap
|
||||||
|
|
||||||
Similarly to the Google Maps approach:
|
Similarly to the Google Maps approach:
|
||||||
|
|
||||||
| | | |
|
<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:2.77%;"><col style="width:33.42%;"><col style="width:63.81%;"></colgroup><thead><tr><th> </th><th> </th><th> </th></tr></thead><tbody><tr><td>1</td><td><img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png" width="562" height="454"></td><td>Go to any location on openstreetmap.org and right click to bring up the context menu. Select the “Show address” item.</td></tr><tr><td>2</td><td><img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png" width="696" height="480"></td><td>The address will be visible in the top-left of the screen, in the place of the search bar. <br><br>Select the coordinates and copy them into the clipboard.</td></tr><tr><td>3</td><td><img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png" width="640" height="276"></td><td>Simply paste the value inside the text box into the <code>#geolocation</code> attribute of a child note of the map and then it should be displayed on the map.</td></tr></tbody></table></figure>
|
||||||
| --- | --- | --- |
|
|
||||||
| 1 |  | Go to any location on openstreetmap.org and right click to bring up the context menu. Select the “Show address” item. |
|
|
||||||
| 2 |  | The address will be visible in the top-left of the screen, in the place of the search bar. <br> <br>Select the coordinates and copy them into the clipboard. |
|
|
||||||
| 3 |  | Simply paste the value inside the text box into the `#geolocation` attribute of a child note of the map and then it should be displayed on the map. |
|
|
||||||
|
|
||||||
## Adding GPS tracks (.gpx)
|
## Adding GPS tracks (.gpx)
|
||||||
|
|
||||||
Trilium has basic support for displaying GPS tracks on the geo map.
|
Trilium has basic support for displaying GPS tracks on the geo map.
|
||||||
|
|
||||||
| | | |
|
<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:2.77%;"><col style="width:30.22%;"><col style="width:67.01%;"></colgroup><thead><tr><th> </th><th> </th><th> </th></tr></thead><tbody><tr><td>1</td><td><figure class="image image-style-align-center"><img style="aspect-ratio:226/74;" src="3_Geo Map_image.png" width="226" height="74"></figure></td><td>To add a track, simply drag & drop a .gpx file inside the geo map in the note tree.</td></tr><tr><td>2</td><td><figure class="image image-style-align-center"><img style="aspect-ratio:322/222;" src="15_Geo Map_image.png" width="322" height="222"></figure></td><td>In order for the file to be recognized as a GPS track, it needs to show up as <code>application/gpx+xml</code> in the <em>File type</em> field.</td></tr><tr><td>3</td><td><figure class="image image-style-align-center"><img style="aspect-ratio:620/530;" src="6_Geo Map_image.png" width="620" height="530"></figure></td><td>When going back to the map, the track should now be visible. <br><br>The start and end points of the track are indicated by the two blue markers.</td></tr></tbody></table></figure>
|
||||||
| --- | --- | --- |
|
|
||||||
| 1 |  | To add a track, simply drag & drop a .gpx file inside the geo map in the note tree. |
|
|
||||||
| 2 |  | In order for the file to be recognized as a GPS track, it needs to show up as `application/gpx+xml` in the _File type_ field. |
|
|
||||||
| 3 |  | When going back to the map, the track should now be visible. <br> <br>The start and end points of the track are indicated by the two blue markers. |
|
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||

|
<figure class="image image-style-align-right image_resized" style="width:34.06%;"><img style="aspect-ratio:678/499;" src="14_Geo Map_image.png" width="678" height="499"></figure>
|
||||||
|
|
||||||
### Grid-like artifacts on the map
|
### Grid-like artifacts on the map
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# Mermaid Diagrams
|
# Mermaid Diagrams
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:886/663;" src="2_Mermaid Diagrams_image.png" width="886" height="663"></figure>
|
||||||
|
|
||||||
Trilium supports Mermaid, which adds support for various diagrams such as flowchart, sequence diagram, class diagram, state diagram, pie charts, etc., all using a text description of the chart instead of manually drawing the diagram.
|
Trilium supports Mermaid, which adds support for various diagrams such as flowchart, sequence diagram, class diagram, state diagram, pie charts, etc., all using a text description of the chart instead of manually drawing the diagram.
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# Mind Map
|
# Mind Map
|
||||||

|
<figure class="image image-style-align-center"><img style="aspect-ratio:892/675;" src="Mind Map_image.png" width="892" height="675"></figure>
|
||||||
|
|
||||||
The mindmap allows for easy jotting down of ideas and storing them in a hierarchical fashion.
|
The mindmap allows for easy jotting down of ideas and storing them in a hierarchical fashion.
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# Note Map
|
# Note Map
|
||||||

|
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:856/763;" src="Note Map_image.png" width="856" height="763"></figure>
|
||||||
|
|
||||||
A Note map is a note type which displays a standalone version of the feature of the same name: [Note Map (Link map, Tree map)](../Advanced%20Usage/Note%20Map%20\(Link%20map%2C%20Tree%20map\).md).
|
A Note map is a note type which displays a standalone version of the feature of the same name: [Note Map (Link map, Tree map)](../Advanced%20Usage/Note%20Map%20\(Link%20map%2C%20Tree%20map\).md).
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# Image references
|
# Image references
|
||||||
<img src="Image references_image.png" width="880" height="553">
|
<figure class="image image-style-align-right image_resized" style="width:50.47%;"><img style="aspect-ratio:880/553;" src="Image references_image.png" width="880" height="553"></figure>
|
||||||
|
|
||||||
Image references are an easy way to embed the preview of another note type into a <a class="reference-link" href="../../Text.md">Text</a> note.
|
Image references are an easy way to embed the preview of another note type into a <a class="reference-link" href="../../Text.md">Text</a> note.
|
||||||
|
|
||||||
@ -11,7 +11,7 @@ Image references are an easy way to embed the preview of another note type into
|
|||||||
|
|
||||||
## Steps
|
## Steps
|
||||||
|
|
||||||
1. Go to one of the supported notes (listed above) and look for the <img src="1_Image references_image.png" width="18" height="18"> button in the <a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md">Floating buttons</a> area.
|
1. Go to one of the supported notes (listed above) and look for the  button in the <a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md">Floating buttons</a> area.
|
||||||
2. Go to a <a class="reference-link" href="../../Text.md">Text</a> note and use the Paste function to insert the reference to that note.
|
2. Go to a <a class="reference-link" href="../../Text.md">Text</a> note and use the Paste function to insert the reference to that note.
|
||||||
|
|
||||||
## Interaction
|
## Interaction
|
||||||
|
@ -3,4 +3,4 @@ Text notes can "include" another note as a read-only widget. This can be useful
|
|||||||
|
|
||||||
## Including a note
|
## Including a note
|
||||||
|
|
||||||
In the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a>, look for the <img src="Include Note_image.png" width="16" height="16"> button. There is also a keyboard shortcut defined for it but it is not allocated by default.
|
In the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a>, look for the  button. There is also a keyboard shortcut defined for it but it is not allocated by default.
|
@ -1715,6 +1715,13 @@
|
|||||||
"value": "bx bx-cog",
|
"value": "bx bx-cog",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 10
|
"position": 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "relation",
|
||||||
|
"name": "internalLink",
|
||||||
|
"value": "_options",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 60
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"format": "html",
|
"format": "html",
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<h1 data-trilium-h1>Jump to Note</h1>
|
<h1 data-trilium-h1>Jump to Note</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:991/403;" src="Jump to Note_image.png" width="991"
|
<img style="aspect-ratio:991/403;" src="Jump to Note_image.png" width="991"
|
||||||
height="403">
|
height="403">
|
||||||
</figure>
|
</figure>
|
||||||
@ -24,7 +24,7 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li>In the <a class="reference-link" href="../UI%20Elements/Launch%20Bar.html">Launch Bar</a>,
|
<li>In the <a class="reference-link" href="../UI%20Elements/Launch%20Bar.html">Launch Bar</a>,
|
||||||
press
|
press
|
||||||
<img src="1_Jump to Note_image.png" width="20" height="19">button.</li>
|
<img src="1_Jump to Note_image.png">button.</li>
|
||||||
<li>Using the keyboard, press <kbd>Ctrl</kbd> + <kbd>J</kbd>.</li>
|
<li>Using the keyboard, press <kbd>Ctrl</kbd> + <kbd>J</kbd>.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Interaction</h2>
|
<h2>Interaction</h2>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<h1 data-trilium-h1>Quick search</h1>
|
<h1 data-trilium-h1>Quick search</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:659/256;" src="Quick search_image.png" width="659"
|
<img style="aspect-ratio:659/256;" src="Quick search_image.png" width="659"
|
||||||
height="256">
|
height="256">
|
||||||
</figure>
|
</figure>
|
||||||
@ -36,7 +36,6 @@
|
|||||||
href="../UI%20Elements/Launch%20Bar.html">Launch Bar</a>, where it can
|
href="../UI%20Elements/Launch%20Bar.html">Launch Bar</a>, where it can
|
||||||
be positioned just like any other icon.</li>
|
be positioned just like any other icon.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p> </p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -26,9 +26,10 @@
|
|||||||
the <code>#viewType</code> attribute.</p>
|
the <code>#viewType</code> attribute.</p>
|
||||||
</aside>
|
</aside>
|
||||||
<h3>Grid view</h3>
|
<h3>Grid view</h3>
|
||||||
<p>
|
<figure class="image image-style-align-center">
|
||||||
<img src="1_Note List_image.png" width="1025" height="655">
|
<img style="aspect-ratio:1025/655;" src="1_Note List_image.png" width="1025"
|
||||||
</p>
|
height="655">
|
||||||
|
</figure>
|
||||||
<p>This view presents the child notes in a grid format, allowing for a more
|
<p>This view presents the child notes in a grid format, allowing for a more
|
||||||
visual navigation experience.</p>
|
visual navigation experience.</p>
|
||||||
<ul>
|
<ul>
|
||||||
@ -43,7 +44,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<p>This is the default view type.</p>
|
<p>This is the default view type.</p>
|
||||||
<h3>List view</h3>
|
<h3>List view</h3>
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:1013/526;" src="Note List_image.png" width="1013"
|
<img style="aspect-ratio:1013/526;" src="Note List_image.png" width="1013"
|
||||||
height="526">
|
height="526">
|
||||||
</figure>
|
</figure>
|
||||||
@ -52,7 +53,7 @@
|
|||||||
the expand button it's possible to view the content of the note, as well
|
the expand button it's possible to view the content of the note, as well
|
||||||
as the children of the note (recursively).</p>
|
as the children of the note (recursively).</p>
|
||||||
<h3>Calendar view</h3>
|
<h3>Calendar view</h3>
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:1090/598;" src="2_Note List_image.png" width="1090"
|
<img style="aspect-ratio:1090/598;" src="2_Note List_image.png" width="1090"
|
||||||
height="598">
|
height="598">
|
||||||
</figure>
|
</figure>
|
||||||
|
@ -13,9 +13,10 @@
|
|||||||
<h1 data-trilium-h1>Calendar View</h1>
|
<h1 data-trilium-h1>Calendar View</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<p>
|
<figure class="image image-style-align-center">
|
||||||
<img src="4_Calendar View_image.png">
|
<img style="aspect-ratio:767/606;" src="4_Calendar View_image.png" width="767"
|
||||||
</p>
|
height="606">
|
||||||
|
</figure>
|
||||||
<p>The Calendar view of Book notes will display each child note in a calendar
|
<p>The Calendar view of Book notes will display each child note in a calendar
|
||||||
that has a start date and optionally an end date, as an event.</p>
|
that has a start date and optionally an end date, as an event.</p>
|
||||||
<p>The Calendar view has multiple display modes:</p>
|
<p>The Calendar view has multiple display modes:</p>
|
||||||
@ -31,12 +32,13 @@
|
|||||||
<p>Unlike other Book view types, the Calendar view also allows some kind
|
<p>Unlike other Book view types, the Calendar view also allows some kind
|
||||||
of interaction, such as moving events around as well as creating new ones.</p>
|
of interaction, such as moving events around as well as creating new ones.</p>
|
||||||
<h2>Creating a calendar</h2>
|
<h2>Creating a calendar</h2>
|
||||||
|
<figure class="table">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th> </th>
|
||||||
<th></th>
|
<th> </th>
|
||||||
<th></th>
|
<th> </th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -59,8 +61,8 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</figure>
|
||||||
<h2>Creating a new event/note</h2>
|
<h2>Creating a new event/note</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Clicking on a day will create a new child note and assign it to that particular
|
<li>Clicking on a day will create a new child note and assign it to that particular
|
||||||
day.
|
day.
|
||||||
@ -92,6 +94,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<h2>Configuring the calendar</h2>
|
<h2>Configuring the calendar</h2>
|
||||||
<p>The following attributes can be added to the book type:</p>
|
<p>The following attributes can be added to the book type:</p>
|
||||||
|
<figure class="table">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -137,10 +140,13 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</figure>
|
||||||
<p>In addition, the first day of the week can be either Sunday or Monday
|
<p>In addition, the first day of the week can be either Sunday or Monday
|
||||||
and can be adjusted from the application settings.</p>
|
and can be adjusted from the application settings.</p>
|
||||||
<h2>Configuring the calendar events</h2>
|
<h2>Configuring the calendar events</h2>
|
||||||
<p>For each note of the calendar, the following attributes can be used:</p>
|
<p>For each note of the calendar, the following attributes can be used:</p>
|
||||||
|
<figure
|
||||||
|
class="table">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -206,15 +212,15 @@
|
|||||||
<td><code>#calendar:displayedAttributes</code>
|
<td><code>#calendar:displayedAttributes</code>
|
||||||
</td>
|
</td>
|
||||||
<td>Allows displaying the value of one or more attributes in the calendar
|
<td>Allows displaying the value of one or more attributes in the calendar
|
||||||
like this:
|
like this:
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<img src="9_Calendar View_image.png">
|
<img src="9_Calendar View_image.png">
|
||||||
<br>
|
<br>
|
||||||
<br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>
|
<br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>
|
||||||
<br>
|
<br>
|
||||||
<br>It can also be used with relations, case in which it will display the
|
<br>It can also be used with relations, case in which it will display the
|
||||||
title of the target note:
|
title of the target note:
|
||||||
<br>
|
<br>
|
||||||
<br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
|
<br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
|
||||||
</td>
|
</td>
|
||||||
@ -246,8 +252,8 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</figure>
|
||||||
<h2>How the calendar works</h2>
|
<h2>How the calendar works</h2>
|
||||||
<p>
|
<p>
|
||||||
<img src="11_Calendar View_image.png">
|
<img src="11_Calendar View_image.png">
|
||||||
</p>
|
</p>
|
||||||
@ -284,7 +290,7 @@
|
|||||||
will not be displayed.</li>
|
will not be displayed.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>
|
<p>
|
||||||
<img src="8_Calendar View_image.png">
|
<img src="8_Calendar View_image.png" width="1217" height="724">
|
||||||
</p>
|
</p>
|
||||||
<h3>Using a different attribute as event title</h3>
|
<h3>Using a different attribute as event title</h3>
|
||||||
<p>By default, events are displayed on the calendar by their note title.
|
<p>By default, events are displayed on the calendar by their note title.
|
||||||
@ -295,6 +301,8 @@
|
|||||||
be any label (make not to add the <code>#</code> prefix). The attribute can
|
be any label (make not to add the <code>#</code> prefix). The attribute can
|
||||||
also come through inheritance such as a template attribute. If the note
|
also come through inheritance such as a template attribute. If the note
|
||||||
does not have the requested label, the title of the note will be used instead.</p>
|
does not have the requested label, the title of the note will be used instead.</p>
|
||||||
|
<figure
|
||||||
|
class="table" style="width:100%;">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -307,57 +315,69 @@
|
|||||||
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre>
|
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="5_Calendar View_image.png">
|
<p> </p>
|
||||||
|
<figure class="image image-style-align-center">
|
||||||
|
<img style="aspect-ratio:445/124;" src="5_Calendar View_image.png" width="445"
|
||||||
|
height="124">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</figure>
|
||||||
<h3>Using a relation attribute as event title</h3>
|
<h3>Using a relation attribute as event title</h3>
|
||||||
<p>Similarly to using an attribute, use <code>#calendar:title</code> and set
|
<p>Similarly to using an attribute, use <code>#calendar:title</code> and set
|
||||||
it to <code>name</code> where <code>name</code> is the name of the relation
|
it to <code>name</code> where <code>name</code> is the name of the relation
|
||||||
to use.</p>
|
to use.</p>
|
||||||
<p>Moreover, if there are more relations of the same name, they will be displayed
|
<p>Moreover, if there are more relations of the same name, they will be displayed
|
||||||
as multiple events coming from the same note.</p>
|
as multiple events coming from the same note.</p>
|
||||||
|
<figure class="table"
|
||||||
|
style="width:100%;">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th> </th>
|
||||||
<th></th>
|
<th> </th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code>
|
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code></pre>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="6_Calendar View_image.png">
|
<img src="6_Calendar View_image.png" width="294" height="151">
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</figure>
|
||||||
<p>Note that it's even possible to have a <code>#calendar:title</code> on the
|
<p>Note that it's even possible to have a <code>#calendar:title</code> on the
|
||||||
target note (e.g. “John Smith”) which will try to render an attribute of
|
target note (e.g. “John Smith”) which will try to render an attribute of
|
||||||
it. Note that it's not possible to use a relation here as well for safety
|
it. Note that it's not possible to use a relation here as well for safety
|
||||||
reasons (an accidental recursion of attributes could cause the application
|
reasons (an accidental recursion of attributes could cause the application
|
||||||
to loop infinitely).</p>
|
to loop infinitely).</p>
|
||||||
|
<figure class="table" style="width:100%;">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th> </th>
|
||||||
<th></th>
|
<th> </th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>#calendar:title="shortName" #shortName="John S."</code>
|
<td><pre><code class="language-text-x-trilium-auto">#calendar:title="shortName" #shortName="John S."</code></pre>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="1_Calendar View_image.png">
|
<figure class="image image-style-align-center">
|
||||||
|
<img style="aspect-ratio:296/150;" src="1_Calendar View_image.png" width="296"
|
||||||
|
height="150">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -13,9 +13,9 @@
|
|||||||
<h1 data-trilium-h1>Read-Only Notes</h1>
|
<h1 data-trilium-h1>Read-Only Notes</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<p>Some note types such as <a class="reference-link" href="../../Note%20Types/Text.html">Text</a> and
|
<p>Some note types such as <a href="../../Note%20Types/Text.html">Text</a> and
|
||||||
<a
|
<a
|
||||||
class="reference-link" href="../../Note%20Types/Code.html">Code</a> notes in Trilium can be set to read-only. When a note is
|
href="../../Note%20Types/Code.html">Code</a> notes in Trilium can be set to read-only. When a note is
|
||||||
in read-only mode, it is presented to the user in a non-editable view,
|
in read-only mode, it is presented to the user in a non-editable view,
|
||||||
with the option to switch to editing mode if needed.</p>
|
with the option to switch to editing mode if needed.</p>
|
||||||
<h2>Automatic read-only mode</h2>
|
<h2>Automatic read-only mode</h2>
|
||||||
@ -25,29 +25,22 @@
|
|||||||
<p>This behavior can be disabled on a per-note basis, by following the instructions
|
<p>This behavior can be disabled on a per-note basis, by following the instructions
|
||||||
of the next section.</p>
|
of the next section.</p>
|
||||||
<p>In addition, it's possible to change the number of characters at which
|
<p>In addition, it's possible to change the number of characters at which
|
||||||
the automatic read-only mode will trigger in <a class="reference-link"
|
the automatic read-only mode will trigger in <a href="../UI%20Elements/Options.html">Options</a> by
|
||||||
href="../UI%20Elements/Options.html">Options</a> by going to the options
|
going to the options for <a class="reference-link" href="#root/_hidden/_options/_optionsTextNotes">Text Notes</a> and
|
||||||
for <a class="reference-link" href="../../Note%20Types/Text.html">Text</a> and
|
|
||||||
<a
|
<a
|
||||||
class="reference-link" href="../../Note%20Types/Code.html">Code</a> notes.</p>
|
class="reference-link" href="#root/_hidden/_options/_optionsCodeNotes">Code Notes</a>.</p>
|
||||||
<h2>Changing a note's read-only behavior</h2>
|
<h2>Changing a note's read-only behavior</h2>
|
||||||
<p>Via the <a class="reference-link" href="../UI%20Elements/Ribbon.html">Ribbon</a>,
|
<p>Via the <a class="reference-link" href="../UI%20Elements/Ribbon.html">Ribbon</a>,
|
||||||
by going to the <em>Basic Properties</em> tab and looking for the <em>Editable</em> selection.
|
by going to the <em>Basic Properties</em> tab and looking for the <em>Editable</em> selection.
|
||||||
The following options are possible:</p>
|
The following options are possible:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li><strong>Auto</strong>
|
||||||
<p><strong>Auto</strong>
|
|
||||||
<br>This is the default behavior in which the note will be editable by default,
|
<br>This is the default behavior in which the note will be editable by default,
|
||||||
unless it becomes large enough to trigger read-only mode.</p>
|
unless it becomes large enough to trigger read-only mode.</li>
|
||||||
<p> </p>
|
<li><strong>Read-only</strong>
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p><strong>Read-only</strong>
|
|
||||||
<br>The note will be always marked as read-only, regardless of its size. Nevertheless,
|
<br>The note will be always marked as read-only, regardless of its size. Nevertheless,
|
||||||
it's still possible to temporarily edit the note if needed. This is generally
|
it's still possible to temporarily edit the note if needed. This is generally
|
||||||
useful for notes that are not prone to change.</p>
|
useful for notes that are not prone to change.</li>
|
||||||
<p> </p>
|
|
||||||
</li>
|
|
||||||
<li><strong>Always Editable</strong>
|
<li><strong>Always Editable</strong>
|
||||||
<br>This option will bypass the automatic read-only activation for this particular
|
<br>This option will bypass the automatic read-only activation for this particular
|
||||||
note. It's useful for large notes that are frequently edited.</li>
|
note. It's useful for large notes that are frequently edited.</li>
|
||||||
@ -65,7 +58,7 @@
|
|||||||
<h2>Temporarily editing a read-only note</h2>
|
<h2>Temporarily editing a read-only note</h2>
|
||||||
<p>When accessing a read-only note, it's possible to temporarily edit it
|
<p>When accessing a read-only note, it's possible to temporarily edit it
|
||||||
by using the
|
by using the
|
||||||
<img src="Read-Only Notes_image.png" width="17" height="16">button in the <a class="reference-link" href="../UI%20Elements/Floating%20buttons.html">Floating buttons</a> area.</p>
|
<img src="Read-Only Notes_image.png">button in the <a class="reference-link" href="../UI%20Elements/Floating%20buttons.html">Floating buttons</a> area.</p>
|
||||||
<p>When pressed, the note will become editable but will become read-only
|
<p>When pressed, the note will become editable but will become read-only
|
||||||
again after navigating to a different note.</p>
|
again after navigating to a different note.</p>
|
||||||
<h2>Special read-only behavior</h2>
|
<h2>Special read-only behavior</h2>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<h1 data-trilium-h1>Floating buttons</h1>
|
<h1 data-trilium-h1>Floating buttons</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:893/144;" src="Floating buttons_image.png" width="893"
|
<img style="aspect-ratio:893/144;" src="Floating buttons_image.png" width="893"
|
||||||
height="144">
|
height="144">
|
||||||
</figure>
|
</figure>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<h1 data-trilium-h1>Options</h1>
|
<h1 data-trilium-h1>Options</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:1189/709;" src="Options_image.png" width="1189"
|
<img style="aspect-ratio:1189/709;" src="Options_image.png" width="1189"
|
||||||
height="709">
|
height="709">
|
||||||
</figure>
|
</figure>
|
||||||
@ -22,13 +22,13 @@
|
|||||||
<h2>Entering options</h2>
|
<h2>Entering options</h2>
|
||||||
<p>The Options can be accessed via:</p>
|
<p>The Options can be accessed via:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>The <a class="reference-link" href="Global%20menu.html">Global menu</a>,
|
<li>The <a href="Global%20menu.html">Global menu</a>, by selecting the <em>Options</em> item.</li>
|
||||||
by selecting the <em>Options</em> item.</li>
|
|
||||||
<li>The
|
<li>The
|
||||||
<img src="1_Options_image.png" width="20" height="21">button in the <a class="reference-link" href="Launch%20Bar.html">Launch Bar</a> which
|
<img src="1_Options_image.png">button in the <a href="Launch%20Bar.html">Launch Bar</a> which
|
||||||
can optionally be hidden if not desirable.</li>
|
can optionally be hidden if not desirable.</li>
|
||||||
<li>Optionally, a keyboard shortcut can be defined, but it is not assigned
|
<li>Optionally, a keyboard shortcut can be defined, but it is not assigned
|
||||||
by default.</li>
|
by default.</li>
|
||||||
|
<li>By clicking on this link: <a class="reference-link" href="#root/_hidden/_options">Options</a>.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Once in the options section, simply select one of the option categories
|
<p>Once in the options section, simply select one of the option categories
|
||||||
using the <a class="reference-link" href="Note%20Tree.html">Note Tree</a>.</p>
|
using the <a class="reference-link" href="Note%20Tree.html">Note Tree</a>.</p>
|
||||||
|
@ -15,16 +15,14 @@
|
|||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<p>In Trilium, is possible to work with two or more notes side-by-side.</p>
|
<p>In Trilium, is possible to work with two or more notes side-by-side.</p>
|
||||||
<figure
|
<figure
|
||||||
class="image">
|
class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:1398/1015;" src="Split View_2_Split View_im.png"
|
<img style="aspect-ratio:1398/1015;" src="Split View_2_Split View_im.png"
|
||||||
width="1398" height="1015">
|
width="1398" height="1015">
|
||||||
</figure>
|
</figure>
|
||||||
<h2><strong>Interactions</strong></h2>
|
<h2><strong>Interactions</strong></h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Press the
|
<li>Press the
|
||||||
<img src="Split View_Split View_imag.png" width="16" height="16">
|
<img src="Split View_Split View_imag.png">button to the right of a note's title to open a new split to the right
|
||||||
<img src="https://file+.vscode-resource.vscode-cdn.net/home/elian/UI%20Elements/Split%20View_image.png"
|
|
||||||
alt="">button to the right of a note's title to open a new split to the right
|
|
||||||
of it.
|
of it.
|
||||||
<ul>
|
<ul>
|
||||||
<li>It is possible to have as many splits as desired, simply press again the
|
<li>It is possible to have as many splits as desired, simply press again the
|
||||||
@ -34,16 +32,10 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>When at least one split is open, press the
|
<li>When at least one split is open, press the
|
||||||
<img src="https://file+.vscode-resource.vscode-cdn.net/home/elian/UI%20Elements/3_Split%20View_image.png"
|
<img src="Split View_3_Split View_im.png">button next to it to close it.</li>
|
||||||
alt="">
|
|
||||||
<img src="Split View_3_Split View_im.png" width="10" height="10">button next to it to close it.</li>
|
|
||||||
<li>Use the
|
<li>Use the
|
||||||
<img src="Split View_4_Split View_im.png" width="7" height="10">
|
<img src="Split View_4_Split View_im.png">or the
|
||||||
<img src="https://file+.vscode-resource.vscode-cdn.net/home/elian/UI%20Elements/4_Split%20View_image.png"
|
<img src="Split View_1_Split View_im.png">button to move around the splits.</li>
|
||||||
alt="">or the
|
|
||||||
<img src="Split View_1_Split View_im.png" width="7" height="10">
|
|
||||||
<img src="https://file+.vscode-resource.vscode-cdn.net/home/elian/UI%20Elements/1_Split%20View_image.png"
|
|
||||||
alt="">button to move around the splits.</li>
|
|
||||||
<li>Each <a href="Tabs.html">tab</a> has its own split view configuration (e.g.
|
<li>Each <a href="Tabs.html">tab</a> has its own split view configuration (e.g.
|
||||||
one tab can have two notes in a split view, whereas the others are one-note
|
one tab can have two notes in a split view, whereas the others are one-note
|
||||||
views).
|
views).
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<h1 data-trilium-h1>Tabs</h1>
|
<h1 data-trilium-h1>Tabs</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:1119/43;" src="2_Tabs_image.png" width="1119"
|
<img style="aspect-ratio:1119/43;" src="2_Tabs_image.png" width="1119"
|
||||||
height="43">
|
height="43">
|
||||||
</figure>
|
</figure>
|
||||||
@ -24,16 +24,15 @@
|
|||||||
<li>For the vertical layout, the tabs will be placed at the top but to the
|
<li>For the vertical layout, the tabs will be placed at the top but to the
|
||||||
right of the <a class="reference-link" href="Note%20Tree.html">Note Tree</a>.</li>
|
right of the <a class="reference-link" href="Note%20Tree.html">Note Tree</a>.</li>
|
||||||
<li>For the horizontal layout, the tabs will be placed at the top in full-width,
|
<li>For the horizontal layout, the tabs will be placed at the top in full-width,
|
||||||
above the <a class="reference-link" href="Note%20Tree.html">Note Tree</a>,
|
above the <a href="Note%20Tree.html">note tree</a>, allowing for more
|
||||||
allowing for more tabs to be comfortably displayed.</li>
|
tabs to be comfortably displayed.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Interaction</h2>
|
<h2>Interaction</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>To create a new tab, press the
|
<li>To create a new tab, press the
|
||||||
<img src="1_Tabs_image.png" width="24" height="24">button that is to the right of the last tab.</li>
|
<img src="1_Tabs_image.png">button that is to the right of the last tab.</li>
|
||||||
<li>To close a tab, press the corresponding
|
<li>To close a tab, press the corresponding
|
||||||
<img src="Tabs_image.png" width="9"
|
<img src="Tabs_image.png">button.</li>
|
||||||
height="8">button.</li>
|
|
||||||
<li>For multitasking, tabs can be used alongside <a class="reference-link"
|
<li>For multitasking, tabs can be used alongside <a class="reference-link"
|
||||||
href="Split%20View.html">Split View</a>. Each tab can have one or more
|
href="Split%20View.html">Split View</a>. Each tab can have one or more
|
||||||
notes, displayed horizontally.</li>
|
notes, displayed horizontally.</li>
|
||||||
|
@ -27,10 +27,9 @@
|
|||||||
<li><em>Insert child note</em>, to insert the note as a child of the selected
|
<li><em>Insert child note</em>, to insert the note as a child of the selected
|
||||||
note.</li>
|
note.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>
|
<img src="Note Types_image.png">
|
||||||
<img src="Note Types_image.png" width="613" height="529">
|
|
||||||
</p>
|
<h2>Creating a new note of a different type via add link or new tab</h2>
|
||||||
<h2>Creating a new note of a different type via add link or new tab</h2>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>When adding a <a href="Note%20Types/Text/Links.html">link</a> in a
|
<li>When adding a <a href="Note%20Types/Text/Links.html">link</a> in a
|
||||||
<a
|
<a
|
||||||
@ -46,13 +45,13 @@
|
|||||||
note is empty. Can also be used to edit the <a href="Advanced%20Usage/Note%20source.html">source of a note</a>.</p>
|
note is empty. Can also be used to edit the <a href="Advanced%20Usage/Note%20source.html">source of a note</a>.</p>
|
||||||
<h2>Supported note types</h2>
|
<h2>Supported note types</h2>
|
||||||
<p>The following note types are supported by Trilium:</p>
|
<p>The following note types are supported by Trilium:</p>
|
||||||
<figure class="table"
|
<table>
|
||||||
style="width:100%;">
|
<thead>
|
||||||
<table class="ck-table-resized">
|
<tr>
|
||||||
<colgroup>
|
<th></th>
|
||||||
<col style="width:19.5%;">
|
<th></th>
|
||||||
<col style="width:80.5%;">
|
</tr>
|
||||||
</colgroup>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a class="reference-link" href="Note%20Types/Text.html">Text</a>
|
<td><a class="reference-link" href="Note%20Types/Text.html">Text</a>
|
||||||
@ -122,7 +121,7 @@
|
|||||||
<td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td>
|
<td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a class="reference-link" href="Note%20Types/Geo%20Map.html">Geo map</a>
|
<td><a class="reference-link" href="Note%20Types/Geo%20Map.html">Geo Map</a>
|
||||||
</td>
|
</td>
|
||||||
<td>Displays the children of the note as a geographical map, one use-case
|
<td>Displays the children of the note as a geographical map, one use-case
|
||||||
would be to plan vacations. It even has basic support for tracks. Notes
|
would be to plan vacations. It even has basic support for tracks. Notes
|
||||||
@ -130,7 +129,6 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</figure>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -13,12 +13,12 @@
|
|||||||
<h1 data-trilium-h1>"New Task" launcher button</h1>
|
<h1 data-trilium-h1>"New Task" launcher button</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<p>In this example we are going to extend the functionality of the
|
<p>In this example we are going to extend the functionality of <a class="reference-link"
|
||||||
|
href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a> showcase
|
||||||
|
(which comes by default with Trilium) by adding a button in the
|
||||||
<a
|
<a
|
||||||
class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a> showcase (which comes by default with Trilium) by
|
class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a> (
|
||||||
adding a button in the <a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>
|
<img src="New Task launcher button_i.png">) to create a new task automatically and open it.</p>
|
||||||
(
|
|
||||||
<img src="New Task launcher button_i.png" width="19" height="21">) to create a new task automatically and open it.</p>
|
|
||||||
<h2>Creating the note</h2>
|
<h2>Creating the note</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>First, create a new <a class="reference-link" href="../../Code.html">Code</a> note
|
<li>First, create a new <a class="reference-link" href="../../Code.html">Code</a> note
|
||||||
@ -27,7 +27,7 @@
|
|||||||
href="../../../Advanced%20Usage/Attributes.html">Attributes</a>.</li>
|
href="../../../Advanced%20Usage/Attributes.html">Attributes</a>.</li>
|
||||||
</ol>
|
</ol>
|
||||||
<h2>Content of the script</h2>
|
<h2>Content of the script</h2>
|
||||||
<p>Copy-paste the following script:</p><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
|
<p>Copy-paste the following script:</p><pre><code class="language-application-javascript-env-backend">api.addButtonToToolbar({
|
||||||
title: "New task",
|
title: "New task",
|
||||||
icon: "task",
|
icon: "task",
|
||||||
shortcut: "alt+n",
|
shortcut: "alt+n",
|
||||||
@ -47,11 +47,10 @@
|
|||||||
<a
|
<a
|
||||||
href="../../../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
|
href="../../../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
|
||||||
<h2>Understanding how the script works</h2>
|
<h2>Understanding how the script works</h2>
|
||||||
<figure class="table" style="width:96.48%;">
|
|
||||||
<table class="ck-table-resized">
|
<table class="ck-table-resized">
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<col style="width:53.57%;">
|
<col></col>
|
||||||
<col style="width:46.43%;">
|
<col></col>
|
||||||
</colgroup>
|
</colgroup>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
@ -142,7 +141,6 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</figure>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -25,9 +25,9 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<h2>Supported file types</h2>
|
<h2>Supported file types</h2>
|
||||||
<h3>PDFs</h3>
|
<h3>PDFs</h3>
|
||||||
<p>
|
<figure class="image image-style-align-center image_resized" style="width:50%;">
|
||||||
<img src="File_image.png" width="933" height="666">
|
<img style="aspect-ratio:933/666;" src="File_image.png" width="933" height="666">
|
||||||
</p>
|
</figure>
|
||||||
<p>PDFs can be browsed directly from Trilium.</p>
|
<p>PDFs can be browsed directly from Trilium.</p>
|
||||||
<p>Interaction:</p>
|
<p>Interaction:</p>
|
||||||
<ul>
|
<ul>
|
||||||
@ -45,9 +45,10 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h3>Images</h3>
|
<h3>Images</h3>
|
||||||
<p>
|
<figure class="image image-style-align-center image_resized" style="width:50%;">
|
||||||
<img src="4_File_image.png" width="879" height="766">
|
<img style="aspect-ratio:879/766;" src="4_File_image.png" width="879"
|
||||||
</p>
|
height="766">
|
||||||
|
</figure>
|
||||||
<p>Interaction:</p>
|
<p>Interaction:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><em>Copy reference to clipboard</em>, for embedding the image within
|
<li><em>Copy reference to clipboard</em>, for embedding the image within
|
||||||
@ -56,9 +57,10 @@
|
|||||||
more information.</li>
|
more information.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h3>Videos</h3>
|
<h3>Videos</h3>
|
||||||
<p>
|
<figure class="image image-style-align-center image_resized" style="width:50%;">
|
||||||
<img src="1_File_image.png" width="854" height="700">
|
<img style="aspect-ratio:854/700;" src="1_File_image.png" width="854"
|
||||||
</p>
|
height="700">
|
||||||
|
</figure>
|
||||||
<p>Video files can be added in as well. The file is streamed directly, so
|
<p>Video files can be added in as well. The file is streamed directly, so
|
||||||
when accessing the note from a server it doesn't have to download the entire
|
when accessing the note from a server it doesn't have to download the entire
|
||||||
video to start playing it.</p>
|
video to start playing it.</p>
|
||||||
@ -73,9 +75,10 @@
|
|||||||
of Trilium significantly.</p>
|
of Trilium significantly.</p>
|
||||||
</aside>
|
</aside>
|
||||||
<h3>Audio</h3>
|
<h3>Audio</h3>
|
||||||
<p>
|
<figure class="image image_resized image-style-align-center" style="width:50%;">
|
||||||
<img src="3_File_image.png" width="850" height="243">
|
<img style="aspect-ratio:850/243;" src="3_File_image.png" width="850"
|
||||||
</p>
|
height="243">
|
||||||
|
</figure>
|
||||||
<p>Adding a supported audio file will reveal a basic audio player that can
|
<p>Adding a supported audio file will reveal a basic audio player that can
|
||||||
be used to play it.</p>
|
be used to play it.</p>
|
||||||
<p>Interactions:</p>
|
<p>Interactions:</p>
|
||||||
@ -88,9 +91,10 @@
|
|||||||
volume.</li>
|
volume.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h3>Text files</h3>
|
<h3>Text files</h3>
|
||||||
<p>
|
<figure class="image image-style-align-center image_resized" style="width:50%;">
|
||||||
<img src="2_File_image.png" width="926" height="347">
|
<img style="aspect-ratio:926/347;" src="2_File_image.png" width="926"
|
||||||
</p>
|
height="347">
|
||||||
|
</figure>
|
||||||
<p>Files that are identified as containing text will show a preview of their
|
<p>Files that are identified as containing text will show a preview of their
|
||||||
content. One common use case for this type of file is to embed text files
|
content. One common use case for this type of file is to embed text files
|
||||||
whose content is not necessarily of interest to the user, such as third-party
|
whose content is not necessarily of interest to the user, such as third-party
|
||||||
@ -106,9 +110,10 @@
|
|||||||
of characters. To view the full file, consider opening it in an external
|
of characters. To view the full file, consider opening it in an external
|
||||||
application.</p>
|
application.</p>
|
||||||
<h3>Unknown file types</h3>
|
<h3>Unknown file types</h3>
|
||||||
<p>
|
<figure class="image image_resized image-style-align-center" style="width:50%;">
|
||||||
<img src="5_File_image.png" width="532" height="240">
|
<img style="aspect-ratio:532/240;" src="5_File_image.png" width="532"
|
||||||
</p>
|
height="240">
|
||||||
|
</figure>
|
||||||
<p>If the file could not be identified as any of the supported file types
|
<p>If the file could not be identified as any of the supported file types
|
||||||
from above, it will be treated as an unknown file. In this case, all the
|
from above, it will be treated as an unknown file. In this case, all the
|
||||||
default interactions will be available such as downloading or opening the
|
default interactions will be available such as downloading or opening the
|
||||||
@ -130,9 +135,13 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<h2>Relation with other notes</h2>
|
<h2>Relation with other notes</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Files are also displayed in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.html">Note List</a> based
|
<li>
|
||||||
on their type:
|
<p>Files are also displayed in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.html">Note List</a> based
|
||||||
<img src="6_File_image.png" width="853" height="315">
|
on their type:</p>
|
||||||
|
<p>
|
||||||
|
<img class="image_resized" style="aspect-ratio:853/315;width:50%;" src="6_File_image.png"
|
||||||
|
width="853" height="315">
|
||||||
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li>Non-image files can be embedded into text notes as read-only widgets via
|
<li>Non-image files can be embedded into text notes as read-only widgets via
|
||||||
the <a class="reference-link" href="Text/Include%20Note.html">Include Note</a> functionality.</li>
|
the <a class="reference-link" href="Text/Include%20Note.html">Include Note</a> functionality.</li>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<h1 data-trilium-h1>Geo Map</h1>
|
<h1 data-trilium-h1>Geo Map</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:892/675;" src="10_Geo Map_image.png" width="892"
|
<img style="aspect-ratio:892/675;" src="10_Geo Map_image.png" width="892"
|
||||||
height="675">
|
height="675">
|
||||||
</figure>
|
</figure>
|
||||||
@ -34,14 +34,20 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="7_Geo Map_image.png">
|
<figure class="image image_resized image-style-align-center" style="width:51.25%;">
|
||||||
|
<img style="aspect-ratio:1256/1044;" src="7_Geo Map_image.png" width="1256"
|
||||||
|
height="1044">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
<td>Right click on any note on the note tree and select <em>Insert child note</em> → <em>Geo Map (beta)</em>.</td>
|
<td>Right click on any note on the note tree and select <em>Insert child note</em> → <em>Geo Map (beta)</em>.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>2</td>
|
<td>2</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="9_Geo Map_image.png">
|
<figure class="image image_resized image-style-align-center" style="width:53.44%;">
|
||||||
|
<img style="aspect-ratio:1720/1396;" src="9_Geo Map_image.png" width="1720"
|
||||||
|
height="1396">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
<td>By default the map will be empty and will show the entire world.</td>
|
<td>By default the map will be empty and will show the entire world.</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -57,13 +63,8 @@
|
|||||||
<p>The position on the map and the zoom are saved inside the map note and
|
<p>The position on the map and the zoom are saved inside the map note and
|
||||||
restored when visiting again the note.</p>
|
restored when visiting again the note.</p>
|
||||||
<h2>Adding a marker using the map</h2>
|
<h2>Adding a marker using the map</h2>
|
||||||
<figure class="table" style="width:163.53%;">
|
<figure class="table">
|
||||||
<table class="ck-table-resized">
|
<table>
|
||||||
<colgroup>
|
|
||||||
<col style="width:1.69%;">
|
|
||||||
<col style="width:66.49%;">
|
|
||||||
<col style="width:31.82%;">
|
|
||||||
</colgroup>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th> </th>
|
<th> </th>
|
||||||
@ -74,15 +75,15 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td colspan="2">To create a marker, first navigate to the desired point on the map. Then
|
<td>To create a marker, first navigate to the desired point on the map. Then
|
||||||
press the
|
press the
|
||||||
<img src="11_Geo Map_image.png" width="18" height="18">button in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> (top-right)
|
<img src="11_Geo Map_image.png">button in the <a href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> (top-right)
|
||||||
area.
|
area.
|
||||||
<br>
|
<br>
|
||||||
<br>If the button is not visible, make sure the button section is visible
|
<br>If the button is not visible, make sure the button section is visible
|
||||||
by pressing the chevron button (
|
by pressing the chevron button (
|
||||||
<img src="17_Geo Map_image.png" width="11"
|
<img src="17_Geo Map_image.png">) in the top-right of the map.</td>
|
||||||
height="10">) in the top-right of the map.</td>
|
<td> </td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>2</td>
|
<td>2</td>
|
||||||
@ -91,7 +92,7 @@
|
|||||||
width="1730" height="416">
|
width="1730" height="416">
|
||||||
</td>
|
</td>
|
||||||
<td>Once pressed, the map will enter in the insert mode, as illustrated by
|
<td>Once pressed, the map will enter in the insert mode, as illustrated by
|
||||||
the notification.
|
the notification.
|
||||||
<br>
|
<br>
|
||||||
<br>Simply click the point on the map where to place the marker, or the Escape
|
<br>Simply click the point on the map where to place the marker, or the Escape
|
||||||
key to cancel.</td>
|
key to cancel.</td>
|
||||||
@ -107,8 +108,8 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>4</td>
|
<td>4</td>
|
||||||
<td>
|
<td>
|
||||||
<img class="image_resized" style="aspect-ratio:1696/608;width:99.95%;"
|
<img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map_image.png"
|
||||||
src="16_Geo Map_image.png" width="1696" height="608">
|
width="1696" height="608">
|
||||||
</td>
|
</td>
|
||||||
<td>Once confirmed, the marker will show up on the map and it will also be
|
<td>Once confirmed, the marker will show up on the map and it will also be
|
||||||
displayed as a child note of the map.</td>
|
displayed as a child note of the map.</td>
|
||||||
@ -120,7 +121,7 @@
|
|||||||
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
|
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
|
||||||
of the child notes:</p>
|
of the child notes:</p>
|
||||||
<p>
|
<p>
|
||||||
<img src="18_Geo Map_image.png">
|
<img src="18_Geo Map_image.png" width="1288" height="278">
|
||||||
</p>
|
</p>
|
||||||
<p>This value can be added manually if needed. The value of the attribute
|
<p>This value can be added manually if needed. The value of the attribute
|
||||||
is made up of the latitude and longitude separated by a comma.</p>
|
is made up of the latitude and longitude separated by a comma.</p>
|
||||||
@ -153,9 +154,10 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Icon and color of the markers</h2>
|
<h2>Icon and color of the markers</h2>
|
||||||
<p>
|
<figure class="image image-style-align-center">
|
||||||
<img src="Geo Map_image.jpg" alt="image">
|
<img style="aspect-ratio:523/295;" src="Geo Map_image.jpg" alt="image"
|
||||||
</p>
|
width="523" height="295">
|
||||||
|
</figure>
|
||||||
<p>The markers will have the same icon as the note.</p>
|
<p>The markers will have the same icon as the note.</p>
|
||||||
<p>It's possible to add a custom color to a marker by assigning them a <code>#color</code> attribute
|
<p>It's possible to add a custom color to a marker by assigning them a <code>#color</code> attribute
|
||||||
such as <code>#color=green</code>.</p>
|
such as <code>#color=green</code>.</p>
|
||||||
@ -165,8 +167,13 @@
|
|||||||
<p>The value of the attribute is made up of the latitude and longitude separated
|
<p>The value of the attribute is made up of the latitude and longitude separated
|
||||||
by a comma.</p>
|
by a comma.</p>
|
||||||
<h3>Adding from Google Maps</h3>
|
<h3>Adding from Google Maps</h3>
|
||||||
<figure class="table">
|
<figure class="table" style="width:100%;">
|
||||||
<table>
|
<table class="ck-table-resized">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width:2.77%;">
|
||||||
|
<col style="width:33.24%;">
|
||||||
|
<col style="width:63.99%;">
|
||||||
|
</colgroup>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th> </th>
|
<th> </th>
|
||||||
@ -178,13 +185,16 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="13_Geo Map_image.png">
|
<figure class="image image_resized image-style-align-center" style="width:56.84%;">
|
||||||
|
<img style="aspect-ratio:732/918;" src="13_Geo Map_image.png" width="732"
|
||||||
|
height="918">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
<td>Go to Google Maps on the web and look for a desired location, right click
|
<td>Go to Google Maps on the web and look for a desired location, right click
|
||||||
on it and a context menu will show up.
|
on it and a context menu will show up.
|
||||||
<br>
|
<br>
|
||||||
<br>Simply click on the first item displaying the coordinates and they will
|
<br>Simply click on the first item displaying the coordinates and they will
|
||||||
be copied to clipboard.
|
be copied to clipboard.
|
||||||
<br>
|
<br>
|
||||||
<br>Then paste the value inside the text box into the <code>#geolocation</code> attribute
|
<br>Then paste the value inside the text box into the <code>#geolocation</code> attribute
|
||||||
of a child note of the map (don't forget to surround the value with a <code>"</code> character).</td>
|
of a child note of the map (don't forget to surround the value with a <code>"</code> character).</td>
|
||||||
@ -192,14 +202,20 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>2</td>
|
<td>2</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="4_Geo Map_image.png">
|
<figure class="image image_resized image-style-align-center" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:518/84;" src="4_Geo Map_image.png" width="518"
|
||||||
|
height="84">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
<td>In Trilium, create a child note under the map.</td>
|
<td>In Trilium, create a child note under the map.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>3</td>
|
<td>3</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="12_Geo Map_image.png">
|
<figure class="image image_resized image-style-align-center" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:1074/276;" src="12_Geo Map_image.png" width="1074"
|
||||||
|
height="276">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
<td>And then go to Owned Attributes and type <code>#geolocation="</code>, then
|
<td>And then go to Owned Attributes and type <code>#geolocation="</code>, then
|
||||||
paste from the clipboard as-is and then add the ending <code>"</code> character.
|
paste from the clipboard as-is and then add the ending <code>"</code> character.
|
||||||
@ -211,8 +227,13 @@
|
|||||||
</figure>
|
</figure>
|
||||||
<h3>Adding from OpenStreetMap</h3>
|
<h3>Adding from OpenStreetMap</h3>
|
||||||
<p>Similarly to the Google Maps approach:</p>
|
<p>Similarly to the Google Maps approach:</p>
|
||||||
<figure class="table">
|
<figure class="table" style="width:100%;">
|
||||||
<table>
|
<table class="ck-table-resized">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width:2.77%;">
|
||||||
|
<col style="width:33.42%;">
|
||||||
|
<col style="width:63.81%;">
|
||||||
|
</colgroup>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th> </th>
|
<th> </th>
|
||||||
@ -224,7 +245,8 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="1_Geo Map_image.png">
|
<img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png"
|
||||||
|
width="562" height="454">
|
||||||
</td>
|
</td>
|
||||||
<td>Go to any location on openstreetmap.org and right click to bring up the
|
<td>Go to any location on openstreetmap.org and right click to bring up the
|
||||||
context menu. Select the “Show address” item.</td>
|
context menu. Select the “Show address” item.</td>
|
||||||
@ -232,17 +254,19 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>2</td>
|
<td>2</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="Geo Map_image.png">
|
<img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png"
|
||||||
|
width="696" height="480">
|
||||||
</td>
|
</td>
|
||||||
<td>The address will be visible in the top-left of the screen, in the place
|
<td>The address will be visible in the top-left of the screen, in the place
|
||||||
of the search bar.
|
of the search bar.
|
||||||
<br>
|
<br>
|
||||||
<br>Select the coordinates and copy them into the clipboard.</td>
|
<br>Select the coordinates and copy them into the clipboard.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>3</td>
|
<td>3</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="5_Geo Map_image.png">
|
<img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png"
|
||||||
|
width="640" height="276">
|
||||||
</td>
|
</td>
|
||||||
<td>Simply paste the value inside the text box into the <code>#geolocation</code> attribute
|
<td>Simply paste the value inside the text box into the <code>#geolocation</code> attribute
|
||||||
of a child note of the map and then it should be displayed on the map.</td>
|
of a child note of the map and then it should be displayed on the map.</td>
|
||||||
@ -253,8 +277,13 @@
|
|||||||
<h2>Adding GPS tracks (.gpx)</h2>
|
<h2>Adding GPS tracks (.gpx)</h2>
|
||||||
<p>Trilium has basic support for displaying GPS tracks on the geo map.</p>
|
<p>Trilium has basic support for displaying GPS tracks on the geo map.</p>
|
||||||
<figure
|
<figure
|
||||||
class="table">
|
class="table" style="width:100%;">
|
||||||
<table>
|
<table class="ck-table-resized">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width:2.77%;">
|
||||||
|
<col style="width:30.22%;">
|
||||||
|
<col style="width:67.01%;">
|
||||||
|
</colgroup>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th> </th>
|
<th> </th>
|
||||||
@ -266,7 +295,10 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="3_Geo Map_image.png">
|
<figure class="image image-style-align-center">
|
||||||
|
<img style="aspect-ratio:226/74;" src="3_Geo Map_image.png" width="226"
|
||||||
|
height="74">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
<td>To add a track, simply drag & drop a .gpx file inside the geo map
|
<td>To add a track, simply drag & drop a .gpx file inside the geo map
|
||||||
in the note tree.</td>
|
in the note tree.</td>
|
||||||
@ -274,7 +306,10 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>2</td>
|
<td>2</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="15_Geo Map_image.png">
|
<figure class="image image-style-align-center">
|
||||||
|
<img style="aspect-ratio:322/222;" src="15_Geo Map_image.png" width="322"
|
||||||
|
height="222">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
<td>In order for the file to be recognized as a GPS track, it needs to show
|
<td>In order for the file to be recognized as a GPS track, it needs to show
|
||||||
up as <code>application/gpx+xml</code> in the <em>File type</em> field.</td>
|
up as <code>application/gpx+xml</code> in the <em>File type</em> field.</td>
|
||||||
@ -282,9 +317,12 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>3</td>
|
<td>3</td>
|
||||||
<td>
|
<td>
|
||||||
<img src="6_Geo Map_image.png">
|
<figure class="image image-style-align-center">
|
||||||
|
<img style="aspect-ratio:620/530;" src="6_Geo Map_image.png" width="620"
|
||||||
|
height="530">
|
||||||
|
</figure>
|
||||||
</td>
|
</td>
|
||||||
<td>When going back to the map, the track should now be visible.
|
<td>When going back to the map, the track should now be visible.
|
||||||
<br>
|
<br>
|
||||||
<br>The start and end points of the track are indicated by the two blue markers.</td>
|
<br>The start and end points of the track are indicated by the two blue markers.</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -292,9 +330,10 @@
|
|||||||
</table>
|
</table>
|
||||||
</figure>
|
</figure>
|
||||||
<h2>Troubleshooting</h2>
|
<h2>Troubleshooting</h2>
|
||||||
<p>
|
<figure class="image image-style-align-right image_resized" style="width:34.06%;">
|
||||||
<img src="14_Geo Map_image.png">
|
<img style="aspect-ratio:678/499;" src="14_Geo Map_image.png" width="678"
|
||||||
</p>
|
height="499">
|
||||||
|
</figure>
|
||||||
<h3>Grid-like artifacts on the map</h3>
|
<h3>Grid-like artifacts on the map</h3>
|
||||||
<p>This occurs if the application is not at 100% zoom which causes the pixels
|
<p>This occurs if the application is not at 100% zoom which causes the pixels
|
||||||
of the map to not render correctly due to fractional scaling. The only
|
of the map to not render correctly due to fractional scaling. The only
|
||||||
|
@ -33,7 +33,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<p>It's possible to switch between the two layouts at any time by pressing
|
<p>It's possible to switch between the two layouts at any time by pressing
|
||||||
the
|
the
|
||||||
<img src="Mermaid Diagrams_image.png" width="16" height="16">icon in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> area.</p>
|
<img src="Mermaid Diagrams_image.png">icon in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> area.</p>
|
||||||
<h2>Interaction</h2>
|
<h2>Interaction</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>The source code of the diagram (in Mermaid format) is displayed on the
|
<li>The source code of the diagram (in Mermaid format) is displayed on the
|
||||||
@ -47,8 +47,7 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li>There are dedicated buttons at the bottom-right of the preview to control
|
<li>There are dedicated buttons at the bottom-right of the preview to control
|
||||||
the zoom in, zoom out or re-center the diagram:
|
the zoom in, zoom out or re-center the diagram:
|
||||||
<img src="1_Mermaid Diagrams_image.png"
|
<img src="1_Mermaid Diagrams_image.png">
|
||||||
width="90" height="18">
|
|
||||||
</li>
|
</li>
|
||||||
<li>The preview can be moved around by holding the left mouse button and dragging.</li>
|
<li>The preview can be moved around by holding the left mouse button and dragging.</li>
|
||||||
<li>Zooming can also be done by using the scroll wheel.</li>
|
<li>Zooming can also be done by using the scroll wheel.</li>
|
||||||
@ -60,7 +59,7 @@
|
|||||||
the border between them and dragging it with the mouse.</li>
|
the border between them and dragging it with the mouse.</li>
|
||||||
<li>In the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> area:
|
<li>In the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> area:
|
||||||
<ul>
|
<ul>
|
||||||
<li>The source/preview can be laid out left-right or bottom-top via the <em>Move editing pane to the left / bottom </em>option.</li>
|
<li>The source/preview can be laid out left-right or bottom-top via the <em>Move editing pane to the left / bottom</em> option.</li>
|
||||||
<li>Press <em>Lock editing</em> to automatically mark the note as read-only.
|
<li>Press <em>Lock editing</em> to automatically mark the note as read-only.
|
||||||
In this mode, the code pane is hidden and the diagram is displayed full-size.
|
In this mode, the code pane is hidden and the diagram is displayed full-size.
|
||||||
Similarly, press <em>Unlock editing</em> to mark a read-only note as editable.</li>
|
Similarly, press <em>Unlock editing</em> to mark a read-only note as editable.</li>
|
||||||
|
@ -21,7 +21,6 @@
|
|||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
---</code></pre>
|
---</code></pre>
|
||||||
<figure class="table">
|
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -32,22 +31,14 @@ config:
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<figure class="image">
|
<img src="ELK layout_ELK off.svg">
|
||||||
<img style="aspect-ratio:513/442;" src="ELK layout_ELK off.svg" width="513"
|
|
||||||
height="442">
|
|
||||||
</figure>
|
|
||||||
<p> </p>
|
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<figure class="image">
|
<img src="ELK layout_ELK on.svg">
|
||||||
<img style="aspect-ratio:531/491;" src="ELK layout_ELK on.svg" width="531"
|
|
||||||
height="491">
|
|
||||||
</figure>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</figure>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<h1 data-trilium-h1>Mind Map</h1>
|
<h1 data-trilium-h1>Mind Map</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center">
|
||||||
<img style="aspect-ratio:892/675;" src="Mind Map_image.png" width="892"
|
<img style="aspect-ratio:892/675;" src="Mind Map_image.png" width="892"
|
||||||
height="675">
|
height="675">
|
||||||
</figure>
|
</figure>
|
||||||
|
@ -13,15 +13,15 @@
|
|||||||
<h1 data-trilium-h1>Note Map</h1>
|
<h1 data-trilium-h1>Note Map</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<figure class="image">
|
<figure class="image image-style-align-center image_resized" style="width:50%;">
|
||||||
<img src="Note Map_image.png">
|
<img style="aspect-ratio:856/763;" src="Note Map_image.png" width="856"
|
||||||
|
height="763">
|
||||||
</figure>
|
</figure>
|
||||||
<p>A Note map is a note type which displays a standalone version of the feature
|
<p>A Note map is a note type which displays a standalone version of the feature
|
||||||
of the same name: <a href="../Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html">Note Map (Link map, Tree map)</a>.</p>
|
of the same name: <a href="../Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html">Note Map (Link map, Tree map)</a>.</p>
|
||||||
<p>Once created, the note map will display the relations between notes. Only
|
<p>Once created, the note map will display the relations between notes. Only
|
||||||
the notes that are part of the parent of the note map will be displayed
|
the notes that are part of the parent of the note map will be displayed
|
||||||
(including their children).</p>
|
(including their children).</p>
|
||||||
<p> </p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
<h1 data-trilium-h1>Image references</h1>
|
<h1 data-trilium-h1>Image references</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<div class="ck-content">
|
||||||
<figure class="image image-style-align-center">
|
<figure class="image image-style-align-right image_resized" style="width:50.47%;">
|
||||||
<img style="aspect-ratio:880/553;" src="Image references_image.png" width="880"
|
<img style="aspect-ratio:880/553;" src="Image references_image.png" width="880"
|
||||||
height="553">
|
height="553">
|
||||||
</figure>
|
</figure>
|
||||||
@ -31,8 +31,7 @@
|
|||||||
<h2>Steps</h2>
|
<h2>Steps</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Go to one of the supported notes (listed above) and look for the
|
<li>Go to one of the supported notes (listed above) and look for the
|
||||||
<img src="1_Image references_image.png"
|
<img src="1_Image references_image.png">button in the <a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> area.</li>
|
||||||
width="18" height="18">button in the <a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> area.</li>
|
|
||||||
<li>Go to a <a class="reference-link" href="../../Text.html">Text</a> note
|
<li>Go to a <a class="reference-link" href="../../Text.html">Text</a> note
|
||||||
and use the Paste function to insert the reference to that note.</li>
|
and use the Paste function to insert the reference to that note.</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
<h2>Including a note</h2>
|
<h2>Including a note</h2>
|
||||||
<p>In the <a class="reference-link" href="Formatting%20toolbar.html">Formatting toolbar</a>,
|
<p>In the <a class="reference-link" href="Formatting%20toolbar.html">Formatting toolbar</a>,
|
||||||
look for the
|
look for the
|
||||||
<img src="Include Note_image.png" width="16" height="16">button. There is also a keyboard shortcut defined for it but it is not
|
<img src="Include Note_image.png">button. There is also a keyboard shortcut defined for it but it is not
|
||||||
allocated by default.</p>
|
allocated by default.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user