mirror of
https://github.com/zadam/trilium.git
synced 2026-02-19 04:04:24 +01:00
docs(user): mention custom tiles & hiding labels for geomap
This commit is contained in:
parent
3db2c910e0
commit
9b2876a8ff
@ -5,116 +5,109 @@
|
||||
<p>Active content problem of safety, especially when this active content
|
||||
comes from a third-party such as if it is downloaded from a website and
|
||||
then imported into Trilium.</p>
|
||||
<p>When <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/_help_mHbBMPDPkVV5">importing</a> .zip
|
||||
archives into Trilium, <em>safe mode</em> is active by default which will
|
||||
try to prevent untrusted code from executing. For example, a <a href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">custom widget</a> needs
|
||||
the <code spellcheck="false">#widget</code> <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_HI6GBBIduIgv">label</a> in
|
||||
order to function; safe import works by renaming that label to <code spellcheck="false">#disabled:widget</code>.</p>
|
||||
<p>When <a href="#root/_help_mHbBMPDPkVV5">importing</a> .zip archives into Trilium, <em>safe mode</em> is
|
||||
active by default which will try to prevent untrusted code from executing.
|
||||
For example, a <a href="#root/_help_MgibgPcfeuGz">custom widget</a> needs the
|
||||
<code
|
||||
spellcheck="false">#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a> in order to function;
|
||||
safe import works by renaming that label to <code spellcheck="false">#disabled:widget</code>.</p>
|
||||
<h2>Safe mode</h2>
|
||||
<p>Sometimes active content can cause issues with the UI or the server, preventing
|
||||
it from functioning properly. <a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_64ZTlUPgEPtW">Safe mode</a> allows
|
||||
it from functioning properly. <a class="reference-link" href="#root/_help_64ZTlUPgEPtW">Safe mode</a> allows
|
||||
starting Trilium in such a way that active content is not loaded by default
|
||||
at start-up, allowing the user to fix the problematic scripts or widgets.</p>
|
||||
<h2>Types of active content</h2>
|
||||
<p>These are the types of active content in Trilium, along with a few examples
|
||||
of what untrusted content of that type could cause:</p>
|
||||
<figure class="table"
|
||||
style="width:100%;">
|
||||
<table class="ck-table-resized">
|
||||
<colgroup>
|
||||
<col style="width:15.79%;">
|
||||
<col style="width:10.35%;">
|
||||
<col style="width:40.71%;">
|
||||
<col style="width:33.15%;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Disabled on a safe <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/_help_mHbBMPDPkVV5">import</a>
|
||||
</th>
|
||||
<th>Description</th>
|
||||
<th>Potential risks of untrusted code</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><a href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_yIhgI5H7A2Sm">Front-end scripts</a>
|
||||
</th>
|
||||
<td>Yes</td>
|
||||
<td>Allow running arbitrary code on the client (UI) of Trilium, which can
|
||||
alter the user interface.</td>
|
||||
<td>A malicious script can execute server-side code, access un-encrypted notes
|
||||
or change their contents.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>
|
||||
</th>
|
||||
<td>Yes</td>
|
||||
<td>Can add new UI features to Trilium, for example by adding a new section
|
||||
in the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
|
||||
<td>The UI can be altered in such a way that it can be used to extract sensitive
|
||||
information or it can simply cause the application to crash.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_SPirpZypehBG">Backend scripts</a>
|
||||
</th>
|
||||
<td>Yes</td>
|
||||
<td>Can run custom code on the server of Trilium (Node.js environment), with
|
||||
full access to the notes and the database.</td>
|
||||
<td>Has access to all the unencrypted notes, but with full access to the database
|
||||
it can completely destroy the data. It also has access to execute other
|
||||
applications or alter the files and folders on the server).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_1vHRoWCEjj0L">Web View</a>
|
||||
</th>
|
||||
<td>Yes</td>
|
||||
<td>Displays a website inside a note.</td>
|
||||
<td>Can point to a phishing website which can collect the data (for example
|
||||
on a log in page).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>
|
||||
</th>
|
||||
<td>Yes</td>
|
||||
<td>Renders custom content inside a note, such as a dashboard or a new editor
|
||||
that is not officially supported by Trilium.</td>
|
||||
<td>Can affect the UI similar to front-end scripts or custom widgets since
|
||||
the scripts are not completely encapsulated, or they can act similar to
|
||||
a web view where they can collect data entered by the user.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a>
|
||||
</th>
|
||||
<td>No</td>
|
||||
<td>Can alter the layout and style of the UI using CSS, applied regardless
|
||||
of theme.</td>
|
||||
<td>Generally less problematic than the rest of active content, but a badly
|
||||
written CSS can affect the layout of the application, requiring the use
|
||||
of <a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_64ZTlUPgEPtW">Safe mode</a> to
|
||||
be able to use the application.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#root/pOsGYCXsbNQG/_help_pKK96zzmvBGf">Custom themes</a>
|
||||
</th>
|
||||
<td>No</td>
|
||||
<td>Can change the style of the entire UI.</td>
|
||||
<td>Similar to custom app-wide CSS.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Wy267RK4M69c/_help_gOKqSJgXLcIj">Icon Packs</a>
|
||||
</th>
|
||||
<td>No</td>
|
||||
<td>Introduces new icons that can be used for notes.</td>
|
||||
<td>Generally are more contained and less prone to cause issues, but they
|
||||
can cause performance issues (for example if the icon pack has millions
|
||||
of icons in it).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Disabled on a safe <a href="#root/_help_mHbBMPDPkVV5">import</a>
|
||||
</th>
|
||||
<th>Description</th>
|
||||
<th>Potential risks of untrusted code</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#root/_help_yIhgI5H7A2Sm">Front-end scripts</a>
|
||||
</td>
|
||||
<td>Yes</td>
|
||||
<td>Allow running arbitrary code on the client (UI) of Trilium, which can
|
||||
alter the user interface.</td>
|
||||
<td>A malicious script can execute server-side code, access un-encrypted notes
|
||||
or change their contents.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>
|
||||
</td>
|
||||
<td>Yes</td>
|
||||
<td>Can add new UI features to Trilium, for example by adding a new section
|
||||
in the <a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
|
||||
<td>The UI can be altered in such a way that it can be used to extract sensitive
|
||||
information or it can simply cause the application to crash.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="reference-link" href="#root/_help_SPirpZypehBG">Backend scripts</a>
|
||||
</td>
|
||||
<td>Yes</td>
|
||||
<td>Can run custom code on the server of Trilium (Node.js environment), with
|
||||
full access to the notes and the database.</td>
|
||||
<td>Has access to all the unencrypted notes, but with full access to the database
|
||||
it can completely destroy the data. It also has access to execute other
|
||||
applications or alter the files and folders on the server).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="reference-link" href="#root/_help_1vHRoWCEjj0L">Web View</a>
|
||||
</td>
|
||||
<td>Yes</td>
|
||||
<td>Displays a website inside a note.</td>
|
||||
<td>Can point to a phishing website which can collect the data (for example
|
||||
on a log in page).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>
|
||||
</td>
|
||||
<td>Yes</td>
|
||||
<td>Renders custom content inside a note, such as a dashboard or a new editor
|
||||
that is not officially supported by Trilium.</td>
|
||||
<td>Can affect the UI similar to front-end scripts or custom widgets since
|
||||
the scripts are not completely encapsulated, or they can act similar to
|
||||
a web view where they can collect data entered by the user.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="reference-link" href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a>
|
||||
</td>
|
||||
<td>No</td>
|
||||
<td>Can alter the layout and style of the UI using CSS, applied regardless
|
||||
of theme.</td>
|
||||
<td>Generally less problematic than the rest of active content, but a badly
|
||||
written CSS can affect the layout of the application, requiring the use
|
||||
of <a class="reference-link" href="#root/_help_64ZTlUPgEPtW">Safe mode</a> to
|
||||
be able to use the application.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#root/_help_pKK96zzmvBGf">Custom themes</a>
|
||||
</td>
|
||||
<td>No</td>
|
||||
<td>Can change the style of the entire UI.</td>
|
||||
<td>Similar to custom app-wide CSS.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="reference-link" href="#root/_help_gOKqSJgXLcIj">Icon Packs</a>
|
||||
</td>
|
||||
<td>No</td>
|
||||
<td>Introduces new icons that can be used for notes.</td>
|
||||
<td>Generally are more contained and less prone to cause issues, but they
|
||||
can cause performance issues (for example if the icon pack has millions
|
||||
of icons in it).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Active content badge</h2>
|
||||
<p>Starting with v0.102.0, on the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_IjZS7iK5EXtb">New Layout</a> a
|
||||
<p>Starting with v0.102.0, on the <a class="reference-link" href="#root/_help_IjZS7iK5EXtb">New Layout</a> a
|
||||
badge will be displayed near the note title, indicating that an active
|
||||
content is detected. Clicking the badge will reveal a menu with various
|
||||
options related to that content type, for example to open the documentation
|
||||
@ -122,5 +115,4 @@ style="width:100%;">
|
||||
<p>For some active content types, such as backend scripts with custom triggering
|
||||
conditions a toggle button will appear. This makes it possible to easily
|
||||
disable scripts or widgets, but also to re-enable them if an import was
|
||||
made with safe mode active.</p>
|
||||
<p> </p>
|
||||
made with safe mode active.</p>
|
||||
633
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/Geo Map.html
generated
vendored
633
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/Geo Map.html
generated
vendored
@ -1,9 +1,8 @@
|
||||
<aside class="admonition important">
|
||||
<p><a class="reference-link" href="#root/_help_zEY4DaJG4YT5">Attributes</a><a class="reference-link"
|
||||
href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a><a class="reference-link"
|
||||
href="#root/_help_zEY4DaJG4YT5">Attributes</a>Starting with Trilium v0.97.0,
|
||||
the geo map has been converted from a standalone <a href="#root/_help_KSZ04uQ2D1St">note type</a> to
|
||||
a type of view for the <a class="reference-link" href="#root/_help_0ESUbbAxVnoK">Note List</a>. </p>
|
||||
<p>Starting with Trilium v0.97.0, the geo map has been converted from a standalone
|
||||
<a
|
||||
href="#root/_help_KSZ04uQ2D1St">note type</a>to a type of view for the <a class="reference-link"
|
||||
href="#root/_help_0ESUbbAxVnoK">Note List</a>. </p>
|
||||
</aside>
|
||||
<figure class="image image-style-align-center">
|
||||
<img style="aspect-ratio:892/675;" src="9_Geo Map_image.png"
|
||||
@ -13,38 +12,39 @@
|
||||
on an attribute. It is also possible to add new notes at a specific location
|
||||
using the built-in interface.</p>
|
||||
<h2>Creating a new geo map</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:483/413;" src="15_Geo Map_image.png"
|
||||
width="483" height="413">
|
||||
</figure>
|
||||
</td>
|
||||
<td>Right click on any note on the note tree and select <em>Insert child note</em> → <em>Geo Map (beta)</em>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center image_resized" style="width:53.44%;">
|
||||
<img style="aspect-ratio:1720/1396;" src="8_Geo Map_image.png"
|
||||
width="1720" height="1396">
|
||||
</figure>
|
||||
</td>
|
||||
<td>By default the map will be empty and will show the entire world.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:483/413;" src="15_Geo Map_image.png"
|
||||
width="483" height="413">
|
||||
</figure>
|
||||
</td>
|
||||
<td>Right click on any note on the note tree and select <em>Insert child note</em> → <em>Geo Map (beta)</em>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center image_resized" style="width:53.44%;">
|
||||
<img style="aspect-ratio:1720/1396;" src="8_Geo Map_image.png"
|
||||
width="1720" height="1396">
|
||||
</figure>
|
||||
</td>
|
||||
<td>By default the map will be empty and will show the entire world.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<h2>Repositioning the map</h2>
|
||||
<ul>
|
||||
<li>Click and drag the map in order to move across the map.</li>
|
||||
@ -55,59 +55,60 @@
|
||||
restored when visiting again the note.</p>
|
||||
<h2>Adding a marker using the map</h2>
|
||||
<h3>Adding a new note using the plus button</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>To create a marker, first navigate to the desired point on the map. Then
|
||||
press the
|
||||
<img src="10_Geo Map_image.png">button in the <a href="#root/_help_XpOYSgsLkTJy">Floating buttons</a> (top-right)
|
||||
area.
|
||||
<br>
|
||||
<br>If the button is not visible, make sure the button section is visible
|
||||
by pressing the chevron button (
|
||||
<img src="17_Geo Map_image.png">) in the top-right of the map.</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png"
|
||||
width="1730" height="416">
|
||||
</td>
|
||||
<td>Once pressed, the map will enter in the insert mode, as illustrated by
|
||||
the notification.
|
||||
<br>
|
||||
<br>Simply click the point on the map where to place the marker, or the Escape
|
||||
key to cancel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png"
|
||||
width="1586" height="404">
|
||||
</td>
|
||||
<td>Enter the name of the marker/note to be created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map_image.png"
|
||||
width="1696" height="608">
|
||||
</td>
|
||||
<td>Once confirmed, the marker will show up on the map and it will also be
|
||||
displayed as a child note of the map.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>To create a marker, first navigate to the desired point on the map. Then
|
||||
press the
|
||||
<img src="10_Geo Map_image.png">button in the <a href="#root/_help_XpOYSgsLkTJy">Floating buttons</a> (top-right)
|
||||
area.
|
||||
<br>
|
||||
<br>If the button is not visible, make sure the button section is visible
|
||||
by pressing the chevron button (
|
||||
<img src="17_Geo Map_image.png">) in the top-right of the map.</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png"
|
||||
width="1730" height="416">
|
||||
</td>
|
||||
<td>Once pressed, the map will enter in the insert mode, as illustrated by
|
||||
the notification.
|
||||
<br>
|
||||
<br>Simply click the point on the map where to place the marker, or the Escape
|
||||
key to cancel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png"
|
||||
width="1586" height="404">
|
||||
</td>
|
||||
<td>Enter the name of the marker/note to be created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map_image.png"
|
||||
width="1696" height="608">
|
||||
</td>
|
||||
<td>Once confirmed, the marker will show up on the map and it will also be
|
||||
displayed as a child note of the map.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<h3>Adding a new note using the contextual menu</h3>
|
||||
<ol>
|
||||
<li>Right click anywhere on the map, where to place the newly created marker
|
||||
@ -120,15 +121,18 @@
|
||||
<h3>Adding an existing note on note from the note tree</h3>
|
||||
<ol>
|
||||
<li>Select the desired note in the <a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
|
||||
<li>Hold the mouse on the note and drag it to the map to the desired location.</li>
|
||||
<li>The map should be updated with the new marker.</li>
|
||||
<li
|
||||
>Hold the mouse on the note and drag it to the map to the desired location.</li>
|
||||
<li
|
||||
>The map should be updated with the new marker.</li>
|
||||
</ol>
|
||||
<p>This works for:</p>
|
||||
<ul>
|
||||
<li>Notes that are not part of the geo map, case in which a <a href="#root/_help_IakOLONlIfGI">clone</a> will
|
||||
be created.</li>
|
||||
<li>Notes that are a child of the geo map but not yet positioned on the map.</li>
|
||||
<li>Notes that are a child of the geo map and also positioned, case in which
|
||||
<li
|
||||
>Notes that are a child of the geo map and also positioned, case in which
|
||||
the marker will be relocated to the new position.</li>
|
||||
</ul>
|
||||
<aside class="admonition note">
|
||||
@ -138,8 +142,10 @@
|
||||
<h2>How the location of the markers is stored</h2>
|
||||
<p>The location of a marker is stored in the <code spellcheck="false">#geolocation</code> attribute
|
||||
of the child notes:</p>
|
||||
<img src="18_Geo Map_image.png"
|
||||
width="1288" height="278">
|
||||
<p>
|
||||
<img src="18_Geo Map_image.png" width="1288"
|
||||
height="278">
|
||||
</p>
|
||||
<p>This value can be added manually if needed. The value of the attribute
|
||||
is made up of the latitude and longitude separated by a comma.</p>
|
||||
<h2>Repositioning markers</h2>
|
||||
@ -160,7 +166,8 @@ width="1288" height="278">
|
||||
</li>
|
||||
<li>Middle-clicking the marker will open the note in a new tab.</li>
|
||||
<li>Right-clicking the marker will open a contextual menu (as described below).</li>
|
||||
<li>If the map is in read-only mode, clicking on a marker will open a
|
||||
<li
|
||||
>If the map is in read-only mode, clicking on a marker will open a
|
||||
<a
|
||||
class="reference-link" href="#root/_help_ZjLYv08Rp3qC">Quick edit</a> popup for the corresponding note.</li>
|
||||
</ul>
|
||||
@ -206,211 +213,239 @@ width="1288" height="278">
|
||||
<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>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center image_resized" style="width:56.84%;">
|
||||
<img style="aspect-ratio:732/918;" src="12_Geo Map_image.png"
|
||||
width="732" height="918">
|
||||
</figure>
|
||||
</td>
|
||||
<td>Go to Google Maps on the web and look for a desired location, right click
|
||||
on it and a context menu will show up.
|
||||
<br>
|
||||
<br>Simply click on the first item displaying the coordinates and they will
|
||||
be copied to clipboard.
|
||||
<br>
|
||||
<br>Then paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
|
||||
of a child note of the map (don't forget to surround the value with a
|
||||
<code
|
||||
spellcheck="false">"</code>character).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:518/84;" src="4_Geo Map_image.png"
|
||||
width="518" height="84">
|
||||
</figure>
|
||||
</td>
|
||||
<td>In Trilium, create a child note under the map.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:1074/276;" src="11_Geo Map_image.png"
|
||||
width="1074" height="276">
|
||||
</figure>
|
||||
</td>
|
||||
<td>And then go to Owned Attributes and type <code spellcheck="false">#geolocation="</code>,
|
||||
then paste from the clipboard as-is and then add the ending <code spellcheck="false">"</code> character.
|
||||
Press Enter to confirm and the map should now be updated to contain the
|
||||
new note.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center image_resized" style="width:56.84%;">
|
||||
<img style="aspect-ratio:732/918;" src="12_Geo Map_image.png"
|
||||
width="732" height="918">
|
||||
</figure>
|
||||
</td>
|
||||
<td>Go to Google Maps on the web and look for a desired location, right click
|
||||
on it and a context menu will show up.
|
||||
<br>
|
||||
<br>Simply click on the first item displaying the coordinates and they will
|
||||
be copied to clipboard.
|
||||
<br>
|
||||
<br>Then paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
|
||||
of a child note of the map (don't forget to surround the value with a
|
||||
<code
|
||||
spellcheck="false">"</code>character).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:518/84;" src="4_Geo Map_image.png"
|
||||
width="518" height="84">
|
||||
</figure>
|
||||
</td>
|
||||
<td>In Trilium, create a child note under the map.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:1074/276;" src="11_Geo Map_image.png"
|
||||
width="1074" height="276">
|
||||
</figure>
|
||||
</td>
|
||||
<td>And then go to Owned Attributes and type <code spellcheck="false">#geolocation="</code>,
|
||||
then paste from the clipboard as-is and then add the ending <code spellcheck="false">"</code> character.
|
||||
Press Enter to confirm and the map should now be updated to contain the
|
||||
new note.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<h3>Adding from OpenStreetMap</h3>
|
||||
<p>Similarly to the Google Maps approach:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png"
|
||||
width="562" height="454">
|
||||
</td>
|
||||
<td>Go to any location on openstreetmap.org and right click to bring up the
|
||||
context menu. Select the “Show address” item.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png"
|
||||
width="696" height="480">
|
||||
</td>
|
||||
<td>The address will be visible in the top-left of the screen, in the place
|
||||
of the search bar.
|
||||
<br>
|
||||
<br>Select the coordinates and copy them into the clipboard.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png"
|
||||
width="640" height="276">
|
||||
</td>
|
||||
<td>Simply paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
|
||||
of a child note of the map and then it should be displayed on the map.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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:562/454;width:100%;" src="1_Geo Map_image.png"
|
||||
width="562" height="454">
|
||||
</td>
|
||||
<td>Go to any location on openstreetmap.org and right click to bring up the
|
||||
context menu. Select the “Show address” item.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png"
|
||||
width="696" height="480">
|
||||
</td>
|
||||
<td>The address will be visible in the top-left of the screen, in the place
|
||||
of the search bar.
|
||||
<br>
|
||||
<br>Select the coordinates and copy them into the clipboard.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png"
|
||||
width="640" height="276">
|
||||
</td>
|
||||
<td>Simply paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
|
||||
of a child note of the map and then it should be displayed on the map.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<h2>Adding GPS tracks (.gpx)</h2>
|
||||
<p>Trilium has basic support for displaying GPS tracks on the geo map.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center">
|
||||
<img style="aspect-ratio:226/74;" src="3_Geo Map_image.png"
|
||||
width="226" height="74">
|
||||
</figure>
|
||||
</td>
|
||||
<td>To add a track, simply drag & drop a .gpx file inside the geo map
|
||||
in the note tree.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center">
|
||||
<img style="aspect-ratio:322/222;" src="14_Geo Map_image.png"
|
||||
width="322" height="222">
|
||||
</figure>
|
||||
</td>
|
||||
<td>In order for the file to be recognized as a GPS track, it needs to show
|
||||
up as <code spellcheck="false">application/gpx+xml</code> in the <em>File type</em> field.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center">
|
||||
<img style="aspect-ratio:620/530;" src="6_Geo Map_image.png"
|
||||
width="620" height="530">
|
||||
</figure>
|
||||
</td>
|
||||
<td>When going back to the map, the track should now be visible.
|
||||
<br>
|
||||
<br>The start and end points of the track are indicated by the two blue markers.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<aside class="admonition note">
|
||||
<p>The starting point of the track will be displayed as a marker, with the
|
||||
name of the note underneath. The start marker will also respect the icon
|
||||
and the <code spellcheck="false">color</code> of the note. The end marker
|
||||
is displayed with a distinct icon.</p>
|
||||
<p>If the GPX contains waypoints, they will also be displayed. If they have
|
||||
a name, it is displayed when hovering over it with the mouse.</p>
|
||||
</aside>
|
||||
<h2>Read-only mode</h2>
|
||||
<p>When a map is in read-only all editing features will be disabled such
|
||||
as:</p>
|
||||
<ul>
|
||||
<li>The add button in the <a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
|
||||
<li>Dragging markers.</li>
|
||||
<li>Editing from the contextual menu (removing locations or adding new items).</li>
|
||||
</ul>
|
||||
<p>To enable read-only mode simply press the <em>Lock</em> icon from the
|
||||
<a
|
||||
class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>. To disable it, press the button again.</p>
|
||||
<h2>Configuration</h2>
|
||||
<h3>Map Style</h3>
|
||||
<p>The styling of the map can be adjusted in the <em>Collection Properties</em> tab
|
||||
in the <a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a> or
|
||||
manually via the <code spellcheck="false">#map:style</code> attribute.</p>
|
||||
<p>The geo map comes with two different types of styles:</p>
|
||||
<ul>
|
||||
<li>Raster styles
|
||||
<ul>
|
||||
<li>For these styles the map is represented as a grid of images at different
|
||||
zoom levels. This is the traditional way OpenStreetMap used to work.</li>
|
||||
<li>Zoom is slightly restricted.</li>
|
||||
<li>Currently, the only raster theme is the original OpenStreetMap style.</li>
|
||||
<figure
|
||||
class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center">
|
||||
<img style="aspect-ratio:226/74;" src="3_Geo Map_image.png"
|
||||
width="226" height="74">
|
||||
</figure>
|
||||
</td>
|
||||
<td>To add a track, simply drag & drop a .gpx file inside the geo map
|
||||
in the note tree.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center">
|
||||
<img style="aspect-ratio:322/222;" src="14_Geo Map_image.png"
|
||||
width="322" height="222">
|
||||
</figure>
|
||||
</td>
|
||||
<td>In order for the file to be recognized as a GPS track, it needs to show
|
||||
up as <code spellcheck="false">application/gpx+xml</code> in the <em>File type</em> field.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<figure class="image image-style-align-center">
|
||||
<img style="aspect-ratio:620/530;" src="6_Geo Map_image.png"
|
||||
width="620" height="530">
|
||||
</figure>
|
||||
</td>
|
||||
<td>When going back to the map, the track should now be visible.
|
||||
<br>
|
||||
<br>The start and end points of the track are indicated by the two blue markers.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<aside class="admonition note">
|
||||
<p>The starting point of the track will be displayed as a marker, with the
|
||||
name of the note underneath. The start marker will also respect the icon
|
||||
and the <code spellcheck="false">color</code> of the note. The end marker
|
||||
is displayed with a distinct icon.</p>
|
||||
<p>If the GPX contains waypoints, they will also be displayed. If they have
|
||||
a name, it is displayed when hovering over it with the mouse.</p>
|
||||
</aside>
|
||||
<h2>Read-only mode</h2>
|
||||
<p>When a map is in read-only all editing features will be disabled such
|
||||
as:</p>
|
||||
<ul>
|
||||
<li>The add button in the <a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
|
||||
<li
|
||||
>Dragging markers.</li>
|
||||
<li>Editing from the contextual menu (removing locations or adding new items).</li>
|
||||
</ul>
|
||||
<p>To enable read-only mode simply press the <em>Lock</em> icon from the
|
||||
<a
|
||||
class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>. To disable it, press the button again.</p>
|
||||
<h2>Configuration</h2>
|
||||
<h3>Map Style</h3>
|
||||
<p>The styling of the map can be adjusted in the <em>Collection Properties</em> (above
|
||||
the map, by pressing on the Gear icon) or manually via the <code spellcheck="false">#map:style</code> attribute.</p>
|
||||
<p>The geo map comes with two different types of styles:</p>
|
||||
<ul>
|
||||
<li>Raster styles
|
||||
<ul>
|
||||
<li>For these styles the map is represented as a grid of images at different
|
||||
zoom levels. This is the traditional way OpenStreetMap used to work.</li>
|
||||
<li
|
||||
>Zoom is slightly restricted.</li>
|
||||
<li>Currently, the only raster theme is the original OpenStreetMap style.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Vector styles
|
||||
<ul>
|
||||
<li>Vector styles are not represented as images, but as geometrical shapes.
|
||||
This makes the rendering much smoother, especially when zooming and looking
|
||||
at the building edges, for example.</li>
|
||||
<li>The map can be zoomed in much further.</li>
|
||||
<li>These come both in a light and a dark version.</li>
|
||||
<li>The vector styles come from <a href="https://versatiles.org/">VersaTiles</a>,
|
||||
a free and open-source project providing map tiles based on OpenStreetMap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<aside class="admonition note">
|
||||
<p>Currently it is not possible to use a custom map style.</p>
|
||||
</aside>
|
||||
<h3>Scale</h3>
|
||||
<p>Activating this option via the <a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a> or
|
||||
manually via <code spellcheck="false">#map:scale</code> will display an indicator
|
||||
in the bottom-left of the scale of the map.</p>
|
||||
<h2>Troubleshooting</h2>
|
||||
<figure class="image image-style-align-right image_resized" style="width:34.06%;">
|
||||
<img style="aspect-ratio:678/499;" src="13_Geo Map_image.png"
|
||||
width="678" height="499">
|
||||
</figure>
|
||||
|
||||
<h3>Grid-like artifacts on the map</h3>
|
||||
<p>This occurs if the application is not at 100% zoom which causes the pixels
|
||||
of the map to not render correctly due to fractional scaling. The only
|
||||
possible solution is to set the UI zoom at 100% (default keyboard shortcut
|
||||
is <kbd>Ctrl</kbd>+<kbd>0</kbd>).</p>
|
||||
</li>
|
||||
<li>Vector styles
|
||||
<ul>
|
||||
<li>Vector styles are not represented as images, but as geometrical shapes.
|
||||
This makes the rendering much smoother, especially when zooming and looking
|
||||
at the building edges, for example.</li>
|
||||
<li>The map can be zoomed in much further.</li>
|
||||
<li>These come both in a light and a dark version.</li>
|
||||
<li>The vector styles come from <a href="https://versatiles.org/">VersaTiles</a>,
|
||||
a free and open-source project providing map tiles based on OpenStreetMap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Custom map style / tiles</h3>
|
||||
<p>Starting with v0.102.0 it is possible to use custom tile sets, but only
|
||||
in raster format.</p>
|
||||
<p>To do so, manually set the <code spellcheck="false">#map:style</code>
|
||||
<a
|
||||
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_HI6GBBIduIgv">label</a>to the URL of the tile set. For example, to use Esri.NatGeoWorldMap,
|
||||
set the value to <a href="https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}."><code spellcheck="false">https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}</code>.</a>
|
||||
</p>
|
||||
<aside class="admonition note">
|
||||
<p>For a list of tile sets, see the <a href="https://leaflet-extras.github.io/leaflet-providers/preview/">Leaflet Providers preview</a> page.
|
||||
Select a desired tile set and just copy the URL from the <em>Plain JavaScript</em> example.</p>
|
||||
</aside>
|
||||
<p>Custom vector map support is planned, but not yet implemented.</p>
|
||||
<h3>Other options</h3>
|
||||
<p>The following options can be configured either via the Collection properties
|
||||
pane above the map, by clicking on the settings (Gear icon). Alternatively,
|
||||
each of these options also have a corresponding <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_HI6GBBIduIgv">label</a> that
|
||||
can be set manually.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Scale, which illustrates the scale of the map in kilometers and miles
|
||||
in the bottom-left of the map.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The name of the markers is displayed by default underneath the pin on
|
||||
the map. Since v0.102.0, it is possible to hide these labels which increases
|
||||
the performance and decreases clutter when there are many markers on the
|
||||
map.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Troubleshooting</h2>
|
||||
<figure class="image image-style-align-right image_resized" style="width:34.06%;">
|
||||
<img style="aspect-ratio:678/499;" src="13_Geo Map_image.png"
|
||||
width="678" height="499">
|
||||
</figure>
|
||||
<h3>Grid-like artifacts on the map</h3>
|
||||
<p>This occurs if the application is not at 100% zoom which causes the pixels
|
||||
of the map to not render correctly due to fractional scaling. The only
|
||||
possible solution is to set the UI zoom at 100% (default keyboard shortcut
|
||||
is <kbd>Ctrl</kbd>+<kbd>0</kbd>).</p>
|
||||
32
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html
generated
vendored
32
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html
generated
vendored
@ -2,7 +2,7 @@
|
||||
<img style="aspect-ratio:601/216;" src="Render Note_image.png"
|
||||
width="601" height="216">
|
||||
</figure>
|
||||
<p>Render Note is a special case of <a href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_yIhgI5H7A2Sm">front-end scripting</a> which
|
||||
<p>Render Note is a special case of <a href="#root/_help_yIhgI5H7A2Sm">front-end scripting</a> which
|
||||
allows rendering custom content inside a note. This makes it possible to
|
||||
create custom dashboards, or to use a custom note editor.</p>
|
||||
<p>The content can either be a vanilla HTML, or Preact JSX.</p>
|
||||
@ -13,13 +13,11 @@
|
||||
<ol>
|
||||
<li>HTML language for the legacy/vanilla method, with what needs to be displayed
|
||||
(for example <code spellcheck="false"><p>Hello world.</p></code>).</li>
|
||||
<li
|
||||
>JSX for the Preact-based approach (see below).</li>
|
||||
</ol>
|
||||
<li>JSX for the Preact-based approach (see below).</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Create a <a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
|
||||
<li
|
||||
>Assign the <code spellcheck="false">renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
|
||||
<li>Assign the <code spellcheck="false">renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
|
||||
point at the previously created code note.</li>
|
||||
</ol>
|
||||
<h2>Legacy scripting using jQuery</h2>
|
||||
@ -48,9 +46,10 @@ $dateEl.text(new Date());</code></pre>
|
||||
need to provide a HTML anymore.</p>
|
||||
<p>Here are the steps to creating a simple render note:</p>
|
||||
<ol>
|
||||
<li>Create a note of type <a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
|
||||
<li
|
||||
>
|
||||
<li>
|
||||
<p>Create a note of type <a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Create a child <a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a> note
|
||||
with JSX as the language.
|
||||
<br>As an example, use the following content:</p><pre><code class="language-text-x-trilium-auto">export default function() {
|
||||
@ -60,17 +59,20 @@ $dateEl.text(new Date());</code></pre>
|
||||
</>
|
||||
);
|
||||
}</code></pre>
|
||||
</li>
|
||||
<li>In the parent render note, define a <code spellcheck="false">~renderNote</code> relation
|
||||
pointing to the newly created child.</li>
|
||||
<li>Refresh the render note and it should display a “Hello world” message.</li>
|
||||
</li>
|
||||
<li>
|
||||
<p>In the parent render note, define a <code spellcheck="false">~renderNote</code> relation
|
||||
pointing to the newly created child.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Refresh the render note and it should display a “Hello world” message.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h2>Refreshing the note</h2>
|
||||
<p>It's possible to refresh the note via:</p>
|
||||
<ul>
|
||||
<li>The corresponding button in <a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
|
||||
<li
|
||||
>The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
|
||||
<li>The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
|
||||
assigned by default).</li>
|
||||
</ul>
|
||||
<h2>Examples</h2>
|
||||
|
||||
20
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Backend scripts.html
generated
vendored
20
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Backend scripts.html
generated
vendored
@ -1,11 +1,11 @@
|
||||
<p>Unlike <a href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_yIhgI5H7A2Sm">front-end scripts</a> which
|
||||
run on the client / browser-side, back-end scripts run directly on the
|
||||
Node.js environment of the Trilium server.</p>
|
||||
<p>Unlike <a href="#root/_help_yIhgI5H7A2Sm">front-end scripts</a> which run on the
|
||||
client / browser-side, back-end scripts run directly on the Node.js environment
|
||||
of the Trilium server.</p>
|
||||
<p>Back-end scripts can be used both on a <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_WOcw2SLH6tbX">Server Installation</a> (where
|
||||
it will run on the device the server is running on), or on the
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_poXkQfguuA0U">Desktop Installation</a> (where it will run on the PC).</p>
|
||||
href="#root/_help_WOcw2SLH6tbX">Server Installation</a> (where it will run
|
||||
on the device the server is running on), or on the <a class="reference-link"
|
||||
href="#root/_help_poXkQfguuA0U">Desktop Installation</a> (where it will
|
||||
run on the PC).</p>
|
||||
<h2>Advantages of backend scripts</h2>
|
||||
<p>The benefit of backend scripts is that they can be pretty powerful, for
|
||||
example to have access to the underlying system, for example it can read
|
||||
@ -14,7 +14,7 @@
|
||||
access to the notes since the information about them is already loaded
|
||||
in memory. Whereas on the client, notes have to be manually loaded first.</p>
|
||||
<h2>Creating a backend script</h2>
|
||||
<p>Create a new <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a> note
|
||||
<p>Create a new <a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a> note
|
||||
and select the language <em>JS backend</em>.</p>
|
||||
<h2>Running backend scripts</h2>
|
||||
<p>Backend scripts can be either run manually (via the Execute button on
|
||||
@ -22,8 +22,8 @@
|
||||
<p>In addition, scripts can be run automatically when the server starts up,
|
||||
on a fixed time interval or when a certain event occurs (such as an attribute
|
||||
being modified). For more information, see the dedicated <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/SPirpZypehBG/_help_GPERMystNGTB">Events</a> page.</p>
|
||||
href="#root/_help_GPERMystNGTB">Events</a> page.</p>
|
||||
<h2>Script API</h2>
|
||||
<p>Trilium exposes a set of APIs that can be directly consumed by scripts,
|
||||
under the <code spellcheck="false">api</code> object. For a reference of
|
||||
this API, see <a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/GLks18SNjxmC/_help_MEtfsqa5VwNi">Backend API</a>.</p>
|
||||
this API, see <a class="reference-link" href="#root/_help_MEtfsqa5VwNi">Backend API</a>.</p>
|
||||
@ -5,139 +5,137 @@
|
||||
<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>
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Label</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code spellcheck="false">run</code>
|
||||
</td>
|
||||
<td>
|
||||
<p>Defines on which events script should run. Possible values are:</p>
|
||||
<ul>
|
||||
<li><code spellcheck="false">backendStartup</code> - when Trilium backend starts
|
||||
up</li>
|
||||
<li><code spellcheck="false">hourly</code> - run once an hour. You can use
|
||||
additional label <code spellcheck="false">runAtHour</code> to specify at
|
||||
which hour, on the back-end.</li>
|
||||
<li><code spellcheck="false">daily</code> - run once a day, on the back-end</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnInstance</code>
|
||||
</td>
|
||||
<td>Specifies that the script should only run on a particular <a class="reference-link"
|
||||
href="#root/_help_c5xB8m4g2IY6">Trilium instance</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runAtHour</code>
|
||||
</td>
|
||||
<td>On which hour should this run. Should be used together with <code spellcheck="false">#run=hourly</code>.
|
||||
Can be defined multiple times for more runs during the day.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Label</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code spellcheck="false">run</code>
|
||||
</td>
|
||||
<td>
|
||||
<p>Defines on which events script should run. Possible values are:</p>
|
||||
<ul>
|
||||
<li><code spellcheck="false">backendStartup</code> - when Trilium backend starts
|
||||
up</li>
|
||||
<li><code spellcheck="false">hourly</code> - run once an hour. You can use
|
||||
additional label <code spellcheck="false">runAtHour</code> to specify at
|
||||
which hour, on the back-end.</li>
|
||||
<li><code spellcheck="false">daily</code> - run once a day, on the back-end</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnInstance</code>
|
||||
</td>
|
||||
<td>Specifies that the script should only run on a particular <a class="reference-link"
|
||||
href="#root/_help_c5xB8m4g2IY6">Trilium instance</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runAtHour</code>
|
||||
</td>
|
||||
<td>On which hour should this run. Should be used together with <code spellcheck="false">#run=hourly</code>.
|
||||
Can be defined multiple times for more runs during the day.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Entity events</h2>
|
||||
<p>Other events are bound to some entity, these are defined as <a href="#root/_help_zEY4DaJG4YT5">relations</a> -
|
||||
meaning that script is triggered only if note has this script attached
|
||||
to it through relations (or it can inherit it).</p>
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Relation</th>
|
||||
<th>Trigger condition</th>
|
||||
<th>Origin entity (see below)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteCreation</code>
|
||||
</td>
|
||||
<td>executes when note is created on backend. Use this relation if you want
|
||||
to run the script for all notes created under a specific subtree. In that
|
||||
case, create it on the subtree root note and make it inheritable. A new
|
||||
note created within the subtree (any depth) will trigger the script.</td>
|
||||
<td>The <code spellcheck="false">BNote</code> that got created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnChildNoteCreation</code>
|
||||
</td>
|
||||
<td>executes when new note is created under the note where this relation is
|
||||
defined</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the child that got created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteTitleChange</code>
|
||||
</td>
|
||||
<td>executes when note title is changed (includes note creation as well)</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the note whose title got changed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteContentChange</code>
|
||||
</td>
|
||||
<td>executes when note content is changed (includes note creation as well).</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the note whose content got
|
||||
changed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteChange</code>
|
||||
</td>
|
||||
<td>executes when note is changed (includes note creation as well). Does not
|
||||
include content changes</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the note that got changed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteDeletion</code>
|
||||
</td>
|
||||
<td>executes when note is being deleted</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the note that got (soft) deleted.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnBranchCreation</code>
|
||||
</td>
|
||||
<td>executes when a branch is created. Branch is a link between parent note
|
||||
and child note and is created e.g. when cloning or moving note.</td>
|
||||
<td>The <code spellcheck="false">BBranch</code> that got created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnBranchChange</code>
|
||||
</td>
|
||||
<td>executes when a branch is updated. (since v0.62)</td>
|
||||
<td>The <code spellcheck="false">BBranch</code> that got changed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnBranchDeletion</code>
|
||||
</td>
|
||||
<td>executes when a branch is deleted. Branch is a link between parent note
|
||||
and child note and is deleted e.g. when moving note (old branch/link is
|
||||
deleted).</td>
|
||||
<td>The <code spellcheck="false">BBranch</code> that got (soft) deleted.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnAttributeCreation</code>
|
||||
</td>
|
||||
<td>executes when new attribute is created for the note which defines this
|
||||
relation</td>
|
||||
<td>The <code spellcheck="false">BAttribute</code> that got created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnAttributeChange</code>
|
||||
</td>
|
||||
<td>executes when the attribute is changed of a note which defines this relation.
|
||||
This is triggered also when the attribute is deleted</td>
|
||||
<td>The <code spellcheck="false">BAttribute</code> that got changed.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Relation</th>
|
||||
<th>Trigger condition</th>
|
||||
<th>Origin entity (see below)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteCreation</code>
|
||||
</td>
|
||||
<td>executes when note is created on backend. Use this relation if you want
|
||||
to run the script for all notes created under a specific subtree. In that
|
||||
case, create it on the subtree root note and make it inheritable. A new
|
||||
note created within the subtree (any depth) will trigger the script.</td>
|
||||
<td>The <code spellcheck="false">BNote</code> that got created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnChildNoteCreation</code>
|
||||
</td>
|
||||
<td>executes when new note is created under the note where this relation is
|
||||
defined</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the child that got created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteTitleChange</code>
|
||||
</td>
|
||||
<td>executes when note title is changed (includes note creation as well)</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the note whose title got changed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteContentChange</code>
|
||||
</td>
|
||||
<td>executes when note content is changed (includes note creation as well).</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the note whose content got
|
||||
changed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteChange</code>
|
||||
</td>
|
||||
<td>executes when note is changed (includes note creation as well). Does not
|
||||
include content changes</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the note that got changed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnNoteDeletion</code>
|
||||
</td>
|
||||
<td>executes when note is being deleted</td>
|
||||
<td>The <code spellcheck="false">BNote</code> of the note that got (soft) deleted.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnBranchCreation</code>
|
||||
</td>
|
||||
<td>executes when a branch is created. Branch is a link between parent note
|
||||
and child note and is created e.g. when cloning or moving note.</td>
|
||||
<td>The <code spellcheck="false">BBranch</code> that got created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnBranchChange</code>
|
||||
</td>
|
||||
<td>executes when a branch is updated. (since v0.62)</td>
|
||||
<td>The <code spellcheck="false">BBranch</code> that got changed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnBranchDeletion</code>
|
||||
</td>
|
||||
<td>executes when a branch is deleted. Branch is a link between parent note
|
||||
and child note and is deleted e.g. when moving note (old branch/link is
|
||||
deleted).</td>
|
||||
<td>The <code spellcheck="false">BBranch</code> that got (soft) deleted.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnAttributeCreation</code>
|
||||
</td>
|
||||
<td>executes when new attribute is created for the note which defines this
|
||||
relation</td>
|
||||
<td>The <code spellcheck="false">BAttribute</code> that got created.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code spellcheck="false">runOnAttributeChange</code>
|
||||
</td>
|
||||
<td>executes when the attribute is changed of a note which defines this relation.
|
||||
This is triggered also when the attribute is deleted</td>
|
||||
<td>The <code spellcheck="false">BAttribute</code> that got changed.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Origin entity</h2>
|
||||
<p>When a script is run by an event such as the ones described above,
|
||||
<code
|
||||
|
||||
85
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics.html
generated
vendored
85
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics.html
generated
vendored
@ -1,48 +1,47 @@
|
||||
<p>Front-end scripts are custom JavaScript notes that are run on the client
|
||||
(browser environment)</p>
|
||||
<p>There are four flavors of front-end scripts:</p>
|
||||
<figure class="table"
|
||||
style="width:100%;">
|
||||
<table class="ck-table-resized">
|
||||
<colgroup>
|
||||
<col style="width:21.82%;">
|
||||
<col style="width:78.18%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Regular scripts</th>
|
||||
<td>These are run with the current app and note context. These can be run
|
||||
either manually or automatically on start-up.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>
|
||||
</th>
|
||||
<td>These can introduce new UI elements in various positions, such as near
|
||||
the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a>,
|
||||
content area or even the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>
|
||||
</th>
|
||||
<td>Similar to <a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>,
|
||||
but dedicated to the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>.
|
||||
These can simply introduce new buttons or graphical elements to the bar.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>
|
||||
</th>
|
||||
<td>This allows rendering custom content inside a note, using either HTML
|
||||
or Preact JSX.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Regular scripts</td>
|
||||
<td>These are run with the current app and note context. These can be run
|
||||
either manually or automatically on start-up.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>
|
||||
</td>
|
||||
<td>These can introduce new UI elements in various positions, such as near
|
||||
the <a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>,
|
||||
content area or even the <a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="reference-link" href="#root/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>
|
||||
</td>
|
||||
<td>Similar to <a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>,
|
||||
but dedicated to the <a class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>.
|
||||
These can simply introduce new buttons or graphical elements to the bar.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>
|
||||
</td>
|
||||
<td>This allows rendering custom content inside a note, using either HTML
|
||||
or Preact JSX.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>For more advanced behaviors that do not require a user interface (e.g.
|
||||
batch modifying notes), see <a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_SPirpZypehBG">Backend scripts</a>.</p>
|
||||
batch modifying notes), see <a class="reference-link" href="#root/_help_SPirpZypehBG">Backend scripts</a>.</p>
|
||||
<h2>Scripts</h2>
|
||||
<p>Scripts don't have any special requirements. They can be run manually
|
||||
using the <em>Execute</em> button on the code note or they can be run automatically;
|
||||
to do so, set the <code spellcheck="false">run</code> <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_HI6GBBIduIgv">label</a> to
|
||||
to do so, set the <code spellcheck="false">run</code> <a href="#root/_help_HI6GBBIduIgv">label</a> to
|
||||
either:</p>
|
||||
<ul>
|
||||
<li><code spellcheck="false">frontendStartup</code> - when Trilium frontend
|
||||
@ -55,23 +54,23 @@ style="width:100%;">
|
||||
they can run automatically on a hourly or daily basis, but also on events
|
||||
such as when a note is created or an attribute is modified. See the server-side
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/SPirpZypehBG/_help_GPERMystNGTB">Events</a> for more information.</p>
|
||||
class="reference-link" href="#root/_help_GPERMystNGTB">Events</a> for more information.</p>
|
||||
</aside>
|
||||
<h2>Widgets</h2>
|
||||
<p>Widgets require a certain format in order for Trilium to be able to integrate
|
||||
them into the UI.</p>
|
||||
<ul>
|
||||
<li>For legacy widgets, the script note must export a <code spellcheck="false">BasicWidget</code> or
|
||||
a derived one (see <a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_GhurYZjh8e1V">Note context aware widget</a> or
|
||||
a derived one (see <a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a> or
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_M8IppdwVHSjG">Right pane widget</a>).</li>
|
||||
class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>).</li>
|
||||
<li>For Preact widgets, a built-in helper called <code spellcheck="false">defineWidget</code> needs
|
||||
to be used.</li>
|
||||
</ul>
|
||||
<p>For more information, see <a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>.</p>
|
||||
<p>For more information, see <a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>.</p>
|
||||
<h2>Script API</h2>
|
||||
<p>The front-end API of Trilium is available to all scripts running in the
|
||||
front-end context as global variable <code spellcheck="false">api</code>.
|
||||
For a reference of the API, see <a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/GLks18SNjxmC/_help_Q2z6av6JZVWm">Frontend API</a>.</p>
|
||||
For a reference of the API, see <a class="reference-link" href="#root/_help_Q2z6av6JZVWm">Frontend API</a>.</p>
|
||||
<h3>Tutorial</h3>
|
||||
<p>For more information on building widgets, take a look at <a href="#root/_help_SynTBQiBsdYJ">Widget Basics</a>.</p>
|
||||
@ -20,15 +20,14 @@
|
||||
<h2>Creating a custom widget</h2>
|
||||
<ol>
|
||||
<li>Create a <a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a> note.</li>
|
||||
<li
|
||||
>Set the language to:
|
||||
<li>Set the language to:
|
||||
<ol>
|
||||
<li>JavaScript (frontend) for legacy widgets using jQuery.</li>
|
||||
<li>JSX for Preact widgets. You might need to go to Options → Code to enable
|
||||
the language first.</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Apply the <code spellcheck="false">#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a>.</li>
|
||||
</li>
|
||||
<li>Apply the <code spellcheck="false">#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a>.</li>
|
||||
</ol>
|
||||
<h2>Getting started with a simple example</h2>
|
||||
<p>Let's start by creating a widget that shows a message near the content
|
||||
@ -62,81 +61,79 @@ export default defineWidget({
|
||||
should appear underneath the content area.</p>
|
||||
<h2>Widget location (parent widget)</h2>
|
||||
<p>A widget can be placed in one of the following sections of the applications:</p>
|
||||
<figure
|
||||
class="table">
|
||||
<table class="ck-table-resized">
|
||||
<colgroup>
|
||||
<col style="width:15.59%;">
|
||||
<col style="width:30.42%;">
|
||||
<col style="width:16.68%;">
|
||||
<col style="width:37.31%;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Value for <code spellcheck="false">parentWidget</code>
|
||||
</th>
|
||||
<th>Description</th>
|
||||
<th>Sample widget</th>
|
||||
<th>Special requirements</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code spellcheck="false">left-pane</code>
|
||||
</th>
|
||||
<td>Appears within the same pane that holds the <a class="reference-link"
|
||||
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
|
||||
<td>Same as above, with only a different <code spellcheck="false">parentWidget</code>.</td>
|
||||
<td>None.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code spellcheck="false">center-pane</code>
|
||||
</th>
|
||||
<td>In the content area. If a split is open, the widget will span all of the
|
||||
splits.</td>
|
||||
<td>See example above.</td>
|
||||
<td>None.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code spellcheck="false">note-detail-pane</code>
|
||||
</th>
|
||||
<td>
|
||||
<p>In the content area, inside the note detail area. If a split is open,
|
||||
the widget will be contained inside the split.</p>
|
||||
<p>This is ideal if the widget is note-specific.</p>
|
||||
</td>
|
||||
<td><a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>The widget must export a <code spellcheck="false">class</code> and not an
|
||||
instance of the class (e.g. <code spellcheck="false">no new</code>) because
|
||||
it needs to be multiplied for each note, so that splits work correctly.</li>
|
||||
<li
|
||||
>Since the <code spellcheck="false">class</code> is exported instead of an
|
||||
instance, the <code spellcheck="false">parentWidget</code> getter must be
|
||||
<code
|
||||
spellcheck="false">static</code>, otherwise the widget is ignored.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code spellcheck="false">right-pane</code>
|
||||
</th>
|
||||
<td>In the <a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>,
|
||||
as a dedicated section.</td>
|
||||
<td><a class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Although not mandatory, it's best to use a <code spellcheck="false">RightPanelWidget</code> instead
|
||||
of a <code spellcheck="false">BasicWidget</code> or a <code spellcheck="false">NoteContextAwareWidget</code>.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<table
|
||||
class="ck-table-resized">
|
||||
<colgroup>
|
||||
<col style="width:15.59%;">
|
||||
<col style="width:30.42%;">
|
||||
<col style="width:16.68%;">
|
||||
<col style="width:37.31%;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Value for <code spellcheck="false">parentWidget</code>
|
||||
</th>
|
||||
<th>Description</th>
|
||||
<th>Sample widget</th>
|
||||
<th>Special requirements</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code spellcheck="false">left-pane</code>
|
||||
</th>
|
||||
<td>Appears within the same pane that holds the <a class="reference-link"
|
||||
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
|
||||
<td>Same as above, with only a different <code spellcheck="false">parentWidget</code>.</td>
|
||||
<td>None.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code spellcheck="false">center-pane</code>
|
||||
</th>
|
||||
<td>In the content area. If a split is open, the widget will span all of the
|
||||
splits.</td>
|
||||
<td>See example above.</td>
|
||||
<td>None.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code spellcheck="false">note-detail-pane</code>
|
||||
</th>
|
||||
<td>
|
||||
<p>In the content area, inside the note detail area. If a split is open,
|
||||
the widget will be contained inside the split.</p>
|
||||
<p>This is ideal if the widget is note-specific.</p>
|
||||
</td>
|
||||
<td><a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>The widget must export a <code spellcheck="false">class</code> and not an
|
||||
instance of the class (e.g. <code spellcheck="false">no new</code>) because
|
||||
it needs to be multiplied for each note, so that splits work correctly.</li>
|
||||
<li
|
||||
>Since the <code spellcheck="false">class</code> is exported instead of an
|
||||
instance, the <code spellcheck="false">parentWidget</code> getter must be
|
||||
<code
|
||||
spellcheck="false">static</code>, otherwise the widget is ignored.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code spellcheck="false">right-pane</code>
|
||||
</th>
|
||||
<td>In the <a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>,
|
||||
as a dedicated section.</td>
|
||||
<td><a class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Although not mandatory, it's best to use a <code spellcheck="false">RightPanelWidget</code> instead
|
||||
of a <code spellcheck="false">BasicWidget</code> or a <code spellcheck="false">NoteContextAwareWidget</code>.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<p>To position the widget somewhere else, just change the value passed to
|
||||
<code
|
||||
spellcheck="false">get parentWidget()</code>for legacy widgets or the <code spellcheck="false">parent</code> field
|
||||
|
||||
@ -20,16 +20,11 @@
|
||||
</li>
|
||||
<li>Don't set <code spellcheck="false">#widget</code>, as that attribute is
|
||||
reserved for <a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>.</li>
|
||||
<li
|
||||
>In the <a class="reference-link" href="#root/_help_x3i7MxGccDuM">Global menu</a>,
|
||||
<li>In the <a class="reference-link" href="#root/_help_x3i7MxGccDuM">Global menu</a>,
|
||||
select <em>Configure launchbar</em>.</li>
|
||||
<li>In the <em>Visible Launchers</em> section, select <em>Add a custom widget</em>.</li>
|
||||
<li
|
||||
>Give the newly created launcher a name (and optionally a name).</li>
|
||||
<li
|
||||
>In the <a class="reference-link" href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a> section,
|
||||
modify the <em>widget</em> field to point to the newly created note.</li>
|
||||
<li
|
||||
><a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_s8alTXmpFR61">Refresh</a> the
|
||||
UI.</li>
|
||||
<li>In the <em>Visible Launchers</em> section, select <em>Add a custom widget</em>.</li>
|
||||
<li>Give the newly created launcher a name (and optionally a name).</li>
|
||||
<li>In the <a class="reference-link" href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a> section,
|
||||
modify the <em>widget</em> field to point to the newly created note.</li>
|
||||
<li><a href="#root/_help_s8alTXmpFR61">Refresh</a> the UI.</li>
|
||||
</ol>
|
||||
@ -1,5 +1,5 @@
|
||||
# Documentation
|
||||
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/1gHwZjPsyRj8/Documentation_image.png" width="205" height="162">
|
||||
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/cA6KrXDtJ4Ni/Documentation_image.png" width="205" height="162">
|
||||
|
||||
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>.
|
||||
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
|
||||
|
||||
502
docs/User Guide/!!!meta.json
vendored
502
docs/User Guide/!!!meta.json
vendored
@ -6459,6 +6459,97 @@
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "mHbBMPDPkVV5",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "MgibgPcfeuGz",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "HI6GBBIduIgv",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "64ZTlUPgEPtW",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "yIhgI5H7A2Sm",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "RnaPdbciOfeq",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SPirpZypehBG",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "1vHRoWCEjj0L",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "HcABDtFCkbFN",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "AlhDUqhENtH7",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "pKK96zzmvBGf",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "gOKqSJgXLcIj",
|
||||
"isInheritable": false,
|
||||
"position": 120
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "IjZS7iK5EXtb",
|
||||
"isInheritable": false,
|
||||
"position": 130
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
@ -6472,97 +6563,6 @@
|
||||
"value": "active-content",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "MgibgPcfeuGz",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "1vHRoWCEjj0L",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "yIhgI5H7A2Sm",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "HcABDtFCkbFN",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "RnaPdbciOfeq",
|
||||
"isInheritable": false,
|
||||
"position": 120
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SPirpZypehBG",
|
||||
"isInheritable": false,
|
||||
"position": 130
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "mHbBMPDPkVV5",
|
||||
"isInheritable": false,
|
||||
"position": 150
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "AlhDUqhENtH7",
|
||||
"isInheritable": false,
|
||||
"position": 160
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "pKK96zzmvBGf",
|
||||
"isInheritable": false,
|
||||
"position": 170
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "gOKqSJgXLcIj",
|
||||
"isInheritable": false,
|
||||
"position": 180
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "64ZTlUPgEPtW",
|
||||
"isInheritable": false,
|
||||
"position": 190
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "HI6GBBIduIgv",
|
||||
"isInheritable": false,
|
||||
"position": 200
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "IjZS7iK5EXtb",
|
||||
"isInheritable": false,
|
||||
"position": 210
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -9943,7 +9943,7 @@
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CdNpE2pqjmI6",
|
||||
"value": "yIhgI5H7A2Sm",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
@ -9971,31 +9971,38 @@
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "XpOYSgsLkTJy",
|
||||
"value": "CdNpE2pqjmI6",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "A9Oc6YKKc65v",
|
||||
"value": "XpOYSgsLkTJy",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "R7abl2fc6Mxi",
|
||||
"value": "A9Oc6YKKc65v",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "6tZeKvSHEUiB",
|
||||
"value": "R7abl2fc6Mxi",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "6tZeKvSHEUiB",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
@ -10009,13 +10016,6 @@
|
||||
"value": "render-note",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "yIhgI5H7A2Sm",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -11175,20 +11175,6 @@
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "zEY4DaJG4YT5",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "OFXdgB2nNk1F",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
@ -11238,13 +11224,6 @@
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "BlN9DFI679QC",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
@ -11258,6 +11237,13 @@
|
||||
"value": "geomap",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "HI6GBBIduIgv",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -16248,10 +16234,94 @@
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SynTBQiBsdYJ",
|
||||
"value": "MgibgPcfeuGz",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "oPVyFC7WL2Lp",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "RnaPdbciOfeq",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "4Gn3psZKsfSm",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "xYmIYSP6wE3F",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "HcABDtFCkbFN",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SPirpZypehBG",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "HI6GBBIduIgv",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "GPERMystNGTB",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "GhurYZjh8e1V",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "M8IppdwVHSjG",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "Q2z6av6JZVWm",
|
||||
"isInheritable": false,
|
||||
"position": 120
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SynTBQiBsdYJ",
|
||||
"isInheritable": false,
|
||||
"position": 130
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
@ -16265,90 +16335,6 @@
|
||||
"value": "bx bx-window",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "Q2z6av6JZVWm",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "GhurYZjh8e1V",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "M8IppdwVHSjG",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "MgibgPcfeuGz",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SPirpZypehBG",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "RnaPdbciOfeq",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "oPVyFC7WL2Lp",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "4Gn3psZKsfSm",
|
||||
"isInheritable": false,
|
||||
"position": 120
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "xYmIYSP6wE3F",
|
||||
"isInheritable": false,
|
||||
"position": 130
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "HcABDtFCkbFN",
|
||||
"isInheritable": false,
|
||||
"position": 140
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "HI6GBBIduIgv",
|
||||
"isInheritable": false,
|
||||
"position": 150
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "GPERMystNGTB",
|
||||
"isInheritable": false,
|
||||
"position": 160
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -16980,6 +16966,13 @@
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "s8alTXmpFR61",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
@ -16993,13 +16986,6 @@
|
||||
"value": "launch-bar-widgets",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "s8alTXmpFR61",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -17444,6 +17430,48 @@
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "yIhgI5H7A2Sm",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "WOcw2SLH6tbX",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "poXkQfguuA0U",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "6f9hih2hXXZk",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "GPERMystNGTB",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "MEtfsqa5VwNi",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
@ -17457,48 +17485,6 @@
|
||||
"value": "bx bx-server",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "yIhgI5H7A2Sm",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "WOcw2SLH6tbX",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "poXkQfguuA0U",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "MEtfsqa5VwNi",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "6f9hih2hXXZk",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "GPERMystNGTB",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
|
||||
2
docs/User Guide/User Guide.md
vendored
2
docs/User Guide/User Guide.md
vendored
@ -15,7 +15,7 @@ Trilium is an open-source solution for note-taking and organizing a personal kno
|
||||
|
||||
* <a class="reference-link" href="User%20Guide/Installation%20%26%20Setup/Desktop%20Installation.md">Desktop Installation</a>
|
||||
* <a class="reference-link" href="User%20Guide/Installation%20%26%20Setup/Server%20Installation.md">Server Installation</a>
|
||||
* <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Frontend%20API">[missing note]</a> or <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Backend%20API.dat">[missing note]</a>
|
||||
* <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Frontend%20API">Frontend API</a> or <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Backend%20API.dat">[missing note]</a>
|
||||
* [ETAPI reference](User%20Guide/Advanced%20Usage/ETAPI%20\(REST%20API\)/API%20Reference.dat)
|
||||
|
||||
## External links
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Geo Map
|
||||
> [!IMPORTANT]
|
||||
> <a class="reference-link" href="../Advanced%20Usage/Attributes.md">Attributes</a><a class="reference-link" href="../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a><a class="reference-link" href="../Advanced%20Usage/Attributes.md">Attributes</a>Starting with Trilium v0.97.0, the geo map has been converted from a standalone [note type](../Note%20Types.md) to a type of view for the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a>.
|
||||
> Starting with Trilium v0.97.0, the geo map has been converted from a standalone [note type](../Note%20Types.md) to a type of view for the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a>.
|
||||
|
||||
<figure class="image image-style-align-center"><img style="aspect-ratio:892/675;" src="9_Geo Map_image.png" width="892" height="675"></figure>
|
||||
|
||||
@ -26,8 +26,8 @@ The position on the map and the zoom are saved inside the map note and restored
|
||||
|
||||
| | | |
|
||||
| --- | --- | --- |
|
||||
| 1 | To create a marker, first navigate to the desired point on the map. Then press the  button in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) (top-right) area. <br> <br>If the button is not visible, make sure the button section is visible by pressing the chevron button () in the top-right of the map. | |
|
||||
| 2 | <img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png" width="1730" height="416"> | 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. |
|
||||
| 1 | To create a marker, first navigate to the desired point on the map. Then press the  button in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) (top-right) area. <br> <br>If the button is not visible, make sure the button section is visible by pressing the chevron button () in the top-right of the map. | |
|
||||
| 2 | <img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png" width="1730" height="416"> | Once pressed, the map will enter in the insert mode, as illustrated by the notification. <br> <br>Simply click the point on the map where to place the marker, or the Escape key to cancel. |
|
||||
| 3 | <img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png" width="1586" height="404"> | Enter the name of the marker/note to be created. |
|
||||
| 4 | <img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map_image.png" width="1696" height="608"> | Once confirmed, the marker will show up on the map and it will also be displayed as a child note of the map. |
|
||||
|
||||
@ -109,7 +109,7 @@ The value of the attribute is made up of the latitude and longitude separated by
|
||||
|
||||
| | | |
|
||||
| --- | --- | --- |
|
||||
| 1 | <figure class="image image-style-align-center image_resized" style="width:56.84%;"><img style="aspect-ratio:732/918;" src="12_Geo Map_image.png" width="732" height="918"></figure> | Go to Google Maps on the web and look for a desired location, right click on it and a context menu will show up. <br> <br>Simply click on the first item displaying the coordinates and they will be copied to clipboard. <br> <br>Then paste the value inside the text box into the `#geolocation` attribute of a child note of the map (don't forget to surround the value with a `"` character). |
|
||||
| 1 | <figure class="image image-style-align-center image_resized" style="width:56.84%;"><img style="aspect-ratio:732/918;" src="12_Geo Map_image.png" width="732" height="918"></figure> | Go to Google Maps on the web and look for a desired location, right click on it and a context menu will show up. <br> <br>Simply click on the first item displaying the coordinates and they will be copied to clipboard. <br> <br>Then paste the value inside the text box into the `#geolocation` attribute of a child note of the map (don't forget to surround the value with a `"` character). |
|
||||
| 2 | <figure class="image image-style-align-center image_resized" style="width:100%;"><img style="aspect-ratio:518/84;" src="4_Geo Map_image.png" width="518" height="84"></figure> | In Trilium, create a child note under the map. |
|
||||
| 3 | <figure class="image image-style-align-center image_resized" style="width:100%;"><img style="aspect-ratio:1074/276;" src="11_Geo Map_image.png" width="1074" height="276"></figure> | And then go to Owned Attributes and type `#geolocation="`, then paste from the clipboard as-is and then add the ending `"` character. Press Enter to confirm and the map should now be updated to contain the new note. |
|
||||
|
||||
@ -120,7 +120,7 @@ Similarly to the Google Maps approach:
|
||||
| | | |
|
||||
| --- | --- | --- |
|
||||
| 1 | <img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png" width="562" height="454"> | Go to any location on openstreetmap.org and right click to bring up the context menu. Select the “Show address” item. |
|
||||
| 2 | <img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png" width="696" height="480"> | 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. |
|
||||
| 2 | <img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png" width="696" height="480"> | The address will be visible in the top-left of the screen, in the place of the search bar. <br> <br>Select the coordinates and copy them into the clipboard. |
|
||||
| 3 | <img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png" width="640" height="276"> | Simply paste the value inside the text box into the `#geolocation` attribute of a child note of the map and then it should be displayed on the map. |
|
||||
|
||||
## Adding GPS tracks (.gpx)
|
||||
@ -131,7 +131,7 @@ Trilium has basic support for displaying GPS tracks on the geo map.
|
||||
| --- | --- | --- |
|
||||
| 1 | <figure class="image image-style-align-center"><img style="aspect-ratio:226/74;" src="3_Geo Map_image.png" width="226" height="74"></figure> | To add a track, simply drag & drop a .gpx file inside the geo map in the note tree. |
|
||||
| 2 | <figure class="image image-style-align-center"><img style="aspect-ratio:322/222;" src="14_Geo Map_image.png" width="322" height="222"></figure> | In order for the file to be recognized as a GPS track, it needs to show up as `application/gpx+xml` in the _File type_ field. |
|
||||
| 3 | <figure class="image image-style-align-center"><img style="aspect-ratio:620/530;" src="6_Geo Map_image.png" width="620" height="530"></figure> | 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. |
|
||||
| 3 | <figure class="image image-style-align-center"><img style="aspect-ratio:620/530;" src="6_Geo Map_image.png" width="620" height="530"></figure> | 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. |
|
||||
|
||||
> [!NOTE]
|
||||
> The starting point of the track will be displayed as a marker, with the name of the note underneath. The start marker will also respect the icon and the `color` of the note. The end marker is displayed with a distinct icon.
|
||||
@ -152,7 +152,7 @@ To enable read-only mode simply press the _Lock_ icon from the <a class="refere
|
||||
|
||||
### Map Style
|
||||
|
||||
The styling of the map can be adjusted in the _Collection Properties_ tab in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Ribbon.md">Ribbon</a> or manually via the `#map:style` attribute.
|
||||
The styling of the map can be adjusted in the _Collection Properties_ (above the map, by pressing on the Gear icon) or manually via the `#map:style` attribute.
|
||||
|
||||
The geo map comes with two different types of styles:
|
||||
|
||||
@ -166,12 +166,23 @@ The geo map comes with two different types of styles:
|
||||
* These come both in a light and a dark version.
|
||||
* The vector styles come from [VersaTiles](https://versatiles.org/), a free and open-source project providing map tiles based on OpenStreetMap.
|
||||
|
||||
### Custom map style / tiles
|
||||
|
||||
Starting with v0.102.0 it is possible to use custom tile sets, but only in raster format.
|
||||
|
||||
To do so, manually set the `#map:style` [label](../Advanced%20Usage/Attributes/Labels.md) to the URL of the tile set. For example, to use Esri.NatGeoWorldMap, set the value to [`https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}`.](https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}.)
|
||||
|
||||
> [!NOTE]
|
||||
> Currently it is not possible to use a custom map style.
|
||||
> For a list of tile sets, see the [Leaflet Providers preview](https://leaflet-extras.github.io/leaflet-providers/preview/) page. Select a desired tile set and just copy the URL from the _Plain JavaScript_ example.
|
||||
|
||||
### Scale
|
||||
Custom vector map support is planned, but not yet implemented.
|
||||
|
||||
Activating this option via the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Ribbon.md">Ribbon</a> or manually via `#map:scale` will display an indicator in the bottom-left of the scale of the map.
|
||||
### Other options
|
||||
|
||||
The following options can be configured either via the Collection properties pane above the map, by clicking on the settings (Gear icon). Alternatively, each of these options also have a corresponding [label](../Advanced%20Usage/Attributes/Labels.md) that can be set manually.
|
||||
|
||||
* Scale, which illustrates the scale of the map in kilometers and miles in the bottom-left of the map.
|
||||
* The name of the markers is displayed by default underneath the pin on the map. Since v0.102.0, it is possible to hide these labels which increases the performance and decreases clutter when there are many markers on the map.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user