docs(user): sync

This commit is contained in:
Elian Doran
2025-10-31 11:07:22 +02:00
parent b52d30c55a
commit 82ff5f6660
2 changed files with 347 additions and 367 deletions

View File

@@ -6,22 +6,19 @@ 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 data-list-item-id="ef22b391cbc76ef956be01dd41a6b60bf">Searching by note title.</li>
<li data-list-item-id="eeab18d3a35263669809a1b89d7b060b9">Automatic dark/light mode based on the user's browser settings.</li>
<li
data-list-item-id="e9a0db9cceacd026e71ad8bda9948542e">Mobile-friendly layout, with sidebar.</li>
<li data-list-item-id="eb9da2104d017644f71fcee18eb17d34b">Collapsible tree with the same note icons as the application.</li>
<li
data-list-item-id="ea2be5ec72816441e702ff6dba92ed30d">Customizable logo.</li>
<li data-list-item-id="e26648726ce48aa84a8c71cf0fe3e4ee2">Toggle button for dark/light mode, which also stores the user preferences.</li>
<li
data-list-item-id="ef143555e0d67d1d389f6bbc226ebdc55">Quick navigation buttons (previous and next note).</li>
<li data-list-item-id="e32f67105cfb655c235d2454d9ec4874f">Displaying the date of the last update of the note.</li>
<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>
</ul>
<h3>By note type</h3>
<figure class="table">
<table class="ck-table-resized">
<colgroup>
<col style="width:19.92%;">
@@ -169,15 +166,13 @@ class="image">
</tr>
</tbody>
</table>
</figure>
<p>While the sharing feature is powerful, it has some limitations:</p>
<ul>
<li data-list-item-id="e35e0cab1eec05f391623e8279959070c"><strong>Code Notes</strong>: No syntax highlighting.</li>
<li class="ck-list-marker-bold"
data-list-item-id="e36b70bd10c3666c0def874b4ec52db31"><strong>Static Note Tree</strong>
<li><strong>Code Notes</strong>: No syntax highlighting.</li>
<li><strong>Static Note Tree</strong>
</li>
<li data-list-item-id="ef8144aff172d450cf7b4edbf1a430ab9"><strong>Protected Notes</strong>: Cannot be shared.</li>
<li data-list-item-id="ec3761c9dce911b115b840a32eebd18b8"><strong>Include Notes</strong>: Not supported.</li>
<li><strong>Protected Notes</strong>: Cannot be shared.</li>
<li><strong>Include Notes</strong>: Not supported.</li>
</ul>
<p>Some of these limitations may be addressed in future updates.</p>
<h2>Prerequisites</h2>
@@ -186,7 +181,7 @@ class="image">
is necessary because the notes will be hosted from the server.</p>
<h2>Sharing a note</h2>
<ol>
<li data-list-item-id="e503f8ad52fe9033ef59212b7b692d69f">
<li>
<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>
@@ -195,9 +190,11 @@ class="image">
alt="Share Note">
</p>
</li>
<li data-list-item-id="e9c5083764d919503412f4f7f1cb0e0e0"><strong>Access the Shared Note</strong>: The link provided will open the
<li>
<p><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>.</li>
the URL will refer to <code>localhost (127.0.0.1)</code>.</p>
</li>
</ol>
<h2>Sharing a note subtree</h2>
<p>When you share a note, you actually share the entire subtree of notes
@@ -212,11 +209,11 @@ class="image">
public.</p>
<h2>Security considerations</h2>
<ul>
<li data-list-item-id="ea35f4596f6a8c69a83416766b567c3cd">Shared notes are published on the open internet and can be accessed by
<li>Shared notes are published on the open internet and can be accessed by
anyone with the URL unless the notes are password-protected.</li>
<li data-list-item-id="e34e983d07439b781597d1abaf8b6e297">The URL's randomness does not provide security, so it is crucial not to
<li>The URL's randomness does not provide security, so it is crucial not to
share sensitive information through this feature.</li>
<li data-list-item-id="e94fbe4fb4b9f7806074aba4fe7601cb7">Trilium takes precautions to protect your publicly shared instance from
<li>Trilium takes precautions to protect your publicly shared instance from
leaking information for non-shared notes, including opening a separate
read-only connection to the&nbsp;<a class="reference-link" href="#root/_help_wX4HbRucYSDD">Database</a>.
Depending on your threat model, it might make more sense to use&nbsp;
@@ -233,13 +230,12 @@ class="image">
<p>The default design should be a good starting point, but you can customize
it using your own CSS:</p>
<ul>
<li data-list-item-id="e3fdd3f9d73ed0655a94330d0a75790e4"><strong>Custom CSS</strong>: Link a CSS&nbsp;<a class="reference-link"
<li><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
data-list-item-id="ee0bb81c27f4cd176412d38258d32da39"><strong>Omitting Default CSS</strong>: For extensive styling changes,
<li><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>
@@ -257,22 +253,22 @@ class="image">
itself.</p>
<p>The <code>#shareHtmlLocation</code> label accepts values in the format <code>location:position</code>:</p>
<ul>
<li data-list-item-id="ead2588d20ac1fb23e7cb2a6d33d02bcb"><strong>Locations</strong>: <code>head</code>, <code>body</code>, <code>content</code>
<li><strong>Locations</strong>: <code>head</code>, <code>body</code>, <code>content</code>
</li>
<li data-list-item-id="e368323f330b229cb3428266304ebc2b4"><strong>Positions</strong>: <code>start</code>, <code>end</code>
<li><strong>Positions</strong>: <code>start</code>, <code>end</code>
</li>
</ul>
<p>For example:</p>
<ul>
<li data-list-item-id="e2f0cbb70e71902ec26d64b4c10f1b3cf"><code>#shareHtmlLocation=head:start</code> - Injects HTML at the beginning
<li><code>#shareHtmlLocation=head:start</code> - Injects HTML at the beginning
of the <code>&lt;head&gt;</code> section</li>
<li data-list-item-id="e2ac6f7ec36059fc5ea2148bee57d9329"><code>#shareHtmlLocation=head:end</code> - Injects HTML at the end of the <code>&lt;head&gt;</code> section
<li><code>#shareHtmlLocation=head:end</code> - Injects HTML at the end of the <code>&lt;head&gt;</code> section
(default)</li>
<li data-list-item-id="e9fea05a82b09b66521807ae4b08bfd53"><code>#shareHtmlLocation=body:start</code> - Injects HTML at the beginning
<li><code>#shareHtmlLocation=body:start</code> - Injects HTML at the beginning
of the <code>&lt;body&gt;</code> section</li>
<li data-list-item-id="ed33846c38d6e8a631111fc858ecf4963"><code>#shareHtmlLocation=content:start</code> - Injects HTML at the beginning
<li><code>#shareHtmlLocation=content:start</code> - Injects HTML at the beginning
of the content area</li>
<li data-list-item-id="e89347723de7736060ce226d93530a162"><code>#shareHtmlLocation=content:end</code> - Injects HTML at the end of
<li><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
@@ -290,16 +286,16 @@ 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 data-list-item-id="edff04cba1df31a2aae23fd2f6a5ee847">Ensure that aliases are unique.</li>
<li data-list-item-id="eea48bfb287b0559450050141243032a9">Using slashes (<code>/</code>) within aliases to create subpaths is not
<li>Ensure that aliases are unique.</li>
<li>Using slashes (<code>/</code>) within aliases to create subpaths is not
supported.</li>
</ol>
<aside class="admonition tip">
<ul>
<li data-list-item-id="e0fcb644d56cb60448a87ddb7831e6043">To easily identify pages that don't have a share alias, run a&nbsp;
<li>To easily identify pages that don't have a share alias, run a&nbsp;
<a
class="reference-link" href="#root/_help_eIg8jdvaoNNd">Search</a>&nbsp;with <code>#!shareAlias</code>.</li>
<li data-list-item-id="e888d6e9d905db9a030755430007e522b">To be able to enter the share alias faster, consider using&nbsp;<a class="reference-link"
<li>To be able to enter the share alias faster, consider using&nbsp;<a class="reference-link"
href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;(for example <code>#label:shareAlias(inheritable)="promoted,alias=Slug,single,text"</code>).</li>
</ul>
</aside>
@@ -323,7 +319,6 @@ 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" style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:18.38%;">
@@ -411,16 +406,11 @@ for (const attr of parentNote.attributes) {
</tr>
</tbody>
</table>
</figure>
<h3>Customizing logo</h3>
<p>It's possible to adjust the logo which is displayed on the top-left of
the left pane.</p>
<figure class="table" style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:19.08%;">
<col style="width:80.92%;">
</colgroup>
<table>
<thead>
<tr>
<th>Attribute</th>
@@ -451,14 +441,9 @@ for (const attr of parentNote.attributes) {
</tr>
</tbody>
</table>
</figure>
<h3>Customizing OpenGraph</h3>
<figure class="table" style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:19.08%;">
<col style="width:80.92%;">
</colgroup>
<table>
<thead>
<tr>
<th>Attribute</th>
@@ -467,7 +452,7 @@ for (const attr of parentNote.attributes) {
</thead>
<tbody>
<tr>
<td><span style="color:#3b3b3b;"><code>#shareOpenGraphColor</code></span>
<td><code>#shareOpenGraphColor</code>
</td>
<td>This adjusts the <code>theme-color</code> meta-property.</td>
</tr>
@@ -486,12 +471,12 @@ for (const attr of parentNote.attributes) {
<br><code>~shareOpenGraphImage</code>
</td>
<td>Can be either a label, case in which the value is passed on as-is, or
it can be a relation to an image&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_W8vYD3Q1zjCR">File</a>.
it can be a relation to an image&nbsp;<a class="reference-link" href="#root/_help_W8vYD3Q1zjCR">File</a>.
This controls the <code>og:image</code> meta-property.</td>
</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

@@ -6,18 +6,13 @@
reverse_proxy /share http://localhost:8080/share
}</code></pre>
<p>This is for newer versions where the share functionality is isolated,
for older versions it's required to also include <code>/assets</code>.
<span
class="footnote-reference" data-footnote-reference="" data-footnote-index="1"
data-footnote-id="2b8mg20aol8" role="doc-noteref" id="fnref2b8mg20aol8"><sup><a href="#fn2b8mg20aol8">[1]</a></sup>
</span>
for older versions it's required to also include <code>/assets</code>.<sup><a href="#fn2b8mg20aol8">[1]</a></sup>
</p>
<ol>
<li>
<p><sup><strong><a href="#fnref2b8mg20aol8">^</a></strong></sup>
</p>
<p><a href="https://github.com/orgs/TriliumNext/discussions/7341#discussioncomment-14679897">https://github.com/orgs/TriliumNext/discussions/7341#discussioncomment-14679897</a>
</p>
<ol class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes">
<li class="footnote-item" data-footnote-item="" data-footnote-index="1"
data-footnote-id="2b8mg20aol8" role="doc-endnote" id="fn2b8mg20aol8"><span class="footnote-back-link" data-footnote-back-link="" data-footnote-id="2b8mg20aol8"><sup><strong><a href="#fnref2b8mg20aol8">^</a></strong></sup></span>
<div
class="footnote-content" data-footnote-content="">
<p><a href="https://github.com/orgs/TriliumNext/discussions/7341#discussioncomment-14679897">https://github.com/orgs/TriliumNext/discussions/7341#discussioncomment-14679897</a>&nbsp;</p>
</div>
</li>
</ol>