Anki 官方文档翻译

卡片样式

Card Styling

你可以在 YouTube 上观看一段关于卡片样式的视频在新窗口打开。视频显示了 Anki 2.0 的界面，但概念基本相同。

You can watch a video about styling cards on YouTube. The video shows Anki 2.0’s interface, but the concepts are largely the same.

通过单击“背面内容模板”按钮旁边的“样式”按钮，可以访问卡片的样式部分。在该部分中，你可以更改卡片的背景色、默认字体、文本对齐方式等。

The styling section of the Cards screen can accessed by clicking the "Styling" button next to the "Back Template" button. In that section, you can change the background color of the card, the default font, the text alignment, and so on.

font-family

要在卡片上使用的字体的名称。如果你的字体中有空格，比如“MS Unicode”，那么你需要像这句话一样用双引号把字体名称括起来。也可以在一张卡片上使用多种字体；有关这方面的信息，请参阅下文。

The name of the font to use on the card. If your font has spaces in it like "MS Unicode", then you need to surround the font name in double quotes as in this sentence. It is also possible to use multiple fonts on one card; for information on that, please see below.

font-size

字体的大小（以像素为单位）。更改时，请确保在末尾保留 px。

The size of the font in pixels. When changing it, make sure you leave px at the end.

text-align

文本应居中、向左还是向右对齐。

Whether the text should be aligned in the center, left, or right.

color

文本的颜色。简单的颜色名称，如“blue”、“lightyellow”等都可以使用，或者你可以使用 HTML 颜色代码来选择任意颜色。请查看此网页在新窗口打开了解更多信息。

The color of the text. Simple color names like 'blue', 'lightyellow', and so on will work, or you can use HTML color codes to select arbitrary colors. Please see this webpage for more information.

background-color

卡片的背景颜色。

The color of the card background.

任何 CSS 都可以放在样式部分——例如，高阶用户可能希望添加背景图像或渐变。如果你想知道如何获得一些特定的格式，请在网上搜索有关如何使用 CSS 的信息，因为有大量的文档可用。

Any CSS can be placed in the styling section – advanced users may wish to do things like add a background image or gradient, for example. If you’re wondering how to get some particular formatting, please search the web for information about how to do it in CSS, as there is a great deal of documentation available.

样式在所有卡片之间共享，这意味着当你进行调整时，它将影响该笔记模板的所有卡片。但是，也可以指定特定于卡片的样式。以下示例将在除第一张外的所有卡片上使用黄色背景：

The styling is shared between all cards, which means that when you make an adjustment it will affect all cards for that note type. It is also possible to specify card-specific styling, however. The following example will use a yellow background on all cards except the first one:

.card {
  background-color: yellow;
}
.card1 {
  background-color: blue;
}

调整图片大小

Image Resizing

默认情况下，Anki 会缩小图像以适应屏幕。你可以通过在样式部分的底部添加以下内容来更改此设置（在默认的.card { ... }之外）：

Anki shrinks images to fit the screen by default. You can change this by adding the following to the bottom of your styling section (outside of the default .card { ... }):

img {
  max-width: none;
  max-height: none;
}

AnkiDroid 有时难以缩放图像以适应屏幕在新窗口打开。使用 css 设置最大图像尺寸应该可以解决这个问题，但从 AnkiDroid 2.9 开始似乎被忽略了。修复方法是对每个样式指令追加!important，例如：

AnkiDroid sometimes has trouble scaling images to fit the screen. Setting maximum image dimensions using css should fix this, but seems to be ignored as of AnkiDroid 2.9. A fix is to append !important to each style directive, for example:

img {
  max-width: 300px !important;
  max-height: 300px !important;
}

如果你试图更改图像的样式，发现出现在标记卡片上的星星受到了影响（例如，它变得太大），你可以用以下方法瞄准它：

If you try to change the style for images and find that the star that appears on marked cards is affected (for instance, it becomes way too large), you can target it with the following:

img#star {
  ...;
}

你可以使用 Chrome 以交互方式探索卡片的样式：

You can explore the styling of cards interactively by using Chrome:

https://addon-docs.ankiweb.net/porting2.0.html#webview-changes在新窗口打开 Anki 2.1.50+本机支持在编辑器中调整图像大小。

Anki 2.1.50+ supports image resizing within the editor natively.

字段样式

Field Styling

默认样式适用于整张卡片。你也可以让卡片的某些字段或部分使用不同的字体、颜色等。这在学习外语时尤为重要，因为除非选择了合适的字体，否则 Anki 有时无法正确显示字符。

The default styling applies to the whole card. You can also make certain fields or part of the card use a different font, color, and so on. This is particularly important when studying foreign languages, as Anki will sometimes be unable to correctly display characters unless an appropriate font has been chosen.

假设你有一个“Expression”字段，并且你想给它一个 OSX Thai 字体“Ayuthaya”。想象一下，你的模板已经显示：

Say you have an “Expression” field, and you want to give it the OSX Thai font “Ayuthaya”. Imagine your template already reads:

What is {{Expression}}?

{{Notes}}

我们需要做的是将我们想要设置样式的文本包装在一些 HTML 中。我们将把以下内容放在正文前面：

What we need to do is wrap the text we want to style in some HTML. We will put the following in front of the text:

<div class=mystyle1>

后面是：

And the following behind it:

</div>

通过像上面那样包装文本，我们告诉 Anki 使用一个名为“mystyle1”的自定义样式来设计包装文本的样式，我们稍后将创建该样式。

By wrapping the text like the above, we tell Anki to style the wrapped text with a custom style called “mystyle1”, which we will create later.

因此，如果我们想要整个“What is …​?”” Expression 使用泰语字体时，我们会使用：

Thus if we wanted the entire “What is …​?” expression to use the Thai font, we would use:

<div class=mystyle1>What is {{Expression}}?</div>

{{Notes}}

如果我们只想让 Expression 字段本身使用泰语字体，我们会使用：

And if we wanted only the expression field itself to use the Thai font, we’d use:

What is <div class=mystyle1>{{Expression}}</div>?

{{Notes}}

编辑完模板后，我们现在需要转到模板之间的样式部分。在编辑它之前，它应该看起来像：

After we’ve edited the template, we now need to move to the Styling section between the templates. Before editing it, it should look something like:

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

将你的新样式添加到底部，使其看起来像：

Add your new style to the bottom, so it looks like:

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

.mystyle1 {
  font-family: ayuthaya;
}

你可以在样式中包含所需的任何样式。如果你也想增加字体大小，你可以将 mystyle1 部分更改为：

You can include any styling you want in the style. If you wanted to increase the font size too, you’d change the mystyle1 section to look like:

.mystyle1 {
  font-family: ayuthaya;
  font-size: 30px;
}

还可以将自定义字体与你的牌组捆绑在一起，这样你就不需要在计算机或移动设备上安装它们。有关详细信息，请参阅安装字体部分。

It’s also possible to bundle custom fonts with your deck, so you don’t need to install them on your computer or mobile device. Please see the installing fonts section for more info.

重复播放音频按钮

Audio Replay Buttons

当你的卡中包含音频或文本到语音时，Anki 将显示你可以单击以重播音频的按钮。

When audio or text to speech is included on your cards, Anki will show buttons you can click on to replay the audio.

如果你不想看到按钮，可以在首选项中隐藏它。

If you prefer not to see the buttons, you can hide them in the preferences screen.

你可以在卡片样式中自定义它们的外观，例如，为了使它们更小、颜色更鲜艳，你可以使用以下方法：

You can customize their appearance in your card styling, for example, to make them smaller and colored, you could use the following:

.replay-button svg {
  width: 20px;
  height: 20px;
}
.replay-button svg circle {
  fill: blue;
}
.replay-button svg path {
  stroke: white;
  fill: green;
}

文本方向

Text Direction

如果你使用从右到左书写的语言，如阿拉伯语或希伯来语，你可以将 CSS direction属性添加到.card部分，以便在学习期间正确显示：

If you use a language that is written right-to-left, such as Arabic or Hebrew, you can add the CSS direction property to the .card section for correct display during review:

.card {
  direction: rtl;
}

这将改变整个卡片文字的方向。你可以通过将某些字段的引用包装在某些 HTML 中来更改它们的方向：

This will change the direction of the entire card. You can change the direction of only certain fields by wrapping their references in some HTML:

<div dir="rtl">{{Front}}</div>

要更改编辑器中字段的文本方向，请参阅编辑部分。

To change the direction of fields in the editor, please see the editing section.

其他 HTML

Other HTML

你的模板可以包含任意的 HTML，这意味着互联网网页上使用的所有布局也可以在你的卡片上使用。诸如表、列表、图像、到外部页面的链接等等都是受支持的。以表格为例，你可以更改布局，使卡片的正面和背面显示在左侧和右侧，而不是顶部和底部。

Your templates can contain arbitrary HTML, which means that all the layout possibilities used on internet web pages can also be used on your cards. Things like tables, lists, images, links to external pages and so on are all supported. With tables for example, you could change the layout so that the front and back of a card appear on the left and right instead of the top and bottom.

涵盖 HTML 的所有功能不在本手册的范围内，但如果你想了解更多信息，网上有很多很好的 HTML 入门指南。

Covering all of HTML’s features is outside the scope of this manual, but there are plenty of good introductory guides to HTML available on the web if you’d like to learn more.

浏览器外观

Browser Appearance

如果你的卡片模板很复杂，可能很难阅读卡片列表中的问答栏（称为“正面”和“背面”）。“浏览器外观”选项允许你定义仅在浏览器中使用的自定义模板，因此你可以只包括重要字段，并根据需要更改顺序。语法与标准卡片模板中的语法相同。

If your card templates are complex, it may be difficult to read the question and answer columns (called "Front" and "Back") in the card list. The "browser appearance" option allows you to define a custom template to be used only in the browser, so you can include only the important fields and change the order if you desire. The syntax is the same as in standard card templates.

特定平台的 CSS

Platform-Specific CSS

Anki 定义了一些特殊的 CSS 类，允许你为不同的平台定义不同的样式。下面的示例显示了如何根据你查看的位置更改字体：

Anki defines some special CSS classes that allow you to define different styling for different platforms. The example below shows how to vary the font depending on where you’re reviewing:

/* Windows */
.win .example {
  font-family: "Example1";
}
/* macOS */
.mac .example {
  font-family: "Example2";
}
/* Linux desktops */
.linux:not(.android) .example {
  font-family: "Example3";
}
/* both Linux desktops, and Android devices */
.linux .example {
  font-family: "Example4";
}
/* both Android and iOS */
.mobile .example {
  font-family: "Example5";
}
/* iOS */
.iphone .example,
.ipad .example {
  font-family: "Example6";
}
/* Android */
.android .example {
  font-family: "Example7";
}

在模板中：

And in the template:

<div class="example">{{Field}}</div>

在使用 AnkiWeb 时，你还可以使用 .gecko、.opera 和.ie 等属性来选择特定的浏览器。请参阅 http://rafael.adm.br/css_browser_selector/在新窗口打开查看完整的选项列表。

You can also use properties like .gecko, .opera, and .ie to select particular browsers when using AnkiWeb. Please see http://rafael.adm.br/css_browser_selector/ for a full list of options.

安装字体

Installing Fonts

如果你在没有安装新字体权限的工作或学校计算机上使用 Anki，或者你在移动设备上使用 Anki，可以直接向 Anki 添加字体。

If you’re using Anki on a work or school computer where you don’t have permission to install new fonts, or you’re using Anki on a mobile device, it’s possible to add fonts directly to Anki.

若要向 Anki 添加字体，字体必须为 TrueType 格式。TrueType 字体的文件名以.ttf 结尾，例如“Arial.ttf”。找到 TrueType 字体后，我们需要将其添加到媒体文件夹中：

To add a font to Anki, it must be in the TrueType format. TrueType fonts have a filename ending in .ttf, such as "Arial.ttf". Once you’ve located a TrueType font, we’ll need to add it to the media folder:

  1. 重命名文件，在开头添加下划线，使其看起来像_arial.ttf。添加下划线将告诉 Anki 此文件将用于模板，在检查未使用的介质时不应删除。

    Rename the file, adding an underscore at the start, so it becomes like _arial.ttf. Adding an underscore will tell Anki that this file will be used on a template, and should not be deleted when checking for unused media.

  2. 在计算机的文件浏览器中，转到 Anki 文件夹，然后转到名为“用户 1”的文件夹（如果你重命名/添加了账户，则为你的账户名）。

    In your computer’s file browser, go to your Anki Folder, and then a folder called "User 1" (or your profile name if you’ve renamed/added profiles).

  3. 在文件夹中，你应该看到一个名为 collection.media 的文件夹。将重命名后的文件拖动到该文件夹中。

    Inside the folder, you should see a folder called collection.media. Drag the renamed file to that folder.

在上面步骤之后，要更新模板：

After that, we need to update the template:

  1. 单击主屏幕顶部的“添加”，然后用左上角按钮选择要更改的笔记模板。

    Click Add at the top of the main screen, and then select the note type you want to change with the top left button.

  2. 单击“卡片”

    Click Cards.

  3. 在样式部分，将以下文本添加到底部（在最后一个 } 字符之后），将_arial.ttf替换为复制到媒体文件夹中的文件名：

    In the styling section, add the following text to the bottom (after the last } character), replacing _arial.ttf with the name of the file you copied into your media folder:

@font-face {
  font-family: myfont;
  src: url("_arial.ttf");
}

只更改 “arial” 部分，不要更改 “myfont”。

Only change the "arial" part, not the "myfont" part.

之后，你可以更改整个卡片的字体，也可以更改单个字段的字体。要更改整个卡片的字体，只需在.card 部分找到 font-family:：行，然后将字体更改为“myfont”。要仅更改某些字段的字体，请参阅上面的字段样式说明。

After that, you can either change the font for the entire card, or for individual fields. To change the font for the entire card, simply locate the font-family: line in the .card section and change the font to "myfont". To change the font for only certain fields, please see the Field Styling instructions above.

请确保文件名完全匹配。如果该文件名为 arial.TTF，并且你在卡模板中写入了 arial.ttf 则它将不起作用。

Please make sure the filenames match exactly. If the file is called arial.TTF and you write arial.ttf in your card templates, it will not work.

夜间模式

Night Mode

当在首选项中启用夜间模式时，你可以自定义模板的显示方式。

You can customize the way templates appear when night mode is enabled in the preferences screen.

如果你想要一个浅灰色的背景，你可以使用这样的东西：

If you wanted a lighter grey background, you could use something like:

.card.nightMode {
  background-color: #555;
}

如果你有“myclass”样式，当启用夜间模式时，以下内容将以黄色显示文本：

If you have a 'myclass' style, the following would show the text in yellow when night mode is enabled:

.nightMode .myclass {
  color: yellow;
}

淡出和滚动

Fading and Scrolling

默认情况下，Anki 会自动滚动到答案。它查找id＝answer的 HTML 元素，然后滚动到该元素。你可以将 id 放在另一个元素上以调整滚动位置，或者删除id=answer以关闭滚动。

Anki will automatically scroll to the answer by default. It looks for a HTML element with id=answer, and scrolls to that. You can place the id on a different element to adjust the scrolling position, or remove the id=answer to turn off scrolling.

卡片的问题面在默认情况下会逐渐消失。如果你希望调整此延迟，你可以将以下内容放在前卡模板的顶部：

The question side of a card fades in by default. If you wish to adjust this delay, you can place the following at the top of your front card template:

<script>
  qFade = 100;
  if (typeof anki !== "undefined") anki.qFade = qFade;
</script>

100 毫秒是默认值；设置为 0，淡出将被禁用。

100 (milliseconds) is the default; set to 0 to disable fading.

Javascript

由于 Anki 卡被视为网页，因此可以通过卡模板在卡上嵌入一些 Javascript。为了获得好的参考，请阅读论坛上的这篇文章在新窗口打开。

As Anki cards are treated like webpages, it is possible to embed some Javascript on your cards via the card template. For a good reference please read this post in the forums.

因为 Javascript 是一项高级功能，很多事情都可能出错，所以提供 Javascript 功能时没有任何支持或保证。我们不能在编写 Javascript 方面提供任何帮助，也不能保证你编写的任何代码在未来的 Anki 更新中都能继续工作而不进行修改。如果你不愿意自己解决遇到的任何问题，请避免使用 Javascript。

Because Javascript is an advanced feature and so many things can go wrong, Javascript functionality is provided without any support or warranty. We can not provide any assistance with writing Javascript, and can not guarantee any code you have written will continue to work without modification in future Anki updates. If you are not comfortable addressing any issues you encounter on your own, then please avoid using Javascript.

每个 Anki 客户端可能实现不同的卡片显示，因此你需要跨平台测试行为。许多客户端是通过保持一个长时间运行的网页并在学习卡片时动态更新其中的部分来实现的，因此你的 Javascript 需要使用 document.getElementById()之类的东西来更新文档的部分，而不是像 document.write() 那样做。

Each Anki client may implement card display differently, so you will need to test the behaviour across platforms. A number of clients are implemented by keeping a long running webpage and dynamically updating parts of it as cards are reviewed, so your Javascript will need to update sections of the document using things like document.getElementById() rather than doing things like document.write().

window.alert 等函数也不可用。Anki 会将 javascript 错误写入终端，因此如果你在 Mac 或 Windows 计算机上运行，则需要手动捕获错误并将其写入文档中才能查看。没有可用的调试器，所以要找出问题，你需要分解代码，直到发现哪些部分导致了问题。

Functions like window.alert are also not available. Anki will write javascript errors to the terminal, so if you’re running on a Mac or Windows computer, you’ll need to manually catch the errors and write them to the document to see them. There is no debugger available, so to figure out problems you’ll need to break down your code until you discover which parts are causing problems.