Anki-Prettify项目：如何为卡片模板添加自定义字段

Anki-Prettify项目：如何为卡片模板添加自定义字段

anki-prettify Collection of customizable Anki flashcard templates with modern and clean themes. 项目地址: https://gitcode.com/gh_mirrors/an/anki-prettify

前言

Anki-Prettify是一个用于美化Anki卡片界面的项目，它提供了简洁现代的卡片样式模板。在实际使用中，用户经常需要根据自身需求添加额外的字段来丰富卡片内容。本文将详细介绍如何在Anki-Prettify项目中为卡片模板添加自定义字段。

准备工作

在开始修改模板前，请确保：

1. 已安装Anki-Prettify插件
2. 熟悉Anki的基本操作
3. 已创建好需要添加的字段（通过"管理笔记类型"→"字段"）

修改卡片模板的步骤

1. 定位模板文件

通过Anki界面进入： 管理笔记类型 → 选择你的卡片类型 → 点击"卡片"按钮 → 选择需要修改的模板（正面/背面）

2. 理解模板结构

典型的Anki-Prettify模板结构如下：

<div class="prettify-flashcard">
  <div class="prettify-deck">{{Deck}}</div>
  <div class="prettify-field prettify-field--front">{{edit:Front}}</div>
  {{#Tags}}
  <div class="prettify-tags">{{clickable:Tags}}</div>
  {{/Tags}}
</div>

3. 添加新字段的语法

添加新字段需要遵循以下语法结构：

{{#字段名}}
<div class="prettify-field prettify-field--字段名">{{edit:字段名}}</div>
{{/字段名}}

这种条件判断语法表示：只有当该字段有内容时，才会显示对应的HTML元素。

4. 实际添加示例

假设我们要添加一个名为"Context"的字段：

{{#Context}}
<div class="prettify-field prettify-field--context">
  <b>附加信息：</b>
  <br>
  {{edit:Context}}
</div>
{{/Context}}

5. 样式说明

• prettify-field：基础样式类
• prettify-field--字段名：针对特定字段的样式类（可自定义CSS）
• {{edit:字段名}}：使字段在编辑模式下可编辑

高级技巧

1. 多字段组合

可以将多个字段组合显示：

{{#字段1}}
{{#字段2}}
<div class="combined-fields">
  {{edit:字段1}} - {{edit:字段2}}
</div>
{{/字段2}}
{{/字段1}}

2. 条件显示不同内容

{{#字段A}}
<div class="field-a">{{edit:字段A}}</div>
{{/字段A}}
{{^字段A}}
<div class="no-content">暂无内容</div>
{{/字段A}}

3. 自定义样式

可以通过添加CSS类来自定义字段样式：

<div class="prettify-field custom-style">{{edit:字段名}}</div>

然后在样式表中定义.custom-style的样式。

注意事项

1. 修改前建议备份模板
2. 字段名称区分大小写
3. 每次修改后点击"预览"查看效果
4. 复杂的HTML结构可能会影响移动端显示

结语

通过本文介绍的方法，你可以灵活地为Anki-Prettify卡片添加各种自定义字段，打造完全个性化的学习卡片。记住，合理的字段设计能显著提升学习效率，建议根据实际学习内容需求来规划字段结构。

anki-prettify Collection of customizable Anki flashcard templates with modern and clean themes. 项目地址: https://gitcode.com/gh_mirrors/an/anki-prettify