Zum Hauptinhalt springen

Kontextsensitive Hilfe

„Kontextsensitive Hilfe ist eine Art von Online-Hilfe , die an einer bestimmten Stelle im Status der Software abgerufen wird und Hilfe für die mit diesem Status verbundene Situation bietet. Im Gegensatz zu allgemeinen Online-Hilfen oder Online-Handbüchern muss kontextsensitive Hilfe nicht als Ganzes gelesen werden können. Jedes Thema soll einen Zustand, eine Situation oder eine Funktion der Software ausführlich beschreiben.“ – Wikipedia

In der Regel wird kontextsensitive Hilfe durch ein Hilfe-Symbol implementiert, auf das Benutzer klicken können, um zum entsprechenden Teil der Dokumentation für den Teil der Software zu gelangen, den sie gerade verwenden. Dazu muss eine Karte mit Kontext-URLs erstellt werden.

Der statische Website-Generator erstellt automatisch Links zu Überschriften. Wenn Sie jedoch die Überschrift ändern, ändert sich auch der Link. Aus diesem Grund bietet DocStatic das Element „Kontextbezogene Hilfe“ an. Damit können Sie an beliebiger Stelle innerhalb eines Themas einen Anker-Tag hinzufügen. Sofern für das Thema in den Metadaten ein Slug definiert ist, bleibt der Link bestehen.

  1. Wählen Sie Kontextbezogene Hilfe aus der Liste „Einbetten“ aus.
  2. Geben Sie eine eindeutige ID ein.

Der Link hat das folgende Format: <URL>/docs/<Slug>#<ID>.

Beispiel​

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

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

Entwickler​

Ein Beispiel dafür, wie Sie Kontext-Hilfe-Links in Ihren Code einfügen können, finden Sie in der HelpButton React-Komponente im Quellcode dieser Website. Da DocStatic keinen direkten Zugriff auf den CMS-Code hat, implementiert es die Schaltfläche, indem es sie als UI-Element auf ein ungenutztes Feld in einer CMS-Sammlung anwendet. Die HelpButton-Komponente fügt die Schaltfläche zum Nav-Element auf der Seite hinzu und verlinkt sie mit der in der Vorlage übergebenen URL:

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} />,
      },
    },