chore(docs): update to match new img handling

This commit is contained in:
Elian Doran 2025-03-16 14:05:38 +02:00
parent 3eaa68da23
commit 132a8f7c65
No known key found for this signature in database
58 changed files with 2397 additions and 2384 deletions

File diff suppressed because it is too large Load Diff

View File

@ -52,7 +52,7 @@ For each note of the calendar, the following attributes can be used:
| `#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, either a label (e.g. `#assignee`) or a relation (e.g. `~for`). See _Advanced use-cases_ for more information. |
| `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this: <br><br>![](13_Calendar%20View_image.png)<br><br>```<br>#weight="70"<br>#Mood="Good"<br>#calendar:displayedAttributes="weight,Mood"<br>```<br><br>It can also be used with relations, case in which it will display the title of the target note:<br><br>```<br>~assignee=@My assignee<br>#calendar:displayedAttributes="assignee"<br>``` |
| `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:  <br> <br>![](13_Calendar%20View_image.png) <br> <br>`<br>#weight="70"<br>#Mood="Good"<br>#calendar:displayedAttributes="weight,Mood"<br>` <br> <br>It can also be used with relations, case in which it will display the title of the target note: <br> <br>`<br>~assignee=@My assignee<br>#calendar:displayedAttributes="assignee"<br>` |
| `#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` | Allows using a different label to represent the start date, other than `endDate`. The label name **must not be** prefixed with `#`. If the label is not defined for a note, the default will be used instead. |

View File

@ -1,5 +1,5 @@
# Content language & Right-to-left support
![](api/images/4yHAD34xyvAl/Content%20language%20&%20Right-t.png)
![](api/images/JShOeO3gLTrk/Content%20language%20&%20Right-t.png)
A language hint can be provided for text notes. This option informs the browser or the desktop application about the language the note is written in (for example this might help with spellchecking), and it also determines whether the text is displayed from right-to-left for languages such as Arabic, Hebrew, etc.

File diff suppressed because it is too large Load Diff

View File

@ -25,14 +25,14 @@
<p>Select an existing day note, and the menubar contains a calendar widget.
Select any day to create a note for that day. </p>
<p>
<img src="1_Day Notes_image.png" alt="">
<img src="1_Day Notes_image.png">
</p>
<p>This pattern works well also because of <a href="../../Basic%20Concepts/Note/Cloning%20Notes.html">Cloning Notes</a> functionality
- note can appear in multiple places in the note tree, so besides appearing
under day note, it can also be categorized into other notes.</p>
<h2>Demo</h2>
<p>
<img src="Day Notes_image.png" alt="">
<img src="Day Notes_image.png">
</p>
<p>You can see the structure of day notes appearing under "Journal" note
- there's a note for the whole year 2017, under it, you have "12 - December"

View File

@ -18,7 +18,7 @@
href="../../Note%20Types/Code/Scripts.html">scripts</a>showcase present in the <a href="../Database.html">demo notes</a>.</p>
<h2>Demo</h2>
<p>
<img src="../../Attachments/task-manager.png" alt="">
<img src="../../Attachments/task-manager.png">
</p>
<p>Task Manager manages outstanding (TODO) tasks and finished tasks (non-empty
doneDate attribute). Outstanding tasks are further categorized by location

View File

@ -14,7 +14,7 @@
<div class="ck-content">
<p>
<img src="Weight Tracker_image.png" alt="">
<img src="Weight Tracker_image.png">
</p>
<p>The <code>Weight Tracker</code> is a <a href="../../Note%20Types/Code/Script%20API.html">Script API</a> showcase
present in the <a href="../Database.html">demo notes</a>.</p>

View File

@ -22,7 +22,7 @@
<p>These attributes play a crucial role in organizing, categorising, and
enhancing the functionality of notes.</p>
<p>
<img src="Attributes_image.png" alt="">
<img src="Attributes_image.png">
</p>
<h2>Labels</h2>
<p>Labels in Trilium can be used for a variety of purposes:</p>

View File

@ -17,7 +17,7 @@
are considered important and thus are "promoted" onto the main note UI.
See example below:</p>
<p>
<img src="../../Attachments/promoted-attributes.png" alt="">
<img src="../../Attachments/promoted-attributes.png">
</p>
<p>You can see the note having kind of form with several fields. Each of
these is just regular attribute, the only difference is that they appear
@ -32,7 +32,7 @@
- is it just string, or is it a date? Should we allow multiple values or
note? And importantly, should we <em>promote</em> the attribute or not?</p>
<p>
<img src="Promoted Attributes_image.png" alt="">
<img src="Promoted Attributes_image.png">
</p>
<p>You can notice tag attribute definition. These "definition" attributes
define how the "value" attributes should behave.</p>

View File

@ -41,7 +41,7 @@
<li>Close the application or close the database.</li>
</ol>
<p>
<img src="Manually altering the data.png" alt="">
<img src="Manually altering the data.png">
</p>
<h3>Using the SQLite CLI</h3>
<p>First, start the SQLite 3 CLI by specifying the path to the database:</p><pre><code class="language-text-x-trilium-auto">sqlite3 ~/.local/share/trilium-data/document.db</code></pre>

View File

@ -17,7 +17,7 @@
<p>It can be accessed by going to the <a href="../../../Basic%20Concepts/UI%20Elements">global menu</a>
Advanced → Open SQL Console.</p>
<p>
<img src="SQL Console_image.png" alt="">
<img src="SQL Console_image.png">
</p>
<h3>Interaction</h3>
<ul>
@ -30,20 +30,19 @@
</li>
<li>
<p>To run the statement, press the
<img src="3_SQL Console_image.png" alt="">icon.</p>
<img src="3_SQL Console_image.png">icon.</p>
</li>
<li>
<p>For queries that return a result, the data will displayed in a table.</p>
<p>
<img src="1_SQL Console_image.png" alt="">
<img src="1_SQL Console_image.png">
</p>
</li>
</ul>
<h3>Saved SQL console</h3>
<p>SQL queries or commands can be saved into a dedicated note.</p>
<p>To do so, simply write the query and press the
<img src="2_SQL Console_image.png"
alt="">button. Once saved, the note will appear in <a href="../../Advanced%20Showcases/Day%20Notes.html">Day Notes</a>.</p>
<img src="2_SQL Console_image.png">button. Once saved, the note will appear in <a href="../../Advanced%20Showcases/Day%20Notes.html">Day Notes</a>.</p>
<ul>
<li>The SQL expression will not be displayed by default, but it can still
be viewed by going to the note context menu and selecting <em>Note source</em>.</li>

View File

@ -19,12 +19,12 @@
<h2>Link Map</h2>
<p>Shows <a href="Attributes.html">relations</a> between notes:</p>
<p>
<img src="1_Note Map_image.png" alt="">
<img src="1_Note Map_image.png">
</p>
<h2>Tree Map</h2>
<p>Shows hierarchical map of notes:</p>
<p>
<img src="Note Map_image.png" alt="">
<img src="Note Map_image.png">
</p>
<h2>See also</h2>
<p><a href="Relation%20Map.html">Relation map</a> is a similar concept, with

View File

@ -20,11 +20,11 @@
<p>This is a basic example how you can create simple diagram using relation
maps:</p>
<p>
<img src="../Attachments/relation-map-dev-process.png" alt="">
<img src="../Attachments/relation-map-dev-process.png">
</p>
<p>And this is how you can create it:</p>
<p>
<img src="Relation Map_relation-map-.gif" alt="">
<img src="Relation Map_relation-map-.gif">
</p>
<p>We start completely from scratch by first creating new note called "Development
process" and changing its type to "Relation map". After that we create
@ -39,11 +39,11 @@
<p>This is more complicated demo using some advanced concepts. Resulting
diagram is here:</p>
<p>
<img src="../Attachments/relation-map-family.png" alt="">
<img src="../Attachments/relation-map-family.png">
</p>
<p>This is how you get to it:</p>
<p>
<img src="../Attachments/relation-map-family-demo.gif" alt="">
<img src="../Attachments/relation-map-family-demo.gif">
</p>
<p>There are several steps here:</p>
<ul>

View File

@ -26,15 +26,16 @@
<tbody>
<tr>
<td>
<img src="1_Serving directly the conte.png" alt="">
<img src="1_Serving directly the conte.png">
</td>
<td>
<img src="Serving directly the conte.png" alt="">
<img src="Serving directly the conte.png">
</td>
</tr>
</tbody>
</table>
<h2>By adding an attribute to the note</h2>
<h2>By adding an attribute to the note</h2>
<p>Simply add the <code>#shareRaw</code> attribute and the note will always
be rendered <em>raw</em> when accessed from the share URL.</p>
<h2>By altering the URL</h2>
@ -42,7 +43,7 @@
regardless of whether the <code>#shareRaw</code> attribute is added on the
note.</p>
<p>
<img src="Serving directly the conte.png" alt="">
<img src="Serving directly the conte.png">
</p>
</div>
</div>

View File

@ -21,7 +21,7 @@
<p>If you want to import just a chunk of markdown from clipboard, you can
do it from editor block menu:</p>
<p>
<img src="../../Attachments/markdown-inline-import.gif" alt="">
<img src="../../Attachments/markdown-inline-import.gif">
</p>
<h3>File import</h3>
<p>You can also import Markdown files from files:</p>
@ -38,20 +38,20 @@
</ul>
<p>[[gifs/markdown-file-import.gif]]</p>
<p>
<img src="../../Attachments/markdown-file-import.gif" alt="">
<img src="../../Attachments/markdown-file-import.gif">
</p>
<h2>Export</h2>
<h3>Subtree export</h3>
<p>You can export whole subtree to ZIP archive which will have directory
structured modelled after subtree structure:</p>
<p>
<img src="../../Attachments/markdown-export-subtree.gif" alt="">
<img src="../../Attachments/markdown-export-subtree.gif">
</p>
<h3>Single note export</h3>
<p>If you want to export just single note without its subtree, you can do
it from Note actions menu:</p>
<p>
<img src="../../Attachments/markdown-export-note.gif" alt="">
<img src="../../Attachments/markdown-export-note.gif">
</p>
<h3>Exporting protected notes</h3>
<p>If you want to export protected notes, enter a protected session first!

View File

@ -15,13 +15,13 @@
<div class="ck-content">
<p>To easily access selected notes, you can bookmark them. See demo:</p>
<p>
<img src="../../Attachments/bookmarks.gif" alt="">
<img src="../../Attachments/bookmarks.gif">
</p>
<h2>Bookmark folder</h2>
<p>Space in the left panel is limited, and you might want to bookmark many
items. One possible solution is to bookmark a folder, so it shows its children:</p>
<p>
<img src="../../Attachments/bookmark-folder.png" alt="">
<img src="../../Attachments/bookmark-folder.png">
</p>
<p>To do this, you need to add a <code>#bookmarkFolder</code> label to the
note.</p>

View File

@ -17,7 +17,7 @@
"zoom into") a specific note and its subtree by hiding all parent and sibling
notes. Demo:</p>
<p>
<img src="../../Attachments/note-hoisting.gif" alt="">
<img src="../../Attachments/note-hoisting.gif">
</p>
<p>In addition to showing only this subtree, this also narrows both full
text search and <a href="Note%20Navigation.html">“jump to note”</a> to just

View File

@ -21,14 +21,14 @@
<p>This works identically to browser backwards / forwards, it's actually
using built-in browser support for this.</p>
<p>
<img src="Note Navigation_image.png" alt="">
<img src="Note Navigation_image.png">
</p>
<h2>Jump to note</h2>
<p>This is useful to quickly find and view arbitrary note - click on <code>Jump to</code> button
on the top or press <kbd>Ctrl</kbd> + <kbd>J</kbd> . Then type part of the
note name and autocomplete will help you pick the desired note.</p>
<p>
<img src="../../Attachments/jump-to.gif" alt="">
<img src="../../Attachments/jump-to.gif">
</p>
<h3>Recent notes</h3>
<p>Jump to note also has the ability to show the list of recently viewed
@ -38,7 +38,7 @@
will show the list of recent notes.</p>
<p>Alternatively you can click on the "time" icon on the right.</p>
<p>
<img src="../../Attachments/recent-notes.gif" alt="">
<img src="../../Attachments/recent-notes.gif">
</p>
</div>
</div>

View File

@ -27,13 +27,13 @@
<li>
<p>easy entering of workspace: </p>
<p>
<img src="1_Workspace_image.png" alt="">
<img src="1_Workspace_image.png">
</p>
</li>
<li>
<p>visual identification of workspace in tabs:
<br>
<img src="Workspace_image.png" alt="">
<img src="Workspace_image.png">
</p>
</li>
</ul>

View File

@ -22,7 +22,7 @@
<p>You can control whether archived notes are displayed in the note tree
with a setting:</p>
<p>
<img src="../../Attachments/hide-archived.png" alt="">
<img src="../../Attachments/hide-archived.png">
</p>
</div>
</div>

View File

@ -93,7 +93,7 @@
and notes.</p>
<h3>Demo</h3>
<p>
<img src="../../Attachments/create-clone.gif" alt="">
<img src="../../Attachments/create-clone.gif">
</p>
<p>In the demo, you can see how a clone can be created using the context
menu. It's possible to do this also using the Add Link dialog or with <kbd>Ctrl</kbd>+<kbd>C</kbd> and <kbd>Ctrl</kbd>+<kbd>V</kbd>

View File

@ -14,7 +14,7 @@
<div class="ck-content">
<p>
<img src="Export as PDF_image.png" alt="">
<img src="Export as PDF_image.png">
</p>
<p>Screenshot of the note contextual menu indicating the “Export as PDF”
option.</p>
@ -22,7 +22,7 @@
as PDF. On the server or PWA (mobile), the option is not available due
to technical constraints and it will be hidden.</p>
<p>To print a note, select the
<img src="1_Export as PDF_image.png" alt="">button to the right of the note and select <em>Export as PDF</em>.</p>
<img src="1_Export as PDF_image.png">button to the right of the note and select <em>Export as PDF</em>.</p>
<p>Afterwards you will be prompted to select where to save the PDF file.
Upon confirmation, the resulting PDF will be opened automatically using
the default/system application configured for PDFs.</p>
@ -31,7 +31,7 @@
<a
href="#root/OeKBfN6JbMIq/jRV1MPt4mNSP/hrC6xn7hnDq5">report the issue</a>. In this case, it's best to offer a sample note (click
on the
<img src="1_Export as PDF_image.png" alt="">button, select Export note → This note and all of its descendants → HTML
<img src="1_Export as PDF_image.png">button, select Export note → This note and all of its descendants → HTML
in ZIP archive). Make sure not to accidentally leak any personal information.</p>
<h2>Landscape mode</h2>
<p>When exporting to PDF, there are no customizable settings such as page

View File

@ -35,7 +35,7 @@
<p>Note revisions can be accessed through the button on the right of ribbon
toolbar.</p>
<p>
<img src="../../Attachments/note-revisions.png" alt="">
<img src="../../Attachments/note-revisions.png">
</p>
</div>
</div>

View File

@ -126,7 +126,7 @@ body .CodeMirror {
<p>After making changes, press <kbd>Ctrl</kbd> + <kbd>R</kbd> to reload the frontend
and apply your new styles.</p>
<p>
<img src="Themes_image.png" alt="">
<img src="Themes_image.png">
</p>
<h3>Styling Specific Notes in the Tree</h3>
<p>To apply specific styles to certain notes in the tree:</p>

View File

@ -16,7 +16,7 @@
<p>The global menu configures the current window (zoom, keeping the window
on top) and offers access to some more advanced options.</p>
<p>
<img src="2_Global menu_image.png" alt="">
<img src="2_Global menu_image.png">
</p>
<h2>Accessing the global menu</h2>
<p>See <a href="Vertical%20and%20horizontal%20layout.html">Vertical and horizontal layout</a> since

View File

@ -38,7 +38,7 @@
<p>This will open a new tab with the <a href="Note%20Tree.html">Note Tree</a> listing
the launchers.</p>
<p>
<img src="Launch Bar_image.png" alt="">
<img src="Launch Bar_image.png">
</p>
<p>Expanding <em>Available Launchers</em> section will show the list of launchers
that are not displayed on the launch bar. The <em>Visible Launchers</em> will

View File

@ -16,7 +16,7 @@
<p>This page explains how to manipulate the note tree in TriliumNext, focusing
on moving notes.</p>
<p>
<img src="1_Note Tree_image.png" alt="">
<img src="1_Note Tree_image.png">
</p>
<h2>Drag and Drop</h2>
<p>
@ -51,7 +51,7 @@
Shift and click on the note to end the selection with. All the notes between
the start and the end note will be selected as well.</p>
<p>
<img src="Note Tree_image.png" alt="">
<img src="Note Tree_image.png">
</p>
<p>In the right-click menu, operations such as Cut, Copy, Move to, Clone
to or Delete will apply to all the selected notes. It is also possible

View File

@ -14,7 +14,7 @@
<div class="ck-content">
<p>
<img src="Ribbon_image.png" alt="">
<img src="Ribbon_image.png">
</p>
<p>The ribbon allows changing options, attributes and viewing information
about the current note.</p>

View File

@ -26,13 +26,13 @@
href="Note%20Tree.html">Note Tree</a>.</li>
<li>The <a href="Note%20Tree.html">Note Tree</a> can be collapsed by pressing
the
<img src="6_Vertical and horizontal la.png" alt="">button at the bottom of the <a href="Launch%20Bar.html">Launcher Bar</a>.</li>
<img src="6_Vertical and horizontal la.png">button at the bottom of the <a href="Launch%20Bar.html">Launcher Bar</a>.</li>
<li>The <a href="Global%20menu.html">Global menu</a> can be accessed via the
<img
src="5_Vertical and horizontal la.png" alt="">icon at the top of the <a href="Launch%20Bar.html">Launcher Bar</a>.</li>
src="5_Vertical and horizontal la.png">icon at the top of the <a href="Launch%20Bar.html">Launcher Bar</a>.</li>
</ul>
<p>
<img src="4_Vertical and horizontal la.png" alt="">
<img src="4_Vertical and horizontal la.png">
</p>
<h3>Horizontal layout</h3>
<p>The horizontal layout is a more traditional layout, since it bears similarity
@ -48,13 +48,13 @@
removed if needed.</li>
<li>The <a href="Note%20Tree.html">Note Tree</a> can be collapsed by pressing
the small
<img src="2_Vertical and horizontal la.png" alt="">button to the left of the first tab.</li>
<img src="2_Vertical and horizontal la.png">button to the left of the first tab.</li>
<li>The <a href="Global%20menu.html">Global menu</a> can be accessed via the
<img
src="1_Vertical and horizontal la.png" alt="">button at the end of the <a href="Launch%20Bar.html">Launcher Bar</a>.</li>
src="1_Vertical and horizontal la.png">button at the end of the <a href="Launch%20Bar.html">Launcher Bar</a>.</li>
</ul>
<p>
<img src="3_Vertical and horizontal la.png" alt="">
<img src="3_Vertical and horizontal la.png">
</p>
<h2>Changing the layout</h2>
<p>Go to <a href="#root/_hidden/_lbRoot/_lbVisibleLaunchers/_lbSettings">Settings</a> and

View File

@ -14,7 +14,7 @@
<div class="ck-content">
<p>
<img src="6_Zen mode_image.png" alt="">
<img src="6_Zen mode_image.png">
</p>
<p>Screenshot of Zen Mode activated on a Windows 11 system with native title
bar off and background effects on.</p>
@ -22,7 +22,7 @@
of Trilium is hidden away in order to be able to focus on the content,
whether it's for reading or writing.</p>
<p>
<img src="5_Zen mode_image.png" alt="">
<img src="5_Zen mode_image.png">
</p>
<p>Screenshot of the Zen Mode option in the global menu.</p>
<h2>Activating &amp; deactivating</h2>
@ -34,7 +34,7 @@
<p>Once Zen Mode is activated, all the UI elements of the application will
be hidden away, including the global menu. In that case, the Zen Mode can
be deactivated either by pressing the
<img src="Zen mode_image.png" alt="">icon in the top-right corner of the window or by pressing the keyboard
<img src="Zen mode_image.png">icon in the top-right corner of the window or by pressing the keyboard
combination again.</p>
<p>Do note that, by design, activating or deactivating the Zen Mode applies
only to the current window. Restarting the application will also disable
@ -45,7 +45,7 @@
can still be moved by dragging the mouse across the top part of the window
where the note titles are.</p>
<p>
<img src="3_Zen mode_image.png" alt="">
<img src="3_Zen mode_image.png">
</p>
<p>Screenshot of two notes side-by-side while Zen Mode is active, on Windows
11 with background effects off.</p>

View File

@ -18,7 +18,7 @@
it's processing data, or a checkbox to define a particular change in behavior
for the script.</p>
<p>
<img src="Using promoted attributes .png" alt="">
<img src="Using promoted attributes .png">
</p>
<h2>Using check boxes to toggle flags</h2>
<p>Instead of asking the user to modify a boolean value in the script, it's

View File

@ -27,7 +27,7 @@
<p>Easy way how to find out which data directory Trilium uses is to look
at the "About Trilium Notes" dialog (from "Menu" in upper left corner):</p>
<p>
<img src="Data directory_image.png" alt="">
<img src="Data directory_image.png">
</p>
<p>Here's how the location is decided:</p>
<p>Data directory is normally named <code>trilium-data</code> and it is stored

View File

@ -24,11 +24,11 @@
<h2>Screenshots</h2>
<h3>Mobile phone</h3>
<p>
<img src="../Attachments/mobile-smartphone.png" alt="">
<img src="../Attachments/mobile-smartphone.png">
</p>
<h3>Tablet</h3>
<p>
<img src="../Attachments/mobile-tablet.png" alt="">
<img src="../Attachments/mobile-tablet.png">
</p>
<h2>Limitations</h2>
<p>Mobile frontend provides only some of the features of the full desktop

View File

@ -30,7 +30,7 @@
<h2>Installation</h2>
<h3>Download</h3>
<p>You can either download source code zip/tar from <a href="https://github.com/TriliumNext/Notes/releases/latest">https://github.com/TriliumNext/Notes/releases/latest</a>.</p>
<p>For the latest version including betas, clone Git repository <strong>from </strong><code><strong>master</strong></code><strong> branch</strong> with:</p><pre><code class="language-text-x-trilium-auto">git clone -b master https://github.com/triliumnext/notes.git</code></pre>
<p>For the latest version including betas, clone Git repository <strong>from</strong> <code>**master**</code> <strong>branch</strong> with:</p><pre><code class="language-text-x-trilium-auto">git clone -b master https://github.com/triliumnext/notes.git</code></pre>
<h2>Installation</h2><pre><code class="language-text-x-trilium-auto">cd trilium
# download all node dependencies

View File

@ -18,7 +18,7 @@
up synchronization with a server instance, allowing multiple desktop clients
to sync with a central server. This creates a star-shaped topology:</p>
<p>
<img src="Synchronization_image.png" alt="">
<img src="Synchronization_image.png">
</p>
<p>In this setup, a central server (referred to as the <em>sync server</em>)
and multiple <em>client</em> (or <em>desktop</em>) instances synchronize with

View File

@ -14,7 +14,7 @@
<div class="ck-content">
<p>
<img src="Web Clipper_image.png" alt="">
<img src="Web Clipper_image.png">
</p>
<p>Trilium Web Clipper is a web browser extension which allows user to clip
text, screenshots, whole pages and short notes and save them directly to

View File

@ -18,7 +18,7 @@
book-like reading experience. This format is particularly useful for viewing
multiple smaller notes in a cohesive, continuous manner.</p>
<p>
<img src="1_Book_image.png" alt="">
<img src="1_Book_image.png">
</p>
<p>In the example above, the "node.js" note on the left panel contains several
child notes. The right panel displays the content of these child notes
@ -33,7 +33,7 @@
This view presents the child notes in a grid format, allowing for a more
visual navigation experience.</p>
<p>
<img src="Book_image.png" alt="">
<img src="Book_image.png">
</p>
<p>Switching between these views can be easily managed through the Book Note's
settings (or <code>viewType</code> attribute), allowing users to choose the

View File

@ -14,44 +14,43 @@
<div class="ck-content">
<p>
<img src="6_Calendar View_image.png" alt="">
<img src="6_Calendar View_image.png">
</p>
<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>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>
<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="3_Calendar View_image.png" alt="">
</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="5_Calendar View_image.png" alt="">
</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>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="3_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="5_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>
<ul>
<li>Clicking on a day will create a new child note and assign it to that particular
day.
@ -63,7 +62,7 @@
<li>It's possible to drag across multiple days to set both the start and end
date of a particular note.
<br>
<img src="Calendar View_image.png" alt="">
<img src="Calendar View_image.png">
</li>
<li>Creating new notes from the calendar will respect the <code>~child:template</code> relation
if set on the book note.</li>
@ -72,7 +71,7 @@
<ul>
<li>Hovering the mouse over an event will display information about the note.
<br>
<img src="11_Calendar View_image.png" alt="">
<img src="11_Calendar View_image.png">
</li>
<li>Left clicking the event will go to that note. Middle clicking will open
the note in a new tab and right click will offer more options including
@ -83,242 +82,234 @@
</ul>
<h2>Configuring the calendar</h2>
<p>The following attributes can be added to the book type:</p>
<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>~child:template</code>
</td>
<td>Defines the template for newly created notes in the calendar (via dragging
or clicking).</td>
</tr>
</tbody>
</table>
</figure>
<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>~child:template</code>
</td>
<td>Defines the template for newly created notes in the calendar (via dragging
or clicking).</td>
</tr>
</tbody>
</table>
<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>
<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>#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, either a label (e.g. <code>#assignee</code>) or a relation
(e.g. <code>~for</code>). See <em>Advanced use-cases</em> for more information.</td>
</tr>
<tr>
<td><code>#calendar:displayedAttributes</code>
</td>
<td>
<p>Allows displaying the value of one or more attributes in the calendar
like this:&nbsp;</p>
<p>
<img src="13_Calendar View_image.png" alt="">
</p><pre><code class="language-text-x-trilium-auto">#weight="70"
#Mood="Good"
#calendar:displayedAttributes="weight,Mood"</code></pre>
<p>It can also be used with relations, case in which it will display the
title of the target note:</p><pre><code class="language-text-x-trilium-auto">~assignee=@My assignee
#calendar:displayedAttributes="assignee"</code></pre>
</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>Allows using a different label to represent the start date, other than <code>endDate</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>
</tbody>
</table>
</figure>
<h2>How the calendar works</h2>
<p>
<img src="17_Calendar View_image.png" alt="">
</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"
<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>#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, either a label (e.g. <code>#assignee</code>) or a relation
(e.g. <code>~for</code>). See <em>Advanced 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="13_Calendar View_image.png">
<br>
<br><code>&lt;br&gt;#weight="70"&lt;br&gt;#Mood="Good"&lt;br&gt;#calendar:displayedAttributes="weight,Mood"&lt;br&gt;</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>&lt;br&gt;~assignee=@My assignee&lt;br&gt;#calendar:displayedAttributes="assignee"&lt;br&gt;</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>Allows using a different label to represent the start date, other than <code>endDate</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>
</tbody>
</table>
<h2>How the calendar works</h2>
<p>
<img src="17_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="14_Calendar View_image.png" alt="">
</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="12_Calendar View_image.png" alt="">
</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. 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">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="7_Calendar View_image.png" alt="">
</td>
<td>
<img src="9_Calendar View_image.png" alt="">
</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">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="8_Calendar View_image.png" alt="">
</td>
<td>
<img src="10_Calendar View_image.png" alt="">
</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">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="15_Calendar View_image.png" alt="">
</td>
<td>
<img src="2_Calendar View_image.png" alt="">
</td>
</tr>
</tbody>
</table>
</figure>
<p>This will result in:</p>
<p>
<img src="14_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="12_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. 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></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="7_Calendar View_image.png">
</td>
<td>
<img src="9_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>
<img src="8_Calendar View_image.png">
</td>
<td>
<img src="10_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  of attributes could cause the application
to loop infinitely).</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="15_Calendar View_image.png">
</td>
<td>
<img src="2_Calendar View_image.png">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>

View File

@ -31,7 +31,7 @@
<p>For shorter snippets of code that can be embedded in <a href="Text.html">Text</a> notes,
see <a href="Text/Code%20blocks.html">Code blocks</a>.</p>
<p>
<img src="Code_image.png" alt="">
<img src="Code_image.png">
</p>
<h2>Adjusting the language of a code note</h2>
<p>In the <a href="../Basic%20Concepts/UI%20Elements/Ribbon.html">Ribbon</a>,
@ -39,7 +39,7 @@
note types. Inside of it there will be a section called <em>Code</em>, select
any one of the languages.</p>
<p>
<img src="1_Code_image.png" alt="">
<img src="1_Code_image.png">
</p>
<h2>Adjusting the list of languages</h2>
<p>Trilium supports syntax highlighting for many languages, but by default

View File

@ -104,7 +104,7 @@ module.exports = WordCountWidget;</code></pre>
<h3>Example screenshot</h3>
<p>On the bottom you can see the resulting widget:</p>
<p>
<img src="../../Attachments/Custom-widget%20image.png" alt="">
<img src="../../Attachments/Custom-widget%20image.png">
</p>
</div>
</div>

View File

@ -37,7 +37,7 @@
the Trilium interface which will allow user to easily add new Task (TODO
item).</p>
<p>
<img src="../../Attachments/button-script.png" alt="">
<img src="../../Attachments/button-script.png">
</p>
<p>First take a look at the red circle all the way on the top - this what
we want to achieve - new button in UI which will create new note representing

View File

@ -26,20 +26,21 @@
<tr>
<td>1</td>
<td>
<img src="8_Geo map_image.png" alt="">
<img src="8_Geo map_image.png">
</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="10_Geo map_image.png" alt="">
<img src="10_Geo map_image.png">
</td>
<td>By default the map will be empty and will show the entire world.</td>
</tr>
</tbody>
</table>
<h2>Repositioning the map</h2>
<h2>Repositioning the map</h2>
<ul>
<li>Click and drag the map in order to move across the map.</li>
<li>Use the mouse wheel, two-finger gesture on a touchpad or the +/- buttons
@ -62,16 +63,16 @@
<td></td>
<td>To create a marker, first navigate to the desired point on the map. Then
press the
<img src="16_Geo map_image.png" alt="">button on the top-right of the map. 
<img src="16_Geo map_image.png">button on the top-right of the map. 
<br>
<br>If the button is not visible, make sure the button section is visible
by pressing the chevron button (
<img src="2_Geo map_image.png" alt="">) in the top-right of the map.</td>
<img src="2_Geo map_image.png">) in the top-right of the map.</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="3_Geo map_image.png" alt="">
<img src="3_Geo map_image.png">
</td>
<td>Once pressed, the map will enter in the insert mode, as illustrated by
the notification. 
@ -82,25 +83,26 @@
<tr>
<td>3</td>
<td>
<img src="9_Geo map_image.png" alt="">
<img src="9_Geo map_image.png">
</td>
<td>Enter the name of the marker/note to be created.</td>
</tr>
<tr>
<td>4</td>
<td>
<img src="17_Geo map_image.png" alt="">
<img src="17_Geo map_image.png">
</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>
<h2>How the location of the markers is stored</h2>
<h2>How the location of the markers is stored</h2>
<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" alt="">
<img src="18_Geo map_image.png">
</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>
@ -155,7 +157,7 @@
<tr>
<td>1</td>
<td>
<img src="12_Geo map_image.png" alt="">
<img src="12_Geo map_image.png">
</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. 
@ -169,14 +171,14 @@
<tr>
<td>2</td>
<td>
<img src="5_Geo map_image.png" alt="">
<img src="5_Geo map_image.png">
</td>
<td>In Trilium, create a child note under the map.</td>
</tr>
<tr>
<td>3</td>
<td>
<img src="11_Geo map_image.png" alt="">
<img src="11_Geo map_image.png">
</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.
@ -185,7 +187,8 @@
</tr>
</tbody>
</table>
<h3>Adding from OpenStreetMap</h3>
<h3>Adding from OpenStreetMap</h3>
<p>Similarly to the Google Maps approach:</p>
<table>
<thead>
@ -199,7 +202,7 @@
<tr>
<td>1</td>
<td>
<img src="1_Geo map_image.png" alt="">
<img src="1_Geo map_image.png">
</td>
<td>Go to any location on openstreetmap.org and right click to bring up the
context menu. Select the “Show address” item.</td>
@ -207,7 +210,7 @@
<tr>
<td>2</td>
<td>
<img src="Geo map_image.png" alt="">
<img src="Geo map_image.png">
</td>
<td>The address will be visible in the top-left of the screen, in the place
of the search bar. 
@ -217,14 +220,15 @@
<tr>
<td>3</td>
<td>
<img src="6_Geo map_image.png" alt="">
<img src="6_Geo map_image.png">
</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>
<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>
<table>
<thead>
@ -238,7 +242,7 @@
<tr>
<td>1</td>
<td>
<img src="4_Geo map_image.png" alt="">
<img src="4_Geo map_image.png">
</td>
<td>To add a track, simply drag &amp; drop a .gpx file inside the geo map
in the note tree.</td>
@ -246,7 +250,7 @@
<tr>
<td>2</td>
<td>
<img src="15_Geo map_image.png" alt="">
<img src="15_Geo map_image.png">
</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>
@ -254,7 +258,7 @@
<tr>
<td>3</td>
<td>
<img src="7_Geo map_image.png" alt="">
<img src="7_Geo map_image.png">
</td>
<td>When going back to the map, the track should now be visible. 
<br>
@ -262,9 +266,10 @@
</tr>
</tbody>
</table>
<h2>Troubleshooting</h2>
<h2>Troubleshooting</h2>
<p>
<img src="13_Geo map_image.png" alt="">
<img src="13_Geo map_image.png">
</p>
<h3>Grid-like artifacts on the map</h3>
<p>This occurs if the application is not at 100% zoom which causes the pixels

View File

@ -37,10 +37,10 @@ config:
<tbody>
<tr>
<td>
<img src="Mermaid%20Diagrams/ELK%20off.txt" alt="">
<img src="Mermaid%20Diagrams/ELK%20off.txt">
</td>
<td>
<img src="Mermaid%20Diagrams/ELK%20on.txt" alt="">
<img src="Mermaid%20Diagrams/ELK%20on.txt">
</td>
</tr>
</tbody>

View File

@ -36,7 +36,7 @@
</ul>
<p>In both cases, it is possible to switch back to editable mode using the
<img
src="Text_bx-edit-alt.svg" alt="">button at top right of page.</p>
src="Text_bx-edit-alt.svg">button at top right of page.</p>
<p>For more information, see <a href="../Basic%20Concepts/Note/Read-Only%20Notes.html">Read-Only Notes</a>.</p>
<h2>General Formatting</h2>
<p>Since Trilium uses CKEditor, all of its formatting options are available
@ -72,7 +72,7 @@
<p>CKEditor supports a markdown-like editing experience, recognising syntax
and automatically converting it to rich text.</p>
<p>
<img src="Text_image.png" alt="">
<img src="Text_image.png">
</p>
<p>Complete documentation for this feature is available in the <a href="https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html">CKEditor documentation</a>.</p>
<p>If autoformatting is not desirable, press <kbd>Ctrl</kbd> + <kbd>Z</kbd> to

View File

@ -14,7 +14,7 @@
<div class="ck-content">
<p>
<img src="1_Code blocks_image.png" alt="">
<img src="1_Code blocks_image.png">
</p>
<p>The code blocks feature allows entering pieces of code in text notes.</p>
<p>Note that this feature is meant for generally small snippets of code.
@ -24,7 +24,7 @@
<ul>
<li>Via the <a href="Formatting%20toolbar.html">Formatting toolbar</a>, look
for the
<img src="Code blocks_image.png" alt="">button.
<img src="Code blocks_image.png">button.
<ul>
<li>Pressing directly on the icon will insert a code block with the language
that was selected most recently. If this is the first time a code block
@ -55,7 +55,7 @@
<p>Simply click anywhere inside the code block and press again the code block
button in the <a href="Formatting%20toolbar.html">Formatting toolbar</a>:
<br>
<img src="2_Code blocks_image.png" alt="">
<img src="2_Code blocks_image.png">
</p>
<h2>Adjusting the list of languages</h2>
<p>The code blocks feature shares the list of languages with the <a href="../Code.html">Code Notes</a> note

View File

@ -14,8 +14,7 @@
<div class="ck-content">
<p>
<img src="api/images/4yHAD34xyvAl/Content language &amp; Right-t.png"
alt="">
<img src="api/images/JShOeO3gLTrk/Content language &amp; Right-t.png">
</p>
<p>A language hint can be provided for text notes. This option informs the
browser or the desktop application about the language the note is written

View File

@ -25,17 +25,17 @@
<p>The first popup is the block-level popup. This will appear to the left
of the current paragraph you are currently editing, as a sequence of dots:
<br>
<img src="1_Formatting toolbar_image.png" alt="">
<img src="1_Formatting toolbar_image.png">
</p>
<p>Clicking this popup will reveal the formatting options that are specific
to the entire paragraph, such as setting a heading, lists, tables, etc.</p>
<p>
<img src="3_Formatting toolbar_image.png" alt="">
<img src="3_Formatting toolbar_image.png">
</p>
<h3>Inline popup</h3>
<p>The inline popup appears automatically when selecting a text:</p>
<p>
<img src="Formatting toolbar_image.png" alt="">
<img src="Formatting toolbar_image.png">
</p>
<p>All the options here apply only to the selected portion of text, such
as changing the font size, or making the text bold.</p>
@ -45,7 +45,7 @@
<p>All the options are combined into a single toolbar that will appear as
part of the <a href="../../Basic%20Concepts/UI%20Elements/Ribbon.html">Ribbon</a>.</p>
<p>
<img src="2_Formatting toolbar_image.png" alt="">
<img src="2_Formatting toolbar_image.png">
</p>
<p>By default, if the toolbar does not fit on the screen, the rest of the
options will be grouped into a single option at the end. It is possible

View File

@ -17,11 +17,11 @@
<h3>Keyboard shortcuts</h3>
<p>This allows marking a portion of text as a shortcut key.</p>
<p>
<img src="Formatting_image.png" alt="">
<img src="Formatting_image.png">
</p>
<p>To apply this style, press the
<img src="2_Formatting_image.png" alt="">button in
<img src="1_Formatting_image.png" alt="">group from the <a href="Formatting%20toolbar.html">Formatting toolbar</a>.
<img src="2_Formatting_image.png">button in
<img src="1_Formatting_image.png">group from the <a href="Formatting%20toolbar.html">Formatting toolbar</a>.
On the floating toolbar, the buttons appear when selecting a text.</p>
</div>
</div>

View File

@ -24,18 +24,18 @@
<p>To add an image to the note, simply drag it from file explorer onto the
note editor inside Trilium and the image will be uploaded.</p>
<p>
<img src="10_Images_image.png" alt="">
<img src="10_Images_image.png">
</p>
<p>Alternatively you can click on block toolbar and then on "Insert image":</p>
<p>
<img src="8_Images_image.png" alt="">
<img src="8_Images_image.png">
</p>
<p>You can also copy and paste an image from web - the image will be (asynchronously)
downloaded and embedded.</p>
<h2>Configuring the images</h2>
<p>Clicking on an image will reveal a popup with multiple options:
<br>
<img src="11_Images_image.png" alt="">
<img src="11_Images_image.png">
</p>
<h3>Alignment</h3>
<p>The first set of options configure the alignment are, in order:</p>
@ -51,11 +51,11 @@
<tbody>
<tr>
<td>
<img src="7_Images_image.png" alt="">
<img src="7_Images_image.png">
</td>
<td>Inline</td>
<td>
<img src="2_Images_image.png" alt="">
<img src="2_Images_image.png">
</td>
<td>As the name suggests, the name can be put inside a paragraph and moved
around similarly as if it was a block of text. Use drag &amp; drop or cut-paste
@ -63,32 +63,32 @@
</tr>
<tr>
<td>
<img src="12_Images_image.png" alt="">
<img src="12_Images_image.png">
</td>
<td>Centered image</td>
<td>
<img src="3_Images_image.png" alt="">
<img src="3_Images_image.png">
</td>
<td>The image will be displayed as a block and centered, not allowing text
in either the left or right of it.</td>
</tr>
<tr>
<td>
<img src="5_Images_image.png" alt="">
<img src="5_Images_image.png">
</td>
<td>Wrap text</td>
<td>
<img src="9_Images_image.png" alt="">
<img src="9_Images_image.png">
</td>
<td>The image will be displayed to the left or the right of the text.</td>
</tr>
<tr>
<td>
<img src="Images_image.png" alt="">
<img src="Images_image.png">
</td>
<td>Block align</td>
<td>
<img src="4_Images_image.png" alt="">
<img src="4_Images_image.png">
</td>
<td>Similarly to <em>Centered image</em>, the image will be displayed as a
block and aligned either to the left or to the right, but not allowing
@ -96,7 +96,8 @@
</tr>
</tbody>
</table>
<h2>Compression</h2>
<h2>Compression</h2>
<p>Since Trilium isn't really meant to be primary storage for image data,
it attempts to compress and resize (with pretty aggressive settings) uploaded
images before storing them to the database. You may then notice some quality

View File

@ -21,7 +21,7 @@
link, select text and press <kbd>Ctrl</kbd> + <kbd>K</kbd> or wait for the
"balloon" to appear and click link icon there.</p>
<p>
<img src="../../Attachments/create-external-link.gif" alt="">
<img src="../../Attachments/create-external-link.gif">
</p>
<p>You can follow external link by either double clicking (will open new
tab/window) it or right clicking on them and choosing "Open in new tab".</p>
@ -39,7 +39,7 @@
- you link to a particular note and can choose the link title</li>
</ul>
<p>
<img src="../../Attachments/create-link-to-note.gif" alt="">
<img src="../../Attachments/create-link-to-note.gif">
</p>
<p>You can follow the note link by double clicking it.</p>
<p>Alternatively if you only wish to quickly preview the content, you can

View File

@ -41,38 +41,38 @@
<tbody>
<tr>
<td>
<img src="5_Lists_image.png" alt="">
<img src="5_Lists_image.png">
</td>
<td>First, create a list.</td>
</tr>
<tr>
<td>
<img src="3_Lists_image.png" alt="">
<img src="3_Lists_image.png">
</td>
<td>Press Enter to create a new list item.</td>
</tr>
<tr>
<td>
<img src="4_Lists_image.png" alt="">
<img src="4_Lists_image.png">
</td>
<td>Press Backspace to get rid of the bullet point. Notice the cursor position.</td>
</tr>
<tr>
<td>
<img src="1_Lists_image.png" alt="">
<img src="1_Lists_image.png">
</td>
<td>At this point, insert any desired block-level item such as a code block.</td>
</tr>
<tr>
<td>
<img src="Lists_image.png" alt="">
<img src="Lists_image.png">
</td>
<td>To continue with a new bullet point, press Enter until the cursor moves
to a new blank position.</td>
</tr>
<tr>
<td>
<img src="2_Lists_image.png" alt="">
<img src="2_Lists_image.png">
</td>
<td>Press Enter once more to create the new bullet.</td>
</tr>

View File

@ -30,7 +30,7 @@
<tbody>
<tr>
<td>
<img src="5_Creating a custom theme_im.png" alt="">
<img src="5_Creating a custom theme_im.png">
</td>
<td>Themes are code notes with a special attribute. Start by creating a new
code note.</td>
@ -47,7 +47,8 @@
</tr>
</tbody>
</table>
<h2>Step 3. Define the theme's CSS</h2>
<h2>Step 3. Define the theme's CSS</h2>
<p>As a very simple example we will change the background color of the launcher
pane to a shade of blue.</p>
<p>To alter the different variables of the theme:</p><pre><code class="language-text-css">:root {

View File

@ -25,19 +25,19 @@
<tbody>
<tr>
<td>
<img src="Custom app-wide CSS_image.png" alt="">
<img src="Custom app-wide CSS_image.png">
</td>
<td>Start by creating a new note and changing the note type to CSS</td>
</tr>
<tr>
<td>
<img src="1_Custom app-wide CSS_image.png" alt="">
<img src="1_Custom app-wide CSS_image.png">
</td>
<td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
</tr>
<tr>
<td>
<img src="2_Custom app-wide CSS_image.png" alt="">
<img src="2_Custom app-wide CSS_image.png">
</td>
<td>Type the desired CSS.
<br>
@ -46,7 +46,8 @@
</tr>
</tbody>
</table>
<h2>Seeing the changes</h2>
<h2>Seeing the changes</h2>
<p>Adding a new <em>app CSS note</em> or modifying an existing one does not
immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh
the page first.</p>

View File

@ -18,7 +18,7 @@
onto the existing theme. The <code>appTheme</code> attribute must also be
present.</p>
<p>
<img src="Customize the Next theme_i.png" alt="">
<img src="Customize the Next theme_i.png">
</p>
<p>The <code>appThemeBase</code> label can be set to one of the following values:</p>
<ul>

View File

@ -14,7 +14,7 @@
<div class="ck-content">
<p>
<img src="Anonymized Database_image.png" alt="">
<img src="Anonymized Database_image.png">
</p>
<p>In certain scenarios, understanding the structure of a database is crucial
for troubleshooting issues. However, sharing your actual <a href="../Advanced%20Usage/Database.html">database</a> file

View File

@ -35,11 +35,11 @@
<li>In Firefox/Chrome right-click anywhere in the page and click Inspect:</li>
</ul>
<p>
<img src="../Attachments/error-logs-firefox-context.png" alt="">
<img src="../Attachments/error-logs-firefox-context.png">
</p>
<p>Once you have Dev Tools open, click on "Console" tab:</p>
<p>
<img src="Error logs_image.png" alt="">
<img src="Error logs_image.png">
</p>
<p>Copy-paste (or screenshot) the logs. It's better to provide not just errors,
but the whole log, which might provide context while analyzing the bug.</p>
@ -56,7 +56,7 @@
<p>In such case, please export the relevant note subtree by right-clicking
it on the left tree, choosing Export - HTML as ZIP:</p>
<p>
<img src="../Attachments/error-logs-export-subtree.png" alt="">
<img src="../Attachments/error-logs-export-subtree.png">
</p>
</div>
</div>

View File

@ -78,6 +78,72 @@
</li>
<li><a href="User%20Guide/Quick%20Start.html" target="detail">Quick Start</a>
</li>
<li>Installation &amp; Setup
<ul>
<li><a href="User%20Guide/Installation%20%26%20Setup/Desktop%20Installation.html"
target="detail">Desktop Installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation.html"
target="detail">Server Installation</a>
<ul>
<li>1. Installing the server
<ul>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Packaged%20server%20installation.html"
target="detail">Packaged server installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Docker%20Server%20Installation.html"
target="detail">Docker Server Installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/NixOS%20server%20installation.html"
target="detail">NixOS server installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Manual%20server%20installation.html"
target="detail">Manual server installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Kubernetes%20server%20installation.html"
target="detail">Kubernetes server installation</a>
</li>
</ul>
</li>
<li>2. Reverse proxy
<ul>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/2.%20Reverse%20proxy/Nginx.html"
target="detail">Nginx</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/2.%20Reverse%20proxy/Apache.html"
target="detail">Apache</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/TLS%20Configuration.html"
target="detail">TLS Configuration</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/Multi-Factor%20Authentication.html"
target="detail">Multi-Factor Authentication</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/Reverse%20proxy%20setup.html"
target="detail">Reverse proxy setup</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Synchronization.html"
target="detail">Synchronization</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Mobile%20Frontend.html"
target="detail">Mobile Frontend</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Web%20Clipper.html" target="detail">Web Clipper</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Upgrading%20TriliumNext.html"
target="detail">Upgrading TriliumNext</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Backup.html" target="detail">Backup</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Data%20directory.html"
target="detail">Data directory</a>
</li>
</ul>
</li>
<li>Basic Concepts
<ul>
<li>UI Elements
@ -285,72 +351,6 @@
</li>
</ul>
</li>
<li>Installation &amp; Setup
<ul>
<li><a href="User%20Guide/Installation%20%26%20Setup/Desktop%20Installation.html"
target="detail">Desktop Installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation.html"
target="detail">Server Installation</a>
<ul>
<li>1. Installing the server
<ul>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Packaged%20server%20installation.html"
target="detail">Packaged server installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Docker%20Server%20Installation.html"
target="detail">Docker Server Installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/NixOS%20server%20installation.html"
target="detail">NixOS server installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Manual%20server%20installation.html"
target="detail">Manual server installation</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Kubernetes%20server%20installation.html"
target="detail">Kubernetes server installation</a>
</li>
</ul>
</li>
<li>2. Reverse proxy
<ul>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/2.%20Reverse%20proxy/Nginx.html"
target="detail">Nginx</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/2.%20Reverse%20proxy/Apache.html"
target="detail">Apache</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/TLS%20Configuration.html"
target="detail">TLS Configuration</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/Multi-Factor%20Authentication.html"
target="detail">Multi-Factor Authentication</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Server%20Installation/Reverse%20proxy%20setup.html"
target="detail">Reverse proxy setup</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Synchronization.html"
target="detail">Synchronization</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Mobile%20Frontend.html"
target="detail">Mobile Frontend</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Web%20Clipper.html" target="detail">Web Clipper</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Upgrading%20TriliumNext.html"
target="detail">Upgrading TriliumNext</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Backup.html" target="detail">Backup</a>
</li>
<li><a href="User%20Guide/Installation%20%26%20Setup/Data%20directory.html"
target="detail">Data directory</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/FAQ.html" target="detail">FAQ</a>
</li>
<li><a href="User%20Guide/Troubleshooting.html" target="detail">Troubleshooting</a>

View File

@ -27,6 +27,7 @@
margin: 1.25em 0;
margin-right: 14px;
position: relative;
overflow: hidden;
}
.ck-content .admonition p:last-child {