Как прикрутить lightbox к блогу на движке Pelican
Движок pelican из коробки умеет вставлять изображения в верстку только нативного размера. По ширине они опрезаются соответственно ширине колонки.
Cтавим плагин pelican-lightbox
Проверяем зависимости:
# pip install beautifulsoup4
Плагин находится тут https://github.com/jprine/pelican-plugins/tree/master/lightbox
В pelicanconf.py
смотрим следущие переменные:
PLUGIN_PATH = '/home/swasher/blog/pelican-plugins'
PLUGINS = ['lightbox', 'liquid_tags.img']
Первая указывает на директорию с плагинами, вторая перечисляет подключенные плагины. Скачиваем плагин в $PLUGIN_PATH
,
добавляем 'lightbox'
в $PLUGINS
Ставим плагин Liquid-style Tags
Этот плагин предназначен для того, чтобы мы могли использовать в markdown теги типа {% %}.
Устанавливаем аналогично предыдущему. Плагин скачиваем в гитхаба Liquid-style Tags.
Скачиваем Lightbox
Скачиваем lightbox2.6.zip с вебсайта. Распаковываем и копируем папки css
, img
и js
в нашу тему в static/lightbox
. Проверяем соответствие путей с шаблоном.
Редактируем шаблон
Добавляем в файл base.html
в секцию head
загрузку скриптов. Может отличаться в других шаблонах, я использую модифицированную Subtle тему.
<!-- Lightbox2 support -->
<script src="{{ SITEURL }}/theme/lightbox/js/jquery-1.10.2.min.js"></script>
<script src="{{ SITEURL }}/theme/lightbox/js/lightbox-2.6.min.js"></script>
<link href="{{ SITEURL }}/theme/lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
На этом установка завершена. Вставка картинок производится имеет следующий синтаксис:
{% img [class name(s)] path/to/image [width [height]] \
[title text | "title text" ["alt text"]] %}
Class name для библиотеки lightbox2 - lb-image
. Путь к картинкам указываем относительно директории content нашего блога.
Самый употребляемый способ такой:
<img class="lb-image \" src="images/risunok.png" width="780">
где 780 - это ширина картинки в пикселях.
Самый простой способ доставить картинки на сервер - это Dropbox. Ставим на сервере Dropbox, в его папке делаем хардлинк на нашу /images, и с рабочего компьютера закидываем туда наши пикчи. Также становится простым и удобным редактирование картинок.
Ну и напоследок - кортинка с эффектом lightbox!
Comments !