mirror of
https://github.com/zadam/trilium.git
synced 2025-10-19 06:38:59 +02:00
docs(user): document presentation view
This commit is contained in:
Elian Doran
parent
0f52e42017
commit
9403ea2028
2
apps/server/src/assets/doc_notes/en/User Guide/!!!meta.json
generated
vendored
2
apps/server/src/assets/doc_notes/en/User Guide/!!!meta.json
generated
vendored
File diff suppressed because one or more lines are too long
@ -5,7 +5,7 @@
|
||||
<p>As an alternative to calling the API directly, there are client libraries
|
||||
to simplify this</p>
|
||||
<ul>
|
||||
<li data-list-item-id="ee7b0cc154e457f4bd579cec38dd49695"><a href="https://github.com/Nriver/trilium-py">trilium-py</a>, you can
|
||||
<li><a href="https://github.com/Nriver/trilium-py">trilium-py</a>, you can
|
||||
use Python to communicate with Trilium.</li>
|
||||
</ul>
|
||||
<h2>Obtaining a token</h2>
|
||||
@ -23,10 +23,10 @@ Authorization: ETAPITOKEN</code></pre>
|
||||
<p>Since v0.56 you can also use basic auth format:</p><pre><code class="language-text-x-trilium-auto">GET https://myserver.com/etapi/app-info
|
||||
Authorization: Basic BATOKEN</code></pre>
|
||||
<ul>
|
||||
<li data-list-item-id="e86aabb1609179bc22edcb308bb84ebf8">Where <code>BATOKEN = BASE64(username + ':' + password)</code> - this is
|
||||
<li>Where <code>BATOKEN = BASE64(username + ':' + password)</code> - this is
|
||||
a standard Basic Auth serialization</li>
|
||||
<li data-list-item-id="e5837f08379443a09a7ea8a4237bf2909">Where <code>username</code> is "etapi"</li>
|
||||
<li data-list-item-id="e137dc99a1b1c5a308bc5dc4b450cadda">And <code>password</code> is the generated ETAPI token described above.</li>
|
||||
<li>Where <code>username</code> is "etapi"</li>
|
||||
<li>And <code>password</code> is the generated ETAPI token described above.</li>
|
||||
</ul>
|
||||
<p>Basic Auth is meant to be used with tools which support only basic auth.</p>
|
||||
<h2>Interaction using Bash scripts</h2>
|
||||
@ -42,14 +42,13 @@ NOTE_ID="i6ra4ZshJhgN"
|
||||
curl "$SERVER/etapi/notes/$NOTE_ID/content" -H "Authorization: $TOKEN" </code></pre>
|
||||
<p>Make sure to replace the values of:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e9707bf9bba8c058b72a64034deaaf5e1"><code>TOKEN</code> with your ETAPI token.</li>
|
||||
<li data-list-item-id="e479cb73c11d13a63d7d54cb6f35c3cd7"><code>SERVER</code> with the correct protocol, host name and port to your
|
||||
<li><code>TOKEN</code> with your ETAPI token.</li>
|
||||
<li><code>SERVER</code> with the correct protocol, host name and port to your
|
||||
Trilium instance.</li>
|
||||
<li data-list-item-id="e51a5af5ecb3055bd3d6c93bbc9cde2af"><code>NOTE_ID</code> with an existing note ID to download.</li>
|
||||
<li><code>NOTE_ID</code> with an existing note ID to download.</li>
|
||||
</ul>
|
||||
<p>As another example, to obtain a .zip export of a note and place it in
|
||||
a directory called <code>out</code>, simply replace the last statement in
|
||||
the script with:</p><pre><code class="language-text-x-trilium-auto">curl -H "Authorization: $TOKEN" \
|
||||
-X GET "$SERVER/etapi/notes/$NOTE_ID/export" \
|
||||
|
||||
--output "out/$NOTE_ID.zip"</code></pre>
|
||||
@ -1,4 +1,4 @@
|
||||
<p>Sometimes, setting up a <a href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_WOcw2SLH6tbX">dedicated server installation</a> is
|
||||
<p>Sometimes, setting up a <a href="#root/_help_WOcw2SLH6tbX">dedicated server installation</a> is
|
||||
not feasible. The desktop application ships with a fully functional server
|
||||
instance by default.</p>
|
||||
<p>You can access this web interface locally by navigating to <a href="http://localhost:37840/login">http://localhost:37840/login</a>.</p>
|
||||
@ -12,8 +12,8 @@ class="admonition note">
|
||||
<h2>Mobile interface</h2>
|
||||
<p>By default, this will display the desktop user interface, even on mobile.
|
||||
To switch to the mobile version, simply go to the <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a> and
|
||||
select “Switch to the mobile version”.</p>
|
||||
href="#root/_help_x3i7MxGccDuM">Global menu</a> and select “Switch
|
||||
to the mobile version”.</p>
|
||||
<h2>Allowing the port externally on Windows with Windows Defender Firewall</h2>
|
||||
<p>First, find out the IP of your desktop server by running <code>ipconfig</code> in
|
||||
your local terminal. Then try accessing <code>http://<ip>:37840/login</code> on
|
||||
@ -21,15 +21,15 @@ class="admonition note">
|
||||
by your operating system's firewall.</p>
|
||||
<p>If you use Windows Defender Firewall:</p>
|
||||
<ol>
|
||||
<li data-list-item-id="e181018d4ed9d5f6ed6fac8dfcfcd9fdc">Go to Windows's start menu and look for “Windows Defender Firewall with
|
||||
<li>Go to Windows's start menu and look for “Windows Defender Firewall with
|
||||
Advanced Security”.</li>
|
||||
<li data-list-item-id="ed0adc669e5aab708cb8c98bdfbc50d5a">Go to “Inbound Rules” on the left tree, and select “New Rule” in the “Actions”
|
||||
<li>Go to “Inbound Rules” on the left tree, and select “New Rule” in the “Actions”
|
||||
sidebar on the right.</li>
|
||||
<li data-list-item-id="edb48ee7c3e7b80b78e553b30ef71d01f">Select “Port” and press “Next”.</li>
|
||||
<li data-list-item-id="ecfaef8d3f67901bbbf0d3f5c1edca797">Type in <code>37840</code> in the “Specific local ports” section and then
|
||||
<li>Select “Port” and press “Next”.</li>
|
||||
<li>Type in <code>37840</code> in the “Specific local ports” section and then
|
||||
press “Next”.</li>
|
||||
<li data-list-item-id="e0fd590158c462104c099cac4971daee9">Leave “Allow the connection” checked and press “Next”.</li>
|
||||
<li data-list-item-id="edd8c39fed27bb27e02e525a48c17d4a0">Configure the networks to apply to (check all if unsure) and then press
|
||||
<li>Leave “Allow the connection” checked and press “Next”.</li>
|
||||
<li>Configure the networks to apply to (check all if unsure) and then press
|
||||
“Next”.</li>
|
||||
<li data-list-item-id="eade1aa266a382975c4b59106e2632cb1">Add an appropriate name to the rule (e.g. “Trilium Notes”) and press “Finish”.</li>
|
||||
<li>Add an appropriate name to the rule (e.g. “Trilium Notes”) and press “Finish”.</li>
|
||||
</ol>
|
||||
@ -7,21 +7,21 @@
|
||||
<p>Note that this is not an Android/iOS app, this is just mobile friendly
|
||||
web page served on the <a href="#root/_help_WOcw2SLH6tbX">server edition</a>.</p>
|
||||
<h2>Testing via the desktop application</h2>
|
||||
<p>If you are running Trilium without a dedicated <a href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_WOcw2SLH6tbX">server installation</a>,
|
||||
<p>If you are running Trilium without a dedicated <a href="#root/_help_WOcw2SLH6tbX">server installation</a>,
|
||||
you can still test the mobile application using the desktop application.
|
||||
For more information, see <a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/poXkQfguuA0U/_help_nRqcgfTb97uV">Using the desktop application as a server</a>.
|
||||
For more information, see <a class="reference-link" href="#root/_help_nRqcgfTb97uV">Using the desktop application as a server</a>.
|
||||
To access it go to <code>http://<ip>:37840/login?mobile</code> .</p>
|
||||
<h2>Limitations</h2>
|
||||
<p>Mobile frontend provides only some of the features of the full desktop
|
||||
frontend:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e738e54a9aff5f827b1321f2afb8cc89f">it is possible to browse the whole note tree, read and edit all types
|
||||
<li>it is possible to browse the whole note tree, read and edit all types
|
||||
of notes, but you can create only text notes</li>
|
||||
<li data-list-item-id="e0e3748ecf5c55000c2a220ae4daa13fa">reading and editing <a href="#root/_help_bwg0e8ewQMak">protected notes</a> is
|
||||
<li>reading and editing <a href="#root/_help_bwg0e8ewQMak">protected notes</a> is
|
||||
possible, but creating them is not supported</li>
|
||||
<li data-list-item-id="edb73b27209d2628a43c131551470688b">editing options is not supported</li>
|
||||
<li data-list-item-id="eee7c0f90ea1fbd6b79aac302ccf7ff0b">cloning notes is not supported</li>
|
||||
<li data-list-item-id="e82466c594de53615b657260c9ead626a">uploading file attachments is not supported</li>
|
||||
<li>editing options is not supported</li>
|
||||
<li>cloning notes is not supported</li>
|
||||
<li>uploading file attachments is not supported</li>
|
||||
</ul>
|
||||
<h2>Forcing mobile/desktop frontend</h2>
|
||||
<p>Trilium decides automatically whether to use mobile or desktop frontend.
|
||||
|
||||
@ -5,18 +5,18 @@
|
||||
docker create --name trilium -t -p 127.0.0.1:8080:8080 -v ~/trilium-data:/home/node/trilium-data triliumnext/trilium:[VERSION]</code></pre>
|
||||
<h2>Configuring the Apache proxy</h2>
|
||||
<ol>
|
||||
<li data-list-item-id="edcf1e8eaf68f39ab3b02a563d23ffca4">
|
||||
<li>
|
||||
<p>Enable apache proxy modules</p><pre><code class="language-text-x-trilium-auto"> a2enmod ssl
|
||||
a2enmod proxy
|
||||
a2enmod proxy_http
|
||||
a2enmod proxy_wstunnel</code></pre>
|
||||
</li>
|
||||
<li data-list-item-id="e8c39c3bc1f275514ef6048afaaf707e7">
|
||||
<li>
|
||||
<p>Create a new let's encrypt certificate</p><pre><code class="language-text-x-trilium-auto"> sudo certbot certonly -d trilium.mydomain.com</code></pre>
|
||||
<p>Choose standalone (2) and note the location of the created certificates
|
||||
(typically /etc/letsencrypt/live/...)</p>
|
||||
</li>
|
||||
<li data-list-item-id="ed3cea3c4b554b37a54b09e4a4a6bcfae">
|
||||
<li>
|
||||
<p>Create a new virtual host file for apache (you may want to use <code>apachectl -S</code> to
|
||||
determine the server root location, mine is /etc/apache2)</p><pre><code class="language-text-x-trilium-auto"> sudo nano /etc/apache2/sites-available/trilium.yourdomain.com.conf</code></pre>
|
||||
<p>Paste (and customize) the following text into the configuration file</p><pre><code class="language-text-x-trilium-auto">
|
||||
@ -38,18 +38,22 @@
|
||||
Include /etc/letsencrypt/options-ssl-apache.conf
|
||||
</code></pre>
|
||||
</li>
|
||||
<li data-list-item-id="e5a7a78cf9d2aa51813ce21a9ca555c4d">Enable the virtual host with <code>sudo a2ensite trilium.yourdomain.com.conf</code>
|
||||
<li>
|
||||
<p>Enable the virtual host with <code>sudo a2ensite trilium.yourdomain.com.conf</code>
|
||||
</p>
|
||||
</li>
|
||||
<li data-list-item-id="eb0b41c876bcaf500601a725234c482e9">Reload apache2 with <code>sudo systemctl reload apache2</code>
|
||||
<li>
|
||||
<p>Reload apache2 with <code>sudo systemctl reload apache2</code>
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h2>Configuring the trusted proxy</h2>
|
||||
<p>After setting up a reverse proxy, make sure to configure the <a class="reference-link"
|
||||
href="#root/vcjrb3VVYPZI/_help_LLzSMXACKhUs">Trusted proxy</a>.</p>
|
||||
href="#root/_help_LLzSMXACKhUs">Trusted proxy</a>.</p>
|
||||
<h2>Setup the systemd service to start up the server</h2>
|
||||
<p>Create and enable a systemd service to start the docker container on boot</p>
|
||||
<ol>
|
||||
<li data-list-item-id="e45d86d557e5197177815a90dfbbbae2c">
|
||||
<li>
|
||||
<p>Create a new empty file called <code>/lib/systemd/system/trilium.service</code> with
|
||||
the contents</p><pre><code class="language-text-x-trilium-auto"> [Unit]
|
||||
Description=Trilium Server
|
||||
@ -64,7 +68,7 @@
|
||||
[Install]
|
||||
WantedBy=local.target</code></pre>
|
||||
</li>
|
||||
<li data-list-item-id="efec9f13630080d6bc681f447d077c43c">
|
||||
<li>
|
||||
<p>Install, enable and start service</p><pre><code class="language-text-x-trilium-auto"> sudo systemctl daemon-reload
|
||||
sudo systemctl enable trilium.service
|
||||
sudo systemctl start trilium.service</code></pre>
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
sudo apt-get remove apache2</code></pre>
|
||||
<h2>Build the configuration file</h2>
|
||||
<ol>
|
||||
<li data-list-item-id="e13e11a7fc322c075930e523e2c7aa4d9">
|
||||
<li>
|
||||
<p>First, create the configuration file:</p><pre><code class="language-text-x-trilium-auto">cd /etc/nginx/conf.d
|
||||
vim default.conf</code></pre>
|
||||
</li>
|
||||
<li data-list-item-id="e4f78909eb8e972cb53763daa3fc69333">
|
||||
<li>
|
||||
<p>Fill the file with the context shown below, part of the setting show be
|
||||
changed. Then you can enjoy your web with HTTPS forced and proxy.</p><pre><code class="language-text-x-trilium-auto"># This part configures, where your Trilium server is running
|
||||
upstream trilium {
|
||||
@ -54,10 +54,9 @@ server {
|
||||
(useful e.g. if you want to serve multiple instances), update the location
|
||||
block like so:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e332fd2d3d68c160e471759fa76c542c9">update the location with your desired path (make sure to not leave a trailing
|
||||
<li>update the location with your desired path (make sure to not leave a trailing
|
||||
slash "/", if your <code>proxy_pass</code> does not end on a slash as well)</li>
|
||||
<li
|
||||
data-list-item-id="e48363402721bba6392ba9ff3f45b16b6">add the <code>proxy_cookie_path</code> directive with the same path: this
|
||||
<li>add the <code>proxy_cookie_path</code> directive with the same path: this
|
||||
allows you to stay logged in at multiple instances at the same time.</li>
|
||||
</ul><pre><code class="language-text-x-trilium-auto"> location /trilium/instance-one {
|
||||
rewrite /trilium/instance-one/(.*) /$1 break;
|
||||
@ -73,4 +72,4 @@ server {
|
||||
}</code></pre>
|
||||
<h2>Configuring the trusted proxy</h2>
|
||||
<p>After setting up a reverse proxy, make sure to configure the <a class="reference-link"
|
||||
href="#root/vcjrb3VVYPZI/_help_LLzSMXACKhUs">Trusted proxy</a>.</p>
|
||||
href="#root/_help_LLzSMXACKhUs">Trusted proxy</a>.</p>
|
||||
@ -1,12 +1,11 @@
|
||||
<p>If you are running the Trilium server under a <a href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/WOcw2SLH6tbX/_help_vcjrb3VVYPZI">reverse proxy</a>,
|
||||
<p>If you are running the Trilium server under a <a href="#root/_help_vcjrb3VVYPZI">reverse proxy</a>,
|
||||
it's important to configure it as a trusted proxy so that the application
|
||||
can correctly identify the real IP address of the clients (for authentication
|
||||
and rate limiting purposes).</p>
|
||||
<p>To do so, simply modify <a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_Gzjqa934BdH4">Configuration (config.ini or environment variables)</a> and
|
||||
<p>To do so, simply modify <a class="reference-link" href="#root/_help_Gzjqa934BdH4">Configuration (config.ini or environment variables)</a> and
|
||||
set:</p><pre><code class="language-text-x-trilium-auto">[Network]
|
||||
trustedReverseProxy=true</code></pre>
|
||||
<p>This will use the left-most IP in the <code>X-Forwarded-For</code> header.
|
||||
Alternatively, instead of <code>true</code> use the IP address of the reverse
|
||||
proxy or Express.js shortcuts such as:</p><pre><code class="language-text-x-trilium-auto">loopback(127.0.0.1/8, ::1/128), linklocal(169.254.0.0/16, fe80::/10), uniquelocal(10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16, fc00::/7)</code></pre>
|
||||
<p>For more information, consult <a href="https://expressjs.com/en/guide/behind-proxies.html">Express behind proxies</a>.</p>
|
||||
<p> </p>
|
||||
<p>For more information, consult <a href="https://expressjs.com/en/guide/behind-proxies.html">Express behind proxies</a>.</p>
|
||||
@ -3,18 +3,18 @@
|
||||
<aside
|
||||
class="admonition tip">
|
||||
<p>While Trilium supports HTTPS on its own, it's generally a good idea to
|
||||
use a <a href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/WOcw2SLH6tbX/_help_vcjrb3VVYPZI">reverse proxy</a> instead
|
||||
with TLS termination. You can follow a <a href="https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04">guide like this</a> for
|
||||
use a <a href="#root/_help_vcjrb3VVYPZI">reverse proxy</a> instead with TLS
|
||||
termination. You can follow a <a href="https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04">guide like this</a> for
|
||||
such setups.</p>
|
||||
</aside>
|
||||
<h2>Obtaining a TLS Certificate</h2>
|
||||
<p>You have two options for obtaining a TLS certificate:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="ef9eca3746191ab88f8ac5b9bbf0819b5"><strong>Recommended</strong>: Obtain a TLS certificate signed by a root
|
||||
<li><strong>Recommended</strong>: Obtain a TLS certificate signed by a root
|
||||
certificate authority. For personal use, <a href="https://letsencrypt.org">Let's Encrypt</a> is
|
||||
an excellent choice. It is free, automated, and straightforward. Certbot
|
||||
can facilitate automatic TLS setup.</li>
|
||||
<li data-list-item-id="e2f48af26cc62a095be59dccbf1e44db6">Generate a self-signed certificate. This option is not recommended due
|
||||
<li>Generate a self-signed certificate. This option is not recommended due
|
||||
to the additional complexity of importing the certificate into all machines
|
||||
connecting to the server.</li>
|
||||
</ul>
|
||||
|
||||
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/1_Presentation View_image.png
generated
vendored
Normal file
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/1_Presentation View_image.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
139
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Presentation View.html
generated
vendored
Normal file
139
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Presentation View.html
generated
vendored
Normal file
@ -0,0 +1,139 @@
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:1120/763;" src="Presentation View_image.png"
|
||||
width="1120" height="763">
|
||||
</figure>
|
||||
<p>The Presentation view allows the creation of slideshows directly from
|
||||
within Trilium.</p>
|
||||
<h2>How it works</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="e51cbe078fb06e2bfdfb1f2bf6fd82225">Each slide is a child note of the collection.</li>
|
||||
<li data-list-item-id="efffc6f15623109770c57338c61b4ccb6">The order of the child notes determines the order of the slides.</li>
|
||||
<li
|
||||
data-list-item-id="e1a795af0f85ba888f84586be6ed2de2a">Unlike traditional presentation software, slides can be laid out both
|
||||
horizontally and vertically (see belwo for more information).</li>
|
||||
<li data-list-item-id="e9a2a74d8e19974766f65416100e8f877">Direct children will be laid out horizontally and the children of those
|
||||
will be laid out vertically. Children deeper than two levels of nesting
|
||||
are ignored.</li>
|
||||
</ul>
|
||||
<h2>Interaction and navigation</h2>
|
||||
<p>In the floating buttons section (top-right):</p>
|
||||
<ul>
|
||||
<li data-list-item-id="ee6dd604137e6918dcfac24fe271b05bf">Edit button to go to the corresponding note of the current slide.</li>
|
||||
<li
|
||||
data-list-item-id="e4805f237077e9dc8ddbed2cb0b56e585">Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view
|
||||
of the slides. Press the button again to disable it.</li>
|
||||
<li data-list-item-id="ee714da289257895faf87a26f6849e050">Press the “Start presentation” button to show the presentation in full-screen.</li>
|
||||
</ul>
|
||||
<p>The following keyboard shortcuts are supported:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e5a34fbaa9c98cd91ffac8301e153a083">Press <kbd>←</kbd> and <kbd>→</kbd> (or <kbd>H</kbd> and <kbd>L</kbd>) to go
|
||||
to the slide on the left or on the right (horizontal).</li>
|
||||
<li data-list-item-id="e39394b060a9b767d04c466440106cbf0">Press <kbd>↑</kbd> and <kbd>↓</kbd> (or <kbd>K</kbd> and <kbd>J</kbd>)
|
||||
to go to the upward or downward slide (vertical).</li>
|
||||
<li data-list-item-id="e17441e9598f687e89a161a8afe2f703d">Press <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> or to go
|
||||
to the next/previous slide in order.</li>
|
||||
<li data-list-item-id="e4212130fc1fdc5de980e2e40feae68c2">And a few more, press <kbd>?</kbd> to display a popup with all the supported
|
||||
keyboard combinations.</li>
|
||||
</ul>
|
||||
<h2>Vertical slides and nesting</h2>
|
||||
<p>Unlike traditional presentation software such as Microsoft PowerPoint,
|
||||
the slides in Trilium can be laid out horizontally or vertically in order
|
||||
to create depth or better organize the slides by topic.</p>
|
||||
<p>This horizontal/vertical organization affects transitions (especially
|
||||
on the “slide” transition), however it is most noticeable in navigation.</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e9245eba99da45713930c1714202add31">Pressing <kbd>←</kbd> and <kbd>→</kbd> will navigate through slides horizontally,
|
||||
thus skipping vertical notes under the current slide. This is useful to
|
||||
skip entire chapters/related slides. </li>
|
||||
<li data-list-item-id="ef9aedf69e5e2a599e9fbd0de1b89b4ad">Pressing <kbd>↑</kbd> and <kbd>↓</kbd> will navigate through the vertical
|
||||
slides at the current level.</li>
|
||||
<li data-list-item-id="e436fc36f74a22fdefe31e498684e23b3">Pressing <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> will go to
|
||||
the next/previous slide in order, regardless of the direction. This is
|
||||
generally the key combination to use when presenting.</li>
|
||||
<li data-list-item-id="e9c5dcf5efec250876bd2c527082e76d7">The arrows on the bottom-right of the slide will also reflect this navigation
|
||||
scheme.</li>
|
||||
</ul>
|
||||
<figure class="image image-style-align-right image_resized" style="width:55.57%;">
|
||||
<img style="aspect-ratio:890/569;" src="1_Presentation View_image.png"
|
||||
width="890" height="569">
|
||||
</figure>
|
||||
<p>All direct children of the collection will be laid out horizontally. If
|
||||
a direct child also has children, those children will be placed as vertical
|
||||
slides.</p>
|
||||
<p>In the following example, the note structure is as follows:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e4d5d440ec56a9c81b7c8323ab142478d">Presentation collection
|
||||
<ul>
|
||||
<li data-list-item-id="e255021a351d18e2792c15ab2b80c0a57">Trilium Notes (demo page)</li>
|
||||
<li data-list-item-id="ef6f95ec54572aa247a13e8104a2db0c3">“Introduction” slide
|
||||
<ul>
|
||||
<li data-list-item-id="eccb526d7f2dd67ac686f8e963e660a77">“The challenge of personal knowledge management”</li>
|
||||
<li data-list-item-id="e0aca477122bb0b00ab9b3bc163436b5f">“Note-taking structures”</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e3bbbe33c8d7a18cb17cd0de29b6eff05">“Demo & Feature highlights” slide
|
||||
<ul>
|
||||
<li data-list-item-id="ebf5e3fe8a8b4400f21d5cc99b8198898">“Really fast installation process”</li>
|
||||
<li data-list-item-id="e0b6885a0bf7f76fa2ce7801f004a2d42">Video slide</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Customization</h2>
|
||||
<p>At collection level, it's possible to adjust:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="edc0a7c71ee836a225a8793e3cb1e29e8">The theme of the entire presentation to one of the predefined themes by
|
||||
going to the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_BlN9DFI679QC">Ribbon</a> and
|
||||
looking for the <em>Collection Properties</em> tab.</li>
|
||||
<li data-list-item-id="ed04e1bd7a997de717d8b8b8b90f19e7f">It's currently not possible to create custom themes, although it is planned.</li>
|
||||
<li
|
||||
data-list-item-id="edb37c7902c9e464de4555ec3ede05403">Note that it is note possible to alter the CSS via <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a> because
|
||||
the slides are rendered isolated (in a shadow DOM).</li>
|
||||
</ul>
|
||||
<p>At slide level:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="eb9c23ec94dcd00a3a8539d3cd633d7df">It's possible to adjust the background color of a slide by using the
|
||||
<a
|
||||
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">predefined promoted attribute</a>for the color or manually setting <code>#slide:background</code> to
|
||||
a hex color.</li>
|
||||
<li data-list-item-id="e70af66a7d3468b7fa86badb1e2c93cc9">More complex backgrounds can be achieved via gradients. There's no UI
|
||||
for it; it has to be set via <code>#slide:background</code> to a CSS gradient
|
||||
definition such as: <code>linear-gradient(to bottom, #283b95, #17b2c3)</code>.</li>
|
||||
</ul>
|
||||
<h2>Tips and tricks</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="ec501025735d0063969f2a48eedb651dc">Text notes generally respect the formatting (bold, italic, foreground
|
||||
and background colors) and font size. Code blocks and tables also work.</li>
|
||||
<li
|
||||
data-list-item-id="e8acd457a2660726905aee30a9325a620">Try using more than just text notes, the presentation uses the same mechanism
|
||||
as <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_R9pX4DGra2Vt">shared notes</a> and
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a> so it should be able to display <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_grjYqerjn243">Canvas</a> and <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_gBbsAeiuUxI5">Mind Map</a> in
|
||||
full-screen (without the interactivity).
|
||||
<ul>
|
||||
<li data-list-item-id="e91cdf4823552f771ed802de7fd6330e4">Consider using a transparent background for <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_grjYqerjn243">Canvas</a>, if
|
||||
the slides have a custom background (go to the hamburger menu in the Canvas,
|
||||
press the button select a custom color and write <code>transparent</code>).</li>
|
||||
<li
|
||||
data-list-item-id="ebed408174c89a15dc9b0ee74d36e2e70">
|
||||
<p>For <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
some of them have a predefined background which can be changed via the
|
||||
frontmatter. For example, for XY-charts:</p><pre><code class="language-text-x-trilium-auto">---
|
||||
config:
|
||||
themeVariables:
|
||||
xyChart:
|
||||
backgroundColor: transparent
|
||||
---</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Under the hood</h2>
|
||||
<p>The Presentation view uses <a href="https://revealjs.com/">Reveal.js</a> to
|
||||
handle the navigation and layout of the slides.</p>
|
||||
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Presentation View_image.png
generated
vendored
Normal file
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Presentation View_image.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
@ -1,37 +1,38 @@
|
||||
<p>It is possible to provide a CSS file to be used regardless of the theme
|
||||
set by the user.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>Start by creating a new note and changing the note type to CSS</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="2_Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="3_Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>Type the desired CSS.
|
||||
<br>
|
||||
<br>Generally it's a good idea to append <code>!important</code> for the styles
|
||||
that are being changed, in order to prevent other</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>Start by creating a new note and changing the note type to CSS</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="2_Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="3_Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>Type the desired CSS.
|
||||
<br>
|
||||
<br>Generally it's a good idea to append <code>!important</code> for the styles
|
||||
that are being changed, in order to prevent other</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<h2>Seeing the changes</h2>
|
||||
<p>Adding a new <em>app CSS note</em> or modifying an existing one does not
|
||||
immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh
|
||||
@ -53,9 +54,10 @@
|
||||
workspaces.</p>
|
||||
<p>To do so:</p>
|
||||
<ol>
|
||||
<li>In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
|
||||
<li data-list-item-id="eaca1b6777262e20c38dae5e2c2ef8496">In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
|
||||
a value that uniquely identifies the workspace (say <code>my-workspace</code>).</li>
|
||||
<li>Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
|
||||
<li
|
||||
data-list-item-id="e01663cf2128c10a0cd0cab1bb27fd44d">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
|
||||
</ol>
|
||||
<h4>Change the color of the icons in the <a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon {
|
||||
color: #ff0000;
|
||||
@ -71,8 +73,8 @@
|
||||
width="641" height="630">
|
||||
</figure>
|
||||
<ol>
|
||||
<li>Insert an image in any note and take the URL of the image.</li>
|
||||
<li>Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
|
||||
<li data-list-item-id="e6e7ec9751bdc6f7846d10bf42c42c9b1">Insert an image in any note and take the URL of the image.</li>
|
||||
<li data-list-item-id="edc7f77ed718593d91bda3b2983b81bed">Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
|
||||
the desired values.</li>
|
||||
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
|
||||
position: fixed;
|
||||
@ -87,4 +89,10 @@
|
||||
right: 1em;
|
||||
opacity: 0.5;
|
||||
z-index: 0;
|
||||
}</code></pre>
|
||||
}</code></pre>
|
||||
<h2>Limitations</h2>
|
||||
<p>Some parts of the application can't be styled directly via custom CSS
|
||||
because they are rendered in an isolated mode (shadow DOM), more specifically:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e3ce2c089fe536bc42856bb1b5edc8c8e">The slides in a <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_zP3PMqaG71Ct">Presentation View</a>.</li>
|
||||
</ul>
|
||||
182
docs/User Guide/!!!meta.json
vendored
182
docs/User Guide/!!!meta.json
vendored
@ -202,14 +202,14 @@
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "tAassRL4RSQL",
|
||||
"value": "l2VkvOwUNfZj",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "l2VkvOwUNfZj",
|
||||
"value": "tAassRL4RSQL",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
@ -252,14 +252,14 @@
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "WOcw2SLH6tbX",
|
||||
"value": "x3i7MxGccDuM",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "x3i7MxGccDuM",
|
||||
"value": "WOcw2SLH6tbX",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
}
|
||||
@ -741,19 +741,19 @@
|
||||
"type": "text",
|
||||
"mime": "text/markdown",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "LLzSMXACKhUs",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
"value": "nginx-proxy-setup",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "LLzSMXACKhUs",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -777,19 +777,19 @@
|
||||
"type": "text",
|
||||
"mime": "text/markdown",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "LLzSMXACKhUs",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
"value": "apache-proxy-setup",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "LLzSMXACKhUs",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -860,17 +860,24 @@
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "tAassRL4RSQL",
|
||||
"value": "vcjrb3VVYPZI",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "Gzjqa934BdH4",
|
||||
"value": "tAassRL4RSQL",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "Gzjqa934BdH4",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
@ -878,13 +885,6 @@
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "vcjrb3VVYPZI",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
@ -1096,24 +1096,31 @@
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "bwg0e8ewQMak",
|
||||
"value": "nRqcgfTb97uV",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "WOcw2SLH6tbX",
|
||||
"value": "bwg0e8ewQMak",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CdNpE2pqjmI6",
|
||||
"value": "WOcw2SLH6tbX",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CdNpE2pqjmI6",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
@ -1127,13 +1134,6 @@
|
||||
"value": "bx bx-mobile-alt",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "nRqcgfTb97uV",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -8740,6 +8740,107 @@
|
||||
"dataFileName": "Board View_image.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "zP3PMqaG71Ct",
|
||||
"notePath": [
|
||||
"pOsGYCXsbNQG",
|
||||
"KSZ04uQ2D1St",
|
||||
"GTwFsgaA0lCt",
|
||||
"zP3PMqaG71Ct"
|
||||
],
|
||||
"title": "Presentation View",
|
||||
"notePosition": 70,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bx-slideshow",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "BlN9DFI679QC",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "OFXdgB2nNk1F",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "R9pX4DGra2Vt",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "0ESUbbAxVnoK",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "s1aBHPd79XYj",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "grjYqerjn243",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "gBbsAeiuUxI5",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "AlhDUqhENtH7",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Presentation View.md",
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "aJa7vIrYknDw",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Presentation View_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "aPooMxP74PeA",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "1_Presentation View_image.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -9686,6 +9787,13 @@
|
||||
"value": "oPVyFC7WL2Lp",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "zP3PMqaG71Ct",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
|
||||
BIN
docs/User Guide/User Guide/Note Types/Collections/1_Presentation View_image.png
vendored
Normal file
BIN
docs/User Guide/User Guide/Note Types/Collections/1_Presentation View_image.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
85
docs/User Guide/User Guide/Note Types/Collections/Presentation View.md
vendored
Normal file
85
docs/User Guide/User Guide/Note Types/Collections/Presentation View.md
vendored
Normal file
@ -0,0 +1,85 @@
|
||||
# Presentation View
|
||||
<figure class="image"><img style="aspect-ratio:1120/763;" src="Presentation View_image.png" width="1120" height="763"></figure>
|
||||
|
||||
The Presentation view allows the creation of slideshows directly from within Trilium.
|
||||
|
||||
## How it works
|
||||
|
||||
* Each slide is a child note of the collection.
|
||||
* The order of the child notes determines the order of the slides.
|
||||
* Unlike traditional presentation software, slides can be laid out both horizontally and vertically (see belwo for more information).
|
||||
* Direct children will be laid out horizontally and the children of those will be laid out vertically. Children deeper than two levels of nesting are ignored.
|
||||
|
||||
## Interaction and navigation
|
||||
|
||||
In the floating buttons section (top-right):
|
||||
|
||||
* Edit button to go to the corresponding note of the current slide.
|
||||
* Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view of the slides. Press the button again to disable it.
|
||||
* Press the “Start presentation” button to show the presentation in full-screen.
|
||||
|
||||
The following keyboard shortcuts are supported:
|
||||
|
||||
* Press <kbd>←</kbd> and <kbd>→</kbd> (or <kbd>H</kbd> and <kbd>L</kbd>) to go to the slide on the left or on the right (horizontal).
|
||||
* Press <kbd>↑</kbd> and <kbd>↓</kbd> (or <kbd>K</kbd> and <kbd>J</kbd>) to go to the upward or downward slide (vertical).
|
||||
* Press <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> or to go to the next/previous slide in order.
|
||||
* And a few more, press <kbd>?</kbd> to display a popup with all the supported keyboard combinations.
|
||||
|
||||
## Vertical slides and nesting
|
||||
|
||||
Unlike traditional presentation software such as Microsoft PowerPoint, the slides in Trilium can be laid out horizontally or vertically in order to create depth or better organize the slides by topic.
|
||||
|
||||
This horizontal/vertical organization affects transitions (especially on the “slide” transition), however it is most noticeable in navigation.
|
||||
|
||||
* Pressing <kbd>←</kbd> and <kbd>→</kbd> will navigate through slides horizontally, thus skipping vertical notes under the current slide. This is useful to skip entire chapters/related slides.
|
||||
* Pressing <kbd>↑</kbd> and <kbd>↓</kbd> will navigate through the vertical slides at the current level.
|
||||
* Pressing <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> will go to the next/previous slide in order, regardless of the direction. This is generally the key combination to use when presenting.
|
||||
* The arrows on the bottom-right of the slide will also reflect this navigation scheme.
|
||||
|
||||
<figure class="image image-style-align-right image_resized" style="width:55.57%;"><img style="aspect-ratio:890/569;" src="1_Presentation View_image.png" width="890" height="569"></figure>
|
||||
|
||||
All direct children of the collection will be laid out horizontally. If a direct child also has children, those children will be placed as vertical slides.
|
||||
|
||||
In the following example, the note structure is as follows:
|
||||
|
||||
* Presentation collection
|
||||
* Trilium Notes (demo page)
|
||||
* “Introduction” slide
|
||||
* “The challenge of personal knowledge management”
|
||||
* “Note-taking structures”
|
||||
* “Demo & Feature highlights” slide
|
||||
* “Really fast installation process”
|
||||
* Video slide
|
||||
|
||||
## Customization
|
||||
|
||||
At collection level, it's possible to adjust:
|
||||
|
||||
* The theme of the entire presentation to one of the predefined themes by going to the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Ribbon.md">Ribbon</a> and looking for the _Collection Properties_ tab.
|
||||
* It's currently not possible to create custom themes, although it is planned.
|
||||
* Note that it is note possible to alter the CSS via <a class="reference-link" href="../../Theme%20development/Custom%20app-wide%20CSS.md">Custom app-wide CSS</a> because the slides are rendered isolated (in a shadow DOM).
|
||||
|
||||
At slide level:
|
||||
|
||||
* It's possible to adjust the background color of a slide by using the [predefined promoted attribute](../../Advanced%20Usage/Attributes/Promoted%20Attributes.md) for the color or manually setting `#slide:background` to a hex color.
|
||||
* More complex backgrounds can be achieved via gradients. There's no UI for it; it has to be set via `#slide:background` to a CSS gradient definition such as: `linear-gradient(to bottom, #283b95, #17b2c3)`.
|
||||
|
||||
## Tips and tricks
|
||||
|
||||
* Text notes generally respect the formatting (bold, italic, foreground and background colors) and font size. Code blocks and tables also work.
|
||||
* Try using more than just text notes, the presentation uses the same mechanism as [shared notes](../../Advanced%20Usage/Sharing.md) and <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a> so it should be able to display <a class="reference-link" href="../Mermaid%20Diagrams.md">Mermaid Diagrams</a>, <a class="reference-link" href="../Canvas.md">Canvas</a> and <a class="reference-link" href="../Mind%20Map.md">Mind Map</a> in full-screen (without the interactivity).
|
||||
* Consider using a transparent background for <a class="reference-link" href="../Canvas.md">Canvas</a>, if the slides have a custom background (go to the hamburger menu in the Canvas, press the button select a custom color and write `transparent`).
|
||||
* For <a class="reference-link" href="../Mermaid%20Diagrams.md">Mermaid Diagrams</a>, some of them have a predefined background which can be changed via the frontmatter. For example, for XY-charts:
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
themeVariables:
|
||||
xyChart:
|
||||
backgroundColor: transparent
|
||||
---
|
||||
```
|
||||
|
||||
## Under the hood
|
||||
|
||||
The Presentation view uses [Reveal.js](https://revealjs.com/) to handle the navigation and layout of the slides.
|
||||
BIN
docs/User Guide/User Guide/Note Types/Collections/Presentation View_image.png
vendored
Normal file
BIN
docs/User Guide/User Guide/Note Types/Collections/Presentation View_image.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
@ -5,7 +5,7 @@ It is possible to provide a CSS file to be used regardless of the theme set by t
|
||||
| --- | --- |
|
||||
|  | Start by creating a new note and changing the note type to CSS |
|
||||
|  | In the ribbon, press the “Owned Attributes” section and type `#appCss`. |
|
||||
|  | Type the desired CSS. <br> <br>Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
|
||||
|  | Type the desired CSS. <br> <br>Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
|
||||
|
||||
## Seeing the changes
|
||||
|
||||
@ -78,4 +78,10 @@ To change the color of the note title and the icon (above the content):
|
||||
opacity: 0.5;
|
||||
z-index: 0;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
## Limitations
|
||||
|
||||
Some parts of the application can't be styled directly via custom CSS because they are rendered in an isolated mode (shadow DOM), more specifically:
|
||||
|
||||
* The slides in a <a class="reference-link" href="../Note%20Types/Collections/Presentation%20View.md">Presentation View</a>.
|
||||
Loading…
x
Reference in New Issue
Block a user