「稽古有得，隨時劄記，久而類次成書。」——顧炎武《日知錄》
| Props | Description |
|---|---|
| title | Tooltip title |
| children | Tooltip reference element. |
The <Annotate> component allows you to create tooltips for text. You can use it in two ways:
// Component Syntax
<Annotate title="This is a tooltip">Hover over me</Annotate>
// Double Parentheses Syntax
((Hover over me||This is a tooltip))| Name | Title | Usage |
|---|---|---|
| Info | 題引 | Your Content |
| Note | 筆記 | Your Content |
| Quote | You Know What They Say... | Your Content |
| YouWillLearn | 學習重點 | Your Content |
| Resources | 學習資源 | Your Content |
You can change title by passing title prop.
<Note title="為什麼歐陽修自稱「六一居士」？"> Content </Note>| Props | Description |
|---|---|
| title | Title of the AudioCard |
| src | URL o 8241 f the file to play |
| subtitle | Subtitle of the AudioCard |
| image | Image to show (single track only) |
| cap | track caption (multi tracks only) |
// single track
<AudioCard track={{title:'【普】〈背影〉', subtitle:'朱自清', src:'/audio/背影(普通話).m4a'}} />
//multi tracks
<AudioCard tracks={[
{title: "【粵】〈登樓〉", src: "/audio/登樓(粵語).mp3", subtitle: "杜甫(EDB)", cap: "粵語",},
{title: "【普】〈登樓〉", src: "/audio/登樓(普通話).mp3", subtitle: "杜甫(EDB)", cap: "普通話",},
]}/>| Props | Description |
|---|---|
| children | An array of image URLs to be displayed in the carousel. |
<Carousel>{["/img/S1/6.5風雪中的北平/北平1.jpg", "/img/S1/6.5風雪中的北平/北平2.jpg"]}</Carousel>| Name | Title | Usage |
|---|---|---|
| Dictionary | 📜 字詞釋義 | Your content |
| DeepDive | 深入探討 | Your Content |
Props for DeepDive
| Name | Usage |
|---|---|
| title | The title of the deep dive topic. |
| excerpt | An optional excerpt, which can include HTML links. |
| children | The content of the deep dive, which can include text, images, or other components. |
<DeepDive
title="本文如何運用隨時推移法來描寫北平?"
excerpt="<a href='https://learnchinese.vercel.app/'>Link</a"
>
Your Content
</DeepDive>| Props | Description |
|---|---|
| py | The pinyin Jyutping of the character. |
| children | The Chinese character to display, typically a homophone. It can be left empty. |
<Jypt py="joeng4">羊</Jypt>This will render as a clickable button that, when clicked, plays the audio of the Jyutping pronunciation. Fetching Audio from 粵語審音配詞字庫