| | |
|---|
| | | ## Configuration |
|---|
| | | Quartz is designed to be extremely configurable. You can find the bulk of the configuration scattered throughout the repository depending on how in-depth you'd like to get. |
|---|
| | | |
|---|
| | | The majority of configuration can be be found under `data/config.yaml`. An annotated example configuration is shown below. |
|---|
| | | The majority of configuration can be found under `data/config.yaml`. An annotated example configuration is shown below. |
|---|
| | | |
|---|
| | | ```yaml |
|---|
| | | ```yaml {title="data/config.yaml"} |
|---|
| | | # The name to display in the footer |
|---|
| | | name: Jacky Zhao |
|---|
| | | |
|---|
| | |
|---|
| | | # whether to display on-hover link preview cards |
|---|
| | | enableLinkPreview: true |
|---|
| | | |
|---|
| | | # whether to render titles for code blocks |
|---|
| | | enableCodeBlockTitle: true |
|---|
| | | |
|---|
| | | # whether to render copy buttons for code blocks |
|---|
| | | enableCodeBlockCopy: true |
|---|
| | | |
|---|
| | | # whether to render callouts |
|---|
| | | enableCallouts: true |
|---|
| | | |
|---|
| | | # whether to try to process Latex |
|---|
| | | enableLatex: true |
|---|
| | | |
|---|
| | | # whether to enable single-page-app style rendering |
|---|
| | | # this prevents flahses of unstyled content and overall improves |
|---|
| | | # smoothness of quartz. More info in issue #109 on GitHub |
|---|
| | | # this prevents flashes of unstyled content and improves |
|---|
| | | # smoothness of Quartz. More info in issue #109 on GitHub |
|---|
| | | enableSPA: true |
|---|
| | | |
|---|
| | | # whether to render a footer |
|---|
| | |
|---|
| | | # whether to show a section of recent notes on the home page |
|---|
| | | enableRecentNotes: false |
|---|
| | | |
|---|
| | | # whether to display and 'edit' button next to the last edited field |
|---|
| | | # that links to github |
|---|
| | | enableGitHubEdit: true |
|---|
| | | GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content |
|---|
| | | |
|---|
| | | # whether to use Operand to power semantic search |
|---|
| | | enableSemanticSearch: true |
|---|
| | | operandApiKey: "1e47d93b-1468-45b7-98d5-7f733d5e45e2" |
|---|
| | | |
|---|
| | | # page description used for SEO |
|---|
| | | description: |
|---|
| | | Host your second brain and digital garden for free. Quartz features extremely fast full-text search, |
|---|
| | |
|---|
| | | link: https://github.com/jackyzha0 |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Code Block Titles |
|---|
| | | |
|---|
| | | To add code block titles with Quartz: |
|---|
| | | |
|---|
| | | 1. Ensure that code block titles are enabled in Quartz's configuration: |
|---|
| | | |
|---|
| | | ```yaml {title="data/config.yaml", linenos=false} |
|---|
| | | enableCodeBlockTitle: true |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 2. Add the `title` attribute to the desired [code block |
|---|
| | | fence](https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences): |
|---|
| | | |
|---|
| | | ```markdown {linenos=false} |
|---|
| | | ```yaml {title="data/config.yaml"} |
|---|
| | | enableCodeBlockTitle: true # example from step 1 |
|---|
| | | ``` |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | **Note** that if `{title=<my-title>}` is included, and code block titles are not |
|---|
| | | enabled, no errors will occur, and the title attribute will be ignored. |
|---|
| | | |
|---|
| | | ### HTML Favicons |
|---|
| | | If you would like to customize the favicons of your quartz-based website, you |
|---|
| | | If you would like to customize the favicons of your Quartz-based website, you |
|---|
| | | can add them to the `data/config.yaml` file. The **default** without any set |
|---|
| | | `favicon` key is: |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | ```html {title="layouts/partials/head.html", linenostart=15} |
|---|
| | | <link rel="shortcut icon" href="icon.png" type="image/png"> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | The default can be overridden by defining a value to the `favicon` key in your |
|---|
| | | `data/config.yaml` file. Here is a `List[Dictionary]` example format, which is |
|---|
| | | `data/config.yaml` file. For example, here is a `List[Dictionary]` example format, which is |
|---|
| | | equivalent to the default: |
|---|
| | | |
|---|
| | | ```yaml |
|---|
| | | ```yaml {title="data/config.yaml", linenos=false} |
|---|
| | | favicon: |
|---|
| | | - { rel: "shortcut icon", href: "icon.png", type: "image/png" } |
|---|
| | | # - { ... } # Repeat for each additional favicon you want to add |
|---|
| | |
|---|
| | | |
|---|
| | | If you plan to add multiple favicons generated by a website (see list below), it |
|---|
| | | may be easier to define it as HTML. Here is an example which appends the |
|---|
| | | **Apple touch icon** to quartz's default favicon: |
|---|
| | | **Apple touch icon** to Quartz's default favicon: |
|---|
| | | |
|---|
| | | ```yaml |
|---|
| | | ```yaml {title="data/config.yaml", linenos=false} |
|---|
| | | favicon: | |
|---|
| | | <link rel="shortcut icon" href="icon.png" type="image/png"> |
|---|
| | | <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> |
|---|
| | |
|---|
| | | |
|---|
| | | This second favicon will now be used as a web page icon when someone adds your |
|---|
| | | webpage to the home screen of their Apple device. If you are interested in more |
|---|
| | | information about the current, and past, standards of favicons, you can read |
|---|
| | | information about the current and past standards of favicons, you can read |
|---|
| | | [this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/). |
|---|
| | | |
|---|
| | | **Note** that all generated favicon paths, defined by the `href` |
|---|
| | |
|---|
| | | ### Graph View |
|---|
| | | To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`. |
|---|
| | | |
|---|
| | | ```yaml |
|---|
| | | |
|---|
| | | ```yaml {title="data/graphConfig.yaml"} |
|---|
| | | # if true, a Global Graph will be shown on home page with full width, no backlink. |
|---|
| | | # A different set of Local Graphs will be shown on sub pages. |
|---|
| | | # if false, Local Graph will be default on every page as usual |
|---|
| | |
|---|
| | | |
|---|
| | | ### Local Graph ### |
|---|
| | | localGraph: |
|---|
| | | # whether automatically generate a legend |
|---|
| | | # whether automatically generate a legend |
|---|
| | | enableLegend: false |
|---|
| | | |
|---|
| | | # whether to allow dragging nodes in the graph |
|---|
| | |
|---|
| | | # how strongly nodes should repel each other |
|---|
| | | repelForce: 2 |
|---|
| | | |
|---|
| | | # how strongly should nodes be attracted to the center of gravity |
|---|
| | | # how strongly should nodes be attracted to the center of gravity |
|---|
| | | centerForce: 1 |
|---|
| | | |
|---|
| | | # what the default link length should be |
|---|
| | | # what the default link length should be |
|---|
| | | linkDistance: 1 |
|---|
| | | |
|---|
| | | # how big the node labels should be |
|---|
| | |
|---|
| | | Want to go even more in-depth? You can add custom CSS styling and change existing colours through editing `assets/styles/custom.scss`. If you'd like to target specific parts of the site, you can add ids and classes to the HTML partials in `/layouts/partials`. |
|---|
| | | |
|---|
| | | ### Partials |
|---|
| | | Partials are what dictate what actually gets rendered to the page. Want to change how pages are styled and structured? You can edit the appropriate layout in `/layouts`. |
|---|
| | | Partials are what dictate what gets rendered to the page. Want to change how pages are styled and structured? You can edit the appropriate layout in `/layouts`. |
|---|
| | | |
|---|
| | | For example, the structure of the home page can be edited through `/layouts/index.html`. To customize the footer, you can edit `/layouts/partials/footer.html` |
|---|
| | | |
|---|
| | |
|---|
| | | title = 'مدونتي' |
|---|
| | | weight = 1 |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | [[setup]] |
|---|
