iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~系列 第 19

#19 No-code 之旅 — Avatars Libraries

嗨~ 今天來個比較特別的主題,Avatars libraries。很多時候我們需要顯示一些頭貼,有的是用 Google,Facebook,Github,等其他服務的頭貼。不過,有時候我們可能會想用其他比較匿名或隨機的圖當頭貼。今天這篇會分享一些 libraries~

Avatars Libraries

Libraries

  • DiceBear,第一個知道的 avatar library,蠻多風格可以選!有些很好笑XD
  • AvataaarsJs,基於 DiceBear~
  • Jdenticon,各種三角形方形圓形組成的圖,也有提供 React 的 library
  • Boring Avatars,最近找到的,我很喜歡,它超可愛~ 有六種風格,可以自己調顏色

Boring Avatars

Boring 1

我選擇用 Boring Avatars 來顯示專案中的 avatars,原因是它特別可愛XD尤其是 Beam 風格~ 使用方式也很簡單:

  • 安裝 library
    npm install boring-avatars
    # or
    yarn add boring-avatars
    
  • 或是直接用 source src 的方式
    https://source.boringavatars.com/marble/{SIZE}/{NAME}?colors={COLOR1,COLOR2,COLOR3,COLOR4,COLOR5}
    例如:https://source.boringavatars.com/marble/120/Maria%20Mitchell?colors=264653,2a9d8f,e9c46a,f4a261,e76f51

Boring 2

上面是 Beam 風格!使用 library 的方式也很簡單~

import Avatar from "boring-avatars";

<Avatar
  size={40}
  name="Maria Mitchell"
  variant="marble"
  colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}
/>;

這樣子我們可以幫每個人做一張頭貼,而且一樣的名字只會有一張圖 (一種風格一張,總共六張圖)

小結

當然,我們可以不用這些 libraries,直接拿 user 原本的頭貼。今天分享的就給大家參考,有需要的時候可以拿來用!專案裡因為會做部落格,所以選擇用 Boring Avatars 顯示作者的頭貼~

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。

祝大家明天上班上課愉快!

晚安 <3


上一篇
#18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK
下一篇
#20 No-code 之旅 — Analytics ft. Google Analytics & Splitbee
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言