Add help modal navigation with table of contents, scroll spy, vault context indicator, and new window button for file viewing
This commit is contained in:
+326
-124
@@ -133,6 +133,10 @@
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="vault-context-indicator" id="vault-context-indicator" title="Contexte vault actif">
|
||||
<i data-lucide="database" style="width:14px;height:14px"></i>
|
||||
<span id="vault-context-text">All</span>
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<button class="header-menu-btn" id="header-menu-btn" title="Options">
|
||||
<i data-lucide="settings" style="width:18px;height:18px"></i>
|
||||
@@ -402,7 +406,7 @@
|
||||
<div class="editor-modal" id="help-modal">
|
||||
<div class="editor-container help-container">
|
||||
<div class="editor-header">
|
||||
<div class="editor-title" id="help-title">Aide ObsiGate</div>
|
||||
<div class="editor-title" id="help-title">Guide d'utilisation ObsiGate</div>
|
||||
<div class="editor-actions">
|
||||
<button class="editor-btn" id="help-close" title="Fermer l'aide" aria-label="Fermer l'aide">
|
||||
<i data-lucide="x" style="width:16px;height:16px"></i>
|
||||
@@ -410,142 +414,340 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-body help-body" id="help-body">
|
||||
<nav class="help-nav" id="help-nav">
|
||||
<div class="help-nav-title">Sommaire</div>
|
||||
<ul class="help-nav-list">
|
||||
<li><a href="#help-intro" class="help-nav-link">Introduction</a></li>
|
||||
<li><a href="#help-interface" class="help-nav-link">Interface</a></li>
|
||||
<li><a href="#help-navigation" class="help-nav-link">Navigation</a></li>
|
||||
<li><a href="#help-recherche" class="help-nav-link">Recherche</a></li>
|
||||
<li><a href="#help-tags" class="help-nav-link">Tags</a></li>
|
||||
<li><a href="#help-fichiers" class="help-nav-link">Fichiers</a></li>
|
||||
<li><a href="#help-personnalisation" class="help-nav-link">Personnalisation</a></li>
|
||||
<li><a href="#help-raccourcis" class="help-nav-link">Raccourcis</a></li>
|
||||
<li><a href="#help-astuces" class="help-nav-link">Astuces</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="help-content">
|
||||
<section class="help-hero">
|
||||
<div class="help-hero-copy">
|
||||
<div class="help-kicker">📘 Guide d'utilisation</div>
|
||||
<h1>Bienvenue dans ObsiGate</h1>
|
||||
<p>Explorez vos notes, changez de vault en un clic, filtrez avec les tags et retrouvez immédiatement le bon document grâce à une navigation pensée pour aller vite.</p>
|
||||
<div class="help-badges">
|
||||
<span class="help-badge">⚡ Navigation rapide</span>
|
||||
<span class="help-badge">🗂️ Multi-vault</span>
|
||||
<span class="help-badge">🏷️ Tags intelligents</span>
|
||||
<span class="help-badge">📝 Lecture et édition</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-hero-visual" aria-hidden="true">
|
||||
<div class="help-mini-window">
|
||||
<div class="help-mini-window-bar">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="help-mini-window-body">
|
||||
<div class="help-mini-sidebar"></div>
|
||||
<div class="help-mini-content">
|
||||
<div class="help-mini-line short"></div>
|
||||
<div class="help-mini-line"></div>
|
||||
<div class="help-mini-tags">
|
||||
<span>#docker</span>
|
||||
<span>#infra</span>
|
||||
<span>#linux</span>
|
||||
</div>
|
||||
<div class="help-mini-card"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="help-section" id="help-intro">
|
||||
<h1>📘 Bienvenue dans ObsiGate</h1>
|
||||
<p class="help-lead">ObsiGate est votre porte d'entrée web vers vos vaults Obsidian. Accédez, naviguez et recherchez dans toutes vos notes depuis n'importe quel appareil via une interface moderne et responsive.</p>
|
||||
<div class="help-badges">
|
||||
<span class="help-badge">⚡ Navigation rapide</span>
|
||||
<span class="help-badge">🗂️ Multi-vault</span>
|
||||
<span class="help-badge">🏷️ Tags intelligents</span>
|
||||
<span class="help-badge">📝 Lecture et édition</span>
|
||||
<span class="help-badge">🔍 Recherche TF-IDF</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="help-grid">
|
||||
<article class="help-card">
|
||||
<div class="help-card-icon">🔎</div>
|
||||
<h2>Rechercher vite</h2>
|
||||
<p>Utilisez la barre de recherche en haut pour retrouver un mot, un titre ou un contenu dans vos notes.</p>
|
||||
</article>
|
||||
<article class="help-card">
|
||||
<div class="help-card-icon">🗃️</div>
|
||||
<h2>Changer de vault</h2>
|
||||
<p>Le sélecteur de vault vous permet de rester sur <code>Tous les vaults</code> ou de vous concentrer sur un espace précis.</p>
|
||||
</article>
|
||||
<article class="help-card">
|
||||
<div class="help-card-icon">🏷️</div>
|
||||
<h2>Filtrer par tags</h2>
|
||||
<p>Cliquez sur un tag pour affiner les résultats et retrouver rapidement les notes associées.</p>
|
||||
</article>
|
||||
<section class="help-section" id="help-interface">
|
||||
<h2>🧭 Interface utilisateur</h2>
|
||||
|
||||
<h3>En-tête</h3>
|
||||
<p>La barre supérieure contient les éléments essentiels :</p>
|
||||
<ul>
|
||||
<li><strong>Bouton menu hamburger</strong> (mobile) : Affiche/masque la sidebar</li>
|
||||
<li><strong>Bouton toggle sidebar</strong> (desktop) : Masque la sidebar pour plus d'espace</li>
|
||||
<li><strong>Logo ObsiGate</strong> : Retour à l'accueil</li>
|
||||
<li><strong>Barre de recherche</strong> : Recherche globale avec autocomplétion</li>
|
||||
<li><strong>Indicateur de vault</strong> : Affiche le contexte actif (All, vault1, etc.)</li>
|
||||
<li><strong>Menu Options</strong> : Accès aux paramètres, thème, aide</li>
|
||||
</ul>
|
||||
|
||||
<h3>Sidebar (barre latérale)</h3>
|
||||
<p>La sidebar est divisée en deux onglets :</p>
|
||||
<ul>
|
||||
<li><strong>Vaults</strong> : Arborescence des fichiers et dossiers</li>
|
||||
<li><strong>Tags</strong> : Nuage de tags cliquables</li>
|
||||
</ul>
|
||||
<p>Fonctionnalités de la sidebar :</p>
|
||||
<ul>
|
||||
<li><strong>Filtrage</strong> : Barre de recherche pour filtrer fichiers/tags</li>
|
||||
<li><strong>Sélection rapide</strong> : Dropdown pour changer de vault</li>
|
||||
<li><strong>Redimensionnement</strong> : Glissez le bord droit pour ajuster la largeur</li>
|
||||
<li><strong>Masquage</strong> : Cliquez sur l'icône sidebar dans le header</li>
|
||||
</ul>
|
||||
|
||||
<h3>Zone de contenu</h3>
|
||||
<p>La zone centrale affiche :</p>
|
||||
<ul>
|
||||
<li><strong>Breadcrumb</strong> : Chemin du fichier (cliquable pour repositionner la sidebar)</li>
|
||||
<li><strong>Titre et tags</strong> : Métadonnées du fichier</li>
|
||||
<li><strong>Boutons d'action</strong> : Copier, Source, Télécharger, Éditer, Ouvrir dans nouvelle fenêtre</li>
|
||||
<li><strong>Contenu rendu</strong> : Markdown avec wikilinks et images</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section">
|
||||
<h2>🧭 Comprendre l’interface</h2>
|
||||
<div class="help-feature-list">
|
||||
<div class="help-feature-item">
|
||||
<div class="help-feature-emoji">🧱</div>
|
||||
<div>
|
||||
<h3>En-tête</h3>
|
||||
<p>Il regroupe la recherche globale, le bouton menu des options et l’accès rapide à l’identité de l’application.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-feature-item">
|
||||
<div class="help-feature-emoji">🌲</div>
|
||||
<div>
|
||||
<h3>Sidebar</h3>
|
||||
<p>La barre latérale affiche les vaults, les dossiers, les fichiers et les tags. Elle peut être redimensionnée sur desktop.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-feature-item">
|
||||
<div class="help-feature-emoji">📄</div>
|
||||
<div>
|
||||
<h3>Zone centrale</h3>
|
||||
<p>Elle sert à lire la note, afficher son chemin, voir ses tags et déclencher les actions comme copier, source, télécharger ou éditer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="help-section" id="help-navigation">
|
||||
<h2>🗺️ Navigation</h2>
|
||||
|
||||
<h3>Arborescence des vaults</h3>
|
||||
<p>Cliquez sur un vault pour l'ouvrir et voir son contenu. Les dossiers affichent un chevron et un badge avec le nombre d'éléments.</p>
|
||||
<ul>
|
||||
<li><strong>Développer/Réduire</strong> : Cliquez sur un dossier</li>
|
||||
<li><strong>Ouvrir un fichier</strong> : Cliquez sur le nom du fichier</li>
|
||||
<li><strong>Icônes</strong> : Chaque type de fichier a son icône (markdown, code, etc.)</li>
|
||||
</ul>
|
||||
|
||||
<h3>Filtrage de la sidebar</h3>
|
||||
<p>Utilisez la barre de filtrage en haut de la sidebar pour rechercher rapidement :</p>
|
||||
<ul>
|
||||
<li><strong>Recherche instantanée</strong> : Tapez pour filtrer fichiers et dossiers</li>
|
||||
<li><strong>Case-sensitive</strong> : Bouton "Aa" pour respecter la casse</li>
|
||||
<li><strong>Effacer</strong> : Bouton "×" pour réinitialiser le filtre</li>
|
||||
<li><strong>Résultats groupés</strong> : Affichage par vault avec chemins complets</li>
|
||||
</ul>
|
||||
|
||||
<h3>Breadcrumb et repositionnement</h3>
|
||||
<p>Le chemin affiché au-dessus du contenu est interactif :</p>
|
||||
<ul>
|
||||
<li><strong>Cliquez sur le vault</strong> : Focus sur le vault dans la sidebar</li>
|
||||
<li><strong>Cliquez sur un segment</strong> : Navigation vers ce dossier</li>
|
||||
<li><strong>Auto-scroll</strong> : La sidebar se positionne automatiquement</li>
|
||||
</ul>
|
||||
|
||||
<h3>Sélection de vault</h3>
|
||||
<p>Changez de contexte pour filtrer l'affichage :</p>
|
||||
<ul>
|
||||
<li><strong>Menu header</strong> : Dropdown "Vault" dans le menu Options</li>
|
||||
<li><strong>Sidebar dropdown</strong> : Sélection rapide en haut de l'onglet Vaults</li>
|
||||
<li><strong>Tous les vaults</strong> : Vue globale de tous vos contenus</li>
|
||||
<li><strong>Vault spécifique</strong> : Focus sur un seul vault</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section">
|
||||
<h2>🚀 Parcours recommandé</h2>
|
||||
<div class="help-steps">
|
||||
<div class="help-step">
|
||||
<div class="help-step-number">1</div>
|
||||
<div>
|
||||
<h3>Choisissez un contexte</h3>
|
||||
<p>Sélectionnez un vault dans le menu du haut ou dans la sidebar pour réduire le bruit et cibler votre navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-step">
|
||||
<div class="help-step-number">2</div>
|
||||
<div>
|
||||
<h3>Explorez l’arborescence</h3>
|
||||
<p>Dépliez les dossiers, ouvrez une note et utilisez le chemin en haut de page pour revenir visuellement au bon endroit dans la sidebar.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-step">
|
||||
<div class="help-step-number">3</div>
|
||||
<div>
|
||||
<h3>Affinez avec les tags</h3>
|
||||
<p>Ajoutez un ou plusieurs tags pour filtrer vos contenus de façon plus fine et faire émerger les notes pertinentes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="help-section" id="help-recherche">
|
||||
<h2>🔍 Recherche</h2>
|
||||
|
||||
<h3>Recherche simple</h3>
|
||||
<p>Tapez dans la barre de recherche en haut pour lancer une recherche fulltext :</p>
|
||||
<ul>
|
||||
<li><strong>Recherche dans tout</strong> : Titre, contenu, tags, chemins</li>
|
||||
<li><strong>Scoring intelligent</strong> : Résultats classés par pertinence TF-IDF</li>
|
||||
<li><strong>Snippets surlignés</strong> : Extraits avec termes en surbrillance</li>
|
||||
<li><strong>Pagination</strong> : Navigation par pages de 50 résultats</li>
|
||||
</ul>
|
||||
|
||||
<h3>Opérateurs avancés</h3>
|
||||
<p>Utilisez des opérateurs pour affiner votre recherche :</p>
|
||||
<ul>
|
||||
<li><code>tag:docker</code> ou <code>#docker</code> : Filtrer par tag</li>
|
||||
<li><code>vault:IT</code> : Rechercher dans un vault spécifique</li>
|
||||
<li><code>title:kubernetes</code> : Chercher dans les titres uniquement</li>
|
||||
<li><code>path:recettes/soupes</code> : Filtrer par chemin</li>
|
||||
<li><code>"phrase exacte"</code> : Recherche de phrase entre guillemets</li>
|
||||
</ul>
|
||||
<p><strong>Exemple</strong> : <code>tag:linux vault:IT serveur web</code> recherche "serveur web" dans le vault IT avec le tag linux.</p>
|
||||
|
||||
<h3>Autocomplétion</h3>
|
||||
<p>L'autocomplétion vous aide à trouver rapidement :</p>
|
||||
<ul>
|
||||
<li><strong>Historique</strong> : Les 50 dernières recherches (localStorage)</li>
|
||||
<li><strong>Fichiers</strong> : Suggestions de titres de fichiers</li>
|
||||
<li><strong>Tags</strong> : Suggestions de tags avec compteurs</li>
|
||||
<li><strong>Navigation clavier</strong> : ↑/↓ pour naviguer, Enter pour sélectionner</li>
|
||||
</ul>
|
||||
|
||||
<h3>Chips de filtres actifs</h3>
|
||||
<p>Les opérateurs utilisés s'affichent sous forme de chips colorés :</p>
|
||||
<ul>
|
||||
<li><strong>Visualisation</strong> : Voir d'un coup d'œil les filtres actifs</li>
|
||||
<li><strong>Suppression</strong> : Cliquez sur "×" pour retirer un filtre</li>
|
||||
<li><strong>Couleurs</strong> : Chaque type d'opérateur a sa couleur</li>
|
||||
</ul>
|
||||
|
||||
<h3>Facettes et tri</h3>
|
||||
<p>Les résultats incluent des facettes pour affiner :</p>
|
||||
<ul>
|
||||
<li><strong>Facettes tags</strong> : Compteurs par tag dans les résultats</li>
|
||||
<li><strong>Facettes vaults</strong> : Compteurs par vault</li>
|
||||
<li><strong>Tri par pertinence</strong> : Score TF-IDF (défaut)</li>
|
||||
<li><strong>Tri par date</strong> : Dernière modification</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section">
|
||||
<h2>✨ Actions utiles au quotidien</h2>
|
||||
<div class="help-checklist">
|
||||
<div class="help-check-item"><span>✅</span><p>Basculer entre thème <strong>clair</strong> et <strong>sombre</strong> depuis le menu Options.</p></div>
|
||||
<div class="help-check-item"><span>✅</span><p>Utiliser <code>Tous les vaults</code> pour une vue globale ou cibler un seul vault pour une navigation plus nette.</p></div>
|
||||
<div class="help-check-item"><span>✅</span><p>Cliquer sur un tag dans la note ou dans la sidebar pour lancer un filtrage rapide.</p></div>
|
||||
<div class="help-check-item"><span>✅</span><p>Ouvrir une note puis utiliser <strong>Copier</strong>, <strong>Source</strong>, <strong>Télécharger</strong> ou <strong>Éditer</strong>.</p></div>
|
||||
</div>
|
||||
<section class="help-section" id="help-tags">
|
||||
<h2>🏷️ Tags</h2>
|
||||
|
||||
<h3>Tag cloud</h3>
|
||||
<p>L'onglet Tags de la sidebar affiche un nuage de tags :</p>
|
||||
<ul>
|
||||
<li><strong>Tous les tags</strong> : Extraits des frontmatters YAML et inline (#tag)</li>
|
||||
<li><strong>Cliquable</strong> : Cliquez pour filtrer les résultats</li>
|
||||
<li><strong>Filtrage</strong> : Utilisez la barre de filtrage pour chercher un tag</li>
|
||||
<li><strong>Contexte vault</strong> : Les tags s'adaptent au vault sélectionné</li>
|
||||
</ul>
|
||||
|
||||
<h3>Tags inline vs frontmatter</h3>
|
||||
<p>ObsiGate supporte deux types de tags :</p>
|
||||
<ul>
|
||||
<li><strong>Frontmatter YAML</strong> : <code>tags: [docker, linux]</code> ou <code>tags: docker, linux</code></li>
|
||||
<li><strong>Inline</strong> : <code>#docker</code> dans le contenu markdown</li>
|
||||
<li><strong>Fusion automatique</strong> : Les deux types sont combinés</li>
|
||||
</ul>
|
||||
|
||||
<h3>Filtrage de tags template</h3>
|
||||
<p>Dans les Configurations, vous pouvez masquer les tags de template :</p>
|
||||
<ul>
|
||||
<li><strong>Patterns wildcards</strong> : Ex: <code>#<% ... %></code> ou <code>#{{ ... }}</code></li>
|
||||
<li><strong>Regex générée</strong> : Aperçu de la regex appliquée</li>
|
||||
<li><strong>Ajout/Suppression</strong> : Gérez vos patterns de filtrage</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section help-tip-panel">
|
||||
<h2>💡 Astuces</h2>
|
||||
<div class="help-tip-grid">
|
||||
<div class="help-tip-card">
|
||||
<h3>Navigation visuelle</h3>
|
||||
<p>Quand vous cliquez sur le chemin d’une note, la sidebar se repositionne automatiquement pour montrer l’élément correspondant.</p>
|
||||
</div>
|
||||
<div class="help-tip-card">
|
||||
<h3>Gestion de l’espace</h3>
|
||||
<p>Réduisez <code>VAULTS</code> ou <code>TAGS</code> pour donner plus d’espace à la section qui vous intéresse le plus.</p>
|
||||
</div>
|
||||
<div class="help-tip-card">
|
||||
<h3>Confort de lecture</h3>
|
||||
<p>Adaptez la largeur de la sidebar et la hauteur de la zone tags sur desktop pour un affichage plus confortable.</p>
|
||||
</div>
|
||||
</div>
|
||||
<section class="help-section" id="help-fichiers">
|
||||
<h2>📄 Fichiers</h2>
|
||||
|
||||
<h3>Visualisation</h3>
|
||||
<p>Les fichiers markdown sont rendus avec :</p>
|
||||
<ul>
|
||||
<li><strong>Wikilinks cliquables</strong> : <code>[[lien]]</code> et <code>[[lien|texte]]</code></li>
|
||||
<li><strong>Images Obsidian</strong> : Support de <code>![[image.png]]</code></li>
|
||||
<li><strong>Syntax highlighting</strong> : Coloration des blocs de code</li>
|
||||
<li><strong>Tables, listes, quotes</strong> : Rendu complet du markdown</li>
|
||||
</ul>
|
||||
|
||||
<h3>Actions sur fichiers</h3>
|
||||
<p>Boutons disponibles au-dessus du contenu :</p>
|
||||
<ul>
|
||||
<li><strong>Copier</strong> : Copie le contenu source dans le presse-papiers</li>
|
||||
<li><strong>Source</strong> : Affiche/masque le markdown brut</li>
|
||||
<li><strong>Télécharger</strong> : Télécharge le fichier</li>
|
||||
<li><strong>Éditer</strong> : Ouvre l'éditeur CodeMirror</li>
|
||||
<li><strong>Ouvrir dans nouvelle fenêtre</strong> : Ouvre le fichier dans un nouvel onglet</li>
|
||||
</ul>
|
||||
|
||||
<h3>Édition avec CodeMirror 6</h3>
|
||||
<p>L'éditeur intégré offre :</p>
|
||||
<ul>
|
||||
<li><strong>Coloration syntaxique</strong> : Support de nombreux langages</li>
|
||||
<li><strong>Numéros de ligne</strong> : Navigation facile</li>
|
||||
<li><strong>Autocomplétion</strong> : Suggestions contextuelles</li>
|
||||
<li><strong>Recherche</strong> : Ctrl+F pour chercher dans le fichier</li>
|
||||
<li><strong>Sauvegarde</strong> : Bouton ✓ pour enregistrer</li>
|
||||
<li><strong>Suppression</strong> : Bouton corbeille pour supprimer</li>
|
||||
</ul>
|
||||
|
||||
<h3>Types de fichiers supportés</h3>
|
||||
<p>ObsiGate indexe et affiche :</p>
|
||||
<ul>
|
||||
<li><strong>Markdown</strong> : .md (rendu complet)</li>
|
||||
<li><strong>Code</strong> : .py, .js, .ts, .jsx, .tsx, .java, .c, .cpp, .rs, .go, etc.</li>
|
||||
<li><strong>Config</strong> : .json, .yaml, .yml, .toml, .xml, .ini, .env</li>
|
||||
<li><strong>Scripts</strong> : .sh, .bash, .ps1, .bat</li>
|
||||
<li><strong>Web</strong> : .html, .css, .scss</li>
|
||||
<li><strong>Autres</strong> : .txt, .log, .sql, .csv</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section" id="help-personnalisation">
|
||||
<h2>🎨 Personnalisation</h2>
|
||||
|
||||
<h3>Thème clair/sombre</h3>
|
||||
<p>Basculez entre les thèmes :</p>
|
||||
<ul>
|
||||
<li><strong>Menu Options</strong> : Cliquez sur "Thème" dans le menu</li>
|
||||
<li><strong>Raccourci</strong> : <code>Ctrl+T</code></li>
|
||||
<li><strong>Persistance</strong> : Votre choix est sauvegardé en localStorage</li>
|
||||
<li><strong>Highlight.js</strong> : Les blocs de code s'adaptent au thème</li>
|
||||
</ul>
|
||||
|
||||
<h3>Redimensionnement de la sidebar</h3>
|
||||
<p>Sur desktop, ajustez la largeur de la sidebar :</p>
|
||||
<ul>
|
||||
<li><strong>Handle de redimensionnement</strong> : Bordure droite de la sidebar</li>
|
||||
<li><strong>Glisser-déposer</strong> : Cliquez et glissez pour ajuster</li>
|
||||
<li><strong>Limites</strong> : Min 200px, Max 500px</li>
|
||||
<li><strong>Persistance</strong> : La largeur est sauvegardée</li>
|
||||
</ul>
|
||||
|
||||
<h3>Configuration avancée</h3>
|
||||
<p>Le modal Configurations (menu Options) permet de :</p>
|
||||
<ul>
|
||||
<li><strong>Paramètres de recherche</strong> : Délai debounce, résultats par page, timeout</li>
|
||||
<li><strong>Paramètres backend</strong> : Workers, boosts TF-IDF, expansions préfixe</li>
|
||||
<li><strong>Filtrage de tags</strong> : Patterns pour masquer les tags template</li>
|
||||
<li><strong>Diagnostics</strong> : Stats index, mémoire, moteur de recherche</li>
|
||||
<li><strong>Réindexation</strong> : Forcer un rescan des vaults</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section" id="help-raccourcis">
|
||||
<h2>⌨️ Raccourcis clavier</h2>
|
||||
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li><code>Ctrl+K</code> ou <code>Cmd+K</code> : Focaliser la barre de recherche</li>
|
||||
<li><code>/</code> : Focaliser la recherche (hors champ texte)</li>
|
||||
<li><code>Escape</code> : Fermer les suggestions / quitter la recherche</li>
|
||||
</ul>
|
||||
|
||||
<h3>Recherche et autocomplétion</h3>
|
||||
<ul>
|
||||
<li><code>↑</code> / <code>↓</code> : Naviguer dans les suggestions</li>
|
||||
<li><code>Enter</code> : Sélectionner la suggestion active ou lancer la recherche</li>
|
||||
<li><code>Escape</code> : Fermer le dropdown de suggestions</li>
|
||||
</ul>
|
||||
|
||||
<h3>Interface</h3>
|
||||
<ul>
|
||||
<li><code>Ctrl+T</code> : Basculer le thème clair/sombre</li>
|
||||
</ul>
|
||||
|
||||
<h3>Éditeur CodeMirror</h3>
|
||||
<ul>
|
||||
<li><code>Ctrl+F</code> : Rechercher dans le fichier</li>
|
||||
<li><code>Ctrl+Z</code> : Annuler</li>
|
||||
<li><code>Ctrl+Y</code> : Refaire</li>
|
||||
<li><code>Ctrl+S</code> : Sauvegarder (si configuré)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="help-section" id="help-astuces">
|
||||
<h2>💡 Astuces et bonnes pratiques</h2>
|
||||
|
||||
<h3>Workflow recommandé</h3>
|
||||
<ol>
|
||||
<li><strong>Sélectionnez un contexte</strong> : Choisissez un vault pour réduire le bruit</li>
|
||||
<li><strong>Explorez l'arborescence</strong> : Naviguez dans les dossiers</li>
|
||||
<li><strong>Utilisez les tags</strong> : Filtrez par tags pour affiner</li>
|
||||
<li><strong>Recherchez intelligemment</strong> : Combinez opérateurs et texte libre</li>
|
||||
<li><strong>Profitez de l'historique</strong> : Réutilisez vos recherches fréquentes</li>
|
||||
</ol>
|
||||
|
||||
<h3>Optimisations</h3>
|
||||
<ul>
|
||||
<li><strong>Masquez la sidebar</strong> : Plus d'espace pour le contenu</li>
|
||||
<li><strong>Utilisez le filtrage sidebar</strong> : Plus rapide que la recherche globale pour trouver un fichier</li>
|
||||
<li><strong>Favorisez les opérateurs</strong> : <code>tag:</code> et <code>vault:</code> accélèrent la recherche</li>
|
||||
<li><strong>Breadcrumb cliquable</strong> : Repositionnez rapidement la sidebar</li>
|
||||
</ul>
|
||||
|
||||
<h3>Trucs et astuces</h3>
|
||||
<ul>
|
||||
<li><strong>Navigation visuelle</strong> : Le breadcrumb repositionne automatiquement la sidebar</li>
|
||||
<li><strong>Gestion de l'espace</strong> : Réduisez les sections Vaults/Tags selon vos besoins</li>
|
||||
<li><strong>Confort de lecture</strong> : Ajustez la largeur de la sidebar</li>
|
||||
<li><strong>Mobile-friendly</strong> : Utilisez le bouton hamburger sur mobile</li>
|
||||
<li><strong>Wikilinks</strong> : Naviguez entre notes comme dans Obsidian</li>
|
||||
<li><strong>Images</strong> : Support complet des syntaxes Obsidian</li>
|
||||
</ul>
|
||||
|
||||
<h3>Cas d'usage avancés</h3>
|
||||
<ul>
|
||||
<li><strong>Recherche multi-critères</strong> : <code>tag:docker tag:linux vault:IT nginx</code></li>
|
||||
<li><strong>Exploration par tags</strong> : Cliquez sur un tag dans une note pour voir toutes les notes similaires</li>
|
||||
<li><strong>Édition rapide</strong> : Ouvrez l'éditeur, modifiez, sauvegardez</li>
|
||||
<li><strong>Export</strong> : Téléchargez des fichiers pour backup ou partage</li>
|
||||
<li><strong>Multi-fenêtres</strong> : Ouvrez plusieurs notes dans des onglets séparés</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="help-footer">
|
||||
<p><strong>ObsiGate v1.2.0</strong> — Porte d'entrée web pour vos vaults Obsidian</p>
|
||||
<p>Pour plus d'informations, consultez le <a href="https://git.dracodev.net/Projets/ObsiGate" target="_blank">dépôt du projet</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user