My personal Quartz v4 configuration with giscus integrated.
- original Footer replaced by new component Links and moved to the right pane
- base.scss sidebar flex-wrap changed in order to support Links displayed properly on mobile version
- original Footer replaced with Comments component which integrated Quartz with giscus
- giscus integrated with Quartz theme change event so that the comment section's theme will change accordingly when Quartz switching between light/dark mode
- add giscus.json to prevent comment from blog being abused
To see the changes, please refer to branch: giscus
Comments component with its inline script giscus.inline.ts is responsible to integrate with giscus system and loading comments by leaving a hook <div> element with class giscus as well as align giscus theme with blog darkmode switching.
It's doing so by listening event nav on window and custom event change on ToggleSwitch for update page comment and giscus theme accordingly.
It will ignore index which is main page url when nav event fired so that the main page of the blog will not shows comments.
See, giscus.inline.ts, and Comments.tsx.
Links component is a modified Footer component optimized for displaying links on right side pane due to the comments occupied the end of section of the page.
Note
On mobile version, the Links will appear on the top of the page just right down on the blog name due to the Quartz layout limitation.
ctl.sh is a shell script tool that helps you using quartz cli without install node environment in your local machine, by utilizing docker node image as a throw-away container. Using ctl.sh is encouraged since the origin quartz docker support is not good enough.
bash ctl.sh m to show the menu
QUARTZ CTL MENU
Options:
(0) perview | p => perview blog before publich
(1) sync => sync blog to remote repository, or update quartz
(2) sync --no-pull | sop => sync blog to remote repository but not update quartz
(3) quartz | q => run any quartz support sub commands
As the instruction of the menu you can use p to run a local server to preview, equals to npx quartz build --serve, sop to update blog context but not update quartz, and any other command available for quartz cli is available in ctl.sh by using command bash ctl.sh quartz [quartz sub-command].
Warning
To be able to use ctl.sh you have to make sure three things:
- you local environment are able to use git to communicate with github repository
- the .ssh/ in your home directory is configured properly for purpose above
- the repository has specified user.name and user.email in order to run inside of container environment which don't have global gitconfig setup
Feel free to fork the repository if you want to use giscus with Quartz.