分享

Anki 自用卡片模板分享 | MOxFIVE's Blog

 bluezym 2016-01-17

前言

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

基础模板

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

模板使用区域

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

正面模板

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>

带页脚模板

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

模板使用区域

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

正面模板

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,换用喜欢的字体。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约