[Anki模板]粗仿扇貝App（持續優化中...）

更新日誌

20170205 解決不填寫例句遺留空白問題.(解決方案在本文末尾)

20170205 補充：剛剛，寫完文章後，滿心歡喜地點了「更新」按鈕，沒想到為什麼發布後的文章還是我之前存的草稿，寫好的代碼、精心雕琢的句子都沒了！！！當時我就懵了，恰巧這時上課就快遲到了，我必須來學校（沒錯，現在正在上晚自習），所以，明天我再寫一遍吧。

20170206 今天我的運氣似乎不錯。圖靈社區qq群今天有搶書活動（周一），那本《Java編程思維》被我搶到了，覺得自己好幸運。今天把昨天的坑補上，再寫得更詳細一些。

正文

今天開學。一個寒假都沒接著用 Anki，今天拾了起來。實在對默認界面忍無可忍了，所以就做了一些小小的改動。效果如下。

僅有一些簡單的效果被實現了，本來我也沒想著和扇貝一模一樣，只要自己看著順眼就成。

未來會把 Anki 安卓版仔細打磨一下，做一個全局的主題（把標題欄由藍色改為深綠色等等細節優化）

我不準備放模版包，直接上代碼。

html 和 CSS 很簡單，就像圍棋入門一樣，正因為不熟悉，才被無限地誇大、神秘化了，其實等你真正了解了，也只不過是那麼回事兒罷了。

我個人需要的只有基礎模版和填空模版，為了和其它要記憶的東西區分開，新建兩種筆記類型，「扇貝鍊句-普通模板」和「扇貝鍊句-填空模板」。先說「基礎模板」。

基礎模板

除了正面、背面兩個區域外，我又加了兩個區域，例句1和例句2

等你做好上面的工作後，就開始修改模板了，像下面這樣：

正面模板

<div class="frontside">{{正面}}</div>n

背面模板

<div class="frontside">{{正面}}</div>n<div class="backside">{{背面}}</div>n<div class="exampletitle">例句</div>n<div class="examplesen sen1">{{例句1}}</div>n<div class="sen2">{{例句2}}</div>n

樣式

.card {n font-family: "微軟雅黑", sans-serif;n font-size: 20px;n color: #000;n background: #eeeeee;n}n.frontside {ntdisplay: block;ntbackground: #fff;ntpadding: .6em 1.4em;ntcolor: #209e85;ntfont-size: 24px;n}n.backside {ntdisplay: block;ntbackground: #fff;ntpadding: .6em 1.4em;ntborder-top: 1px solid #eeeeee;n}n.examplesen, .examplesen + div {ntdisplay: block;ntbackground: #fff;ntpadding: .6em 1.4em;n}n.sen1 strong, .sen1 b, .sen2 strong, .sen2 b {ntcolor: #209e85;n}n.exampletitle {ntline-height: 36px;n}n.examplesen + div {ntborder-top: 1px solid #eeeeee;n}n

如果你暫時還不懂html和CSS，把上面的代碼直接copy進對應的地方就完成了。

模板暫時存在的問題是如果只填一個例句，第二個例句空著，第二個例句那裡依然會有一道空白，不會消失（如果你一個例句都不填......你確定你背短語的時候不寫例句？），從上面的CSS代碼中也可以看出我為此做的努力，我使用了臨位選擇符，但是我依然沒有解決這個問題。原因我已經知道了，儘管我使用了臨位選擇符，但我還是需要加內邊距，這正是造成白邊的原因。我已經好久好久好久沒寫過代碼了，加上今天開學時間緊迫，我實在沒想到解決辦法。說不定什麼時候就猛然想到了，大家先用著唄，反著對外觀也造不成多大影響（強迫症患者除外，但是假如我不說，你們會不會注意不到呢）。

填空模板

默認的「額外的」區域被我改為了「相關短語」，其它就沒加什麼了。

正面模板

<div class="frontside">{{cloze:文字}}</div>n

背面模板

<div class="frontside">{{cloze:文字}}</div>n<div class="exampletitle">相關短語</div>n<div class="examplesen">{{相關短語}}</div>n

樣式

.card {n font-family: "微軟雅黑", sans-serif;n font-size: 20px;n color: #000;n background: #eeeeee;n}n.frontside {ntdisplay: block;ntbackground: #fff;ntpadding: .6em 1.4em;n}n.cloze {n font-size: 24px;n color: #209e85;n}n.examplesen {ntdisplay: block;ntbackground: #fff;ntpadding: .6em 1.4em;n}n.exampletitle {ntline-height: 36px;n}n

如果你暫時還不懂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>n<div class="backside">{{背面}}</div>n{{#例句1}}n<div class="exampletitle">例句</div>n<div class="examplesen sen1">{{例句1}}</div>n{{/例句1}}n{{#例句2}}n<div class="sen2">{{例句2}}</div>n{{/例句2}}n

若欄位「例句2」為空，則不在卡片中包含被包括在 {{#例句2}} 和 {{/例句2}} 之間的代碼；同理，若「例句1」欄位為空，則不再顯示標題「例句」和 例句1欄位，這樣，即便你在背短語時一條例句都不寫（可能這時候你還沒有為短語找到合適的例句），卡片依然會完美顯示，使用這個模板的強迫症患者們可以盡情歡呼了...

為了多角度展現我的才華，我來提供第二種方案，但我並不推薦你去使用它，因為它違背了我的代碼最簡短原則，第一種方案那麼好就用那個唄，這種方案如果想和第一種那樣完美，需要為多個標籤添加 id 屬性，因為需要讓 JS 獲取標籤里的內容。

寫 JS 代碼的機會並不多，印象中只在博客文章里寫過 HTML 和 CSS，也就是說這是我第一次在文章中秀 JS 代碼，好害羞，儘管它只有三行。

這種方案使用 JavaScript 判斷標籤是否為空，若為空，則把標籤的 CSS屬性「display」 的值設為「none」。起作用的代碼是下面這三行。

if (document.getElementById("juzi2").innerHTML == ) {ntdocument.getElementById("juzi2").style.display="none";n}n

我經常犯的錯誤是把「==」誤寫為「=」，你猜的沒錯，我昨天又犯了同樣的錯誤，之後費了好大的勁才發現是這裡的毛病，在找原因的時候心裡還一直在嘀咕是不是 Anki 對 JavaScript 的支持不完善呢？很顯然，鍋不能讓 Anki 背。學編程可以讓人變得嚴謹，一點沒錯。

若想使用這種方案，背面模板可以直接替換為下面的代碼。

<div class="frontside">{{正面}}</div>n<div class="backside">{{背面}}</div>n<div class="exampletitle">例句</div>n<div class="examplesen sen1">{{例句1}}</div>n<div class="sen2" id="juzi2">{{例句2}}</div>n<script>nif (document.getElementById("juzi2").innerHTML == ) {ntdocument.getElementById("juzi2").style.display="none";n}n</script>n

若想達到和第一種方案一樣完美的效果，即沒有例句時效果依然完美，請為包裹 「例句」標題 和 「例句一」 的標籤分別添加一個 id 屬性，然後用 JS 代碼動態隱藏它們。和我為「例句2」寫的 JS 代碼類似，大家可以照著改，我就不寫了。

還可以用 JS 判斷標籤是若為空，若為空則刪除該標籤，但用這種方案首先要獲取該標籤的父元素，即我們需要再加一層 div 標籤，我不喜歡寫這樣的代碼，就不多作介紹了，當然，它也是可行的。

Anki手冊 確實是好東西，大家有空了可以多翻幾遍，可以讓你對 Anki 的了解更深入。

20170206更新就到這裡。