quartz/content/notes/config.md

108 lines
4.1 KiB
Markdown
Raw Normal View History

2021-07-18 18:54:00 +03:00
---
title: "Configuration"
2021-12-27 05:13:21 +03:00
tags:
- setup
2021-07-18 18:54:00 +03:00
---
2021-07-18 22:19:58 +03:00
2021-07-18 23:40:53 +03:00
## 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.
```yaml
name: Your name here! # Shows in the footer
enableToc: true # Whether to show a Table of Contents
2022-01-04 19:39:22 +03:00
enableLinkPreview: true # whether to render card previews for links
2021-07-18 23:40:53 +03:00
description: Page description to show to search engines
page_title: Quartz Example Page # Default Page Title
links: # Links to show in footer
- link_name: Twitter
link: https://twitter.com/_jzhao
- link_name: Github
link: https://github.com/jackyzha0
```
### HTML Favicons
A Favicon is most commonly seen preceding the URL in a browser. Some
other examples include (but are not limited to) bookmarks, search history, and
app icons (i.e. "save page to homescreen" on mobile devices). [File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support)
and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon) differ
across the combination of platforms and browsers.
If you would like to customize the favicons of your website, you can add them to the `data/config.yaml` file. The **default** without any set `favicon` key is:
```html
<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 equivalent to the default:
```yaml
favicon:
- { rel: "shortcut icon", href: "icon.png", type: "image/png" }
```
In this format, the following keys are available:
- `rel`: The `rel` attribute of the `<link>` tag.
- `type`: The `type` attribute of the `<link>` tag.
- `href` (optional): The `href` attribute of the `<link>` tag.
- `sizes` (optional): The `sizes` attribute of the `<link>` tag.
If you plan to add multiple favicons generated by a website, it may be easier to define it as HTML:
```yaml
favicon: |
<link rel="shortcut icon" href="icon.png" type="image/png">
```
Some websites that **generate favicons** for you (ordered alphabetically) include:
- [`favicon.io`](https://favicon.io/)
- [`realfavicongenerator.net`](https://realfavicongenerator.net/)
- [`www.favicon.cc`](https://www.favicon.cc/)
2021-07-18 23:40:53 +03:00
### Graph View
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`.
```yaml
enableLegend: false # automatically generate a legend
enableDrag: true # allow dragging nodes in the graph
enableZoom: true # allow zooming and panning the graph
2021-12-27 21:15:10 +03:00
depth: -1 # how many neighbours of the current node to show (-1 is all nodes)
2021-07-18 23:40:53 +03:00
paths: # colour specific nodes path off of their path
- /moc: "#4388cc"
```
2021-07-18 22:19:58 +03:00
## Styling
2022-04-02 00:13:49 +03:00
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`.
2021-07-18 23:40:53 +03:00
### 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`.
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`
More info about partials on [Hugo's website.](https://gohugo.io/templates/partials/)
2022-02-17 18:49:41 +03:00
Still having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md).
## Multilingual
2022-04-03 03:38:39 +03:00
[CJK + Latex Support (测试)](notes/CJK%20+%20Latex%20Support%20(测试).md) comes out of the box with Quartz.
2022-02-17 18:49:41 +03:00
Want to support languages that read from right-to-left (like Arabic)? Hugo (and by proxy, Quartz) supports this natively.
Follow the steps [Hugo provides here](https://gohugo.io/content-management/multilingual/#configure-languages) and modify your `config.toml`
For example:
```toml
defaultContentLanguage = 'ar'
[languages]
[languages.ar]
languagedirection = 'rtl'
title = 'مدونتي'
weight = 1
2022-04-02 00:13:49 +03:00
```