Anki模板 - 极简风英语好句整理

Anki模板：极简风英语好句

预览图

白天模式：

黑夜模式：

代码

字段

1. TextTile
2. Text
3. TextTranslation
4. WordContent
5. SmallTips
6. Diff

正面内容

<div class="text-card">
  <div class="title">{{TextTitle}}</div>
  <div class="content" id="text-content">{{Text}}</div>
</div>

反面内容

{{FrontSide}}

<div class="back text-card">
  <div class="translation">
    <div class="title">文章翻译</div>
    <div class="content" id="translation-content">{{TextTranslation}}</div>
  </div>
  <div class="word">
    <div class="title title-second">单词注释</div>
    <div id="word-content">{{WordContent}}</div>
  </div>
  <div class="tips">
    <div class="title title-second">小贴士</div>
    <div id="tips-content">{{SmallTips}}</div>
  </div>
  <div class="diff title-second">
    <div class="title">难度</div>
    <div id="diff-c">{{Diff}}</div>
  </div>
</div>

<script>
  // 配置函数
  function deleteParentElement(element) {
    element.parentNode.parentNode.removeChild(element.parentNode);
  }

  // 配置翻译
  var translationContent = document.getElementById("translation-content");
  if (translationContent.innerText.length === 0) {
    deleteParentElement(translationContent);
  } else {
    translationContent.innerHTML =
      "&nbsp;&nbsp;" + translationContent.innerHTML;
  }

  // 配置单词注释
  var wordTips = document.getElementById("word-content");

  if (wordTips.innerText.length === 0) {
    deleteParentElement(wordTips);
  } else {
    const wordTipsList = wordTips.innerText.split("||");
    let resultWordTipsHTML = "";

    wordTipsList.forEach((item, index) => {
      resultWordTipsHTML +=
        index + 1 + "." + item + '<br><div style="height: 8px"></div>';
    });

    wordTips.innerHTML = resultWordTipsHTML;
  }
  // 配置小贴士
  var tipsContent = document.getElementById("tips-content");
  if (tipsContent.innerText.length === 0) {
    deleteParentElement(tipsContent);
  }

  // 配置难度标星
  var diff = document.getElementById("diff-c");
  if (diff.innerText.length === 0) {
    deleteParentElement(diff);
  } else {
    let diffC = Number.parseInt(diff.innerText);
    if (diffC > 5) diffC = 5;
    let resultDiffC = "";
    for (let diffIdx = 0; diffIdx < diffC; diffIdx++) {
      resultDiffC += "⭐";
    }
    diff.innerHTML = resultDiffC;
  }
</script>

样式

@font-face {
    font-family: _FiraCode;
    src: url('_Fira_Code.ttf');
}

@font-face {
    font-family: _KaiTi;
    src: url('_simkai.ttf');
}

.card {
    font-family: _FiraCode;
    font-size: 1.15rem;
    text-align: center;
    color: #444;
    background-color: white;
}

.card div.text-card {
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
        rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    padding: 1.666667rem;
    margin: 1rem;
}

.card div.text-card .content {
    font-size: 1.05rem;
    text-align: left;
}

.card div.text-card .title {
    font-size: 1.6rem;
    color: #333;
    font-weight: 500;
    margin-bottom: 0.666667rem;
}

.card div.back {
    text-align: left;
    margin-top: 2rem;
}

.card div.back .title {
    color: #333;
    font-size: 1.6rem;
    margin: 0px 0.666667rem 0.8rem 0.666667rem;
}

.card div.back .title-second {
    margin-top: 1.5rem;
}

.card div.back .translation .content {
    font-family: _KaiTi;
    font-size: 1.466667rem;
}


.card.night_mode div.text-card {
    box-shadow: rgba(255, 255, 255, 0.02) 0px 1px 3px 0px,
        rgba(223, 228, 234, 0.15) 0px 0px 0px 1px;
    padding: 1.666667rem;
    margin: 1rem;
}

.card.night_mode div.back {
    text-align: left;
    margin-top: 2rem;
}

.card.night_mode div.back .title-second {
    margin-top: 1.5rem;
}

.card.night_mode div.text-card .title {
    font-size: 1.6rem;
    color: #ced6e0;
    font-weight: 500;
    margin-bottom: 0.666667rem;
}