Custom HTML (Overrides)
Overview¶
An easy way to override and extend parts of the card templates is by using an
overrides
folder.
This folder (specified under config.py
under the templates-override-folder
option)
allows you to override any file under the src
folder (outside of scss
files).
Primarily, this allows you to override sections of template code found under
src/jp-mining-note
, such as src/jp-mining-note/partials/hint.html
.
The structure of the overrides
folder must match the structure in the src
folder.
For example, if you want to override the hint file (src/jp-mining-note/partials/hint.html
),
the new file must be created under overrides/jp-mining-note/partials/hint.html
Example (Add external links)¶
Warning
The following is deprecated starting from Version 0.10.3.0.
Version 0.10.3.0 allows the user to customize
external links in the compile options (config.py
).
This is only here to serve as a placeholder example (while I try to think of other practical examples people would use). Let me know if you have any ideas!
Let's say we want to rewrite the Extra Info
section to have external links that search
for the tested word.
-
Look for the partial within the
src
folder.
This leads us to thesrc/jp-mining-note/partials/extra_info.html
file. -
Override the partial.
Now that we know the location of the partial, we create the same file inoverrides
. This new file should be of the pathoverrides/jp-mining-note/partials/extra_info.html
. -
Write the code.
Using the partial undersrc
as an example, the following code is a modified version of the original HTML where we removed the dependency on thePAGraphs
andUtilityDictionaries
fields. Additionally, at the very bottom, a link to Jisho and Yourei is provided.Copy and paste the code below to your newly created file (
overrides/jp-mining-note/partials/extra_info.html
).Extra Info with External Links
<details class="glossary-details glossary-details--small" id="extra_info_details"> <summary>Extra Info</summary> <blockquote class="glossary-blockquote glossary-blockquote--small highlight-bold"> <div class="glossary-text glossary-text--extra-info"> {% call IF("PAGraphs") %} <div class="pa-graphs"> {{ T("PAGraphs") }} </div> {% endcall %} {% call IF("UtilityDictionaries") %} <div class="utility-dicts"> {{ T("UtilityDictionaries") }} </div> {% endcall %} <a href="https://jisho.org/search/{{ T('Word') }}">辞書</a >・<a href="http://yourei.jp/{{ T('Word') }}">用例</a> </div> </blockquote> </details>
-
Rebuild and reinstall the template.
After rebuilding and reinstalling, yourExtra Info
section should now have two links at the bottom.