mirror/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2026-01-07 13:29:48 -06:00
Code Issues Packages Projects Releases Wiki Activity

chore(docs): bring back figure sizes

Browse Source
This commit is contained in:
Elian Doran
2025-04-05 03:33:53 +03:00
parent c80d016305
commit 173fa36fca
38 changed files with 728 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/public/app/doc_notes/en/User Guide/!!!meta.json generated
View File

@@ -1715,6 +1715,13 @@
"value": "bx bx-cog",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "_options",
"isInheritable": false,
"position": 60
}
],
"format": "html",

4
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Navigation/Jump to Note.html generated
View File

@@ -13,7 +13,7 @@
<h1 data-trilium-h1>Jump to Note</h1>
<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"
height="403">
</figure>
@@ -24,7 +24,7 @@
<ul>
<li>In the&nbsp;<a class="reference-link" href="../UI%20Elements/Launch%20Bar.html">Launch Bar</a>,
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>
</ul>
<h2>Interaction</h2>

3
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Navigation/Quick search.html generated
View File

@@ -13,7 +13,7 @@
<h1 data-trilium-h1>Quick search</h1>
<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"
height="256">
</figure>
@@ -36,7 +36,6 @@
href="../UI%20Elements/Launch%20Bar.html">Launch Bar</a>, where it can
be positioned just like any other icon.</li>
</ul>
<p>&nbsp;</p>
</div>
</div>
</body>

11
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Note List.html generated
View File

@@ -26,9 +26,10 @@
the <code>#viewType</code> attribute.</p>
</aside>
<h3>Grid view</h3>
<p>
<img src="1_Note List_image.png" width="1025" height="655">
</p>
<figure class="image image-style-align-center">
<img style="aspect-ratio:1025/655;" src="1_Note List_image.png" width="1025"
height="655">
</figure>
<p>This view presents the child notes in a grid format, allowing for a more
visual navigation experience.</p>
<ul>
@@ -43,7 +44,7 @@
</ul>
<p>This is the default view type.</p>
<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"
height="526">
</figure>
@@ -52,7 +53,7 @@
the expand button it's possible to view the content of the note, as well
as the children of the note (recursively).</p>
<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"
height="598">
</figure>

606
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Note List/Calendar View.html generated
View File

@@ -13,9 +13,10 @@
<h1 data-trilium-h1>Calendar View</h1>
<div class="ck-content">
<p>
<img src="4_Calendar View_image.png">
</p>
<figure class="image image-style-align-center">
<img style="aspect-ratio:767/606;" src="4_Calendar View_image.png" width="767"
height="606">
</figure>
<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>
<p>The Calendar view has multiple display modes:</p>
@@ -31,36 +32,37 @@
<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>
<h2>Creating a calendar</h2>
<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>
<h2>Creating a new event/note</h2>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</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>
<h2>Creating a new event/note</h2>
<ul>
<li>Clicking on a day will create a new child note and assign it to that particular
day.
@@ -92,272 +94,290 @@
</ul>
<h2>Configuring the calendar</h2>
<p>The following attributes can be added to the book type:</p>
<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>
<p>In addition, the first day of the week can be either Sunday or Monday
and can be adjusted from the application settings.</p>
<h2>Configuring the calendar events</h2>
<p>For each note of the calendar, the following attributes can be used:</p>
<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:&nbsp;&nbsp;&nbsp;
<br>
<br>
<img src="9_Calendar View_image.png">&nbsp;
<br>
<br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;
<br>
<br>It can also be used with relations, case in which it will display the
title of the target note:&nbsp;&nbsp;
<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>
<h2>How the calendar works</h2>
<p>
<img src="11_Calendar View_image.png">
</p>
<p>The calendar displays all the child notes of the book that have a <code>#startDate</code>.
An <code>#endDate</code> can optionally be added.</p>
<p>If editing the start date and end date from the note itself is desirable,
the following attributes can be added to the book note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
<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:&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>
<img src="9_Calendar View_image.png">&nbsp;&nbsp;
<br>
<br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;
<br>
<br>It can also be used with relations, case in which it will display the
title of the target note:&nbsp;&nbsp;&nbsp;
<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>
<h2>How the calendar works</h2>
<p>
<img src="11_Calendar View_image.png">
</p>
<p>The calendar displays all the child notes of the book that have a <code>#startDate</code>.
An <code>#endDate</code> can optionally be added.</p>
<p>If editing the start date and end date from the note itself is desirable,
the following attributes can be added to the book note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
#label:endDate(inheritable)="promoted,alias=End Date,single,date"
#hidePromotedAttributes </code></pre>
<p>This will result in:</p>
<p>
<img src="10_Calendar View_image.png">
</p>
<p>When not used in a Journal, the calendar is recursive. That is, it will
look for events not just in its child notes but also in the children of
these child notes.</p>
<h2>Use-cases</h2>
<h3>Using with the Journal / calendar</h3>
<p>It is possible to integrate the calendar view into the Journal with day
notes. In order to do so change the note type of the Journal note (calendar
root) to Book and then select the Calendar View.</p>
<p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>)
attribute, the calendar will know that it's in a calendar and apply the
following:</p>
<ul>
<li>The calendar events are now rendered based on their <code>dateNote</code> attribute
rather than <code>startDate</code>.</li>
<li>Interactive editing such as dragging over an empty era or resizing an
event is no longer possible.</li>
<li>Clicking on the empty space on a date will automatically open that day's
note or create it if it does not exist.</li>
<li>Direct children of a day note will be displayed on the calendar despite
not having a <code>dateNote</code> attribute. Children of the child notes
will not be displayed.</li>
</ul>
<p>
<img src="8_Calendar View_image.png">
</p>
<h3>Using a different attribute as event title</h3>
<p>By default, events are displayed on the calendar by their note title.
However, it is possible to configure a different attribute to be displayed
instead.</p>
<p>To do so, assign <code>#calendar:title</code> to the child note (not the
calendar/book note), with the value being <code>name</code> where <code>name</code> 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
does not have the requested label, the title of the note will be used instead.</p>
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</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>
<h3>Using a relation attribute as event title</h3>
<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
to use.</p>
<p>Moreover, if there are more relations of the same name, they will be displayed
as multiple events coming from the same note.</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code>
</td>
<td>
<img src="6_Calendar View_image.png">
</td>
</tr>
</tbody>
</table>
<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
it. Note that it's not possible to use a relation here as well for safety
reasons (an accidental recursion &nbsp;of attributes could cause the application
to loop infinitely).</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>#calendar:title="shortName" #shortName="John S."</code>
</td>
<td>
<img src="1_Calendar View_image.png">
</td>
</tr>
</tbody>
</table>
<p>This will result in:</p>
<p>
<img src="10_Calendar View_image.png">
</p>
<p>When not used in a Journal, the calendar is recursive. That is, it will
look for events not just in its child notes but also in the children of
these child notes.</p>
<h2>Use-cases</h2>
<h3>Using with the Journal / calendar</h3>
<p>It is possible to integrate the calendar view into the Journal with day
notes. In order to do so change the note type of the Journal note (calendar
root) to Book and then select the Calendar View.</p>
<p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>)
attribute, the calendar will know that it's in a calendar and apply the
following:</p>
<ul>
<li>The calendar events are now rendered based on their <code>dateNote</code> attribute
rather than <code>startDate</code>.</li>
<li>Interactive editing such as dragging over an empty era or resizing an
event is no longer possible.</li>
<li>Clicking on the empty space on a date will automatically open that day's
note or create it if it does not exist.</li>
<li>Direct children of a day note will be displayed on the calendar despite
not having a <code>dateNote</code> attribute. Children of the child notes
will not be displayed.</li>
</ul>
<p>
<img src="8_Calendar View_image.png" width="1217" height="724">
</p>
<h3>Using a different attribute as event title</h3>
<p>By default, events are displayed on the calendar by their note title.
However, it is possible to configure a different attribute to be displayed
instead.</p>
<p>To do so, assign <code>#calendar:title</code> to the child note (not the
calendar/book note), with the value being <code>name</code> where <code>name</code> 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
does not have the requested label, the title of the note will be used instead.</p>
<figure
class="table" style="width:100%;">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</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>&nbsp;</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>
<h3>Using a relation attribute as event title</h3>
<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
to use.</p>
<p>Moreover, if there are more relations of the same name, they will be displayed
as multiple events coming from the same note.</p>
<figure class="table"
style="width:100%;">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</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>
<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
it. Note that it's not possible to use a relation here as well for safety
reasons (an accidental recursion &nbsp;of attributes could cause the application
to loop infinitely).</p>
<figure class="table" style="width:100%;">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</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>
</div>
</div>
</body>

33
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Read-Only Notes.html generated
View File

@@ -13,9 +13,9 @@
<h1 data-trilium-h1>Read-Only Notes</h1>
<div class="ck-content">
<p>Some note types such as&nbsp;<a class="reference-link" href="../../Note%20Types/Text.html">Text</a>&nbsp;and&nbsp;
<p>Some note types such as&nbsp;<a href="../../Note%20Types/Text.html">Text</a>&nbsp;and&nbsp;
<a
class="reference-link" href="../../Note%20Types/Code.html">Code</a>&nbsp;notes in Trilium can be set to read-only. When a note is
href="../../Note%20Types/Code.html">Code</a>&nbsp;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,
with the option to switch to editing mode if needed.</p>
<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
of the next section.</p>
<p>In addition, it's possible to change the number of characters at which
the automatic read-only mode will trigger in&nbsp;<a class="reference-link"
href="../UI%20Elements/Options.html">Options</a>&nbsp;by going to the options
for&nbsp;<a class="reference-link" href="../../Note%20Types/Text.html">Text</a>&nbsp;and&nbsp;
the automatic read-only mode will trigger in&nbsp;<a href="../UI%20Elements/Options.html">Options</a>&nbsp;by
going to the options for&nbsp;<a class="reference-link" href="#root/_hidden/_options/_optionsTextNotes">Text Notes</a>&nbsp;and&nbsp;
<a
class="reference-link" href="../../Note%20Types/Code.html">Code</a>&nbsp;notes.</p>
class="reference-link" href="#root/_hidden/_options/_optionsCodeNotes">Code Notes</a>.</p>
<h2>Changing a note's read-only behavior</h2>
<p>Via the&nbsp;<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.
The following options are possible:</p>
<ul>
<li>
<p><strong>Auto</strong>
<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>
<p>&nbsp;</p>
</li>
<li>
<p><strong>Read-only</strong>
<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
useful for notes that are not prone to change.</p>
<p>&nbsp;</p>
</li>
<li><strong>Auto</strong>
<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.</li>
<li><strong>Read-only</strong>
<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
useful for notes that are not prone to change.</li>
<li><strong>Always Editable</strong>
<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>
@@ -65,7 +58,7 @@
<h2>Temporarily editing a read-only note</h2>
<p>When accessing a read-only note, it's possible to temporarily edit it
by using the
<img src="Read-Only Notes_image.png" width="17" height="16">button in the&nbsp;<a class="reference-link" href="../UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area.</p>
<img src="Read-Only Notes_image.png">button in the&nbsp;<a class="reference-link" href="../UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area.</p>
<p>When pressed, the note will become editable but will become read-only
again after navigating to a different note.</p>
<h2>Special read-only behavior</h2>

2
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.html generated
View File

@@ -13,7 +13,7 @@
<h1 data-trilium-h1>Floating buttons</h1>
<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"
height="144">
</figure>

8
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Options.html generated
View File

@@ -13,7 +13,7 @@
<h1 data-trilium-h1>Options</h1>
<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"
height="709">
</figure>
@@ -22,13 +22,13 @@
<h2>Entering options</h2>
<p>The Options can be accessed via:</p>
<ul>
<li>The&nbsp;<a class="reference-link" href="Global%20menu.html">Global menu</a>,
by selecting the <em>Options</em> item.</li>
<li>The&nbsp;<a href="Global%20menu.html">Global menu</a>, by selecting the <em>Options</em> item.</li>
<li>The
<img src="1_Options_image.png" width="20" height="21">button in the&nbsp;<a class="reference-link" href="Launch%20Bar.html">Launch Bar</a>&nbsp;which
<img src="1_Options_image.png">button in the&nbsp;<a href="Launch%20Bar.html">Launch Bar</a>&nbsp;which
can optionally be hidden if not desirable.</li>
<li>Optionally, a keyboard shortcut can be defined, but it is not assigned
by default.</li>
<li>By clicking on this link:&nbsp;<a class="reference-link" href="#root/_hidden/_options">Options</a>.</li>
</ul>
<p>Once in the options section, simply select one of the option categories
using the&nbsp;<a class="reference-link" href="Note%20Tree.html">Note Tree</a>.</p>

18
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Split View.html generated
View File

@@ -15,16 +15,14 @@
<div class="ck-content">
<p>In Trilium, is possible to work with two or more notes side-by-side.</p>
<figure
class="image">
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>
<h2><strong>Interactions</strong></h2>
<ul>
<li>Press the
<img src="Split View_Split View_imag.png" width="16" height="16">
<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
<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
of it.
<ul>
<li>It is possible to have as many splits as desired, simply press again the
@@ -34,16 +32,10 @@
</ul>
</li>
<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"
alt="">
<img src="Split View_3_Split View_im.png" width="10" height="10">button next to it to close it.</li>
<img src="Split View_3_Split View_im.png">button next to it to close it.</li>
<li>Use the
<img src="Split View_4_Split View_im.png" width="7" height="10">
<img src="https://file+.vscode-resource.vscode-cdn.net/home/elian/UI%20Elements/4_Split%20View_image.png"
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>
<img src="Split View_4_Split View_im.png">or the
<img src="Split View_1_Split View_im.png">button to move around the splits.</li>
<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
views).

11
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Tabs.html generated
View File

@@ -13,7 +13,7 @@
<h1 data-trilium-h1>Tabs</h1>
<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"
height="43">
</figure>
@@ -24,16 +24,15 @@
<li>For the vertical layout, the tabs will be placed at the top but to the
right of the&nbsp;<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,
above the&nbsp;<a class="reference-link" href="Note%20Tree.html">Note Tree</a>,
allowing for more tabs to be comfortably displayed.</li>
above the&nbsp;<a href="Note%20Tree.html">note tree</a>, allowing for more
tabs to be comfortably displayed.</li>
</ul>
<h2>Interaction</h2>
<ul>
<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
<img src="Tabs_image.png" width="9"
height="8">button.</li>
<img src="Tabs_image.png">button.</li>
<li>For multitasking, tabs can be used alongside&nbsp;<a class="reference-link"
href="Split%20View.html">Split View</a>. Each tab can have one or more
notes, displayed horizontally.</li>

176
src/public/app/doc_notes/en/User Guide/User Guide/Note Types.html generated
View File

@@ -27,10 +27,9 @@
<li><em>Insert child note</em>, to insert the note as a child of the selected
note.</li>
</ul>
<p>
<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>
<img src="Note Types_image.png">
<h2>Creating a new note of a different type via add link or new tab</h2>
<ul>
<li>When adding a <a href="Note%20Types/Text/Links.html">link</a> in a&nbsp;
<a
@@ -46,91 +45,90 @@
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>
<p>The following note types are supported by Trilium:</p>
<figure class="table"
style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:19.5%;">
<col style="width:80.5%;">
</colgroup>
<tbody>
<tr>
<td><a class="reference-link" href="Note%20Types/Text.html">Text</a>
</td>
<td>The default note type, which allows for rich text formatting, images,
admonitions and right-to-left support.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Code.html">Code</a>
</td>
<td>Uses a mono-space font and can be used to store larger chunks of code
or plain text than a text note, and has better syntax highlighting.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Saved%20Search.html">Saved Search</a>
</td>
<td>Stores the information about a search (the search text, criteria, etc.)
for later use. Can be used for quick filtering of a large amount of notes,
for example. The search can easily be triggered.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Relation%20Map.html">Relation Map</a>
</td>
<td>Allows easy creation of notes and relations between them. Can be used
for mainly relational data such as a family tree.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Note%20Map.html">Note Map</a>
</td>
<td>Displays the relationships between the notes, whether via relations or
their hierarchical structure.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Render%20Note.html">Render Note</a>
</td>
<td>Used in&nbsp;<a class="reference-link" href="Note%20Types/Code/Scripts.html">Scripts</a>,
it displays the HTML content of another note. This allows displaying any
kind of content, provided there is a script behind it to generate it.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Book.html">Book</a>
</td>
<td>Displays the children of the note either as a grid, a list, or for a more
specialized case: a calendar.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Mermaid%20Diagrams.html">Mermaid Diagrams</a>
</td>
<td>Displays diagrams such as bar charts, flow charts, state diagrams, etc.
Requires a bit of technical knowledge since the diagrams are written in
a specialized format.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Canvas.html">Canvas</a>
</td>
<td>Allows easy drawing of sketches, diagrams, handwritten content. Uses the
same technology behind <a href="https://excalidraw.com">excalidraw.com</a>.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Web%20View.html">Web View</a>
</td>
<td>Displays the content of an external web page, similar to a browser.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Mind%20Map.html">Mind Map</a>
</td>
<td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Geo%20Map.html">Geo map</a>
</td>
<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
can also be created from it.</td>
</tr>
</tbody>
</table>
</figure>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="reference-link" href="Note%20Types/Text.html">Text</a>
</td>
<td>The default note type, which allows for rich text formatting, images,
admonitions and right-to-left support.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Code.html">Code</a>
</td>
<td>Uses a mono-space font and can be used to store larger chunks of code
or plain text than a text note, and has better syntax highlighting.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Saved%20Search.html">Saved Search</a>
</td>
<td>Stores the information about a search (the search text, criteria, etc.)
for later use. Can be used for quick filtering of a large amount of notes,
for example. The search can easily be triggered.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Relation%20Map.html">Relation Map</a>
</td>
<td>Allows easy creation of notes and relations between them. Can be used
for mainly relational data such as a family tree.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Note%20Map.html">Note Map</a>
</td>
<td>Displays the relationships between the notes, whether via relations or
their hierarchical structure.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Render%20Note.html">Render Note</a>
</td>
<td>Used in&nbsp;<a class="reference-link" href="Note%20Types/Code/Scripts.html">Scripts</a>,
it displays the HTML content of another note. This allows displaying any
kind of content, provided there is a script behind it to generate it.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Book.html">Book</a>
</td>
<td>Displays the children of the note either as a grid, a list, or for a more
specialized case: a calendar.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Mermaid%20Diagrams.html">Mermaid Diagrams</a>
</td>
<td>Displays diagrams such as bar charts, flow charts, state diagrams, etc.
Requires a bit of technical knowledge since the diagrams are written in
a specialized format.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Canvas.html">Canvas</a>
</td>
<td>Allows easy drawing of sketches, diagrams, handwritten content. Uses the
same technology behind <a href="https://excalidraw.com">excalidraw.com</a>.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Web%20View.html">Web View</a>
</td>
<td>Displays the content of an external web page, similar to a browser.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Mind%20Map.html">Mind Map</a>
</td>
<td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Geo%20Map.html">Geo Map</a>
</td>
<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
can also be created from it.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>

182
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Code/Scripts/New Task launcher button.html generated
View File

@@ -13,12 +13,12 @@
<h1 data-trilium-h1>&quot;New Task&quot; launcher button</h1>
<div class="ck-content">
<p>In this example we are going to extend the functionality of the&nbsp;
<p>In this example we are going to extend the functionality of&nbsp;<a class="reference-link"
href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
(which comes by default with Trilium) by adding a button in the&nbsp;
<a
class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase (which comes by default with Trilium) by
adding a button in the&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>&nbsp;
(
<img src="New Task launcher button_i.png" width="19" height="21">) to create a new task automatically and open it.</p>
class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>&nbsp; (
<img src="New Task launcher button_i.png">) to create a new task automatically and open it.</p>
<h2>Creating the note</h2>
<ol>
<li>First, create a new&nbsp;<a class="reference-link" href="../../Code.html">Code</a>&nbsp;note
@@ -27,7 +27,7 @@
href="../../../Advanced%20Usage/Attributes.html">Attributes</a>.</li>
</ol>
<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",
icon: "task",
shortcut: "alt+n",
@@ -47,15 +47,14 @@
<a
href="../../../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
<h2>Understanding how the script works</h2>
<figure class="table" style="width:96.48%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:53.57%;">
<col style="width:46.43%;">
</colgroup>
<tbody>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
<table class="ck-table-resized">
<colgroup>
<col></col>
<col></col>
</colgroup>
<tbody>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
title: "New task",
icon: "task",
shortcut: "alt+n",
@@ -63,86 +62,85 @@
// [...]
}
});</code></pre>
</td>
<td>
<p>This uses the <a href="../../../Developer%20Guides/Frontend%20Basics.html">Front-end API</a> to
create a icon in the&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>,
by specifying:</p>
<ul>
<li>A title</li>
<li>A corresponding boxicons icon (without the <code>bx-</code> prefix).</li>
<li>Optionally, a keyboard shortcut to assign to it.</li>
<li>The action, which will be executed when the button is pressed.</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">const taskNoteId = await api.runOnBackend(() =&gt; {
</td>
<td>
<p>This uses the <a href="../../../Developer%20Guides/Frontend%20Basics.html">Front-end API</a> to
create a icon in the&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>,
by specifying:</p>
<ul>
<li>A title</li>
<li>A corresponding boxicons icon (without the <code>bx-</code> prefix).</li>
<li>Optionally, a keyboard shortcut to assign to it.</li>
<li>The action, which will be executed when the button is pressed.</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">const taskNoteId = await api.runOnBackend(() =&gt; {
// Shown below.
return resp.note.noteId;
});</code></pre>
</td>
<td>
<ul>
<li>This portion of code is actually executed on the server (backend) and
not on the client (i.e. browser).
<ul>
<li>The reason is that the creating notes is the responsibility of the server.</li>
</ul>
</li>
<li>Here we can also see that it is possible to return results from the server
execution and read them in the client (<code>taskNoteId</code>).</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">const todoRootNote = api.getNoteWithLabel("taskTodoRoot");</code></pre>
</td>
<td>
<ul>
<li>Here we identify a note with the <a href="../../../Advanced%20Usage/Attributes.html">label</a> <code>#taskTodoRoot</code>.
This is how the&nbsp;<a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
knows where to place all the different tasks.</li>
<li>Normally this might return a <code>null</code> value if no such note could
be identified, but error handling is outside the scope of this example.&nbsp;</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">const resp = api.createTextNote(todoRootNote.noteId, "New task", "")</code></pre>
</td>
<td>
<ul>
<li>We create a new child note within the to-do root note (first argument)
with the title “New task" (second argument) and no content by default (third
argument).</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">await api.waitUntilSynced();</code></pre>
</td>
<td>
<ul>
<li>Back on the client, since we created a new note on the server, we now
need to wait for the change to be reflected in the client.</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">await api.activateNewNote(taskNoteId);</code></pre>
</td>
<td>
<ul>
<li>Since we know the <a href="../../../Advanced%20Usage/Note%20ID.html">ID</a> of
the newly created note, all we have to do now is to show this note to the
user.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</figure>
</td>
<td>
<ul>
<li>This portion of code is actually executed on the server (backend) and
not on the client (i.e. browser).
<ul>
<li>The reason is that the creating notes is the responsibility of the server.</li>
</ul>
</li>
<li>Here we can also see that it is possible to return results from the server
execution and read them in the client (<code>taskNoteId</code>).</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">const todoRootNote = api.getNoteWithLabel("taskTodoRoot");</code></pre>
</td>
<td>
<ul>
<li>Here we identify a note with the <a href="../../../Advanced%20Usage/Attributes.html">label</a> <code>#taskTodoRoot</code>.
This is how the&nbsp;<a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
knows where to place all the different tasks.</li>
<li>Normally this might return a <code>null</code> value if no such note could
be identified, but error handling is outside the scope of this example.&nbsp;</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">const resp = api.createTextNote(todoRootNote.noteId, "New task", "")</code></pre>
</td>
<td>
<ul>
<li>We create a new child note within the to-do root note (first argument)
with the title “New task" (second argument) and no content by default (third
argument).</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">await api.waitUntilSynced();</code></pre>
</td>
<td>
<ul>
<li>Back on the client, since we created a new note on the server, we now
need to wait for the change to be reflected in the client.</li>
</ul>
</td>
</tr>
<tr>
<td><pre><code class="language-application-javascript-env-frontend">await api.activateNewNote(taskNoteId);</code></pre>
</td>
<td>
<ul>
<li>Since we know the <a href="../../../Advanced%20Usage/Note%20ID.html">ID</a> of
the newly created note, all we have to do now is to show this note to the
user.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>

51
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/File.html generated
View File

@@ -25,9 +25,9 @@
</ul>
<h2>Supported file types</h2>
<h3>PDFs</h3>
<p>
<img src="File_image.png" width="933" height="666">
</p>
<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>
<p>PDFs can be browsed directly from Trilium.</p>
<p>Interaction:</p>
<ul>
@@ -45,9 +45,10 @@
</li>
</ul>
<h3>Images</h3>
<p>
<img src="4_File_image.png" width="879" height="766">
</p>
<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>
<p>Interaction:</p>
<ul>
<li><em>Copy reference to clipboard</em>, for embedding the image within&nbsp;
@@ -56,9 +57,10 @@
more information.</li>
</ul>
<h3>Videos</h3>
<p>
<img src="1_File_image.png" width="854" height="700">
</p>
<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>
<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
video to start playing it.</p>
@@ -73,9 +75,10 @@
of Trilium significantly.</p>
</aside>
<h3>Audio</h3>
<p>
<img src="3_File_image.png" width="850" height="243">
</p>
<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>
<p>Adding a supported audio file will reveal a basic audio player that can
be used to play it.</p>
<p>Interactions:</p>
@@ -88,9 +91,10 @@
volume.</li>
</ul>
<h3>Text files</h3>
<p>
<img src="2_File_image.png" width="926" height="347">
</p>
<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>
<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
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
application.</p>
<h3>Unknown file types</h3>
<p>
<img src="5_File_image.png" width="532" height="240">
</p>
<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>
<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
default interactions will be available such as downloading or opening the
@@ -130,9 +135,13 @@
</ul>
<h2>Relation with other notes</h2>
<ul>
<li>Files are also displayed in the&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.html">Note List</a>&nbsp;based
on their type:
<img src="6_File_image.png" width="853" height="315">
<li>
<p>Files are also displayed in the&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.html">Note List</a>&nbsp;based
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>Non-image files can be embedded into text notes as read-only widgets via
the&nbsp;<a class="reference-link" href="Text/Include%20Note.html">Include Note</a>&nbsp;functionality.</li>

127
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Geo Map.html generated
View File

@@ -13,7 +13,7 @@
<h1 data-trilium-h1>Geo Map</h1>
<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"
height="675">
</figure>
@@ -34,14 +34,20 @@
<tr>
<td>1</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>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>
<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>By default the map will be empty and will show the entire world.</td>
</tr>
@@ -57,13 +63,8 @@
<p>The position on the map and the zoom are saved inside the map note and
restored when visiting again the note.</p>
<h2>Adding a marker using the map</h2>
<figure class="table" style="width:163.53%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:1.69%;">
<col style="width:66.49%;">
<col style="width:31.82%;">
</colgroup>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
@@ -74,15 +75,15 @@
<tbody>
<tr>
<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
<img src="11_Geo Map_image.png" width="18" height="18">button in the&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;(top-right)
area.
<img src="11_Geo Map_image.png">button in the&nbsp;<a href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;(top-right)
area.&nbsp;
<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" width="11"
height="10">) in the top-right of the map.</td>
<img src="17_Geo Map_image.png">) in the top-right of the map.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>2</td>
@@ -91,7 +92,7 @@
width="1730" height="416">
</td>
<td>Once pressed, the map will enter in the insert mode, as illustrated by
the notification.&nbsp;&nbsp;&nbsp;
the notification.&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click the point on the map where to place the marker, or the Escape
key to cancel.</td>
@@ -107,8 +108,8 @@
<tr>
<td>4</td>
<td>
<img class="image_resized" style="aspect-ratio:1696/608;width:99.95%;"
src="16_Geo Map_image.png" width="1696" height="608">
<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>
@@ -120,7 +121,7 @@
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
of the child notes:</p>
<p>
<img src="18_Geo Map_image.png">
<img src="18_Geo Map_image.png" width="1288" height="278">
</p>
<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>
@@ -153,9 +154,10 @@
</li>
</ul>
<h2>Icon and color of the markers</h2>
<p>
<img src="Geo Map_image.jpg" alt="image">
</p>
<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>
<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
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
by a comma.</p>
<h3>Adding from Google Maps</h3>
<figure class="table">
<table>
<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>&nbsp;</th>
@@ -178,13 +185,16 @@
<tr>
<td>1</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>Go to Google Maps on the web and look for a desired location, right click
on it and a context menu will show up.&nbsp;&nbsp;&nbsp;
on it and a context menu will show up.&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click on the first item displaying the coordinates and they will
be copied to clipboard.&nbsp;&nbsp;&nbsp;
be copied to clipboard.&nbsp;&nbsp;&nbsp;&nbsp;
<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>
@@ -192,14 +202,20 @@
<tr>
<td>2</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>In Trilium, create a child note under the map.</td>
</tr>
<tr>
<td>3</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>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.
@@ -211,8 +227,13 @@
</figure>
<h3>Adding from OpenStreetMap</h3>
<p>Similarly to the Google Maps approach:</p>
<figure class="table">
<table>
<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>&nbsp;</th>
@@ -224,7 +245,8 @@
<tr>
<td>1</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>Go to any location on openstreetmap.org and right click to bring up the
context menu. Select the “Show address” item.</td>
@@ -232,17 +254,19 @@
<tr>
<td>2</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>The address will be visible in the top-left of the screen, in the place
of the search bar.&nbsp;&nbsp;&nbsp;
of the search bar.&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Select the coordinates and copy them into the clipboard.</td>
</tr>
<tr>
<td>3</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>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>
@@ -253,8 +277,13 @@
<h2>Adding GPS tracks (.gpx)</h2>
<p>Trilium has basic support for displaying GPS tracks on the geo map.</p>
<figure
class="table">
<table>
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>&nbsp;</th>
@@ -266,7 +295,10 @@
<tr>
<td>1</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>To add a track, simply drag &amp; drop a .gpx file inside the geo map
in the note tree.</td>
@@ -274,7 +306,10 @@
<tr>
<td>2</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>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>
@@ -282,9 +317,12 @@
<tr>
<td>3</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>When going back to the map, the track should now be visible.&nbsp;&nbsp;&nbsp;
<td>When going back to the map, the track should now be visible.&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>The start and end points of the track are indicated by the two blue markers.</td>
</tr>
@@ -292,9 +330,10 @@
</table>
</figure>
<h2>Troubleshooting</h2>
<p>
<img src="14_Geo Map_image.png">
</p>
<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>
<h3>Grid-like artifacts on the map</h3>
<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

7
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html generated
View File

@@ -33,7 +33,7 @@
</ul>
<p>It's possible to switch between the two layouts at any time by pressing
the
<img src="Mermaid Diagrams_image.png" width="16" height="16">icon in the&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area.</p>
<img src="Mermaid Diagrams_image.png">icon in the&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area.</p>
<h2>Interaction</h2>
<ul>
<li>The source code of the diagram (in Mermaid format) is displayed on the
@@ -47,8 +47,7 @@
<ul>
<li>There are dedicated buttons at the bottom-right of the preview to control
the zoom in, zoom out or re-center the diagram:
<img src="1_Mermaid Diagrams_image.png"
width="90" height="18">
<img src="1_Mermaid Diagrams_image.png">
</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>
@@ -60,7 +59,7 @@
the border between them and dragging it with the mouse.</li>
<li>In the&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area:
<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.
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>

45
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout.html generated
View File

@@ -21,33 +21,24 @@
config:
layout: elk
---</code></pre>
<figure class="table">
<table>
<thead>
<tr>
<th>With ELK off</th>
<th>With ELK on</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:513/442;" src="ELK layout_ELK off.svg" width="513"
height="442">
</figure>
<p>&nbsp;</p>
</td>
<td>
<figure class="image">
<img style="aspect-ratio:531/491;" src="ELK layout_ELK on.svg" width="531"
height="491">
</figure>
</td>
</tr>
</tbody>
</table>
</figure>
<table>
<thead>
<tr>
<th>With ELK off</th>
<th>With ELK on</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="ELK layout_ELK off.svg">
</td>
<td>
<img src="ELK layout_ELK on.svg">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>

2
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mind Map.html generated
View File

@@ -13,7 +13,7 @@
<h1 data-trilium-h1>Mind Map</h1>
<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"
height="675">
</figure>

6
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Note Map.html generated
View File

@@ -13,15 +13,15 @@
<h1 data-trilium-h1>Note Map</h1>
<div class="ck-content">
<figure class="image">
<img src="Note Map_image.png">
<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>
<p>A Note map is a note type which displays a standalone version of the feature
of the same name:&nbsp;<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
the notes that are part of the parent of the note map will be displayed
(including their children).</p>
<p>&nbsp;</p>
</div>
</div>
</body>

5
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images/Image references.html generated
View File

@@ -13,7 +13,7 @@
<h1 data-trilium-h1>Image references</h1>
<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"
height="553">
</figure>
@@ -31,8 +31,7 @@
<h2>Steps</h2>
<ol>
<li>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&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area.</li>
<img src="1_Image references_image.png">button in the&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area.</li>
<li>Go to a&nbsp;<a class="reference-link" href="../../Text.html">Text</a>&nbsp;note
and use the Paste function to insert the reference to that note.</li>
</ol>

2
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Include Note.html generated
View File

@@ -19,7 +19,7 @@
<h2>Including a note</h2>
<p>In the&nbsp;<a class="reference-link" href="Formatting%20toolbar.html">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
<img src="Include Note_image.png">button. There is also a keyboard shortcut defined for it but it is not
allocated by default.</p>
</div>
</div>