doc: add doc for flatpak and addon style

website/docs/topic_flatpak.md

@@ -0,0 +1,33 @@
+Flatpak is a software platform that runs on top of Linux. It has idiosyncrasies by design.
+
+This page provides some solutions to work with flatpak.
+Exactly how to use Flatpak needs to refer [Flatpak's documentation](https://docs.flatpak.org/)
+
+These solutions use [Flatseal](https://github.com/tchx84/Flatseal), but directly using the `flatpak` command or KDE's [flatpak-kcm](https://invent.kde.org/plasma/flatpak-kcm) works as well.
+
+!!! note
+    Feel free to add new solutions by clicking the edit button on the top right.
+
+## Add external programs
+
+Problem: Apps inside Flatpak cannot run programs on the host system directly.
+
+Solution: Use `flatpak-spawn --host`.
+
+First, add `org.freedesktop.Flatpak` to allowed session bus.
+
+![](https://github.com/flathub/io.github.xiaoyifang.goldendict_ng/assets/20123683/77d16c85-a035-48d4-971e-6d71548339f6)
+
+Then add application like `flatpak-spawn --host --directory=${the external program's pwd will be set to this value} ${The actual commands}`.
+
+For example, [Translate Shell](https://github.com/soimort/translate-shell) can be added to GoldenDict as `flatpak-spawn --host --directory=. trans -no-ansi %GDWORD%`.
+
+## Uses fixed paths instead of `/run/user/1000/doc/...`
+
+Apps inside Flatpak don't have direct access to filesystem by default. A directory selected in file chooser will be exported to app as `/run/user/1000/doc/...`. The exported directories can be listed with `flatpak documents --columns=id,origin,application`
+
+If you want to use fixed paths instead, just grant GolenDict either the whole file system, the whole home or a specific path.
+
+Note that some special paths in the host system like `\tmp` cannot be accessed by flatpak apps in any way.
+
+![](https://github.com/flathub/io.github.xiaoyifang.goldendict_ng/assets/20123683/40f4a401-a497-4f76-9239-b47c101aa06b)

website/docs/topic_userstyle.md

@@ -16,3 +16,23 @@ DarkReader.enable({
 Also, you can tune GoldenDict's interface by creating `qt-style.css` style sheet file in GoldenDict configuration folder. It is a [Qt Style Sheet](https://doc.qt.io/qt-6/stylesheet-reference.html) loaded during startup.
 
 Samples of `article-style.css` and `qt-style.css` files can found in GoldenDict's source code at [/src/stylesheets](https://github.com/xiaoyifang/goldendict-ng/tree/staged/src/stylesheets)
+
+
+## "Addon" Styles
+
+Under GoldenDict's configuration folder, you can create a "styles" folder for "Addon" styles, so that you can switch between multiple `article-style.css` and `qt-style.css`.
+
+Folder structure like below will create two “addon” styles to switch in settings -> appearances.
+
+```
+.    <- Goldendict's configuration folder
+├── config
+└── styles
+    ├── dark
+    │   ├── article-style.css
+    │   └── qt-style.css
+    └── light
+        ├── article-style.css
+        └── qt-style.css
+```
+

website/mkdocs.yml

@@ -24,7 +24,7 @@ markdown_extensions:
 
 nav:
   - Getting started: index.md
-  - Installation : install.md
+  - Download & Install: install.md
   - Dictionary Formats: dictformats.md
   - Manage Dictionaries: 
       - Sources: manage_sources.md
@@ -47,6 +47,7 @@ nav:
       - OCR Integration: howto/ocr.md
       - Wayland: topic_wayland.md
       - Debug dictionary JS: howto/how to debug dictionary js.md
+      - Flatpak/FlatHub: topic_flatpak.md
   - Report Bugs & Feedbacks: feedbacks.md
   - Development Info:
     - Start develop: developer.md