自作プラグイン/note の履歴(No.1)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
自作プラグイン/note へ行く。
- 1 (2021-11-25 (木) 15:15:29)
- 2 (2021-11-25 (木) 15:22:10)
- 3 (2021-11-25 (木) 15:22:10)
- 4 (2021-11-25 (木) 15:22:10)
- 5 (2021-11-26 (金) 21:24:57)
- 6 (2021-11-26 (金) 21:24:57)
- 7 (2021-11-26 (金) 21:24:57)
- 8 (2021-11-26 (金) 21:24:57)

目次 [表示]

スマホ表示に対応した注釈/脚注プラグイン

note.inc.php
製作者	kanateko
ライセンス	GPLv3
バージョン	0.3
動作確認	PukiWiki 1.5.3 - 1.5.4
最終更新	2021-11-25

文中にポップアップ表示可能な注釈を挿入するプラグイン。本家で公開されていた注釈プラグインの仕様をベースに、自作のtooltipプラグインを流用してスマホでも表示できるよう対応させたもの。

ツールチップの表示には「tippy.js」というライブラリを使用している。

このプラグインでできること

文中に挿入された注釈の番号をホバーorタップで内容をポップアップ表示する
- 同じ内容の注釈を同じ番号で管理できる
- 注釈と同時にキーワードを設定可能。2回目以降はキーワードを使えば同じ注釈を表示できる
文中に挿入された注釈はフッタに番号順で表示される
注釈の挿入位置から脚注への移動、またはその逆が可能
- 脚注から挿入位置へ戻る場合は、番号のすぐ横にある「^」を押す

ダウンロード

最新: GitHub

日付	バージョン	備考
2021-11-25	0.3	脚注/注釈のアンカーに飛んだ際、上に余白ができるよう調整
2021-11-24	0.2	脚注から本文に戻るリンクを追加
2021-11-24	0.1	初版作成

インストール

GitHubのtippyフォルダ内にある「tippy.php」および「note.inc.php」 *1 をダウンロードする
ダウンロードしたファイルをpluginフォルダに入れる

skinフォルダの「pukiwiki.skin.php」の以下の部分を変更する

  <?php if ($notes != '') { ?>
- <div id="note"><?php echo $notes ?></div>
+ <div id="note"><?php echo '<ol class="note-foot">' . $notes . '</ol>' ?></div>
  <?php } ?>

(任意) skinフォルダの「pukiwiki.css」の下の方に以下の内容を追加する

/* 注釈/脚注への移動時に上に余白をもたせる */
.note-anchor {
    display: inline-block;
    margin-top: -200px;
    padding-top: 200px;
}
.note-foot li {
    font-size: small;
    margin-top: -200px;
    padding-top: 200px;
}
/* ツールチップ株に表示する脚注へのリンク */
.note-link {
    font-size: small;
    text-align: right;
    margin-top: .5em;
}
/* ツールチップ内のリンクに下線を引く (tooltipプラグインと共通) */
[data-tippy-root] a {
    text-decoration: underline whitesmoke solid 1px;
}
/* ツールチップ内のリンク色を通常の文章と同じにする (tooltipプラグインと共通) */
[data-tippy-root] a:link, [data-tippy-root] a:visited {
    color: unset;
}

プラグインの設定

NOTE_INDEX_FORMAT: 文中に挿入する注釈番号のフォーマット。"%d"部分が数字になる
NOTE_KEYWORD_SEPARATOR: キーワードと注釈のセパレータ
TIPPY_ADD_DEFAULT_SETTINGS (tippy.php): 全てのツールチップの表示設定 (プロパティ) を変更する

animation: shift-toward, (表示位置の方向からのスライドイン/アウト)
allowHTML: true, (HTMLタグの使用を許可する)*4
interactive: true (ツールチップを選択したりクリックしたりできるようにする)

TippyのプロパティについてはAll Props | Tippy.jsを参照

使用方法

インライン

&tooltip([tippyのプロパティ]){<キーワード>:<注釈>};

キーワードが空欄*2の場合は注釈部分がそのままキーワード扱いになる。キーワードを設定しておけば、2回目以降はキーワードのみ記入する*3ことで同じ注釈を表示できる。

オプション

今のところはtippy関係の設定のみ。

arrow=true/false

ツールチップ吹き出しの矢印部分を表示/非表示

maxWidth=<数値>

ツールチップの表示幅の最大値

placement=<位置>

ツールチップの表示位置

表示位置一覧

使用例

ページ内を参照。(注釈1*1、注釈2*2、注釈3*3)

追加したい機能

引数でデザイン (背景色、文字色、リンク色等) を変更可能にする
設定可能なtippyのプロパティを増やす

備考

tooltipプラグインと併用する場合tooltipプラグインがv0.4以前だとエラーが起きると思うので注意。

最新の10件を表示しています。コメントページを参照

styleプラグインの中にnoteプラグインを書くと、styleプラグインの中のものの番号が一番後ろになります。
```
&note{:a};
#style(class=hoge){{
&note{:b};
}}
&note{:c};
&note{:d};
```
と書くと
```
*1
*4
*2
*3
```
という感じになって数字が順番に並びません。（動作はちゃんとしています）
他の自作プラグインとの併用の問題はお門違いかもしれませんが
コメントさせていただきました。 -- 2023-05-27 (土) 00:18:11
- 他のプラグインでも報告がありましたが、これはPukiWiki自体のプラグイン処理の順番に起因するもので、プラグイン側で解決することはできないと思われます。 -- kanateko 2023-05-27 (土) 00:43:01
- 返信ありがとうございます。
  プラグインではなく本体側の原因だったのですね。失礼いたしました。 -- 2023-06-04 (日) 16:57:22

新規コメント追加

コメントを送信