Ü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.
- Einstieg — für den Anfang
- Formatierung — jedes Obsidian-Element
- Anpassen — Farben, Schriften, Maße
- Nachschlagen — Glossar und Grenzen
Der Text hier kommt aus einer Markdown-Datei, nicht aus der Konfiguration.
Graphansicht
All pages
-1.1 – What this template is, A design for Quartz sites that you import into QuartzControl — and the three decisions it is made of.
-1.2 – The tools, Obsidian, Quartz, QuartzControl and git — four programs, each with one job, and how they fit together.
-1.3 – From note to website, The way a change travels — write, look, build, publish — and what happens where.
-1.4 – How a page is built, The parts of a page with their names — and a deliberately long, deeply structured page on which all of them can be seen.
-1 – Getting started, Who this handbook is for, how it is written, and what you need to know beforehand — which is almost nothing.
-Emphasis, Bold, italic, struck through, highlighted — and which plugin delivers which of them.
-2.1 – Text, Emphasis, special characters and line breaks.
-Line breaks, Why a break in the source is not one on the page here — and how to force one.
-Special characters, Quotation marks, dashes and ellipses — set the way typography wants them.
-Headings, Six levels — and why the last two stop shrinking here.
-Horizontal rules, The dash between sections.
-2.2 – Structure, Headings, paragraphs, horizontal rules.
-Paragraphs, How a paragraph comes about and how wide it gets.
-2.3 – Lists, Unordered, ordered, tasks, nested.
-Nesting and quotes, How deep you can go, and how quotes nest.
-Ordered lists, Numbered lists and what the numbers really do.
-Task lists, Boxes to tick — and why what is done is marked twice here.
-Unordered lists, Bullet lists and their nesting.
-Aliases, Making a page reachable under several names.
-Embedding a page, Showing another page in the middle of this one.
-External links, Links to the outside — and how you recognise them.
-2.4 – Links, Wikilinks, jump targets, external links, embeds, aliases.
-Jump targets, Linking to a heading or to a single block.
-Wikilinks, The Obsidian notation for internal links.
-All callout types, Thirteen types with their aliases — and why their colours are set anew here.
-Callouts — the basic form, How a callout is built, with and without a title of its own.
-Foldable callouts, A callout that can be folded away.
-2.5 – Callouts, Thirteen types, foldable and nested.
-Nested callouts, A callout inside a callout — and where the limit is.
-Code blocks, Code over several lines, with a language and a copy button.
-Highlighting lines, Emphasising single lines in a block.
-2.6 – Code, Inline, blocks, languages, titles, highlighting.
-Code in a sentence, A command in the middle of a sentence.
-Languages, Which highlighting for what — with examples.
-Alignment, Colons in the separator row control the column alignment.
-Tables — the basic form, Rows, columns and the header.
-Contents of a cell, What may stand in a cell and what has to be escaped.
-2.7 – Tables, The basic form, alignment, contents, wide tables.
-Wide tables, What happens when a table does not fit the column.
-Formula blocks, Displayed formulas, over several lines and as a matrix.
-2.8 – Mathematics, LaTeX in the text and as a block.
-Formulas in a sentence, LaTeX in the middle of a sentence.
-Flowcharts, Mermaid — processes and decisions.
-2.9 – Diagrams, Fourteen kinds of Mermaid diagram.
-Number diagrams, Pies, curves, flows and quadrant charts.
-Process diagrams, States, user journeys and branches.
-Sequence diagrams, Who says what to whom, and in which order.
-Structure diagrams, Classes, entities and mind maps.
-Time diagrams, Gantt plans and timelines.
-Footnotes — the basic form, A marker in the text, the text at the foot of the page.
-Comments, Text that only exists in the source.
-2.10 – Footnotes, Footnotes, variants and comments.
-Named and repeated footnotes, Names instead of numbers, several references, footnotes inline.
-Data types, Text, number, boolean, list — and how they are displayed.
-Displaying the properties, Where the table sits, what it shows and how to change that.
-Frontmatter, The fields at the very top of the file and what Quartz does with them.
-2.11 – Properties, Frontmatter, data types, display.
-Documents, Embedding PDFs, linking to them and jumping to a particular page.
-Images, Five formats, two notations, sizes — and which format is good for what.
-2.12 – Media, Images, documents, video and audio.
-Images per colour scheme, Two images, of which only ever one is visible.
-Video and audio, Embedding sound and moving images — with what Quartz makes of them on its own.
-Arrows, tags and emoji, Small things Obsidian converts in passing.
-Escaping characters, When Markdown reads something as markup that is meant to be text.
-HTML in Markdown, What is let through and where the limit is.
-2.13 – Odds and ends, HTML, escapes, arrows, tags, emoji.
-2 – Formatting, Every element Obsidian writes and Quartz renders — source and result side by side, 62 short pages in thirteen sections.
-How a base is built, Filters, formulas and views — the YAML format explained.
-3.1 – Bases, Queries over the vault, as a table, cards or a list.
-How a canvas is built, JSON with nodes and edges.
-3.2 – Canvas, An infinite surface with cards and connections.
-Structure of the template
-How an Excalidraw file is built, Markdown outside, drawing data inside — and the second, simpler way.
-3.3 – Excalidraw, Diagrams that look hand-drawn and stay interactive on the site.
-Structure of the editorial frame
-3 – Obsidian formats, Three file types that are not Markdown pages — Bases, Canvas and Excalidraw.
-4.1 – Title, description, date, The three statements every page should have — and where the date comes from when none is given.
-4.2 – Draft and unlisted, Two ways of holding a page back — one does not build it at all, the other only hides it.
-4.3 – Aliases, Making a page reachable under several paths — the plugin Alias redirects creates the redirects.
-4.4 – Custom fields, Frontmatter fields Quartz does not know — and how the property table shows them.
-4.5 – Layout boxes per page, Hiding, renaming or refilling a layout box on a single page — in the frontmatter, not in the configuration.
-4.6 – Cover image, The field cover — one image per page for the gallery and the cards of a base.
-4.7 – Translation, The fields that connect a page with its translation — translationKey, aliases, lang — and when you need them.
-4 – Controlling a page, What a page's frontmatter does — title, date, draft, alias, custom fields, layout boxes, cover image, translation.
-Colour scheme switch, The button between light and dark.
-The explorer, The folder tree — switched off in this template and still designed down to the fourth level.
-Footer, What stands under every page — and which two parts it is made of.
-The header, Word mark, page title and the four controls in one row.
-5.1 – Navigation, Navigation, explorer, search, colour scheme, reader mode, header, footer.
-The language switcher, Three forms, one of them visible — and where it sits.
-The navigation, The accordion on the left, the drawer on a smartphone, “Previous” and “Next” below the text.
-Reader mode, Hiding the bars — and seeing that it is on.
-Search, The field in the bar and the overlay behind it.
-Breadcrumbs, The path from the home page to here.
-5.2 – Above the content, Breadcrumbs, title, date, properties, tags.
-The property table, The frontmatter table under the title.
-Tags, Markers under the title and in the body text.
-Title and date, The heading of the page and the line below it.
-Body text, The width of the text, the heading scale and the links inside it.
-Callout colours, Thirteen types, all of them set anew and measured.
-Code styling, Inline, blocks, the language label and the copy button.
-5.3 – In the content, Body text, callouts, code, tables and media.
-Tables and media, Two elements that want to blow up the column.
-Backlinks, What points at this page.
-The graph, The surroundings of a note as a network.
-5.4 – Beside the content, Table of contents, graph, backlinks, recently changed.
-Recently changed, The most recent notes as a box below the text.
-Table of contents, The outline on the right — every level, not just three.
-5.5 – Layout boxes, A plugin that puts arbitrary markup at any place in the layout.
-The instances, The same plugin, seven times, for something different each time.
-Error page, What appears at an address that does not exist.
-Folder and tag pages, The listings Quartz generates automatically.
-5.6 – Generated pages, Listings, preview, search results, error page.
-Link preview, What appears when hovering an internal link.
-Search results, The list in the search overlay.
-5 – The design, What Quartz does out of the box and what this template changes about it — component by component, with the table of the variables each of them reads.
-6.1 – Changing something, Three levels, cheapest first — and where your own rule belongs so that it wins.
-6.2 – Colours and contrast, Nine roles, two of them named the wrong way round — and 93 measured pairs.
-6.3 – Typefaces, Two families, self-hosted — and why the @font-face rules are replaced.
-6.4 – Variables, 66 variables the whole design is made of.
-6.5 – Page grids, Four page grids of our own instead of the three that ship with Quartz.
-6.6 – Accessibility, What this template does for it — and why it is usually only one line more.
-6.7 – Two languages, How the same site is made in German and English — from one vault and one build.
-Where the two languages stop, What stays monolingual in one build — measured, not assumed.
-How the two languages find each other, Three strategies, three proofs — and what the Obsidian plugin has to do with it.
-6.8 – The template package, What is inside a .qtpl file, what arrives in the project on import — and what deliberately does not travel.
-6 – Adapting, Where a colour, a typeface, a spacing, the page grid or the languages come from — and how to change them, mostly without code.
-7.1 – Glossary, Every term of this handbook in two or three sentences — alphabetical, with a link to the page that goes into it.
-7.2 – Abbreviations, The abbreviations that occur in this handbook.
-7.3 – Patterns, The decisions that run through every component — said once, instead of repeated on thirty pages.
-7.4 – Known limits, What does not work, why not, and what the template does instead — collected from all chapters, each with a link to the page that goes into it.
-7 – Reference, Glossary, abbreviations, the recurring patterns, the known limits — and a list of all pages.
-Example, The handbook of the Example template for QuartzControl — to read, to look things up, and to compare against your own site.
| Title | Section | Description |
|---|---|---|
| 1.1 – What this template is | 1 – Getting started | A design for Quartz sites that you import into QuartzControl — and the three decisions it is made of. |
| 1.2 – The tools | 1 – Getting started | Obsidian, Quartz, QuartzControl and git — four programs, each with one job, and how they fit together. |
| 1.3 – From note to website | 1 – Getting started | The way a change travels — write, look, build, publish — and what happens where. |
| 1.4 – How a page is built | 1 – Getting started | The parts of a page with their names — and a deliberately long, deeply structured page on which all of them can be seen. |
| 1 – Getting started | 1 – Getting started | Who this handbook is for, how it is written, and what you need to know beforehand — which is almost nothing. |
| Emphasis | 2 – Formatting | Bold, italic, struck through, highlighted — and which plugin delivers which of them. |
| 2.1 – Text | 2 – Formatting | Emphasis, special characters and line breaks. |
| Line breaks | 2 – Formatting | Why a break in the source is not one on the page here — and how to force one. |
| Special characters | 2 – Formatting | Quotation marks, dashes and ellipses — set the way typography wants them. |
| Headings | 2 – Formatting | Six levels — and why the last two stop shrinking here. |
| Horizontal rules | 2 – Formatting | The dash between sections. |
| 2.2 – Structure | 2 – Formatting | Headings, paragraphs, horizontal rules. |
| Paragraphs | 2 – Formatting | How a paragraph comes about and how wide it gets. |
| 2.3 – Lists | 2 – Formatting | Unordered, ordered, tasks, nested. |
| Nesting and quotes | 2 – Formatting | How deep you can go, and how quotes nest. |
| Ordered lists | 2 – Formatting | Numbered lists and what the numbers really do. |
| Task lists | 2 – Formatting | Boxes to tick — and why what is done is marked twice here. |
| Unordered lists | 2 – Formatting | Bullet lists and their nesting. |
| Aliases | 2 – Formatting | Making a page reachable under several names. |
| Embedding a page | 2 – Formatting | Showing another page in the middle of this one. |
| External links | 2 – Formatting | Links to the outside — and how you recognise them. |
| 2.4 – Links | 2 – Formatting | Wikilinks, jump targets, external links, embeds, aliases. |
| Jump targets | 2 – Formatting | Linking to a heading or to a single block. |
| Wikilinks | 2 – Formatting | The Obsidian notation for internal links. |
| All callout types | 2 – Formatting | Thirteen types with their aliases — and why their colours are set anew here. |
| Callouts — the basic form | 2 – Formatting | How a callout is built, with and without a title of its own. |
| Foldable callouts | 2 – Formatting | A callout that can be folded away. |
| 2.5 – Callouts | 2 – Formatting | Thirteen types, foldable and nested. |
| Nested callouts | 2 – Formatting | A callout inside a callout — and where the limit is. |
| Code blocks | 2 – Formatting | Code over several lines, with a language and a copy button. |
| Highlighting lines | 2 – Formatting | Emphasising single lines in a block. |
| 2.6 – Code | 2 – Formatting | Inline, blocks, languages, titles, highlighting. |
| Code in a sentence | 2 – Formatting | A command in the middle of a sentence. |
| Languages | 2 – Formatting | Which highlighting for what — with examples. |
| Alignment | 2 – Formatting | Colons in the separator row control the column alignment. |
| Tables — the basic form | 2 – Formatting | Rows, columns and the header. |
| Contents of a cell | 2 – Formatting | What may stand in a cell and what has to be escaped. |
| 2.7 – Tables | 2 – Formatting | The basic form, alignment, contents, wide tables. |
| Wide tables | 2 – Formatting | What happens when a table does not fit the column. |
| Formula blocks | 2 – Formatting | Displayed formulas, over several lines and as a matrix. |
| 2.8 – Mathematics | 2 – Formatting | LaTeX in the text and as a block. |
| Formulas in a sentence | 2 – Formatting | LaTeX in the middle of a sentence. |
| Flowcharts | 2 – Formatting | Mermaid — processes and decisions. |
| 2.9 – Diagrams | 2 – Formatting | Fourteen kinds of Mermaid diagram. |
| Number diagrams | 2 – Formatting | Pies, curves, flows and quadrant charts. |
| Process diagrams | 2 – Formatting | States, user journeys and branches. |
| Sequence diagrams | 2 – Formatting | Who says what to whom, and in which order. |
| Structure diagrams | 2 – Formatting | Classes, entities and mind maps. |
| Time diagrams | 2 – Formatting | Gantt plans and timelines. |
| Footnotes — the basic form | 2 – Formatting | A marker in the text, the text at the foot of the page. |
| Comments | 2 – Formatting | Text that only exists in the source. |
| 2.10 – Footnotes | 2 – Formatting | Footnotes, variants and comments. |
| Named and repeated footnotes | 2 – Formatting | Names instead of numbers, several references, footnotes inline. |
| Data types | 2 – Formatting | Text, number, boolean, list — and how they are displayed. |
| Displaying the properties | 2 – Formatting | Where the table sits, what it shows and how to change that. |
| Frontmatter | 2 – Formatting | The fields at the very top of the file and what Quartz does with them. |
| 2.11 – Properties | 2 – Formatting | Frontmatter, data types, display. |
| Documents | 2 – Formatting | Embedding PDFs, linking to them and jumping to a particular page. |
| Images | 2 – Formatting | Five formats, two notations, sizes — and which format is good for what. |
| 2.12 – Media | 2 – Formatting | Images, documents, video and audio. |
| Images per colour scheme | 2 – Formatting | Two images, of which only ever one is visible. |
| Video and audio | 2 – Formatting | Embedding sound and moving images — with what Quartz makes of them on its own. |
| Arrows, tags and emoji | 2 – Formatting | Small things Obsidian converts in passing. |
| Escaping characters | 2 – Formatting | When Markdown reads something as markup that is meant to be text. |
| HTML in Markdown | 2 – Formatting | What is let through and where the limit is. |
| 2.13 – Odds and ends | 2 – Formatting | HTML, escapes, arrows, tags, emoji. |
| 2 – Formatting | 2 – Formatting | Every element Obsidian writes and Quartz renders — source and result side by side, 62 short pages in thirteen sections. |
| How a base is built | 3 – Obsidian formats | Filters, formulas and views — the YAML format explained. |
| 3.1 – Bases | 3 – Obsidian formats | Queries over the vault, as a table, cards or a list. |
| How a canvas is built | 3 – Obsidian formats | JSON with nodes and edges. |
| 3.2 – Canvas | 3 – Obsidian formats | An infinite surface with cards and connections. |
| Structure of the template | — | — |
| How an Excalidraw file is built | 3 – Obsidian formats | Markdown outside, drawing data inside — and the second, simpler way. |
| 3.3 – Excalidraw | 3 – Obsidian formats | Diagrams that look hand-drawn and stay interactive on the site. |
| Structure of the editorial frame | — | — |
| 3 – Obsidian formats | 3 – Obsidian formats | Three file types that are not Markdown pages — Bases, Canvas and Excalidraw. |
| 4.1 – Title, description, date | 4 – Controlling a page | The three statements every page should have — and where the date comes from when none is given. |
| 4.2 – Draft and unlisted | 4 – Controlling a page | Two ways of holding a page back — one does not build it at all, the other only hides it. |
| 4.3 – Aliases | 4 – Controlling a page | Making a page reachable under several paths — the plugin Alias redirects creates the redirects. |
| 4.4 – Custom fields | 4 – Controlling a page | Frontmatter fields Quartz does not know — and how the property table shows them. |
| 4.5 – Layout boxes per page | 4 – Controlling a page | Hiding, renaming or refilling a layout box on a single page — in the frontmatter, not in the configuration. |
| 4.6 – Cover image | 4 – Controlling a page | The field cover — one image per page for the gallery and the cards of a base. |
| 4.7 – Translation | 4 – Controlling a page | The fields that connect a page with its translation — translationKey, aliases, lang — and when you need them. |
| 4 – Controlling a page | 4 – Controlling a page | What a page's frontmatter does — title, date, draft, alias, custom fields, layout boxes, cover image, translation. |
| Colour scheme switch | 5 – The design | The button between light and dark. |
| The explorer | 5 – The design | The folder tree — switched off in this template and still designed down to the fourth level. |
| Footer | 5 – The design | What stands under every page — and which two parts it is made of. |
| The header | 5 – The design | Word mark, page title and the four controls in one row. |
| 5.1 – Navigation | 5 – The design | Navigation, explorer, search, colour scheme, reader mode, header, footer. |
| The language switcher | 5 – The design | Three forms, one of them visible — and where it sits. |
| The navigation | 5 – The design | The accordion on the left, the drawer on a smartphone, “Previous” and “Next” below the text. |
| Reader mode | 5 – The design | Hiding the bars — and seeing that it is on. |
| Search | 5 – The design | The field in the bar and the overlay behind it. |
| Breadcrumbs | 5 – The design | The path from the home page to here. |
| 5.2 – Above the content | 5 – The design | Breadcrumbs, title, date, properties, tags. |
| The property table | 5 – The design | The frontmatter table under the title. |
| Tags | 5 – The design | Markers under the title and in the body text. |
| Title and date | 5 – The design | The heading of the page and the line below it. |
| Body text | 5 – The design | The width of the text, the heading scale and the links inside it. |
| Callout colours | 5 – The design | Thirteen types, all of them set anew and measured. |
| Code styling | 5 – The design | Inline, blocks, the language label and the copy button. |
| 5.3 – In the content | 5 – The design | Body text, callouts, code, tables and media. |
| Tables and media | 5 – The design | Two elements that want to blow up the column. |
| Backlinks | 5 – The design | What points at this page. |
| The graph | 5 – The design | The surroundings of a note as a network. |
| 5.4 – Beside the content | 5 – The design | Table of contents, graph, backlinks, recently changed. |
| Recently changed | 5 – The design | The most recent notes as a box below the text. |
| Table of contents | 5 – The design | The outline on the right — every level, not just three. |
| 5.5 – Layout boxes | 5 – The design | A plugin that puts arbitrary markup at any place in the layout. |
| The instances | 5 – The design | The same plugin, seven times, for something different each time. |
| Error page | 5 – The design | What appears at an address that does not exist. |
| Folder and tag pages | 5 – The design | The listings Quartz generates automatically. |
| 5.6 – Generated pages | 5 – The design | Listings, preview, search results, error page. |
| Link preview | 5 – The design | What appears when hovering an internal link. |
| Search results | 5 – The design | The list in the search overlay. |
| 5 – The design | 5 – The design | What Quartz does out of the box and what this template changes about it — component by component, with the table of the variables each of them reads. |
| 6.1 – Changing something | 6 – Adapting | Three levels, cheapest first — and where your own rule belongs so that it wins. |
| 6.2 – Colours and contrast | 6 – Adapting | Nine roles, two of them named the wrong way round — and 93 measured pairs. |
| 6.3 – Typefaces | 6 – Adapting | Two families, self-hosted — and why the @font-face rules are replaced. |
| 6.4 – Variables | 6 – Adapting | 66 variables the whole design is made of. |
| 6.5 – Page grids | 6 – Adapting | Four page grids of our own instead of the three that ship with Quartz. |
| 6.6 – Accessibility | 6 – Adapting | What this template does for it — and why it is usually only one line more. |
| 6.7 – Two languages | 6 – Adapting | How the same site is made in German and English — from one vault and one build. |
| Where the two languages stop | 6 – Adapting | What stays monolingual in one build — measured, not assumed. |
| How the two languages find each other | 6 – Adapting | Three strategies, three proofs — and what the Obsidian plugin has to do with it. |
| 6.8 – The template package | 6 – Adapting | What is inside a .qtpl file, what arrives in the project on import — and what deliberately does not travel. |
| 6 – Adapting | 6 – Adapting | Where a colour, a typeface, a spacing, the page grid or the languages come from — and how to change them, mostly without code. |
| 7.1 – Glossary | 7 – Reference | Every term of this handbook in two or three sentences — alphabetical, with a link to the page that goes into it. |
| 7.2 – Abbreviations | 7 – Reference | The abbreviations that occur in this handbook. |
| 7.3 – Patterns | 7 – Reference | The decisions that run through every component — said once, instead of repeated on thirty pages. |
| 7.4 – Known limits | 7 – Reference | What does not work, why not, and what the template does instead — collected from all chapters, each with a link to the page that goes into it. |
| 7 – Reference | 7 – Reference | Glossary, abbreviations, the recurring patterns, the known limits — and a list of all pages. |
| Example | Start | The handbook of the Example template for QuartzControl — to read, to look things up, and to compare against your own site. |
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.