chore(docs): update documentation
Elian Doran
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 323 KiB After Width: | Height: | Size: 323 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
|
Before Width: | Height: | Size: 191 KiB After Width: | Height: | Size: 191 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 515 KiB After Width: | Height: | Size: 515 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 397 KiB After Width: | Height: | Size: 397 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 260 KiB After Width: | Height: | Size: 260 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 26 KiB |
@ -72,7 +72,7 @@
|
||||
<li>It's possible to drag across multiple days to set both the start and end
|
||||
date of a particular note.
|
||||
<br>
|
||||
<img src="4_Calendar View_image.png" width="425" height="91">
|
||||
<img src="3_Calendar View_image.png" width="425" height="91">
|
||||
</li>
|
||||
<li>Creating new notes from the calendar will respect the <code>~child:template</code> relation
|
||||
if set on the book note.</li>
|
||||
@ -81,7 +81,7 @@
|
||||
<ul>
|
||||
<li>Hovering the mouse over an event will display information about the note.
|
||||
<br>
|
||||
<img src="5_Calendar View_image.png" width="323" height="160">
|
||||
<img src="4_Calendar View_image.png" width="323" height="160">
|
||||
</li>
|
||||
<li>Left clicking the event will go to that note. Middle clicking will open
|
||||
the note in a new tab and right click will offer more options including
|
||||
@ -91,10 +91,93 @@
|
||||
edge of the event and dragging the mouse around.</li>
|
||||
</ul>
|
||||
<h2>Configuring the calendar</h2>
|
||||
<ul>
|
||||
<li>The first day of the week can be either Sunday or Monday and can be adjusted
|
||||
from the application settings.</li>
|
||||
</ul>
|
||||
<p>The following attributes can be added to the book type:</p>
|
||||
<figure class="table"
|
||||
style="width:100%;">
|
||||
<table class="ck-table-resized">
|
||||
<colgroup>
|
||||
<col style="width:29.49%;">
|
||||
<col style="width:70.51%;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>#calendar:hideWeekends</code>
|
||||
</td>
|
||||
<td>When present (regardless of value), it will hide Saturday and Sundays
|
||||
from the calendar.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>#calendar:weekNumbers</code>
|
||||
</td>
|
||||
<td>When present (regardless of value), it will show the number of the week
|
||||
on the calendar.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<p>In addition, the first day of the week can be either Sunday or Monday
|
||||
and can be adjusted from the application settings.</p>
|
||||
<h2>Configuring the calendar events</h2>
|
||||
<p>For each note of the calendar, the following attributes can be used:</p>
|
||||
<figure
|
||||
class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>#startDate</code>
|
||||
</td>
|
||||
<td>The date the event starts, which will display it in the calendar. The
|
||||
format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus
|
||||
sign).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>#endDate</code>
|
||||
</td>
|
||||
<td>Similar to <code>startDate</code>, mentions the end date if the event spans
|
||||
across multiple days. The date is inclusive, so the end day is also considered.
|
||||
The attribute can be missing for single-day events.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>#color</code>
|
||||
</td>
|
||||
<td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or
|
||||
hex such as <code>#FF0000</code>). This will also change the color of the
|
||||
note in other places such as the note tree.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>#calendar:color</code>
|
||||
</td>
|
||||
<td>Similar to <code>#color</code>, but applies the color only for the event
|
||||
in the calendar and not for other places such as the note tree.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>#iconClass</code>
|
||||
</td>
|
||||
<td>If present, the icon of the note will be displayed to the left of the
|
||||
event title.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>#calendar:title</code>
|
||||
</td>
|
||||
<td>Changes the title of an event to point to an attribute of the note other
|
||||
than the title, either a label (e.g. <code>#assignee</code>) or a relation
|
||||
(e.g. <code>~for</code>). See <i>Advanced use-cases</i> for more information.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<h2>How the calendar works</h2>
|
||||
<p>
|
||||
<img class="image-style-align-left" src="7_Calendar View_image.png" width="329"
|
||||
@ -106,7 +189,32 @@
|
||||
<p>
|
||||
<img src="9_Calendar View_image.png" width="264" height="164">
|
||||
</p>
|
||||
<h2>Advanced use-cases</h2>
|
||||
<p>When not used in a Journal, the calendar is recursive. That is, it will
|
||||
look for events not just in its child notes but also in the children of
|
||||
these child notes.</p>
|
||||
<h2>Use-cases</h2>
|
||||
<h3>Using with the Journal / calendar</h3>
|
||||
<p>It is possible to integrate the calendar view into the Journal with day
|
||||
notes. In order to do so change the note type of the Journal note (calendar
|
||||
root) to Book and then select the Calendar View.</p>
|
||||
<p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>)
|
||||
attribute, the calendar will know that it's in a calendar and apply the
|
||||
following:</p>
|
||||
<ul>
|
||||
<li>The calendar events are now rendered based on their <code>dateNote</code> attribute
|
||||
rather than <code>startDate</code>.</li>
|
||||
<li>Interactive editing such as dragging over an empty era or resizing an
|
||||
event is no longer possible.</li>
|
||||
<li>Clicking on the empty space on a date will automatically open that day's
|
||||
note or create it if it does not exist.</li>
|
||||
<li>Direct children of a day note will be displayed on the calendar despite
|
||||
not having a <code>dateNote</code> attribute. Children of the child notes
|
||||
will not be displayed.</li>
|
||||
</ul>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:1217/724;" src="18_Calendar View_image.png" width="1217"
|
||||
height="724">
|
||||
</figure>
|
||||
<h3>Using a different attribute as event title</h3>
|
||||
<p>By default, events are displayed on the calendar by their note title.
|
||||
However, it is possible to configure a different attribute to be displayed
|
||||
@ -154,7 +262,7 @@
|
||||
</td>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:294/151;" src="14_Calendar View_image.png" width="294"
|
||||
<img style="aspect-ratio:294/151;" src="13_Calendar View_image.png" width="294"
|
||||
height="151">
|
||||
</figure>
|
||||
</td>
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Canvas</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Canvas</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Code</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Code</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -5,12 +5,12 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Geo map</title>
|
||||
<title data-trilium-title>Geo Map</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Geo map</h1>
|
||||
<h1 data-trilium-h1>Geo Map</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Creating a new geo map</h2>
|
||||
@ -26,7 +26,7 @@
|
||||
<th>1</th>
|
||||
<td>
|
||||
<figure class="image image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:1256/1044;" src="10_Geo map_image.png" width="1256"
|
||||
<img style="aspect-ratio:1256/1044;" src="9_Geo Map_image.png" width="1256"
|
||||
height="1044">
|
||||
</figure>
|
||||
</td>
|
||||
@ -36,7 +36,7 @@
|
||||
<th>2</th>
|
||||
<td>
|
||||
<figure class="image image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:1720/1396;" src="3_Geo map_image.png" width="1720"
|
||||
<img style="aspect-ratio:1720/1396;" src="3_Geo Map_image.png" width="1720"
|
||||
height="1396">
|
||||
</figure>
|
||||
</td>
|
||||
@ -69,18 +69,18 @@
|
||||
<p>To create a marker, first navigate to the desired point on the map. Then
|
||||
press the
|
||||
<img class="image_resized" style="aspect-ratio:72/66;width:7.37%;"
|
||||
src="5_Geo map_image.png" width="72" height="66">button on the top-right of the map.</p>
|
||||
src="4_Geo Map_image.png" width="72" height="66">button on the top-right of the map.</p>
|
||||
<p>If the button is not visible, make sure the button section is visible
|
||||
by pressing the chevron button (
|
||||
<img class="image_resized" style="aspect-ratio:72/66;width:7.51%;"
|
||||
src="11_Geo map_image.png" width="72" height="66">) in the top-right of the map.</p>
|
||||
src="10_Geo Map_image.png" width="72" height="66">) in the top-right of the map.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>2</th>
|
||||
<td>
|
||||
<figure class="image image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:1730/416;" src="14_Geo map_image.png" width="1730"
|
||||
<img style="aspect-ratio:1730/416;" src="14_Geo Map_image.png" width="1730"
|
||||
height="416">
|
||||
</figure>
|
||||
<p> </p>
|
||||
@ -96,7 +96,7 @@
|
||||
<th>3</th>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:1586/404;" src="1_Geo map_image.png" width="1586"
|
||||
<img style="aspect-ratio:1586/404;" src="1_Geo Map_image.png" width="1586"
|
||||
height="404">
|
||||
</figure>
|
||||
<p> </p>
|
||||
@ -107,7 +107,7 @@
|
||||
<th>4</th>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:1696/608;" src="7_Geo map_image.png" width="1696"
|
||||
<img style="aspect-ratio:1696/608;" src="6_Geo Map_image.png" width="1696"
|
||||
height="608">
|
||||
</figure>
|
||||
<p> </p>
|
||||
@ -122,7 +122,7 @@
|
||||
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
|
||||
of the child notes:</p>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:1288/278;" src="4_Geo map_image.png" width="1288"
|
||||
<img style="aspect-ratio:1288/278;" src="12_Geo Map_image.png" width="1288"
|
||||
height="278">
|
||||
</figure>
|
||||
<p>This value can be added manually if needed. The value of the attribute
|
||||
@ -168,7 +168,7 @@
|
||||
<th>1</th>
|
||||
<td>
|
||||
<figure class="image image-style-align-center image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:732/918;" src="16_Geo map_image.png" width="732"
|
||||
<img style="aspect-ratio:732/918;" src="16_Geo Map_image.png" width="732"
|
||||
height="918">
|
||||
</figure>
|
||||
</td>
|
||||
@ -185,7 +185,7 @@
|
||||
<th>2</th>
|
||||
<td>
|
||||
<figure class="image image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:518/84;" src="19_Geo map_image.png" width="518"
|
||||
<img style="aspect-ratio:518/84;" src="19_Geo Map_image.png" width="518"
|
||||
height="84">
|
||||
</figure>
|
||||
</td>
|
||||
@ -199,7 +199,7 @@
|
||||
<th>3</th>
|
||||
<td>
|
||||
<figure class="image image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:1074/276;" src="12_Geo map_image.png" width="1074"
|
||||
<img style="aspect-ratio:1074/276;" src="11_Geo Map_image.png" width="1074"
|
||||
height="276">
|
||||
</figure>
|
||||
</td>
|
||||
@ -225,7 +225,7 @@
|
||||
<th>1</th>
|
||||
<td>
|
||||
<figure class="image image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:562/454;" src="17_Geo map_image.png" width="562"
|
||||
<img style="aspect-ratio:562/454;" src="17_Geo Map_image.png" width="562"
|
||||
height="454">
|
||||
</figure>
|
||||
</td>
|
||||
@ -236,7 +236,7 @@
|
||||
<th>2</th>
|
||||
<td>
|
||||
<figure class="image image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:696/480;" src="13_Geo map_image.png" width="696"
|
||||
<img style="aspect-ratio:696/480;" src="13_Geo Map_image.png" width="696"
|
||||
height="480">
|
||||
</figure>
|
||||
</td>
|
||||
@ -250,7 +250,7 @@
|
||||
<th>3</th>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:640/276;" src="2_Geo map_image.png" width="640"
|
||||
<img style="aspect-ratio:640/276;" src="2_Geo Map_image.png" width="640"
|
||||
height="276">
|
||||
</figure>
|
||||
</td>
|
||||
@ -275,7 +275,7 @@
|
||||
<th>1</th>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:226/74;" src="8_Geo map_image.png" width="226"
|
||||
<img style="aspect-ratio:226/74;" src="7_Geo Map_image.png" width="226"
|
||||
height="74">
|
||||
</figure>
|
||||
</td>
|
||||
@ -286,7 +286,7 @@
|
||||
<th>2</th>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:322/222;" src="6_Geo map_image.png" width="322"
|
||||
<img style="aspect-ratio:322/222;" src="5_Geo Map_image.png" width="322"
|
||||
height="222">
|
||||
</figure>
|
||||
</td>
|
||||
@ -297,7 +297,7 @@
|
||||
<th>3</th>
|
||||
<td>
|
||||
<figure class="image image_resized" style="width:100%;">
|
||||
<img style="aspect-ratio:620/530;" src="15_Geo map_image.png" width="620"
|
||||
<img style="aspect-ratio:620/530;" src="15_Geo Map_image.png" width="620"
|
||||
height="530">
|
||||
</figure>
|
||||
</td>
|
||||
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Mind Map</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Mind Map</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Note Map</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Note Map</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Relation Map</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Relation Map</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Render Note</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Render Note</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Saved Search</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Saved Search</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Text</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Text</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,45 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Web View</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Web View</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Configuration</h2>
|
||||
<p>A webview needs to know which URL to render, and it can be provided by
|
||||
setting the <code>webViewSrc</code> attribute, such as:</p><pre><code class="language-text-x-trilium-auto">#webViewSrc="https://www.wikipedia.org"</code></pre>
|
||||
<h2>Web view on the server vs. Electron</h2>
|
||||
<p>When accessing Trilium via a browser instead of the desktop application,
|
||||
the web view will still try to render the content of the desired webpage.
|
||||
However, since it's running in a browser there are quite a few limitations
|
||||
as opposed to the desktop one.</p>
|
||||
<p>More specifically, quite a few websites oppose being embedded in another
|
||||
website (technically they have a non-permisive <code>X-Frame-Options</code> header).
|
||||
This is not bypassable by Trilium so the page will simply fail to render.</p>
|
||||
<p>You can diagnose this by right clicking the Trilium web page → Inspect
|
||||
(element) and looking in the “Console” tab for errors such as:</p>
|
||||
<ul>
|
||||
<li><code>Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.</code>
|
||||
</li>
|
||||
<li><code>Refused to frame 'https://duckduckgo.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://html.duckduckgo.com".</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>There are a few websites that do render such as <code>wikipedia.org</code>.</p>
|
||||
<p>Do note that we are also applying some sandboxing constraints on the server
|
||||
side, so if you have any issues other than the unresolvable <code>X-Frame-Options</code> described
|
||||
above, feel free to report them.</p>
|
||||
<p>On the desktop side, a different technology is used which bypasses the
|
||||
constraints of an <code>iframe</code> (<code>webview</code>).</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,60 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Using promoted attributes to configure scripts</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Using promoted attributes to configure scripts</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<p>A good use case of promoted attributes is to easily define the various
|
||||
parameters a script might need, for example an input and output note if
|
||||
it's processing data, or a checkbox to define a particular change in behavior
|
||||
for the script.</p>
|
||||
<p>
|
||||
<img src="Using promoted attributes .png" width="425" height="179">
|
||||
</p>
|
||||
<h2>Using check boxes to toggle flags</h2>
|
||||
<p>Instead of asking the user to modify a boolean value in the script, it's
|
||||
much more intuitive to use a checkbox for it as a promoted attribute.</p>
|
||||
<p>To do so, first define the promoted attribute:</p><pre><code class="language-text-x-trilium-auto">#label:groupByExtension="promoted,alias=Group by extension,single,boolean"</code></pre>
|
||||
<p>Then use it:</p><pre><code class="language-application-javascript-env-frontend">const byExtension = api.currentNote.getLabelValue("groupByExtension") === "true";
|
||||
if (byExtension) {
|
||||
// Do something.
|
||||
}</code></pre>
|
||||
<p>This will work equally well in both front-end and back-end scripts.</p>
|
||||
<h2>Using relations to select notes</h2>
|
||||
<p>One common use case for a script is to read data from another note and
|
||||
perhaps output its result in another note. To do so we need to define the
|
||||
following promoted attributes:</p><pre><code class="language-text-x-trilium-auto">#relation:input="promoted,alias=Input,single" #relation:output="promoted,alias=Output,single"</code></pre>
|
||||
<p>Once we have this, we can add some basic error handling to ensure that
|
||||
the fields are completed by the user:</p><pre><code class="language-text-x-trilium-auto">const inputNoteId = api.currentNote.getRelationValue("input");
|
||||
if (!inputNoteId) {
|
||||
api.showError("Missing input.");
|
||||
return;
|
||||
}
|
||||
|
||||
const outputNoteId = api.currentNote.getRelationValue("output");
|
||||
if (!outputNoteId) {
|
||||
api.showError("Missing output.");
|
||||
return;
|
||||
}</code></pre>
|
||||
<p>Note that here we are using <code>api.showError</code> which is only available
|
||||
for frontend notes. If you are writing a backend note, simply remove <code>api.showError</code> but
|
||||
the user will no feedback on why the script did not execute properly.</p>
|
||||
<p>Afterwards we can simply read the note and do something with it:</p><pre><code class="language-text-x-trilium-auto">const note = api.getNote(inputNoteId);
|
||||
if (!note) {
|
||||
return;
|
||||
}
|
||||
const content = note.getContent().toString("utf-8");</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../../style.css">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Creating a custom theme</title>
|
||||
</head>
|
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../../style.css">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Customize the Next theme</title>
|
||||
</head>
|
||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../../style.css">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Reference</title>
|
||||
</head>
|
||||
@ -155,7 +155,7 @@ body.electron:not(.native-titlebar) {
|
||||
}</code></pre>
|
||||
<h2>Custom fonts</h2>
|
||||
<p>Currently the only way to include a custom font is to use <a class="reference-link"
|
||||
href="../Custom%20resource%20providers.html">Custom resource providers</a>.
|
||||
href="../Advanced%20topics/Custom%20resource%20providers.html">Custom resource providers</a>.
|
||||
Basically import a font into Trilium and assign it <code>#customResourceProvider=fonts/myfont.ttf</code> and
|
||||
then import the font in CSS via <code>/custom/fonts/myfont.ttf</code>.</p>
|
||||
<h2>Dark and light themes</h2>
|
||||
@ -19,9 +19,17 @@
|
||||
</li>
|
||||
<li>Note Types
|
||||
<ul>
|
||||
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagram.html" target="detail">Mermaid Diagram</a>
|
||||
<li><a href="User%20Guide/Note%20Types/Text.html" target="detail">Text</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Geo%20map.html" target="detail">Geo map</a>
|
||||
<li><a href="User%20Guide/Note%20Types/Code.html" target="detail">Code</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Saved%20Search.html" target="detail">Saved Search</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Relation%20Map.html" target="detail">Relation Map</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Note%20Map.html" target="detail">Note Map</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Render%20Note.html" target="detail">Render Note</a>
|
||||
</li>
|
||||
<li>Book
|
||||
<ul>
|
||||
@ -29,6 +37,16 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagram.html" target="detail">Mermaid Diagram</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Canvas.html" target="detail">Canvas</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Web%20View.html" target="detail">Web View</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Mind%20Map.html" target="detail">Mind Map</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Note%20Types/Geo%20Map.html" target="detail">Geo Map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Shared notes
|
||||
@ -38,6 +56,18 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Theme development
|
||||
<ul>
|
||||
<li><a href="User%20Guide/Theme%20development/Creating%20a%20custom%20theme.html"
|
||||
target="detail">Creating a custom theme</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Theme%20development/Customize%20the%20Next%20theme.html"
|
||||
target="detail">Customize the Next theme</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Theme%20development/Reference.html" target="detail">Reference</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Scripting
|
||||
<ul>
|
||||
<li>Examples
|
||||
@ -47,38 +77,28 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Advanced usage
|
||||
<ul>
|
||||
<li>Theme development
|
||||
<ul>
|
||||
<li><a href="User%20Guide/Advanced%20usage/Theme%20development/Creating%20a%20custom%20theme.html"
|
||||
target="detail">Creating a custom theme</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Advanced%20usage/Theme%20development/Customize%20the%20Next%20theme.html"
|
||||
target="detail">Customize the Next theme</a>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Advanced%20usage/Theme%20development/Reference.html"
|
||||
target="detail">Reference</a>
|
||||
<li><a href="User%20Guide/Scripting/Using%20promoted%20attributes%20to%20c.html"
|
||||
target="detail">Using promoted attributes to configure scripts</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="User%20Guide/Advanced%20usage/Custom%20resource%20providers.html"
|
||||
<li>Advanced topics
|
||||
<ul>
|
||||
<li><a href="User%20Guide/Advanced%20topics/Custom%20resource%20providers.html"
|
||||
target="detail">Custom resource providers</a>
|
||||
</li>
|
||||
<li>REST API
|
||||
<ul>
|
||||
<li>ETAPI
|
||||
<ul>
|
||||
<li><a href="User%20Guide/Advanced%20usage/REST%20API/ETAPI/API%20Reference.dat"
|
||||
<li><a href="User%20Guide/Advanced%20topics/REST%20API/ETAPI/API%20Reference.dat"
|
||||
target="detail">API Reference</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Internal API
|
||||
<ul>
|
||||
<li><a href="User%20Guide/Advanced%20usage/REST%20API/Internal%20API/API%20Reference.dat"
|
||||
<li><a href="User%20Guide/Advanced%20topics/REST%20API/Internal%20API/API%20Reference.dat"
|
||||
target="detail">API Reference</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||