- 履歴一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 自作プラグイン/note へ行く。
カテゴリ:プラグイン 自作 追加
目次
[表示]
スマホ表示に対応した注釈/脚注プラグイン
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 |
|
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 (ツールチップを選択したりクリックしたりできるようにする)
使用方法
インライン
&tooltip([tippyのプロパティ]){<キーワード>:<注釈>};
キーワードが空欄*2の場合は注釈部分がそのままキーワード扱いになる。キーワードを設定しておけば、2回目以降はキーワードのみ記入する*3ことで同じ注釈を表示できる。
オプション
今のところはtippy関係の設定のみ。
- arrow=true/false
- ツールチップ吹き出しの矢印部分を表示/非表示
- maxWidth=<数値>
- ツールチップの表示幅の最大値
- placement=<位置>
- ツールチップの表示位置
表示位置一覧
使用例
追加したい機能
- 引数でデザイン (背景色、文字色、リンク色等) を変更可能にする
- 設定可能なtippyのプロパティを増やす
備考
- tooltipプラグインと併用する場合tooltipプラグインがv0.4以前だとエラーが起きると思うので注意。
コメント
最新の10件を表示しています。 コメントページを参照