mirror of
https://github.com/jackyzha0/quartz.git
synced 2026-03-22 14:05:43 -05:00
cdfb1bd85b
Update feature docs, hosting, CI/CD, getting started, configuration, layout, architecture, creating components, making plugins, and migration guide to reflect the v5 community plugin architecture.
48 lines
1.3 KiB
Markdown
48 lines
1.3 KiB
Markdown
---
|
|
title: Reader Mode
|
|
tags:
|
|
- component
|
|
---
|
|
|
|
Reader Mode is a feature that allows users to focus on the content by hiding the sidebars and other UI elements. When enabled, it provides a clean, distraction-free reading experience.
|
|
|
|
## Configuration
|
|
|
|
Reader Mode is enabled by default. To disable it, you can remove the component from your layout configuration in `quartz.layout.ts`:
|
|
|
|
```ts
|
|
// Remove or comment out this line
|
|
Plugin.ReaderMode(),
|
|
```
|
|
|
|
- Install: `npx quartz plugin add github:quartz-community/reader-mode`
|
|
- Source: [`quartz-community/reader-mode`](https://github.com/quartz-community/reader-mode)
|
|
|
|
## Usage
|
|
|
|
The Reader Mode toggle appears as a button with a book icon. When clicked:
|
|
|
|
- Sidebars are hidden
|
|
- Hovering over the content area reveals the sidebars temporarily
|
|
|
|
Unlike Dark Mode, Reader Mode state is not persisted between page reloads but is maintained during SPA navigation within the site.
|
|
|
|
## Customization
|
|
|
|
You can customize the appearance of Reader Mode through CSS variables and styles. The component uses the following classes:
|
|
|
|
- `.readermode`: The toggle button
|
|
- `.readerIcon`: The book icon
|
|
- `[reader-mode="on"]`: Applied to the root element when Reader Mode is active
|
|
|
|
Example customization in your custom CSS:
|
|
|
|
```scss
|
|
.readermode {
|
|
// Customize the button
|
|
svg {
|
|
stroke: var(--custom-color);
|
|
}
|
|
}
|
|
```
|