Deutsch
Über dieses Handbuch

Dieses Handbuch gehört zur Vorlage Example für QuartzControl. Es erklärt die Vorlage und führt zugleich alles vor, was sie kann.

Der Text hier kommt aus einer Markdown-Datei, nicht aus der Konfiguration.

3.2 – Canvas

Ein Canvas ist eine freie Fläche: Man legt Karten darauf, verbindet sie mit Pfeilen und ordnet sie räumlich statt in einer Reihenfolge. Für Zusammenhänge, die keine Gliederung sind.

Das Beispiel in diesem Vault: Aufbau der Vorlage — die sieben Kapitel dieses Handbuchs und wie sie zusammenhängen.

Wie das Format aufgebaut ist: Wie es funktioniert.

In dieser Vorlage

Eine Canvas-Seite braucht die volle Breite — eine Fläche in der schmalen Textspalte zeigt nichts. Das Plugin bringt dafür zwar ein eigenes Seitenraster mit, diese Vorlage überschreibt es aber: In der Konfiguration steht für den Seitentyp canvas das mitgelieferte Quartz-Raster full-width. Gemessen an der gebauten Seite ist das Ergebnis Kopfbereich, Fläche und Fußzeile — keine Seitenleisten, keine Brotkrumen.

Links in einem Dateiknoten können ins Leere führen

Ein Dateiknoten zeigt eine Notiz mit ihrem ganzen Inhalt — und die Links darin bekommen den Ordner der eingebetteten Notiz noch einmal vorangestellt. Ob das Ziel danach noch stimmt, hängt davon ab, wie tief die Notiz liegt. Gemessen am 06.09.2026: Mit den sieben Kapitelseiten als Knoten (eine Ordnerebene tief) waren 112 Links je Sprache kaputt — aus dem Verweis auf das Glossar wurde ../../1-einstieg/../../7-nachschlagen/01-glossar, ein Pfad, der aus der Website herausführt. Mit den jetzigen sieben Knoten, alle zwei oder drei Ebenen tief, ist kein Link kaputt außer dem auf den Entwurf, der es absichtlich ist. Deshalb liegen hier keine Kapitelseiten. Ein Link in einem Textknoten wird gar nicht erst aufgelöst — [[…]] bleibt dort als Text stehen. Und das Label eines Dateiknotens ist der Dateiname, nicht der Titel.

Das ist ein Fehler im Plugin canvas-page, nicht in dieser Vorlage — die Links stimmen auf ihren eigenen Seiten. Wer sich darauf verlassen will, klickt den Knotentitel an und liest die Notiz dort.

Zoomen und Verschieben

Auf der gebauten Seite lässt sich das Canvas mit dem Mausrad zoomen und mit gedrückter Maustaste verschieben — es ist keine Momentaufnahme, sondern die Fläche selbst.

Die Seiten

Welche Variablen hier greifen

Diese 14 Variablen liest der Abschnitt page-canvas in pages.scss. Ändern lassen sie sich in QuartzControl unter Stile → Variablen — ohne eine Zeile CSS.

VariableWertgilt außerdem für
--bodyFont"Noto Sans", system-ui, "Segoe UI", Robot…3 weitere Komponenten
--dark#17171A · dunkel #FCFCFA13 weitere Komponenten
--darkgray#333333 · dunkel #DDDDDD18 weitere Komponenten
--headerFont"Noto Sans", system-ui, "Segoe UI", Robot…15 weitere Komponenten
--light#FCFCFA · dunkel #16171A14 weitere Komponenten
--secondary#1463A3 · dunkel #699DC319 weitere Komponenten
--tpl-motion150ms ease13 weitere Komponenten
--tpl-radius-md8px17 weitere Komponenten
--tpl-rulevar(--lightgray) = #DDDDDD19 weitere Komponenten
--tpl-rule-controlcolor-mix(in srgb, var(--gray) 70%, var(-…11 weitere Komponenten
--tpl-rule-width1px25 weitere Komponenten
--tpl-surface-tintvar(--highlight) = rgba(42, 78, 108, 0.10)14 weitere Komponenten
--tpl-target44px12 weitere Komponenten
--tpl-text-sm0.875rem20 weitere Komponenten

Diese Tabelle ist erzeugt: Sie wird aus den Stylesheets gelesen, nicht von Hand gepflegt.

1 Datei in diesem Ordner.

Weiterlesen

Diese Seite gehört zu Example — der Beispielvorlage für QuartzControl. Ein Überblick über alle Bereiche steht auf der Startseite.

Auf einem schmalen Bildschirm ist die Navigation oben eingeklappt.