mirror of
https://github.com/zadam/trilium.git
synced 2025-11-09 14:55:50 +01:00
docs(user): widget basics missing template (closes #6148)
This commit is contained in:
Elian Doran
49
apps/server/src/assets/doc_notes/en/User Guide/User Guide/AI.html
generated
vendored
49
apps/server/src/assets/doc_notes/en/User Guide/User Guide/AI.html
generated
vendored
@@ -19,6 +19,7 @@ class="image image_resized" style="width:74.04%;">
|
||||
<img style="aspect-ratio:1911/997;" src="1_AI_image.png"
|
||||
width="1911" height="997">
|
||||
</figure>
|
||||
|
||||
<h2>Embeddings</h2>
|
||||
<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
|
||||
@@ -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
|
||||
to be more effectively (and even more to be added!):</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e56ad2313afb3f2f5162bcb3d9bf8e963"><code>search_notes</code>
|
||||
<li><code>search_notes</code>
|
||||
<ul>
|
||||
<li data-list-item-id="ee3b5cc2bd60f496e7919c63def713108">Semantic search</li>
|
||||
<li>Semantic search</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e9abe7bae428aff060dfc70ef669bd079"><code>keyword_search</code>
|
||||
<li><code>keyword_search</code>
|
||||
<ul>
|
||||
<li data-list-item-id="ea8e2cece0d711e80eacfdb42e5d0edc3">Keyword-based search</li>
|
||||
<li>Keyword-based search</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e775735113778afe2073695881679540b"><code>attribute_search</code>
|
||||
<li><code>attribute_search</code>
|
||||
<ul>
|
||||
<li data-list-item-id="e64a93997e8ae8cc348e222f926866921">Attribute-specific search</li>
|
||||
<li>Attribute-specific search</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e58d04b2e226a143a8c8941337b04113a"><code>search_suggestion</code>
|
||||
<li><code>search_suggestion</code>
|
||||
<ul>
|
||||
<li data-list-item-id="e7c1ed076f0e0e3c242ca659276576860">Search syntax helper</li>
|
||||
<li>Search syntax helper</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e30741593cef85e71179301c280063bc2"><code>read_note</code>
|
||||
<li><code>read_note</code>
|
||||
<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>
|
||||
</li>
|
||||
<li data-list-item-id="ec71fd71ce58b9d8338bc66e7c99ae1cb"><code>create_note</code>
|
||||
<li><code>create_note</code>
|
||||
<ul>
|
||||
<li data-list-item-id="e0b0bae68b45bb0c27bc092145452ecd1">Create a Note</li>
|
||||
<li>Create a Note</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e7e816d84f52cf76096d2b5f1e4665989"><code>update_note</code>
|
||||
<li><code>update_note</code>
|
||||
<ul>
|
||||
<li data-list-item-id="ed28fc8ca5a4753c1b680ee52d140940a">Update a Note</li>
|
||||
<li>Update a Note</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e4580152b092501aa4fa87d1562b0f304"><code>manage_attributes</code>
|
||||
<li><code>manage_attributes</code>
|
||||
<ul>
|
||||
<li data-list-item-id="ea0601e29b574cf0e4c40ae0e7d60bfa4">Manage attributes on a Note</li>
|
||||
<li>Manage attributes on a Note</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="ecea045d4312b04ea06ac12802efb0544"><code>manage_relationships</code>
|
||||
<li><code>manage_relationships</code>
|
||||
<ul>
|
||||
<li data-list-item-id="e3293a7c119de1a0eb2ddf8779a0b0d65">Manage the various relationships between Notes</li>
|
||||
<li>Manage the various relationships between Notes</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e483a2ef5f76d4da426c6059ddd3827a0"><code>extract_content</code>
|
||||
<li><code>extract_content</code>
|
||||
<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>
|
||||
</li>
|
||||
<li data-list-item-id="e11df70f4a6846bf881cb110c2950065f"><code>calendar_integration</code>
|
||||
<li><code>calendar_integration</code>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -146,12 +147,12 @@ class="image image_resized" style="width:74.04%;">
|
||||
<h2>Overview</h2>
|
||||
<p>To start, simply press the <em>Chat with Notes</em> button in the
|
||||
<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%;">
|
||||
<img style="aspect-ratio:1378/539;" src="2_AI_image.png"
|
||||
width="1378" height="539">
|
||||
</figure>
|
||||
<p>If you don't see the button in the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>,
|
||||
<p>If you don't see the button in the <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
|
||||
the <em>Visible Launchers</em> section:</p>
|
||||
<figure class="image image_resized"
|
||||
|
||||
@@ -1,41 +1,40 @@
|
||||
<aside class="admonition warning">
|
||||
<p>This functionality is still in preview, expect possible issues or even
|
||||
the feature disappearing completely.
|
||||
<br>Feel free to <a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_wy8So3yZZlH9">report</a> any
|
||||
issues you might have.</p>
|
||||
<br>Feel free to <a href="#root/_help_wy8So3yZZlH9">report</a> any issues you might
|
||||
have.</p>
|
||||
</aside>
|
||||
<p>The read-only database is an alternative to <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_R9pX4DGra2Vt">Sharing</a> notes.
|
||||
Although the share functionality works pretty well to publish pages to
|
||||
the Internet in a wiki, blog-like format it does not offer the full functionality
|
||||
behind Trilium (such as the advanced <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_eIg8jdvaoNNd">Search</a> or
|
||||
the interactivity behind <a class="reference-link" href="#root/pOsGYCXsbNQG/_help_GTwFsgaA0lCt">Collections</a> or
|
||||
the various <a class="reference-link" href="#root/pOsGYCXsbNQG/_help_KSZ04uQ2D1St">Note Types</a>).</p>
|
||||
href="#root/_help_R9pX4DGra2Vt">Sharing</a> notes. Although the share functionality
|
||||
works pretty well to publish pages to the Internet in a wiki, blog-like
|
||||
format it does not offer the full functionality behind Trilium (such as
|
||||
the advanced <a class="reference-link" href="#root/_help_eIg8jdvaoNNd">Search</a> or
|
||||
the interactivity behind <a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a> or
|
||||
the various <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
|
||||
used as normal, but editing is disabled and changes are made in-memory
|
||||
only.</p>
|
||||
<h2>What it does</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="e97d71c2d01fa683d840e3f8de9e5bea9">All notes are read-only, without the possibility of editing them.</li>
|
||||
<li
|
||||
data-list-item-id="e6e82b25093f659cca922614ea8701ca4">Features that would normally alter the database such as the list of recent
|
||||
<li>All notes are read-only, without the possibility of editing them.</li>
|
||||
<li>Features that would normally alter the database such as the list of recent
|
||||
notes are disabled.</li>
|
||||
</ul>
|
||||
<h2>Limitations</h2>
|
||||
<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.
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Setting a database as read-only</h2>
|
||||
<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]
|
||||
readOnly=true</code></pre>
|
||||
<p>If your server is already running, restart it to apply the changes.</p>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<p>Data directory contains:</p>
|
||||
<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 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>
|
||||
<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>
|
||||
<li data-list-item-id="e9f5de6d3c7f8d79710eb8c8e2ccac979"><code>log</code> - contains application log files</li>
|
||||
<li><code>log</code> - contains application log files</li>
|
||||
</ul>
|
||||
<h2>Location of the data directory</h2>
|
||||
<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
|
||||
in:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e52706d339ce2332e73c5cfdc51edf81d"><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
|
||||
data-list-item-id="eae590672aea8b24e625f372fb22d1f1b"><code>/Users/[user]/Library/Application Support</code> for Mac OS</li>
|
||||
<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>
|
||||
<li><code>/home/[user]/.local/share</code> for Linux</li>
|
||||
<li><code>C:\Users\[user]\AppData\Roaming</code> for Windows Vista and up</li>
|
||||
<li><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>user's home is also a default setup for [[docker|Docker server installation]]</li>
|
||||
</ul>
|
||||
<p>If you want to back up your Trilium data, just backup this single directory
|
||||
- it contains everything you need.</p>
|
||||
@@ -35,17 +32,15 @@
|
||||
variable to some other location:</p>
|
||||
<h3>Windows</h3>
|
||||
<ol>
|
||||
<li data-list-item-id="e8597645795a4e5b079b8e2e4a772a7d7">Press the Windows key on your keyboard.</li>
|
||||
<li data-list-item-id="ee32856df1db7c2d206baa480a672eeac">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 Windows key on your keyboard.</li>
|
||||
<li>Search and select “Edit the system variables”.</li>
|
||||
<li>Press the “Environment Variables…” button in the bottom-right of the newly
|
||||
opened screen.</li>
|
||||
<li data-list-item-id="e6c7bae2590161a2661b6229c0853021c">On the top section ("User variables for [user]"), press the “New…” button.</li>
|
||||
<li
|
||||
data-list-item-id="effac7dc3976f17d309958dd3374cfa8d">In the <em>Variable name</em> field insert <code>TRILIUM_DATA_DIR</code>.</li>
|
||||
<li
|
||||
data-list-item-id="e3b74fdd03536563bb461e11111fae5ff">Press the <em>Browse Directory…</em> button and select the new directory
|
||||
<li>On the top section ("User variables for [user]"), press the “New…” button.</li>
|
||||
<li>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
|
||||
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>
|
||||
<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>
|
||||
@@ -74,7 +69,6 @@
|
||||
<h2>Fine-grained directory/path location</h2>
|
||||
<p>Apart from the data directory, some of the subdirectories of it can be
|
||||
moved elsewhere by changing an environment variable:</p>
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -133,4 +127,3 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
@@ -8,7 +8,7 @@
|
||||
get parentWidget() { return "left-pane"; }
|
||||
|
||||
doRender() {
|
||||
this.$widget = $("");
|
||||
this.$widget = $("<div id='my-widget'>");
|
||||
return this.$widget;
|
||||
}
|
||||
}
|
||||
@@ -16,19 +16,19 @@
|
||||
module.exports = new MyWidget();</code></pre>
|
||||
<p>To implement this widget:</p>
|
||||
<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>
|
||||
<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>
|
||||
<li>Restart Trilium or reload the window.</li>
|
||||
<li data-list-item-id="e876a226740e2dcfb2a900ebd674b2b6b">Restart Trilium or reload the window.</li>
|
||||
</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
|
||||
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
|
||||
the <code>#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a>.</p>
|
||||
<h3>Step 2: Adding an UI Element</h3>
|
||||
<p>Next, let's improve the widget by adding a button to it.</p><pre><code class="language-text-x-trilium-auto">const template = ``;
|
||||
<p>Next, let's improve the widget by adding a button to it.</p><pre><code class="language-text-x-trilium-auto">const template = `<div id="my-widget"><button>Click Me!</button></div>`;
|
||||
|
||||
class MyWidget extends api.BasicWidget {
|
||||
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,
|
||||
we'll apply some custom styling. Trilium includes <a href="https://boxicons.com">Box Icons</a>,
|
||||
which we'll use to replace the button text with an icon. For example the <code>bx bxs-magic-wand</code> icon.</p>
|
||||
<p>Here's the updated template:</p><pre><code class="language-text-x-trilium-auto">const template = ``;</code></pre>
|
||||
<p>Here's the updated template:</p><pre><code class="language-text-x-trilium-auto">const template = `<div id="my-widget"><button class="tree-floating-button bx bxs-magic-wand tree-settings-button"></button></div>`;</code></pre>
|
||||
<p>Next, we'll adjust the button's position using CSS:</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
|
||||
get position() { return 1; }
|
||||
get parentWidget() { return "left-pane"; }
|
||||
@@ -89,13 +89,14 @@ module.exports = new MyWidget();</code></pre>
|
||||
module.exports = new MyWidget();</code></pre>
|
||||
<p><code>parentWidget()</code> can be given the following values:</p>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
<p><a href="#root/_help_s8alTXmpFR61">Reload</a> the application one last time.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
# 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 _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
|
||||
|
||||
98
docs/User Guide/!!!meta.json
vendored
98
docs/User Guide/!!!meta.json
vendored
@@ -14166,6 +14166,48 @@
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"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",
|
||||
"name": "iconClass",
|
||||
@@ -14179,48 +14221,6 @@
|
||||
"value": "read-only-db",
|
||||
"isInheritable": false,
|
||||
"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",
|
||||
@@ -14250,6 +14250,13 @@
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "xYmIYSP6wE3F",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
@@ -14263,13 +14270,6 @@
|
||||
"value": "bx bx-bot",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "xYmIYSP6wE3F",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
|
||||
@@ -11,7 +11,7 @@ class MyWidget extends api.BasicWidget {
|
||||
get parentWidget() { return "left-pane"; }
|
||||
|
||||
doRender() {
|
||||
this.$widget = $("");
|
||||
this.$widget = $("<div id='my-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).
|
||||
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
|
||||
|
||||
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 {
|
||||
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:
|
||||
|
||||
```
|
||||
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:
|
||||
|
||||
Reference in New Issue
Block a user