docs(user): improve documentation on mobile support

This commit is contained in:
Elian Doran 2026-02-05 23:31:12 +02:00
parent 8a7bcc316e
commit 73e3196124
No known key found for this signature in database
19 changed files with 539 additions and 191 deletions

View File

@ -1,12 +1,18 @@
<p>To easily access selected notes, you can bookmark them. See demo:</p>
<p>
<img src="Bookmarks_bookmarks.gif">
</p>
<p>Frequently used notes can be bookmarked, which will make them appear in
the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>&nbsp;for
easy access.</p>
<h2>Configuring the launch bar</h2>
<p>If bookmarks don't appear in the launch bar, then most likely the bookmark
section has been hidden. Go to the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>&nbsp;configuration
from the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a>&nbsp;and
ensure <em>Bookmarks</em> is in the <em>Visible Launchers</em> section.</p>
<h2>Bookmark folder</h2>
<p>Space in the left panel is limited, and you might want to bookmark many
items. One possible solution is to bookmark a folder, so it shows its children:</p>
<p>
<img src="Bookmarks_bookmark-folder.png">
</p>
<p>To do this, you need to add a <code spellcheck="false">#bookmarkFolder</code> label
to the note.</p>
<p>To do this, bookmark a folder and assign it the <code spellcheck="false">#bookmarkFolder</code> label.</p>
<h2>Mobile</h2>
<p>On mobile, bookmarks are only displayed starting with v0.102.0. Because
of the more constrained screen size, the bookmarks are grouped under a
single icon instead of displaying them as separate icons.</p>
<p>When pressed, a menu will appear listing all the bookmarks. Bookmark folders
are also supported and will appear as sub-menus.</p>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 305 KiB

View File

@ -1,8 +1,11 @@
<h2>Position of the Launch bar</h2>
<p>Depending on the layout selected, the launcher bar will either be on the
left side of the screen with buttons displayed vertically or at the top
of the screen. See&nbsp;<a href="#root/_help_x0JgW8UqGXvq">Vertical and horizontal layout</a>&nbsp;for
<p>On desktop, depending on the layout selected, the launcher bar will either
be on the left side of the screen with buttons displayed vertically or
at the top of the screen. See&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x0JgW8UqGXvq">Vertical and horizontal layout</a>&nbsp;for
more information.</p>
<p>On mobile, the launch bar will always be at the bottom.</p>
<p>If there are too many items in the launch bar to fit the screen, it will
become scrollable.</p>
<h2>Terminology</h2>
<ul>
<li><strong>Launcher</strong>: a button that can be (or is) displayed on the
@ -12,16 +15,16 @@
<li><strong>Visible Launcher</strong>: a launcher that is currently displayed
on the launch bar.</li>
</ul>
<h2>Configuring the Launch bar</h2>
<h2>Configuring the desktop Launch bar</h2>
<p>There are two ways to configure the launch bar:</p>
<ul>
<li>Right click in the empty space between launchers on the launch bar and
select <em>Configure Launchbar.</em>
</li>
<li>Click on the&nbsp;<a href="#root/_help_x3i7MxGccDuM">Global menu</a>&nbsp;and
<li>Click on the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a>&nbsp;and
select <em>Configure Launchbar</em>.</li>
</ul>
<p>This will open a new tab with the&nbsp;<a href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;listing
<p>This will open a new tab with the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;listing
the launchers.</p>
<p>
<img src="Launch Bar_image.png">
@ -29,6 +32,19 @@
<p>Expanding <em>Available Launchers</em> section will show the list of launchers
that are not displayed on the launch bar. The <em>Visible Launchers</em> will
show the ones that are currently displayed.</p>
<h2>Configuring the mobile launch bar</h2>
<p>The launch bar on mobile uses a different configuration from the desktop
one. The reasoning is that not all desktop icons are available on mobile,
and fewer icons fit on a mobile screen.</p>
<p>To configure the launch bar on mobile, go to&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a>&nbsp;and
select <em>Configure Launchbar</em>.</p>
<p>The configure the mobile launch bar while on the desktop (especially useful
to configure more complicated launchers such as scripts or custom widgets),
go to&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a>&nbsp;
Advanced → Show Hidden Subtree and look for the <em>Mobile Launch Bar</em> section.
While in the hidden subtree, it's also possible to drag launchers between
the <em>Mobile Launch Bar</em> and (Desktop) <em>Launch Bar</em> sections.</p>
<h3>Adding/removing and reordering launchers</h3>
<p>To display a new launcher in the launch bar, first look for it in the <em>Available Launchers</em> section.
Then right click it and select <em>Move to visible launchers</em>. It is
@ -36,13 +52,13 @@
<p>Similarly, to remove it from the launch bar, simply look for it in <em>Visible Launchers</em> then
right click it and select <em>Move to available launchers</em> or use drag-and-drop.</p>
<p>Drag-and-drop the items in the&nbsp;tree&nbsp;in order to change their
order. See&nbsp;<a href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;for more
interaction options, including using keyboard shortcuts.</p>
order. See&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;for
more interaction options, including using keyboard shortcuts.</p>
<h2>Customizing the launcher</h2>
<ul>
<li>The icon of a launcher can be changed just like a normal note. See&nbsp;
<a
href="#root/_help_p9kXRFAkwN4o">Note Icons</a>&nbsp;for more information.</li>
class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_p9kXRFAkwN4o">Note Icons</a>&nbsp;for more information.</li>
<li>The title of the launcher can also be changed.</li>
</ul>
<h3>Resetting</h3>
@ -54,42 +70,39 @@
<p>Right click either the <em>Available launchers</em> or <em>Visible launchers</em> sections
and select one of the options:</p>
<ol>
<li>
<p><strong>Note Launcher</strong>
<br>A note launcher will simply navigate to a specified note.</p>
<li><strong>Note Launcher</strong>
<br>A note launcher will simply navigate to a specified note.
<ol>
<li>Set the <code spellcheck="false">target</code> promoted attribute to the
note to navigate to.</li>
<li>Optionally, set <code spellcheck="false">hoistedNote</code> to hoist a particular
note. See&nbsp;<a href="#root/_help_OR8WJ7Iz9K4U">Note Hoisting</a>&nbsp;for
note. See&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_OR8WJ7Iz9K4U">Note Hoisting</a>&nbsp;for
more information.</li>
<li>Optionally, set a <code spellcheck="false">keyboardShortcut</code> to trigger
the launcher.</li>
</ol>
</li>
<li>
<p><strong>Script Launcher</strong>
<br>An advanced launcher which will run a script upon pressing. See&nbsp;
<a
href="#root/_help_CdNpE2pqjmI6">Scripts</a>&nbsp;for more information.</p>
<ol>
<li>Set <code spellcheck="false">script</code> to point to the desired script
to run.</li>
<li>Optionally, set a <code spellcheck="false">keyboardShortcut</code> to trigger
the launcher.</li>
</ol>
<li><strong>Script Launcher</strong>
<br>An advanced launcher which will run a script upon pressing. See&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/_help_CdNpE2pqjmI6">Scripting</a>&nbsp;for more information.
<ol>
<li>Set <code spellcheck="false">script</code> to point to the desired script
to run.</li>
<li>Optionally, set a <code spellcheck="false">keyboardShortcut</code> to trigger
the launcher.</li>
</ol>
</li>
<li>
<li class="ck-list-marker-bold">
<p><strong>Custom Widget</strong>
</p>
<p>Allows defining a custom widget to be rendered inside the launcher. See&nbsp;
<a
href="#root/_help_SynTBQiBsdYJ">Widget Basics</a>&nbsp;for more information.</p>
</li>
<li>
<p><strong>Spacers</strong>
<br>Launchers that create some distance between other launchers for better
visual distinction.</p>
class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_SynTBQiBsdYJ">Widget Basics</a>&nbsp;for more information.</p>
</li>
<li><strong>Spacers</strong>
<br>Launchers that create some distance between other launchers for better
visual distinction.</li>
</ol>
<p>Launchers are configured via predefined&nbsp;<a href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>.</p>
<p>Launchers are configured via predefined&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">Promoted Attributes</a>.</p>

View File

@ -4,8 +4,7 @@ class="image image-style-align-center">
<img style="aspect-ratio:1398/1015;" src="Split View_2_Split View_im.png"
width="1398" height="1015">
</figure>
<h2><strong>Interactions</strong></h2>
<h2><strong>Interactions</strong></h2>
<ul>
<li>Press the
<img src="Split View_Split View_imag.png">button to the right of a note's title to open a new split to the right
@ -51,11 +50,12 @@ class="image image-style-align-center">
<ul>
<li>On smartphones, the split views are laid out vertically (one on the top
and one on the bottom), instead of horizontally as on the desktop.</li>
<li>There can be only one split open per tab.</li>
<li>It's not possible to resize the two split panes.</li>
<li>When the keyboard is opened, the active note will be “maximized”, thus
allowing for more space even when a split is open. When the keyboard is
closed, the splits become equal in size again.</li>
<li
>There can be only one split open per tab.</li>
<li>It's not possible to resize the two split panes.</li>
<li>When the keyboard is opened, the active note will be “maximized”, thus
allowing for more space even when a split is open. When the keyboard is
closed, the splits become equal in size again.</li>
</ul>
<p>Interaction:</p>
<ul>

View File

@ -8,7 +8,8 @@
<ul>
<li>For the vertical layout, the tabs will be placed at the top but to the
right of the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
<li>For the horizontal layout, the tabs will be placed at the top in full-width,
<li
>For the horizontal layout, the tabs will be placed at the top in full-width,
above the&nbsp;<a href="#root/_help_oPVyFC7WL2Lp">note tree</a>, allowing for
more tabs to be comfortably displayed.</li>
</ul>
@ -22,7 +23,8 @@
href="#root/_help_luNhaphA37EO">Split View</a>. Each tab can have one or more
notes, displayed horizontally.</li>
<li>Tabs can be reordered by drag-and-dropping it into a new position.</li>
<li>An existing tab can be displayed in a new window by dragging the tab upwards
<li
>An existing tab can be displayed in a new window by dragging the tab upwards
or downwards. It is not possible to combine tabs back into another window.</li>
</ul>
<h2>Keyboard interaction</h2>
@ -36,7 +38,29 @@
<li><kbd>Ctrl</kbd>+<kbd>Tab</kbd> and <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Tab</kbd> to
go to the next or previous tab.</li>
<li><kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to
activate the first, second and up til ninth tab.</li>
activate the first, second and up to ninth tab.</li>
<li>There is also a shortcut to go to the last tab, but it is not assigned
a key by default.</li>
</ul>
</ul>
<h2>Mobile</h2>
<figure class="image image-style-align-right image_resized" style="width:34.12%;">
<img style="aspect-ratio:1242/2688;" src="Tabs_IMG_1767.PNG"
width="1242" height="2688">
</figure>
<p>Tabs are also supported on the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_RDslemsQ6gCp">Mobile Frontend</a>.</p>
<p>Since v0.102.0, the tabs are displayed by pressing the dedicated tab switcher
button in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>.
In this view the tabs are laid out on a grid with a preview of the note
content.</p>
<p>The context menu button at the top-right of the popup allows creating
a new tab, reopening the last closed tab and closing all the tabs.</p>
<p><a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_luNhaphA37EO">Split View</a>s
are also indicated in the tab switcher, with two titles displayed in a
tab.</p>
<aside class="admonition note">
<p>Versions prior to v0.102.0 also supported tabs, but they were displayed
directly above the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>.
The decision to use a more mobile-like tab switcher was taken because the
original tab bar could not support many tabs at once and the new design
better aligns with how mobile applications handle tabs.</p>
</aside>

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

View File

@ -1,35 +1,168 @@
<p>Trilium (<a href="#root/_help_WOcw2SLH6tbX">server edition</a>) has a mobile
web frontend which is optimized for touch based devices - smartphones and
tablets. It is activated automatically during login process based on browser
detection.</p>
<p>Mobile frontend is limited in features compared to full desktop frontend.
<figure class="image image_resized image-style-align-right" style="width:33.52%;">
<img style="aspect-ratio:1242/2688;" src="Mobile Frontend_IMG_1765.PNG"
width="1242" height="2688">
</figure>
<p>Trilium has a mobile web frontend which is optimized for touch based devices
- smartphones and tablets. It is activated automatically during login process
based on browser detection.</p>
<p>Mobile frontend is limited in features compared to the full desktop version.
See below for more details on this.</p>
<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>Layout basics</h2>
<p>Unlike the desktop version, the mobile version has a slightly different
UI meant to better fit the constrained screens of a mobile phone.</p>
<p>Here is a non-exhaustive list of differences between the desktop version
and the mobile one:</p>
<ul>
<li>
<p>The&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;is
displayed as a sidebar. To display the sidebar, press the button in the
top-left of the screen.</p>
<ul>
<li>
<p>There is also a swipe gesture that can be done from the left of the screen,
but the browser's navigation gesture interferes with it most of the time
(depending on the platform).</p>
</li>
<li>
<p>Press and hold a note to display the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/oPVyFC7WL2Lp/_help_YtSN43OrfzaA">Note tree contextual menu</a>.</p>
</li>
</ul>
</li>
<li>The&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_Ms1nauBra7gq">Quick search</a>&nbsp;bar
is also displayed at the top of the note tree.</li>
<li>The full&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_eIg8jdvaoNNd">Search</a>&nbsp;function
can be triggered either from either the&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a>&nbsp;or
from the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>,
if configured.</li>
<li>
<p>The&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>&nbsp;is
displayed at the bottom of the screen.</p>
<ul>
<li>
<p>The launch bar uses a different configuration for icons than the desktop
version. See the dedicated page for more information on how to configure
it.</p>
</li>
</ul>
</li>
<li>
<p>Most of the note-related actions are grouped in the horizontal dots icon
on the top-right of the note.</p>
</li>
<li>
<p>The&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_3seOhtN8uLIY">Tabs</a>&nbsp;are
grouped under a tab switcher in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>,
where the tabs are displayed in a full-screen grid with preview for easy
switching, as well as additional options such as reopening closed tabs.</p>
</li>
<li>
<p>Since v0.100.0,&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_luNhaphA37EO">Split View</a>&nbsp;can
also be used in mobile view, but with a maximum of two panes at once. The
splits are displayed vertically instead of horizontally.</p>
</li>
<li>
<p>Starting with v0.102.0, the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_IjZS7iK5EXtb">New Layout</a>&nbsp;is
enforced on mobile. This brings features such as the note badges, note
type switcher or collection properties which would otherwise not be available.</p>
</li>
</ul>
<h2>Installing as a PWA</h2>
<p>The mobile view can be set up as a PWA. While this does not offer any
offline capabilities, it will display the application in full-screen and
makes it easy to access via your mobile phone's home screen.</p>
<h3>On iOS with Safari</h3>
<ol>
<li>Open your default web browser and access your Trilium instance.</li>
<li
>Login.</li>
<li>
<p>Press the […] button in the bottom-right of the screen and select Share.</p>
</li>
<li>
<p>Scroll down to reveal the full list of items and choose “Add to Home Screen”.</p>
</li>
<li>
<p>Press “Add” and the web app will be available.</p>
</li>
</ol>
<h3>On Android with Google Chrome</h3>
<aside class="admonition important">
<p>Google Chrome requires the server to be served over HTTPS in order to
display in full-screen. If using HTTP, the app will appear like a normal
web page (similar to a bookmark).</p>
</aside>
<ol>
<li>Open your default web browser and access your Trilium instance.</li>
<li
>Login.</li>
<li>
<p>Press the three vertical dots icon in the top-right of the screen and
select <em>Add to Home screen.</em>
</p>
</li>
<li>
<p>Select the <em>Install</em> option.</p>
</li>
<li>
<p>Select an appropriate name.</p>
</li>
<li>
<p>The web app will appear as an application, not on the home screen.</p>
</li>
</ol>
<h3>On Android with Brave</h3>
<aside class="admonition important">
<p>Brave requires the server to be served over HTTPS in order to display
in full-screen. If using HTTP, the app will appear like a normal web page
(similar to a bookmark).</p>
</aside>
<ol>
<li>Open your default web browser and access your Trilium instance.</li>
<li
>Login.</li>
<li>
<p>Press the three vertical dots icon in the bottom-right of the screen and
select <em>Add to Home screen</em>.</p>
</li>
<li>
<p>Press the <em>Install</em> option.</p>
</li>
<li>
<p>The web app will appear as an application, not on the home screen.</p>
</li>
</ol>
<h3>On Samsung Browser</h3>
<ol>
<li>Open your default web browser and access your Trilium instance.</li>
<li
>Login.</li>
<li>
<p>Press the hamburger menu in the bottom-right of the screen.</p>
</li>
<li>
<p>Select <em>Add to</em>, followed by <em>Home screen</em>.</p>
</li>
<li>
<p>Press <em>Add</em> and the web app will appear on the home page.</p>
</li>
</ol>
<h2>Testing via the desktop application</h2>
<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&nbsp;<a class="reference-link" href="#root/_help_nRqcgfTb97uV">Using the desktop application as a server</a>.
To access it go to <code spellcheck="false">http://&lt;ip&gt;: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>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>reading and editing <a href="#root/_help_bwg0e8ewQMak">protected notes</a> is
possible, but creating them 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.
<p>Trilium decides automatically whether to use mobile or desktop front-end.
If this is not appropriate, you can use <code spellcheck="false">?mobile</code> or
<code
spellcheck="false">?desktop</code>query param on <strong>login</strong> page (Note: you might
need to log out).</p>
<p>Alternatively, simply select <em>Switch to Mobile/Desktop Version</em> in
the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a>.</p>
<h2>Scripting</h2>
<p>You can alter the behavior with <a href="#root/_help_CdNpE2pqjmI6">scripts</a> just
like for normal frontend. For script notes to be executed, they need to
have labeled <code spellcheck="false">#run=mobileStartup</code>.</p>
<p>You can alter the behavior with&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/_help_CdNpE2pqjmI6">Scripting</a>,
just like for normal frontend. For script notes to be executed, they need
to have labeled <code spellcheck="false">#run=mobileStartup</code>.</p>
<p>Custom&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>&nbsp;widgets
are also supported.</p>

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 KiB

View File

@ -1,5 +1,5 @@
# Documentation
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/y2NjgAW23yyj/Documentation_image.png" width="205" height="162">
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/qIpo9UiTZNdm/Documentation_image.png" width="205" height="162">
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>.
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.

View File

@ -1491,20 +1491,6 @@
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "bwg0e8ewQMak",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 40
},
{
"type": "label",
"name": "shareAlias",
@ -1518,11 +1504,90 @@
"value": "bx bx-mobile-alt",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "IjZS7iK5EXtb",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "oPVyFC7WL2Lp",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "YtSN43OrfzaA",
"isInheritable": false,
"position": 110
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 120
},
{
"type": "relation",
"name": "internalLink",
"value": "Ms1nauBra7gq",
"isInheritable": false,
"position": 130
},
{
"type": "relation",
"name": "internalLink",
"value": "eIg8jdvaoNNd",
"isInheritable": false,
"position": 140
},
{
"type": "relation",
"name": "internalLink",
"value": "3seOhtN8uLIY",
"isInheritable": false,
"position": 150
},
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 160
},
{
"type": "relation",
"name": "internalLink",
"value": "luNhaphA37EO",
"isInheritable": false,
"position": 170
}
],
"format": "markdown",
"dataFileName": "Mobile Frontend.md",
"attachments": []
"attachments": [
{
"attachmentId": "JRliU5bOLszn",
"title": "IMG_1765.PNG",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Mobile Frontend_IMG_1765.PNG"
}
]
},
{
"isClone": false,
@ -2793,6 +2858,20 @@
"value": "tabs",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "RDslemsQ6gCp",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 60
}
],
"format": "markdown",
@ -2821,6 +2900,14 @@
"mime": "image/png",
"position": 10,
"dataFileName": "2_Tabs_image.png"
},
{
"attachmentId": "rFdKVhoVtsLA",
"title": "IMG_1767.PNG",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Tabs_IMG_1767.PNG"
}
]
},
@ -2840,20 +2927,6 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "x0JgW8UqGXvq",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
@ -2861,41 +2934,6 @@
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "p9kXRFAkwN4o",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "OR8WJ7Iz9K4U",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "SynTBQiBsdYJ",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 80
},
{
"type": "label",
"name": "iconClass",
@ -2909,6 +2947,55 @@
"value": "launch-bar",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "SynTBQiBsdYJ",
"isInheritable": false,
"position": 110
},
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 120
},
{
"type": "relation",
"name": "internalLink",
"value": "OR8WJ7Iz9K4U",
"isInheritable": false,
"position": 130
},
{
"type": "relation",
"name": "internalLink",
"value": "p9kXRFAkwN4o",
"isInheritable": false,
"position": 140
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 150
},
{
"type": "relation",
"name": "internalLink",
"value": "x0JgW8UqGXvq",
"isInheritable": false,
"position": 160
}
],
"format": "markdown",
@ -5256,28 +5343,25 @@
"value": "bx bx-bookmarks",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 50
}
],
"format": "markdown",
"dataFileName": "Bookmarks.md",
"attachments": [
{
"attachmentId": "99dD0P74W8QJ",
"title": "bookmark-folder.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Bookmarks_bookmark-folder.png"
},
{
"attachmentId": "9dX71aLlSl9R",
"title": "bookmarks.gif",
"role": "image",
"mime": "image/gif",
"position": 10,
"dataFileName": "Bookmarks_bookmarks.gif"
}
]
"attachments": []
},
{
"isClone": false,

View File

@ -1,12 +1,18 @@
# Bookmarks
To easily access selected notes, you can bookmark them. See demo:
Frequently used notes can be bookmarked, which will make them appear in the <a class="reference-link" href="../UI%20Elements/Launch%20Bar.md">Launch Bar</a> for easy access.
![](Bookmarks_bookmarks.gif)
## Configuring the launch bar
If bookmarks don't appear in the launch bar, then most likely the bookmark section has been hidden. Go to the <a class="reference-link" href="../UI%20Elements/Launch%20Bar.md">Launch Bar</a> configuration from the <a class="reference-link" href="../UI%20Elements/Global%20menu.md">Global menu</a> and ensure _Bookmarks_ is in the _Visible Launchers_ section.
## Bookmark folder
Space in the left panel is limited, and you might want to bookmark many items. One possible solution is to bookmark a folder, so it shows its children:
![](Bookmarks_bookmark-folder.png)
To do this, bookmark a folder and assign it the `#bookmarkFolder` label.
To do this, you need to add a `#bookmarkFolder` label to the note.
## Mobile
On mobile, bookmarks are only displayed starting with v0.102.0. Because of the more constrained screen size, the bookmarks are grouped under a single icon instead of displaying them as separate icons.
When pressed, a menu will appear listing all the bookmarks. Bookmark folders are also supported and will appear as sub-menus.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 305 KiB

View File

@ -1,7 +1,11 @@
# Launch Bar
## Position of the Launch bar
Depending on the layout selected, the launcher bar will either be on the left side of the screen with buttons displayed vertically or at the top of the screen. See [Vertical and horizontal layout](Vertical%20and%20horizontal%20layout.md) for more information.
On desktop, depending on the layout selected, the launcher bar will either be on the left side of the screen with buttons displayed vertically or at the top of the screen. See <a class="reference-link" href="Vertical%20and%20horizontal%20layout.md">Vertical and horizontal layout</a> for more information.
On mobile, the launch bar will always be at the bottom.
If there are too many items in the launch bar to fit the screen, it will become scrollable.
## Terminology
@ -9,30 +13,38 @@ Depending on the layout selected, the launcher bar will either be on the left si
* **Available Launcher**: a launcher that is not displayed on the launch bar, but can be added.
* **Visible Launcher**: a launcher that is currently displayed on the launch bar.
## Configuring the Launch bar
## Configuring the desktop Launch bar
There are two ways to configure the launch bar:
* Right click in the empty space between launchers on the launch bar and select _Configure Launchbar._
* Click on the [Global menu](Global%20menu.md) and select _Configure Launchbar_.
* Click on the <a class="reference-link" href="Global%20menu.md">Global menu</a> and select _Configure Launchbar_.
This will open a new tab with the [Note Tree](Note%20Tree.md) listing the launchers.
This will open a new tab with the <a class="reference-link" href="Note%20Tree.md">Note Tree</a> listing the launchers.
![](Launch%20Bar_image.png)
Expanding _Available Launchers_ section will show the list of launchers that are not displayed on the launch bar. The _Visible Launchers_ will show the ones that are currently displayed.
## Configuring the mobile launch bar
The launch bar on mobile uses a different configuration from the desktop one. The reasoning is that not all desktop icons are available on mobile, and fewer icons fit on a mobile screen.
To configure the launch bar on mobile, go to <a class="reference-link" href="Global%20menu.md">Global menu</a> and select _Configure Launchbar_.
The configure the mobile launch bar while on the desktop (especially useful to configure more complicated launchers such as scripts or custom widgets), go to <a class="reference-link" href="Global%20menu.md">Global menu</a> → Advanced → Show Hidden Subtree and look for the _Mobile Launch Bar_ section. While in the hidden subtree, it's also possible to drag launchers between the _Mobile Launch Bar_ and (Desktop) _Launch Bar_ sections.
### Adding/removing and reordering launchers
To display a new launcher in the launch bar, first look for it in the _Available Launchers_ section. Then right click it and select _Move to visible launchers_. It is also possible to drag and drop the item manually.
Similarly, to remove it from the launch bar, simply look for it in _Visible Launchers_ then right click it and select _Move to available launchers_ or use drag-and-drop.
Drag-and-drop the items in the tree in order to change their order. See [Note Tree](Note%20Tree.md) for more interaction options, including using keyboard shortcuts.
Drag-and-drop the items in the tree in order to change their order. See <a class="reference-link" href="Note%20Tree.md">Note Tree</a> for more interaction options, including using keyboard shortcuts.
## Customizing the launcher
* The icon of a launcher can be changed just like a normal note. See [Note Icons](../Notes/Note%20Icons.md) for more information.
* The icon of a launcher can be changed just like a normal note. See <a class="reference-link" href="../Notes/Note%20Icons.md">Note Icons</a> for more information.
* The title of the launcher can also be changed.
### Resetting
@ -45,19 +57,17 @@ Right click either the _Available launchers_ or _Visible launchers_ sections and
1. **Note Launcher**
A note launcher will simply navigate to a specified note.
1. Set the `target` promoted attribute to the note to navigate to.
2. Optionally, set `hoistedNote` to hoist a particular note. See [Note Hoisting](../Navigation/Note%20Hoisting.md) for more information.
2. Optionally, set `hoistedNote` to hoist a particular note. See <a class="reference-link" href="../Navigation/Note%20Hoisting.md">Note Hoisting</a> for more information.
3. Optionally, set a `keyboardShortcut` to trigger the launcher.
2. **Script Launcher**
An advanced launcher which will run a script upon pressing. See [Scripts](../../Scripting.md) for more information.
An advanced launcher which will run a script upon pressing. See <a class="reference-link" href="../../Scripting.md">Scripting</a> for more information.
1. Set `script` to point to the desired script to run.
2. Optionally, set a `keyboardShortcut` to trigger the launcher.
3. **Custom Widget**
Allows defining a custom widget to be rendered inside the launcher. See [Widget Basics](../../Scripting/Frontend%20Basics/Custom%20Widgets/Widget%20Basics.md) for more information.
Allows defining a custom widget to be rendered inside the launcher. See <a class="reference-link" href="../../Scripting/Frontend%20Basics/Custom%20Widgets/Widget%20Basics.md">Widget Basics</a> for more information.
4. **Spacers**
Launchers that create some distance between other launchers for better visual distinction.
Launchers are configured via predefined [Promoted Attributes](../../Advanced%20Usage/Attributes/Promoted%20Attributes.md).
Launchers are configured via predefined <a class="reference-link" href="../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a>.

View File

@ -26,5 +26,20 @@ Since tabs are a commonly used feature, there are multiple keyboard shortcuts th
* <kbd>Ctrl</kbd>+<kbd>W</kbd> to close the current tab.
* <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> to reopen the last closed tab.
* <kbd>Ctrl</kbd>+<kbd>Tab</kbd> and <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Tab</kbd> to go to the next or previous tab.
* <kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to activate the first, second and up til ninth tab.
* There is also a shortcut to go to the last tab, but it is not assigned a key by default.
* <kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to activate the first, second and up to ninth tab.
* There is also a shortcut to go to the last tab, but it is not assigned a key by default.
## Mobile
<figure class="image image-style-align-right image_resized" style="width:34.12%;"><img style="aspect-ratio:1242/2688;" src="Tabs_IMG_1767.PNG" width="1242" height="2688"></figure>
Tabs are also supported on the <a class="reference-link" href="../../Installation%20%26%20Setup/Mobile%20Frontend.md">Mobile Frontend</a>.
Since v0.102.0, the tabs are displayed by pressing the dedicated tab switcher button in the <a class="reference-link" href="Launch%20Bar.md">Launch Bar</a>. In this view the tabs are laid out on a grid with a preview of the note content.
The context menu button at the top-right of the popup allows creating a new tab, reopening the last closed tab and closing all the tabs.
<a class="reference-link" href="Split%20View.md">Split View</a>s are also indicated in the tab switcher, with two titles displayed in a tab.
> [!NOTE]
> Versions prior to v0.102.0 also supported tabs, but they were displayed directly above the <a class="reference-link" href="Launch%20Bar.md">Launch Bar</a>. The decision to use a more mobile-like tab switcher was taken because the original tab bar could not support many tabs at once and the new design better aligns with how mobile applications handle tabs.

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

View File

@ -1,28 +1,85 @@
# Mobile Frontend
Trilium ([server edition](Server%20Installation.md)) has a mobile web frontend which is optimized for touch based devices - smartphones and tablets. It is activated automatically during login process based on browser detection.
<figure class="image image_resized image-style-align-right" style="width:33.52%;"><img style="aspect-ratio:1242/2688;" src="Mobile Frontend_IMG_1765.PNG" width="1242" height="2688"></figure>
Mobile frontend is limited in features compared to full desktop frontend. See below for more details on this.
Trilium has a mobile web frontend which is optimized for touch based devices - smartphones and tablets. It is activated automatically during login process based on browser detection.
Note that this is not an Android/iOS app, this is just mobile friendly web page served on the [server edition](Server%20Installation.md).
Mobile frontend is limited in features compared to the full desktop version. See below for more details on this.
## Layout basics
Unlike the desktop version, the mobile version has a slightly different UI meant to better fit the constrained screens of a mobile phone.
Here is a non-exhaustive list of differences between the desktop version and the mobile one:
* The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a> is displayed as a sidebar. To display the sidebar, press the button in the top-left of the screen.
* There is also a swipe gesture that can be done from the left of the screen, but the browser's navigation gesture interferes with it most of the time (depending on the platform).
* Press and hold a note to display the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree/Note%20tree%20contextual%20menu.md">Note tree contextual menu</a>.
* The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Quick%20search.md">Quick search</a> bar is also displayed at the top of the note tree.
* The full <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Search.md">Search</a> function can be triggered either from either the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a> or from the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, if configured.
* The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a> is displayed at the bottom of the screen.
* The launch bar uses a different configuration for icons than the desktop version. See the dedicated page for more information on how to configure it.
* Most of the note-related actions are grouped in the horizontal dots icon on the top-right of the note.
* The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Tabs.md">Tabs</a> are grouped under a tab switcher in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, where the tabs are displayed in a full-screen grid with preview for easy switching, as well as additional options such as reopening closed tabs.
* Since v0.100.0, <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Split%20View.md">Split View</a> can also be used in mobile view, but with a maximum of two panes at once. The splits are displayed vertically instead of horizontally.
* Starting with v0.102.0, the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/New%20Layout.md">New Layout</a> is enforced on mobile. This brings features such as the note badges, note type switcher or collection properties which would otherwise not be available.
## Installing as a PWA
The mobile view can be set up as a PWA. While this does not offer any offline capabilities, it will display the application in full-screen and makes it easy to access via your mobile phone's home screen.
### On iOS with Safari
1. Open your default web browser and access your Trilium instance.
2. Login.
3. Press the \[…\] button in the bottom-right of the screen and select Share.
4. Scroll down to reveal the full list of items and choose “Add to Home Screen”.
5. Press “Add” and the web app will be available.
### On Android with Google Chrome
> [!IMPORTANT]
> Google Chrome requires the server to be served over HTTPS in order to display in full-screen. If using HTTP, the app will appear like a normal web page (similar to a bookmark).
1. Open your default web browser and access your Trilium instance.
2. Login.
3. Press the three vertical dots icon in the top-right of the screen and select _Add to Home screen._
4. Select the _Install_ option.
5. Select an appropriate name.
6. The web app will appear as an application, not on the home screen.
### On Android with Brave
> [!IMPORTANT]
> Brave requires the server to be served over HTTPS in order to display in full-screen. If using HTTP, the app will appear like a normal web page (similar to a bookmark).
1. Open your default web browser and access your Trilium instance.
2. Login.
3. Press the three vertical dots icon in the bottom-right of the screen and select _Add to Home screen_.
4. Press the _Install_ option.
5. The web app will appear as an application, not on the home screen.
### On Samsung Browser
1. Open your default web browser and access your Trilium instance.
2. Login.
3. Press the hamburger menu in the bottom-right of the screen.
4. Select _Add to_, followed by _Home screen_.
5. Press _Add_ and the web app will appear on the home page.
## Testing via the desktop application
If you are running Trilium without a dedicated [server installation](Server%20Installation.md), you can still test the mobile application using the desktop application. For more information, see <a class="reference-link" href="Desktop%20Installation/Using%20the%20desktop%20application%20.md">Using the desktop application as a server</a>. To access it go to `http://<ip>:37840/login?mobile` .
## Limitations
Mobile frontend provides only some of the features of the full desktop frontend:
* it is possible to browse the whole note tree, read and edit all types of notes, but you can create only text notes
* reading and editing [protected notes](../Basic%20Concepts%20and%20Features/Notes/Protected%20Notes.md) is possible, but creating them is not supported
* editing options is not supported
* cloning notes is not supported
* uploading file attachments is not supported
## Forcing mobile/desktop frontend
Trilium decides automatically whether to use mobile or desktop frontend. If this is not appropriate, you can use `?mobile` or `?desktop` query param on **login** page (Note: you might need to log out).
Trilium decides automatically whether to use mobile or desktop front-end. If this is not appropriate, you can use `?mobile` or `?desktop` query param on **login** page (Note: you might need to log out).
Alternatively, simply select _Switch to Mobile/Desktop Version_ in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a>.
## Scripting
You can alter the behavior with [scripts](../Scripting.md) just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.
You can alter the behavior with <a class="reference-link" href="../Scripting.md">Scripting</a>, just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.
Custom <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a> widgets are also supported.

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 KiB