#author("2021-05-20T23:57:26+00:00","default:mizutu","mizutu") * サイト構築 覚書 [#s1730b68] #contents RIGHT:&size(12){※ 最終更新:2021/05/21 }; ** pukiwiki-1.5.2-utf8 でサイト構築 [#ia103bcf] > 今後のバージョンアップに備え、変更箇所はできるだけ少なくする。~ 色のトーンを全体的にグレー・薄いグレー系にする。以下、COLOR(#993333){行数はオリジナルを基準}とする。 *** アップロードサイズ拡張 [#u0f9a958] > アップロードサイズはデフォールトでは 1MB > COLOR(blue){対象ファイル名: plugin/attach.inc.php} - サイズを拡張する。~ > 変更前 ↓↓ 20行目~ define('PLUGIN_ATTACH_MAX_FILESIZE', (1024 * 1024)); // default: 1MB COLOR(red){変更後 ↓↓} define('PLUGIN_ATTACH_MAX_FILESIZE', (1024 * 1024) *30); // default: 1MB *** アップロード権限変更 [#kcedfeae] > ログインユーザーはアップロード許可。削除は管理者のみとする。 > COLOR(blue){対象ファイル名: plugin/attach.inc.php} - ログインユーザーが添付ファイルをアップロードできるようにする~ > 23行目変更~ define('PLUGIN_ATTACH_UPLOAD_ADMIN_ONLY', TRUE); → FALSE - 管理者が添付ファイルを削除するときは、バックアップを作らない~ > 30行目変更~ define('PLUGIN_ATTACH_DELETE_ADMIN_NOBACKUP', FALSE); → TRUE - アップロード/削除時にパスワードを要求する~ > 33行目変更~ define('PLUGIN_ATTACH_PASSWORD_REQUIRE', FALSE); → TRUE *** 画像一覧の表示 [#lf67504e] - 画像表示のとき左と下に空白を開ける > COLOR(blue){対象ファイル名: skin/pukiwiki.css} > 384行目に挿入~ div#body img { margin: 0px 0px 8px 8px; } *** 画像表示の時の左右の空白 [#q813b2cf] - 空白を詰める > COLOR(blue){対象ファイル名: skin/pukiwiki.css} > 599-600行目変更~ margin-left:32px; → 8px margin-right:32px; → 8px *** 外部リンクを別窓にする [#sc12c577] > 外部ページのリンクの際、http:// の先頭に + を付ける(+http:) と別窓でリンクするようにした。~ 参考サイト: [[ロンさん非公式ウイキ>+https://lonwiki.com/?3f411d410a#b1a0b4f2]]~ COLOR(blue){対象ファイル名: lib/make_link.php} - 変更前 ↓↓ 400行目~ (?:(?:https?|ftp|news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+ COLOR(red){変更後 ↓↓} (?:(?:\+?https?|\+?ftp|\+?news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+ - 変更前 ↓↓ 425行目~ return '<a href="' . $this->name . '"' . $rel . '>' . $this->alias . '</a>'; COLOR(red){変更後 ↓↓}~ if (preg_match("/^(\+)(.*)/", $this->name, $regs)) { return '<a href="' . $regs[2] . '" target="_blank" ' . $rel . '>' . $this->alias . '</a>'; }else{ return '<a href="' . $this->name . '"' . $rel . '>' . $this->alias . '</a>'; } *** 外部リンクにマークを付ける [#n5983cd8] > COLOR(blue){対象ファイル名: skin/pukiwiki.css} - 52行目挿入 a[target=_blank] { padding-right: 20px; background:url(../image/external-link.png) right center/11px auto no-repeat; } *** システム設定 [#x8f32928] > COLOR(blue){対象ファイル名: pukiwiki.ini.php} - トップページの変更 128行目 $defaultpage = 'FrontPage'; → '私的AI研究会' - 管理者パスワード 179行目 $adminpass = '{x-php-md5}!'; → $adminpass = '{x-php-md5}パスワード文字列'; - ユーザー名~ >変更前 ↓↓ 245-250行目 $auth_users = array( // Username => password 'foo' => 'foo_passwd', // Cleartext 'bar' => '{x-php-md5}f53ae779077e987718cc285b14dfbe86', // PHP md5() 'bar_passwd' 'hoge' => '{SMD5}OzJo/boHwM4q5R+g7LCOx2xGMkFKRVEx', // LDAP SMD5 'hoge_passwd' ); COLOR(red){変更後 ↓↓} $auth_users = array( // Username => password 'mizutu'=> '{x-php-md5}パスワード文字列', 'tnitta'=> '{x-php-md5}パスワード文字列', 'hokegawa'=> '{x-php-md5}パスワード文字列', 'guest' => '{x-php-md5}パスワード文字列', ); - グループ名~ >変更前 ↓↓ 252-257行目 // Group definition $auth_groups = array( // Groupname => group members(users) 'valid-user' => '', // Reserved 'valid-user' group contains all authenticated users 'groupfoobar' => 'foo,bar', ); COLOR(red){変更後 ↓↓} // Group definition $auth_groups = array( // Groupname => group members(users) 'valid-user' => '', // Reserved 'valid-user' group contains all authenticated users 'edit-user' => 'mizutu,tnitta,hokegawa', 'read-suer' => 'guest', ); - ログインしたユーザーのみ編集許可~ >変更前 ↓↓ 278-285行目 $edit_auth = 0; $edit_auth_pages = array( // Regex Username '#BarDiary#' => 'bar', '#HogeHoge#' => 'hoge', '#(NETABARE|NetaBare)#' => 'foo,bar,hoge', ); COLOR(red){変更後 ↓↓} $edit_auth = 1; $edit_auth_pages = array( // Regex Username '##'=> 'edit-user', ); #br *** 全体の色 [#l7e9505e] > COLOR(blue){対象ファイル名: skin/pukiwiki.css} - テキスト・テキスト背景色 39行目 color:#a63d21 → #888888 56行目 background-color:#DDEEFF → #DDDDDD 63行目 border-bottom:3px solid #DDEEFF → #DDDDDD 63行目 border-top:1px solid #DDEEFF → #DDDDDD 63行目 border-left:1px solid #DDEEFF → #DDDDDD 63行目 border-right:1px solid #DDEEFF → #DDDDDD 75行目 border-left:18px solid #DDEEFF → #DDDDDD 85行目 background-color:#DDEEFF → #DDDDDD 116行目 background-color:#F0F8FF → #EEEEEE - メニュー・バー背景色 352行目変更 padding:4px 0px 0px 0px → 4px 0px 2px 0px 354行目追加 background-color: #F1F1F1; *** テーブル [#j79b5560] > COLOR(blue){対象ファイル名: skin/pukiwiki.css} - 141行目変更~ background-color:#D0D8E0; → #EEEEEE - 151行目変更~ margin:auto; → 15px - 154行目変更~ background-color:#ccd5dd; → #DDDDDD - 167行目変更~ background-color:#ccd5dd; → #FFFFFF *** タイトル・ロゴ [#r72027ea] > COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php} - 80行目変更~ >変更前 ↓↓ <a href="<?php echo $link['top'] ?>"><img id="logo" src="<?php echo IMAGE_DIR . $image['logo'] ?>" width="80" height="80" alt="[PukiWiki]" title="[PukiWiki]" /></a> COLOR(red){変更後 ↓↓} <a href="/"><img id="logo" src="../images/photo02pk.jpg" width="60" height="60" alt="[PukiWiki]" title="[PukiWiki]" /></a> *** タイトルのurlを消す [#e116c15a] > COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php} - 22行目変更 define('SKIN_DEFAULT_DISABLE_TOPICPATH', 1); → 0 - 95行目追加 <?php echo ' ' ?> *** レスポンシブルデザイン [#y8efb22e] > スマートフォンなどのモバイル対応にする。以下のサイトを参考とした。~ [[SEの良心 PukiWiki1.5.2をレスポンシブデザインに変更する!>+https://dajya-ranger.com/pukiwiki/make-responsive-design/]]~ > COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php} - 63行目の下に1行追加 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CONTENT_CHARSET ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - 70行目の下に1行追加 <link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>pukiwiki.css" /> <link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>pukiwiki-rspnsv.css" /> - 157-166行目変更~ >変更前 ↓↓ <?php if ($menu !== FALSE) { ?> <table border="0" style="width:100%"> <tr> <td class="menubar"> <div id="menubar"><?php echo $menu ?></div> </td> <td valign="top"> <div id="body"><?php echo $body ?></div> </td> </tr> </table> <?php } else { ?> COLOR(red){変更後 ↓↓} <?php if ($menu !== FALSE) { ?> <!-- ボディ部の構成を変更 --> <div id="contents"> <div id="menubar"><?php echo $menu ?></div> <div id="body"><?php echo $body ?></div> </div> <?php } else { ?> - COLOR(blue){skin/pukiwiki-respnsv.css} を追加(内容は参考サイトから) #br *** メニューの変更 [#y67ded15] > メニューバーが複雑でわかりにくいので、修正する。参考サイトは下記。~ [[まちゅダイアリー PukiWiki のカスタマイズ>+https://www.machu.jp/diary/20040927.html]]~ >「リロード」→ 削除~ 「バックアップ」→ 「履歴」 いま見ているページの更新履歴(バックアップ)を表示するという機能なので。~ >●ログオフ状態のとき~ [トップ][一覧|検索|履歴|ヘルプ|ログアウト]~ >●ログイン状態のとき~ [トップ][新規|編集|凍結|差分|添付][一覧|検索|履歴|最終更新|ヘルプ|ログアウト]~ > COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php} - 113-151行目変更 >変更前 ↓↓ [ <?php _navigator('top') ?> ] <?php if ($is_page) { ?> [ <?php if ($rw) { ?> <?php _navigator('edit') ?> | <?php if ($is_read && $function_freeze) { ?> <?php (! $is_freeze) ? _navigator('freeze') : _navigator('unfreeze') ?> | <?php } ?> <?php } ?> <?php _navigator('diff') ?> <?php if ($do_backup) { ?> | <?php _navigator('backup') ?> <?php } ?> <?php if ($rw && (bool)ini_get('file_uploads')) { ?> | <?php _navigator('upload') ?> <?php } ?> | <?php _navigator('reload') ?> ] <?php } ?> [ <?php if ($rw) { ?> <?php _navigator('new') ?> | <?php } ?> <?php _navigator('list') ?> <?php if (arg_check('list')) { ?> | <?php _navigator('filelist') ?> <?php } ?> | <?php _navigator('search') ?> | <?php _navigator('recent') ?> | <?php _navigator('help') ?> <?php if ($enable_login) { ?> | <?php _navigator('login') ?> <?php } ?> <?php if ($enable_logout) { ?> | <?php _navigator('logout') ?> <?php } ?> ] <?php } // PKWK_SKIN_SHOW_NAVBAR ?> COLOR(red){変更後 ↓↓} [ <?php _navigator('top') ?> ] <?php if ($is_page) { ?> <?php if ($enable_logout) { ?> [ <?php if ($rw) { ?> <?php _navigator('new') ?> | <?php _navigator('edit') ?> | <?php if ($is_read && $function_freeze) { ?> <?php (! $is_freeze) ? _navigator('freeze') : _navigator('unfreeze') ?> | <?php } ?> <?php } ?> <?php _navigator('diff') ?> <?php if ($do_backup) { ?> | <?php _navigator('backup') ?> <?php } ?> <?php if ($rw && (bool)ini_get('file_uploads')) { ?> | <?php _navigator('upload') ?> <?php } ?> | <?php _navigator('reload') ?> ] <?php } ?> <?php } ?> [ <?php _navigator('list') ?> <?php if (arg_check('list')) { ?> | <?php _navigator('filelist') ?> <?php } ?> | <?php _navigator('search') ?> <?php if ($enable_logout) { ?> | <?php _navigator('recent') ?> | <?php _navigator('help') ?> | <?php _navigator('logout') ?> <?php } ?> <?php if ($enable_login) { ?> | <?php _navigator('login') ?> <?php } ?> ] <?php } // PKWK_SKIN_SHOW_NAVBAR ?> > COLOR(blue){対象ファイル名: js.lng.php}~ - 108行目 変更 $_LANG['skin']['backup'] = 'バックアップ'; → '履歴' #br *** ヘルプを修正できるようにする [#r9b7f613] > 誤植の修正・説明の追加などをできるようにする。COLOR(red){修正後は「凍結」を忘れずに。}~ > COLOR(blue){対象ファイル名: js.lng.php}~ - 92-93行目 変更 $rule_page = 'FormattingRules'; → 'テキスト整形のルール' $help_page = 'Help'; → 'ヘルプ' - 「FormattingRules」をコピーして「テキスト整形のルール」ページを作成。 -「Help」をコピーして「ヘルプ」ページを作成して、冒頭の FormattingRules のリンクを変更する。 #br *** 表示画像のクリックで元画像をポップアップで表示する。 [#ibfa172c] > Light Box を導入して画像表示を改善する。~ 参考サイト: [[pukiwiki1.5.xにLightboxを導入する>+https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=19&cad=rja&uact=8&ved=2ahUKEwjGzezMupbnAhUHM94KHV-cBhIQFjASegQIBBAB&url=http%3A%2F%2Fblog.outdoorwalk.net%2F2017%2F12%2F18%2Fpukiwiki1-5-x%25E3%2581%25ABlightbox%25E3%2582%2592%25E5%25B0%258E%25E5%2585%25A5%25E3%2581%2599%25E3%2582%258B%2F&usg=AOvVaw3m_VjwzTqq5-o7KGhs127g]] [[lightbox2 オフィシャルサイト>+https://lokeshdhakar.com/projects/lightbox2/]]~ COLOR(blue){対象ファイル名: /lib/make_link.php} - lightbox プログラムをダウンロード・コピーする。~ ダウンロードファイル: lightbox2-master.zip [[lightbox2 ダウンロード>+https://github.com/lokesh/lightbox2/tree/master/]]~ 使用するファイル (ファイルがあるフォルダー名)~ lightbox.min.js (lightbox2-master/dist/js/) lightbox-plus-jquery.min.js (lightbox2-master/dist/js/) lightbox.min.css (lightbox2-master/dist/css/) イメージファイル (lightbox2-master/dist/image/) 圧縮ファイルを解答し、スキンフォルダーにコピーする。~ /skin/lightbox2-master/js/lightbox.min.js /skin/lightbox2-master/js/lightbox-plus-jquery.min.js /skin/lightbox2-master/css/lightbox.min.css /skin/lightbox2-master/image/ (イメージファイルすべて) > COLOR(blue){対象ファイル名: plugin/ref.inc.php}~ - 354行目変更 >変更前 ↓↓ $params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>"; COLOR(red){変更後 ↓↓} $params['_body'] = "<a href=\" $url2\" title=\" $title\" rel='lightbox[aiueo]' > {$params['_body']}</a>"; > COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php}~ - 74行目 追加 <script src="skin/lightbox2-master/js/lightbox-plus-jquery.min.js"></script> <script src="skin/lightbox2-master/js/lightbox.min.js"></script> <link href="skin/lightbox2-master/css/lightbox.min.css" rel="stylesheet" /> *** Pukiwikiの「?」(はてな)を表示しない [#ma071758] >参考サイト: [[Pukiwikiの「?」(はてな)を表示しないように>+https://qiita.com/t_n/items/cc23872b670c7ef4ea79]] > COLOR(blue){対象ファイル名: pukiwiki.ini.php}~ - 158行目 変更~ $nowikiname = 0 → 1 *** 動画ファイルの埋め込み [#o629ccb7] >&color(blue){対象ファイル名:plugin/tinyvideo.inc.php};~ 下記のコードをコピーして、plugin ディレクトリに tinyvideo.inc.php というファイル名で保存する。~ <?php /* PukiWiki - Yet another WikiWikiWeb clone. tinyvideo.inc.php, v1.01 2020 M. Taniguchi License: GPL v3 or (at your option) any later version videoタグを出力するPukiWiki用プラグイン。 videoタグの全ての属性や複数source指定には対応しない簡易的なもの。 PukiWiki 1.5.2/PHP 7.3 で動作確認済み。 【使い方】 #tinyvideo(動画ファイル名[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay]) &tinyvideo(動画ファイル名[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay]); 【引数】 動画ファイル名 … 再生する動画ファイル(拡張子 mp4,mov,ogg,webm 等) 幅 高さ … 表示サイズ指定(単位:px)、指定なしなら幅100%・高さ自動 ポスター画像ファイル名 … 再生前に表示したい画像ファイル(拡張子 jpg,jpeg,png,gif,webp)※1 controls … 操作パネル表示 ※2 loop … ループ再生 muted … 音声ミュート autoplay … 自動再生 ※3 ※1 ブラウザー/バージョンによっては再生前に何も表示されないことがあるため、ポスター画像の指定を推奨します。 ※2 ブラウザー内蔵の標準操作パネル。デザインはブラウザーにより異なります。 ※3 実際に自動再生されるかはブラウザーに依存します。特にスマートフォンでは条件が厳しく、常に不可だったり、mutedが必須になるなど。くわしくは「HTML5 videoタグ」等でググって情報収集してください。 【使用例】 &tinyvideo(/videos/sample.mp4,controls); &tinyvideo(/videos/sample.mp4,/images/sample.jpg,controls,loop,muted,autoplay); &tinyvideo(/videos/sample.mp4,320 240,controls); 【CSS】 スキンCSSにおいて、次のセレクターで当プラグインが出力するvideoタグを指定することができます .plugin-tinyvideo */ function plugin_tinyvideo_convert() { list($file, $args[0], $args[1], $args[2], $args[3], $args[4], $args[5]) = func_get_args(); return plugin_tinyvideo_makeVideoTag($file, $args); } function plugin_tinyvideo_inline() { list($file, $args[0], $args[1], $args[2], $args[3], $args[4], $args[5]) = func_get_args(); return plugin_tinyvideo_makeVideoTag($file, $args); } function plugin_tinyvideo_makeVideoTag($file, $args) { static $argNames = array('controls', 'loop', 'muted', 'autoplay'); $attr = ' playsinline'; $size = 'width="100%" height="auto"'; $poster = ''; foreach ($args as $v) { $v = trim($v); if (in_array(strtolower($v), $argNames)) { $attr .= ' ' . $v; } else if (preg_match('/^.+\.(jpe?g|png|gif|webp)$/', $v) == 1) { $poster = ' poster="' . htmlspecialchars($v) . '"'; } else if (preg_match_all('/\d+/', $v, $match) == 2) { $size = 'width="' . (int)$match[0][0] . 'px" height="' . (int)$match[0][1] . 'px"'; } } return '<video class="plugin-tinyvideo" ' . $size . $poster . $attr . '><source src="' . htmlspecialchars($file) .'"/></video>'; } - 使用上の注意点 -- &color(red){ファイルは絶対パスのURLで指定};する。 - 参考サイト [[自作プラグイン/tinyvideo.inc.php>+https://pukiwiki.osdn.jp/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/tinyvideo.inc.php]] *** Site adminの表示 [#j88cfe7d] > COLOR(blue){対象ファイル名: pukiwiki.ini.php}~ - 122行目 変更~ $modifier = 'Masahiro Izutsu'; - 125行目 変更~ $modifierlink = 'http://izutsu.aa0.netvolante.jp/'; *** ページトップボタンを設置 [#z0afa02d] > ページの途中から最初に戻るボタンを配置する。以下のサイトを参考とした。~ [[【jQuery不使用】PukiWikiにページトップボタンを設置する!>+https://dajya-ranger.com/pukiwiki/page-top-button/]]~ > COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php} - 84行目の下あたり<body>タグの下に追加 <!-- TopPage Button --> <img id="page-top-button" src="<?php echo IMAGE_DIR . 'page-top-button.png' ?>"> <script type="text/javascript" src="skin/page-top-button.js"></script> > COLOR(blue){対象ファイル名: skin/pukiwiki-rspncv.css} - 最後に追加 /* ページ本体の画像のレスポンシブ設定 */ div#body img { max-width: 100%; /* 幅の最大値を100%指定 */ height: auto; /* 縦は幅により自動設定 */ } #page-top-button { position: fixed; /* 固定表示 */ right: 20px; /* 右から20ピクセル(任意の位置に設定) */ bottom: 60px; /* 下から60ピクセル(任意の位置に設定)*/ transition: opacity 1s; /* 透過変化時間(1秒) */ opacity: 0; /* 透過(非表示) */ } #page-top-button.fadeIn { position: fixed; /* 固定表示 */ display: block; /* ブロック表示 */ right: 20px; /* 右から20ピクセル(任意の位置に設定) */ bottom: 60px; /* 下から60ピクセル(任意の位置に設定)*/ outline-style: none; /* アウトライン非表示 */ box-shadow: none; /* 影表示なし */ cursor: pointer; /* ポインタカーソル設定 */ z-index: 9999; /* Zオーダで最上位に設定 */ transition: opacity 1s; /* 透過変化時間(1秒) */ opacity: 0.8; /* 非透過80% */ } #page-top-button.fadeIn:hover { transition: opacity 1ms; /* 透過変化時間(0.001秒) */ opacity: 1; /* 非透過100% */ } - COLOR(blue){skin/page-top-button.js} を追加(内容は参考サイトから)~ パーミッションは「644」 - COLOR(blue){image/page-top-button.png} を追加(内容は参考サイトから)~ パーミッションは「644」 *** ページ下部のアイコン表示 [#l4229986] > ログイン時のみ表示するように変更。~ > COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php}~ - 233-266行目あたりに2行追加 >&color(red){変更後(//2020.12.01 2か所) ↓↓}; function _toolbar($key, $x = 20, $y = 20){ $lang = & $GLOBALS['_LANG']['skin']; $link = & $GLOBALS['_LINK']; $image = & $GLOBALS['_IMAGE']['skin']; if (! isset($lang[$key]) ) { echo 'LANG NOT FOUND'; return FALSE; } if (! isset($link[$key]) ) { echo 'LINK NOT FOUND'; return FALSE; } if (! isset($image[$key])) { echo 'IMAGE NOT FOUND'; return FALSE; } echo '<a href="' . $link[$key] . '">' . '<img src="' . IMAGE_DIR . $image[$key] . '" width="' . $x . '" height="' . $y . '" ' . 'alt="' . $lang[$key] . '" title="' . $lang[$key] . '" />' . '</a>'; return TRUE; } ?> <?php if ($enable_logout) { //2020.12.01 ?> <?php _toolbar('top') ?> <?php if ($is_page) { ?> <?php if ($rw) { ?> <?php _toolbar('edit') ?> <?php if ($is_read && $function_freeze) { ?> <?php if (! $is_freeze) { _toolbar('freeze'); } else { _toolbar('unfreeze'); } ?> <?php } ?> <?php } ?> <?php _toolbar('diff') ?> <?php if ($do_backup) { ?> <?php _toolbar('backup') ?> <?php } ?> <?php if ($rw) { ?> <?php if ((bool)ini_get('file_uploads')) { ?> <?php _toolbar('upload') ?> <?php } ?> <?php _toolbar('copy') ?> <?php _toolbar('rename') ?> <?php } ?> <?php _toolbar('reload') ?> <?php } ?> <?php if ($rw) { ?> <?php _toolbar('new') ?> <?php } ?> <?php _toolbar('list') ?> <?php _toolbar('search') ?> <?php _toolbar('recent') ?> <?php _toolbar('help') ?> <?php _toolbar('rss10', 36, 14) ?> <?php } //2020.12.01 ?> </div> <?php } // PKWK_SKIN_SHOW_TOOLBAR ?> *** 「codeprettify.inc.php」プラグインを導入 [#jfc504c5] > ソースコードの表示が簡単になるプラグインを入れる。(google-code-prettifyを利用してソースコードをハイライト表示)~ - 参考サイト~ -- [[「pukiwiki.codeprettify.inc.php」>+https://github.com/makotokw/pukiwiki.codeprettify]] -- [[Google Code Prettifyでソースコードを読みやすく色分けする>+https://rfs.jp/sb/javascript/js-lab/code-prettify.html]]~ -- [[Google Code Prettifyダウンロード>+https://code.google.com/archive/p/google-code-prettify/downloads]]~ - インストール手順~ ++ pukiwiki.codeprettifyをダウンロードする~ ++ ファイルを解凍し、codeprettify.inc.phpをpluginフォルダの下に配置する ++ google-code-prettifyをダウンロードする~ smallがついてるのはコメントや改行などを縮小化したバージョンで機能的にはどちらも同じ、small をダウンロード。~ ++ google-code-prettifyのファイルを解凍し、下記ファイルをskinフォルダの下に置く~ prettify.css prettify.js 「prettify.css」の中の list-style-type:none を list-style-type: decimal に変更しておく。(1行ごとに行番号を表示)~ ++ skin/pukiwiki.skin.phpファイルを編集し、google-code-prettifyのcssファイルとjsファイルを追加する~ ● 74行目あたりに下記を追加~ <link href="skin/prettify.css" rel="stylesheet" type="text/css" charset="utf-8"/> <script src="skin/prettify.js" type="text/javascript" charset="utf-8"></script> さらにbodyタグを変更する~ <body onload="prettyPrint();"> ++ 複数行の引数を有効にする~ pukiwiki.ini.phpを編集し、PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACKのdefineを探して、値を0にする~ ● 56行目あたり~ define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled - 使い方~ -- ブロック型~ #codeprettify{{ <?php echo 'test'; ?> }} -- インライン型~ &codeprettify{<?php echo 'test'; ?>}; -- cssクラスの追加~ codeprettifyプラグインでは関数の第一引数で追加するcssクラス指定ができる。~ #codeprettify(lang-html linenums:1){{ *** ページの一部を折り畳み表示 [#faba8b73] > 「divregion.inc.php」プラグインを導入してページの一部を折りたためるようにする。~ - 参考サイト~ -- [[pukiwikiプラグイン/divregion>+http://tomose.dynalias.net/junk/?pukiwiki%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3/divregion]] - インストール手順~ ++ 上記サイトより「divregion.inc.php_1.1」「enddivregion.inc.php」をダウンロードする。~ ++「divregion.inc.php_1.1」を「divregion.inc.php」に変更。~ ++ 2つのファイルを UTF-8 に変更して保存したものを「plugin」フォルダにコピーする。~ ++ COLOR(blue){対象ファイル名: skin/pukiwiki-rspnsv.css} の最後に追加する。~ #codeprettify(){{ div.divregion{ background-color:#FF0000; color:gray; border:gray 1px solid; } div.divregion_contents{ border-bottom: solid 1px #666e99; } div.divregion_h1{ color:white; background-color:#666e99; padding:1px 4px; } div.divregion_h2{ border-bottom: solid 1px #666e99; border-left: solid 10px #666e99; } }} - 使い方~ divregion と enddivregion とで本文を挟み込むように記載する。~ #codeprettify(){{ #divregion(タイトル) 本文 #enddivregion }} 上記記載により、以下のような表示となる。「タイトル」部分をクリックすることで、折り畳みが開閉される。~ #divregion(タイトル) 本文 #enddivregion - パラメータ~ divregion には、以下のパラメータを使うことができる。~ -- open, close~ 折り畳みの初期状態を指定する。省略は「close」と同じ。 -- hstyle:xx タイトル行のスタイルを指定。「hstyle:h1」と書くと、「h1」指定と同じ意味になる。~ #codeprettify(){{ 例 #divregion(タイトル,hstyle:h1) 本文 #enddivregion }} #divregion(タイトル,hstyle:h1) 本文 #enddivregion -- cstyle:xx 本文用のスタイルを指定。~ 指定されたxxを利用して「div.divregion_contents_xx」のスタイルを適用する。~ -- color:#xxxxx, background-color:#xxxxxx スタイルシート指定を無視して、タイトル部分の文字色/背景色を変更。~ xxxxxは16進(0-9,A-F)指定。「Red」などの文字指定はできない。~ #codeprettify(){{ 例 #divregion(タイトル,color:#FF0000,background-color:#dddddd) 本文 #enddivregion }} #divregion(タイトル,color:#FF0000,background-color:#dddddd) 本文 #enddivregion -- content-color:#xxxxx, content-bgcolor:#xxxxxx スタイルシート指定を無視して、本文部分の文字色/背景色を変更。~ xxxxxは16進(0-9,A-F)指定。「Red」などの文字指定はできない。~ #codeprettify(){{ 例 #divregion(タイトル,content-color:#0000FF,content-bgcolor:#eeeeee) 本文 #enddivregion }} #divregion(タイトル,content-color:#0000FF,content-bgcolor:#eeeeee) 本文 #enddivregion *** faviconの設定方法 [#r3399172] - favicon.ico ファイルを用意しパスを設定する > COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php} > 16行目変更~ $_IMAGE['skin']['favicon'] = 'image/pukiwiki.ico'; *** サイトアイコンの設定方法 [#ce98abd6] - apple-touch-icon-precomposed.png ファイルを用意して、wiki サイトフォルダに設置する。~ (image/ フォルダではうまくいかなかったので、Wikiルートに置く)~ > COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php} > 71行目追加~ <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> ** 更新履歴 [#uadbe6dc] - 2021/04/01 「私的AI研究会」と同期 - 2021/05/21 サイトアイコン #br