lightbox markdown pelican - For system administrator

В заголовке документа

lightbox: true

После чего в шаблоне base.html срабатывают условия:

<head>
...
    {% if (article and article.lightbox) %}
        <!-- Enable lightbox (https://github.com/dimsemenov/Magnific-Popup) -->
        <link href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
    {% endif %}
</head>

...
{% if (article and article.lightbox) %}
<!-- Enable lightbox gallery plugin for Bootstrap (https://github.com/ashleydw/lightbox) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(function(){
    $('{% if MAGNIFIC_POPUP_SELECTOR %}{{ MAGNIFIC_POPUP_SELECTOR }}{% else %}img[class*="mfp-"]{% endif %}').magnificPopup({
        {% if MAGNIFIC_POPUP_OPTIONS %}{{ MAGNIFIC_POPUP_OPTIONS }}{% endif %}
    });
});
</script>
{% endif %}
</body>

А так же стоит упомянуть конфиг:

# Bootstrap magnific lightbox options
MAGNIFIC_POPUP_OPTIONS = '''
closeOnContentClick: true,
callbacks: {
    elementParse: function(item){
        item.src = item.el.attr('src');  // read src from img tag
    },
},
gallery: {
    enabled: true
}
'''

Эта строка item.src = item.el.attr('src'); помогает извлечь из тега img путь до картинки, изначально скрипт умеет извлекать только из аттрибута href тега a.

При написании текстов картинки вставляется так:

![image alt text]({attach}folder/image.jpg "image title text"){: class="mfp-image center-block"}

Где:

mfp-image - таким образом указывается тип встраиваемый в lightbox
center-block - это стандартный bootstrap3 клас для центрирования блока по центру страницы
{attach} - относительный путь от текущего документа
{attach}/ - путь от корня сайта

Вместо {attach} можно использовать {filename}, разница в том, что {attach} копирует "вложения" вместе со страницей, а {filename} не копирует, а лишь ссылается более, подробно читайте в документации pelican.

Ссылки по теме:

Related Posts:

Comments