mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-19 19:04:06 -06:00
66 lines
2.2 KiB
Markdown
66 lines
2.2 KiB
Markdown
---
|
|
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 comment or submited feedback for your notes via email.
|
|
- 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({
|
|
email: "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", "Contact"],
|
|
```
|
|
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({
|
|
email: "contact@example.com", // The email address to be linked to
|
|
// 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);
|
|
}
|
|
```
|