html文件anki,GitHub - dempe/anki-layouts: HTML and CSS for my Anki notes.

anki-layouts

HTML and CSS for my Anki notes.

I am pretty happy with the layouts that I've come up with for my Anki cards. Others have expressed similar approval, so I figured I would share them (and back them up) in a repo.

They are a work in progress.

All cards use the same CSS.

Examples

Example Reverse Card with Image

Example with Hint

Note, you click the hint to display it.

Example with Extra

Shows how I use the extra fields to display kanji readings.

Fields

Aside from the Anki default fields (Front, Back, Cloze), all card types use the same 8 fields.

Topic

Source

Extra1

Extra2

Extra3

Audio

Image

Hint

Topic

'Topic' is useful for immediately determining what a card is about. For example,

A card says "Put your raincoat on." What am I supposed to do with this? If the topic is "Spanish", it's obvious that I need to translate the sentence.

"What does :vsp do?" I could add "In Vim, ..." to all my Vim cards, but I've found it's much better to just set the topic - "Vim".

Before having a Topic field, I had cards for Spanish, Japanese, etc. to indicate what I needed to do with a card**. Having this field has greatly cleaned up my cards.

** Note, I use the "single deck" approach that most Vim power users recommend.

Source

It's a good idea to source your cards, so that you can always go back.

This field is more utilitarian than something you really need to see each time. Thus, it's displayed at the bottom in small font.

Extra1, Extra2, Extra3

If you have additional information you want to include about a card but don't want it on the front, put it here.

Due to the Minimum Information Principle, you want to keep your cards as simple as possible - strive to eliminate any extra clauses, adverbs, etc, and put extra information in the extra fields.

For example,

Elaboration on the topic

Examples of the topic

Clarification of terms

Readings for Japanese Kanji

These fields are displayed below the answer field. They are in small font since they are less important than the answer, itself.

Audio

If you didn't know, you can record your own voice directly in the Anki app in addition to linking audio files. Some people do really well hearing the answer in addition to reading it. Consider adding audio to your cards.

The play button is currently not displayed (didn't want more clutter), but I might need to add this back for use on AnkiDroid.

Image

Copy a link or drag-and-drop an image into this field in the Anki editor. Some people do really well having visual cues in addition to the answer. It's also one of the twenty rules of formulating knowledge. Consider adding images to your cards.

Image is displayed below the extra notes, centered and scaled.

Hint

Anki has built in support for hint fields. To use, preface your field (in this case Hint) with hint. See here.

I use this field for various mnemonics - personal stories about a card, "king phillip came over..." type things, etc.

I rarely use this field. If your card is too difficult, try to simplify it by removing extraneous information or splitting it up into multiple cards.

Usage

Import the included sample deck into Anki. This contains the three card types - basic, reversed, and cloze, and will give you the corresponding styles. (Note they are prefaced with "0-" to make them easier to find in the list).