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}}


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

留言

這個網誌中的熱門文章

Windows 相片檢視器變黃

Anki 教學 - 基礎知識