mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 15:19:01 +02:00
chore(docs): collapse unnecessary whitespace
This commit is contained in:
parent
bbf6ae6aab
commit
c892c95aae
@ -9,9 +9,9 @@
|
||||
"pOsGYCXsbNQG"
|
||||
],
|
||||
"title": "User Guide",
|
||||
"notePosition": 90,
|
||||
"notePosition": 110,
|
||||
"prefix": null,
|
||||
"isExpanded": true,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
@ -3299,7 +3299,7 @@
|
||||
"title": "Note Types",
|
||||
"notePosition": 70,
|
||||
"prefix": null,
|
||||
"isExpanded": true,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
@ -3326,7 +3326,7 @@
|
||||
"title": "Text",
|
||||
"notePosition": 10,
|
||||
"prefix": null,
|
||||
"isExpanded": true,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/markdown",
|
||||
"attributes": [
|
||||
|
@ -25,16 +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" 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>
|
||||
|
||||
<h2>Demo</h2>
|
||||
<p>
|
||||
<img src="Day Notes_image.png" alt="" />
|
||||
<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"
|
||||
@ -43,9 +41,7 @@
|
||||
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>
|
||||
|
||||
<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
|
||||
@ -59,9 +55,7 @@
|
||||
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>
|
||||
|
||||
<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>
|
||||
@ -77,9 +71,7 @@
|
||||
<li><code>{ordinal}</code> is replaced with the ordinal date (e.g. 1st, 2nd,
|
||||
3rd) etc.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Month pattern</h2>
|
||||
|
||||
<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>
|
||||
@ -94,9 +86,7 @@
|
||||
</ul>
|
||||
<p>The default is <code>{monthNumberPadded} - {month}</code>
|
||||
</p>
|
||||
|
||||
<h2>Implementation</h2>
|
||||
|
||||
<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
|
||||
|
@ -16,11 +16,9 @@
|
||||
<p>Task Manager is a <a href="../Attributes/Promoted%20Attributes.html">promoted attributes</a> and
|
||||
<a
|
||||
href="../../Note%20Types/Code/Scripts.html">scripts</a>showcase present in the <a href="../Database.html">demo notes</a>.</p>
|
||||
|
||||
<h2>Demo</h2>
|
||||
|
||||
<h2>Demo</h2>
|
||||
<p>
|
||||
<img src="../../Attachments/task-manager.png" alt="" />
|
||||
<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
|
||||
@ -30,16 +28,12 @@
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<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="../../Note%20Types/Code/Events.html">event</a> handler which is
|
||||
@ -47,12 +41,9 @@
|
||||
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>
|
||||
|
||||
<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({
|
||||
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',
|
||||
@ -71,12 +62,10 @@
|
||||
}
|
||||
});</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="../../Note%20Types/Code.html">code note</a> which
|
||||
defines extra CSS classes:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">span.fancytree-node.todo .fancytree-title {
|
||||
defines extra CSS classes:</p><pre><code class="language-text-x-trilium-auto">span.fancytree-node.todo .fancytree-title {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
|
@ -14,16 +14,14 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>
|
||||
<img src="Weight Tracker_image.png" alt="" />
|
||||
<img src="Weight Tracker_image.png" alt="">
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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="../../Note%20Types/Code/Scripts.html">script</a> can
|
||||
@ -37,12 +35,9 @@
|
||||
<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>
|
||||
|
||||
<h3>Code</h3>
|
||||
<p>Here's the content of the script which is placed in a <a href="../../Note%20Types/Code.html">code note</a> of
|
||||
type <code>JS Frontend</code>:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">async function getChartData() {
|
||||
type <code>JS Frontend</code>:</p><pre><code class="language-text-x-trilium-auto">async function getChartData() {
|
||||
const days = await api.runOnBackend(async () => {
|
||||
const notes = api.getNotesWithLabel('weight');
|
||||
const days = [];
|
||||
@ -88,7 +83,6 @@ new chartjs.Chart(ctx, {
|
||||
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>
|
||||
|
@ -22,11 +22,9 @@
|
||||
<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" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Labels</h2>
|
||||
|
||||
<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,
|
||||
@ -39,9 +37,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<p>Labels are also searchable, enhancing note retrieval.</p>
|
||||
|
||||
<h3>Common Labels for Advanced Configuration</h3>
|
||||
|
||||
<h3>Common Labels for Advanced Configuration</h3>
|
||||
<ul>
|
||||
<li><code>**disableVersioning**</code>: Disables automatic versioning, ideal
|
||||
for large, unimportant notes like script libraries</li>
|
||||
@ -111,41 +107,29 @@
|
||||
note's editor</li>
|
||||
<li><code>**viewType**</code>: Sets the view of child notes (grid or list)</li>
|
||||
</ul>
|
||||
|
||||
<h2>Relations</h2>
|
||||
|
||||
<h2>Relations</h2>
|
||||
<p>Relations define connections between notes, similar to links.</p>
|
||||
|
||||
<h3>Uses</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
@ -14,27 +14,20 @@
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>How to Use</h3>
|
||||
<ul>
|
||||
<li><strong>Syntax:</strong> <code>#child:attributeName</code>
|
||||
</li>
|
||||
@ -42,16 +35,12 @@
|
||||
as <code>#child:child:attributeName</code>, where each child down the hierarchy
|
||||
receives the appropriate attribute.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Example</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<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
|
||||
|
@ -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" 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
|
||||
@ -26,15 +26,13 @@
|
||||
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>
|
||||
|
||||
<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="" />
|
||||
<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>
|
||||
@ -43,9 +41,7 @@
|
||||
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>
|
||||
|
||||
<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>.
|
||||
|
@ -28,9 +28,7 @@
|
||||
<li><strong>Child Note Duplication</strong>: All child notes of the template
|
||||
are deep-duplicated to the instance note.</li>
|
||||
</ol>
|
||||
|
||||
<h2>Example</h2>
|
||||
|
||||
<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,
|
||||
@ -41,18 +39,15 @@
|
||||
etc.</li>
|
||||
</ul>
|
||||
<p>
|
||||
<img src="../../Attachments/template.png" alt="Template Example" />
|
||||
<img src="../../Attachments/template.png" alt="Template Example">
|
||||
</p>
|
||||
|
||||
<h2>Instance Note</h2>
|
||||
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
@ -61,9 +56,7 @@
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
@ -14,15 +14,12 @@
|
||||
|
||||
<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>
|
||||
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>
|
||||
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>
|
||||
|
@ -26,12 +26,10 @@
|
||||
</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]
|
||||
<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
|
||||
<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>
|
||||
|
@ -17,13 +17,10 @@
|
||||
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>
|
||||
|
||||
<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="../Note%20Types/Code.html">code note</a> containing:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">const {req, res} = api;
|
||||
<p>We'll start with creating a JavaScript backend <a href="../Note%20Types/Code.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' && secret === 'secret-password') {
|
||||
@ -47,11 +44,8 @@ else {
|
||||
<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
|
||||
<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
|
||||
|
||||
{
|
||||
@ -75,32 +69,23 @@ Content-Type: application/json
|
||||
<p>Once we pass these checks we will just create the desired note using
|
||||
<a
|
||||
href="../Note%20Types/Code/Script%20API.html">Script API</a>.</p>
|
||||
|
||||
<h2>Custom resource provider</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
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>
|
||||
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>
|
||||
|
@ -17,9 +17,7 @@
|
||||
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>
|
||||
|
||||
<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 & drop.</li>
|
||||
<li>Select the file and go to the <em>Owned Attributes</em> section.</li>
|
||||
@ -40,13 +38,10 @@
|
||||
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>
|
||||
|
||||
<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 {
|
||||
<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");
|
||||
}
|
||||
|
@ -17,9 +17,7 @@
|
||||
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>
|
||||
|
||||
<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>
|
||||
@ -34,9 +32,7 @@
|
||||
<li><a href="../Basic%20Concepts/Themes.html">Custom CSS Themes</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Restoring Demo Notes</h3>
|
||||
|
||||
<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
|
||||
@ -52,18 +48,14 @@
|
||||
<li>Click "Import into note"</li>
|
||||
<li>Select the .zip archive to import it</li>
|
||||
</ul>
|
||||
|
||||
<h2>Manually Modifying the Database</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<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
|
||||
|
@ -18,21 +18,15 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -47,13 +41,10 @@
|
||||
<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" 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>
|
||||
<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>
|
||||
|
@ -17,11 +17,9 @@
|
||||
<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" alt="">
|
||||
</p>
|
||||
|
||||
<h3>Interaction</h3>
|
||||
|
||||
<h3>Interaction</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Hovering the mouse over one of the tables listed at the top of the document
|
||||
@ -32,23 +30,20 @@
|
||||
</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" 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="" />
|
||||
<img src="1_SQL Console_image.png" alt="">
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Saved SQL console</h3>
|
||||
|
||||
<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>
|
||||
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>
|
||||
|
@ -38,9 +38,7 @@
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
@ -19,16 +19,12 @@
|
||||
<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>
|
||||
|
||||
<h2>Authentication</h2>
|
||||
<p>All operations have to be authenticated using a token. You can get this
|
||||
token either from Options -> 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
|
||||
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
|
||||
<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
|
||||
|
@ -16,23 +16,17 @@
|
||||
<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>
|
||||
|
||||
<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" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Tree Map</h2>
|
||||
|
||||
<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" alt="">
|
||||
</p>
|
||||
|
||||
<h2>See also</h2>
|
||||
|
||||
<h2>See also</h2>
|
||||
<p><a href="Relation%20Map.html">Relation map</a> is a similar concept, with
|
||||
some differences:</p>
|
||||
<ul>
|
||||
|
@ -16,17 +16,15 @@
|
||||
<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>
|
||||
|
||||
<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="" />
|
||||
<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="" />
|
||||
<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
|
||||
@ -37,17 +35,15 @@
|
||||
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>
|
||||
|
||||
<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="" />
|
||||
<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="" />
|
||||
<img src="../Attachments/relation-map-family-demo.gif" alt="">
|
||||
</p>
|
||||
<p>There are several steps here:</p>
|
||||
<ul>
|
||||
@ -82,17 +78,13 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>See also</h2>
|
||||
<ul>
|
||||
<li><a href="Note%20Map.html">Note map</a> is a similar concept</li>
|
||||
</ul>
|
||||
|
@ -16,21 +16,17 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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" />
|
||||
<img src="../Attachments/share-single-note.png" alt="Share Note">
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
@ -38,47 +34,33 @@
|
||||
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"
|
||||
/>
|
||||
<img src="../Attachments/share-single-note-web.png" alt="Shared Note Example">
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h2>Sharing a Note Subtree</h2>
|
||||
|
||||
<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"
|
||||
/>
|
||||
<img src="../Attachments/share-multiple-notes-web.png" alt="Shared Subtree Example">
|
||||
</p>
|
||||
|
||||
<h2>Viewing All Shared Notes</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -91,22 +73,18 @@
|
||||
<a
|
||||
href="../Basic%20Concepts/Themes.html">default stylesheet</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Adding JavaScript</h3>
|
||||
|
||||
<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();
|
||||
<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>).
|
||||
@ -117,32 +95,24 @@ for (const attr of parentNote.attributes) {
|
||||
<li>Using slashes (<code>/</code>) within aliases to create subpaths is not
|
||||
supported.</li>
|
||||
</ol>
|
||||
|
||||
<h3>Viewing and Managing Shared Notes</h3>
|
||||
|
||||
<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" />
|
||||
<img src="../Attachments/shared-list.png" alt="Shared Notes List">
|
||||
</p>
|
||||
|
||||
<h3>Setting a Custom Favicon</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -152,9 +122,7 @@ for (const attr of parentNote.attributes) {
|
||||
<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>
|
||||
|
||||
<h2>Limitations</h2>
|
||||
<p>While the sharing feature is powerful, it has some limitations:</p>
|
||||
<ul>
|
||||
<li><strong>No Relation Map Support</strong>
|
||||
|
@ -26,27 +26,23 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="1_Serving directly the conte.png" alt="" />
|
||||
<img src="1_Serving directly the conte.png" alt="">
|
||||
</td>
|
||||
<td>
|
||||
<img src="Serving directly the conte.png" alt="" />
|
||||
<img src="Serving directly the conte.png" alt="">
|
||||
</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>
|
||||
|
||||
<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="" />
|
||||
<img src="Serving directly the conte.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -15,23 +15,17 @@
|
||||
<div class="ck-content">
|
||||
<p>Trilium can import ENEX files which are used by Evernote for backup/export.
|
||||
One ENEX file represents content (notes and resources) of one notebook.</p>
|
||||
|
||||
<h2>Export ENEX from Evernote</h2>
|
||||
|
||||
<h2>Export ENEX from Evernote</h2>
|
||||
<p>To export ENEX file, you need to have a <em>legacy</em> desktop version
|
||||
of Evernote (i.e. not web/mobile). Right click on notebook and select export
|
||||
and follow the wizard.</p>
|
||||
|
||||
<h2>Import ENEX in Trilium</h2>
|
||||
|
||||
<h2>Import ENEX in Trilium</h2>
|
||||
<p>Once you have ENEX file, you can import it to Trilium. Right click on
|
||||
some note (to which you want to import the file), click on "Import" and
|
||||
select the ENEX file.</p>
|
||||
<p>After importing the ENEX file, go over the imported notes and resources
|
||||
to be sure the import went well, and you didn't lose any data.</p>
|
||||
|
||||
<h2>Limitations</h2>
|
||||
|
||||
<h2>Limitations</h2>
|
||||
<p>All resources (except for images) are created as note's attachments.</p>
|
||||
<p>HTML inside ENEX files is not exactly valid so some formatting maybe broken
|
||||
or lost. You can report major problems into <a href="https://github.com/TriliumNext/Notes/issues">Trilium issue tracker</a>.
|
||||
|
@ -16,20 +16,14 @@
|
||||
<p>Trilium Notes supports importing Markdown restricted to the <a href="https://spec.commonmark.org/current/">CommonMark specification</a> (where
|
||||
<a
|
||||
href="https://github.com/TriliumNext/Notes/issues/2026">tables are not supported</a>)</p>
|
||||
|
||||
<h2>Import</h2>
|
||||
|
||||
|
||||
<h3>Clipboard import</h3>
|
||||
|
||||
<h2>Import</h2>
|
||||
<h3>Clipboard import</h3>
|
||||
<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" alt="">
|
||||
</p>
|
||||
|
||||
<h3>File import</h3>
|
||||
|
||||
<h3>File import</h3>
|
||||
<p>You can also import Markdown files from files:</p>
|
||||
<ul>
|
||||
<li>single markdown file (with .md extension)</li>
|
||||
@ -44,30 +38,22 @@
|
||||
</ul>
|
||||
<p>[[gifs/markdown-file-import.gif]]</p>
|
||||
<p>
|
||||
<img src="../../Attachments/markdown-file-import.gif" alt="" />
|
||||
<img src="../../Attachments/markdown-file-import.gif" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Export</h2>
|
||||
|
||||
|
||||
<h3>Subtree export</h3>
|
||||
|
||||
<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" alt="">
|
||||
</p>
|
||||
|
||||
<h3>Single note export</h3>
|
||||
|
||||
<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" alt="">
|
||||
</p>
|
||||
|
||||
<h3>Exporting protected notes</h3>
|
||||
|
||||
<h3>Exporting protected notes</h3>
|
||||
<p>If you want to export protected notes, enter a protected session first!
|
||||
This will export the notes in an unencrypted form, so if you reimport into
|
||||
Trilium, make sure to re-protect these notes.</p>
|
||||
|
@ -15,9 +15,7 @@
|
||||
<div class="ck-content">
|
||||
<p><strong>This page describes a method to migrate via EverNote Legacy, but this app is no longer available/working.</strong>
|
||||
</p>
|
||||
|
||||
<h2>Prep Onenote notes for best compatibility</h2>
|
||||
|
||||
<h2>Prep Onenote notes for best compatibility</h2>
|
||||
<ul>
|
||||
<li>Remove Onenote Tags and replace with Emoji if possible (Onenote Tags will
|
||||
get imported into trilium as an image which clutters the Trilium tree somewhat)</li>
|
||||
@ -31,12 +29,8 @@
|
||||
list (Sometimes the numbered list will start at 1 again in Trilum if there
|
||||
is an extra space in the list in OneNote).</li>
|
||||
</ul>
|
||||
|
||||
<h2>Migration Procedure</h2>
|
||||
|
||||
|
||||
<h3>Import into Evernote from OneNote:</h3>
|
||||
|
||||
<h2>Migration Procedure</h2>
|
||||
<h3>Import into Evernote from OneNote:</h3>
|
||||
<ul>
|
||||
<li>Install <a href="https://web.archive.org/web/20230327110646/https://help.evernote.com/hc/en-us/articles/360052560314">Evernote Legacy</a>.
|
||||
Current versions of Evernote do not have this functionality. (Requires
|
||||
@ -48,16 +42,12 @@
|
||||
<p>If exporting all sections at a time, they will not be grouped in folders
|
||||
- they will all be added to a single folder, but the order will be kept,
|
||||
so you can re-group into folders after importing to Trilium</p>
|
||||
|
||||
<h3>Export from Evernote</h3>
|
||||
|
||||
<h3>Export from Evernote</h3>
|
||||
<ul>
|
||||
<li>Right click on the created notebook in Evernote and choose "Export Notes…"</li>
|
||||
<li>Use the default export format of .enex</li>
|
||||
</ul>
|
||||
|
||||
<h3>Cleanup enex file (optional)</h3>
|
||||
|
||||
<h3>Cleanup enex file (optional)</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<p>If the Onenote header (that is at the top of each Onenote page) is not
|
||||
@ -67,9 +57,7 @@
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Import into Trilium</h3>
|
||||
|
||||
<h3>Import into Trilium</h3>
|
||||
<ul>
|
||||
<li>In Trilium, right click on the root node and choose Import (all default
|
||||
options should be fine).</li>
|
||||
@ -77,9 +65,7 @@
|
||||
<li>Be patient. Large .enex files may take a few minutes to process</li>
|
||||
<li>Repeat import for each .enex file</li>
|
||||
</ul>
|
||||
|
||||
<h2>Other importing notes:</h2>
|
||||
|
||||
<h2>Other importing notes:</h2>
|
||||
<ul>
|
||||
<li>Centered text in Onenote will be left-justified after importing into Trilium</li>
|
||||
<li>Internal onenote links will obviously be broken, but the link still exists
|
||||
|
@ -23,7 +23,7 @@
|
||||
<h2>Note navigation</h2>
|
||||
<ul>
|
||||
<li><kbd><span>↑</span></kbd>, <kbd><span>↓</span></kbd> - go up/down in the
|
||||
list of notes, <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd><span>↑</span></kbd> and <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd><span>↓</span></kbd> work
|
||||
list of notes, <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd><span>↑</span></kbd> and <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd><span>↓</span></kbd> work
|
||||
also from editor</li>
|
||||
<li><kbd><span>←</span></kbd>, <kbd><span>→</span></kbd> - collapse/expand node</li>
|
||||
<li><kbd>Alt</kbd> + <kbd><span>←</span></kbd>, <kbd>Alt</kbd> + <kbd><span>→</span></kbd> -
|
||||
|
@ -15,15 +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" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Bookmark folder</h2>
|
||||
|
||||
<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" alt="">
|
||||
</p>
|
||||
<p>To do this, you need to add a <code>#bookmarkFolder</code> label to the
|
||||
note.</p>
|
||||
|
@ -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" alt="">
|
||||
</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
|
||||
|
@ -136,7 +136,6 @@
|
||||
\#hash
|
||||
#myLabel = 'Say "Hello World"'</code></pre>
|
||||
<h3>Escaping Special Characters</h3>
|
||||
<p> </p>
|
||||
<p>Special characters can be enclosed in quotes or escaped with a backslash
|
||||
to be used in full-text search:</p><pre><code class="language-text-x-trilium-auto">"note.txt"
|
||||
\#hash
|
||||
|
@ -15,13 +15,9 @@
|
||||
<div class="ck-content">
|
||||
<p>This page explains the basic concepts related to the tree structure of
|
||||
notes in TriliumNext.</p>
|
||||
|
||||
<h2>Note</h2>
|
||||
|
||||
<h2>Note</h2>
|
||||
<p>A note is the central entity in TriliumNext. For more details, see <a href="../Note.html">Note</a>.</p>
|
||||
|
||||
<h2>Branch</h2>
|
||||
|
||||
<h2>Branch</h2>
|
||||
<p>A branch describes the placement of a note within the note tree. Essentially,
|
||||
it is a tuple of <code>parentNoteId</code> and <code>noteId</code>, indicating
|
||||
that the given note is placed as a child under the specified parent note.</p>
|
||||
@ -29,9 +25,7 @@
|
||||
multiple locations within the tree. This concept is referred to as "
|
||||
<a
|
||||
href="../Note/Cloning%20Notes.html">cloning</a>."</p>
|
||||
|
||||
<h2>Prefix</h2>
|
||||
|
||||
<h2>Prefix</h2>
|
||||
<p>A prefix is a branch-specific title modifier for a note. If you place
|
||||
your note in two different locations within the tree and want to alter
|
||||
the title slightly in one of those placements, you can use a prefix.</p>
|
||||
@ -41,9 +35,7 @@
|
||||
note is protected. This can be useful if you want part of the title to
|
||||
remain visible in the tree for easier navigation, even when the note is
|
||||
protected.</p>
|
||||
|
||||
<h2>Subtree</h2>
|
||||
|
||||
<h2>Subtree</h2>
|
||||
<p>A subtree consists of a particular note (the subtree root) and all its
|
||||
children and descendants. Some operations, such as exporting, work on entire
|
||||
subtrees.</p>
|
||||
|
@ -27,19 +27,17 @@
|
||||
<li>
|
||||
<p>easy entering of workspace: </p>
|
||||
<p>
|
||||
<img src="1_Workspace_image.png" alt="" />
|
||||
<img src="1_Workspace_image.png" alt="">
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>visual identification of workspace in tabs:
|
||||
<br />
|
||||
<img src="Workspace_image.png" alt="" />
|
||||
<br>
|
||||
<img src="Workspace_image.png" alt="">
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>How to use workspaces</h3>
|
||||
|
||||
<h3>How to use workspaces</h3>
|
||||
<p>Let's say you have identified the workspaces and their subtrees. Define
|
||||
on the root of this subtree following labels:</p>
|
||||
<ul>
|
||||
|
@ -15,9 +15,7 @@
|
||||
<div class="ck-content">
|
||||
<p>Note is a central entity in Trilium. Main attributes of note are title
|
||||
and content.</p>
|
||||
|
||||
<h3>Note types</h3>
|
||||
|
||||
<h3>Note types</h3>
|
||||
<ul>
|
||||
<li><a href="../Note%20Types/Text.html">text note</a> - this is default note
|
||||
type which allows you to put rich text, images etc.</li>
|
||||
@ -44,23 +42,17 @@
|
||||
</ul>
|
||||
<p>In Trilium there's no specific "folder" note type. Any note can have children
|
||||
and thus be a folder.</p>
|
||||
|
||||
<h3>Root note</h3>
|
||||
|
||||
<h3>Root note</h3>
|
||||
<p>There's one special note called "root note" which is root of the note
|
||||
tree. All other notes are placed below it in the structure.</p>
|
||||
|
||||
<h3>Tree structure</h3>
|
||||
|
||||
<h3>Tree structure</h3>
|
||||
<p>Importantly, note itself doesn't carry information on its placement in
|
||||
note tree. See <a href="Note/Cloning%20Notes.html">cloning</a> for details.</p>
|
||||
<p>Tree structure of notes can resemble file system - but compared to that
|
||||
notes in Trilium can act as both file and directory - meaning that note
|
||||
can both have its own content and have children. "Leaf note" is a note
|
||||
which doesn't have any children.</p>
|
||||
|
||||
<h3>Deleting / undeleting notes</h3>
|
||||
|
||||
<h3>Deleting / undeleting notes</h3>
|
||||
<p>When you delete a note in Trilium, it is actually only marked for deletion
|
||||
(soft-delete) - the actual content, title, attributes etc. are not deleted,
|
||||
only hidden.</p>
|
||||
@ -79,9 +71,7 @@
|
||||
<p>After the 7 days (configurable) the notes will be "erased" - their title,
|
||||
content, revisions and attributes will be erased, and it will not be possible
|
||||
anymore to recover them (unless you restore <a href="../Installation%20%26%20Setup/Backup.html">backup</a>).</p>
|
||||
|
||||
<h2>See also</h2>
|
||||
|
||||
<h2>See also</h2>
|
||||
<ul>
|
||||
<li><a href="Note/Read-Only%20Notes.html">Read-only note</a>
|
||||
</li>
|
||||
|
@ -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" alt="">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -14,7 +14,7 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>
|
||||
<img src="Export as PDF_image.png" alt="" />
|
||||
<img src="Export as PDF_image.png" alt="">
|
||||
</p>
|
||||
<p>Screenshot of the note contextual menu indicating the “Export as PDF”
|
||||
option.</p>
|
||||
@ -22,8 +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" alt="">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>
|
||||
@ -32,24 +31,18 @@
|
||||
<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" alt="">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>
|
||||
|
||||
<h2>Landscape mode</h2>
|
||||
<p>When exporting to PDF, there are no customizable settings such as page
|
||||
orientation, size, etc. However, it is possible to specify a given note
|
||||
to be printed as a PDF in landscape mode by adding the <code>#printLandscape</code> attribute
|
||||
to it (see <a href="#root/9QRytp0ZYFIf/PnO38wN0ffOA">[missing note]</a>).</p>
|
||||
|
||||
<h2>Page size</h2>
|
||||
|
||||
<h2>Page size</h2>
|
||||
<p>By default, the resulting PDF will be in Letter format. It is possible
|
||||
to adjust it to another page size via the <code>#printPageSize</code> attribute,
|
||||
with one of the following values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.</p>
|
||||
|
||||
<h2>Keyboard shortcut</h2>
|
||||
|
||||
<h2>Keyboard shortcut</h2>
|
||||
<p>It's possible to trigger the export to PDF from the keyboard by going
|
||||
to <em>Keyboard shortcuts</em> and assigning a key combination for the <code>exportAsPdf</code> action.</p>
|
||||
</div>
|
||||
|
@ -20,12 +20,10 @@
|
||||
the css class names is not necessary. While editing a note, click on the
|
||||
icon next to the title to bring up a chooser gallery:</p>
|
||||
<p>
|
||||
<img src="../../Attachments/note-icon-change.png" alt="change note icon"
|
||||
/>
|
||||
<img src="../../Attachments/note-icon-change.png" alt="change note icon">
|
||||
</p>
|
||||
<p>
|
||||
<img src="../../Attachments/note-icon-gallery.png" alt="note icon gallery"
|
||||
/>
|
||||
<img src="../../Attachments/note-icon-gallery.png" alt="note icon gallery">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -15,18 +15,14 @@
|
||||
<div class="ck-content">
|
||||
<p>Trilium supports seamless versioning of notes by storing snapshots ("revisions")
|
||||
of notes at regular intervals.</p>
|
||||
|
||||
<h2>Note Revisions Snapshot Interval</h2>
|
||||
|
||||
<h2>Note Revisions Snapshot Interval</h2>
|
||||
<p>Time interval of taking note snapshot is configurable in the Options ->
|
||||
Other dialog. This provides a tradeoff between more revisions and more
|
||||
data to store.</p>
|
||||
<p>To turn off note versioning for a particular note (or subtree), add <code>disableVersioning</code>
|
||||
<a
|
||||
href="../../Advanced%20Usage/Attributes.html">label</a>to the note.</p>
|
||||
|
||||
<h2>Note Revision Snapshots Limit</h2>
|
||||
|
||||
<h2>Note Revision Snapshots Limit</h2>
|
||||
<p>The limit on the number of note snapshots can be configured in the Options
|
||||
-> Other dialog. The note revision snapshot number limit refers to the
|
||||
maximum number of revisions that can be saved for each note. Where -1 means
|
||||
@ -39,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" alt="">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -41,18 +41,13 @@
|
||||
cannot read or edit protected notes, they can still delete or move them
|
||||
outside of the protected session.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Using Protected Notes</h2>
|
||||
|
||||
<h2>Using Protected Notes</h2>
|
||||
<p>By default, notes are unprotected. To protect a note, simply click on
|
||||
the shield icon next to the note's title, as shown here:</p>
|
||||
<p>
|
||||
<img src="../../Attachments/protecting-note.gif" alt="example animation of unlocking protected notes"
|
||||
/>
|
||||
<img src="../../Attachments/protecting-note.gif" alt="example animation of unlocking protected notes">
|
||||
</p>
|
||||
|
||||
<h2>What is Encrypted?</h2>
|
||||
|
||||
<h2>What is Encrypted?</h2>
|
||||
<p>Trilium encrypts the data within protected notes but not their metadata.
|
||||
Specifically:</p>
|
||||
<p><strong>Encrypted:</strong>
|
||||
@ -71,9 +66,7 @@
|
||||
<li><a href="../../Advanced%20Usage/Attributes.html">Attributes</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Encryption Details</h2>
|
||||
|
||||
<h2>Encryption Details</h2>
|
||||
<p>The following steps outline how encryption and decryption work in Trilium:</p>
|
||||
<ol>
|
||||
<li>The user enters a password.</li>
|
||||
@ -105,9 +98,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h2>Sharing Protected Notes</h2>
|
||||
|
||||
<h2>Sharing Protected Notes</h2>
|
||||
<p>Protected notes cannot be shared in the same way as regular notes. Their
|
||||
encryption ensures that only authorized users with the correct password
|
||||
can access them.</p>
|
||||
|
@ -17,14 +17,10 @@
|
||||
in Trilium can be set to read-only. When a note is in read-only mode, it
|
||||
is presented to the user in a non-editable view, with the option to switch
|
||||
to editing mode if needed.</p>
|
||||
|
||||
<h2>Setting Read-Only Mode with a Label</h2>
|
||||
|
||||
<h2>Setting Read-Only Mode with a Label</h2>
|
||||
<p>To set a note as read-only, add the <code>readOnly</code> <a href="../../Advanced%20Usage/Attributes.html">label</a> to
|
||||
the note.</p>
|
||||
|
||||
<h2>Automatic Read-Only Mode</h2>
|
||||
|
||||
<h2>Automatic Read-Only Mode</h2>
|
||||
<p>For optimization purposes, Trilium will automatically set very large notes
|
||||
to read-only. Displaying such lengthy notes in editing mode can slow down
|
||||
performance, especially when editing is unnecessary.</p>
|
||||
|
@ -14,14 +14,11 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Sorting Notes</h2>
|
||||
|
||||
<p>You can sort notes by right-clicking the parent note in the note tree
|
||||
and selecting Advanced -> Sort notes by ... This will sort existing
|
||||
notes, but will not automatically sort future notes added to this parent
|
||||
note</p>
|
||||
|
||||
<h2>Automatic/Permanent Sorting</h2>
|
||||
|
||||
<h2>Automatic/Permanent Sorting</h2>
|
||||
<p>Child notes can be automatically sorted by attaching specific <a href="../../Advanced%20Usage/Attributes.html">labels</a> to
|
||||
the parent note:</p>
|
||||
<ul>
|
||||
|
@ -14,9 +14,7 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>These are user-created themes which were made publicly available:</p>
|
||||
|
||||
<h2>Legacy Themes</h2>
|
||||
|
||||
<h2>Legacy Themes</h2>
|
||||
<p>These themes may or may not be compatible with the latest versions of
|
||||
TriliumNext and are based on the original/legacy theme.</p>
|
||||
<table>
|
||||
|
@ -16,11 +16,9 @@
|
||||
<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" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Accessing the global menu</h2>
|
||||
|
||||
<h2>Accessing the global menu</h2>
|
||||
<p>See <a href="Vertical%20and%20horizontal%20layout.html">Vertical and horizontal layout</a> since
|
||||
the position of the global menu is changed based on which layout has been
|
||||
selected.</p>
|
||||
|
@ -14,14 +14,11 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Position of the Launch bar</h2>
|
||||
|
||||
<p>Depending on the layout selected, the launcher bar will either be on the
|
||||
left side of the screen with buttons displayed vertically or at the top
|
||||
of the screen. See <a href="Vertical%20and%20horizontal%20layout.html">Vertical and horizontal layout</a> for
|
||||
more information.</p>
|
||||
|
||||
<h2>Terminology</h2>
|
||||
|
||||
<h2>Terminology</h2>
|
||||
<ul>
|
||||
<li><strong>Launcher</strong>: a button that can be (or is) displayed on the
|
||||
launch bar.</li>
|
||||
@ -30,9 +27,7 @@
|
||||
<li><strong>Visible Launcher</strong>: a launcher that is currently displayed
|
||||
on the launch bar.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Configuring the Launch bar</h2>
|
||||
|
||||
<h2>Configuring the Launch bar</h2>
|
||||
<p>There are two ways to configure the launch bar:</p>
|
||||
<ul>
|
||||
<li>Right click in the empty space between launchers on the launch bar and
|
||||
@ -43,14 +38,12 @@
|
||||
<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" alt="">
|
||||
</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
|
||||
show the ones that are currently displayed.</p>
|
||||
|
||||
<h3>Adding/removing and reordering launchers</h3>
|
||||
|
||||
<h3>Adding/removing and reordering launchers</h3>
|
||||
<p>To display a new launcher in the launch bar, first look for it in the <em>Available Launchers</em> section.
|
||||
Then right click it and select <em>Move to visible launchers</em>. It is
|
||||
also possible to drag and drop the item manually.</p>
|
||||
@ -59,31 +52,25 @@
|
||||
<p>Drag-and-drop the items in the tree in order to change their order. See
|
||||
<a
|
||||
href="Note%20Tree.html">Note Tree</a> for more interaction options, including using keyboard shortcuts.</p>
|
||||
|
||||
<h2>Customizing the launcher</h2>
|
||||
|
||||
<h2>Customizing the launcher</h2>
|
||||
<ul>
|
||||
<li>The icon of a launcher can be changed just like a normal note. See
|
||||
<a
|
||||
href="../Note/Note%20Icons.html">Note Icons</a> for more information.</li>
|
||||
<li>The title of the launcher can also be changed.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Resetting</h3>
|
||||
|
||||
<h3>Resetting</h3>
|
||||
<p>Resetting allows restoring the original configuration of Trilium for the
|
||||
launcher bar, or for a portion of it. Simply right click a launcher (or
|
||||
even the entire <em>Launch Bar</em> section) and select <em>Reset</em> to bring
|
||||
it back to the original state.</p>
|
||||
|
||||
<h3>Creating new launchers / types of launchers</h3>
|
||||
|
||||
<h3>Creating new launchers / types of launchers</h3>
|
||||
<p>Right click either the <em>Available launchers</em> or <em>Visible launchers</em> sections
|
||||
and select one of the options:</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p><strong>Note Launcher</strong>
|
||||
<br />A note launcher will simply navigate to a specified note.</p>
|
||||
<br>A note launcher will simply navigate to a specified note.</p>
|
||||
<ol>
|
||||
<li>Set the <code>target</code> promoted attribute to the note to navigate to.</li>
|
||||
<li>Optionally, set <code>hoistedNote</code> to hoist a particular note. See
|
||||
@ -94,7 +81,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Script Launcher</strong>
|
||||
<br />An advanced launcher which will run a script upon pressing. See <a href="../../Note%20Types/Code/Scripts.html">Scripts</a> for
|
||||
<br>An advanced launcher which will run a script upon pressing. See <a href="../../Note%20Types/Code/Scripts.html">Scripts</a> for
|
||||
more information.</p>
|
||||
<ol>
|
||||
<li>Set <code>script</code> to point to the desired script to run.</li>
|
||||
@ -110,7 +97,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Spacers</strong>
|
||||
<br />Launchers that create some distance between other launchers for better
|
||||
<br>Launchers that create some distance between other launchers for better
|
||||
visual distinction.</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
@ -55,7 +55,7 @@
|
||||
</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
|
||||
to apply <a href="../../Advanced%20Usage/Bulk%20actions.html">Bulk actions</a> to
|
||||
to apply <a href="../../Advanced%20Usage/Bulk%20actions.html">Bulk actions</a> to
|
||||
them. The rest of the options will not be available and will appear disabled
|
||||
in the menu.</p>
|
||||
</div>
|
||||
|
@ -14,13 +14,11 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>
|
||||
<img src="Ribbon_image.png" alt="" />
|
||||
<img src="Ribbon_image.png" alt="">
|
||||
</p>
|
||||
<p>The ribbon allows changing options, attributes and viewing information
|
||||
about the current note.</p>
|
||||
|
||||
<h2>Settings</h2>
|
||||
|
||||
<h2>Settings</h2>
|
||||
<p>It is possible to change whether some ribbon items will be automatically
|
||||
open when navigating to a new note. To do so, in <a href="Options.html">Settings</a>,
|
||||
go to <em>Appearance</em> and look for the <em>Ribbon widgets</em> section.</p>
|
||||
|
@ -14,11 +14,8 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Layouts</h2>
|
||||
|
||||
<p>Trilium supports two different layouts, based on your preference.</p>
|
||||
|
||||
<h3>Vertical layout</h3>
|
||||
|
||||
<h3>Vertical layout</h3>
|
||||
<p>The vertical layout is Trilium's original layout:</p>
|
||||
<ul>
|
||||
<li>The <a href="Launch%20Bar.html">Launcher Bar</a> is positioned on the
|
||||
@ -29,17 +26,15 @@
|
||||
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" alt="">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" alt="">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" alt="">
|
||||
</p>
|
||||
|
||||
<h3>Horizontal layout</h3>
|
||||
|
||||
<h3>Horizontal layout</h3>
|
||||
<p>The horizontal layout is a more traditional layout, since it bears similarity
|
||||
with other applications. In this mode:</p>
|
||||
<ul>
|
||||
@ -53,17 +48,15 @@
|
||||
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" alt="">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" alt="">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" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Changing the layout</h2>
|
||||
|
||||
<h2>Changing the layout</h2>
|
||||
<p>Go to <a href="#root/_hidden/_lbRoot/_lbVisibleLaunchers/_lbSettings">Settings</a> and
|
||||
look for the <em>Appearance</em> option on the left. Then look for the <em>Layout</em> section,
|
||||
where there is the possibility to switch between the two available layouts.</p>
|
||||
|
@ -19,9 +19,7 @@
|
||||
<p>Note that the link will be publicly accessible to everyone (however the
|
||||
link is in a hard-to-guess format such as <code>https://docs.google.com/spreadsheets/d/e/2PACX-1vTA8NU2_eZFhc8TFadCZPreBfvP7un8IHd6J0SchrLLw3ueGmntNZjwRmsH2ZRcp1pJYDAzMz1FmFaj/pub?output=csv</code>).
|
||||
Make sure you are not accidentally publishing sensitive information.</p>
|
||||
|
||||
<h2>Obtaining the CSV link</h2>
|
||||
|
||||
<h2>Obtaining the CSV link</h2>
|
||||
<ol>
|
||||
<li>Open the Google Forms in a browser.</li>
|
||||
<li>Select the “Responses” tab and click on “Link to Sheets”.</li>
|
||||
@ -31,11 +29,8 @@
|
||||
and instead of “Web page”, select “Comma-separated values (.csv)”.</li>
|
||||
<li>Copy the given link which will be used for the upcoming script.</li>
|
||||
</ol>
|
||||
|
||||
<h2>Creating the script</h2>
|
||||
|
||||
<p>Create a “JS Frontend” script:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">const CSV_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTiwooLV2whjCSVa49dJ99p_G3_qhqHHRqttMjYCJVfLXVdTgUSNJu5K0rpqmaHYF2k7Vofi3o7gW82/pub?output=csv";
|
||||
<h2>Creating the script</h2>
|
||||
<p>Create a “JS Frontend” script:</p><pre><code class="language-text-x-trilium-auto">const CSV_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTiwooLV2whjCSVa49dJ99p_G3_qhqHHRqttMjYCJVfLXVdTgUSNJu5K0rpqmaHYF2k7Vofi3o7gW82/pub?output=csv";
|
||||
|
||||
async function fetchData() {
|
||||
try {
|
||||
@ -50,8 +45,7 @@ const data = await fetchData();
|
||||
console.log(data);
|
||||
// Do something with the data.</code></pre>
|
||||
<p>Note that the data will be received as a string and there is no library
|
||||
to do the CSV parsing for us. To do a very simple parsing of CSV:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">const content = data
|
||||
to do the CSV parsing for us. To do a very simple parsing of CSV:</p><pre><code class="language-text-x-trilium-auto">const content = data
|
||||
.split("\n")
|
||||
.slice(1)
|
||||
.map((row) => row.split(","));</code></pre>
|
||||
|
@ -18,31 +18,23 @@
|
||||
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" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Using check boxes to toggle flags</h2>
|
||||
|
||||
<h2>Using check boxes to toggle flags</h2>
|
||||
<p>Instead of asking the user to modify a boolean value in the script, it's
|
||||
much more intuitive to use a checkbox for it as a promoted attribute.</p>
|
||||
<p>To do so, first define the promoted attribute:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">#label:groupByExtension="promoted,alias=Group by extension,single,boolean"</code></pre>
|
||||
<p>Then use it:</p>
|
||||
<pre><code class="language-application-javascript-env-backend">const byExtension = api.currentNote.getLabelValue("groupByExtension") === "true";
|
||||
<p>To do so, first define the promoted attribute:</p><pre><code class="language-text-x-trilium-auto">#label:groupByExtension="promoted,alias=Group by extension,single,boolean"</code></pre>
|
||||
<p>Then use it:</p><pre><code class="language-application-javascript-env-backend">const byExtension = api.currentNote.getLabelValue("groupByExtension") === "true";
|
||||
if (byExtension) {
|
||||
// Do something.
|
||||
}</code></pre>
|
||||
<p>This will work equally well in both front-end and back-end scripts.</p>
|
||||
|
||||
<h2>Using relations to select notes</h2>
|
||||
|
||||
<h2>Using relations to select notes</h2>
|
||||
<p>One common use case for a script is to read data from another note and
|
||||
perhaps output its result in another note. To do so we need to define the
|
||||
following promoted attributes:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">#relation:input="promoted,alias=Input,single" #relation:output="promoted,alias=Output,single"</code></pre>
|
||||
following promoted attributes:</p><pre><code class="language-text-x-trilium-auto">#relation:input="promoted,alias=Input,single" #relation:output="promoted,alias=Output,single"</code></pre>
|
||||
<p>Once we have this, we can add some basic error handling to ensure that
|
||||
the fields are completed by the user:</p>
|
||||
<pre><code class="language-application-javascript-env-backend">const inputNoteId = api.currentNote.getRelationValue("input");
|
||||
the fields are completed by the user:</p><pre><code class="language-application-javascript-env-backend">const inputNoteId = api.currentNote.getRelationValue("input");
|
||||
if (!inputNoteId) {
|
||||
api.showError("Missing input.");
|
||||
return;
|
||||
@ -56,8 +48,7 @@ if (!outputNoteId) {
|
||||
<p>Note that here we are using <code>api.showError</code> which is only available
|
||||
for frontend notes. If you are writing a backend note, simply remove <code>api.showError</code> but
|
||||
the user will no feedback on why the script did not execute properly.</p>
|
||||
<p>Afterwards we can simply read the note and do something with it:</p>
|
||||
<pre><code class="language-application-javascript-env-backend">const note = api.getNote(inputNoteId);
|
||||
<p>Afterwards we can simply read the note and do something with it:</p><pre><code class="language-application-javascript-env-backend">const note = api.getNote(inputNoteId);
|
||||
if (!note) {
|
||||
return;
|
||||
}
|
||||
|
@ -14,22 +14,17 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Frontend API</h2>
|
||||
|
||||
<p>The frontend api supports two styles, regular scripts that are run with
|
||||
the current app and note context, and widgets that export an object to
|
||||
Trilium to be used in the UI. In both cases, the frontend api of Trilium
|
||||
is available to scripts running in the frontend context as global variable <code>api</code>.
|
||||
The members and methods of the api can be seen on the <a href="../Note%20Types/Code/Script%20API.html">Script API</a> page.</p>
|
||||
|
||||
<h2>Scripts</h2>
|
||||
|
||||
<h2>Scripts</h2>
|
||||
<p>Scripts don't have any special requirements. They can be run at will using
|
||||
the execute button in the UI or they can be configured to run at certain
|
||||
times using <a href="../Advanced%20Usage/Attributes.html">Attributes</a> on
|
||||
the note containing the script.</p>
|
||||
|
||||
<h3>Global Events</h3>
|
||||
|
||||
<h3>Global Events</h3>
|
||||
<p>This attribute is called <code>#run</code> and it can have any of the following
|
||||
values:</p>
|
||||
<ul>
|
||||
@ -39,9 +34,7 @@
|
||||
<li><code>hourly</code> - executes once an hour on backend.</li>
|
||||
<li><code>daily</code> - executes once a day on backend.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Entity Events</h3>
|
||||
|
||||
<h3>Entity Events</h3>
|
||||
<p>These events are triggered by certain <a href="../Advanced%20Usage/Attributes.html">relations</a> to
|
||||
other notes. Meaning that the script is triggered only if the note has
|
||||
this script attached to it through relations (or it can inherit it).</p>
|
||||
@ -67,9 +60,7 @@
|
||||
<li><code>runOnAttributeChange</code> - executes when attribute is changed
|
||||
under this note.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Widgets</h2>
|
||||
|
||||
<h2>Widgets</h2>
|
||||
<p>Conversely to scripts, widgets do have some specific requirements in order
|
||||
to work. A widget must:</p>
|
||||
<ul>
|
||||
@ -92,9 +83,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>parentWidget</h3>
|
||||
|
||||
<h3>parentWidget</h3>
|
||||
<ul>
|
||||
<li><code>left-pane</code> - This renders the widget on the left side of the
|
||||
screen where the note tree lives.</li>
|
||||
@ -105,9 +94,7 @@
|
||||
<li><code>right-pane</code> - This renders the widget to the right of any opened
|
||||
notes.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Tutorial</h3>
|
||||
|
||||
<h3>Tutorial</h3>
|
||||
<p>For more information on building widgets, take a look at <a href="Widget%20Basics.html">Widget Basics</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -16,12 +16,9 @@
|
||||
<p>This guide will walk you through creating a basic widget inside Trilium.
|
||||
By following these steps, you'll learn how to build a simple UI element
|
||||
that interacts with the user.</p>
|
||||
|
||||
<h3>Step 1: The Basic Widget Structure</h3>
|
||||
|
||||
<h3>Step 1: The Basic Widget Structure</h3>
|
||||
<p>To start, we'll create the most basic widget possible. Here's a simple
|
||||
example:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
|
||||
example:</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
|
||||
get position() { return 1; }
|
||||
get parentWidget() { return "left-pane"; }
|
||||
|
||||
@ -45,11 +42,8 @@ module.exports = new MyWidget();</code></pre>
|
||||
is found, the widget is functioning correctly. If <code>undefined</code> is
|
||||
returned, double-check that the <a href="../Basic%20Concepts/Note.html">note</a> has
|
||||
the <code>#widget</code> <a href="../Advanced%20Usage/Attributes.html">attribute</a>.</p>
|
||||
|
||||
<h3>Step 2: Adding an UI Element</h3>
|
||||
|
||||
<p>Next, let's improve the widget by adding a button to it.</p>
|
||||
<pre><code class="language-text-x-trilium-auto">const template = ``;
|
||||
<h3>Step 2: Adding an UI Element</h3>
|
||||
<p>Next, let's improve the widget by adding a button to it.</p><pre><code class="language-text-x-trilium-auto">const template = ``;
|
||||
|
||||
class MyWidget extends api.BasicWidget {
|
||||
get position() {return 1;}
|
||||
@ -64,16 +58,12 @@ class MyWidget extends api.BasicWidget {
|
||||
module.exports = new MyWidget();</code></pre>
|
||||
<p>After making this change, reload Trilium. You should now see a button
|
||||
in the top-left corner of the left pane.</p>
|
||||
|
||||
<h3>Step 3: Styling the Widget</h3>
|
||||
|
||||
<h3>Step 3: Styling the Widget</h3>
|
||||
<p>To make the button more visually appealing and position it correctly,
|
||||
we'll apply some custom styling. Trilium includes <a href="https://boxicons.com">Box Icons</a>,
|
||||
which we'll use to replace the button text with an icon. For example the <code>bx bxs-magic-wand</code> icon.</p>
|
||||
<p>Here's the updated template:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">const template = ``;</code></pre>
|
||||
<p>Next, we'll adjust the button's position using CSS:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
|
||||
<p>Here's the updated template:</p><pre><code class="language-text-x-trilium-auto">const template = ``;</code></pre>
|
||||
<p>Next, we'll adjust the button's position using CSS:</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
|
||||
get position() { return 1; }
|
||||
get parentWidget() { return "left-pane"; }
|
||||
|
||||
@ -92,12 +82,9 @@ module.exports = new MyWidget();</code></pre>
|
||||
module.exports = new MyWidget();</code></pre>
|
||||
<p>After reloading Trilium, the button should now appear at the bottom left
|
||||
of the left pane, alongside other action buttons.</p>
|
||||
|
||||
<h3>Step 4: Adding User Interaction</h3>
|
||||
|
||||
<h3>Step 4: Adding User Interaction</h3>
|
||||
<p>Let’s make the button interactive by showing a message when it’s clicked.
|
||||
We'll use the <code>api.showMessage</code> method from the <a href="../Note%20Types/Code/Script%20API.html">Script API</a>.</p>
|
||||
<pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
|
||||
We'll use the <code>api.showMessage</code> method from the <a href="../Note%20Types/Code/Script%20API.html">Script API</a>.</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
|
||||
get position() { return 1; }
|
||||
get parentWidget() { return "left-pane"; }
|
||||
|
||||
|
@ -14,7 +14,6 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Mac OS support</h2>
|
||||
|
||||
<p>Originally, desktop builds of Trilium Notes has been available for Windows
|
||||
& Linux, but there has been a considerable demand for macOS build.</p>
|
||||
<p>So I made one, but I underestimated the differences and specifics of Mac
|
||||
@ -27,18 +26,14 @@
|
||||
or integrations. Note that this is more of an acknowledgment of an existing
|
||||
state rather than sudden change of direction.</p>
|
||||
<p>Of course, PRs are welcome.</p>
|
||||
|
||||
<h2>Translation / localization support</h2>
|
||||
|
||||
<h2>Translation / localization support</h2>
|
||||
<p>Trilium is currently available only in English. Translation to other languages
|
||||
is not planned in the near/medium term because it brings a significant
|
||||
maintenance overhead. This decision might be revisited once Trilium stabilizes
|
||||
into a more mature product.</p>
|
||||
<p>For Chinese, there's an unofficial fork <a href="https://github.com/Nriver/trilium-translation">here</a>.
|
||||
Use at your own risk.</p>
|
||||
|
||||
<h2>Multi user support</h2>
|
||||
|
||||
<h2>Multi user support</h2>
|
||||
<p>Common request is to allow multiple users collaborate, share notes etc.
|
||||
So far I'm resisting this because of these reasons:</p>
|
||||
<ul>
|
||||
@ -55,9 +50,7 @@
|
||||
href="Note%20Types/Code/Scripts.html">scripting</a>support would be a XSS security hole, while with the single
|
||||
user assumption it's an endless customizable tool.</li>
|
||||
</ul>
|
||||
|
||||
<h2>How to open multiple documents in one Trilium instance</h2>
|
||||
|
||||
<h2>How to open multiple documents in one Trilium instance</h2>
|
||||
<p>This is normally not supported - one Trilium process can open only a single
|
||||
instance of a <a href="Advanced%20Usage/Database.html">database</a>. However,
|
||||
you can run two Trilium processes (from one installation), each connected
|
||||
@ -66,14 +59,11 @@
|
||||
the <code>TRILIUM_DATA_DIR</code> environment variable and separate port
|
||||
on <code>TRILIUM_PORT</code> environment variable. How to do that depends
|
||||
on the platform, in Unix-based systems you can achieve that by running
|
||||
command such as this:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">TRILIUM_DATA_DIR=/home/me/path/to/data/dir TRILIUM_PORT=12345 trilium </code></pre>
|
||||
command such as this:</p><pre><code class="language-text-x-trilium-auto">TRILIUM_DATA_DIR=/home/me/path/to/data/dir TRILIUM_PORT=12345 trilium </code></pre>
|
||||
<p>You can save this command into a <code>.sh</code> script file or make an
|
||||
alias. Do this similarly for a second instance with different data directory
|
||||
and port.</p>
|
||||
|
||||
<h2>Can I use Dropbox / Google Drive / OneDrive to sync data across multiple computers.</h2>
|
||||
|
||||
<h2>Can I use Dropbox / Google Drive / OneDrive to sync data across multiple computers.</h2>
|
||||
<p>No.</p>
|
||||
<p>These general purpose sync apps are not suitable to sync database files
|
||||
which are open and being worked on by another application. The result is
|
||||
@ -84,9 +74,7 @@
|
||||
</blockquote>
|
||||
<p>The only supported way to sync Trilium's data across the network is to
|
||||
use a <a href="Installation%20%26%20Setup/Synchronization.html">sync/web server</a>.</p>
|
||||
|
||||
<h2>Why database instead of flat files?</h2>
|
||||
|
||||
<h2>Why database instead of flat files?</h2>
|
||||
<p>Trilium stores notes in a <a href="Advanced%20Usage/Database.html">database</a> which
|
||||
is an SQLite database. People often ask why doesn't Trilium rather use
|
||||
flat files for note storage - it's fair question since flat files are easily
|
||||
|
@ -30,9 +30,7 @@
|
||||
<p>Note that <a href="Synchronization.html">synchronization</a> provides also
|
||||
some backup capabilities by its nature of distributing the data to other
|
||||
computers.</p>
|
||||
|
||||
<h2>Restoring backup</h2>
|
||||
|
||||
<h2>Restoring backup</h2>
|
||||
<p>Let's assume you want to restore the weekly backup, here's how to do it:</p>
|
||||
<ul>
|
||||
<li>find <a href="Data%20directory.html">data directory</a> Trilium uses - easy
|
||||
@ -57,12 +55,9 @@
|
||||
<p>If you have configured sync then you need to do it across all members
|
||||
of the sync cluster, otherwise older version (restored backup) of the document
|
||||
will be detected and synced to the newer version.</p>
|
||||
|
||||
<h2>Disabling backup</h2>
|
||||
|
||||
<h2>Disabling backup</h2>
|
||||
<p>Although this is not recommended, it is possible to disable backup in <code>config.ini</code> in
|
||||
the <a href="Data%20directory.html">data directory</a>:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">[General]
|
||||
the <a href="Data%20directory.html">data directory</a>:</p><pre><code class="language-text-x-trilium-auto">[General]
|
||||
... some other configs
|
||||
# set to true to disable backups (e.g. because of limited space on server)
|
||||
noBackup=true</code></pre>
|
||||
|
@ -23,13 +23,11 @@
|
||||
documents</li>
|
||||
<li><code>log</code> - contains application log files</li>
|
||||
</ul>
|
||||
|
||||
<h2>Location</h2>
|
||||
|
||||
<h2>Location</h2>
|
||||
<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" alt="">
|
||||
</p>
|
||||
<p>Here's how the location is decided:</p>
|
||||
<p>Data directory is normally named <code>trilium-data</code> and it is stored
|
||||
@ -43,24 +41,17 @@
|
||||
</ul>
|
||||
<p>If you want to back up your Trilium data, just backup this single directory
|
||||
- it contains everything you need.</p>
|
||||
|
||||
<h3>Changing the location of data directory</h3>
|
||||
|
||||
<h3>Changing the location of data directory</h3>
|
||||
<p>If you want to use some other location for the data directory than the
|
||||
default one, you may change it via TRILIUM_DATA_DIR environment variable
|
||||
to some other location:</p>
|
||||
|
||||
<h4>Linux</h4>
|
||||
|
||||
<pre><code class="language-text-x-trilium-auto">export TRILIUM_DATA_DIR=/home/myuser/data/my-trilium-data</code></pre>
|
||||
<h4>Linux</h4><pre><code class="language-text-x-trilium-auto">export TRILIUM_DATA_DIR=/home/myuser/data/my-trilium-data</code></pre>
|
||||
<h4>Mac OS X</h4>
|
||||
|
||||
<p>You need to create a <code>.plist</code> file under <code>~/Library/LaunchAgents</code> to
|
||||
load it properly each login.</p>
|
||||
<p>To load it manually, you need to use <code>launchctl setenv TRILIUM_DATA_DIR <yourpath></code>
|
||||
</p>
|
||||
<p>Here is a pre-defined template, where you just need to add your path to:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">
|
||||
<p>Here is a pre-defined template, where you just need to add your path to:</p><pre><code class="language-text-x-trilium-auto">
|
||||
|
||||
|
||||
|
||||
@ -79,18 +70,14 @@
|
||||
|
||||
</code></pre>
|
||||
<h3>Create a script to run with specific data directory</h3>
|
||||
|
||||
<p>An alternative to globally setting environment variable is to run only
|
||||
the Trilium Notes with this environment variable. This then allows for
|
||||
different setup styles like two <a href="../Advanced%20Usage/Database.html">database</a> instances
|
||||
or "portable" installation.</p>
|
||||
<p>To do this in unix based systems simply run trilium like this:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">TRILIUM_DATA_DIR=/home/myuser/data/my-trilium-data trilium</code></pre>
|
||||
<p>To do this in unix based systems simply run trilium like this:</p><pre><code class="language-text-x-trilium-auto">TRILIUM_DATA_DIR=/home/myuser/data/my-trilium-data trilium</code></pre>
|
||||
<p>You can then save the above command as a shell script on your path for
|
||||
convenience.</p>
|
||||
|
||||
<h3>Fine-grained directory/path location</h3>
|
||||
|
||||
<h3>Fine-grained directory/path location</h3>
|
||||
<p>It's possible to configure e.g. backup and log directories separately,
|
||||
with following environment variables:</p>
|
||||
<ul>
|
||||
|
@ -23,9 +23,7 @@
|
||||
<li><strong>Run the Application</strong>: Launch Trilium by executing the <code>trilium</code> executable
|
||||
found within the unzipped folder.</li>
|
||||
</ol>
|
||||
|
||||
<h2>Startup Scripts</h2>
|
||||
|
||||
<h2>Startup Scripts</h2>
|
||||
<p>Trilium offers various startup scripts to customize your experience:</p>
|
||||
<ul>
|
||||
<li><code>**trilium-no-cert-check**</code>: Starts Trilium without validating
|
||||
@ -43,9 +41,7 @@
|
||||
<li><code>**trilium-safe-mode**</code>: Boots Trilium in "safe mode," disabling
|
||||
any startup scripts that might cause the application to crash.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Synchronization</h2>
|
||||
|
||||
<h2>Synchronization</h2>
|
||||
<p>For Trilium desktp users who wish to synchronize their data with a server
|
||||
instance, refer to the <a href="Synchronization.html">Synchronization Guide</a> for
|
||||
detailed instructions.</p>
|
||||
|
@ -21,24 +21,16 @@
|
||||
See below for more details on this.</p>
|
||||
<p>Note that this is not an Android/iOS app, this is just mobile friendly
|
||||
web page served on the <a href="Server%20Installation.html">server edition</a>.</p>
|
||||
|
||||
<h2>Screenshots</h2>
|
||||
|
||||
|
||||
<h3>Mobile phone</h3>
|
||||
|
||||
<h2>Screenshots</h2>
|
||||
<h3>Mobile phone</h3>
|
||||
<p>
|
||||
<img src="../Attachments/mobile-smartphone.png" alt="" />
|
||||
<img src="../Attachments/mobile-smartphone.png" alt="">
|
||||
</p>
|
||||
|
||||
<h3>Tablet</h3>
|
||||
|
||||
<h3>Tablet</h3>
|
||||
<p>
|
||||
<img src="../Attachments/mobile-tablet.png" alt="" />
|
||||
<img src="../Attachments/mobile-tablet.png" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Limitations</h2>
|
||||
|
||||
<h2>Limitations</h2>
|
||||
<p>Mobile frontend provides only some of the features of the full desktop
|
||||
frontend:</p>
|
||||
<ul>
|
||||
@ -50,15 +42,11 @@
|
||||
<li>cloning notes is not supported</li>
|
||||
<li>uploading file attachments is not supported</li>
|
||||
</ul>
|
||||
|
||||
<h2>Forcing mobile/desktop frontend</h2>
|
||||
|
||||
<h2>Forcing mobile/desktop frontend</h2>
|
||||
<p>Trilium decides automatically whether to use mobile or desktop frontend.
|
||||
If this is not appropriate, you can use <code>?mobile</code> or <code>?desktop</code> query
|
||||
param on <strong>login</strong> page (Note: you might need to log out).</p>
|
||||
|
||||
<h2>Scripting</h2>
|
||||
|
||||
<h2>Scripting</h2>
|
||||
<p>You can alter the behavior with <a href="../Note%20Types/Code/Scripts.html">scripts</a> just
|
||||
like for normal frontend. For script notes to be executed, they need to
|
||||
have labeled <code>#run=mobileStartup</code>.</p>
|
||||
|
@ -16,9 +16,7 @@
|
||||
<p>This guide outlines the steps to install Trilium on your own server. You
|
||||
might consider this option if you want to set up <a href="Synchronization.html">synchronization</a> or
|
||||
use Trilium in a browser - accessible from anywhere.</p>
|
||||
|
||||
<h2>Installation Options</h2>
|
||||
|
||||
<h2>Installation Options</h2>
|
||||
<p>There are several ways to install Trilium on a server, each with its own
|
||||
advantages:</p>
|
||||
<ul>
|
||||
@ -40,9 +38,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<p>The server installation includes both web and <a href="Mobile%20Frontend.html">mobile frontends</a>.</p>
|
||||
|
||||
<h2>Configuration</h2>
|
||||
|
||||
<h2>Configuration</h2>
|
||||
<p>After setting up your server installation, you may want to configure settings
|
||||
such as the port or enable <a href="Server%20Installation/TLS%20Configuration.html">TLS</a>.
|
||||
Configuration is managed via the Trilium <code>config.ini</code> file, which
|
||||
@ -51,30 +47,21 @@
|
||||
with default values to <code>config.ini</code>.</p>
|
||||
<p>You can also review the <a href="../Advanced%20Usage/Configuration%20(config.ini%20or%20e.html">configuration</a> file
|
||||
to provide all <code>config.ini</code> values as environment variables instead.</p>
|
||||
|
||||
<h3>Config Location</h3>
|
||||
|
||||
<h3>Config Location</h3>
|
||||
<p>By default, <code>config.ini</code>, the <a href="../Advanced%20Usage/Database.html">database</a>,
|
||||
and other important Trilium data files are stored in the <a href="Data%20directory.html">data directory</a>.
|
||||
If you prefer a different location, you can change it by setting the <code>TRILIUM_DATA_DIR</code> environment
|
||||
variable:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">export TRILIUM_DATA_DIR=/home/myuser/data/my-trilium-data</code></pre>
|
||||
variable:</p><pre><code class="language-text-x-trilium-auto">export TRILIUM_DATA_DIR=/home/myuser/data/my-trilium-data</code></pre>
|
||||
<h3>Disabling Authentication</h3>
|
||||
|
||||
<p>If you are running Trilium on localhost only or if authentication is handled
|
||||
by another component, you can disable Trilium’s authentication by adding
|
||||
the following to <code>config.ini</code>:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">[General]
|
||||
the following to <code>config.ini</code>:</p><pre><code class="language-text-x-trilium-auto">[General]
|
||||
noAuthentication=true</code></pre>
|
||||
<h2>Reverse Proxy Setup</h2>
|
||||
|
||||
<p>To configure a reverse proxy for Trilium, you can use either <strong>nginx</strong> or <strong>Apache</strong>.</p>
|
||||
|
||||
<h3>nginx</h3>
|
||||
|
||||
<h3>nginx</h3>
|
||||
<p>Add the following configuration to your <code>nginx</code> setup to proxy
|
||||
requests to Trilium:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">location /trilium/ {
|
||||
requests to Trilium:</p><pre><code class="language-text-x-trilium-auto">location /trilium/ {
|
||||
proxy_pass http://127.0.0.1:8080/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
@ -82,11 +69,9 @@ noAuthentication=true</code></pre>
|
||||
proxy_set_header Host $host;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}</code></pre>
|
||||
<p>To avoid limiting the size of payloads, include this in the <code>server {}</code> block:</p>
|
||||
<pre><code class="language-text-x-trilium-auto"># Set to 0 for unlimited. Default is 1M.
|
||||
<p>To avoid limiting the size of payloads, include this in the <code>server {}</code> block:</p><pre><code class="language-text-x-trilium-auto"># Set to 0 for unlimited. Default is 1M.
|
||||
client_max_body_size 0;</code></pre>
|
||||
<h3>Apache</h3>
|
||||
|
||||
<p>For an Apache setup, refer to the <a href="Server%20Installation/2.%20Reverse%20proxy/Apache.html">Apache proxy setup</a> guide.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -17,9 +17,7 @@
|
||||
<a
|
||||
href="https://hub.docker.com/r/triliumnext/notes/">https://hub.docker.com/r/triliumnext/notes/</a>
|
||||
</p>
|
||||
|
||||
<h2>Prerequisites</h2>
|
||||
|
||||
<h2>Prerequisites</h2>
|
||||
<p>Ensure Docker is installed on your system.</p>
|
||||
<p>If you need help installing Docker, reference the <a href="https://docs.docker.com/engine/install/">Docker Installation Docs</a>
|
||||
</p>
|
||||
@ -31,102 +29,66 @@
|
||||
add the mount options of <code>nobrl</code> and <code>noperm</code> when mounting
|
||||
your SMB share.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>Running with Docker Compose</h2>
|
||||
|
||||
|
||||
<h3>Grab the latest docker-compose.yml:</h3>
|
||||
|
||||
<pre><code class="language-text-x-trilium-auto">wget https://raw.githubusercontent.com/TriliumNext/Notes/master/docker-compose.yml</code></pre>
|
||||
<h2>Running with Docker Compose</h2>
|
||||
<h3>Grab the latest docker-compose.yml:</h3><pre><code class="language-text-x-trilium-auto">wget https://raw.githubusercontent.com/TriliumNext/Notes/master/docker-compose.yml</code></pre>
|
||||
<p>Optionally, edit the <code>docker-compose.yml</code> file to configure the
|
||||
container settings prior to starting it. Unless configured otherwise, the
|
||||
data directory will be <code>~/trilium-data</code> and the container will
|
||||
be accessible at port 8080.</p>
|
||||
|
||||
<h3>Start the container:</h3>
|
||||
|
||||
<p>Run the following command to start the container in the background:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">docker compose up -d</code></pre>
|
||||
<h3>Start the container:</h3>
|
||||
<p>Run the following command to start the container in the background:</p><pre><code class="language-text-x-trilium-auto">docker compose up -d</code></pre>
|
||||
<h2>Running without Docker Compose / Further Configuration</h2>
|
||||
|
||||
|
||||
<h3>Pulling the Docker Image</h3>
|
||||
|
||||
<h3>Pulling the Docker Image</h3>
|
||||
<p>To pull the image, use the following command, replacing <code>[VERSION]</code> with
|
||||
the desired version or tag, such as <code>v0.91.6</code> or just <code>latest</code>.
|
||||
(See published tag names at <a href="https://hub.docker.com/r/triliumnext/notes/tags">https://hub.docker.com/r/triliumnext/notes/tags</a>.):</p>
|
||||
<pre><code class="language-text-x-trilium-auto">docker pull triliumnext/notes:v0.91.6</code></pre>
|
||||
(See published tag names at <a href="https://hub.docker.com/r/triliumnext/notes/tags">https://hub.docker.com/r/triliumnext/notes/tags</a>.):</p><pre><code class="language-text-x-trilium-auto">docker pull triliumnext/notes:v0.91.6</code></pre>
|
||||
<p><strong>Warning:</strong> Avoid using the "latest" tag, as it may automatically
|
||||
upgrade your instance to a new minor version, potentially disrupting sync
|
||||
setups or causing other issues.</p>
|
||||
|
||||
<h3>Preparing the Data Directory</h3>
|
||||
|
||||
<h3>Preparing the Data Directory</h3>
|
||||
<p>Trilium requires a directory on the host system to store its data. This
|
||||
directory must be mounted into the Docker container with write permissions.</p>
|
||||
|
||||
<h3>Running the Docker Container</h3>
|
||||
|
||||
|
||||
<h4>Local Access Only</h4>
|
||||
|
||||
<h3>Running the Docker Container</h3>
|
||||
<h4>Local Access Only</h4>
|
||||
<p>Run the container to make it accessible only from the localhost. This
|
||||
setup is suitable for testing or when using a proxy server like Nginx or
|
||||
Apache.</p>
|
||||
<pre><code class="language-text-x-trilium-auto">sudo docker run -t -i -p 127.0.0.1:8080:8080 -v ~/trilium-data:/home/node/trilium-data triliumnext/notes:[VERSION]</code></pre>
|
||||
Apache.</p><pre><code class="language-text-x-trilium-auto">sudo docker run -t -i -p 127.0.0.1:8080:8080 -v ~/trilium-data:/home/node/trilium-data triliumnext/notes:[VERSION]</code></pre>
|
||||
<ol>
|
||||
<li>Verify the container is running using <code>docker ps</code>.</li>
|
||||
<li>Access Trilium via a web browser at <code>127.0.0.1:8080</code>.</li>
|
||||
</ol>
|
||||
|
||||
<h4>Local Network Access</h4>
|
||||
|
||||
<h4>Local Network Access</h4>
|
||||
<p>To make the container accessible only on your local network, first create
|
||||
a new Docker network:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">docker network create -d macvlan -o parent=eth0 --subnet 192.168.2.0/24 --gateway 192.168.2.254 --ip-range 192.168.2.252/27 mynet</code></pre>
|
||||
<p>Then, run the container with the network settings:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">docker run --net=mynet -d -p 127.0.0.1:8080:8080 -v ~/trilium-data:/home/node/trilium-data triliumnext/notes:-latest</code></pre>
|
||||
a new Docker network:</p><pre><code class="language-text-x-trilium-auto">docker network create -d macvlan -o parent=eth0 --subnet 192.168.2.0/24 --gateway 192.168.2.254 --ip-range 192.168.2.252/27 mynet</code></pre>
|
||||
<p>Then, run the container with the network settings:</p><pre><code class="language-text-x-trilium-auto">docker run --net=mynet -d -p 127.0.0.1:8080:8080 -v ~/trilium-data:/home/node/trilium-data triliumnext/notes:-latest</code></pre>
|
||||
<p>To set a different user ID (UID) and group ID (GID) for the saved data,
|
||||
use the <code>USER_UID</code> and <code>USER_GID</code> environment variables:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">docker run --net=mynet -d -p 127.0.0.1:8080:8080 -e "USER_UID=1001" -e "USER_GID=1001" -v ~/trilium-data:/home/node/trilium-data triliumnext/notes:-latest</code></pre>
|
||||
use the <code>USER_UID</code> and <code>USER_GID</code> environment variables:</p><pre><code class="language-text-x-trilium-auto">docker run --net=mynet -d -p 127.0.0.1:8080:8080 -e "USER_UID=1001" -e "USER_GID=1001" -v ~/trilium-data:/home/node/trilium-data triliumnext/notes:-latest</code></pre>
|
||||
<p>Find the local IP address using <code>docker inspect [container_name]</code> and
|
||||
access the service from devices on the local network.</p>
|
||||
<pre><code class="language-text-x-trilium-auto">docker ps
|
||||
access the service from devices on the local network.</p><pre><code class="language-text-x-trilium-auto">docker ps
|
||||
docker inspect [container_name]</code></pre>
|
||||
<h4>Global Access</h4>
|
||||
|
||||
<p>To allow access from any IP address, run the container as follows:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">docker run -d -p 0.0.0.0:8080:8080 -v ~/trilium-data:/home/node/trilium-data triliumnext/notes:[VERSION]</code></pre>
|
||||
<p>To allow access from any IP address, run the container as follows:</p><pre><code class="language-text-x-trilium-auto">docker run -d -p 0.0.0.0:8080:8080 -v ~/trilium-data:/home/node/trilium-data triliumnext/notes:[VERSION]</code></pre>
|
||||
<p>Stop the container with <code>docker stop <CONTAINER ID></code>,
|
||||
where the container ID is obtained from <code>docker ps</code>.</p>
|
||||
|
||||
<h3>Custom Data Directory</h3>
|
||||
|
||||
<p>For a custom data directory, use:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">-v ~/YourOwnDirectory:/home/node/trilium-data triliumnext/notes:[VERSION]</code></pre>
|
||||
<h3>Custom Data Directory</h3>
|
||||
<p>For a custom data directory, use:</p><pre><code class="language-text-x-trilium-auto">-v ~/YourOwnDirectory:/home/node/trilium-data triliumnext/notes:[VERSION]</code></pre>
|
||||
<p>If you want to run your instance in a non-default way, please use the
|
||||
volume switch as follows: <code>-v ~/YourOwnDirectory:/home/node/trilium-data triliumnext/notes:<VERSION></code>.
|
||||
It is important to be aware of how Docker works for volumes, with the first
|
||||
path being your own and the second the one to virtually bind to. <a href="https://docs.docker.com/storage/volumes/">https://docs.docker.com/storage/volumes/</a> The
|
||||
path before the colon is the host directory, and the path after the colon
|
||||
is the container's path. More details can be found in the <a href="https://docs.docker.com/storage/volumes/">Docker Volumes Documentation</a>.</p>
|
||||
|
||||
<h2>Reverse Proxy</h2>
|
||||
|
||||
<h2>Reverse Proxy</h2>
|
||||
<ol>
|
||||
<li><a href="../2.%20Reverse%20proxy/Nginx.html">Nginx</a>
|
||||
</li>
|
||||
<li><a href="../2.%20Reverse%20proxy/Apache.html">Apache</a>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h3>Note on --user Directive</h3>
|
||||
|
||||
<h3>Note on --user Directive</h3>
|
||||
<p>The <code>--user</code> directive is unsupported. Instead, use the <code>USER_UID</code> and <code>USER_GID</code> environment
|
||||
variables to set the appropriate user and group IDs.</p>
|
||||
|
||||
<h3>Note on timezones</h3>
|
||||
|
||||
<h3>Note on timezones</h3>
|
||||
<p>If you are having timezone issues and you are not using docker-compose,
|
||||
you may need to add a <code>TZ</code> environment variable with the <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">TZ identifier</a> of
|
||||
your local timezone.</p>
|
||||
|
@ -17,12 +17,10 @@
|
||||
You can either use our Helm chart, a community Helm chart, or roll your
|
||||
own Kubernetes deployment.</p>
|
||||
<p>The recommended way is to use a Helm chart.</p>
|
||||
|
||||
<h2>Root privileges</h2>
|
||||
|
||||
<h2>Root privileges</h2>
|
||||
<blockquote>
|
||||
<p>[!NOTE]
|
||||
<br />The Trilium container at this time needs to be run with root privileges.
|
||||
<br>The Trilium container at this time needs to be run with root privileges.
|
||||
It will swap to UID and GID <code>1000:1000</code> to run the <code>node</code> process
|
||||
after execution though, so the main process doesn't run with root privileges.</p>
|
||||
</blockquote>
|
||||
@ -35,25 +33,18 @@
|
||||
variables.</p>
|
||||
<p>The docker image will also fix the permissions of <code>/home/node</code> so
|
||||
you don't have to use an init container.</p>
|
||||
|
||||
<h2>Helm Charts</h2>
|
||||
|
||||
<h2>Helm Charts</h2>
|
||||
<p><a href="https://github.com/TriliumNext/helm-charts">Official Helm chart</a> from
|
||||
TriliumNext Unofficial helm chart by <a href="https://github.com/ohdearaugustin">ohdearaugustin</a>:
|
||||
<a
|
||||
href="https://github.com/ohdearaugustin/charts">https://github.com/ohdearaugustin/charts</a>
|
||||
</p>
|
||||
|
||||
<h2>Adding a Helm repository</h2>
|
||||
|
||||
<p>Below is an example of how</p>
|
||||
<pre><code class="language-text-x-trilium-auto">helm repo add trilium https://triliumnext.github.io/helm-charts
|
||||
<h2>Adding a Helm repository</h2>
|
||||
<p>Below is an example of how</p><pre><code class="language-text-x-trilium-auto">helm repo add trilium https://triliumnext.github.io/helm-charts
|
||||
"trilium" has been added to your repositories</code></pre>
|
||||
<h2>How to install a chart</h2>
|
||||
|
||||
<p>After reviewing the <a href="https://github.com/TriliumNext/helm-charts/blob/main/charts/trilium/values.yaml"><code>values.yaml</code></a> from
|
||||
the Helm chart, modifying as required and then creating your own:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">helm install --create-namespace --namespace trilium trilium trilium/trilium -f values.yaml</code></pre>
|
||||
the Helm chart, modifying as required and then creating your own:</p><pre><code class="language-text-x-trilium-auto">helm install --create-namespace --namespace trilium trilium trilium/trilium -f values.yaml</code></pre>
|
||||
<p>For more information on using Helm, please refer to the Helm documentation,
|
||||
or create a Discussion in the TriliumNext GitHub Organization.</p>
|
||||
</div>
|
||||
|
@ -15,35 +15,23 @@
|
||||
<div class="ck-content">
|
||||
<p>This page describes manually installing Trilium on your server. <strong>Note that this is a not well supported way to install Trilium, problems may appear, information laid out here is quite out of date. It is recommended to use either Docker or packaged build installation.</strong>
|
||||
</p>
|
||||
|
||||
<h2>Requirements</h2>
|
||||
|
||||
<h2>Requirements</h2>
|
||||
<p>Trilium is a node.js application. Supported (tested) version of node.js
|
||||
is latest 14.X.X and 16.X.X. Trilium might work with older versions as
|
||||
well.</p>
|
||||
<p>You can check your node version with this command (node.js needs to be
|
||||
installed):</p>
|
||||
<pre><code class="language-text-x-trilium-auto">node --version</code></pre>
|
||||
installed):</p><pre><code class="language-text-x-trilium-auto">node --version</code></pre>
|
||||
<p>If your Linux distribution has only an outdated version of node.js, you
|
||||
can take a look at the installation instruction on node.js website, which
|
||||
covers most popular distributions.</p>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<p>There are some dependencies required. You can see command for Debian and
|
||||
its derivatives (like Ubuntu) below:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">sudo apt install libpng16-16 libpng-dev pkg-config autoconf libtool build-essential nasm libx11-dev libxkbfile-dev</code></pre>
|
||||
its derivatives (like Ubuntu) below:</p><pre><code class="language-text-x-trilium-auto">sudo apt install libpng16-16 libpng-dev pkg-config autoconf libtool build-essential nasm libx11-dev libxkbfile-dev</code></pre>
|
||||
<h2>Installation</h2>
|
||||
|
||||
|
||||
<h3>Download</h3>
|
||||
|
||||
<h3>Download</h3>
|
||||
<p>You can either download source code zip/tar from <a href="https://github.com/TriliumNext/Notes/releases/latest%5D%5D">https://github.com/TriliumNext/Notes/releases/latest]]</a> %%{WARNING}%%or
|
||||
clone git repository <strong>from stable branch</strong> with</p>
|
||||
<pre><code class="language-text-x-trilium-auto">git clone -b stable https://github.com/triliumnext/notes.git %%{WARNING}%%</code></pre>
|
||||
<h2>Installation</h2>
|
||||
|
||||
<pre><code class="language-text-x-trilium-auto">cd trilium
|
||||
clone git repository <strong>from stable branch</strong> with</p><pre><code class="language-text-x-trilium-auto">git clone -b stable https://github.com/triliumnext/notes.git %%{WARNING}%%</code></pre>
|
||||
<h2>Installation</h2><pre><code class="language-text-x-trilium-auto">cd trilium
|
||||
|
||||
# download all node dependencies
|
||||
npm install
|
||||
@ -53,18 +41,14 @@ npm rebuild
|
||||
|
||||
# bundles & minifies frontend JavaScript
|
||||
npm run webpack</code></pre>
|
||||
<h2>Run</h2>
|
||||
|
||||
<pre><code class="language-text-x-trilium-auto">cd trilium
|
||||
<h2>Run</h2><pre><code class="language-text-x-trilium-auto">cd trilium
|
||||
|
||||
# using nohup to make sure trilium keeps running after user logs out
|
||||
nohup TRILIUM_ENV=dev node src/www &</code></pre>
|
||||
<p>The application by default starts up on port 8080, so you can open your
|
||||
browser and navigate to <a href="http://localhost:8080">http://localhost:8080</a> to
|
||||
access Trilium (replace "localhost" with your hostname).</p>
|
||||
|
||||
<h2>TLS</h2>
|
||||
|
||||
<h2>TLS</h2>
|
||||
<p>Don't forget to <a href="../TLS%20Configuration.html">configure TLS</a> which
|
||||
is required for secure usage!</p>
|
||||
</div>
|
||||
|
@ -14,15 +14,10 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>This page describes configuring the Trilium module included in NixOS.</p>
|
||||
|
||||
<h2>Requirements</h2>
|
||||
|
||||
<h2>Requirements</h2>
|
||||
<p><a href="https://nixos.org/">NixOS</a> installation.</p>
|
||||
|
||||
<h2>Configuration</h2>
|
||||
|
||||
<p>Add this to your <code>configuration.nix</code>:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">services.trilium-server.enable = true;
|
||||
<h2>Configuration</h2>
|
||||
<p>Add this to your <code>configuration.nix</code>:</p><pre><code class="language-text-x-trilium-auto">services.trilium-server.enable = true;
|
||||
|
||||
# default data directory: /var/lib/trilium
|
||||
#services.trilium-server.dataDir = "/var/lib/trilium-sync-server";
|
||||
|
@ -17,32 +17,27 @@
|
||||
you want to use for your Trilium server.</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Download docker image and create container</p>
|
||||
<pre><code class="language-text-x-trilium-auto"> docker pull triliumnext/notes:[VERSION]
|
||||
<p>Download docker image and create container</p><pre><code class="language-text-x-trilium-auto"> docker pull triliumnext/notes:[VERSION]
|
||||
docker create --name trilium -t -p 127.0.0.1:8080:8080 -v ~/trilium-data:/home/node/trilium-data triliumnext/notes:[VERSION]</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Configure Apache proxy and websocket proxy</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Enable apache proxy modules</p>
|
||||
<pre><code class="language-text-x-trilium-auto"> a2enmod ssl
|
||||
<p>Enable apache proxy modules</p><pre><code class="language-text-x-trilium-auto"> a2enmod ssl
|
||||
a2enmod proxy
|
||||
a2enmod proxy_http
|
||||
a2enmod proxy_wstunnel</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Create a new let's encrypt certificate</p>
|
||||
<pre><code class="language-text-x-trilium-auto"> sudo certbot certonly -d trilium.mydomain.com</code></pre>
|
||||
<p>Create a new let's encrypt certificate</p><pre><code class="language-text-x-trilium-auto"> sudo certbot certonly -d trilium.mydomain.com</code></pre>
|
||||
<p>Choose standalone (2) and note the location of the created certificates
|
||||
(typically /etc/letsencrypt/live/...)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Create a new virtual host file for apache (you may want to use <code>apachectl -S</code> to
|
||||
determine the server root location, mine is /etc/apache2)</p>
|
||||
<pre><code class="language-text-x-trilium-auto"> sudo nano /etc/apache2/sites-available/trilium.yourdomain.com.conf</code></pre>
|
||||
<p>Paste (and customize) the following text into the configuration file</p>
|
||||
<pre><code class="language-text-x-trilium-auto">
|
||||
determine the server root location, mine is /etc/apache2)</p><pre><code class="language-text-x-trilium-auto"> sudo nano /etc/apache2/sites-available/trilium.yourdomain.com.conf</code></pre>
|
||||
<p>Paste (and customize) the following text into the configuration file</p><pre><code class="language-text-x-trilium-auto">
|
||||
ServerName http://trilium.yourdomain.com
|
||||
RewriteEngine on
|
||||
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,QSA,R=permanent]
|
||||
@ -76,8 +71,7 @@
|
||||
<ol>
|
||||
<li>
|
||||
<p>Create a new empty file called <code>/lib/systemd/system/trilium.service</code> with
|
||||
the contents</p>
|
||||
<pre><code class="language-text-x-trilium-auto"> [Unit]
|
||||
the contents</p><pre><code class="language-text-x-trilium-auto"> [Unit]
|
||||
Description=Trilium Server
|
||||
Requires=docker.service
|
||||
After=docker.service
|
||||
@ -91,8 +85,7 @@
|
||||
WantedBy=local.target</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Install, enable and start service</p>
|
||||
<pre><code class="language-text-x-trilium-auto"> sudo systemctl daemon-reload
|
||||
<p>Install, enable and start service</p><pre><code class="language-text-x-trilium-auto"> sudo systemctl daemon-reload
|
||||
sudo systemctl enable trilium.service
|
||||
sudo systemctl start trilium.service</code></pre>
|
||||
</li>
|
||||
|
@ -16,19 +16,16 @@
|
||||
<p>Configure Nginx proxy and HTTPS. The operating system here is Ubuntu 18.04.</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Download Nginx and remove Apache2</p>
|
||||
<pre><code class="language-text-x-trilium-auto">sudo apt-get install nginx
|
||||
<p>Download Nginx and remove Apache2</p><pre><code class="language-text-x-trilium-auto">sudo apt-get install nginx
|
||||
sudo apt-get remove apache2</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Create configure file</p>
|
||||
<pre><code class="language-text-x-trilium-auto">cd /etc/nginx/conf.d
|
||||
<p>Create configure file</p><pre><code class="language-text-x-trilium-auto">cd /etc/nginx/conf.d
|
||||
vim default.conf</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Fill the file with the context shown below, part of the setting show be
|
||||
changed. Then you can enjoy your web with HTTPS forced and proxy.</p>
|
||||
<pre><code class="language-text-x-trilium-auto"># This part is for proxy and HTTPS configure
|
||||
changed. Then you can enjoy your web with HTTPS forced and proxy.</p><pre><code class="language-text-x-trilium-auto"># This part is for proxy and HTTPS configure
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name trilium.example.net; #change trilium.example.net to your domain without HTTPS or HTTP.
|
||||
|
@ -23,24 +23,16 @@
|
||||
of unauthorized access, even if someone has obtained your password. It’s
|
||||
highly recommended for securing sensitive information stored in your notes.</p>
|
||||
<p>Warning! OpenID and TOTP cannot be both used at the same time!</p>
|
||||
|
||||
<h2>Log in with your Google Account with OpenID!</h2>
|
||||
|
||||
<h2>Log in with your Google Account with OpenID!</h2>
|
||||
<p>OpenID is a standardized way to let you log into websites using an account
|
||||
from another service, like Google, to verify your identity.</p>
|
||||
|
||||
<h2>Why Time-based One Time Passwords?</h2>
|
||||
|
||||
<h2>Why Time-based One Time Passwords?</h2>
|
||||
<p>TOTP (Time-Based One-Time Password) is a security feature that generates
|
||||
a unique, temporary code on your device, like a smartphone, which changes
|
||||
every 30 seconds. You use this code, along with your password, to log into
|
||||
your account, making it much harder for anyone else to access them.</p>
|
||||
|
||||
<h2>Setup</h2>
|
||||
|
||||
|
||||
<h3>TOTP</h3>
|
||||
|
||||
<h2>Setup</h2>
|
||||
<h3>TOTP</h3>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Start Trilium Notes normally.</p>
|
||||
@ -57,8 +49,7 @@
|
||||
<li>
|
||||
<p>Set an environment variable "TOTP_SECRET" as the generated secret. Environment
|
||||
variables can be set with a .env file in the root directory, by defining
|
||||
them in the command line, or with a docker container.</p>
|
||||
<pre><code class="language-text-x-trilium-auto"># .env in the project root directory
|
||||
them in the command line, or with a docker container.</p><pre><code class="language-text-x-trilium-auto"># .env in the project root directory
|
||||
TOTP_ENABLED="true"
|
||||
TOTP_SECRET="secret"</code></pre><pre><code class="language-text-x-trilium-auto"># Terminal/CLI
|
||||
export TOTP_ENABLED="true"
|
||||
@ -84,9 +75,7 @@ docker run -p 8080:8080 -v ~/trilium-data:/home/node/trilium-data -e TOTP_ENABLE
|
||||
<p>Load the secret into an authentication app like google authenticator</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h3>OpenID</h3>
|
||||
|
||||
<h3>OpenID</h3>
|
||||
<p><em>Currently only compatible with Google. Other services like Authentik and Auth0 are planned on being added.</em>
|
||||
</p>
|
||||
<p>In order to setup OpenID, you will need to setup a authentication provider.
|
||||
@ -96,23 +85,16 @@ docker run -p 8080:8080 -v ~/trilium-data:/home/node/trilium-data -e TOTP_ENABLE
|
||||
and secret you obtained from google. Environment variables can be set with
|
||||
a .env file in the root directory, by defining them in the command line,
|
||||
or with a docker container.</p>
|
||||
|
||||
<h4>.env File</h4>
|
||||
|
||||
<pre><code class="language-text-x-trilium-auto"># .env in the project root directory
|
||||
<h4>.env File</h4><pre><code class="language-text-x-trilium-auto"># .env in the project root directory
|
||||
SSO_ENABLED="true"
|
||||
BASE_URL="http://localhost:8080"
|
||||
CLIENT_ID=
|
||||
SECRET=</code></pre>
|
||||
<h4>Environment variable (linux)</h4>
|
||||
|
||||
<pre><code class="language-text-x-trilium-auto">export SSO_ENABLED="true"
|
||||
<h4>Environment variable (linux)</h4><pre><code class="language-text-x-trilium-auto">export SSO_ENABLED="true"
|
||||
export BASE_URL="http://localhost:8080"
|
||||
export CLIENT_ID=
|
||||
export SECRET=</code></pre>
|
||||
<h4>Docker</h4>
|
||||
|
||||
<pre><code class="language-text-x-trilium-auto">docker run -d -p 8080:8080 -v ~/trilium-data:/home/node/trilium-data -e SSO_ENABLED="true" -e BASE_URL="http://localhost:8080" -e CLIENT_ID= -e SECRET= triliumnext/notes:[VERSION]</code></pre>
|
||||
<h4>Docker</h4><pre><code class="language-text-x-trilium-auto">docker run -d -p 8080:8080 -v ~/trilium-data:/home/node/trilium-data -e SSO_ENABLED="true" -e BASE_URL="http://localhost:8080" -e CLIENT_ID= -e SECRET= triliumnext/notes:[VERSION]</code></pre>
|
||||
<p>After you restart Trilium Notes, you will be redirected to Google's account
|
||||
selection page. Login to an account and Trilium Next will bind to that
|
||||
account, allowing you to login with it.</p>
|
||||
|
@ -18,9 +18,7 @@
|
||||
<p>For a more robust solution, consider using TLS termination with a reverse
|
||||
proxy (recommended, e.g., Nginx). You can follow a <a href="https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04">guide like this</a> for
|
||||
such setups.</p>
|
||||
|
||||
<h2>Obtaining a TLS Certificate</h2>
|
||||
|
||||
<h2>Obtaining a TLS Certificate</h2>
|
||||
<p>You have two options for obtaining a TLS certificate:</p>
|
||||
<ul>
|
||||
<li><strong>Recommended</strong>: Obtain a TLS certificate signed by a root
|
||||
@ -31,13 +29,10 @@
|
||||
to the additional complexity of importing the certificate into all machines
|
||||
connecting to the server.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Modifying <code>config.ini</code></h2>
|
||||
|
||||
<h2>Modifying <code>config.ini</code></h2>
|
||||
<p>Once you have your certificate, modify the <code>config.ini</code> file
|
||||
in the <a href="../Data%20directory.html">data directory</a> to configure
|
||||
Trilium to use it:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">[Network]
|
||||
Trilium to use it:</p><pre><code class="language-text-x-trilium-auto">[Network]
|
||||
port=8080
|
||||
# Set to true for TLS/SSL/HTTPS (secure), false for HTTP (insecure).
|
||||
https=true
|
||||
@ -53,14 +48,11 @@ keyPath=/[username]/.acme.sh/[hostname]/example.com.key</code></pre>
|
||||
or another directory accessible by the Docker container, such as <code>/home/node/trilium-data/[DIR IN DATA DIRECTORY]</code>.</p>
|
||||
<p>After configuring <code>config.ini</code>, restart Trilium and access the
|
||||
hostname using "https".</p>
|
||||
|
||||
<h2>Self-Signed Certificate</h2>
|
||||
|
||||
<h2>Self-Signed Certificate</h2>
|
||||
<p>If you opt to use a self-signed certificate for your server instance,
|
||||
note that the desktop instance will not trust it by default.</p>
|
||||
<p>To bypass this, disable certificate validation by setting the following
|
||||
environment variable (for Linux):</p>
|
||||
<pre><code class="language-text-x-trilium-auto">export NODE_TLS_REJECT_UNAUTHORIZED=0
|
||||
environment variable (for Linux):</p><pre><code class="language-text-x-trilium-auto">export NODE_TLS_REJECT_UNAUTHORIZED=0
|
||||
trilium</code></pre>
|
||||
<p>Trilium provides scripts to start in this mode, such as <code>trilium-no-cert-check.bat</code> for
|
||||
Windows.</p>
|
||||
|
@ -18,25 +18,19 @@
|
||||
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" alt="">
|
||||
</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
|
||||
the sync server. Once configured, synchronization is automatic and ongoing,
|
||||
requiring no manual intervention.</p>
|
||||
|
||||
<h2>Setting Up Synchronization</h2>
|
||||
|
||||
|
||||
<h3>Security Considerations</h3>
|
||||
|
||||
<h2>Setting Up Synchronization</h2>
|
||||
<h3>Security Considerations</h3>
|
||||
<p>Setting up the server securely is critical and can be complex. It is crucial
|
||||
to use a valid <a href="Server%20Installation/TLS%20Configuration.html">TLS certificate</a> (HTTPS)
|
||||
rather than an unencrypted HTTP connection to ensure security and avoid
|
||||
potential vulnerabilities.</p>
|
||||
|
||||
<h3>Synchronizing a Desktop Instance with a Sync Server</h3>
|
||||
|
||||
<h3>Synchronizing a Desktop Instance with a Sync Server</h3>
|
||||
<p>This method is used when you already have a desktop instance of Trilium
|
||||
and want to set up a sync server on your web host.</p>
|
||||
<ol>
|
||||
@ -47,8 +41,7 @@
|
||||
instance address" to your sync server's address. Click Save.</li>
|
||||
</ol>
|
||||
<p>
|
||||
<img src="../Attachments/sync-config.png" alt="screenshot of the sync settings options modal"
|
||||
/>
|
||||
<img src="../Attachments/sync-config.png" alt="screenshot of the sync settings options modal">
|
||||
</p>
|
||||
<ol>
|
||||
<li><strong>Testing Sync</strong>: Click the "Test sync" button to verify
|
||||
@ -58,9 +51,7 @@
|
||||
to confirm when the sync is complete. Once finished, you should see the
|
||||
login screen on the server.</li>
|
||||
</ol>
|
||||
|
||||
<h3>Synchronizing a Desktop Instance from a Sync Server</h3>
|
||||
|
||||
<h3>Synchronizing a Desktop Instance from a Sync Server</h3>
|
||||
<p>This method is used when you already have a sync server and want to configure
|
||||
a new desktop instance to sync with it.</p>
|
||||
<ol>
|
||||
@ -69,8 +60,7 @@
|
||||
to set up sync with a sync server.</li>
|
||||
</ol>
|
||||
<p>
|
||||
<img src="../Attachments/sync-init.png" alt="screenshot of the sync from server setup page"
|
||||
/>
|
||||
<img src="../Attachments/sync-init.png" alt="screenshot of the sync from server setup page">
|
||||
</p>
|
||||
<ol>
|
||||
<li><strong>Server Details</strong>: Configure the Trilium server address
|
||||
@ -79,14 +69,11 @@
|
||||
you will see the following screen:</li>
|
||||
</ol>
|
||||
<p>
|
||||
<img src="../Attachments/sync-in-progress.png" alt="screenshot of the sync page"
|
||||
/>
|
||||
<img src="../Attachments/sync-in-progress.png" alt="screenshot of the sync page">
|
||||
</p>
|
||||
<p>Once synchronization is complete, you will be automatically redirected
|
||||
to the Trilium application.</p>
|
||||
|
||||
<h2>Proxy Configuration</h2>
|
||||
|
||||
<h2>Proxy Configuration</h2>
|
||||
<p>Two proxy setups are supported:</p>
|
||||
<ul>
|
||||
<li><strong>Explicit Proxy Configuration</strong>: Set the proxy server in
|
||||
@ -94,36 +81,25 @@
|
||||
<li><strong>System Proxy Settings</strong>: If no proxy server is explicitly
|
||||
configured, Trilium will use the system proxy settings.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Troubleshooting</h2>
|
||||
|
||||
|
||||
<h3>Date/Time Synchronization</h3>
|
||||
|
||||
<h2>Troubleshooting</h2>
|
||||
<h3>Date/Time Synchronization</h3>
|
||||
<p>For successful synchronization, both client and server must have the same
|
||||
date and time, with a tolerance of up to five minutes.</p>
|
||||
|
||||
<h3>Certificate Issues</h3>
|
||||
|
||||
<h3>Certificate Issues</h3>
|
||||
<p>When using TLS, Trilium will verify the server certificate. If verification
|
||||
fails (e.g., due to self-signed certificates or certain corporate proxies),
|
||||
you can run the Trilium client with the <code>NODE_TLS_REJECT_UNAUTHORIZED</code> environment
|
||||
variable set to <code>0</code>:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">export NODE_TLS_REJECT_UNAUTHORIZED=0</code></pre>
|
||||
variable set to <code>0</code>:</p><pre><code class="language-text-x-trilium-auto">export NODE_TLS_REJECT_UNAUTHORIZED=0</code></pre>
|
||||
<p>This will disable TLS certificate verification, significantly reducing
|
||||
security and exposing the setup to MITM attacks. It is strongly recommended
|
||||
to use a valid signed server certificate. Newer Trilium versions include
|
||||
a script called <code>trilium-no-cert-check.sh</code> for this purpose.</p>
|
||||
|
||||
<h3>Conflict Resolution</h3>
|
||||
|
||||
<h3>Conflict Resolution</h3>
|
||||
<p>If you edit the same note on multiple instances before synchronization,
|
||||
Trilium resolves conflicts by retaining the newer change and discarding
|
||||
the older one. The older version remains accessible in <a href="../Basic%20Concepts/Note/Note%20Revisions.html">note revisions</a>,
|
||||
allowing data recovery if needed.</p>
|
||||
|
||||
<h3>Hash Check</h3>
|
||||
|
||||
<h3>Hash Check</h3>
|
||||
<p>After each synchronization, Trilium computes a hash of all synced data
|
||||
on both the client and the sync server. If there is a discrepancy, Trilium
|
||||
will automatically initiate a recovery mechanism to resolve the issue.</p>
|
||||
|
@ -15,9 +15,7 @@
|
||||
<div class="ck-content">
|
||||
<p>This document outlines the steps required to upgrade Trilium to a new
|
||||
release version.</p>
|
||||
|
||||
<h2>How to Upgrade</h2>
|
||||
|
||||
<h2>How to Upgrade</h2>
|
||||
<p>Trilium does not support built-in automatic upgrades; all updates must
|
||||
be performed manually. The upgrade process varies depending on the installation
|
||||
method:</p>
|
||||
@ -28,17 +26,13 @@
|
||||
the <a href="https://github.com/TriliumNext/Notes/releases/latest">release page</a> and
|
||||
replace the existing application files.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Database Compatibility and Migration</h2>
|
||||
|
||||
<h2>Database Compatibility and Migration</h2>
|
||||
<p>Upon startup, Trilium will automatically migrate the <a href="../Advanced%20Usage/Database.html">database</a> to
|
||||
the new version. Note that after migration, older versions of Trilium will
|
||||
be unable to read the database. If you need to revert to a previous version
|
||||
of Trilium and its database, you can restore the <a href="Backup.html">backup</a> that
|
||||
is created prior to migration.</p>
|
||||
|
||||
<h2>Sync Compatibility</h2>
|
||||
|
||||
<h2>Sync Compatibility</h2>
|
||||
<p>The <a href="Synchronization.html">synchronization</a> protocol used by
|
||||
Trilium is versioned, requiring all members of the sync cluster to use
|
||||
the same protocol version. Therefore, when upgrading to a new version,
|
||||
|
@ -14,7 +14,7 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>
|
||||
<img src="Web Clipper_image.png" alt="" />
|
||||
<img src="Web Clipper_image.png" alt="">
|
||||
</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
|
||||
@ -22,9 +22,7 @@
|
||||
<p>Project is hosted <a href="https://github.com/TriliumNext/web-clipper">here</a>.</p>
|
||||
<p>Firefox and Chrome are supported browsers, but the chrome build should
|
||||
work on other chromium based browsers as well.</p>
|
||||
|
||||
<h2>Functionality</h2>
|
||||
|
||||
<h2>Functionality</h2>
|
||||
<ul>
|
||||
<li>select text and clip it with the right-click context menu</li>
|
||||
<li>click on an image or link and save it through context menu</li>
|
||||
@ -47,17 +45,13 @@
|
||||
<li>%%{WARNING}%% <a href="https://chromewebstore.google.com/detail/trilium-web-clipper/dfhgmnfclbebfobmblelddiejjcijbjm">Chrome Web Store</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Configuration</h2>
|
||||
|
||||
<h2>Configuration</h2>
|
||||
<p>The extension needs to connect to a running Trilium instance. By default,
|
||||
it scans a port range on the local computer to find a desktop Trilium instance.</p>
|
||||
<p>It's also possible to configure the <a href="Server%20Installation.html">server</a> address
|
||||
if you don't run the desktop application, or want it to work without the
|
||||
desktop application running.</p>
|
||||
|
||||
<h2>Username</h2>
|
||||
|
||||
<h2>Username</h2>
|
||||
<p>Older versions of Trilium (before 0.50) required username & password
|
||||
to authenticate, but this is no longer the case. You may enter anything
|
||||
in that field, it will not have any effect.</p>
|
||||
|
@ -18,28 +18,22 @@
|
||||
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" alt="">
|
||||
</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
|
||||
as a single continuous document.</p>
|
||||
|
||||
<h2>Features</h2>
|
||||
|
||||
|
||||
<h3>Linear Display</h3>
|
||||
|
||||
<h2>Features</h2>
|
||||
<h3>Linear Display</h3>
|
||||
<p>The Book Note format compiles the contents of all child notes into one
|
||||
continuous view. This makes it ideal for reading extensive information
|
||||
broken into smaller, manageable segments.</p>
|
||||
|
||||
<h3>Grid View Option</h3>
|
||||
|
||||
<h3>Grid View Option</h3>
|
||||
<p>Trilium also offers a "Grid View" option within the Book Note properties.
|
||||
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" alt="">
|
||||
</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
|
||||
|
@ -14,15 +14,13 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>
|
||||
<img src="6_Calendar View_image.png" alt="" />
|
||||
<img src="6_Calendar View_image.png" alt="">
|
||||
</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>
|
||||
|
||||
<h2>Creating a calendar</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -35,7 +33,7 @@
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img src="3_Calendar View_image.png" alt="" />
|
||||
<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,
|
||||
@ -44,16 +42,14 @@
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img src="5_Calendar View_image.png" alt="" />
|
||||
<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>
|
||||
|
||||
<h2>Creating a new event/note</h2>
|
||||
|
||||
<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.
|
||||
@ -64,20 +60,17 @@
|
||||
</li>
|
||||
<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="" />
|
||||
<br>
|
||||
<img src="Calendar View_image.png" alt="">
|
||||
</li>
|
||||
<li>Creating new notes from the calendar will respect the <code>~child:template</code> relation
|
||||
if set on the book note.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Interacting with events</h2>
|
||||
|
||||
<h2>Interacting with events</h2>
|
||||
<ul>
|
||||
<li>Hovering the mouse over an event will display information about the note.
|
||||
<br
|
||||
/>
|
||||
<img src="11_Calendar View_image.png" alt="" />
|
||||
<br>
|
||||
<img src="11_Calendar View_image.png" alt="">
|
||||
</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
|
||||
@ -86,9 +79,7 @@
|
||||
<li>The length of an event can be changed by placing the mouse to the right
|
||||
edge of the event and dragging the mouse around.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Configuring the calendar</h2>
|
||||
|
||||
<h2>Configuring the calendar</h2>
|
||||
<p>The following attributes can be added to the book type:</p>
|
||||
<table>
|
||||
<thead>
|
||||
@ -120,9 +111,7 @@
|
||||
</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>
|
||||
|
||||
<h2>Configuring the calendar events</h2>
|
||||
<p>For each note of the calendar, the following attributes can be used:</p>
|
||||
<table>
|
||||
<thead>
|
||||
@ -177,15 +166,14 @@
|
||||
</td>
|
||||
<td>Allows displaying the value of one or more promoted attributes in the
|
||||
calendar like this:
|
||||
<img src="13_Calendar View_image.png" alt="" />
|
||||
<br />
|
||||
<br /><code><br>#label:weight="promoted,number,single,precision=1"<br>#label:mood="promoted,alias=Mood,single,text"<br>#calendar:promotedAttributes="label:weight,label:mood" <br></code>
|
||||
<br
|
||||
/>
|
||||
<br />It can also be used with relations, case in which it will display the
|
||||
<img src="13_Calendar View_image.png" alt="">
|
||||
<br>
|
||||
<br><code><br>#label:weight="promoted,number,single,precision=1"<br>#label:mood="promoted,alias=Mood,single,text"<br>#calendar:promotedAttributes="label:weight,label:mood" <br></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><br>#relation:assignee="promoted,alias=Assignee,single,text"<br>#calendar:promotedAttributes="relation:assignee" <br>~assignee=@My assignee <br></code>
|
||||
<br>
|
||||
<br><code><br>#relation:assignee="promoted,alias=Assignee,single,text"<br>#calendar:promotedAttributes="relation:assignee" <br>~assignee=@My assignee <br></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -204,28 +192,21 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>How the calendar works</h2>
|
||||
|
||||
<h2>How the calendar works</h2>
|
||||
<p>
|
||||
<img src="17_Calendar View_image.png" alt="" />The calendar displays all the child notes of the book that have a <code>#startDate</code>.
|
||||
<img src="17_Calendar View_image.png" alt="">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>
|
||||
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="" />
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -244,11 +225,9 @@
|
||||
will not be displayed.</li>
|
||||
</ul>
|
||||
<p>
|
||||
<img src="12_Calendar View_image.png" alt="" />
|
||||
<img src="12_Calendar View_image.png" alt="">
|
||||
</p>
|
||||
|
||||
<h3>Using a different attribute as event title</h3>
|
||||
|
||||
<h3>Using a different attribute as event title</h3>
|
||||
<p>By default, events are displayed on the calendar by their note title.
|
||||
However, it is possible to configure a different attribute to be displayed
|
||||
instead.</p>
|
||||
@ -267,17 +246,15 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="7_Calendar View_image.png" alt="" />
|
||||
<img src="7_Calendar View_image.png" alt="">
|
||||
</td>
|
||||
<td>
|
||||
<img src="9_Calendar View_image.png" alt="" />
|
||||
<img src="9_Calendar View_image.png" alt="">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Using a relation attribute as event title</h3>
|
||||
|
||||
<h3>Using a relation attribute as event title</h3>
|
||||
<p>Similarly to using an attribute, use <code>#calendar:title</code> and set
|
||||
it to <code>~name</code> where <code>name</code> is the name of the relation
|
||||
to use.</p>
|
||||
@ -293,10 +270,10 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="8_Calendar View_image.png" alt="" />
|
||||
<img src="8_Calendar View_image.png" alt="">
|
||||
</td>
|
||||
<td>
|
||||
<img src="10_Calendar View_image.png" alt="" />
|
||||
<img src="10_Calendar View_image.png" alt="">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -316,10 +293,10 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="15_Calendar View_image.png" alt="" />
|
||||
<img src="15_Calendar View_image.png" alt="">
|
||||
</td>
|
||||
<td>
|
||||
<img src="2_Calendar View_image.png" alt="" />
|
||||
<img src="2_Calendar View_image.png" alt="">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
@ -18,7 +18,7 @@
|
||||
mouse, pen or touch on an infinite canvas. It also supports basic diagramming,
|
||||
text and graphics input.</p>
|
||||
<p>
|
||||
<img src="Canvas_image.png" alt="grafik" />
|
||||
<img src="Canvas_image.png" alt="grafik">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -31,21 +31,17 @@
|
||||
<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" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Adjusting the language of a code note</h2>
|
||||
|
||||
<h2>Adjusting the language of a code note</h2>
|
||||
<p>In the <a href="../Basic%20Concepts/UI%20Elements/Ribbon.html">Ribbon</a>,
|
||||
look for the <em>Note type</em> selector and click it to reveal the possible
|
||||
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" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Adjusting the list of languages</h2>
|
||||
|
||||
<h2>Adjusting the list of languages</h2>
|
||||
<p>Trilium supports syntax highlighting for many languages, but by default
|
||||
displays only some of them. The supported languages can be adjusted by
|
||||
going to <a href="../Basic%20Concepts/UI%20Elements/Options.html">Options</a>,
|
||||
|
@ -26,11 +26,8 @@
|
||||
<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">/*
|
||||
<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.
|
||||
*
|
||||
@ -104,12 +101,10 @@ class WordCountWidget extends api.NoteContextAwareWidget {
|
||||
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>
|
||||
|
||||
<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" alt="">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -16,9 +16,7 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -33,9 +31,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Entity events</h2>
|
||||
|
||||
<h2>Entity events</h2>
|
||||
<p>Other events are bound to some entity, these are defined as <a href="../../Advanced%20Usage/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>
|
||||
|
@ -18,9 +18,7 @@
|
||||
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>
|
||||
|
||||
<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>
|
||||
@ -33,15 +31,13 @@
|
||||
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>
|
||||
|
||||
<h2>Button use case</h2>
|
||||
<p>Let's take a look at our demo script (shipped with default Trilium <a href="../../Advanced%20Usage/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="" />
|
||||
<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
|
||||
@ -58,16 +54,12 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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
|
||||
@ -80,18 +72,12 @@
|
||||
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>
|
||||
|
||||
<h3>More showcases</h3>
|
||||
<p>You can see more scripting with explanation in <a href="../../Advanced%20Usage/Advanced%20Showcases.html">Advanced showcases</a>
|
||||
</p>
|
||||
|
||||
<h2>Events</h2>
|
||||
|
||||
<h2>Events</h2>
|
||||
<p>See <a href="Events.html">Events</a>.</p>
|
||||
|
||||
<h2>Script API</h2>
|
||||
|
||||
<h2>Script API</h2>
|
||||
<p>See <a href="Script%20API.html">Script API</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -14,35 +14,31 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Creating a new geo map</h2>
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1256/1044;width:50%;" src="8_Geo map_image.png"
|
||||
alt="" width="1256" height="1044">
|
||||
</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 class="image_resized" style="aspect-ratio:1720/1396;width:50%;" src="10_Geo map_image.png"
|
||||
alt="" width="1720" height="1396">
|
||||
</td>
|
||||
<td>By default the map will be empty and will show the entire world.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img src="8_Geo map_image.png" alt="">
|
||||
</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="">
|
||||
</td>
|
||||
<td>By default the map will be empty and will show the entire world.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Repositioning the map</h2>
|
||||
<ul>
|
||||
<li>Click and drag the map in order to move across the map.</li>
|
||||
@ -52,59 +48,54 @@
|
||||
<p>The position on the map and the zoom are saved inside the map note and
|
||||
restored when visiting again the note.</p>
|
||||
<h2>Adding a marker using the map</h2>
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<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.
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1730/416;width:50%;" src="3_Geo map_image.png"
|
||||
alt="" width="1730" height="416">
|
||||
</td>
|
||||
<td>Once pressed, the map will enter in the insert mode, as illustrated by
|
||||
the notification.
|
||||
<br>
|
||||
<br>Simply click the point on the map where to place the marker, or the Escape
|
||||
key to cancel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1586/404;width:50%;" src="9_Geo map_image.png"
|
||||
alt="" width="1586" height="404">
|
||||
</td>
|
||||
<td>Enter the name of the marker/note to be created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1696/608;width:50%;" src="17_Geo map_image.png"
|
||||
alt="" width="1696" height="608">
|
||||
</td>
|
||||
<td>Once confirmed, the marker will show up on the map and it will also be
|
||||
displayed as a child note of the map.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<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.
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img src="3_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>Once pressed, the map will enter in the insert mode, as illustrated by
|
||||
the notification.
|
||||
<br>
|
||||
<br>Simply click the point on the map where to place the marker, or the Escape
|
||||
key to cancel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img src="9_Geo map_image.png" alt="">
|
||||
</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="">
|
||||
</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>
|
||||
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
|
||||
of the child notes:</p>
|
||||
@ -152,143 +143,134 @@
|
||||
<p>The value of the attribute is made up of the latitude and longitude separated
|
||||
by a comma.</p>
|
||||
<h3>Adding from Google Maps</h3>
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:732/918;width:50%;" src="12_Geo map_image.png"
|
||||
alt="" width="732" height="918">
|
||||
</td>
|
||||
<td>Go to Google Maps on the web and look for a desired location, right click
|
||||
on it and a context menu will show up.
|
||||
<br>
|
||||
<br>Simply click on the first item displaying the coordinates and they will
|
||||
be copied to clipboard.
|
||||
<br>
|
||||
<br>Then paste the value inside the text box into the <code>#geolocation</code> attribute
|
||||
of a child note of the map (don't forget to surround the value with a <code>"</code> character).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img src="5_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>In Trilium, create a child note under the map.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1074/276;width:50%;" src="11_Geo map_image.png"
|
||||
alt="" width="1074" height="276">
|
||||
</td>
|
||||
<td>And then go to Owned Attributes and type <code>#geolocation="</code>, then
|
||||
paste from the clipboard as-is and then add the ending <code>"</code> character.
|
||||
Press Enter to confirm and the map should now be updated to contain the
|
||||
new note.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img src="12_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>Go to Google Maps on the web and look for a desired location, right click
|
||||
on it and a context menu will show up.
|
||||
<br>
|
||||
<br>Simply click on the first item displaying the coordinates and they will
|
||||
be copied to clipboard.
|
||||
<br>
|
||||
<br>Then paste the value inside the text box into the <code>#geolocation</code> attribute
|
||||
of a child note of the map (don't forget to surround the value with a <code>"</code> character).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img src="5_Geo map_image.png" alt="">
|
||||
</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="">
|
||||
</td>
|
||||
<td>And then go to Owned Attributes and type <code>#geolocation="</code>, then
|
||||
paste from the clipboard as-is and then add the ending <code>"</code> character.
|
||||
Press Enter to confirm and the map should now be updated to contain the
|
||||
new note.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Adding from OpenStreetMap</h3>
|
||||
<p>Similarly to the Google Maps approach:</p>
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img src="1_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>Go to any location on openstreetmap.org and right click to bring up the
|
||||
context menu. Select the “Show address” item.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img src="Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>The address will be visible in the top-left of the screen, in the place
|
||||
of the search bar.
|
||||
<br>
|
||||
<br>Select the coordinates and copy them into the clipboard.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img src="6_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>Simply paste the value inside the text box into the <code>#geolocation</code> attribute
|
||||
of a child note of the map and then it should be displayed on the map.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img src="1_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>Go to any location on openstreetmap.org and right click to bring up the
|
||||
context menu. Select the “Show address” item.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img src="Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>The address will be visible in the top-left of the screen, in the place
|
||||
of the search bar.
|
||||
<br>
|
||||
<br>Select the coordinates and copy them into the clipboard.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img src="6_Geo map_image.png" alt="">
|
||||
</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>
|
||||
<p>Trilium has basic support for displaying GPS tracks on the geo map.</p>
|
||||
<figure
|
||||
class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img src="4_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>To add a track, simply drag & drop a .gpx file inside the geo map
|
||||
in the note tree.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img src="15_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>In order for the file to be recognized as a GPS track, it needs to show
|
||||
up as <code>application/gpx+xml</code> in the <em>File type</em> field.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img src="7_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>When going back to the map, the track should now be visible.
|
||||
<br>
|
||||
<br>The start and end points of the track are indicated by the two blue markers.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<h2>Troubleshooting</h2>
|
||||
<p>
|
||||
<img src="13_Geo map_image.png" alt="">
|
||||
</p>
|
||||
<h3>Grid-like artifacts on the map</h3>
|
||||
<p>This occurs if the application is not at 100% zoom which causes the pixels
|
||||
of the map to not render correctly due to fractional scaling. The only
|
||||
possible solution is to set the UI zoom at 100% (default keyboard shortcut
|
||||
is <kbd>Ctrl</kbd>+<kbd>0</kbd>).</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img src="4_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>To add a track, simply drag & drop a .gpx file inside the geo map
|
||||
in the note tree.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img src="15_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>In order for the file to be recognized as a GPS track, it needs to show
|
||||
up as <code>application/gpx+xml</code> in the <em>File type</em> field.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img src="7_Geo map_image.png" alt="">
|
||||
</td>
|
||||
<td>When going back to the map, the track should now be visible.
|
||||
<br>
|
||||
<br>The start and end points of the track are indicated by the two blue markers.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Troubleshooting</h2>
|
||||
<p>
|
||||
<img src="13_Geo map_image.png" alt="">
|
||||
</p>
|
||||
<h3>Grid-like artifacts on the map</h3>
|
||||
<p>This occurs if the application is not at 100% zoom which causes the pixels
|
||||
of the map to not render correctly due to fractional scaling. The only
|
||||
possible solution is to set the UI zoom at 100% (default keyboard shortcut
|
||||
is <kbd>Ctrl</kbd>+<kbd>0</kbd>).</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
@ -18,15 +18,12 @@
|
||||
etc., all using a text description of the chart instead of manually drawing
|
||||
the diagram.</p>
|
||||
<p>For the official documentation of Mermaid.js see <a href="https://mermaid.js.org/intro/">mermaid.js.org/intro/</a>.</p>
|
||||
|
||||
<h2>ELK layout engine</h2>
|
||||
|
||||
<h2>ELK layout engine</h2>
|
||||
<p>Mermaid supports a different layout engine which supports slightly more
|
||||
complex diagrams, called the <a href="https://eclipse.dev/elk/">Eclipse Layout Kernel (ELK)</a>.
|
||||
Trilium has support for these as well, but it's not enabled by default.</p>
|
||||
<p>In order to activate ELK for any diagram, insert the following YAML frontmatter
|
||||
right at the beginning of the diagram:</p>
|
||||
<pre><code class="language-text-x-yaml">---
|
||||
right at the beginning of the diagram:</p><pre><code class="language-text-x-yaml">---
|
||||
config:
|
||||
layout: elk
|
||||
---</code></pre>
|
||||
@ -40,10 +37,10 @@ config:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="Mermaid%20Diagrams/ELK%20off.txt" alt="" />
|
||||
<img src="Mermaid%20Diagrams/ELK%20off.txt" alt="">
|
||||
</td>
|
||||
<td>
|
||||
<img src="Mermaid%20Diagrams/ELK%20on.txt" alt="" />
|
||||
<img src="Mermaid%20Diagrams/ELK%20on.txt" alt="">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
@ -17,11 +17,9 @@
|
||||
The search results will appear as sub-notes under these "saved search"
|
||||
notes. Here is an example of how it works:</p>
|
||||
<p>
|
||||
<img src="../Attachments/saved-search-image.gif" alt="save-search" />
|
||||
<img src="../Attachments/saved-search-image.gif" alt="save-search">
|
||||
</p>
|
||||
|
||||
<h2>Location</h2>
|
||||
|
||||
<h2>Location</h2>
|
||||
<p>By default, saved searches are stored in the day note. However, you can
|
||||
designate a different note to store saved searches by marking it with the <code>#searchHome</code> label.
|
||||
Additionally, for <a href="../Basic%20Concepts/Navigation/Workspace.html">workspaces</a>,
|
||||
|
@ -37,7 +37,7 @@
|
||||
<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>
|
||||
<p>For more information, see <a href="../Basic%20Concepts/Note/Read-Only%20Notes.html">Read-Only Notes</a>.</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
|
||||
here. You may use the graphical toolbar shown above, or enter formatting
|
||||
@ -48,11 +48,11 @@
|
||||
<li><em>Italic</em>: Type <code>*text*</code> or <code>_text_</code>
|
||||
</li>
|
||||
<li><code>Code</code>: Type `text`</li>
|
||||
<li><s>Strikethrough</s>: Type <code>~~text~~</code>
|
||||
<li><del>Strikethrough</del>: Type <code>~~text~~</code>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Lists</h3>
|
||||
<p>See <a href="Text/Lists.html">Lists</a>.</p>
|
||||
<p>See <a href="Text/Lists.html">Lists</a>.</p>
|
||||
<h3>Blocks</h3>
|
||||
<ul>
|
||||
<li>Block quote: Start a line with <code>></code> followed by a space</li>
|
||||
|
@ -14,19 +14,17 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>
|
||||
<img src="1_Code blocks_image.png" alt="" />
|
||||
<img src="1_Code blocks_image.png" alt="">
|
||||
</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.
|
||||
For larger files such as an entire log, see the dedicated <a href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/FVuX89AJuFSw">[missing note]</a> note
|
||||
type instead.</p>
|
||||
|
||||
<h2>Inserting a code block</h2>
|
||||
|
||||
<h2>Inserting a code block</h2>
|
||||
<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" alt="">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
|
||||
@ -42,9 +40,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Syntax highlighting</h2>
|
||||
|
||||
<h2>Syntax highlighting</h2>
|
||||
<p>Since TriliumNext v0.90.12, Trilium will try to offer syntax highlighting
|
||||
to the code block. Note that the syntax highlighting mechanism is slightly
|
||||
different than the one in <a href="../Code.html">Code Notes</a> notes as
|
||||
@ -55,18 +51,13 @@
|
||||
changing the language of the code block manually.</p>
|
||||
<p>When the language is set to <em>Plain text</em>, there will be no syntax
|
||||
highlighting.</p>
|
||||
|
||||
<h2>Changing the language of a code block</h2>
|
||||
|
||||
<h2>Changing the language of a code block</h2>
|
||||
<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="" />
|
||||
<br>
|
||||
<img src="2_Code blocks_image.png" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Adjusting the list of languages</h2>
|
||||
|
||||
<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
|
||||
type.</p>
|
||||
<p>The supported languages can be adjusted by going to <a href="../../Basic%20Concepts/UI%20Elements/Options.html">Options</a>,
|
||||
|
@ -14,22 +14,18 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>
|
||||
<img src="api/images/CBcZeC0OG3Ne/Content language & Right-t.png"
|
||||
alt="" />
|
||||
<img src="api/images/ZOupAe21YiqT/Content language & Right-t.png"
|
||||
alt="">
|
||||
</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
|
||||
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.</p>
|
||||
|
||||
<h2>Setting the language</h2>
|
||||
|
||||
<h2>Setting the language</h2>
|
||||
<p>To set the language of the content, go to “Basic Properties” and look
|
||||
for the “Language” field.</p>
|
||||
|
||||
<h2>Adjusting the list of languages</h2>
|
||||
|
||||
<h2>Adjusting the list of languages</h2>
|
||||
<p>By default there will be no language configured, they can be configured
|
||||
by going to settings or by selecting the “Configure languages” item when
|
||||
setting the language.</p>
|
||||
|
@ -18,43 +18,34 @@
|
||||
<p>To do so, go to <a href="../../Basic%20Concepts/UI%20Elements/Options.html">Options</a> and
|
||||
look for the <em>Text Notes</em> section. There is a corresponding section
|
||||
called <em>Formatting toolbar</em>.</p>
|
||||
|
||||
<h2>Floating</h2>
|
||||
|
||||
<h2>Floating</h2>
|
||||
<p>The floating bar is a more minimalist option, in which the formatting
|
||||
is hidden behind two different popups.</p>
|
||||
|
||||
<h3>Block-level popup</h3>
|
||||
|
||||
<h3>Block-level popup</h3>
|
||||
<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="" />
|
||||
<br>
|
||||
<img src="1_Formatting toolbar_image.png" alt="">
|
||||
</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" alt="">
|
||||
</p>
|
||||
|
||||
<h3>Inline popup</h3>
|
||||
|
||||
<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" alt="">
|
||||
</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>
|
||||
|
||||
<h2>Fixed</h2>
|
||||
|
||||
<h2>Fixed</h2>
|
||||
<p>The fixed formatting offers a more traditional editing paradigm, usually
|
||||
useful if a lot of formatting is needed.</p>
|
||||
<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" alt="">
|
||||
</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
|
||||
|
@ -14,18 +14,14 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Developer-specific formatting</h2>
|
||||
|
||||
|
||||
<h3>Keyboard shortcuts</h3>
|
||||
|
||||
<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" alt="">
|
||||
</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" alt="">button in
|
||||
<img src="1_Formatting_image.png" alt="">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>
|
||||
|
@ -20,30 +20,24 @@
|
||||
into the <a href="../../Basic%20Concepts/Navigation/Tree%20Concepts.html">note tree</a>.
|
||||
Its reference can be copied into a text note, in order to display it in
|
||||
the text itself.</p>
|
||||
|
||||
<h2>Uploading images</h2>
|
||||
|
||||
<h2>Uploading images</h2>
|
||||
<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" alt="">
|
||||
</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" alt="">
|
||||
</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>
|
||||
|
||||
<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="" />
|
||||
<br>
|
||||
<img src="11_Images_image.png" alt="">
|
||||
</p>
|
||||
|
||||
<h3>Alignment</h3>
|
||||
|
||||
<h3>Alignment</h3>
|
||||
<p>The first set of options configure the alignment are, in order:</p>
|
||||
<table>
|
||||
<thead>
|
||||
@ -57,11 +51,11 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="7_Images_image.png" alt="" />
|
||||
<img src="7_Images_image.png" alt="">
|
||||
</td>
|
||||
<td>Inline</td>
|
||||
<td>
|
||||
<img src="2_Images_image.png" alt="" />
|
||||
<img src="2_Images_image.png" alt="">
|
||||
</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 & drop or cut-paste
|
||||
@ -69,32 +63,32 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="12_Images_image.png" alt="" />
|
||||
<img src="12_Images_image.png" alt="">
|
||||
</td>
|
||||
<td>Centered image</td>
|
||||
<td>
|
||||
<img src="3_Images_image.png" alt="" />
|
||||
<img src="3_Images_image.png" alt="">
|
||||
</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" alt="">
|
||||
</td>
|
||||
<td>Wrap text</td>
|
||||
<td>
|
||||
<img src="9_Images_image.png" alt="" />
|
||||
<img src="9_Images_image.png" alt="">
|
||||
</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" alt="">
|
||||
</td>
|
||||
<td>Block align</td>
|
||||
<td>
|
||||
<img src="4_Images_image.png" alt="" />
|
||||
<img src="4_Images_image.png" alt="">
|
||||
</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
|
||||
@ -102,9 +96,7 @@
|
||||
</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
|
||||
|
@ -19,9 +19,7 @@
|
||||
<li>Numbered lists (or ordered lists).</li>
|
||||
<li>To-do lists</li>
|
||||
</ul>
|
||||
|
||||
<h2>Keyboard shortcuts</h2>
|
||||
|
||||
<h2>Keyboard shortcuts</h2>
|
||||
<ul>
|
||||
<li>Bulleted list: Start a line with <code>*</code> or <code>-</code> followed
|
||||
by a space;</li>
|
||||
@ -30,9 +28,7 @@
|
||||
<li>To-do list: Start a line with <code>[ ]</code> for an unchecked item or <code>[x]</code> for
|
||||
a checked item.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Headings, code blocks within lists</h2>
|
||||
|
||||
<h2>Headings, code blocks within lists</h2>
|
||||
<p>It possible to add content-level blocks such as headings, code blocks,
|
||||
tables within lists, as follows:</p>
|
||||
<table>
|
||||
@ -45,38 +41,38 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="5_Lists_image.png" alt="" />
|
||||
<img src="5_Lists_image.png" alt="">
|
||||
</td>
|
||||
<td>First, create a list.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="3_Lists_image.png" alt="" />
|
||||
<img src="3_Lists_image.png" alt="">
|
||||
</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" alt="">
|
||||
</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" alt="">
|
||||
</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" alt="">
|
||||
</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" alt="">
|
||||
</td>
|
||||
<td>Press Enter once more to create the new bullet.</td>
|
||||
</tr>
|
||||
|
@ -14,12 +14,9 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Configuration</h2>
|
||||
|
||||
<p>A webview needs to know which URL to render, and it can be provided by
|
||||
setting the <code>webViewSrc</code> attribute, such as:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">#webViewSrc="https://www.wikipedia.org"</code></pre>
|
||||
setting the <code>webViewSrc</code> attribute, such as:</p><pre><code class="language-text-x-trilium-auto">#webViewSrc="https://www.wikipedia.org"</code></pre>
|
||||
<h2>Web view on the server vs. Electron</h2>
|
||||
|
||||
<p>When accessing Trilium via a browser instead of the desktop application,
|
||||
the web view will still try to render the content of the desired webpage.
|
||||
However, since it's running in a browser there are quite a few limitations
|
||||
|
@ -14,7 +14,6 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Choose the setup</h2>
|
||||
|
||||
<p><strong>Local only desktop/laptop</strong> - Allows a single instance on
|
||||
a desktop and will save the notes locally on that desktop.</p>
|
||||
<ol>
|
||||
@ -28,7 +27,7 @@
|
||||
<li><a href="Installation%20%26%20Setup/Server%20Installation.html">Server installation</a>
|
||||
</li>
|
||||
<li><a href="Installation%20%26%20Setup/Mobile%20Frontend.html">Mobile frontend</a> (optional)</li>
|
||||
<li><a href="https://heroku.com/deploy?template=https://github.com/feilongfl/trilium-heroku"><img src="Attachments/home-button.svg" alt="Deploy" /></a> %%{WARNING}%%</li>
|
||||
<li><a href="https://heroku.com/deploy?template=https://github.com/feilongfl/trilium-heroku"><img src="Attachments/home-button.svg" alt="Deploy"></a>%%{WARNING}%%</li>
|
||||
<li><a href="https://www.pikapods.com/pods?run=trilium-next">PikaPods managed hosting</a>
|
||||
</li>
|
||||
</ol>
|
||||
@ -47,9 +46,7 @@
|
||||
<li><a href="Installation%20%26%20Setup/Synchronization.html">Synchronization</a>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h2>Basic concepts</h2>
|
||||
|
||||
<h2>Basic concepts</h2>
|
||||
<ol>
|
||||
<li>Understand <a href="Basic%20Concepts/Note.html">Note</a>
|
||||
</li>
|
||||
|
@ -14,15 +14,12 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Step 1. Find a place to place the themes</h2>
|
||||
|
||||
<p>Organization is an important aspect of managing a knowledge base. When
|
||||
developing a new theme or importing an existing one it's a good idea to
|
||||
keep them into one place.</p>
|
||||
<p>As such, the first step is to create a new note to gather all the themes.</p>
|
||||
<p></p>
|
||||
|
||||
<h2>Step 2. Create the theme</h2>
|
||||
|
||||
<h2>Step 2. Create the theme</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -33,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" alt="">
|
||||
</td>
|
||||
<td>Themes are code notes with a special attribute. Start by creating a new
|
||||
code note.</td>
|
||||
@ -50,17 +47,13 @@
|
||||
</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 {
|
||||
<p>To alter the different variables of the theme:</p><pre><code class="language-text-css">:root {
|
||||
--launcher-pane-background-color: #0d6efd;
|
||||
}</code></pre>
|
||||
<h2>Step 4. Activating the theme</h2>
|
||||
|
||||
<p>Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
|
||||
settings. You should see the newly created theme:</p>
|
||||
<p></p>
|
||||
@ -69,9 +62,7 @@
|
||||
<p>Do note that the theme will be based off of the legacy theme. To override
|
||||
that and base the theme on the new TriliumNext theme, see: <a href="Customize%20the%20Next%20theme.html">Theme base (legacy vs. next)</a>
|
||||
</p>
|
||||
|
||||
<h2>Step 5. Making changes</h2>
|
||||
|
||||
<h2>Step 5. Making changes</h2>
|
||||
<p>Simply go back to the note and change according to needs. To apply the
|
||||
changes to the current window, press Ctrl+Shift+R to refresh.</p>
|
||||
<p>It's a good idea to keep two windows, one for editing and the other one
|
||||
|
@ -25,41 +25,36 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="Custom app-wide CSS_image.png" alt="" />
|
||||
<img src="Custom app-wide CSS_image.png" alt="">
|
||||
</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" alt="">
|
||||
</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" alt="">
|
||||
</td>
|
||||
<td>Type the desired CSS.
|
||||
<br />
|
||||
<br />Generally it's a good idea to append <code>!important</code> for the styles
|
||||
<br>
|
||||
<br>Generally it's a good idea to append <code>!important</code> for the styles
|
||||
that are being changed, in order to prevent other</td>
|
||||
</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>
|
||||
|
||||
<h2>Example use-case: customizing the printing stylesheet</h2>
|
||||
|
||||
<h2>Example use-case: customizing the printing stylesheet</h2>
|
||||
<p>When printing a document or exporting as PDF, it is possible to adjust
|
||||
the style by creating a CSS note that uses the <code>@media</code> selector.</p>
|
||||
<p>For example, to change the font of the document from the one defined by
|
||||
the theme or the user to a serif one:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">@media print {
|
||||
the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">@media print {
|
||||
|
||||
body {
|
||||
|
||||
|
@ -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" alt="">
|
||||
</p>
|
||||
<p>The <code>appThemeBase</code> label can be set to one of the following values:</p>
|
||||
<ul>
|
||||
@ -27,13 +27,10 @@
|
||||
<li><code>next-dark</code>, for the always dark mode of the TriliumNext.</li>
|
||||
<li>Any other value is ignored and will use the legacy white theme instead.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Overrides</h2>
|
||||
|
||||
<h2>Overrides</h2>
|
||||
<p>Do note that the TriliumNext theme has a few more overrides than the legacy
|
||||
theme, so you might need to suffix <code>!important</code> if the style changes
|
||||
are not applied.</p>
|
||||
<pre><code class="language-text-css">:root {
|
||||
are not applied.</p><pre><code class="language-text-css">:root {
|
||||
--launcher-pane-background-color: #0d6efd !important;
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
@ -14,10 +14,8 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Detecting mobile vs. desktop</h2>
|
||||
|
||||
<p>The mobile layout is different than the one on the desktop. Use <code>body.mobile</code> and <code>body.desktop</code> to
|
||||
differentiate between them.</p>
|
||||
<pre><code class="language-text-css">body.mobile #root-widget {
|
||||
differentiate between them.</p><pre><code class="language-text-css">body.mobile #root-widget {
|
||||
/* Do something on mobile */
|
||||
}
|
||||
|
||||
@ -25,8 +23,7 @@ body.desktop #root-widget {
|
||||
/* Do something on desktop */
|
||||
}</code></pre>
|
||||
<p>Do note that there is also a “tablet mode” in the mobile layout. For that
|
||||
particular case media queries are required:</p>
|
||||
<pre><code class="language-text-css">@media (max-width: 991px) {
|
||||
particular case media queries are required:</p><pre><code class="language-text-css">@media (max-width: 991px) {
|
||||
|
||||
#launcher-pane {
|
||||
|
||||
@ -48,12 +45,10 @@ body.desktop #root-widget {
|
||||
|
||||
}</code></pre>
|
||||
<h2>Detecting horizontal vs. vertical layout</h2>
|
||||
|
||||
<p>The user can select between vertical layout (the classical one, where
|
||||
the launcher bar is on the left) and a horizontal layout (where the launcher
|
||||
bar is on the top and tabs are full-width).</p>
|
||||
<p>Different styles can be applied by using classes at <code>body</code> level:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">body.layout-vertical #left-pane {
|
||||
<p>Different styles can be applied by using classes at <code>body</code> level:</p><pre><code class="language-text-x-trilium-auto">body.layout-vertical #left-pane {
|
||||
/* Do something */
|
||||
}
|
||||
|
||||
@ -63,9 +58,7 @@ body.layout-horizontal #center-pane {
|
||||
<p>The two different layouts use different containers (but they are present
|
||||
in the DOM regardless of the user's choice), for example <code>#horizontal-main-container</code> and <code>#vertical-main-container</code> can
|
||||
be used to customize the background of the content section.</p>
|
||||
|
||||
<h2>Detecting platform (Windows, macOS) or Electron</h2>
|
||||
|
||||
<h2>Detecting platform (Windows, macOS) or Electron</h2>
|
||||
<p>It is possible to add particular styles that only apply to a given platform
|
||||
by using the classes in <code>body</code>:</p>
|
||||
<table>
|
||||
@ -85,15 +78,12 @@ body.layout-horizontal #center-pane {
|
||||
</tbody>
|
||||
</table>
|
||||
<p>It is also possible to only apply a style if running under Electron (desktop
|
||||
application):</p>
|
||||
<pre><code class="language-text-x-trilium-auto">body.electron {
|
||||
application):</p><pre><code class="language-text-x-trilium-auto">body.electron {
|
||||
background: blue;
|
||||
}</code></pre>
|
||||
<h3>Native title bar</h3>
|
||||
|
||||
<p>It's possible to detect if the user has selected the native title bar
|
||||
or the custom title bar by querying against <code>body</code>:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">body.electron.native-titlebar {
|
||||
or the custom title bar by querying against <code>body</code>:</p><pre><code class="language-text-x-trilium-auto">body.electron.native-titlebar {
|
||||
/* Do something */
|
||||
}
|
||||
|
||||
@ -101,43 +91,33 @@ body.electron:not(.native-titlebar) {
|
||||
/* Do something else */
|
||||
}</code></pre>
|
||||
<h3>Native window buttons</h3>
|
||||
|
||||
<p>When running under Electron with native title bar off, a feature was introduced
|
||||
to use the platform-specific window buttons such as the semaphore on macOS.</p>
|
||||
<p>See <a href="https://github.com/TriliumNext/Notes/pull/702">Native title bar buttons by eliandoran · Pull Request #702 · TriliumNext/Notes</a> for
|
||||
the original implementation of this feature, including screenshots.</p>
|
||||
|
||||
<h4>On Windows</h4>
|
||||
|
||||
<h4>On Windows</h4>
|
||||
<p>The colors of the native window button area can be adjusted using a RGB
|
||||
hex color:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">body {
|
||||
hex color:</p><pre><code class="language-text-x-trilium-auto">body {
|
||||
--native-titlebar-foreground: #ffffff;
|
||||
--native-titlebar-background: #ff0000;
|
||||
}</code></pre>
|
||||
<p>It is also possible to use transparency at the cost of reduced hover colors
|
||||
using a RGBA hex color:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">body {
|
||||
using a RGBA hex color:</p><pre><code class="language-text-x-trilium-auto">body {
|
||||
--native-titlebar-background: #ff0000aa;
|
||||
}</code></pre>
|
||||
<p>Note that the value is read when the window is initialized and then it
|
||||
is refreshed only when the user changes their light/dark mode preference.</p>
|
||||
|
||||
<h4>On macOS</h4>
|
||||
|
||||
<h4>On macOS</h4>
|
||||
<p>On macOS the semaphore window buttons are enabled by default when the
|
||||
native title bar is disabled. The offset of the buttons can be adjusted
|
||||
using:</p>
|
||||
<pre><code class="language-text-css">body {
|
||||
using:</p><pre><code class="language-text-css">body {
|
||||
--native-titlebar-darwin-x-offset: 12;
|
||||
--native-titlebar-darwin-y-offset: 14 !important;
|
||||
}</code></pre>
|
||||
<h3>Background/transparency effects on Windows (Mica)</h3>
|
||||
|
||||
<p>Windows 11 offers a special background/transparency effect called Mica,
|
||||
which can be enabled by themes by setting the <code>--background-material</code> variable
|
||||
at <code>body</code> level:</p>
|
||||
<pre><code class="language-text-css">body.electron.platform-win32 {
|
||||
at <code>body</code> level:</p><pre><code class="language-text-css">body.electron.platform-win32 {
|
||||
--background-material: tabbed;
|
||||
}</code></pre>
|
||||
<p>The value can be either <code>tabbed</code> (especially useful for the horizontal
|
||||
@ -145,20 +125,16 @@ body.electron:not(.native-titlebar) {
|
||||
<p>Do note that the Mica effect is applied at <code>body</code> level and the
|
||||
theme needs to make the entire hierarchy (semi-)transparent in order for
|
||||
it to be visible. Use the TrilumNext theme as an inspiration.</p>
|
||||
|
||||
<h2>Note icons, tab workspace accent color</h2>
|
||||
|
||||
<h2>Note icons, tab workspace accent color</h2>
|
||||
<p>Theme capabilities are small adjustments done through CSS variables that
|
||||
can affect the layout or the visual aspect of the application.</p>
|
||||
<p>In the tab bar, to display the icons of notes instead of the icon of the
|
||||
workspace:</p>
|
||||
<pre><code class="language-text-css">:root {
|
||||
workspace:</p><pre><code class="language-text-css">:root {
|
||||
--tab-note-icons: true;
|
||||
}</code></pre>
|
||||
<p>When a workspace is hoisted for a given tab, it is possible to get the
|
||||
background color of that workspace, for example to apply a small strip
|
||||
on the tab instead of the whole background color:</p>
|
||||
<pre><code class="language-text-css">.note-tab .note-tab-wrapper {
|
||||
on the tab instead of the whole background color:</p><pre><code class="language-text-css">.note-tab .note-tab-wrapper {
|
||||
--tab-background-color: initial !important;
|
||||
}
|
||||
|
||||
@ -172,22 +148,17 @@ body.electron:not(.native-titlebar) {
|
||||
background-color: var(--workspace-tab-background-color);
|
||||
}</code></pre>
|
||||
<h2>Custom fonts</h2>
|
||||
|
||||
<p>Currently the only way to include a custom font is to use <a href="../Advanced%20Usage/Custom%20Resource%20Providers.html">Custom resource providers</a>.
|
||||
Basically import a font into Trilium and assign it <code>#customResourceProvider=fonts/myfont.ttf</code> and
|
||||
then import the font in CSS via <code>/custom/fonts/myfont.ttf</code>.</p>
|
||||
|
||||
<h2>Dark and light themes</h2>
|
||||
|
||||
<p>A light theme needs to have the following CSS:</p>
|
||||
<pre><code class="language-text-css">:root {
|
||||
<h2>Dark and light themes</h2>
|
||||
<p>A light theme needs to have the following CSS:</p><pre><code class="language-text-css">:root {
|
||||
--theme-style: light;
|
||||
}</code></pre>
|
||||
<p>if the theme is dark, then <code>--theme-style</code> needs to be <code>dark</code>.</p>
|
||||
<p>If the theme is auto (e.g. supports both light or dark based on <code>prefers-color-scheme</code>)
|
||||
it must also declare (in addition to setting <code>--theme-style</code> to
|
||||
either <code>light</code> or <code>dark</code>):</p>
|
||||
<pre><code class="language-text-css">:root {
|
||||
either <code>light</code> or <code>dark</code>):</p><pre><code class="language-text-css">:root {
|
||||
|
||||
--theme-style-auto: true;
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>
|
||||
<img src="Anonymized Database_image.png" alt="" />
|
||||
<img src="Anonymized Database_image.png" alt="">
|
||||
</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
|
||||
@ -36,13 +36,10 @@
|
||||
make sure there's no stale sensitive data in the document file. The resulting
|
||||
file is stored in <code>anonymized</code> directory (placed in the <a href="../Installation%20%26%20Setup/Data%20directory.html">data directory</a>).
|
||||
You can safely attach it to a bug report.</p>
|
||||
|
||||
<h2>Command Line Anonymization</h2>
|
||||
|
||||
<h2>Command Line Anonymization</h2>
|
||||
<p>If your <a href="../Advanced%20Usage/Database.html">database</a> is corrupted
|
||||
to the point where Trilium cannot start, the anonymization process can
|
||||
still be executed via the command line:</p>
|
||||
<pre><code class="language-text-x-trilium-auto">node src/anonymize.js</code></pre>
|
||||
still be executed via the command line:</p><pre><code class="language-text-x-trilium-auto">node src/anonymize.js</code></pre>
|
||||
<p>Run this command from the directory containing Trilium's source files,
|
||||
typically found in the <code>resources/app</code> directory for desktop builds.</p>
|
||||
</div>
|
||||
|
@ -17,11 +17,8 @@
|
||||
the items that require update. When running behind a reverse proxy, the
|
||||
request can time out.</p>
|
||||
<p>The solution is to increase the timeout at proxy level.</p>
|
||||
|
||||
<h2>Nginx</h2>
|
||||
|
||||
<p>Add the following to the configuration file:</p>
|
||||
<pre><code class="language-text-x-nginx-conf">proxy_connect_timeout 300;
|
||||
<h2>Nginx</h2>
|
||||
<p>Add the following to the configuration file:</p><pre><code class="language-text-x-nginx-conf">proxy_connect_timeout 300;
|
||||
proxy_send_timeout 300;
|
||||
proxy_read_timeout 300;
|
||||
send_timeout 300;</code></pre>
|
||||
|
Loading…
x
Reference in New Issue
Block a user