mkdocs glightbox 下载 - mkdocs glightbox 源代码下载

mkdocs 光箱

其他源码

mkdocs-glightbox-0.4.0

下载

MkDocs GLightbox

MkDocs 插件支持带有 GLightbox 的图像灯箱。

GLightbox 是一个纯 JavaScript 灯箱库，支持移动设备。

使用 Material for 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。当图像透明时，背景将显示。您可以使用任何 CSS 值作为背景，例如`#74b9ff`或`Gainsboro`或`none`任何值。
阴影	真的	启用或禁用灯箱图像的阴影。当背景为`none`时禁用它，以防止透明图像周围出现阴影。
手动的	错误的	如果为 true，则必须通过向其添加`on-glb`类或在页面上添加`glightbox: true`元来手动为每个图像启用 lightbox。

在 GLightbox 文档上查看更多选项信息。

为了获得更大的灵活性：
1. 按图像禁用：禁用特定图像的灯箱。适合少量不需要灯箱效果的图片。
2. 按页面禁用：禁用特定页面的灯箱。适合少量不需要灯箱效果的页面。
3. 按图像启用：禁用特定页面的灯箱，但启用这些页面上的某些图像。适合少量需要灯箱效果的图片。
4. 全局禁用但按图像或页面启用：全局禁用灯箱但启用特定图像或特定页面。适合大量不需要灯箱效果的图像或页面。
支持灯箱图片字幕，更多详情请查看字幕。
支持将图片分组为图库，更多详情请查看图库。

笔记

如果这是您第一次使用 MkDocs 插件功能，您应该知道 MkDocs 包含一个名为search默认插件。如果您想保留搜索功能，则需要将search插件添加回plugins列表中。

它是如何运作的

将 GLightbox 脚本文件复制到site/assets/javascripts/目录，将 CSS 文件复制到site/assets/stylesheets/目录
导入 GLightbox 脚本和 CSS 文件，并在排除禁用页面的每个页面上添加 javascript 代码
搜索所有图像标签并使用锚标签进行扭曲，以查找 GLightbox 排除的具有跳过类别或已使用锚标签进行扭曲的图像