Any way to repeat the same HTML over many cards similarly as you import CSS, so I can more easily change it later?

Anki Card Design
1

Screenshot from 2020-08-06 12-14-51
Screenshot from 2020-08-06 12-14-51695×353 39.4 KB

In semi-pseudo code I’m looking for something like this:

#include <header.html>

<!--HTML that varies between cards pasted here-->

#include <footer.html>

Anticipating questions or doubts:

  • What’s the point of the permanent elements?

These parts of HTML set up very important DIVs across the card. There’s an HTML scaffolding I need to establish before I enter the actual content into the code and then close this DIV scaffolding in the footer.

  • Can’t you just paste that code over to all the cards?

At the moment yes, I am doing that, but it’s been insanely exhausting. I’ve around 10 note types, some have as many as 10 card types inside them, and each card type has two sides, so imagine pasting code into all that stuff.

10 * (avg.) 5 * 2 = 100 code fields!!!

  • If you’ve already pasted that code into some of the cards and it works, why ask the question? Just continue pasting.

Because I like to tinker with my code and upgrade it systematically. Without the import functionality I won’t ever be motivated enough to change my cards, even if I discover some faults. If I ever, ever want to change something in the layout, it will have to entail changing the same code over and over, a hundred times.

  • Merge note types into a bigger note type to cut down on the number of code fields.

Tried it to some extent, but I managed to whittle the number of notes down only so much. Creating even more versatile note type would be a huge undertaking and probably result in a more cluttered code than now.

3 Likes
2

You may be able to achieve what you want (or something similar) with javascript. If you know a little javascript, try the following example:

Template: 
<section class="container">
    <main>
        {{Front}}
    </main>
</section>

<script id="script-front" src="_load_header_footer.js"
    data-tags="{{Tags}}" data-note-type="{{Type}}"
    data-deck="{{Deck}}" data-sub-deck="{{Subdeck}}">
</script>
CSS: 
.card {
    margin: 0;
    font-family: arial;
    font-size: 20px;
    color: black;
    background-color: white;
}
.container {
    margin: 0 auto;
    height: 100vh;
    width: 80vw;
    display: grid;
    grid-template-rows: 1fr 3fr 1fr;
    justify-content: center;
    align-content: center;
}
header {
    background-color: #FFCDD2;
}
footer {
    background-color: #C5CAE9;
}
main {
    background-color: #DCEDC8;
}
_load_header_footer.js: 
var scriptTag = document.querySelector('#script-front');
var headerHTML = `
<h2>Header</h2>
`;
var footerHTML = `
<h2>Footer</h2>
<p>Tags: ${scriptTag.dataset.tags}</p>
<p>Note Type: ${scriptTag.dataset.noteType}</p>
<p>Deck: ${scriptTag.dataset.deck}</p>
<p>Sub Deck: ${scriptTag.dataset.subDeck}</p>
`;

var headerElement = document.createElement('header');
headerElement.innerHTML = headerHTML;
var footerElement = document.createElement('footer');
footerElement.innerHTML = footerHTML;
var container = document.querySelector('.container');
container.insertAdjacentElement('afterbegin', headerElement);
container.insertAdjacentElement('beforeend', footerElement);

Screenshot (on Anki2.1.30beta / AnkiDroid2.12.1):

load_header_footer
load_header_footer1134×806 96.1 KB

If you want to change the header or footer, just modify the javascript file. I highly recommend you use Refresh Media References add-on to ensure that modifications to the javascript file are reflected in ankiweb when syncing. Out of the box the add-on is not compatible with Anki 2.1, but as someone wrote in “Reviews” section in the add-on’s page, if you download source files from github, and comment out a single line, it should work on 2.1.

on 3/17/2019
The addon is pretty good.
You can make it work on 2.1 by downloading from github and commenting out the line with “clearMemoryCaches()”, it only loses part of it’s functionality

3 Likes
3

For anyone stumbling on this topic, I just learned a different, less robust, but definitely simpler solution.
Here it is:

There’s a batch editor add on which doesn’t do this explicitly but would achieve the aim: ie enter the HTML for each card, then if you need to tweak it later you could use the batch editor to do it simply.

Even with making the card you could use it to simplify that process. Enter some placeholder text at the top and bottom of the card, then use batch editor to replace it with the desired HTML once you’re done.

See: https://ankiweb.net/shared/info/291119185

source: jakepat13 comments on Any way to repeat the same HTML over many cards similarly as you import CSS, so I can more easily change it later?

4

Could I use this to basically load the entire HTML of the front Card from an external file?

I’m trying to find a way to have external front and back HTML + external css, so that I can edit them with an external editor and manage changes with git.

At the moment changing a note template involves copying/ pasting between the front/back/styling of the card template and a text editor, then commit, etc.

I would like to manage the process from the editor and have Anki load the code from the external files

1 Like