Aide contextuelle

"L'aide contextuelle est un type d'aide en ligne qui est obtenu à partir d'un point spécifique de l'état du logiciel, fournissant de l'aide pour la situation qui est associée à cet état. L'aide contextuelle, contrairement à l'aide en ligne générale ou aux manuels en ligne, n'a pas besoin d'être accessible à la lecture dans son ensemble. Chaque rubrique est censée décrire de manière exhaustive un état, une situation ou une fonctionnalité du logiciel." - Wikipedia

En règle générale, l'aide contextuelle est mise en œuvre au moyen d'une icône d'aide sur laquelle l'utilisateur peut cliquer et qui l'amène à la partie de la documentation correspondant à la partie du logiciel qu'il utilise. 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 titres. Cependant, si vous modifiez le titre, le lien changera. C'est pourquoi DocStatic fournit l'élément Aide contextuelle. Il vous permet d'ajouter une balise d'ancrage n'importe où dans un sujet. À condition qu'une balise soit définie pour le sujet dans les métadonnées, le lien ne sera pas rompu.

Sélectionnez Context Helpe dans la liste Embed.
Saisissez un identifiant unique.

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

Exemple

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

Développeurs

Pour un exemple de la façon d'inclure des liens d'aide contextuelle dans votre code, examinez le composant React HelpButton dans le code source de ce site. DocStatic n'ayant pas d'accès direct au code du CMS, il implémente le bouton en l'appliquant en tant qu'élément d'interface utilisateur sur un champ inutilisé dans une collection du CMS. Le composant HelpButton attache le bouton à l'élément nav de la page et le lie à l'URL passée 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