docs(user): add slug + tips on how to identify pages without one easily

This commit is contained in:
Elian Doran 2025-10-30 08:03:09 +02:00
parent 444e103047
commit f944c6d8e2
No known key found for this signature in database
6 changed files with 362 additions and 317 deletions

View File

@ -6,19 +6,22 @@ class="image">
<img style="aspect-ratio:1144/660;" src="Sharing_image.png"
width="1144" height="660">
</figure>
<h2>Features, interaction and limitations</h2>
<ul>
<li>Searching by note title.</li>
<li>Automatic dark/light mode based on the user's browser settings.</li>
<li>Mobile-friendly layout, with sidebar.</li>
<li>Collapsible tree with the same note icons as the application.</li>
<li>Customizable logo.</li>
<li>Toggle button for dark/light mode, which also stores the user preferences.</li>
<li>Quick navigation buttons (previous and next note).</li>
<li>Displaying the date of the last update of the note.</li>
<li data-list-item-id="e3d96e7ea6a5bea335865c6d4e7b757e7">Searching by note title.</li>
<li data-list-item-id="ee4b7dc44731b62ab2b94af6bb0b09b54">Automatic dark/light mode based on the user's browser settings.</li>
<li
data-list-item-id="e05664c88e4c9baf3ef1144e434854e98">Mobile-friendly layout, with sidebar.</li>
<li data-list-item-id="e36f09f62924dbb6ee8750629e58a67c7">Collapsible tree with the same note icons as the application.</li>
<li
data-list-item-id="e3488b84ff81ca5a98a087dcc4daad56e">Customizable logo.</li>
<li data-list-item-id="ead2653f0d194c6991937d1acb4ebb32b">Toggle button for dark/light mode, which also stores the user preferences.</li>
<li
data-list-item-id="ecca067cbb8147ff5516eda5bd8622588">Quick navigation buttons (previous and next note).</li>
<li data-list-item-id="e0d3e7e3148573c18ac736f48b099d026">Displaying the date of the last update of the note.</li>
</ul>
<h3>By note type</h3>
<figure class="table">
<table class="ck-table-resized">
<colgroup>
<col style="width:19.92%;">
@ -166,13 +169,15 @@ class="image">
</tr>
</tbody>
</table>
</figure>
<p>While the sharing feature is powerful, it has some limitations:</p>
<ul>
<li><strong>Code Notes</strong>: No syntax highlighting.</li>
<li><strong>Static Note Tree</strong>
<li data-list-item-id="e065770574d6cb87bf4f84c76080fe113"><strong>Code Notes</strong>: No syntax highlighting.</li>
<li class="ck-list-marker-bold"
data-list-item-id="ea9548ac5f7f92e3af669d000bdf1bd9a"><strong>Static Note Tree</strong>
</li>
<li><strong>Protected Notes</strong>: Cannot be shared.</li>
<li><strong>Include Notes</strong>: Not supported.</li>
<li data-list-item-id="e8691323347bafe4ac37868242dd77e49"><strong>Protected Notes</strong>: Cannot be shared.</li>
<li data-list-item-id="eb608c920b3b82c1ce22b3c91b3747ea9"><strong>Include Notes</strong>: Not supported.</li>
</ul>
<p>Some of these limitations may be addressed in future updates.</p>
<h2>Prerequisites</h2>
@ -181,7 +186,7 @@ class="image">
is necessary because the notes will be hosted from the server.</p>
<h2>Sharing a note</h2>
<ol>
<li>
<li data-list-item-id="e988ff9db126f02a278d9006667a10be5">
<p><strong>Enable Sharing</strong>: To share a note, toggle the <code>Shared</code> switch
within the note's interface. Once sharing is enabled, an URL will appear,
which you can click to access the shared note.</p>
@ -190,11 +195,9 @@ class="image">
alt="Share Note">
</p>
</li>
<li>
<p><strong>Access the Shared Note</strong>: The link provided will open the
<li data-list-item-id="ec2fc57fcc9c804d6ad8accc887cd8a76"><strong>Access the Shared Note</strong>: The link provided will open the
note in your browser. If your server is not configured with a public IP,
the URL will refer to <code>localhost (127.0.0.1)</code>.</p>
</li>
the URL will refer to <code>localhost (127.0.0.1)</code>.</li>
</ol>
<h2>Sharing a note subtree</h2>
<p>When you share a note, you actually share the entire subtree of notes
@ -220,12 +223,13 @@ class="image">
<p>The default design should be a good starting point, but you can customize
it using your own CSS:</p>
<ul>
<li><strong>Custom CSS</strong>: Link a CSS&nbsp;<a class="reference-link"
<li data-list-item-id="ea5b1b08c7c4eb3773a280bbde86b59c6"><strong>Custom CSS</strong>: Link a CSS&nbsp;<a class="reference-link"
href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note to the shared page by adding
a <code>~shareCss</code> relation to the note. If you want this style to
apply to the entire subtree, make the label inheritable. You can hide the
CSS code note from the tree navigation by adding the <code>#shareHiddenFromTree</code> label.</li>
<li><strong>Omitting Default CSS</strong>: For extensive styling changes,
<li
data-list-item-id="e7778638630918e0fab2ce206ecd0a1a0"><strong>Omitting Default CSS</strong>: For extensive styling changes,
use the <code>#shareOmitDefaultCss</code> label to avoid conflicts with Trilium's
<a
href="#root/_help_Wy267RK4M69c">default stylesheet</a>.</li>
@ -243,22 +247,22 @@ class="image">
itself.</p>
<p>The <code>#shareHtmlLocation</code> label accepts values in the format <code>location:position</code>:</p>
<ul>
<li><strong>Locations</strong>: <code>head</code>, <code>body</code>, <code>content</code>
<li data-list-item-id="eb2c73bca2e9dc2a101f807349625bdd9"><strong>Locations</strong>: <code>head</code>, <code>body</code>, <code>content</code>
</li>
<li><strong>Positions</strong>: <code>start</code>, <code>end</code>
<li data-list-item-id="eef94ce6c51cd33ea3ecdc960d1523eac"><strong>Positions</strong>: <code>start</code>, <code>end</code>
</li>
</ul>
<p>For example:</p>
<ul>
<li><code>#shareHtmlLocation=head:start</code> - Injects HTML at the beginning
<li data-list-item-id="eb2df553ed57f138b95d13437c0059797"><code>#shareHtmlLocation=head:start</code> - Injects HTML at the beginning
of the <code>&lt;head&gt;</code> section</li>
<li><code>#shareHtmlLocation=head:end</code> - Injects HTML at the end of the <code>&lt;head&gt;</code> section
<li data-list-item-id="ed1695099b19e45ac696c236cc402177e"><code>#shareHtmlLocation=head:end</code> - Injects HTML at the end of the <code>&lt;head&gt;</code> section
(default)</li>
<li><code>#shareHtmlLocation=body:start</code> - Injects HTML at the beginning
<li data-list-item-id="ea6c77d0d28577bdef31a5d068ee58af9"><code>#shareHtmlLocation=body:start</code> - Injects HTML at the beginning
of the <code>&lt;body&gt;</code> section</li>
<li><code>#shareHtmlLocation=content:start</code> - Injects HTML at the beginning
<li data-list-item-id="eecfee4d5f45c06ce51367f92d36f615f"><code>#shareHtmlLocation=content:start</code> - Injects HTML at the beginning
of the content area</li>
<li><code>#shareHtmlLocation=content:end</code> - Injects HTML at the end of
<li data-list-item-id="e21b97811c4181dbf03def3e69f3e2ce5"><code>#shareHtmlLocation=content:end</code> - Injects HTML at the end of
the content area</li>
</ul>
<p>If no location is specified, the HTML will be injected at <code>content:end</code> by
@ -276,10 +280,20 @@ for (const attr of parentNote.attributes) {
This will change the URL to <code>http://domain.tld/share/highlighting</code>.</p>
<p><strong>Important</strong>:</p>
<ol>
<li>Ensure that aliases are unique.</li>
<li>Using slashes (<code>/</code>) within aliases to create subpaths is not
<li data-list-item-id="ea30893757780d6191d0ed21349532508">Ensure that aliases are unique.</li>
<li data-list-item-id="e6af818e0cb736f10e7e6b8b5cbb769f7">Using slashes (<code>/</code>) within aliases to create subpaths is not
supported.</li>
</ol>
<aside class="admonition tip">
<ul>
<li data-list-item-id="e0356d768ad2a78f57520ca27f123c5a5">To easily identify pages that don't have a share alias, run a&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_eIg8jdvaoNNd">Search</a>&nbsp;with <code>#!shareAlias</code>.</li>
<li data-list-item-id="e6fbd28f04e5ac468ccbcc8851fa084b9">To be able to enter the share alias faster, consider using&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;(for
example <code>#label:shareAlias(inheritable)="promoted,alias=Slug,single,text"</code>).</li>
</ul>
</aside>
<h3>Setting a custom favicon</h3>
<p>To customize the favicon for your shared pages, create a relation <code>~shareFavicon</code> pointing
to a file note containing the favicon (e.g., in <code>.ico</code> format).</p>
@ -300,6 +314,7 @@ for (const attr of parentNote.attributes) {
When viewed, the list of shared roots will be displayed at the bottom of
the note.</p>
<h2>Attribute reference</h2>
<figure class="table">
<table>
<thead>
<tr>
@ -383,7 +398,7 @@ for (const attr of parentNote.attributes) {
</tr>
</tbody>
</table>
</figure>
<h2>Credits</h2>
<p>Since v0.95.0, a new theme was introduced (and enabled by default) which
greatly improves the visual aspect of the Share feature, as well as its

View File

@ -1,4 +1,4 @@
<p>As described in&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_R9pX4DGra2Vt">Sharing</a>,
<p>As described in&nbsp;<a class="reference-link" href="#root/_help_R9pX4DGra2Vt">Sharing</a>,
Trilium can act as a public server in which the shared notes are displayed
in read-only mode. While this can work in most cases, it's generally not
meant for high-traffic websites and since it's running on a Node.js server
@ -7,7 +7,7 @@
static site generators such as <a href="https://www.mkdocs.org/">MkDocs</a>).
Since the normal HTML ZIP export does not contain any styling or additional
functionality, Trilium provides a way to export the same layout and style
as the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_R9pX4DGra2Vt">Sharing</a>&nbsp;function
as the&nbsp;<a class="reference-link" href="#root/_help_R9pX4DGra2Vt">Sharing</a>&nbsp;function
into static HTML files.</p>
<p>Apart from the enhanced security, these HTML files are also easy to deploy
on “serverless” deployments such as GitHub Pages or CloudFlare Pages and
@ -21,25 +21,24 @@
static web format.</p>
</aside>
<h2>Differences from normal sharing and export</h2>
<p>Apart from normal&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_R9pX4DGra2Vt">Sharing</a>,
<p>Apart from normal&nbsp;<a class="reference-link" href="#root/_help_R9pX4DGra2Vt">Sharing</a>,
exporting to static HTML files comes with a few subtle differences:</p>
<ul>
<li data-list-item-id="e9e5a7d50e33698fb322f4dc65108f3a9">The URL structure is different. Where in normal sharing it's something
<li>The URL structure is different. Where in normal sharing it's something
along the way of <code>example.com/share/noteid</code>, the notes follow
an hierarchical structure, such as <code>docs.triliumnotes.org/user-guide/concepts/navigation/tree-concepts</code>.</li>
<li
data-list-item-id="e3995e60b9751ea177ac920a901635d4b">The <code>favicon.ico</code> is not handled automatically, it needs to be
<li>The <code>favicon.ico</code> is not handled automatically, it needs to be
manually added on the server after the export is generated.</li>
<li data-list-item-id="e72c2a986808ce27eb3bb5001fe4710cb">The “Last updated” for notes is not available.</li>
<li data-list-item-id="e53e8959701206c7a064ba811c0123bef">The search functionality works slightly different since the normal one
<li>The “Last updated” for notes is not available.</li>
<li>The search functionality works slightly different since the normal one
requires an active API to work. In the static export, search still works
but uses a different mechanism so results might be different.</li>
</ul>
<h2>Differences from normal .zip export</h2>
<ul>
<li data-list-item-id="e8a16c7135d6f6c4de3bc448bd8795289">The name of the files/URLs will prefer <code>shareAlias</code> to allow
<li>The name of the files/URLs will prefer <code>shareAlias</code> to allow
for clean URLs.</li>
<li data-list-item-id="ef8bfdfc599c07ba70fbb4be97a3e26ab">The export requires a functional web server as the pages will not render
<li>The export requires a functional web server as the pages will not render
properly if accessed locally via a web browser due to the use of module
scripts.</li>
</ul>
@ -50,7 +49,7 @@
can be installed via:</p><pre><code class="language-text-x-trilium-auto">npm i -g http-server</code></pre>
<p>Once installed simply:</p>
<ol>
<li data-list-item-id="ebc8d02c8cdcdb030c746f1fd5eccb5bd">Extract the exported .zip file.</li>
<li data-list-item-id="e1d20f408fb89d0af0c1003984373f808">Inside the extracted directory, run <code>http-server</code>.</li>
<li data-list-item-id="ecf0c59f3a26c8e766bb1d739f8355e33">Access the indicated address (e.g. http://localhost:8080).</li>
<li>Extract the exported .zip file.</li>
<li>Inside the extracted directory, run <code>http-server</code>.</li>
<li>Access the indicated address (e.g. <a href="http://localhost:8080">http://localhost:8080</a>).</li>
</ol>

View File

@ -2,18 +2,17 @@
<p><strong>Local only desktop/laptop</strong> - Allows a single instance on
a desktop and will save the notes locally on that desktop.</p>
<ul>
<li data-list-item-id="ee2e7087616538e07480af0ce50381d98"><a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_poXkQfguuA0U">Desktop Installation</a>
<li><a class="reference-link" href="#root/_help_poXkQfguuA0U">Desktop Installation</a>
</li>
</ul>
<p><strong>Server with web only access</strong> - Installs the application
on the server and allows access from any web browser on any device, including
mobile.</p>
<ol>
<li data-list-item-id="e9d59a2efb80973c48e2cc94132b817a5"><a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_WOcw2SLH6tbX">Server Installation</a>
<li><a class="reference-link" href="#root/_help_WOcw2SLH6tbX">Server Installation</a>
</li>
<li data-list-item-id="e1fd3aeaa6bf30f9b708949b02842c9a1"><a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_RDslemsQ6gCp">Mobile Frontend</a>&nbsp;(optional)</li>
<li
data-list-item-id="e64af7467dba8292bcc8e7a3f983d55bc"><a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/WOcw2SLH6tbX/_help_yeEaYqosGLSh">Third-party cloud hosting</a>
<li><a class="reference-link" href="#root/_help_RDslemsQ6gCp">Mobile Frontend</a>&nbsp;(optional)</li>
<li><a class="reference-link" href="#root/_help_yeEaYqosGLSh">Third-party cloud hosting</a>
</li>
</ol>
<p><strong>Combination of server and desktop/laptop</strong> - Install the
@ -23,12 +22,11 @@
desktop application will sync and store the data locally so that it can
be used when offline.</p>
<ol>
<li data-list-item-id="e8824368037a294899c0739909228e17e"><a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_WOcw2SLH6tbX">Server Installation</a>
<li><a class="reference-link" href="#root/_help_WOcw2SLH6tbX">Server Installation</a>
</li>
<li data-list-item-id="e31ad4d2c8b4925e73497792824b038e3"><a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_RDslemsQ6gCp">Mobile Frontend</a>&nbsp;(optional)</li>
<li
data-list-item-id="eabfcd159a74c0c29b79e9b2e1c57f3c8"><a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_poXkQfguuA0U">Desktop Installation</a>
<li><a class="reference-link" href="#root/_help_RDslemsQ6gCp">Mobile Frontend</a>&nbsp;(optional)</li>
<li><a class="reference-link" href="#root/_help_poXkQfguuA0U">Desktop Installation</a>
</li>
<li data-list-item-id="e4093e08cdbff3b351d908c16e0f5f705"><a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_cbkrhQjrkKrh">Synchronization</a>
<li><a class="reference-link" href="#root/_help_cbkrhQjrkKrh">Synchronization</a>
</li>
</ol>

View File

@ -15,19 +15,26 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "s3YCWHBfmYuM",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BFs8mudNFgCS",
"isInheritable": false,
"position": 60
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "GTwFsgaA0lCt",
"isInheritable": false,
"position": 70
"position": 30
},
{
"type": "label",
@ -42,13 +49,6 @@
"value": "promoted,alias=Slug,single,text",
"isInheritable": true,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "s3YCWHBfmYuM",
"isInheritable": false,
"position": 80
}
],
"format": "markdown",
@ -3083,7 +3083,15 @@
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [],
"attributes": [
{
"type": "label",
"name": "shareAlias",
"value": "quick-edit",
"isInheritable": false,
"position": 30
}
],
"format": "markdown",
"dataFileName": "Quick edit.md",
"attachments": [
@ -5313,6 +5321,20 @@
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "yeEaYqosGLSh",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "cbkrhQjrkKrh",
"isInheritable": false,
"position": 50
},
{
"type": "label",
"name": "shareAlias",
@ -5326,20 +5348,6 @@
"value": "bx bx-run",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "yeEaYqosGLSh",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "cbkrhQjrkKrh",
"isInheritable": false,
"position": 60
}
],
"format": "markdown",
@ -11544,6 +11552,20 @@
"value": "bx bx-share-alt",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "eIg8jdvaoNNd",
"isInheritable": false,
"position": 200
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 210
}
],
"format": "markdown",
@ -11634,7 +11656,7 @@
"name": "internalLink",
"value": "R9pX4DGra2Vt",
"isInheritable": false,
"position": 30
"position": 10
},
{
"type": "label",
@ -11642,6 +11664,13 @@
"value": "bx bxs-file-html",
"isInheritable": false,
"position": 40
},
{
"type": "label",
"name": "shareAlias",
"value": "static-html",
"isInheritable": false,
"position": 50
}
],
"format": "markdown",

View File

@ -106,6 +106,10 @@ Shared notes typically have URLs like `http://domain.tld/share/knvU8aJy4dJ7`, wh
1. Ensure that aliases are unique.
2. Using slashes (`/`) within aliases to create subpaths is not supported.
> [!TIP]
> * To easily identify pages that don't have a share alias, run a <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Search.md">Search</a> with `#!shareAlias`.
> * To be able to enter the share alias faster, consider using <a class="reference-link" href="Attributes/Promoted%20Attributes.md">Promoted Attributes</a> (for example `#label:shareAlias(inheritable)="promoted,alias=Slug,single,text"`).
### Setting a custom favicon
To customize the favicon for your shared pages, create a relation `~shareFavicon` pointing to a file note containing the favicon (e.g., in `.ico` format).

View File

@ -38,4 +38,4 @@ Once installed simply:
1. Extract the exported .zip file.
2. Inside the extracted directory, run `http-server`.
3. Access the indicated address (e.g. http://localhost:8080).
3. Access the indicated address (e.g. [http://localhost:8080](http://localhost:8080)).