README_zh-hk.md

English · 한국어 · Español · Français · Deutsch
简体中文 · 繁體中文 · 繁體粤语 · Português (Brasileiro) · 日本語 · മലയാളം · Русский

Tip

支援簡單嘅生成器。 不過，我哋建議睇埋 README 嚟做更詳細嘅調整。

Important

This service is provided on a best-effort basis and may be unstable due to usage limits or traffic spikes.

For reliable use, please fork the repository and deploy it to your own Vercel instance (or another hosting platform).

導航

1. 點樣用
2. 類型
3. 顏色
4. 自定義顏色列表
5. 主題
6. 區域
7. 反轉
8. 高度
9. 文字
10. 描述
11. 文字背景
12. 文字動畫
13. 字體顏色
14. FontFamily
15. 字體大細
16. 字體對齊 - X
17. 字體對齊 - Y
18. 描述大細
19. 描述對齊 - X
20. 描述對齊 - Y
21. 旋轉
22. 描邊
23. 描邊闊度
24. 示範

有咩諗法都可以提交去 -> Idea-Issue 或者 PR

點樣用

https://capsule-render.vercel.app/api?

喺呢個 URL 後面加查詢參數就得。好似咁：

Markdown 格式：

![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

HTML 格式：

<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90" />

類型

類型數據用嚟改背景圖像。

• wave：預設
• egg
• shark
• slice
• rect
• soft
• rounded
• cylinder
• waving
• venom
• speech
• blur
• transparent

喺 URL 度加 &type=

![header](https://capsule-render.vercel.app/api?type=slice)

顏色

改背景圖像！

• &color=auto：預設隨機顏色。列表喺呢度
• &color=timeAuto：預設隨機顏色，但係由時間決定
• &color=random：完全隨機嘅顏色。我都唔知會顯示咩顏色
• &color=gradient：預設隨機漸變。列表喺呢度
• &color=timeGradient：預設隨機漸變，但係由時間決定
• &color=_hexcode：預設(#B897FF)
• &color=_custom_gradient：自定義漸變。如果寫成 &color=0:EEFF00,100:a82da8，佢會轉換做 { 0%: 'EEFF00', 100%: 'a82da8' }。(例如 示範)

如果用 auto 模式，唔使改 fontColor。 auto 都會自動改字體顏色。

![header](https://capsule-render.vercel.app/api?color=auto)

如果用靜態顏色，唔好寫 '#'

幾時用 timeAuto 同 timeGradient？

同時用 header 同 footer 區域嘅時候。

自定義顏色列表

你可以自定義將會隨機出現嘅顏色列表，淨係適用於 &color=auto 同 &color=gradient。

喺 URL 度加 &customColorList=。

• 如果用 &color=auto，請睇調色板列表。
• 如果用 &color=gradient，請睇漸變列表。

揀你想要嘅顏色模式並記住佢嘅 idx 值。

例如，如果 idx 值係 0、2 同 3，就寫：&customColorList=0,2,3

如果你想畀 idx=2 出現多次，可以重複寫。(例如 &customColorList=0,2,2,2,2,3)

![header](https://capsule-render.vercel.app/api?color=gradient&customColorList=0,2,2,5,30)

主題

你可以用 theme= 嚟用指定嘅組合。

就算用咗 color 同 fontColor，主題都有最高優先級。

喺 pallete_theme.json 睇可用主題列表。

![reversal](https://capsule-render.vercel.app/api?type=rect&text=RECT&fontAlign=30&fontSize=30&desc=Use%20theme&descAlign=60&descAlignY=50&theme=radical)

我而家慢慢加緊嚟自 Link:theme 嘅組合。

區域

區域數據用嚟反轉背景圖像。

• &section=header：(預設)
• &section=footer

喺 URL 度加 &section=

![footer](https://capsule-render.vercel.app/api?section=footer)

反轉

左右反轉圖像。(同時反轉顏色)

• &reversal=false：(預設)
• &reversal=true

![reversal](https://capsule-render.vercel.app/api?type=slice&reversal=true&color=gradient)

高度

改圖像大細。預設值係 120。

喺 URL 度加 &height=

![header](https://capsule-render.vercel.app/api?height=400)

唔好寫 px

文字

喺圖像上面輸入文字。

加 &text=。

![header](https://capsule-render.vercel.app/api?text=Hello%World!)

你唔可以用某啲特殊字符。好似 '#'、'&'、'/' 咁...

呢啲會令 API 混亂

建議淨係用 %20 (空格) 同 -nl- (換行)

描述

喺圖像上面輸入描述。

加 &desc=。

![header](https://capsule-render.vercel.app/api?height=400&text=Hello%20World!&desc=Hello%20capsule%20render)

你唔可以用某啲特殊字符。好似 '#'、'&'、'/' 咁...

呢啲會令 API 混亂

建議淨係用 %20 (空格) 同 -nl- (換行)

文字背景

文字嘅背景。

加 &textBg=true 嚟啟用。

如果你想增加背景大細， 喺文字值之間加 %20。 因為背景大細取決於英文文字嘅長度。(%20 表示空格)

![header](https://capsule-render.vercel.app/api?type=rounded&color=gradient&text=%20asdf%20&height=300&fontSize=100&textBg=true)

文字動畫

令文字動態化。

如果你想用，加 &animation=。

• fadeIn：淡入 1.2 秒
• scaleIn：縮放進入 0.8 秒
• blink：閃爍 0.6 秒
• blinking：閃爍 1.6 秒
• twinkling：閃爍 4 秒

![header](https://capsule-render.vercel.app/api?text=capsule_render&animation=fadeIn)

字體顏色

改文字顏色。預設值係 000000。

值應該係去咗 '#' 嘅十六進制代碼

喺 Text 查詢後面加 &fontColor=

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontColor=d6ace6)

FontFamily

Change text font family.

Write &fontFamily= behind Text query.

Use %20 for spaces in font names.

fontFamily is applied as CSS font-family, but actual rendering depends on fonts available in the rendering environment. If a font is unavailable, fallback fonts are used.

![header](https://capsule-render.vercel.app/api?text=Hello%20World!&fontFamily=Segoe%20UI)

字體大細

改文字字體大細。預設值係 70。

喺 Text 查詢後面加 &fontSize=

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40)

唔好寫 px

字體對齊-X

改文字水平對齊(x)。寫0~100之間嘅數字

&fontAlign=：預設值係 50。圖像中心

如果喺 &text= 度有多行(-nl-)，提供多個 &fontAlign= 會對每行單獨應用唔同嘅水平對齊。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70)

字體對齊-Y

改文字垂直對齊(y)。寫0~100之間嘅數字

&fontAlignY=：單行預設值係 50(圖像中心)。對於多行(由 -nl- 分隔)，預設值會計算嚟令行堆疊喺一齊並居中。

如果喺 &text= 度有多行(-nl-)，提供多個 &fontAlignY= 會對每行單獨應用唔同嘅垂直對齊。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20)

描述大細

改描述字體大細。預設值係 20。

喺 desc 查詢後面加 &descSize=

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40&desc=Desc&descSize=30)

唔好寫 px

描述對齊-X

改描述水平對齊(x)。寫0~100之間嘅數字

&descAlign=：預設值係 50。圖像中心

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70&desc=Desc&descAlign=20)

描述對齊-Y

改文字垂直對齊(y)。寫0~100之間嘅數字

&descAlignY=：預設值係 60。圖像中心

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20&desc=Desc&descAlignY=40)

旋轉

用 &rotate= 嚟旋轉文字。

你都可以用負數。

建議數字範圍：☞ 0 ~ 360，0 ~ -360。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=20&rotate=-30)

描邊

改文字描邊。

喺查詢後面加 &stroke=

值應該係去咗 '#' 嘅十六進制代碼

![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00)

建議同 strokeWidth 一齊用。

單獨使用嘅時候，strokeWidth 預設係 1。

描邊闊度

改文字描邊闊度。

喺描邊查詢後面加 &strokeWidth=

值必須大過或者等於 0。

![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00&strokeWidth=3)

建議同 stroke 一齊用。

單獨使用嘅時候，stroke 預設係 'B897FF'。

示範

Wave

Egg

Shark

Slice

Rect

Soft

Rounded

Cylinder

Waving

Transparent

Venom

Speech

Blur

---