Skip to content

Latest commit

 

History

History
431 lines (282 loc) · 11.8 KB

README_zh-tw.md

File metadata and controls

431 lines (282 loc) · 11.8 KB

English · 한국어 . Français . Deutsch . 简体中文 . 繁體中文 . 繁體粤语


正在尋找人員協助翻譯此 README。

支援簡單的生成器。 但是，我們建議閱讀 README 以進行更詳細的調整。

導航

  1. 如何使用
  2. 類型
  3. 顏色
  4. 自定義顏色列表
  5. 區域
  6. 反轉
  7. 高度
  8. 文字
  9. 描述
  10. 文字背景
  11. 文字動畫
  12. 字體顏色
  13. 字體大小
  14. 字體對齊 - X
  15. 字體對齊 - Y
  16. 描述大小
  17. 描述對齊 - X
  18. 描述對齊 - Y
  19. 旋轉
  20. 演示

任何想法可以提交到 -> 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" />

類型

類型數據用於更改背景圖像。

在 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=。

選擇你想要的顏色模式並記住其 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 (空格)

文字背景

文字的背景。

添加 &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)

字體大小

更改文字字體大小。預設值為 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

wave

Egg

egg

Shark

shark

Slice

slice

Rect

rect

Soft

soft

Rounded

rounded

Cylinder

cylinder

Waving

waving

Transparent

transparent

Venom

venom