2016-09-23

Anki 自用卡片模板分享

前言

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

基础模板

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

模板使用区域

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

正面模板

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

样式

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

背面模板

{{FrontSide}}
<hr id=answer>
<div class= Chinese>{{Chinese}}</div>
<p>
<div class= English>{{English}}</div>

带页脚模板

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

Anki-b1

模板使用区域

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

Anki-b2

正面模板

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

样式

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

背面模板

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