Display Extra Fields

Suppose you have an extra field called ExtraInfo and you want to display it under the Sentence section on the back side.

First, open the file named _kiku_back.html in your collection.media directory. The contents will look like this:

_kiku_back.html

<!-- Kiku Note v2.0.0
This file is auto-generated. Any manual changes will be lost on save.

... rest of the file

Add ExtraInfo inside a template element:

_kiku_back.html

<template id="ExtraInfo">{{ExtraInfo}}</template>

<!-- Kiku Note v2.0.0
This file is auto-generated. Any manual changes will be lost on save.

... rest of the file

WARNING

Do not modify the rest of the file, even with code formatters (such as Prettier). The generated SSR template is sensitive to whitespaces and newlines.

Now you can include the ExtraInfo field in the Sentence component with _kiku_plugin.js:

_kiku_plugin.js

/**
 * @import { KikuPlugin } from "#/plugins/plugin-types";
 */

/**
 * @type { KikuPlugin }
 */
export const plugin = {
  Sentence: (props) => {
    const { html, createMemo } = props.ctx;

    function ExtraInfo() {
      const $extraInfo = createMemo(() => {
        if ("ExtraInfo" in props.ctx.$ankiFields) {
          return props.ctx.$ankiFields?.ExtraInfo;
        }
        const template = document.getElementById("ExtraInfo");
        return template?.innerHTML;
      });

      if (!$extraInfo()) return null;
      return html`<div class="text-lg text-base-content-calm" innerHTML=${$extraInfo}></div>`;
    }

    return [props.DefaultSentence(), ExtraInfo()];
  },
};

Finally, open the Kiku settings and click Save. This will update Kiku’s Back template using the modified _kiku_back.html.