title: Anki 自用卡片模板分享
date: 2015-11-23 20:34:38
categories:
- 触类旁通
tags:
- Anki
- HTML
- CSS
permalink: anki-templates
---

<h2 id="intro">前言</h2>[Anki](http://ankisrs.net/) 是一款卡片式的记忆辅助软件。软件在保持轻巧简洁的同时，各种设置也很丰富。另外， Anki 通过嵌入式的网页来展示卡片，大大增强了卡片样式的自定义功能。下面是目前自己常用的卡片样式代码，有折腾闲情的可以试试。

<!-- more -->

## 基础模板
标题居中，用不同背景色区分答案类型，设置圆角等样式。
![Anki-a1](/resources/Anki-a1.png)

### 模板使用区域
- 主要需要填写如图所示4个区域。
![Anki-a2](/resources/Anki-a2.png)

### 正面模板
``` html
<img src="{{logo}}" class="logo"/>
<div style="font-size:2em">{{Front}}</div>
```

### 样式
``` css
.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;
}
```

### 背面模板
``` html
{{FrontSide}}

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

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

![Anki-b1](/resources/Anki-b1.png)

### 模板使用区域
- 主要需要填写如图所示5个区域。

![Anki-b2](/resources/Anki-b2.png)

### 正面模板
``` html
<div class= item_eng>{{Item_ENG}}</div>
<p class= front>{{Front}}</p>
<p class= title>{{Tags}}</p>
<p class= author>M.ZH</p>
```

### 样式
``` css
.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;
}
```

### 背面模板
``` html
<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](http://www.daimg.com/download.php?open=2&id=12741&uhash=1eb7c629071a1341f83bc53b) 和这个软件最匹配。当然，大家可以自行修改`font-family`，换用喜欢的字体。