Anki 教學 - 卡片樣式

用了一段時間以後，會覺得 Anki 的白色背景對眼睛負擔太大，如果要長時間使用 Anki 來學東西，就要改一下字型和背景顏色。
只要進入編輯畫面，按一下「卡片...」，就會出現卡片樣板(template)，裡面支援 HTML/CSS 語法。所以卡片長相可以很多種變化，手冊裡面只有大概說一下簡單的html 語法，詳細的還請大家自行上網 Google~

補充一下：進入「編輯畫面」方法有兩種：
在 「學習畫面」按一下左下角的「編輯」，再按一下「卡片...」
或在 「學習畫面」按一下右上角的「瀏覽卡片」，再按一下「卡片...」

左半邊是樣板，最上面一格是「正面樣板」，顧名思義就是學習的時候顯示在正面的資料。

其中的用花括號包起來的東西，{{正面}}，就對應到基本型的卡片類型中，一個名叫「正面」的欄位裡面的資料。不同的卡片類型會有不同的欄位名稱，而且欄位名稱是可以改的。

在右邊的預覽窗格中會看到實際學習時的樣子。

面樣板也有個叫做{{背面}}的東西，對應到「背面」欄位。背面樣板裡面有一行是 

{{FrontSide}}

這是代表整個正面樣板的內容，以此例來說， {{FrontSide}}就等於 {{正面}}。

如果想要在「正面樣版」或「背面樣板」裡面多加一些資訊，可以直接輸入進去，如果用花括號包住欄位名稱，預覽窗格裡面就會出現欄位內容，當然也可以按下面的「新增欄位」按鈕，一樣可以新增欄位，同時可以設定欄位顯示時的字型大小。

另外還有一行

<hr id=answer>

代表的是一條水平線，而且在顯示答案時，如果答案超出畫面範圍，畫面會盡量移至這條線，以便看答案。

在 CSS 語法中，如果要換行，按 Enter 是不能換行的，需要輸入 <br>，才能換行。

中間那格是「樣式」，預設內容如下：

.card {

font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}


可以依照 CSS 語法來調整版面，不同的情況下可以使用不同的「樣式」，每一種卡片類型都有自己的樣式。

像我是把 Anki 拿來背國考題，所以通常會把文字靠左對齊。而且要長時間學習，就改成綠底白字，而且字型也放大了一些，同時改成粗體，看得比較清楚。以下是我的範例：

.card {
font-family: "微軟正黑體",Arial ;
font-size: 26px;
text-align: Left;
font-weight:bold;
background:#005A00;
color:white;
}

另外，Anki 會自動調整圖片的大小，以符合螢幕，如果覺得圖被縮得太小，希望還原，可以在「樣式」裡面加上這行。

img { max-width: none; max-height: none; }

回想一下在前幾篇教學中，提到我們輸入的是 「筆記」，而非「卡片」，「卡片」是 Anki 依照「卡片樣版」幫我們製作出來的。
我們只要按一下右上角的「＋」，就可以創出新的卡片，但這些不同的卡片都基於同一筆 「筆記」，因此可以調換欄位或是改變某張卡片的樣式。當然也可以按一下「反轉」來調換卡片正面和背面的內容。

卡片 1 跟卡片 2 的不同可在「樣式」中發現，

.card1 的內容會規定卡片 1 的長相

.card 的內容會規定其他沒有特別規定的卡片的長相

而那個 Apple 後面的「...」，則是在「正面樣版」裡面所增加的「...」。

假設您有一個欄位叫做「小筆記」，想要把這個欄位當作提示來用，可以在樣板中加入：

{{hint: 小筆記}}

另外有一些 Anki 內部預設的特殊欄位，比方說

本筆記的標籤是: {{Tags}} 

本筆記的類型是: {{Type}}  

本卡片的牌組是: {{Deck}}  

本卡片的類型是: {{Card}}  

正面的文字是(僅可在背面樣板使用): {{FrontSide}}

卡片也可以有條件地出現某些欄位，叫做Conditional Replacement

比方說

{{#欄位名稱}}

假設欄位裡面有文字，就會顯示本段文字

{{/欄位名稱}}

{{^欄位名稱}}

假設欄位裡面沒有文字，才會顯示文字

{{/欄位名稱}}

舉例來說，如果標籤名稱不是空的，才顯示標籤：

{{#Tags}}標籤：{{Tags}}{{/Tags}}

也可以要求兩個欄位都要有內容才會顯示

{{#欄位 A}} 

{{#欄位B}} 

{{欄位 A}} 

{{欄位B}} 

{{/欄位 B}} 

{{/欄位 A}}

以上技巧也可以用在克漏字卡片類型
比方說，您想要在第一個克漏字上顯示欄位「提示 1」內容，然後在第二個克漏字格式上顯示「提示 2」的內容：

{{cloze:文字}}

{{#c1}} 

{{提示 1}} 

{{/c1}}

{{#c2}} 

{{提示 2}} 

{{/c2}}

這次的教學就只有翻譯部分的說明書了，感覺有點累了。