Aide contextuelle

« L'aide contextuelle est un type d' aide en ligne qui s'affiche à partir d'un point spécifique dans l'état du logiciel, fournissant une aide pour la situation associée à cet état. Contrairement à l'aide en ligne générale ou aux manuels en ligne, l'aide contextuelle n'a pas besoin d'être accessible pour être lue dans son intégralité. Chaque rubrique est censée décrire de manière exhaustive un état, une situation ou une fonctionnalité du logiciel. » — Wikipedia

En général, l'aide contextuelle est mise en œuvre à l'aide d'une icône d'aide sur laquelle les utilisateurs peuvent cliquer pour accéder à la partie appropriée de la documentation correspondant à la partie du logiciel qu'ils utilisent. Cela implique la création d'une carte des URL contextuelles.

Le générateur de site statique génère automatiquement des liens vers les en-têtes. Cependant, si vous modifiez l'en-tête, le lien changera. C'est pourquoi DocStatic fournit l'élément Context Help. Il vous permet d'ajouter une balise d'ancrage n'importe où dans un sujet. À condition qu'un slug soit défini pour le sujet dans les métadonnées, le lien ne sera pas rompu.

Sélectionnez Context Help dans la liste Embed.
Entrez un identifiant unique.

Le lien se présentera sous la forme suivante : <URL>/docs/<slug>#<id>.

Exemple

https://docstatic.com/docs/context-help#help-example

(jsx:a id="help-example")(id:help-example)(/jsx:a)

Développeurs

Pour obtenir un exemple d'intégration de liens d'aide contextuelle dans votre code, examinez le composant HelpButton React dans le code source de ce site. Comme DocStatic n'a pas d'accès direct au code CMS, il implémente le bouton en l'appliquant comme élément d'interface utilisateur sur un champ inutilisé dans une collection CMS. Le composant HelpButton attache le bouton à l'élément de navigation de la page et le lie à l'URL transmise dans le modèle :

const ExampleCollection = {
  name: "example",
  label: "Example",
  path: "docs/example",
  format: "mdx",
  fields: [
    {
      type: "boolean",
      name: "help",
      label: "Help",
      required: false,
      ui: {
        component: (props) => <HelpButton url="https://example.com/" {...props} />,
      },
    },

Exemple​

Développeurs​

Exemple

Développeurs