mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-20 11:24:05 -06:00
feat:ReplyByEmail button
Add documentation for the component
This commit is contained in:
parent
d94a68edb2
commit
64a101c0d9
67
docs/features/replybyemail button.md
Normal file
67
docs/features/replybyemail button.md
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
---
|
||||||
|
title: Reply by Email Button
|
||||||
|
tags:
|
||||||
|
- component
|
||||||
|
---
|
||||||
|
|
||||||
|
The Reply By Email Button is a feature that allows users to display a button under their notes, allowing visitors to send them an email to an obfuscated email address.
|
||||||
|
- The email address is base64 encoded to provide some basic protection from bots.
|
||||||
|
- The subject line of the email will be taken from the page Title where the button is clicked.
|
||||||
|
- You can specify on what notes the button should be displayed or excluded.
|
||||||
|
- The label on the button can also be customised.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
The Reply By Email Button is disabled by default. To enable it, you can add the component to your layout configuration in `quartz.layout.ts`.
|
||||||
|
|
||||||
|
Minimal configuration:
|
||||||
|
```ts
|
||||||
|
Component.ReplyByEmail({
|
||||||
|
username: "Y29udGFjdA==", // "contact" encoded in base64, as in contact@example.com
|
||||||
|
domain: "ZXhhbXBsZS5jb20=", // "example.com" encoded in base64, as in contact@example.com
|
||||||
|
}),
|
||||||
|
```
|
||||||
|
You can specify under which notes to display the button by adding the following:
|
||||||
|
```ts
|
||||||
|
includeTitles: ["Welcome to Quartz 4", "Reply by Email Button"],
|
||||||
|
```
|
||||||
|
Alternatively, you can include the button by default by ommiting the `includeTitles` line, and specify notes under which the button should not be displayed:
|
||||||
|
```ts
|
||||||
|
excludeTitles: ["Welcome to Quartz 4", "Home"],
|
||||||
|
```
|
||||||
|
You can also override the default `buttonLabel` text:
|
||||||
|
```ts
|
||||||
|
buttonLabel: "Reply by email"
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
The natural placement for the Reply By Email Button is within `afterBody` in the Content Pages, so that it is displayed right under the note:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
afterBody: [
|
||||||
|
Component.ReplyByEmail({
|
||||||
|
username: "Y29udGFjdA==", // "contact" encoded in base64, as in contact@example.com
|
||||||
|
domain: "ZXhhbXBsZS5jb20=", // "example.com" encoded in base64, as in contact@example.com
|
||||||
|
// includeTitles: ["Welcome to Quartz 4"], // You can specify which page titles to include or comment out the line to include on all pages
|
||||||
|
excludeTitles: ["Welcome to Quartz 4", "Home"], // You can specify which page titles to exclude when includeTitles is empty
|
||||||
|
buttonLabel: "Submit feedback by email" // You can override the default button text "Reply by email"
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
```
|
||||||
|
|
||||||
|
## Customization
|
||||||
|
|
||||||
|
You can customize the appearance of the ReplyByEmail button through CSS variables and styles. The component uses the following class:
|
||||||
|
|
||||||
|
- `.reply-by-email-button`
|
||||||
|
|
||||||
|
|
||||||
|
Example customization in your custom CSS:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.reply-by-email-button {
|
||||||
|
color: var(--tertiary);
|
||||||
|
}
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue
Block a user