Anki 自用卡片模板分享

前言

Anki 是一款卡片式的记忆辅助软件。软件在保持轻巧简洁的同时,各种设置也很丰富。另外, Anki 通过嵌入式的网页来展示卡片,大大增强了卡片样式的自定义功能。下面是目前自己常用的卡片样式代码,有折腾闲情的可以试试。

基础模板

标题居中,用不同背景色区分答案类型,设置圆角等样式。
Anki-a1

模板使用区域

  • 主要需要填写如图所示4个区域。
    Anki-a2

正面模板

1
2
<img src="{{logo}}" class="logo"/>
<div style="font-size:2em">{{Front}}</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.card {
font-family: 方正中雅宋_GBK;
font-size: 1em;
text-align:center;
}
.logo {
width: 9em;
padding: 2em 0 1em;
}
.English {
font-family: 方正中雅宋_GBK;
font-size: 1.5em;
text-align: justify;
background-color: #ffe4f4;
border-radius: .3em;
padding: 1em;
}
.Chinese {
font-family: 方正中雅宋_GBK;
font-size: 1.5em;
text-align: justify;
background-color: #edffc4;
border-radius: 1.2em .3em;
padding: 1em;
}

背面模板

1
2
3
4
5
6
{{FrontSide}}
<hr id=answer>
<div class= Chinese>{{Chinese}}</div>
<p>
<div class= English>{{English}}</div>

带页脚模板

加了页脚,左下显示标签分类信息,右下链接到设定的网址。

Anki-b1

模板使用区域

  • 主要需要填写如图所示5个区域。

Anki-b2

正面模板

1
2
3
4
<div class= item_eng>{{Item_ENG}}</div>
<p class= front>{{Front}}</p>
<p class= title>{{Tags}}</p>
<p class= author>M.ZH</p>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.card {
font-family: 方正中雅宋_GBK;
font-size: 1em;
text-align: center;
}
.Chinese {
font-family: 方正中雅宋_GBK;
font-size: 1.5em;
text-align: justify;
background-color: #edffc4;
border-radius: 1.2em 0.3em;
padding : 0.5em;
}
.English {
font-family: 方正中雅宋_GBK;
font-size: 1.5em;
text-align: justify;
background-color: #ffe4f4;
border-radius: .3em;
padding: .5em;
}
.front {
font-size: 1.8em;
}
.item_eng {
padding-top : 5%;
color: orange;
font-size: 2em;
}
.tag {
display: block;
position: fixed;
left: 3%;
bottom: 0;
color: gray;
font-size: 1.1em;
}
a {
color: grey;
}
.title {
display: block;
position: fixed;
left: 3%;
bottom: 0;
color: gray;
font-size: 1em;
}
.author {
display: block;
position: fixed;
right: 3%;
bottom: 0;
color: gray;
font-size: 1em;
}
.link {
display: block;
position: fixed;
right: 3%;
bottom: 0;
color: gray;
font-size: 1.1em;
font-style: italic;
}

背面模板

1
2
3
4
5
6
7
8
9
10
<div class= item_eng>{{Item_ENG}}</div>
<p>
<p class= front>{{Front}}</p>
<hr id= answer>
<div>{{image}}</div>
<p class= Chinese>{{Chinese}}</p>
<p>
<p class= English>{{English}}</p>
<a href="{{Link}}"><p class=link>Reference Site</p></a>
<p class= tag>{{Tags}}</p>

字体下载

测试了不少字体,感觉 方正中雅宋_GBK 和这个软件最匹配。当然,大家可以自行修改font-family,换用喜欢的字体。

文章目录
  1. 1. 前言
  2. 2. 基础模板
    1. 2.1. 模板使用区域
    2. 2.2. 正面模板
    3. 2.3. 样式
    4. 2.4. 背面模板
  3. 3. 带页脚模板
    1. 3.1. 模板使用区域
    2. 3.2. 正面模板
    3. 3.3. 样式
    4. 3.4. 背面模板
  4. 4. 字体下载