脚注に番号付けフォーマットを追加

特徴
1

サイトのエディターで脚注を作成すると、プレビューでは次のようになります。

image
image598×271 9.74 KB

しかし、投稿では次のようになります。

image
image906×355 20.8 KB

これは意図したものでしょうか？設定可能な動作ですか？

また、番号付きの脚注を選択できる機能があると嬉しいです。例えば、[1]、1、①、または伝統的な順序の *、†、‡、§、‖、¶、あるいは一般的に使用される * ** *** **** のような異なるスタイルで表示できると良いでしょう。

2

プラグインOPによると、…はインライン展開であり、この設定で制御できるとのことです。

「いいね！」 1
3

ああ、ありがとう。そこにあるのに、完全に気づきませんでした。

本当に欲しいのは、番号付きの動作ですが、インライン展開で、おそらく下部に展開可能な「脚注」のようなものです。

「いいね！」 3
5

それは素晴らしいでしょう。私は、省略記号ボタン … がテキストをかなり中断させてしまうと感じており、はるかに 上付き文字を好みます。エディターのプレビューペインでは、番号付きの脚注が一番下に表示され、2つのラベル（インラインとフッターの脚注）は互いにハイパーリンクのように見えますが、それはプログラムコードの label() 参照だけかもしれません。一番下の「脚注」（これは冗長に話すケースであるべきですが、この関数でインラインノートとフットノートを混在させているためそうではありません）は、リンクアンカーとして「戻る」文字「↩︎」さえ使用しています。

設定をテストするための Discourse インストールはありませんが、display_footnotes_inline をオフにすると標準の APA 脚注が生成されることを願っています。

インラインノートには場所があり、dscuss.python.org ではインラインと脚注のどちらが好ましいかについてコンセンサスはありません。どちらも好きで、欲しいのですが、インラインノートには改善の余地があります。議論中にまとめたリストを以下に示します。

  1. PRO: 便利。クリックすると表示されます。
    CON: クリックしても簡単に非表示にできません。クリック前にマウスを動かす必要があります（幸いなことに、ソフトウェアは非常に変更可能です）。
    FOOTNOTE: メッセージ/投稿エディターのプレビューペインでレンダリングされた脚注には、ノートに素早く便利にジャンプしたり、本文に戻ったりするために使用できそうなハイパーリンクがあります。ノート自体は、ハイパーリンクとして「戻る」文字さえ使用しています。

  2. PRO: 便利。その場でノートを読んで次に進みます。
    CON: 現在の実装では視覚的に邪魔になります。
    省略記号ボタンのグラフィックは、周囲のテキストとは大きく対照的であり、美的ではありません（幸いなことに、ソフトウェアは非常に変更可能です。テーマが見えます）。省略記号は、その目的を果たしながら、はるかに小さくすることができます。
    FOOTNOTE: 脚注の上付き文字は微妙です。特にダークテーマの低コントラストのハイパーリンクテキストではそうです。

  3. PRO: 短い補足ノートに適しています。
    CON: 長い文章はテキストをオーバーレイし、段落内の読者の位置を妨げます。視覚的に、それは不快な場合があります。
    FOOTNOTE: 脚注は事実上付録であるため、読者の本文の「流れ」を妨げることなく長くなる可能性があります。
    FOOTNOTE: クリーン/クリアな背景にマージンを付けて表示される脚注は、メッセージ/投稿本文のテキストにオーバーレイされたポップアップノートよりもスムーズ（ノイズが少ない）な表示です。

「いいね！」 1
6

少し遅れてしまいましたが、注釈をツールチップで表示したまま、エリプシスではなく番号を表示するには、次のCSSスニペットを使用できます。

.cooked.inline-footnotes {
  counter-reset: foot-note;
}

.inline-footnotes a.expand-footnote {
  text-decoration: none !important;
  font-size: 0.77em;
  vertical-align: super;
  min-height: unset;
  border: 1px solid var(--primary-medium);
  padding: 0 0.4em;
  vertical-align: super;
}

.inline-footnotes a.expand-footnote:before {
    counter-increment: foot-note;
    content: counter(foot-note);
}

.inline-footnotes a.expand-footnote svg {
  display: none;
}

/* 以下は追加のカスタマイズです */

#footnote-tooltip {
  border: 1px solid var(--primary-medium);
}

#footnote-tooltip #arrow:before {
  border-top: 1px solid var(--primary-medium);
  border-left: 1px solid var(--primary-medium);
}

#footnote-tooltip[data-popper-placement^=bottom]>#arrow {
  top: -6px !important;
}

結果は次のようになります。

image
image1247×631 103 KB

「いいね！」 8
7

わー、すごいですね @iamntz、ぜひ使わせていただきます :slight_smile:

「いいね！」 2
9

素晴らしい仕事です。フォーラムにデプロイしたところ、驚くほどうまく機能しました！

「いいね！」 2