mkdocs glightboxダウンロード - mkdocs glightboxソースコードのダウンロード

mkdocs glightbox

その他のソースコード

mkdocs-glightbox-0.4.0

ダウンロード

MkDocs Gライトボックス

MkDocs プラグインは、GLightbox を使用した画像ライトボックスをサポートします。

GLightbox は、モバイルをサポートする純粋な JavaScript ライトボックスライブラリです。

MkDocs 用のマテリアルを使用したライブデモ。

依存

GLightbox JavaScript ファイルと CSS ファイル
1. Gライトボックス==3.2.0

使用法

PyPIからプラグインをインストールする
```
pip install mkdocs-glightbox
```
glightboxプラグインを mkdocs.yml プラグインセクションに追加します。
```
 plugins :
   - glightbox
```
アンカータグ内の画像と pymdown-extensions の絵文字画像を除くすべての画像がライトボックス効果に自動的に追加されます。

mkdocs.yml でオプションを渡すことでプラグインをカスタマイズできます。

 plugins :
   - glightbox :
       touchNavigation : true
       loop : false
       effect : zoom
       slide_effect : slide
       width : 100%
       height : auto
       zoomable : true
       draggable : true
       skip_classes :
         - custom-skip-class-name
       auto_caption : false
       caption_position : bottom
       background : white
       shadow : true
       manual : false

オプション	デフォルト	説明
タッチナビゲーション	真実	タッチナビゲーション (スワイプ) を有効または無効にします。
ループ	間違い	ループは端にスライドします。
効果	ズーム	ライトボックスを開いたときのエフェクトの名前。 (ズーム、フェード、なし)
スライド効果	スライド	ライトボックススライドのエフェクトの名前。 (スライド、ズーム、フェード、なし)
幅	自動	インライン要素と iframe の幅。全幅には 90% または 100vw など、任意の単位を使用できます。
身長	自動	インライン要素と iframe の高さ。 90%、100vh、自動など、任意の単位を使用できます。
ズーム可能	真実	ズーム可能な画像を有効または無効にします。
ドラッグ可能	真実	マウスのドラッグを有効または無効にして、前後のスライドに移動します。
スキップクラス	[ ]	特定のカスタムクラス名を持つ画像のライトボックスを無効にします。
自動キャプション	間違い	画像の alt をキャプションタイトルとして使用することを自動的に有効または無効にします。
キャプションの位置	底	デフォルトのキャプション位置。 (下、上、左、右)
背景	白	ライトボックス画像の背景CSS。画像が透明な場合は背景が表示されます。背景には、 `#74b9ff`や`Gainsboro`などの任意の CSS 値を使用することも、何も使用しない場合は`none`使用することもできます。
影	真実	ライトボックス画像の影を有効または無効にします。背景が`none`場合は、透明な画像の周囲に影が入るのを防ぐためにこれを無効にします。
マニュアル	間違い	true の場合、 `on-glb`クラスを画像に追加するか、ページに`glightbox: true`メタを追加することで、画像ごとにライトボックスを手動で有効にする必要があります。

オプションの詳細については、GLightbox ドキュメントで確認してください。

より柔軟にするには:
1. 画像ごとに無効にする: 特定の画像のライトボックスを無効にします。ライトボックス効果を必要としない少数の画像に適しています。
2. ページごとに無効にする: 特定のページのライトボックスを無効にします。ライトボックス効果を必要としない少数のページに適しています。
3. 画像ごとに有効にする: 特定のページのライトボックスを無効にしますが、それらのページの一部の画像は有効にします。ライトボックス効果が必要な少数の画像に適しています。
4. グローバルに無効にするが、画像またはページごとに有効にする: ライトボックスをグローバルに無効にし、特定の画像または特定のページを有効にします。ライトボックス効果を必要としない大量の画像やページに適しています。
ライトボックス画像キャプションをサポートしています。キャプションの詳細を確認してください。
画像をギャラリーとしてグループ化することをサポートしています。ギャラリーで詳細を確認してください。

注記

MkDocs プラグイン機能を初めて使用する場合は、MkDocs にsearchという名前のデフォルトのプラグインが含まれていることを知っておく必要があります。検索機能を維持したい場合は、 searchプラグインをpluginsリストに追加し直す必要があります。

仕組み

GLightbox スクリプトファイルをsite/assets/javascripts/ディレクトリにコピーし、CSS ファイルをsite/assets/stylesheets/ディレクトリにコピーします。
GLightbox スクリプトと CSS ファイルをインポートし、無効なページを除く各ページに JavaScript コードを追加します
すべてのイメージタグを検索し、アンカータグでワープして GLightbox から除外されたスキップクラスのイメージ、またはアンカータグですでにワープされているイメージをワープします。