#author("2021-07-28T17:30:26+09:00","default:kanateko","kanateko")
#tag(プラグイン,自作,追加)

CENTER:#ref(blogcard.jpg,center,nolink,wrap,400x0)

#contentsx
*ブログカード風リンク作成プラグイン [#x4043488]

#style(class=table_float_right){{
|>|~card.inc.php|h
|RIGHT:100|150|c
|~製作者|kanateko|
|~ライセンス|GPLv3|
|~バージョン|2.0|
|~動作確認|PukiWiki 1.5.3 ～|
|~最終更新|2021-07-28|

}}

指定範囲のリンクを全てブログカード風のリンクに置き換える事ができる。#lsなどページを一覧表示するプラグインと組み合わせることで、ブログの記事一覧のようなページが作れる。

-このプラグインでできること
--指定範囲内にあるリンクを全てブログカード風に変換する。
--変換したカードを指定したカラム数で表示する。 (1～6)
--サムネイルのキャッシュを作成し、表示を高速化する。
--リンク先ページが更新された場合はキャッシュも更新する。
--レスポンシブ対応。
--[リクエスト] 指定した見出しをページから抜き出してカードに表示する。
#clear

*ダウンロード[#nc904a0b]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|2021-07-28|2.0|#ul(定数 (設定項目) を整理、名称を変更,カード表示エリアの幅を固定化、幅の設定はCSS側に移行,上記に伴って幅の固定化を切り替える設定項目を廃止,カードを縦長表示するカラム数の閾値の設定を追加,各カードの幅をCSSのgridレイアウトで制御するように変更,指定した見出しをデスクリプションの代わりに表示する機能を追加)|
|2021-07-26|1.5|#ul(webpに対応,スラッシュが2つ以上入ったページにある画像がうまく取得できなかった問題を修正)|
|2021-06-29|1.4|#ul(プラグインの呼び出し毎に個別のIDを割り振る機能を追加)|
|2021-06-20|1.3|#ul(画像が縦長の場合にサムネイルの切り抜きを画像の上端に合わせるか設定する機能を追加,存在しないページが含まれている場合にエラーを出すかどうかを設定できるように変更)|
|2021-04-07|1.2|#ul(ベースネーム表示機能追加,カラム数を複数回指定するとエラーが表示されるよう変更,その他バグ修正等)|
|2021-04-04|1.1|#ul(カラム数指定時に確実に引数をintで取得できるよう修正,カードの高さをプラグイン側で調整するよう変更,カラム数2以下の場合はスマホでも横長のカードになるよう変更 (cssの変更のみ))|
|2021-04-01|1.0|#ul(サムネイルの更新機能追加,エイリアスに対応,公開に向けて様々なオプションを追加)|
|2021-03-31|0.6|#ul(サムネイルのキャッシュ機能追加,カラム数指定機能追加)|
|2021-03-30|0.2|初版作成|

*インストール [#ma9d057e]
+GitHubから「card.inc.php」フォルダをダウンロードし、中にはいっている「plugin」と「image」フォルダをPukiWikiのフォルダに入れる。必要に応じて「image」の中にある「eyecatch.jpg&note{:リンク先に画像がない場合に変わりに表示するサムネイル画像};」を置き換える。
+「skin」フォルダ内の「card.css」の内容をpukiwiki.cssに追加する。
+PukiWikiの設定でマルチラインプラグインを許可する。

pukiwiki.ini.phpの56行目
#prism(php){{
 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}

*プラグイン設定 [#l10e79ce]
:CARD_DISPLAY_VERTICAL_THRESHOLD|カードを縦長表示に変更するカラム数の閾値。
:CARD_HIDE_DESCRIPTION_THRESHOLD|カードの説明文を非表示にするカラム数の閾値。
:CARD_ALLOW_CACHE_THUMBNAILS|サムネイルのキャッシュ生成を許可するかどうか。
:CARD_THUMB_DIR|サムネイルのキャッシュを保存するディレクトリ。
:CARD_USE_SHORT_URL|短縮URLを使用しているかどうか。 (参照: [[PukiWikiのクソ長いURLをURL短縮ライブラリを組み込んで解決する！ | SEの良心:https://dajya-ranger.com/pukiwiki/embed-url-shortener/]])
:CARD_USE_FONTAWESOME_ICON|[[Font Awesome:https://fontawesome.com/]]のアイコンを使用するかどうか。 (更新日時の時計アイコン)
:CARD_FORCE_BASENAME|強制的にベースネームを表示
:CARD_ERROR_ON_NO_EXISTS|存在しないページが含まれている場合にエラーを出すかどうか
:CARD_IMAGE_BASELINE_TOP|画像が縦長の場合にサムネイルの切り抜きを上端に合わせるかどうか

*使用方法 [#gf4f575f]
 #card([1-6][,オプション]){{
 [[リンク1]]
 [[リンク2]]
 
 or
 
 #ls
 
 etc...
 }}
カラム数1の場合は記述を省略可。
リンクが1個の場合は小括弧内にリンクを置くだけでもOK。 (ブランケット必須)

 #card([[リンク]])

:オプション|
--''base''
階層化されたページ名の場合、ベースネーム (階層化されたページの最後の名前) のみを表示する。
--~''*, **, ***=<数値>''
抜き出す見出しを指定する。 "*" の個数で見出しの深さ (h2 ～ h4) を決定し、数値で上から何番目の見出しを抜き出すかを指定する。
例えば、 "**=2" なら上から2番目のh3を指定したことになる。

*使用例 [#me8eb03d]
#ac(all)

**例1：1列表示 + ベースネーム表示 [#we0ea89e]
#ac(h){{{
 #card(base){{
 [[自作プラグイン]]
 [[自作プラグイン/card]]
 }}
#card(base){{
[[自作プラグイン]]
[[自作プラグイン/card]]
}}
}}}

**例2：2列表示 + 見出しの抜き出し [#l4a75370]
#ac(h){{{
各ページの最初の見出しを抜き出してデスクリプションとして表示している。
 #card(2,*=1){{
 #lsx(prefix=自作プラグイン)
 }}
#card(2,*=1){{
#lsx(prefix=自作プラグイン,except=自作プラグイン$)
}}
}}}

**例3：3列表示 [#edecb7fa]
#ac(h){{{
初期設定では3列表示からカードが縦長のタイプになる。
 #card(3){{
 #taglink(ゲームWiki,num=:6)
 }}
#card(3){{
#taglist(ゲームWiki,num=:6)
}}
}}}

**例4：4列表示 [#n37c8730]
#ac(h){{{
初期設定では4列からは説明文がなくなる。また、幅の都合上、以降は更新日時の表示が簡略化される。
 #card(4){{
 #taglist(ゲームWiki,num=:12)
 }}
#card(4){{
#taglist(ゲームWiki,num=:12)
}}
}}}

**例5：5列表示 [#m122fc67]
#ac(h){{{
 #card(5){{
 #taglist(ゲームWiki)
 }}
#card(5){{
#taglist(ゲームWiki)
}}
}}}

**例6：6列表示 [#oc411821]
#ac(h){{{
 #card(6){{
 #lsx(prefix=/,num=:20)
 }}
#card(6){{
#lsx(prefix=/,num=:20)
}}
}}}

*備考 [#g7d8a926]
-v1.5からv2.0で定数名やカード部分の構造が大きく変わっているので、カスタマイズして使っていた場合はバージョンアップ時に注意が必要。
-カードの幅計算や繰り返し処理などをSass (Dart Sass) の方で行っているので、素のCSSの方を弄るのはあまりおすすめしない。

*コメント [#n8472dd2]
#pcomment(,10,above,reply)