From 7ccff2cf3d4f7a96be2cf890093798067951fd2e Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 14 Jul 2022 18:49:47 +0000
Subject: [PATCH] fix: styling on page-list for smaller screens
---
content/notes/config.md | 68 +++++++++++++++++++++++++--------
1 files changed, 51 insertions(+), 17 deletions(-)
diff --git a/content/notes/config.md b/content/notes/config.md
index 6e18073..e29afda 100644
--- a/content/notes/config.md
+++ b/content/notes/config.md
@@ -2,15 +2,15 @@
title: "Configuration"
tags:
- setup
-weight: 5
+weight: 0
---
## 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
@@ -25,12 +25,18 @@
# 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 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
@@ -43,6 +49,11 @@
# 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: false
+GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
+
# page description used for SEO
description:
Host your second brain and digital garden for free. Quartz features extremely fast full-text search,
@@ -60,20 +71,42 @@
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
@@ -83,9 +116,9 @@
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">
@@ -93,7 +126,7 @@
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`
@@ -102,7 +135,8 @@
### 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
@@ -110,7 +144,7 @@
### Local Graph ###
localGraph:
- # whether automatically generate a legend
+ # whether automatically generate a legend
enableLegend: false
# whether to allow dragging nodes in the graph
@@ -128,10 +162,10 @@
# 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
@@ -155,7 +189,7 @@
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`
--
Gitblit v1.10.0