Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-09 14:55:50 +01:00
Code Issues Packages Projects Releases Activity

docs(user): widget basics missing template (closes #6148)

Browse Source
This commit is contained in:
Elian Doran
2025-11-05 18:32:34 +02:00
parent a577fd45e2
commit 4ae38ac5d6
7 changed files with 181 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
apps/server/src/assets/doc_notes/en/User Guide/User Guide/AI.html generated vendored
View File

@@ -19,7 +19,8 @@ class="image image_resized" style="width:74.04%;">
<img style="aspect-ratio:1911/997;" src="1_AI_image.png" <img style="aspect-ratio:1911/997;" src="1_AI_image.png"
width="1911" height="997"> width="1911" height="997">
</figure> </figure>
<h2>Embeddings</h2>
<h2>Embeddings</h2>
<p><strong>Embeddings</strong> are important as it allows us to have an compact <p><strong>Embeddings</strong> are important as it allows us to have an compact
AI “summary” (it's not human readable text) of each of your Notes, that AI “summary” (it's not human readable text) of each of your Notes, that
we can then perform mathematical functions on (such as cosine similarity) we can then perform mathematical functions on (such as cosine similarity)
@@ -79,59 +80,59 @@ class="image image_resized" style="width:74.04%;">
<p>These are the tools that currently exist, and will certainly be updated <p>These are the tools that currently exist, and will certainly be updated
to be more effectively (and even more to be added!):</p> to be more effectively (and even more to be added!):</p>
<ul> <ul>
<li data-list-item-id="e56ad2313afb3f2f5162bcb3d9bf8e963"><code>search_notes</code> <li><code>search_notes</code>
<ul> <ul>
<li data-list-item-id="ee3b5cc2bd60f496e7919c63def713108">Semantic search</li> <li>Semantic search</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e9abe7bae428aff060dfc70ef669bd079"><code>keyword_search</code> <li><code>keyword_search</code>
<ul> <ul>
<li data-list-item-id="ea8e2cece0d711e80eacfdb42e5d0edc3">Keyword-based search</li> <li>Keyword-based search</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e775735113778afe2073695881679540b"><code>attribute_search</code> <li><code>attribute_search</code>
<ul> <ul>
<li data-list-item-id="e64a93997e8ae8cc348e222f926866921">Attribute-specific search</li> <li>Attribute-specific search</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e58d04b2e226a143a8c8941337b04113a"><code>search_suggestion</code> <li><code>search_suggestion</code>
<ul> <ul>
<li data-list-item-id="e7c1ed076f0e0e3c242ca659276576860">Search syntax helper</li> <li>Search syntax helper</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e30741593cef85e71179301c280063bc2"><code>read_note</code> <li><code>read_note</code>
<ul> <ul>
<li data-list-item-id="e9c50f6fe0b4f013f16f9b32dbf6dbc92">Read note content (helps the LLM read Notes)</li> <li>Read note content (helps the LLM read Notes)</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="ec71fd71ce58b9d8338bc66e7c99ae1cb"><code>create_note</code> <li><code>create_note</code>
<ul> <ul>
<li data-list-item-id="e0b0bae68b45bb0c27bc092145452ecd1">Create a Note</li> <li>Create a Note</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e7e816d84f52cf76096d2b5f1e4665989"><code>update_note</code> <li><code>update_note</code>
<ul> <ul>
<li data-list-item-id="ed28fc8ca5a4753c1b680ee52d140940a">Update a Note</li> <li>Update a Note</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e4580152b092501aa4fa87d1562b0f304"><code>manage_attributes</code> <li><code>manage_attributes</code>
<ul> <ul>
<li data-list-item-id="ea0601e29b574cf0e4c40ae0e7d60bfa4">Manage attributes on a Note</li> <li>Manage attributes on a Note</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="ecea045d4312b04ea06ac12802efb0544"><code>manage_relationships</code> <li><code>manage_relationships</code>
<ul> <ul>
<li data-list-item-id="e3293a7c119de1a0eb2ddf8779a0b0d65">Manage the various relationships between Notes</li> <li>Manage the various relationships between Notes</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e483a2ef5f76d4da426c6059ddd3827a0"><code>extract_content</code> <li><code>extract_content</code>
<ul> <ul>
<li data-list-item-id="e1735854ab39d6d4e06a242bc2f80b839">Used to smartly extract content from a Note</li> <li>Used to smartly extract content from a Note</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e11df70f4a6846bf881cb110c2950065f"><code>calendar_integration</code> <li><code>calendar_integration</code>
<ul> <ul>
<li data-list-item-id="e0f1dfa6c5520bf02e125c1932b4f6e5e">Used to find date notes, create date notes, get the daily note, etc.</li> <li>Used to find date notes, create date notes, get the daily note, etc.</li>
</ul> </ul>
</li> </li>
</ul> </ul>
@@ -146,12 +147,12 @@ class="image image_resized" style="width:74.04%;">
<h2>Overview</h2> <h2>Overview</h2>
<p>To start, simply press the <em>Chat with Notes</em> button in the&nbsp; <p>To start, simply press the <em>Chat with Notes</em> button in the&nbsp;
<a <a
class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>.</p> class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>.</p>
<figure class="image image_resized" style="width:60.77%;"> <figure class="image image_resized" style="width:60.77%;">
<img style="aspect-ratio:1378/539;" src="2_AI_image.png" <img style="aspect-ratio:1378/539;" src="2_AI_image.png"
width="1378" height="539"> width="1378" height="539">
</figure> </figure>
<p>If you don't see the button in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>, <p>If you don't see the button in the&nbsp;<a class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>,
you might need to move it from the <em>Available Launchers</em> section to you might need to move it from the <em>Available Launchers</em> section to
the <em>Visible Launchers</em> section:</p> the <em>Visible Launchers</em> section:</p>
<figure class="image image_resized" <figure class="image image_resized"

29
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/Read-only database.html generated vendored
View File

@@ -1,41 +1,40 @@
<aside class="admonition warning"> <aside class="admonition warning">
<p>This functionality is still in preview, expect possible issues or even <p>This functionality is still in preview, expect possible issues or even
the feature disappearing completely. the feature disappearing completely.
<br>Feel free to <a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_wy8So3yZZlH9">report</a> any <br>Feel free to <a href="#root/_help_wy8So3yZZlH9">report</a> any issues you might
issues you might have.</p> have.</p>
</aside> </aside>
<p>The read-only database is an alternative to&nbsp;<a class="reference-link" <p>The read-only database is an alternative to&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_R9pX4DGra2Vt">Sharing</a>&nbsp;notes. href="#root/_help_R9pX4DGra2Vt">Sharing</a>&nbsp;notes. Although the share functionality
Although the share functionality works pretty well to publish pages to works pretty well to publish pages to the Internet in a wiki, blog-like
the Internet in a wiki, blog-like format it does not offer the full functionality format it does not offer the full functionality behind Trilium (such as
behind Trilium (such as the advanced&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_eIg8jdvaoNNd">Search</a>&nbsp;or the advanced&nbsp;<a class="reference-link" href="#root/_help_eIg8jdvaoNNd">Search</a>&nbsp;or
the interactivity behind&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/_help_GTwFsgaA0lCt">Collections</a>&nbsp;or the interactivity behind&nbsp;<a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a>&nbsp;or
the various&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/_help_KSZ04uQ2D1St">Note Types</a>).</p> the various&nbsp;<a class="reference-link" href="#root/_help_KSZ04uQ2D1St">Note Types</a>).</p>
<p>When the database is in read-only mode, the Trilium application can be <p>When the database is in read-only mode, the Trilium application can be
used as normal, but editing is disabled and changes are made in-memory used as normal, but editing is disabled and changes are made in-memory
only.</p> only.</p>
<h2>What it does</h2> <h2>What it does</h2>
<ul> <ul>
<li data-list-item-id="e97d71c2d01fa683d840e3f8de9e5bea9">All notes are read-only, without the possibility of editing them.</li> <li>All notes are read-only, without the possibility of editing them.</li>
<li <li>Features that would normally alter the database such as the list of recent
data-list-item-id="e6e82b25093f659cca922614ea8701ca4">Features that would normally alter the database such as the list of recent
notes are disabled.</li> notes are disabled.</li>
</ul> </ul>
<h2>Limitations</h2> <h2>Limitations</h2>
<ul> <ul>
<li data-list-item-id="ec1a648467ed42eee3d6b96f829b6daad">Some features might “slip through” and still end up creating a note, for <li>Some features might “slip through” and still end up creating a note, for
example. example.
<ul> <ul>
<li data-list-item-id="ed98de88bf24f574cfda28cf278be7f86">However, the database is still read-only, so all modifications will be <li>However, the database is still read-only, so all modifications will be
reset if the server is restarted.</li> reset if the server is restarted.</li>
<li data-list-item-id="e3f0450830304fa98038a8a5fd9026b06">Whenever this occurs, <code>ERROR: read-only DB ignored</code> will be shown <li>Whenever this occurs, <code>ERROR: read-only DB ignored</code> will be shown
in the logs.</li> in the logs.</li>
</ul> </ul>
</li> </li>
</ul> </ul>
<h2>Setting a database as read-only</h2> <h2>Setting a database as read-only</h2>
<p>First, make sure the database is initialized (e.g. the first set up is <p>First, make sure the database is initialized (e.g. the first set up is
complete). Then modify the <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_Gzjqa934BdH4">config.ini</a> by complete). Then modify the <a href="#root/_help_Gzjqa934BdH4">config.ini</a> by
looking for the <code>[General]</code> section and adding a new <code>readOnly</code> field:</p><pre><code class="language-text-x-trilium-auto">[General] looking for the <code>[General]</code> section and adding a new <code>readOnly</code> field:</p><pre><code class="language-text-x-trilium-auto">[General]
readOnly=true</code></pre> readOnly=true</code></pre>
<p>If your server is already running, restart it to apply the changes.</p> <p>If your server is already running, restart it to apply the changes.</p>

43
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Data directory.html generated vendored
View File

@@ -1,12 +1,12 @@
<p>Data directory contains:</p> <p>Data directory contains:</p>
<ul> <ul>
<li data-list-item-id="e02c8e6918e645272972d94bf51bd34e1"><code>document.db</code> - <a href="#root/_help_wX4HbRucYSDD">database</a> <li><code>document.db</code> - <a href="#root/_help_wX4HbRucYSDD">database</a>
</li> </li>
<li data-list-item-id="ee3b386f752a4d2de88a1362ff4bc447a"><code>config.ini</code> - instance level settings like port on which the <li><code>config.ini</code> - instance level settings like port on which the
Trilium application runs</li> Trilium application runs</li>
<li data-list-item-id="e9acb98fe27a493914c7f61574b277d59"><code>backup</code> - contains automatically <a href="#root/_help_ODY7qQn5m2FT">backup</a> of <li><code>backup</code> - contains automatically <a href="#root/_help_ODY7qQn5m2FT">backup</a> of
documents</li> documents</li>
<li data-list-item-id="e9f5de6d3c7f8d79710eb8c8e2ccac979"><code>log</code> - contains application log files</li> <li><code>log</code> - contains application log files</li>
</ul> </ul>
<h2>Location of the data directory</h2> <h2>Location of the data directory</h2>
<p>Easy way how to find out which data directory Trilium uses is to look <p>Easy way how to find out which data directory Trilium uses is to look
@@ -18,14 +18,11 @@
<p>Data directory is normally named <code>trilium-data</code> and it is stored <p>Data directory is normally named <code>trilium-data</code> and it is stored
in:</p> in:</p>
<ul> <ul>
<li data-list-item-id="e52706d339ce2332e73c5cfdc51edf81d"><code>/home/[user]/.local/share</code> for Linux</li> <li><code>/home/[user]/.local/share</code> for Linux</li>
<li data-list-item-id="e5709c767479c028d2ef60d17124ea924"><code>C:\Users\[user]\AppData\Roaming</code> for Windows Vista and up</li> <li><code>C:\Users\[user]\AppData\Roaming</code> for Windows Vista and up</li>
<li <li><code>/Users/[user]/Library/Application Support</code> for Mac OS</li>
data-list-item-id="eae590672aea8b24e625f372fb22d1f1b"><code>/Users/[user]/Library/Application Support</code> for Mac OS</li> <li>user's home is a fallback if some of the paths above don't exist</li>
<li <li>user's home is also a default setup for [[docker|Docker server installation]]</li>
data-list-item-id="e150ab7fc3c436d7cbac192acf3fe433f">user's home is a fallback if some of the paths above don't exist</li>
<li
data-list-item-id="e5f476ac39d8fa453e19b8399073a79d7">user's home is also a default setup for [[docker|Docker server installation]]</li>
</ul> </ul>
<p>If you want to back up your Trilium data, just backup this single directory <p>If you want to back up your Trilium data, just backup this single directory
- it contains everything you need.</p> - it contains everything you need.</p>
@@ -35,17 +32,15 @@
variable to some other location:</p> variable to some other location:</p>
<h3>Windows</h3> <h3>Windows</h3>
<ol> <ol>
<li data-list-item-id="e8597645795a4e5b079b8e2e4a772a7d7">Press the Windows key on your keyboard.</li> <li>Press the Windows key on your keyboard.</li>
<li data-list-item-id="ee32856df1db7c2d206baa480a672eeac">Search and select “Edit the system variables”.</li> <li>Search and select “Edit the system variables”.</li>
<li data-list-item-id="e08c7cdc0659b414465a07c78dfdaeb34">Press the “Environment Variables…” button in the bottom-right of the newly <li>Press the “Environment Variables…” button in the bottom-right of the newly
opened screen.</li> opened screen.</li>
<li data-list-item-id="e6c7bae2590161a2661b6229c0853021c">On the top section ("User variables for [user]"), press the “New…” button.</li> <li>On the top section ("User variables for [user]"), press the “New…” button.</li>
<li <li>In the <em>Variable name</em> field insert <code>TRILIUM_DATA_DIR</code>.</li>
data-list-item-id="effac7dc3976f17d309958dd3374cfa8d">In the <em>Variable name</em> field insert <code>TRILIUM_DATA_DIR</code>.</li> <li>Press the <em>Browse Directory…</em> button and select the new directory
<li
data-list-item-id="e3b74fdd03536563bb461e11111fae5ff">Press the <em>Browse Directory…</em> button and select the new directory
where to store the database.</li> where to store the database.</li>
<li data-list-item-id="ed6df567f0fa772a14610b3904a0cb635">Close all the windows by pressing the <em>OK</em> button for each of them.</li> <li>Close all the windows by pressing the <em>OK</em> button for each of them.</li>
</ol> </ol>
<h4>Linux</h4><pre><code class="language-text-x-trilium-auto">export TRILIUM_DATA_DIR=/home/myuser/data/my-trilium-data</code></pre> <h4>Linux</h4><pre><code class="language-text-x-trilium-auto">export TRILIUM_DATA_DIR=/home/myuser/data/my-trilium-data</code></pre>
<h4>Mac OS X</h4> <h4>Mac OS X</h4>
@@ -74,8 +69,7 @@
<h2>Fine-grained directory/path location</h2> <h2>Fine-grained directory/path location</h2>
<p>Apart from the data directory, some of the subdirectories of it can be <p>Apart from the data directory, some of the subdirectories of it can be
moved elsewhere by changing an environment variable:</p> moved elsewhere by changing an environment variable:</p>
<figure class="table"> <table>
<table>
<thead> <thead>
<tr> <tr>
<th>Environment variable</th> <th>Environment variable</th>
@@ -132,5 +126,4 @@
<td>Path to&nbsp;<a class="reference-link" href="#root/_help_Gzjqa934BdH4">Configuration (config.ini or environment variables)</a>&nbsp;file.</td> <td>Path to&nbsp;<a class="reference-link" href="#root/_help_Gzjqa934BdH4">Configuration (config.ini or environment variables)</a>&nbsp;file.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure>

23
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html generated vendored
View File

@@ -8,7 +8,7 @@
get parentWidget() { return "left-pane"; } get parentWidget() { return "left-pane"; }
doRender() { doRender() {
this.$widget = $(""); this.$widget = $("&lt;div id='my-widget'&gt;");
return this.$widget; return this.$widget;
} }
} }
@@ -16,19 +16,19 @@
module.exports = new MyWidget();</code></pre> module.exports = new MyWidget();</code></pre>
<p>To implement this widget:</p> <p>To implement this widget:</p>
<ol> <ol>
<li>Create a new <code>JS Frontend</code> note in Trilium and paste in the code <li data-list-item-id="ed70b15c6cddbf0d0ac049dccd6835c5b">Create a new <code>JS Frontend</code> note in Trilium and paste in the code
above.</li> above.</li>
<li>Assign the <code>#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a> to <li data-list-item-id="e507afc0bb1d604a590eba80b6137d84b">Assign the <code>#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a> to
the <a href="#root/_help_BFs8mudNFgCS">note</a>.</li> the <a href="#root/_help_BFs8mudNFgCS">note</a>.</li>
<li>Restart Trilium or reload the window.</li> <li data-list-item-id="e876a226740e2dcfb2a900ebd674b2b6b">Restart Trilium or reload the window.</li>
</ol> </ol>
<p>To verify that the widget is working, open the developer tools (<code>Cmd</code> + <code>Shift</code> + <code>I</code>) <p>To verify that the widget is working, open the developer tools (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>)
and run <code>document.querySelector("#my-widget")</code>. If the element and run <code>document.querySelector("#my-widget")</code>. If the element
is found, the widget is functioning correctly. If <code>undefined</code> is is found, the widget is functioning correctly. If <code>undefined</code> is
returned, double-check that the <a href="#root/_help_BFs8mudNFgCS">note</a> has returned, double-check that the <a href="#root/_help_BFs8mudNFgCS">note</a> has
the <code>#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a>.</p> the <code>#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a>.</p>
<h3>Step 2: Adding an UI Element</h3> <h3>Step 2: Adding an UI Element</h3>
<p>Next, let's improve the widget by adding a button to it.</p><pre><code class="language-text-x-trilium-auto">const template = ``; <p>Next, let's improve the widget by adding a button to it.</p><pre><code class="language-text-x-trilium-auto">const template = `&lt;div id="my-widget"&gt;&lt;button&gt;Click Me!&lt;/button&gt;&lt;/div&gt;`;
class MyWidget extends api.BasicWidget { class MyWidget extends api.BasicWidget {
get position() {return 1;} get position() {return 1;}
@@ -47,7 +47,7 @@ module.exports = new MyWidget();</code></pre>
<p>To make the button more visually appealing and position it correctly, <p>To make the button more visually appealing and position it correctly,
we'll apply some custom styling. Trilium includes <a href="https://boxicons.com">Box Icons</a>, we'll apply some custom styling. Trilium includes <a href="https://boxicons.com">Box Icons</a>,
which we'll use to replace the button text with an icon. For example the <code>bx bxs-magic-wand</code> icon.</p> which we'll use to replace the button text with an icon. For example the <code>bx bxs-magic-wand</code> icon.</p>
<p>Here's the updated template:</p><pre><code class="language-text-x-trilium-auto">const template = ``;</code></pre> <p>Here's the updated template:</p><pre><code class="language-text-x-trilium-auto">const template = `&lt;div id="my-widget"&gt;&lt;button class="tree-floating-button bx bxs-magic-wand tree-settings-button"&gt;&lt;/button&gt;&lt;/div&gt;`;</code></pre>
<p>Next, we'll adjust the button's position using CSS:</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget { <p>Next, we'll adjust the button's position using CSS:</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
get position() { return 1; } get position() { return 1; }
get parentWidget() { return "left-pane"; } get parentWidget() { return "left-pane"; }
@@ -89,13 +89,14 @@ module.exports = new MyWidget();</code></pre>
module.exports = new MyWidget();</code></pre> module.exports = new MyWidget();</code></pre>
<p><code>parentWidget()</code> can be given the following values:</p> <p><code>parentWidget()</code> can be given the following values:</p>
<ul> <ul>
<li><code>left-pane</code> - This renders the widget on the left side of the <li data-list-item-id="e8b62dcf10b3cfccc9f4bc80ded18346f"><code>left-pane</code> - This renders the widget on the left side of the
screen where the note tree lives.</li> screen where the note tree lives.</li>
<li><code>center-pane</code> - This renders the widget in the center of the <li data-list-item-id="eeeef623e323425e2c362acb5fb5fcc91"><code>center-pane</code> - This renders the widget in the center of the
layout in the same location that notes and splits appear.</li> layout in the same location that notes and splits appear.</li>
<li><code>note-detail-pane</code> - This renders the widget <em>with</em> the <li data-list-item-id="e95ab9fba1601f210196b628eccc2e3d0"><code>note-detail-pane</code> - This renders the widget <em>with</em> the
note in the center pane. This means it can appear multiple times with splits.</li> note in the center pane. This means it can appear multiple times with splits.</li>
<li><code>right-pane</code> - This renders the widget to the right of any opened <li
data-list-item-id="e0f1f65f68ce610bcc85f51de7ff47f37"><code>right-pane</code> - This renders the widget to the right of any opened
notes.</li> notes.</li>
</ul> </ul>
<p><a href="#root/_help_s8alTXmpFR61">Reload</a> the application one last time. <p><a href="#root/_help_s8alTXmpFR61">Reload</a> the application one last time.

2
docs/Developer Guide/Developer Guide/Documentation.md vendored
View File

@@ -1,5 +1,5 @@
# Documentation # Documentation
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/6iUHD6bZIVmd/Documentation_image.png" width="205" height="162"> There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/OdhZWHj05SLY/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 _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. * The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.

98
docs/User Guide/!!!meta.json vendored
View File

@@ -14166,6 +14166,48 @@
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "Gzjqa934BdH4",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "wy8So3yZZlH9",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "R9pX4DGra2Vt",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "eIg8jdvaoNNd",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "GTwFsgaA0lCt",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "KSZ04uQ2D1St",
"isInheritable": false,
"position": 60
},
{ {
"type": "label", "type": "label",
"name": "iconClass", "name": "iconClass",
@@ -14179,48 +14221,6 @@
"value": "read-only-db", "value": "read-only-db",
"isInheritable": false, "isInheritable": false,
"position": 40 "position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "wy8So3yZZlH9",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "R9pX4DGra2Vt",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "Gzjqa934BdH4",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "eIg8jdvaoNNd",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "GTwFsgaA0lCt",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "KSZ04uQ2D1St",
"isInheritable": false,
"position": 100
} }
], ],
"format": "markdown", "format": "markdown",
@@ -14250,6 +14250,13 @@
"isInheritable": false, "isInheritable": false,
"position": 10 "position": 10
}, },
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 20
},
{ {
"type": "label", "type": "label",
"name": "shareAlias", "name": "shareAlias",
@@ -14263,13 +14270,6 @@
"value": "bx bx-bot", "value": "bx bx-bot",
"isInheritable": false, "isInheritable": false,
"position": 30 "position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 40
} }
], ],
"format": "markdown", "format": "markdown",

8
docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.md vendored
View File

@@ -11,7 +11,7 @@ class MyWidget extends api.BasicWidget {
get parentWidget() { return "left-pane"; } get parentWidget() { return "left-pane"; }
doRender() { doRender() {
this.$widget = $(""); this.$widget = $("<div id='my-widget'>");
return this.$widget; return this.$widget;
} }
} }
@@ -25,14 +25,14 @@ To implement this widget:
2. Assign the `#widget` [attribute](../../../Advanced%20Usage/Attributes.md) to the [note](../../../Basic%20Concepts%20and%20Features/Notes.md). 2. Assign the `#widget` [attribute](../../../Advanced%20Usage/Attributes.md) to the [note](../../../Basic%20Concepts%20and%20Features/Notes.md).
3. Restart Trilium or reload the window. 3. Restart Trilium or reload the window.
To verify that the widget is working, open the developer tools (`Cmd` + `Shift` + `I`) and run `document.querySelector("#my-widget")`. If the element is found, the widget is functioning correctly. If `undefined` is returned, double-check that the [note](../../../Basic%20Concepts%20and%20Features/Notes.md) has the `#widget` [attribute](../../../Advanced%20Usage/Attributes.md). To verify that the widget is working, open the developer tools (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>) and run `document.querySelector("#my-widget")`. If the element is found, the widget is functioning correctly. If `undefined` is returned, double-check that the [note](../../../Basic%20Concepts%20and%20Features/Notes.md) has the `#widget` [attribute](../../../Advanced%20Usage/Attributes.md).
### Step 2: Adding an UI Element ### Step 2: Adding an UI Element
Next, let's improve the widget by adding a button to it. Next, let's improve the widget by adding a button to it.
``` ```
const template = ``; const template = `<div id="my-widget"><button>Click Me!</button></div>`;
class MyWidget extends api.BasicWidget { class MyWidget extends api.BasicWidget {
get position() {return 1;} get position() {return 1;}
@@ -56,7 +56,7 @@ To make the button more visually appealing and position it correctly, we'll appl
Here's the updated template: Here's the updated template:
``` ```
const template = ``; const template = `<div id="my-widget"><button class="tree-floating-button bx bxs-magic-wand tree-settings-button"></button></div>`;
``` ```
Next, we'll adjust the button's position using CSS: Next, we'll adjust the button's position using CSS: