chore(docs): add HTML user guide

This commit is contained in:
Elian Doran 2025-03-11 22:03:36 +02:00
parent 3723824246
commit 15c04c38b9
No known key found for this signature in database
293 changed files with 17015 additions and 0 deletions

1
.gitattributes vendored
View File

@ -1,3 +1,4 @@
package-lock.json linguist-generated=true
**/package-lock.json linguist-generated=true
src/public/app/doc_notes/en/User[[:space:]]Guide/** linguist-generated=true
libraries/** linguist-vendored

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,21 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<base target="_parent">
<title data-trilium-title>User Guide</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>User Guide</h1>
<div class="ck-content">
<p>The sub-children of this note are automatically synced.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

View File

@ -0,0 +1,37 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Advanced Showcases</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Advanced Showcases</h1>
<div class="ck-content">
<p>Trilium offers advanced functionality through <a href="Code%20Notes/Scripts.html">Scripts</a> and
<a
href="Attributes/Promoted%20Attributes.html">Promoted Attributes</a>. To illustrate these features, we've prepared
several showcases available in the <a href="Database.html">demo notes</a>:</p>
<ul>
<li><a href="Relation%20Map.html">Relation Map</a>
</li>
<li><a href="Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
</li>
<li><a href="Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>
</li>
<li><a href="Advanced%20Showcases/Task%20Manager.html">Task Manager</a>
</li>
</ul>
<p>It's important to note that these examples are not natively supported
by Trilium out of the box; instead, they demonstrate what you can build
within Trilium.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View File

@ -0,0 +1,111 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Day Notes</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Day Notes</h1>
<div class="ck-content">
<p>A common pattern in note-taking is that a lot of notes will be centered
around a certain date - e.g. you have some tasks which needs to be done
on a certain date, you have meeting minutes from a certain date, you have
your thoughts etc. and it all revolves around a date on which they occurred.
For this reason, it makes sense to create a certain "day workspace" which
will centralize all those notes relevant for a certain date.</p>
<p>For this, Trilium provides a concept of "day note". Trilium semi-automatically
generates a single note for each day. Under this note you can save all
those relevant notes.</p>
<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="" />
</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="" />
</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"
which then contains "18 - Monday". This is our "day note" which contains
some text in its content and also has some child notes (some of them are
from <a href="Task%20Manager.html">Task manager</a>).</p>
<p>You can also notice how this day note has <a href="../Attributes/Promoted%20Attributes.html">promoted attribute</a> "weight"
where you can track your daily weight. This data is then used in <a href="Weight%20Tracker.html">Weight tracker</a>.</p>
<h2>Templates</h2>
<p>Trilium provides <a href="../Attributes/Template.html">template</a> functionality,
and it could be used together with day notes.</p>
<p>You can define one of the following relations on the root of the journal
(identified by <code>#calendarRoot</code> label):</p>
<ul>
<li>yearTemplate</li>
<li>monthTemplate</li>
<li>dateTemplate</li>
</ul>
<p>All of these are relations. When Trilium creates a new note for year or
month or date, it will take a look at the root and attach a corresponding <code>~template</code> relation
to the newly created role. Using this, you can e.g. create your daily template
with e.g. checkboxes for daily routine etc.</p>
<h2>Date pattern</h2>
<p>It's possible to customize the title of generated date notes by defining
a <code>#datePattern</code> label on a root calendar note (identified by <code>#calendarRoot</code> label).
Following are possible values:</p>
<ul>
<li><code>{dayInMonthPadded} - {weekDay}</code> day notes are named e.g. "24
- Monday"</li>
<li><code>{dayInMonthPadded}: {weekDay3}</code> day notes are named e.g. "24:
Mon"</li>
<li><code>{dayInMonthPadded}: {weekDay2}</code> day notes are named e.g. "24:
Mo"</li>
<li><code>{isoDate} - {weekDay}</code> day notes are named e.g. "2020-12-24
- Monday"</li>
<li><code>{ordinal}</code> is replaced with the ordinal date (e.g. 1st, 2nd,
3rd) etc.</li>
</ul>
<h2>Month pattern</h2>
<p>It is also possible to customize the title of generated month notes through
the <code>#monthPattern</code> attribute, much like <code>#datePattern</code>.
The options are:</p>
<ul>
<li><code>{monthNumberPadded}</code> results in a number like <code>09</code> for
September, and <code>11</code> for November</li>
<li><code>{month}</code> results in the full month name (e.g. <code>September</code> or <code>October</code>)</li>
<li><code>{shortMonth3}</code> is replaced with the first 3 letters of the
month, e.g. Jan, Feb, etc.</li>
<li><code>{shortMonth4}</code> is replaced with the first 4 letters of the
month, e.g. Sept, Octo, etc.</li>
</ul>
<p>The default is <code>{monthNumberPadded} - {month}</code>
</p>
<h2>Implementation</h2>
<p>Trilium has some special support for day notes in the form of <a href="https://triliumnext.github.io/Notes/backend_api/BackendScriptApi.html">backend Script API</a> -
see e.g. getDayNote() function.</p>
<p>Day (and year, month) notes are created with a label - e.g. <code>#dateNote="2018-08-16"</code> this
can then be used by other scripts to add new notes to day note etc.</p>
<p>Journal also has relation <code>child:child:child:template=Day template</code> (see
[[attribute inheritance]]) which effectively adds [[template]] to day notes
(grand-grand-grand children of Journal).</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

View File

@ -0,0 +1,97 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Task Manager</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Task Manager</h1>
<div class="ck-content">
<p>Task Manager is a <a href="../Attributes/Promoted%20Attributes.html">promoted attributes</a> and
<a
href="../Code%20Notes/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="" />
</p>
<p>Task Manager manages outstanding (TODO) tasks and finished tasks (non-empty
doneDate attribute). Outstanding tasks are further categorized by location
and arbitrary tags - whenever you change tag attribute in the task note,
this task is then automatically moved to appropriate location.</p>
<p>Task Manager also integrates with <a href="Day%20Notes.html">day notes</a> -
notes are <a href="../../Basic%20Concepts/Note/Cloning%20Notes.html">cloned</a> into
day note to both todoDate note and doneDate note (with <a href="../../Basic%20Concepts/Navigation/Tree%20Concepts.html">prefix</a> of
either "TODO" or "DONE").</p>
<h2>Implementation</h2>
<p>New tasks are created in the TODO note which has <code>~child:template</code>
<a
href="../Attributes.html">relation</a>(see <a href="../Attributes/Attribute%20Inheritance.html">attribute inheritance</a>)
pointing to the task template.</p>
<h3>Attributes</h3>
<p>Task template defines several <a href="../Attributes/Promoted%20Attributes.html">promoted attributes</a> -
todoDate, doneDate, tags, location. Importantly it also defines <code>~runOnAttributeChange</code> relation
- <a href="../Code%20Notes/Events.html">event</a> handler which is run on
attribute change. This <a href="../Code%20Notes/Scripts.html">script</a> handles
when e.g. we fill out the doneDate attribute - meaning the task is done
and should be moved to "Done" note and removed from TODO, locations and
tags.</p>
<h3>New task button</h3>
<p>There's also "button" note which contains simple script which adds a button
to create new note (task) in the TODO note.</p>
<pre><code class="language-text-x-trilium-auto">api.addButtonToToolbar({
title: 'New task',
icon: 'check',
shortcut: 'alt+n',
action: async () =&gt; {
// creating notes is backend (server) responsibility so we need to pass
// the control there
const taskNoteId = await api.runOnBackend(async () =&gt; {
const todoRootNote = await api.getNoteWithLabel('taskTodoRoot');
const {note} = await api.createNote(todoRootNote.noteId, 'new task', '');
return note.noteId;
});
// we got an ID of newly created note and we want to immediatelly display it
await api.activateNewNote(taskNoteId);
}
});</code></pre>
<h3>CSS</h3>
<p>In the demo screenshot above you may notice that TODO tasks are in red
color and DONE tasks are green.</p>
<p>This is done by having this CSS <a href="../Code%20Notes.html">code note</a> which
defines extra CSS classes:</p>
<pre><code class="language-text-x-trilium-auto">span.fancytree-node.todo .fancytree-title {
color: red !important;
}
span.fancytree-node.done .fancytree-title {
color: green !important;
}</code></pre>
<p>This <a href="../Code%20Notes.html">code note</a> has <code>#appCss</code>
<a
href="../Attributes.html">label</a>which is recognized by Trilium on startup and loaded as CSS into
the application.</p>
<p>Second part of this functionality is based in event handler described
above which assigns <code>#cssClass</code> label to the task to either "done"
or "todo" based on the task status.</p>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,99 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Weight Tracker</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Weight Tracker</h1>
<div class="ck-content">
<p>
<img src="Weight Tracker_image.png" alt="" />
</p>
<p>The <code>Weight Tracker</code> is a <a href="../Code%20Notes/Script%20API.html">Script API</a> showcase
present in the <a href="../Database.html">demo notes</a>.</p>
<p>By adding <code>weight</code> as a <a href="../Attributes/Promoted%20Attributes.html">promoted attribute</a> in
the <a href="../Attributes/Template.html">template</a> from which <a href="Day%20Notes.html">day notes</a> are
created, you can aggregate the data and plot weight change over time.</p>
<h2>Implementation</h2>
<p>The <code>Weight Tracker</code> note in the screenshot above is of the type <code>Render Note</code>.
That type of note doesn't have any useful content itself. Instead it is
a placeholder where a <a href="../Code%20Notes/Scripts.html">script</a> can
render its output.</p>
<p>Scripts for <code>Render Notes</code> are defined in a <a href="../Attributes.html">relation</a> called <code>~renderNote</code>.
In this example, it's the <code>Weight Tracker</code>'s child <code>Implementation</code>.
The Implementation consists of two <a href="../Code%20Notes.html">code notes</a> that
contain some HTML and JavaScript respectively, which load all the notes
with a <code>weight</code> attribute and display their values in a chart.</p>
<p>To actually render the chart, we're using a third party library called
<a
href="https://www.chartjs.org/">chart.js</a>which is imported as an attachment, since it's not built into
Trilium.</p>
<h3>Code</h3>
<p>Here's the content of the script which is placed in a <a href="../Code%20Notes.html">code note</a> of
type <code>JS Frontend</code>:</p>
<pre><code class="language-text-x-trilium-auto">async function getChartData() {
const days = await api.runOnBackend(async () =&gt; {
const notes = api.getNotesWithLabel('weight');
const days = [];
for (const note of notes) {
const date = note.getLabelValue('dateNote');
const weight = parseFloat(note.getLabelValue('weight'));
if (date &amp;&amp; weight) {
days.push({ date, weight });
}
}
days.sort((a, b) =&gt; a.date &gt; b.date ? 1 : -1);
return days;
});
const datasets = [
{
label: "Weight (kg)",
backgroundColor: 'red',
borderColor: 'red',
data: days.map(day =&gt; day.weight),
fill: false,
spanGaps: true,
datalabels: {
display: false
}
}
];
return {
datasets: datasets,
labels: days.map(day =&gt; day.date)
};
}
const ctx = $("#canvas")[0].getContext("2d");
new chartjs.Chart(ctx, {
type: 'line',
data: await getChartData()
});</code></pre>
<h2>How to remove the Weight Tracker button from the top bar</h2>
<p>In the link map of the <code>Weight Tracker</code>, there is a note called <code>Button</code>.
Open it and delete or comment out its contents. The <code>Weight Tracker</code> button
will disappear after you restart Trilium.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

View File

@ -0,0 +1,155 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Attributes</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Attributes</h1>
<div class="ck-content">
<p>In Trilium, attributes are key-value pairs assigned to notes, providing
additional metadata or functionality. There are two primary types of attributes:</p>
<ol>
<li><strong>Labels</strong>: Simple key-value text records</li>
<li><strong>Relations</strong>: Named links to other notes</li>
</ol>
<p>These attributes play a crucial role in organizing, categorising, and
enhancing the functionality of notes.</p>
<p>
<img src="Attributes_image.png" alt="" />
</p>
<h2>Labels</h2>
<p>Labels in Trilium can be used for a variety of purposes:</p>
<ul>
<li><strong>Metadata</strong>: Assign labels with optional values for categorization,
such as <code>#year=1999</code>, <code>#genre="sci-fi"</code>, or <code>#author="Neal Stephenson"</code>
</li>
<li><strong>Configuration</strong>: Labels can configure advanced features
or settings</li>
<li><strong>Scripts and Plugins</strong>: Used to tag notes with special metadata,
such as the "weight" attribute in the <a href="Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>
</li>
</ul>
<p>Labels are also searchable, enhancing note retrieval.</p>
<h3>Common Labels for Advanced Configuration</h3>
<ul>
<li><code>**disableVersioning**</code>: Disables automatic versioning, ideal
for large, unimportant notes like script libraries</li>
<li><code>**versioningLimit**</code>: Used to limit the number of revisions
for a single note</li>
<li><code>**calendarRoot**</code>: Marks the note as the root for <a href="Advanced%20Showcases/Day%20Notes.html">day notes</a>.
Only one note should carry this label</li>
<li><code>**archived**</code>: Hides notes from default search results and
dialogs</li>
<li><code>**excludeFromExport**</code>: Excludes notes and their subtrees
from export operations</li>
<li><code>**run**</code>: Specifies events to trigger scripts (e.g., <code>frontendStartup</code>, <code>hourly</code>)</li>
<li><code>**runAtHour**</code>: Defines specific hours for scripts to run,
used with <code>#run=hourly</code>
</li>
<li><code>**disableInclusion**</code>: Prevents a script from being included
in parent script executions</li>
<li><code>**sorted**</code>: Automatically sorts child notes alphabetically
by title</li>
<li><code>**top**</code>: Keeps the note at the top of its parent's list,
useful with <code>sorted</code>
</li>
<li><code>**hidePromotedAttributes**</code>: Hides certain attributes in the
note's display</li>
<li><code>**readOnly**</code>: Sets the note to read-only mode, applicable
to text and code notes</li>
<li><code>**autoReadOnlyDisabled**</code>: Disables automatic read-only mode
for large notes</li>
<li><code>**appCss**</code>: Marks CSS notes used to modify Triliums appearance</li>
<li><code>**appTheme**</code>: Marks full CSS themes available in Trilium's
options</li>
<li><code>**cssClass**</code>: Adds a CSS class to the note's representation
in the tree</li>
<li><code>**iconClass**</code>: Adds a CSS class to the note's icon, useful
for distinguishing notes visually. See <a href="../Basic%20Concepts/Note/Note%20Icons.html">note icons</a>
</li>
<li><code>**pageSize**</code>: Specifies the number of items per page in note
listings</li>
<li><code>**customRequestHandler**</code> <strong>and</strong> <code>**customResourceProvider**</code>:
Refer to <a href="Custom%20Request%20Handler.html">Custom request handler</a>
</li>
<li><code>**widget**</code>: Marks a note as a custom widget, added to Trilium's
component tree</li>
<li><code>**workspace**</code> <strong>and related attributes</strong>: See
<a
href="../Basic%20Concepts/Navigation/Workspace.html">Workspace</a>for more details</li>
<li><code>**searchHome**</code>: Specifies the parent for new search notes</li>
<li><code>**inbox**</code>: Designates a default location for new notes created
via the sidebar</li>
<li><code>**sqlConsoleHome**</code>: Default location for SQL console notes</li>
<li><code>**bookmarked**</code> <strong>and</strong> <code>**bookmarkFolder**</code>:
See <a href="../Basic%20Concepts/Navigation/Bookmarks.html">Bookmarks</a>
</li>
<li><code>**shareXXX**</code>: See <a href="Sharing.html">Sharing</a>
</li>
<li><code>**keyboardShortcut**</code>: Assigns a keyboard shortcut to open
the note</li>
<li><code>**displayRelations**</code> <strong>and</strong> <code>**hideRelations**</code>:
Manages the display of note relations</li>
<li><code>**titleTemplate**</code>: See <a href="Default%20Note%20Title.html">Default note title</a>
</li>
<li><code>**template**</code>: Makes the note available as a template</li>
<li><code>**toc**</code>: Controls the visibility of the table of contents</li>
<li><code>**color**</code>: Defines the color of the note in the tree and
links</li>
<li><code>**hideChildrenOverview**</code>: Hides child notes in the parent
note's editor</li>
<li><code>**viewType**</code>: Sets the view of child notes (grid or list)</li>
</ul>
<h2>Relations</h2>
<p>Relations define connections between notes, similar to links.</p>
<h3>Uses</h3>
<ul>
<li><strong>Metadata Relationships</strong>: For example, linking a book note
to an author note</li>
<li><strong>Scripting</strong>: Attaching scripts to events or conditions
related to the note</li>
</ul>
<h3>Common Relations</h3>
<ul>
<li><strong>Event-based Relations</strong>: Such as <code>runOnNoteCreation</code> or <code>runOnNoteChange</code>,
which trigger scripts on specific actions</li>
<li><strong>Other Relations</strong>: Include <code>template</code>, <code>renderNote</code>, <code>widget</code>,
and sharing-related relations</li>
</ul>
<h2>Multiplicity</h2>
<p>Attributes in Trilium can be "multivalued", meaning multiple attributes
with the same name can coexist.</p>
<h2>Attribute Definitions and Promoted Attributes</h2>
<p>Special labels create "label/attribute" definitions, enhancing the organization
and management of attributes. For more details, see <a href="Attributes/Promoted%20Attributes.html">Promoted attributes</a>.</p>
<h2>Attribute Inheritance</h2>
<p>Trilium supports attribute inheritance, allowing child notes to inherit
attributes from their parents. For more information, see <a href="Attributes/Attribute%20Inheritance.html">Attribute inheritance</a>.</p>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,63 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Attribute Inheritance</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Attribute Inheritance</h1>
<div class="ck-content">
<h2>1. Standard Inheritance</h2>
<p>In Trilium, attributes can be automatically inherited by child notes if
they have the <code>isInheritable</code> flag set to <code>true</code>. This
means the attribute (a key-value pair) is applied to the note and all its
descendants.</p>
<h3>Example Use Case</h3>
<p>The <code>archived</code> label can be set to be inheritable, allowing you
to hide a whole subtree of notes from searches and other dialogs by applying
this label at the top level.</p>
<h2>2. Copying Inheritance</h2>
<p>Copying inheritance differs from standard inheritance by using a <code>child:</code> prefix
in the attribute name. This prefix causes new child notes to automatically
receive specific attributes from the parent note. These attributes are
independent of the parent and will persist even if the note is moved elsewhere.</p>
<h3>How to Use</h3>
<ul>
<li><strong>Syntax:</strong> <code>#child:attributeName</code>
</li>
<li><strong>Chained Inheritance:</strong> You can chain this inheritance, such
as <code>#child:child:attributeName</code>, where each child down the hierarchy
receives the appropriate attribute.</li>
</ul>
<h3>Example</h3>
<p>If a parent note has the label <code>#child:exampleAttribute</code>, all
newly created child notes will inherit the <code>#exampleAttribute</code> label.
This can be useful for setting default properties for notes in a specific
section.</p>
<h2>3. Template Inheritance</h2>
<p>Attributes can also be inherited from <a href="Template.html">templates</a>.
When a new note is created using a template, it inherits the attributes
defined in that template. This is particularly useful for maintaining consistency
across notes that follow a similar structure or function.</p>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,73 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Promoted Attributes</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Promoted Attributes</h1>
<div class="ck-content">
<p>Promoted attributes are <a href="../Attributes.html">attributes</a> which
are considered important and thus are "promoted" onto the main note UI.
See example below:</p>
<p>
<img src="../../Attachments/promoted-attributes.png" alt="" />
</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
on the note itself.</p>
<p>Attributes can be pretty useful since they allow for querying and script
automation etc. but they are also inconveniently hidden. This allows you
to select few of the important ones and push them to the front of the user.</p>
<p>Now, how do we make attribute to appear on the UI?</p>
<h2>Attribute definition</h2>
<p>Attribute is always name-value pair where both name and value are strings.</p>
<p><em>Attribute definition</em> specifies how should this value be interpreted
- 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="" />
</p>
<p>You can notice tag attribute definition. These "definition" attributes
define how the "value" attributes should behave.</p>
<p>So there's one attribute for value and one for definition. But notice
how definition attribute is <a href="Attribute%20Inheritance.html">Inheritable</a>,
meaning that it's also applied to all descendant note. So in a way, this
definition is used for the whole subtree while "value" attributes are applied
only for this note.</p>
<h3>Inverse relation</h3>
<p>Some relations always occur in pairs - my favorite example is on the family.
If you have a note representing husband and note representing wife, then
there might be a relation between those two of <code>isPartnerOf</code>.
This is bidirectional relationship - meaning that if a relation is pointing
from husband to wife then there should be always another relation pointing
from wife to husband.</p>
<p>Another example is with parent - child relationship. Again these always
occur in pairs, but in this case it's not exact same relation - the one
going from parent to child might be called <code>isParentOf</code> and the
other one going from child to parent might be called <code>isChildOf</code>.</p>
<p>Relation definition allows you to specify such "inverse relation" - for
the relation you just define you specify which is the inverse relation.
Note that in the second example we should have two relation definitions
- one for <code>isParentOf</code> which defines <code>isChildOf</code> as inverse
relation and then second relation definition for <code>isChildOf</code> which
defines <code>isParentOf</code> as inverse relation.</p>
<p>What this does internally is that whenever we save a relation which has
defined inverse relation, we check that this inverse relation exists on
the relation target note. Similarly, when we delete relation, we also delete
inverse relation on the target note.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

View File

@ -0,0 +1,81 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Template</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Template</h1>
<div class="ck-content">
<p>A template in Trilium serves as a predefined structure for other notes,
referred to as instance notes. Assigning a template to a note brings three
main effects:</p>
<ol>
<li><strong>Attribute Inheritance</strong>: All attributes from the template
note are <a href="Attribute%20Inheritance.html">inherited</a> by the instance
notes. Even attributes with <code>#isInheritable=false</code> are inherited
by the instance notes, although only inheritable attributes are further
inherited by the children of the instance notes.</li>
<li><strong>Content Duplication</strong>: The content of the template note
is copied to the instance note, provided the instance note is empty at
the time of template assignment.</li>
<li><strong>Child Note Duplication</strong>: All child notes of the template
are deep-duplicated to the instance note.</li>
</ol>
<h2>Example</h2>
<p>A typical example would be a "Book" template note, which might include:</p>
<ul>
<li><strong>Promoted Attributes</strong>: Such as publication year, author,
etc. (see <a href="Promoted%20Attributes.html">promoted attributes</a>).</li>
<li><strong>Outline</strong>: An outline for a book review, including sections
like themes, conclusion, etc.</li>
<li><strong>Child Notes</strong>: Additional notes for highlights, summary,
etc.</li>
</ul>
<p>
<img src="../../Attachments/template.png" alt="Template Example" />
</p>
<h2>Instance Note</h2>
<p>An instance note is a note related to a template note. This relationship
means the instance note's content is initialized from the template, and
all attributes from the template are inherited.</p>
<p>To create an instance note through the UI:</p>
<p>
<img src="../../Attachments/template-create-instance-n.png" alt="show child note templates"
/>
</p>
<p>For the template to appear in the menu, the template note must have the <code>#template</code> label.
Do not confuse this with the <code>~template</code> relation, which links
the instance note to the template note. If you use <a href="../../Basic%20Concepts/Navigation/Workspace.html">workspaces</a>,
you can also mark templates with <code>#workspaceTemplate</code> to display
them only in the workspace.</p>
<p>Templates can also be added or changed after note creation by creating
a <code>~template</code> relation pointing to the desired template note.</p>
<h2>Additional Notes</h2>
<p>From a visual perspective, templates can define <code>#iconClass</code> and <code>#cssClass</code> attributes,
allowing all instance notes (e.g., books) to display a specific icon and
CSS style.</p>
<p>Explore the concept further in the <a href="../Database.html">demo notes</a>,
including examples like the <a href="../Relation%20Map.html">Relation Map</a>,
<a
href="../Advanced%20Showcases/Task%20Manager.html">Task Manager</a>, and <a href="../Advanced%20Showcases/Day%20Notes.html">Day Notes</a>.</p>
<p>Additionally, see <a href="../Default%20Note%20Title.html">default note title</a> for
creating title templates. Note templates and title templates can be combined
by creating a <code>#titleTemplate</code> for a template note.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -0,0 +1,30 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Bulk actions</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Bulk actions</h1>
<div class="ck-content">
<h3>Execute script</h3>
<p>For more complex scenarios, it is possible to type in a JavaScript expression
in order to apply the necessary changes.</p>
<p>To apply a suffix (<code>- suffix</code> in this example), to the note
title:</p>
<pre><code class="language-application-javascript-env-backend">note.title = note.title + " - suffix";</code></pre>
<p>To alter attributes of a note in a bulk action, such as setting the <code>#shareAlias</code> label
to the title of the note:</p>
<pre><code class="language-application-javascript-env-backend">note.setLabel("shareAlias", note.title)</code></pre>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,53 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Code Notes</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Code Notes</h1>
<div class="ck-content">
<p>Trilium supports creating "code" notes, i.e. notes which contain some
sort of formal code - be it programming language (C++, JavaScript), structured
data (JSON, XML) or other types of codes (CSS etc.).</p>
<p>This can be useful for a few things:</p>
<ul>
<li>computer programmers can store code snippets as notes with syntax highlighting</li>
<li>JavaScript code notes can be executed inside Trilium for some extra functionality
<ul>
<li>we call such JavaScript code notes "scripts" - see <a href="Code%20Notes/Scripts.html">Scripts</a>
</li>
</ul>
</li>
<li>JSON, XML etc. can be used as storage for structured data (typically used
in conjunction with scripting)</li>
</ul>
<p>
<img src="Code Notes_image.png" alt="" />
</p>
<h2>Extra languages</h2>
<p>Trilium supports syntax highlighting for many languages, but by default
displays only some of them (to reduce the number of items). You can add
extra languages in Options -&gt; Code notes.</p>
<h2>Code blocks</h2>
<p>An alternative to the code note is a "code block" - feature of a text
note which can add short snippets of code to the text editor. Starting
with TriliumNext v0.90.12, the code blocks also support syntax highlighting.</p>
<p>
<img src="1_Code Notes_image.png" alt="" />
</p>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,118 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Custom Widgets</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Custom Widgets</h1>
<div class="ck-content">
<p>It's possible to create custom widget in three possible locations where
you can display your custom content.</p>
<p>Positions are:</p>
<ul>
<li><code>left-pane</code>
</li>
<li><code>center-pane</code>
</li>
<li><code>note-detail-pane</code> - located within <code>center-pane</code>,
but specific to note (split)</li>
<li><code>right-pane</code>
</li>
</ul>
<h2>Example - word count widget</h2>
<p>Create a code note of type JS frontend and <strong>give it a</strong> <code>**#widget**</code> <strong>label</strong>.</p>
<pre><code class="language-text-x-trilium-auto">/*
* This defines a custom widget which displays number of words and characters in a current text note.
* To be activated for a given note, add label 'wordCount' to the note, you can also make it inheritable and thus activate it for the whole subtree.
*
* See it in action in "Books" and its subtree.
*/
const TPL = `
Word count:
 
Character count:
`;
class WordCountWidget extends api.NoteContextAwareWidget {
static get parentWidget() { return 'center-pane'; }
get position() { return 100; } // higher value means position towards the bottom/right
isEnabled() {
return super.isEnabled()
&amp;&amp; this.note.type === 'text'
&amp;&amp; this.note.hasLabel('wordCount');
}
doRender() {
this.$widget = $(TPL);
this.$wordCount = this.$widget.find('.word-count');
this.$characterCount = this.$widget.find('.character-count');
return this.$widget;
}
async refreshWithNote(note) {
const {content} = await note.getNoteComplement();
const text = $(content).text(); // get plain text only
const counts = this.getCounts(text);
this.$wordCount.text(counts.words);
this.$characterCount.text(counts.characters);
}
getCounts(text) {
const chunks = text
.split(/[\s-+:,/\\]+/)
.filter(chunk =&gt; chunk !== '');
let words;
if (chunks.length === 1 &amp;&amp; chunks[0] === '') {
words = 0;
}
else {
words = chunks.length;
}
const characters = chunks.join('').length;
return {words, characters};
}
async entitiesReloadedEvent({loadResults}) {
if (loadResults.isNoteContentReloaded(this.noteId)) {
this.refresh();
}
}
}
module.exports = WordCountWidget;</code></pre>
<p>After you make changes it is necessary to restart Trilium so that the
layout can be rebuilt.</p>
<h3>Example screenshot</h3>
<p>On the bottom you can see the resulting widget:</p>
<p>
<img src="../../Attachments/Custom-widget%20image.png" alt="" />
</p>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,70 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Events</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Events</h1>
<div class="ck-content">
<p><a href="Scripts.html">Script</a> notes can be triggered by events. Note
that these are backend events and thus relation need to point to the "JS
backend" code note.</p>
<h2>Global events</h2>
<p>Global events are attached to the script note via label. Simply create
e.g. "run" label with some of these values and script note will be executed
once the event occurs.</p>
<ul>
<li><code>run</code>
<ul>
<li><code>frontendStartup</code> - executes on frontend upon startup</li>
<li><code>mobileStartup</code> - executes on mobile frontend upon startup</li>
<li><code>backendStartup</code> - executes on backend upon startup</li>
<li><code>hourly</code> - executes once an hour on backend</li>
<li><code>daily</code> - executes once a day on backend</li>
</ul>
</li>
</ul>
<h2>Entity events</h2>
<p>Other events are bound to some entity, these are defined as <a href="../Attributes.html">relations</a> -
meaning that script is triggered only if note has this script attached
to it through relations (or it can inherit it).</p>
<ul>
<li><code>runOnNoteCreation</code> - executes when note is created on backend</li>
<li><code>runOnNoteTitleChange</code> - executes when note title is changed
(includes note creation as well)</li>
<li><code>runOnNoteContentChange</code> - executes when note content is changed
(includes note creation as well).</li>
<li><code>runOnNoteChange</code> - executes when note is changed (includes
note creation as well)</li>
<li><code>runOnNoteDeletion</code> - executes when note is being deleted</li>
<li><code>runOnBranchCreation</code> - executes when a branch is created. Branch
is a link between parent note and child note and is created e.g. when cloning
or moving note.</li>
<li><code>runOnBranchChange</code> (since v0.62) - executes when a branch is
changed - either expanded status or prefix are changed.</li>
<li><code>runOnBranchDeletion</code> - executes when a branch is delete. Branch
is a link between parent note and child note and is deleted e.g. when moving
note (old branch/link is deleted).</li>
<li><code>runOnChildNoteCreation</code> - executes when new note is created
under <em>this</em> note</li>
<li><code>runOnAttributeCreation</code> - executes when new attribute is created
under <em>this</em> note</li>
<li><code>runOnAttributeChange</code> - executes when attribute is changed
under <em>this</em> note</li>
</ul>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,30 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Script API</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Script API</h1>
<div class="ck-content">
<p>Trilium offers a "Script API" that enables scripts to perform various
useful functions. There are two main APIs available:</p>
<ul>
<li><a href="https://triliumnext.github.io/Notes/frontend_api/FrontendScriptApi.html">Frontend API</a>
</li>
<li><a href="https://triliumnext.github.io/Notes/backend_api/BackendScriptApi.html">Backend API</a>
</li>
</ul>
<p>Please note that the Script API is currently experimental and may undergo
changes in future updates.</p>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,100 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Scripts</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Scripts</h1>
<div class="ck-content">
<p>Trilium supports creating <a href="../Code%20Notes.html">code notes</a>,
i.e. notes which allow you to store some programming code and highlight
it. Special case is JavaScript code notes which can also be executed inside
Trilium which can in conjunction with <a href="Script%20API.html">Script API</a> provide
extra functionality.</p>
<h2>Scripting</h2>
<p>To go further I must explain basic architecture of Trilium - in its essence
it is a classic web application - it has these two main components:</p>
<ul>
<li>frontend running in the browser (using HTML, CSS, JavaScript) - this is
mainly used to interact with the user, display notes etc.</li>
<li>backend running JavaScript code in node.js runtime - this is responsible
for e.g. storing notes, encrypting them etc.</li>
</ul>
<p>So we have frontend and backend, each with their own set of responsibilities,
but their common feature is that they both run JavaScript code. Add to
this the fact, that we're able to create JavaScript [[code notes]] and
we're onto something.</p>
<h2>Button use case</h2>
<p>Let's take a look at our demo script (shipped with default Trilium <a href="../Database.html">database</a>)
- Task manager. One of the things this script does is adding a button to
the Trilium interface which will allow user to easily add new Task (TODO
item).</p>
<p>
<img src="../../Attachments/button-script.png" alt="" />
</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
a task/todo item.</p>
<p>Red point below the first one marks the note type we have created for
this script - it's "JavaScript frontend". It's frontend because adding
button to UI is clearly frontend responsibility.</p>
<p>In the note content you can see the code which calls one of the API methods,
this one is specifically meant to add new buttons. Code needs to set few
button properties:</p>
<ul>
<li>button title</li>
<li>icon which should appear on the button</li>
<li>optional shortcut under which you can trigger the button</li>
<li>most importantly "action" - what must happen when button is clicked</li>
</ul>
<h3>Action handler</h3>
<p>Saving the note to the database is backend's responsibility, so we immediately
pass control to the backend and ask it to create a note. Once this is done,
we show the newly created note so that the user can set the task title
and maybe some attributes.</p>
<h3>Script execution</h3>
<p>So we have a script which will add the button to the toolbar. But how
can we execute it? One possibility is to click on "play" icon (marked by
red circle). The problem with this is that this UI change is time bound
by Trilium runtime so when we restart Trilium, button won't be there.</p>
<p>We need to execute it every time Trilium starts up, but we probably don't
want to have to manually click on play button on every start up.</p>
<p>The solution is marked by red circle at the bottom - this note has <a href="../Attributes.html">label</a> <code>#run=frontendStartup</code> -
this is one of the "system" labels which Trilium understands. As you might
guess, this will cause all such labeled script notes to be executed once
Trilium frontend starts up.</p>
<p>(<code>#run=frontendStartup</code> does not work for <a href="../../Installation%20%26%20Setup/Mobile%20Frontend.html">Mobile frontend</a> -
if you want to have scripts running there, give the script <code>#run=mobileStartup</code> label)</p>
<h3>More showcases</h3>
<p>You can see more scripting with explanation in <a href="../Advanced%20Showcases.html">Advanced showcases</a>
</p>
<h2>Events</h2>
<p>See <a href="Events.html">Events</a>.</p>
<h2>Script API</h2>
<p>See <a href="Script%20API.html">Script API</a>.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

View File

@ -0,0 +1,49 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Configuration (config.ini or environment variables)</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Configuration (config.ini or environment variables)</h1>
<div class="ck-content">
<p>Trilium supports configuration via a file named <code>config.ini</code> and
environment variables. Please review the file named <a href="https://github.com/TriliumNext/Notes/blob/develop/config-sample.ini">config-sample.ini</a> in
the <a href="https://github.com/TriliumNext/Notes">Notes</a> repository to
see what values are supported.</p>
<p>You can provide the same values via environment variables instead of the <code>config.ini</code> file,
and these environment variables use the following format:</p>
<ol>
<li>Environment variables should be prefixed with <code>TRILIUM_</code> and
use underscores to represent the INI section structure.</li>
<li>The format is: <code>TRILIUM_&lt;SECTION&gt;_&lt;KEY&gt;=&lt;VALUE&gt;</code>
</li>
<li>The environment variables will override any matching values from config.ini</li>
</ol>
<p>For example, if you have this in your config.ini:</p>
<pre><code class="language-text-x-trilium-auto">[Network]
host=localhost
port=8080</code></pre>
<p>You can override these values using environment variables:</p>
<pre><code class="language-text-x-trilium-auto">TRILIUM_NETWORK_HOST=0.0.0.0
TRILIUM_NETWORK_PORT=9000</code></pre>
<p>The code will:</p>
<ol>
<li>First load the <code>config.ini</code> file as before</li>
<li>Then scan all environment variables for ones starting with <code>TRILIUM_</code>
</li>
<li>Parse these variables into section/key pairs</li>
<li>Merge them with the config from the file, with environment variables taking
precedence</li>
</ol>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,110 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Custom Request Handler</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Custom Request Handler</h1>
<div class="ck-content">
<p>Trilium provides a mechanism for <a href="Code%20Notes/Scripts.html">scripts</a> to
open a public REST endpoint. This opens a way for various integrations
with other services - a simple example would be creating new note from
Slack by issuing a slash command (e.g. <code>/trilium buy milk</code>).</p>
<h2>Create note from outside Trilium</h2>
<p>Let's take a look at an example. The goal is to provide a REST endpoint
to which we can send title and content and Trilium will create a note.</p>
<p>We'll start with creating a JavaScript backend <a href="Code%20Notes.html">code note</a> containing:</p>
<pre><code class="language-text-x-trilium-auto">const {req, res} = api;
const {secret, title, content} = req.body;
if (req.method == 'POST' &amp;&amp; secret === 'secret-password') {
// notes must be saved somewhere in the tree hierarchy specified by a parent note.
// This is defined by a relation from this code note to the "target" parent note
// alternetively you can just use constant noteId for simplicity (get that from "Note Info" dialog of the desired parent note)
const targetParentNoteId = api.currentNote.getRelationValue('targetNote');
const {note} = api.createTextNote(targetParentNoteId, title, content);
const notePojo = note.getPojo();
res.status(201).json(notePojo);
}
else {
res.send(400);
}</code></pre>
<p>This script note has also following two attributes:</p>
<ul>
<li>label <code>#customRequestHandler</code> with value <code>create-note</code>
</li>
<li>relation <code>~targetNote</code> pointing to a note where new notes should
be saved</li>
</ul>
<h3>Explanation</h3>
<p>Let's test this by using an HTTP client to send a request:</p>
<pre><code class="language-text-x-trilium-auto">POST http://my.trilium.org/custom/create-note
Content-Type: application/json
{
"secret": "secret-password",
"title": "hello",
"content": "world"
}+++++++++++++++++++++++++++++++++++++++++++++++</code></pre>
<p>Notice the <code>/custom</code> part in the request path - Trilium considers
any request with this prefix as "custom" and tries to find a matching handler
by looking at all notes which have <code>customRequestHandler</code> <a href="Attributes.html">label</a>.
Value of this label then contains a regular expression which will match
the request path (in our case trivial regex "create-note").</p>
<p>Trilium will then find our code note created above and execute it. <code>api.req</code>, <code>api.res</code> are
set to <a href="https://expressjs.com/en/api.html#req">request</a> and
<a
href="https://expressjs.com/en/api.html#res">response</a>objects from which we can get details of the request and also
respond.</p>
<p>In the code note we check the request method and then use trivial authentication
- keep in mind that these endpoints are by default totally unauthenticated,
and you need to take care of this yourself.</p>
<p>Once we pass these checks we will just create the desired note using
<a
href="Code%20Notes/Script%20API.html">Script API</a>.</p>
<h2>Custom resource provider</h2>
<p>Another common use case is that you want to just expose a file note -
in such case you create label <code>customResourceProvider</code> (value
is again path regex).</p>
<p>For more information, see <a href="Custom%20Resource%20Providers.html">Custom Resource Providers</a>.</p>
<h2>Advanced concepts</h2>
<p><code>api.req</code> and <code>api.res</code> are Express.js objects - you
can always look into its <a href="https://expressjs.com/en/api.html">documentation</a> for
details.</p>
<h3>Parameters</h3>
<p>REST request paths often contain parameters in the URL, e.g.:</p>
<pre><code class="language-text-x-trilium-auto">http://my.trilium.org/custom/notes/123</code></pre>
<p>The last part is dynamic so the matching of the URL must also be dynamic
- for this reason the matching is done with regular expressions. Following <code>customRequestHandler</code> value
would match it:</p>
<pre><code class="language-text-x-trilium-auto">notes/([0-9]+)</code></pre>
<p>Additionally, this also defines a matching group with the use of parenthesis
which then makes it easier to extract the value. The matched groups are
available in <code>api.pathParams</code>:</p>
<pre><code class="language-text-x-trilium-auto">const noteId = api.pathParams[0];</code></pre>
<p>Often you also need query params (as in e.g. <code>http://my.trilium.org/custom/notes?noteId=123</code>),
you can get those with standard express <code>req.query.noteId</code>.</p>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,61 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Custom Resource Providers</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Custom Resource Providers</h1>
<div class="ck-content">
<p>A custom resource provider allows any file imported into Trilium (images,
fonts, stylesheets) to be publicly accessible via a URL.</p>
<p>A potential use case for this is to add embed a custom font alongside
a theme.</p>
<h2>Steps for creating a custom resource provider</h2>
<ol>
<li>Import a file such as an image or a font into Trilium by drag &amp; drop.</li>
<li>Select the file and go to the <em>Owned Attributes</em> section.</li>
<li>Add the label <code>#customResourceProvider=hello</code>.</li>
<li>To test if it is working, use a browser to navigate to <code>&lt;protocol&gt;://&lt;host&gt;/custom/hello</code> (where <code>&lt;protocol&gt;</code> is
either <code>http</code> or <code>https</code> based on your setup, and <code>&lt;host&gt;</code> is
the host or IP to your Trilium server instance). If you are running the
TriliumNext application without a server, use <code>http://localhost:37840</code> as
the base URL.</li>
<li>If everything went well, at the previous step the browser should have
downloaded the file uploaded in the first step.</li>
</ol>
<p>Instead of <code>hello</code>, the name can be:</p>
<ul>
<li>A path, such as <code>fonts/Roboto.ttf</code>, which would be accessible
via <code>&lt;host&gt;/custom/fonts/Roboto.ttf</code>.</li>
<li>As a more advanced use case, a regular expression to match multiple routes,
such as <code>hello/.*</code> which will be accessible via <code>/custom/hello/1</code>, <code>/custom/hello/2</code>, <code>/custom/hello/world</code>,
etc.</li>
</ul>
<h2>Using it in a theme</h2>
<p>For example, if you have a custom font to be imported by the theme, first
upload a font file into Trilium and assign it the <code>#customResourceProvider=fonts/myfont.ttf</code> attribute.</p>
<p>Then modify the theme CSS to point to:</p>
<pre><code class="language-text-css">@font-face {
font-family: customFont;
src: url("/custom/fonts/myfont.ttf");
}
div {
font-family: customFont;
}</code></pre>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,82 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Database</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Database</h1>
<div class="ck-content">
<p>Your Trilium data is stored in a <a href="https://www.sqlite.org">SQLite</a> database
which contains all notes, tree structure, metadata, and most of the configuration.
The database file is named <code>document.db</code> and is stored in the
application's default <a href="../Installation%20%26%20Setup/Data%20directory.html">Data directory</a>.</p>
<h2>Demo Notes</h2>
<p>When you run Trilium for the first time, it will generate a new database
containing demo notes. These notes showcase its many features, such as:</p>
<ul>
<li><a href="Relation%20Map.html">Relation Map</a>
</li>
<li><a href="Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
</li>
<li><a href="Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>
</li>
<li><a href="Advanced%20Showcases/Task%20Manager.html">Task Manager</a>
</li>
<li><a href="../Basic%20Concepts/Themes.html">Custom CSS Themes</a>
</li>
</ul>
<h3>Restoring Demo Notes</h3>
<p>There are some cases in which you may want to restore the original demo
notes. For example, if you experimented with some of the more advanced
features and want to see the original reference, or if you simply want
to explore the latest version of the demo notes, which might showcase new
features.</p>
<p>You can easily restore the demo notes by using Trilium's built-in import
feature by importing them:</p>
<ul>
<li>Download <a href="https://github.com/TriliumNext/Notes/raw/develop/db/demo.zip">this .zip archive</a> with
the latest version of the demo notes</li>
<li>Right click on any note in your tree under which you would like the demo
notes to be imported</li>
<li>Click "Import into note"</li>
<li>Select the .zip archive to import it</li>
</ul>
<h2>Manually Modifying the Database</h2>
<p>Trilium provides a lot of flexibility, and with it, opportunities for
advanced users to tweak it. If you need to explore or modify the database
directly, you can use a tool such as <a href="https://sqlitebrowser.org/">SQLite Browser</a> to
work directly on the database file.</p>
<p>See <a href="Database/Manually%20altering%20the%20database.html">Manually altering the database</a> for
more information.</p>
<h2>How to Reset the Database</h2>
<p>If you are experimenting with Trilium and want to return it to its original
state, you can do that by deleting the current database. When you restart
the application, it will generate a new database containing the original
demo notes.</p>
<p>To delete the database, simply go to the <a href="../Installation%20%26%20Setup/Data%20directory.html">data directory</a> and
delete the <code>document.db</code> file (and any other files starting with <code>document.db</code>).</p>
<p>If you do not need to preserve any configurations that might be stored
in the <code>config.ini</code> file, you can just delete all of the <a href="../Installation%20%26%20Setup/Data%20directory.html">data directory's</a> contents
to fully restore the application to its original state. You can also review
the <a href="Configuration%20(config.ini%20or%20e.html">configuration</a> file
to provide all <code>config.ini</code> values as environment variables instead.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 508 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 635 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 668 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 542 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

View File

@ -0,0 +1,65 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Manually altering the database</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Manually altering the database</h1>
<div class="ck-content">
<p>There are some situations where modifying the SQLite database that Trilium
uses is desirable.</p>
<p>If you are doing any advanced development or troubleshooting where you
manually modify the database, you might want to consider creating backups
of your <code>document.db</code> file.</p>
<h2>Modifying it internally using the SQL Console</h2>
<p>The SQL Console is Trilium's built-in database editor.</p>
<p>See <a href="Manually%20altering%20the%20database/SQL%20Console.html">SQL Console</a>.</p>
<h2>Externally modifying the database</h2>
<p>Sometimes the SQL Console cannot be used (for example if the application
cannot start).</p>
<p>When making external modifications, consider closing the desktop application.
If modifying the server database, then stop the service or Docker container.</p>
<h3>Using DB Browser for SQLite</h3>
<p>DB Browser for SQLite is a cross-platform editor that can be used to alter
the database using a graphical user interface.</p>
<p>To do so:</p>
<ol>
<li>In the main menu, select File → Open database… and navigate to the database
in the <a href="../../Installation%20%26%20Setup/Data%20directory.html">Data directory</a>.</li>
<li>Select the <em>Execute SQL</em> tab.</li>
<li>Type in the desired SQL statement.</li>
<li>Press the "Play" button in the toolbar underneath the "Execute SQL" tab
(or F5 key).</li>
<li>Press "Write Changes" in the main toolbar.</li>
<li>Close the application or close the database.</li>
</ol>
<p>
<img src="Manually altering the data.png" alt="" />
</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>
<ul>
<li>In the prompt simply type the statement and make sure it ends with a <code>;</code> character.</li>
<li>To exit, simply type <code>.quit</code> and enter.</li>
</ul>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,62 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../../style.css">
<base target="_parent">
<title data-trilium-title>SQL Console</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>SQL Console</h1>
<div class="ck-content">
<p>The SQL Console is Trilium's built-in database editor.</p>
<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="" />
</p>
<h3>Interaction</h3>
<ul>
<li>
<p>Hovering the mouse over one of the tables listed at the top of the document
will show the columns and their data type.</p>
</li>
<li>
<p>Only one SQL statement can be run at once.</p>
</li>
<li>
<p>To run the statement, press the
<img src="3_SQL Console_image.png" alt=""
/>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="" />
</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>
<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>
<li>The expression cannot be modified. If needed, recreate it by copying the
statement back into the SQL console and then saving it again.</li>
</ul>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

View File

@ -0,0 +1,68 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Default Note Title</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Default Note Title</h1>
<div class="ck-content">
<p>When a new note is created, its name is by default "new note". In some
cases, it can be desirable to have a different or even a dynamic default
note title.</p>
<p>For this use case, Trilium (since v0.52) supports <code>#titleTemplate</code>
<a
href="Attributes.html">label</a>. You can create such a label for a given note, assign it a value,
and this value will be used as a default title when creating child notes.
As with other labels, you can make it inheritable to apply recursively,
and you can even place it on the root note to have it applied globally
everywhere.</p>
<p>As an example use case, imagine you collect books you've read in a given
year like this:</p>
<ul>
<li>2022 Books
<ul>
<li>Neal Stephenson: Anathem, 2008</li>
<li>Franz Kafka: Die Verwandlung, 1915</li>
</ul>
</li>
</ul>
<p>Now, to the parent note "2022 Books" you can assign label <code>#titleTemplate="[Author name]: [Book title], [Publication year]"</code>.</p>
<p>And all children of "2022 Books" will be created with initial title "[Author
name]: [Book title], [Publication year]". There's no artificial intelligence
here, the idea is to just prompt you to manually fill in the pieces of
information into the note title by yourself.</p>
<h2>Dynamic value</h2>
<p>The value of <code>#titleTemplate</code> is evaluated at the point of note's
creation as a JavaScript string, which means it can be enriched with the
help of JS string interpolation with dynamic data.</p>
<p>As an example, imagine you collect server outage incidents and write some
notes. It looks like this:</p>
<ul>
<li>Incidents
<ul>
<li>2022-05-09: System crash</li>
<li>2022-05-15: Backup delay</li>
</ul>
</li>
</ul>
<p>You can automatize the date assignment by assigning a label <code>#titleTemplate="${now.format('YYYY-MM-DD')}: "</code> to
the parent note "Incidents". Whenever a new child note is created, the
title template is evaluated with the injected <a href="https://day.js.org/docs/en/display/format">now</a> object.</p>
<p>Second variable injected is <a href="https://triliumnext.github.io/Notes/backend_api/BNote.html">parentNote</a>,
an example could be <code>#titleTemplate="${parentNote.getLabelValue('authorName')}'s literary works"</code>.</p>
<p>See also [[<a href="Attributes/Template.html">template</a>]] which provides
similar capabilities, including default note's content.</p>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,44 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>ETAPI (REST API)</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>ETAPI (REST API)</h1>
<div class="ck-content">
<p>ETAPI is Trilium's public/external REST API. It is available since Trilium
v0.50.</p>
<p>The documentation is in OpenAPI format, available <a href="https://github.com/TriliumNext/Notes/blob/master/src/etapi/etapi.openapi.yaml">here</a>.</p>
<p><a href="https://github.com/Nriver/trilium-py">trilium-py</a> is a third-party
Python implementation for ETAPI client, you can use Python to communicate
with Trilium.</p>
<h2>Authentication</h2>
<p>All operations have to be authenticated using a token. You can get this
token either from Options -&gt; ETAPI or programmatically using the <code>/auth/login</code> REST
call (see the <a href="https://github.com/TriliumNext/Notes/blob/master/src/etapi/etapi.openapi.yaml">spec</a>):</p>
<pre><code class="language-text-x-trilium-auto">GET https://myserver.com/etapi/app-info
Authorization: ETAPITOKEN</code></pre>
<p>Alternatively, since 0.56 you can also use basic auth format:</p>
<pre><code class="language-text-x-trilium-auto">GET https://myserver.com/etapi/app-info
Authorization: Basic BATOKEN</code></pre>
<ul>
<li>Where <code>BATOKEN = BASE64(username + ':' + password)</code> - this is
a standard Basic Auth serialization</li>
<li>Where <code>username</code> is "etapi"</li>
<li>And <code>password</code> is the generated ETAPI token described above.</li>
</ul>
<p>Basic Auth is meant to be used with tools which support only basic auth.</p>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,47 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Note Map</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Note Map</h1>
<div class="ck-content">
<p>Note map is a visualisation of connections between notes.</p>
<p>This provides an insight into a structure ("web") of notes.</p>
<p>There are two types of note map:</p>
<h2>Link Map</h2>
<p>Shows <a href="Attributes.html">relations</a> between notes:</p>
<p>
<img src="1_Note Map_image.png" alt="" />
</p>
<h2>Tree Map</h2>
<p>Shows hierarchical map of notes:</p>
<p>
<img src="Note Map_image.png" alt="" />
</p>
<h2>See also</h2>
<p><a href="Relation%20Map.html">Relation map</a> is a similar concept, with
some differences:</p>
<ul>
<li>note map is automatically generated while relation map must be created
manually</li>
<li>relation map is a type of note while a link map is just virtual visualization</li>
</ul>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

View File

@ -0,0 +1,103 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Relation Map</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Relation Map</h1>
<div class="ck-content">
<p>Relation map is a type of <a href="../Basic%20Concepts/Navigation/Tree%20Concepts.html">note</a> which
visualizes notes and their <a href="Attributes.html">relations</a>. See
an example:</p>
<h2>Development process demo</h2>
<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="" />
</p>
<p>And this is how you can create it:</p>
<p>
<img src="Relation Map_relation-map-.gif" alt="" />
</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
new notes one by one and place them by clicking into the map. We also drag
<a
href="Attributes.html">relations</a>between notes and name them. That's all!</p>
<p>Items on the map - "Specification", "Development", "Testing" and "Demo"
are actually notes which have been created under "Development process"
note - you can click on them and write some content. Connections between
notes are called "<a href="Attributes.html">relations</a>".</p>
<h2>Family demo</h2>
<p>This is more complicated demo using some advanced concepts. Resulting
diagram is here:</p>
<p>
<img src="../Attachments/relation-map-family.png" alt="" />
</p>
<p>This is how you get to it:</p>
<p>
<img src="../Attachments/relation-map-family-demo.gif" alt="" />
</p>
<p>There are several steps here:</p>
<ul>
<li>we start with empty relation map and two existing notes representing Prince
Philip and Queen Elizabeth II. These two notes already have "isPartnerOf"
<a
href="Attributes.html">relations</a>defined.
<ul>
<li>There are actually two "inverse" relations (one from Philip to Elizabeth
and one from Elizabeth to Philip)</li>
</ul>
</li>
<li>we drag both notes to relation map and place to suitable position. Notice
how the existing "isPartnerOf" relations are displayed.</li>
<li>now we create new note - we name it "Prince Charles" and place it on the
relation map by clicking on the desired position. The note is by default
created under the relation map note (visible in the note tree on the left).</li>
<li>we create two new relations "isChildOf" targeting both Philip and Elizabeth
<ul>
<li>now there's something unexpected - we can also see the relation to display
another "hasChild" relation. This is because there's a <a href="Attributes/Promoted%20Attributes.html">relation definition</a> which
puts "isChildOf" as an "<a href="Attributes/Promoted%20Attributes.html">inverse</a>"
relation of "hasChildOf" (and vice versa) and thus it is created automatically.</li>
</ul>
</li>
<li>we create another note for Princess Diana and create "isPartnerOf" relation
from Charles. Again notice how the relation has arrows both ways - this
is because "isPartnerOf" definition specifies its inverse relation as again
"isPartnerOf" so the opposite relation is created automatically.</li>
<li>as the last step we pan &amp; zoom the map to fit better to window dimensions.</li>
</ul>
<p>Relation definitions mentioned above come from "Person template" note
which is assigned to any child of "My Family Tree" relation note. You can
play with the whole thing in the <a href="Database.html">demo notes</a>.</p>
<h2>Details</h2>
<p>You can specify which relations should be displayed with comma delimited
names of relations in <code>displayRelations</code> label.</p>
<p>Alternatively, you can specify comma delimited list of relation names
in <code>hideRelations</code> which will display all relations, except for
the ones defined in the label.</p>
<h2>See also</h2>
<ul>
<li><a href="Note%20Map.html">Note map</a> is a similar concept</li>
</ul>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View File

@ -0,0 +1,174 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Sharing</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Sharing</h1>
<div class="ck-content">
<p>Trilium allows you to share selected notes as <strong>publicly accessible</strong> read-only
documents. This feature is particularly useful for publishing content directly
from your Trilium notes, making it accessible to others online.</p>
<h2>Prerequisites</h2>
<p>To use the sharing feature, you must have a <a href="../Installation%20%26%20Setup/Server%20Installation.html">server installation</a> of
Trilium. This is necessary because the notes will be hosted from the server.</p>
<h2>How to Share a Note</h2>
<ol>
<li>
<p><strong>Enable Sharing</strong>: To share a note, toggle the <code>Shared</code> switch
within the note's interface. Once sharing is enabled, an URL will appear,
which you can click to access the shared note.</p>
<p>
<img src="../Attachments/share-single-note.png" alt="Share Note" />
</p>
</li>
<li>
<p><strong>Access the Shared Note</strong>: The link provided will open the
note in your browser. If your server is not configured with a public IP,
the URL will refer to <code>localhost (127.0.0.1)</code>.</p>
<p>
<img src="../Attachments/share-single-note-web.png" alt="Shared Note Example"
/>
</p>
</li>
</ol>
<h2>Sharing a Note Subtree</h2>
<p>When you share a note, you actually share the entire subtree of notes
beneath it. If the note has child notes, they will also be included in
the shared content. For example, sharing the "Formatting" subtree will
display a page with basic navigation for exploring all the notes within
that subtree.</p>
<p>
<img src="../Attachments/share-multiple-notes-web.png" alt="Shared Subtree Example"
/>
</p>
<h2>Viewing All Shared Notes</h2>
<p>You can view a list of all shared notes by clicking on "Show Shared Notes
Subtree." This allows you to manage and navigate through all the notes
you have made public.</p>
<h2>Security Considerations</h2>
<p>Shared notes are published on the open internet and can be accessed by
anyone with the URL. The URL's randomness does not provide security, so
it is crucial not to share sensitive information through this feature.</p>
<h3>Password Protection</h3>
<p>To protect shared notes with a username and password, you can use the <code>#shareCredentials</code> attribute.
Add this label to the note with the format <code>#shareCredentials="username:password"</code>.
To protect an entire subtree, make sure the label is <a href="Attributes/Attribute%20Inheritance.html">inheritable</a>.</p>
<h2>Advanced Sharing Options</h2>
<h3>Customizing the Appearance of Shared Notes</h3>
<p>The default shared page is basic in design, but you can customize it using
your own CSS:</p>
<ul>
<li><strong>Custom CSS</strong>: Link a CSS <a href="Code%20Notes.html">code note</a> to
the shared page by adding a <code>~shareCss</code> relation to the note.
If you want this style to apply to the entire subtree, make the label inheritable.
You can hide the CSS code note from the tree navigation by adding the <code>#shareHiddenFromTree</code> label.</li>
<li><strong>Omitting Default CSS</strong>: For extensive styling changes,
use the <code>#shareOmitDefaultCss</code> label to avoid conflicts with Trilium's
<a
href="../Basic%20Concepts/Themes.html">default stylesheet</a>.</li>
</ul>
<h3>Adding JavaScript</h3>
<p>You can inject custom JavaScript into the shared note using the <code>~shareJs</code> relation.
This allows you to access note attributes or traverse the note tree using
the <code>fetchNote()</code> API, which retrieves note data based on its
ID.</p>
<p>Example:</p>
<pre><code class="language-application-javascript-env-backend">const currentNote = await fetchNote();
const parentNote = await fetchNote(currentNote.parentNoteIds[0]);
for (const attr of parentNote.attributes) {
console.log(attr.type, attr.name, attr.value);
}</code></pre>
<h3>Creating Human-Readable URL Aliases</h3>
<p>Shared notes typically have URLs like <code>http://domain.tld/share/knvU8aJy4dJ7</code>,
where the last part is the note's ID. You can make these URLs more user-friendly
by adding the <code>#shareAlias</code> label to individual notes (e.g., <code>#shareAlias=highlighting</code>).
This will change the URL to <code>http://domain.tld/share/highlighting</code>.</p>
<p><strong>Important</strong>:</p>
<ol>
<li>Ensure that aliases are unique.</li>
<li>Using slashes (<code>/</code>) within aliases to create subpaths is not
supported.</li>
</ol>
<h3>Viewing and Managing Shared Notes</h3>
<p>All shared notes are grouped under an automatically managed "Shared Notes"
section. From here, you can view, share, or unshare notes by moving or
cloning them within this section.</p>
<p>
<img src="../Attachments/shared-list.png" alt="Shared Notes List" />
</p>
<h3>Setting a Custom Favicon</h3>
<p>To customize the favicon for your shared pages, create a relation <code>~shareFavicon</code> pointing
to a file note containing the favicon (e.g., in <code>.ico</code> format).</p>
<h3>Sharing a Note as the Root</h3>
<p>You can designate a specific note or folder as the root of your shared
content by adding the <code>#shareRoot</code> label. This note will be linked
when visiting <code>[http://domain.tld/share](http://domain/share)</code>,
making it easier to use Trilium as a fully-fledged website. Consider combining
this with the <code>#shareIndex</code> label, which will display a list of
all shared notes.</p>
<h2>Additional Options</h2>
<ul>
<li><strong>Raw Note Sharing</strong>: Use the <code>#shareRaw</code> label
to share a note without any HTML wrapper.</li>
<li><strong>Disallow Robot Indexing</strong>: Add the <code>#shareDisallowRobotIndexing</code> label
to prevent search engines from indexing the shared page by including a <code>noindex, follow</code> meta
tag and <code>X-Robots-Tag: noindex</code> header.</li>
<li><strong>Shared Notes Index</strong>: For text notes with the <code>#shareIndex</code> label,
the content will display a list of all shared note roots.</li>
</ul>
<h2>Limitations</h2>
<p>While the sharing feature is powerful, it has some limitations:</p>
<ul>
<li><strong>No Relation Map Support</strong>
</li>
<li><strong>Book Notes</strong>: Only show a list of child notes.</li>
<li><strong>Code Notes</strong>: No syntax highlighting.</li>
<li><strong>Static Note Tree</strong>
</li>
<li><strong>Protected Notes</strong>: Cannot be shared.</li>
<li><strong>Include Notes</strong>: Not supported.</li>
</ul>
<p>Some of these limitations may be addressed in future updates.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

View File

@ -0,0 +1,55 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Serving directly the content of a note</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Serving directly the content of a note</h1>
<div class="ck-content">
<p>When accessing a shared note, Trilium will render it as a web page. Sometimes
it's desirable to serve the content directly so that it can be used in
a script or downloaded by the user.</p>
<table>
<thead>
<tr>
<th>A note displayed as a web page (HTML)</th>
<th>A note displayed as a raw format</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="1_Serving directly the conte.png" alt="" />
</td>
<td>
<img src="Serving directly the conte.png" alt="" />
</td>
</tr>
</tbody>
</table>
<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>
<p>Append <code>?raw</code> to the URL to display a note in its raw format
regardless of whether the <code>#shareRaw</code> attribute is added on the
note.</p>
<p>
<img src="Serving directly the conte.png" alt="" />
</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 305 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 235 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="147px" height="32px" viewBox="0 0 147 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.0.4 (8053) - http://www.bohemiancoding.com/sketch -->
<title>button</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="button" sketch:type="MSLayerGroup">
<rect id="Background" fill="#7056BF" sketch:type="MSShapeGroup" x="0" y="0" width="147" height="32" rx="4"></rect>
<g id="Icon" transform="translate(10.000000, 8.000000)" fill="#FFFFFF" sketch:type="MSShapeGroup">
<path d="M14.819,3.216 L9.103,0.25 C8.464,-0.082 7.536,-0.081 6.898,0.25 L1.181,3.216 C0.496,3.571 0,4.365 0,5.102 L0,11.035 C0,11.774 0.497,12.566 1.181,12.921 L4.039,14.404 C4.529,14.656 5.134,14.467 5.388,13.978 C5.642,13.487 5.451,12.884 4.961,12.629 L2.106,11.148 C2.068,11.124 2.008,11.039 2,11.035 L1.996,5.143 C2.008,5.098 2.068,5.013 2.103,4.991 L7.816,2.026 C7.897,1.991 8.106,1.992 8.181,2.025 L13.894,4.989 C13.932,5.013 13.992,5.098 14,5.102 L14.003,10.995 C13.992,11.039 13.932,11.124 13.898,11.146 L11.039,12.629 C10.549,12.884 10.358,13.487 10.612,13.978 C10.79,14.32 11.14,14.517 11.501,14.517 C11.656,14.517 11.814,14.481 11.961,14.404 L14.818,12.921 C15.503,12.566 16,11.774 16,11.035 L16,5.102 C16,4.365 15.504,3.571 14.819,3.216" id="App"></path>
<path d="M11.707,9.707 C12.098,9.316 12.098,8.684 11.707,8.293 L8.708,5.294 C8.616,5.201 8.505,5.128 8.382,5.077 C8.138,4.976 7.862,4.976 7.618,5.077 C7.495,5.128 7.385,5.201 7.292,5.294 L4.293,8.293 C3.902,8.684 3.902,9.316 4.293,9.707 C4.488,9.902 4.744,10 5,10 C5.256,10 5.512,9.902 5.707,9.707 L7,8.414 L7,15 C7,15.553 7.447,16 8,16 C8.553,16 9,15.553 9,15 L9,8.414 L10.293,9.707 C10.488,9.902 10.744,10 11,10 C11.256,10 11.512,9.902 11.707,9.707" id="Arrow"></path>
</g>
<path d="M81.393,21.091 C81.744,21.091 82.173,21.052 82.368,21.013 L82.368,20.09 C82.186,20.142 81.913,20.181 81.666,20.181 C80.834,20.181 80.6,19.817 80.6,19.089 L80.6,15.059 L82.381,15.059 L82.381,14.136 L80.6,14.136 L80.6,11.692 L79.482,11.692 L79.482,14.136 L78.286,14.136 L78.286,15.059 L79.482,15.059 L79.482,19.336 C79.482,20.532 79.95,21.091 81.393,21.091 Z M86.697,21.143 C88.374,21.143 89.882,19.921 89.882,17.568 C89.882,15.202 88.374,13.993 86.697,13.993 C85.007,13.993 83.499,15.202 83.499,17.568 C83.499,19.921 85.02,21.143 86.697,21.143 Z M86.697,20.194 C85.306,20.194 84.63,19.024 84.63,17.568 C84.63,16.021 85.384,14.955 86.697,14.955 C88.062,14.955 88.751,16.138 88.751,17.568 C88.751,19.141 87.997,20.194 86.697,20.194 Z M94.705,21 L95.849,21 L95.849,16.463 L100.802,16.463 L100.802,21 L101.946,21 L101.946,11.38 L100.802,11.38 L100.802,15.41 L95.849,15.41 L95.849,11.38 L94.705,11.38 L94.705,21 Z M106.834,21.143 C108.121,21.143 108.992,20.597 109.629,19.687 L108.979,19.115 C108.459,19.83 107.9,20.233 106.912,20.233 C105.781,20.233 104.884,19.401 104.845,17.854 L109.694,17.854 L109.694,17.62 C109.694,15.137 108.459,13.993 106.834,13.993 C105.391,13.993 103.727,15.072 103.727,17.568 C103.727,19.96 105.209,21.143 106.834,21.143 Z M104.871,16.983 C105.027,15.566 105.898,14.929 106.821,14.929 C107.952,14.929 108.537,15.761 108.628,16.983 L104.871,16.983 Z M111.293,21 L112.411,21 L112.411,16.567 C112.918,15.592 113.737,15.02 114.829,15.02 C114.868,15.02 115.115,15.02 115.154,15.033 L115.232,13.993 L115.089,13.993 C113.75,13.993 112.944,14.617 112.437,15.41 L112.411,15.41 L112.411,14.136 L111.293,14.136 L111.293,21 Z M119.301,21.143 C120.978,21.143 122.486,19.921 122.486,17.568 C122.486,15.202 120.978,13.993 119.301,13.993 C117.611,13.993 116.103,15.202 116.103,17.568 C116.103,19.921 117.624,21.143 119.301,21.143 Z M119.301,20.194 C117.91,20.194 117.234,19.024 117.234,17.568 C117.234,16.021 117.988,14.955 119.301,14.955 C120.666,14.955 121.355,16.138 121.355,17.568 C121.355,19.141 120.601,20.194 119.301,20.194 Z M124.072,21 L125.19,21 L125.19,18.894 L126.555,17.425 L128.583,21 L129.779,21 L127.283,16.593 L129.532,14.136 L128.258,14.136 L125.19,17.568 L125.19,11.38 L124.072,11.38 L124.072,21 Z M133.055,21.13 C134.173,21.13 135.031,20.558 135.629,19.973 L135.629,21 L136.76,21 L136.76,14.136 L135.629,14.136 L135.629,19.089 C134.914,19.765 134.238,20.194 133.406,20.194 C132.535,20.194 132.145,19.765 132.145,18.855 L132.145,14.136 L131.027,14.136 L131.027,19.089 C131.027,20.389 131.742,21.13 133.055,21.13 L133.055,21.13 Z" id="to-Heroku" fill="#B7A7D5" sketch:type="MSShapeGroup"></path>
<path d="M34.183,21 L36.718,21 C39.773,21 41.567,19.427 41.567,16.164 C41.567,12.94 39.812,11.38 36.718,11.38 L34.183,11.38 L34.183,21 Z M35.327,19.973 L35.327,12.433 L36.835,12.433 C39.175,12.433 40.423,13.577 40.423,16.164 C40.423,18.842 39.188,19.973 36.861,19.973 L35.327,19.973 Z M46,21.143 C47.287,21.143 48.158,20.597 48.795,19.687 L48.145,19.115 C47.625,19.83 47.066,20.233 46.078,20.233 C44.947,20.233 44.05,19.401 44.011,17.854 L48.86,17.854 L48.86,17.62 C48.86,15.137 47.625,13.993 46,13.993 C44.557,13.993 42.893,15.072 42.893,17.568 C42.893,19.96 44.375,21.143 46,21.143 Z M44.037,16.983 C44.193,15.566 45.064,14.929 45.987,14.929 C47.118,14.929 47.703,15.761 47.794,16.983 L44.037,16.983 Z M50.459,23.6 L51.577,23.6 L51.577,20.116 C52.162,20.727 52.877,21.104 53.722,21.104 C55.399,21.104 56.634,19.947 56.634,17.555 C56.634,15.163 55.412,13.993 53.839,13.993 C52.812,13.993 52.097,14.513 51.577,15.085 L51.577,14.136 L50.459,14.136 L50.459,23.6 Z M53.566,20.194 C52.838,20.194 52.175,19.83 51.577,19.154 L51.577,16.008 C52.149,15.384 52.786,14.955 53.579,14.955 C54.684,14.955 55.516,15.813 55.516,17.568 C55.516,19.388 54.762,20.194 53.566,20.194 Z M58.324,21 L59.442,21 L59.442,11.38 L58.324,11.38 L58.324,21 Z M64.304,21.143 C65.981,21.143 67.489,19.921 67.489,17.568 C67.489,15.202 65.981,13.993 64.304,13.993 C62.614,13.993 61.106,15.202 61.106,17.568 C61.106,19.921 62.627,21.143 64.304,21.143 Z M64.304,20.194 C62.913,20.194 62.237,19.024 62.237,17.568 C62.237,16.021 62.991,14.955 64.304,14.955 C65.669,14.955 66.358,16.138 66.358,17.568 C66.358,19.141 65.604,20.194 64.304,20.194 Z M69.465,23.639 C70.804,23.639 71.337,22.989 71.805,21.78 L74.743,14.136 L73.612,14.136 L71.597,19.687 L71.571,19.687 L69.556,14.136 L68.373,14.136 L71.025,21.039 L70.765,21.715 C70.492,22.391 70.154,22.69 69.452,22.69 C68.971,22.69 68.633,22.625 68.438,22.573 L68.178,23.47 C68.477,23.561 68.854,23.639 69.465,23.639 L69.465,23.639 Z" id="Deploy" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 332 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 714 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 562 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 716 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Some files were not shown because too many files have changed in this diff Show More