feat(docs): sidebar, table of contents, highlights list

This commit is contained in:
Elian Doran 2025-04-06 17:13:21 +03:00
parent 19a540200e
commit f58a90c648
No known key found for this signature in database
15 changed files with 635 additions and 8 deletions

View File

@ -1915,6 +1915,71 @@
"dataFileName": "Floating buttons_image.png"
}
]
},
{
"isClone": false,
"noteId": "RnaPdbciOfeq",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"RnaPdbciOfeq"
],
"title": "Right Sidebar",
"notePosition": 170,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-dock-right",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BFvAtE74rbP6",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "AxshuNRegLAv",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "luNhaphA37EO",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "3seOhtN8uLIY",
"isInheritable": false,
"position": 50
}
],
"format": "markdown",
"dataFileName": "Right Sidebar.md",
"attachments": [
{
"attachmentId": "ze9MwXmOPhp0",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Right Sidebar_image.png"
}
]
}
]
},
@ -4542,6 +4607,78 @@
}
]
},
{
"isClone": false,
"noteId": "AxshuNRegLAv",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"iPIMuisry3hd",
"AxshuNRegLAv"
],
"title": "Highlights list",
"notePosition": 60,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-highlight",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BFvAtE74rbP6",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "_optionsTextNotes",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 60
}
],
"format": "markdown",
"dataFileName": "Highlights list.md",
"attachments": [
{
"attachmentId": "lDcgRFQO5hDE",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Highlights list_image.png"
}
]
},
{
"isClone": false,
"noteId": "mT0HEkOsz6i1",
@ -4552,7 +4689,7 @@
"mT0HEkOsz6i1"
],
"title": "Images",
"notePosition": 60,
"notePosition": 70,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -4781,7 +4918,7 @@
"nBAXQFj20hS1"
],
"title": "Include Note",
"notePosition": 70,
"notePosition": 80,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -4818,7 +4955,7 @@
"QEAPj01N5f7w"
],
"title": "Links",
"notePosition": 80,
"notePosition": 90,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -4877,7 +5014,7 @@
"S6Xx8QIWTV66"
],
"title": "Lists",
"notePosition": 90,
"notePosition": 100,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -4943,6 +5080,71 @@
"dataFileName": "5_Lists_image.png"
}
]
},
{
"isClone": false,
"noteId": "BFvAtE74rbP6",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"iPIMuisry3hd",
"BFvAtE74rbP6"
],
"title": "Table of contents",
"notePosition": 110,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "_optionsTextNotes",
"isInheritable": false,
"position": 20
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-heading",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 50
}
],
"format": "markdown",
"dataFileName": "Table of contents.md",
"attachments": [
{
"attachmentId": "DL6PJX71Fk3S",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Table of contents_image.png"
}
]
}
]
},

View File

@ -0,0 +1,19 @@
# Right Sidebar
<figure class="image"><img style="aspect-ratio:1036/372;" src="Right Sidebar_image.png" width="1036" height="372"></figure>
The right sidebar displays specific content for the current note. Currently it includes:
* <a class="reference-link" href="../../Note%20Types/Text/Table%20of%20contents.md">Table of contents</a>
* <a class="reference-link" href="../../Note%20Types/Text/Highlights%20list.md">Highlights list</a>
Note that the sidebar is not displayed if it would otherwise be empty, for example if there are too few headings and there are no highlights.
## Toggling the right sidebar
The sidebar can be hidden or shown by using the `toggleRightPane` keyboard shortcut, which is not assigned by default.
## Relation with splits
When using <a class="reference-link" href="Split%20View.md">Split View</a>, there is a single sidebar serving all the open splits for the current [tab](Tabs.md).
Clicking on a note within the split view will display the sidebar for that note. If there are no items to display in the sidebar, it will remain closed.

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View File

@ -0,0 +1,25 @@
# Highlights list
<figure class="image image-style-align-right"><img style="aspect-ratio:250/150;" src="Highlights list_image.png" width="250" height="150"></figure>
Similar to the <a class="reference-link" href="Table%20of%20contents.md">Table of contents</a>, but instead of headings this feature will list highlighted text from a text note and allow easy navigation to them. The list will be displayed in the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Right%20Sidebar.md">Right Sidebar</a>, provided there is at least one highlighted text.
Highlighted text is defined as:
* Bold text.
* Italic text.
* Underlined text.
* Text with a foreground color set.
* Text with a background color/highlight set.
## Interaction
* Clicking on a highlighted text will scroll the document to its position.
* Pressing the close button will dismiss the list of highlights but it can be shown again from the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md">Floating buttons</a> section.
## Global configuration
It's possible to toggle the display of each category of highlighted text (as defined above) in the highlights list by going to <a class="reference-link" href="#root/_hidden/_options/_optionsTextNotes">Text Notes</a> settings and looking for the _Highlights List_ section.
## Per-note configuration
To suppress the display of highlighted text for one specific note, use <a class="reference-link" href="../../Advanced%20Usage/Attributes.md">Attributes</a> to add the `#hideHighlightWidget` label.

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

@ -0,0 +1,23 @@
# Table of contents
<figure class="image image-style-align-right"><img style="aspect-ratio:243/171;" src="Table of contents_image.png" width="243" height="171"></figure>
The table of contents appears in the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Right%20Sidebar.md">Right Sidebar</a> automatically when there are multiple headings in a text note.
## Interaction
* Clicking on a heading will scroll the document to the position of the heading.
* Pressing the close button will dismiss the table of contents but it can be shown again from the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md">Floating buttons</a> section.
## Global configuration
In <a class="reference-link" href="#root/_hidden/_options/_optionsTextNotes">Text Notes</a> options, look for the _Table of Contents_ section and configure the minimum amount of headings that need to be present in the current note in order for the table of contents to show:
* To always hide it, set the value to a really large number (e.g. 10000).
* To always display it if there's at least a single heading, set the value to 1.
## Per-note configuration
Use <a class="reference-link" href="../../Advanced%20Usage/Attributes.md">Attributes</a> to configure the table of contents for a particular note:
* `#toc=show` will show the table of contents for that note regardless of the global settings.
* Similarly, `#toc=hide` will always hide the table of contents for that note.

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@ -1915,6 +1915,71 @@
"dataFileName": "Floating buttons_image.png"
}
]
},
{
"isClone": false,
"noteId": "RnaPdbciOfeq",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"RnaPdbciOfeq"
],
"title": "Right Sidebar",
"notePosition": 170,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-dock-right",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BFvAtE74rbP6",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "AxshuNRegLAv",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "luNhaphA37EO",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "3seOhtN8uLIY",
"isInheritable": false,
"position": 50
}
],
"format": "html",
"dataFileName": "Right Sidebar.html",
"attachments": [
{
"attachmentId": "ze9MwXmOPhp0",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Right Sidebar_image.png"
}
]
}
]
},
@ -4542,6 +4607,78 @@
}
]
},
{
"isClone": false,
"noteId": "AxshuNRegLAv",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"iPIMuisry3hd",
"AxshuNRegLAv"
],
"title": "Highlights list",
"notePosition": 60,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-highlight",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BFvAtE74rbP6",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "_optionsTextNotes",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 60
}
],
"format": "html",
"dataFileName": "Highlights list.html",
"attachments": [
{
"attachmentId": "lDcgRFQO5hDE",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Highlights list_image.png"
}
]
},
{
"isClone": false,
"noteId": "mT0HEkOsz6i1",
@ -4552,7 +4689,7 @@
"mT0HEkOsz6i1"
],
"title": "Images",
"notePosition": 60,
"notePosition": 70,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -4781,7 +4918,7 @@
"nBAXQFj20hS1"
],
"title": "Include Note",
"notePosition": 70,
"notePosition": 80,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -4818,7 +4955,7 @@
"QEAPj01N5f7w"
],
"title": "Links",
"notePosition": 80,
"notePosition": 90,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -4877,7 +5014,7 @@
"S6Xx8QIWTV66"
],
"title": "Lists",
"notePosition": 90,
"notePosition": 100,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -4943,6 +5080,71 @@
"dataFileName": "5_Lists_image.png"
}
]
},
{
"isClone": false,
"noteId": "BFvAtE74rbP6",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"iPIMuisry3hd",
"BFvAtE74rbP6"
],
"title": "Table of contents",
"notePosition": 110,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "_optionsTextNotes",
"isInheritable": false,
"position": 20
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-heading",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 50
}
],
"format": "html",
"dataFileName": "Table of contents.html",
"attachments": [
{
"attachmentId": "DL6PJX71Fk3S",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Table of contents_image.png"
}
]
}
]
},

View File

@ -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>Right Sidebar</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Right Sidebar</h1>
<div class="ck-content">
<figure class="image">
<img style="aspect-ratio:1036/372;" src="Right Sidebar_image.png" width="1036"
height="372">
</figure>
<p>The right sidebar displays specific content for the current note. Currently
it includes:</p>
<ul>
<li><a class="reference-link" href="../../Note%20Types/Text/Table%20of%20contents.html">Table of contents</a>
</li>
<li><a class="reference-link" href="../../Note%20Types/Text/Highlights%20list.html">Highlights list</a>
</li>
</ul>
<p>Note that the sidebar is not displayed if it would otherwise be empty,
for example if there are too few headings and there are no highlights.</p>
<h2>Toggling the right sidebar</h2>
<p>The sidebar can be hidden or shown by using the <code>toggleRightPane</code> keyboard
shortcut, which is not assigned by default.</p>
<h2>Relation with splits</h2>
<p>When using&nbsp;<a class="reference-link" href="Split%20View.html">Split View</a>,
there is a single sidebar serving all the open splits for the current
<a
href="Tabs.html">tab</a>.</p>
<p>Clicking on a note within the split view will display the sidebar for
that note. If there are no items to display in the sidebar, it will remain
closed.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View File

@ -0,0 +1,52 @@
<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>Highlights list</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Highlights list</h1>
<div class="ck-content">
<figure class="image image-style-align-right">
<img style="aspect-ratio:250/150;" src="Highlights list_image.png" width="250"
height="150">
</figure>
<p>Similar to the&nbsp;<a class="reference-link" href="Table%20of%20contents.html">Table of contents</a>,
but instead of headings this feature will list highlighted text from a
text note and allow easy navigation to them. The list will be displayed
in the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Right%20Sidebar.html">Right Sidebar</a>,
provided there is at least one highlighted text.</p>
<p>Highlighted text is defined as:</p>
<ul>
<li>Bold text.</li>
<li>Italic text.</li>
<li>Underlined text.</li>
<li>Text with a foreground color set.</li>
<li>Text with a background color/highlight set.</li>
</ul>
<h2>Interaction</h2>
<ul>
<li>Clicking on a highlighted text will scroll the document to its position.</li>
<li>Pressing the close button will dismiss the list of highlights but it can
be shown again from the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;section.</li>
</ul>
<h2>Global configuration</h2>
<p>It's possible to toggle the display of each category of highlighted text
(as defined above) in the highlights list by going to&nbsp;<a class="reference-link"
href="#root/_hidden/_options/_optionsTextNotes">Text Notes</a>&nbsp;settings
and looking for the <em>Highlights List</em> section.</p>
<h2>Per-note configuration</h2>
<p>To suppress the display of highlighted text for one specific note, use&nbsp;
<a
class="reference-link" href="../../Advanced%20Usage/Attributes.html">Attributes</a>&nbsp;to add the <code>#hideHighlightWidget</code> label.</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

@ -0,0 +1,52 @@
<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>Table of contents</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Table of contents</h1>
<div class="ck-content">
<figure class="image image-style-align-right">
<img style="aspect-ratio:243/171;" src="Table of contents_image.png" width="243"
height="171">
</figure>
<p>The table of contents appears in the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Right%20Sidebar.html">Right Sidebar</a>&nbsp;automatically
when there are multiple headings in a text note.</p>
<h2>Interaction</h2>
<ul>
<li>Clicking on a heading will scroll the document to the position of the
heading.</li>
<li>Pressing the close button will dismiss the table of contents but it can
be shown again from the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;section.</li>
</ul>
<h2>Global configuration</h2>
<p>In&nbsp;<a class="reference-link" href="#root/_hidden/_options/_optionsTextNotes">Text Notes</a>&nbsp;options,
look for the <em>Table of Contents</em> section and configure the minimum
amount of headings that need to be present in the current note in order
for the table of contents to show:</p>
<ul>
<li>To always hide it, set the value to a really large number (e.g. 10000).</li>
<li>To always display it if there's at least a single heading, set the value
to 1.</li>
</ul>
<h2>Per-note configuration</h2>
<p>Use&nbsp;<a class="reference-link" href="../../Advanced%20Usage/Attributes.html">Attributes</a>&nbsp;to
configure the table of contents for a particular note:</p>
<ul>
<li><code>#toc=show</code> will show the table of contents for that note regardless
of the global settings.</li>
<li>Similarly, <code>#toc=hide</code> will always hide the table of contents
for that note.</li>
</ul>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@ -106,6 +106,9 @@
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html"
target="detail">Floating buttons</a>
</li>
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/UI%20Elements/Right%20Sidebar.html"
target="detail">Right Sidebar</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/Notes.html" target="detail">Notes</a>
@ -231,6 +234,8 @@
</li>
<li><a href="User%20Guide/Note%20Types/Text/Formatting%20toolbar.html" target="detail">Formatting toolbar</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Highlights%20list.html" target="detail">Highlights list</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Images.html" target="detail">Images</a>
<ul>
<li><a href="User%20Guide/Note%20Types/Text/Images/Image%20references.html"
@ -244,6 +249,8 @@
</li>
<li><a href="User%20Guide/Note%20Types/Text/Lists.html" target="detail">Lists</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Table%20of%20contents.html" target="detail">Table of contents</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Note%20Types/Code.html" target="detail">Code</a>