更新日志
20170205 解决不填写例句遗留空白问题.(解决方案在本文末尾)
20170205 补充：刚刚，写完文章后，满心欢喜地点了“更新”按钮，没想到为什么发布后的文章还是我之前存的草稿，写好的代码、精心雕琢的句子都没了！！！当时我就懵了，恰巧这时上课就快迟到了，我必须来学校（没错，现在正在上晚自习），所以，明天我再写一遍吧。
20170206 今天我的运气似乎不错。图灵社区qq群今天有抢书活动（周一），那本《Java编程思维》被我抢到了，觉得自己好幸运。今天把昨天的坑补上，再写得更详细一些。
正文
今天开学。一个寒假都没接着用 Anki，今天拾了起来。实在对默认界面忍无可忍了，所以就做了一些小小的改动。效果如下。
我准备用 Anki 背扇贝炼句的短语，因为炼句的课程太贵，同时也不适合在学校用。
仅有一些简单的效果被实现了，本来我也没想着和扇贝一模一样，只要自己看着顺眼就成。
未来会把 Anki 安卓版仔细打磨一下，做一个全局的主题（把标题栏由蓝色改为深绿色等等细节优化）
我不准备放模版包，直接上代码。
html 和 CSS 很简单，就像围棋入门一样，正因为不熟悉，才被无限地夸大、神秘化了，其实等你真正了解了，也只不过是那么回事儿罢了。
我个人需要的只有基础模版和填空模版，为了和其它要记忆的东西区分开，新建两种笔记类型，“扇贝炼句-普通模板”和“扇贝炼句-填空模板”。先说“基础模板”。
基础模板
除了正面、背面两个区域外，我又加了两个区域，例句1和例句2
等你做好上面的工作后，就开始修改模板了，像下面这样：
正面模板
<div class="frontside">{{正面}}</div>
背面模板
<div class="frontside">{{正面}}</div>
<div class="backside">{{背面}}</div>
<div class="exampletitle">例句</div>
<div class="examplesen sen1">{{例句1}}</div>
<div class="sen2">{{例句2}}</div>
样式
.card {
font-family: "微软雅黑", sans-serif;
font-size: 20px;
color: #000;
background: #eeeeee;
}
.frontside {
display: block;
background: #fff;
padding: .6em 1.4em;
color: #209e85;
font-size: 24px;
}
.backside {
display: block;
background: #fff;
padding: .6em 1.4em;
border-top: 1px solid #eeeeee;
}
.examplesen, .examplesen + div {
display: block;
background: #fff;
padding: .6em 1.4em;
}
.sen1 strong, .sen1 b, .sen2 strong, .sen2 b {
color: #209e85;
}
.exampletitle {
line-height: 36px;
}
.examplesen + div {
border-top: 1px solid #eeeeee;
}
如果你暂时还不懂html和CSS，把上面的代码直接copy进对应的地方就完成了。
模板暂时存在的问题是如果只填一个例句，第二个例句空着，第二个例句那里依然会有一道空白，不会消失（如果你一个例句都不填......你确定你背短语的时候不写例句？），从上面的CSS代码中也可以看出我为此做的努力，我使用了临位选择符，但是我依然没有解决这个问题。原因我已经知道了，尽管我使用了临位选择符，但我还是需要加内边距，这正是造成白边的原因。我已经好久好久好久没写过代码了，加上今天开学时间紧迫，我实在没想到解决办法。说不定什么时候就猛然想到了，大家先用着呗，反着对外观也造不成多大影响（强迫症患者除外，但是假如我不说，你们会不会注意不到呢）。
填空模板
默认的“额外的”区域被我改为了“相关短语”，其它就没加什么了。
正面模板
<div class="frontside">{{cloze:文字}}</div>
背面模板
<div class="frontside">{{cloze:文字}}</div>
<div class="exampletitle">相关短语</div>
<div class="examplesen">{{相关短语}}</div>
样式
.card {
font-family: "微软雅黑", sans-serif;
font-size: 20px;
color: #000;
background: #eeeeee;
}
.frontside {
display: block;
background: #fff;
padding: .6em 1.4em;
}
.cloze {
font-size: 24px;
color: #209e85;
}
.examplesen {
display: block;
background: #fff;
padding: .6em 1.4em;
}
.exampletitle {
line-height: 36px;
}
如果你暂时还不懂html和CSS，把上面的代码直接copy进对应的地方就完成了。
至此填空模板也说完了
结尾
用到的深绿色和浅灰色的十六进制码是我直接从扇贝网站的源代码里扒出来的。（可能这是和扇贝唯一一点联系了吧）
用了PS的取色器，但取的颜色在字的不同部位不一样，所以我就用了上面的方案。
我确实是很久很久很久没写过代码了（因为要高考了嘛），为了显示效果（内边距那里），我参考了《CSS揭秘》；为了解决上面提到的那个问题，我翻了翻《CSS设计指南》（然而我还是没解决，不过大家放心，说不定我什么时候灵光一闪答案就出来了）。
这里是结尾。欢迎点赞，欢迎收藏，毕竟我还会继续优化代码的......
20170205更新
20170206更新
之前在文章中提到的那个bug终于可以解决了，大家是不是和我一样高兴呢，首先要感谢@易小猫，是他提出了解决方案。
出现遗留空白的原因是我们为了给例句应用 CSS 样式 而为其添加了一个 div 标签。如果不填写例句，制作卡片时会生成一个空标签，而不是说没有内容时标签就不会生成了。我们给标签应用的内边距、背景颜色等样式依然会应用在上面，所以，空白便出现了。
我之前存在的误区是，想让 CSS 判断标签是否为空，若为空则用 {display:none;} 让标签隐藏。很显然，CSS还没这么高级，暂时办不到（现在CSS新标准已经引入函数了，比如color()，未来会是什么样谁说得好呢）。
CSS确实办不到，但 JavaScript 可以呀，但是我又有一个疑问，Anki支持 JS 吗？经过@易小猫 的提醒，竟然真的支持。解决这个问题一共有两种方案，其中一种便是使用 JavaScript。
先来说第一种。
经过@易小猫 的提醒我才知道，Anki 自带了一种逻辑判断，当卡片上的某字段为空时，可以决定是否包含某些文本，字段，html代码。所以，我们可以把代码改为下面这个样子。
“扇贝炼句-基础模板-背面模板”
<div class="frontside">{{正面}}</div>
<div class="backside">{{背面}}</div>
{{#例句1}}
<div class="exampletitle">例句</div>
<div class="examplesen sen1">{{例句1}}</div>
{{/例句1}}
{{#例句2}}
<div class="sen2">{{例句2}}</div>
{{/例句2}}
若字段“例句2”为空，则不在卡片中包含被包括在 {{#例句2}} 和 {{/例句2}} 之间的代码；同理，若“例句1”字段为空，则不再显示标题“例句”和 例句1字段，这样，即便你在背短语时一条例句都不写（可能这时候你还没有为短语找到合适的例句），卡片依然会完美显示，使用这个模板的强迫症患者们可以尽情欢呼了...
为了多角度展现我的才华，我来提供第二种方案，但我并不推荐你去使用它，因为它违背了我的代码最简短原则，第一种方案那么好就用那个呗，这种方案如果想和第一种那样完美，需要为多个标签添加 id 属性，因为需要让 JS 获取标签里的内容。
写 JS 代码的机会并不多，印象中只在博客文章里写过 HTML 和 CSS，也就是说这是我第一次在文章中秀 JS 代码，好害羞，尽管它只有三行。
这种方案使用 JavaScript 判断标签是否为空，若为空，则把标签的 CSS属性“display” 的值设为“none”。起作用的代码是下面这三行。
if (document.getElementById("juzi2").innerHTML == '') {
document.getElementById("juzi2").style.display="none";
}
我经常犯的错误是把“==”误写为“=”，你猜的没错，我昨天又犯了同样的错误，之后费了好大的劲才发现是这里的毛病，在找原因的时候心里还一直在嘀咕是不是 Anki 对 JavaScript 的支持不完善呢？很显然，锅不能让 Anki 背。学编程可以让人变得严谨，一点没错。
若想使用这种方案，背面模板可以直接替换为下面的代码。
<div class="frontside">{{正面}}</div>
<div class="backside">{{背面}}</div>
<div class="exampletitle">例句</div>
<div class="examplesen sen1">{{例句1}}</div>
<div class="sen2" id="juzi2">{{例句2}}</div>
<script>
if (document.getElementById("juzi2").innerHTML == '') {
document.getElementById("juzi2").style.display="none";
}
</script>
若想达到和第一种方案一样完美的效果，即没有例句时效果依然完美，请为包裹 “例句”标题 和 “例句一” 的标签分别添加一个 id 属性，然后用 JS 代码动态隐藏它们。和我为“例句2”写的 JS 代码类似，大家可以照着改，我就不写了。
还可以用 JS 判断标签是若为空，若为空则删除该标签，但用这种方案首先要获取该标签的父元素，即我们需要再加一层 div 标签，我不喜欢写这样的代码，就不多作介绍了，当然，它也是可行的。
Anki手册 确实是好东西，大家有空了可以多翻几遍，可以让你对 Anki 的了解更深入。
20170206更新就到这里。