Anki模板教學：4個小技巧，改成符合你喜愛樣式模板

大家好，在上一篇文章中，我已經解釋了Anki原理、為什麼推薦Anki、還有我的單字卡及如何使用Anki來背單字。這篇文章我會著重在如何使用我的模板，將它改成符合你喜愛的樣式。

如何安裝？

下載後直接點擊「範例__範例英文字卡.apkg」檔案，字卡就會自動新增到你的Anki裡。

Anki介面更改方式？HTML？CSS？

通常正面（Front Template）、反面(Back Template)卡片的架構是用html語法寫，例如我正面要放問題；背面放答案和例句。

卡片整體的樣式（Styling）則是用CSS語法寫的，例如卡片背景顏色、字體大小、字距等等。

若你想做什麼修改，但不知道語法時，最簡單的方式就是直接Google，例如：CSS 改顏色，或是可以用w3schools搜尋。

⓵ 如何更改主色調、背景顏色？

這應該是大家一開始最想客製化的部分，也最簡單。

在 “Styling” 找到「卡片整體」、「顏色」，寫著#XXXXX的就是顏色代碼，我設計了一個背景色、三種不同主題顏色、三種主題淺色。

color: #XXXXX ➝ 字體顏色

background-color: #XXXXX ➝ 背景顏色

另外推薦二個我常用的配色網站：coolors、colorhunt，這兩個網站都有很多好看的配色，可以上去玩玩看。

⓶ 如何更改字體大小？

這也是讓我最困擾的地方了，因為每個人的手機、電腦大小都不同，我光是要調整自己在手機、筆電都看得舒服的版本就花了一些時間，簡單介紹每行代表的意思，你可以在 ” Styling ” 調整出最適合自己的字體大小。

font-size: 18px; ➝ 字體大小，此行以防瀏覽器不支援下一行語法時有基本設定

font-size: min(max(3.5vw, 18px), 30px); ➝ 字體大小，此行的意思是字體大小是3.5vw，最小值18px，最大值30px

vw表示的是view width，也就是螢幕寬度的百分比，例如螢幕寬度為1000px，1vw就等於10px。。

line-height:1.5; ➝ 行高，通常舒服的行高為1.5-2

text-align: center; ➝ 字體排列，center是置中的意思

⓷ 如何更改內距、外距？

一個模板的好看與否，適當留白絕對佔很大的必要因素，光想到文字都貼著邊邊就覺得很不舒服，這就是設計的小堅持！

❶ 內距 padding

內距請參考圖片中的土黃色箭頭，就是travel這個字框需有要多內距留白。

padding: 8px 8px; ➝ 上下內距8px、左右內距8px

若四邊都要不同距離，也可以寫成:

padding: 8px 10px 8px 10px; ➝ 數字代表上、右、下、左

❷ 外距 margin

外距請參考圖片中的藍色箭頭，就是travel這個字框要往外推多少距離。

margin-bottom: 20px; ➝ 代表下20px，也可以寫成 0px 0px 20px 0px

❸ 圓角

另外一個小堅持就是圓角拉！你的方格若是加上圓角會瞬間溫暖許多。

border-radius:8px 8px 0px 0px; ➝ 數字代表上、右、下、左

⓸ 如何加入icon小圖示？

在上個段落圖片中，標題兩旁有小國旗icon，因為他是存在我的資料庫裡，所以有需要的人請用以下方式加入圖示。

❶ 至icon8下載你喜歡的圖片

❷ 將圖片檔名改成english.png （也可以別的名稱，只要和語法寫相同名稱即可）

❸ 將圖片放到collection.media資料夾 （須用電腦作業）

• MAC位置：前往 ▸ Library資源庫 ▸ Application Support⁩ ▸ ⁨Anki2⁩ ▸ ⁨User 1⁩ ▸ collection.media

注意你的資源庫若是隱藏，按option即可叫出資源庫

• Windows位置：檔案總管 ▸ %APPDATA%\Anki2 ▸ User 1

❹ 通常這樣圖片就會顯示出來，到Anki模板front template找到以下程式碼，確認檔案名稱是否相同。

 <img style="width: 20px; height: 20px;padding-right: 5px;" src="english.png">
 Spelling <img style="width: 20px; height: 20px;padding-right: 5px;" src="english.png">

歡迎訂閱正經旅行 Youtube頻道 、IG，你的回饋會是我很大的動力，若是有其他想一起討論的也可以在下方留言！