Grav – Подключаем AddToAny для каждого поста в сетке постов блога

Последнее обновление Сен 22, 2021

Содержание

AddToAny и переделка их стокового варианта для TWIG шаблона

Вступление

Скажу честно реализовать шаринг постов из перечня постов блога не такая уж и серьезная задача для CMS WordPress но для Grav как обычно выяснилось что готового решения попросту нет. По этому придуманный велосипед (по другому не назову) пришлось мастерить самому. Теперь по порядку, и по подробнее.

AddToAny и переделка их стокового варианта для TWIG шаблона

И так AddToAny предлагает нам весьма удобное решение с которым можно ознакомиться здесь:

https://www.addtoany.com/buttons/customize/page_url_title

Ниже стоковый код от AddToAny:


<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="http://www.example.com/page.html" data-a2a-title="Example Page Title">
 <a class="a2a_button_facebook"></a>
 <a class="a2a_button_twitter"></a>
 <a class="a2a_button_google_plus"></a>
 <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>

Как видно из кода необходимо чтобы атрибут data-a2a-url имел ссылку той страницы которую расшариваем. А атрибут data-a2a-title имел тайтл страницы которую шарим. Единственное чего здесь явно не хватает это картинки расшариваемоой страницы, это можно исправить добавлением атрибута data-img-url c прямым линком на картинку.

TWIG шаблон AddToAny

Наигравшись кодом мне удалось создать вот такой шаблон вывода, для каждого items’a сетки:


{% if truncate %}
{% if page.header.link %}
            {% if page.header.continue_link is not same as(false) %}

        {% endif %}
        {{ page.title }}

{% else %}
    {{ page.title }}  

{% endif %}
{% else %}

{% endif %}

Напомню что все это дело выглядит не много загадочно так как речь идет о выводе при помощи TWIG.

Как видим в коде у нас есть кнопка которая имеет нужные нам атрибуты, но как же красота? Все верно, для красоты нам необходимо попап окно в котором собственно и будут отображаться картинка, название и красивые кнопки для шары страницы.

Узнать подробнее о плагине Focus Popup можно по ссылке ниже:

https://github.com/Elkfox/Focus

Пример работы с попап окнами от Focus

https://www.jqueryscript.net/lightbox/Popup-Plugin-jQuery-Focus-js.html

Теперь необходимо создать TWIG шаблон для вывода нашего попапа, ниже то что мне удалось наваять:



<!—–Sosial Linc AddToAny—->
<div class="popup overlay AddToAny" id="AddToAnyPopup">
 <div class="popup-inner">
 <div class="popup-content left">
 <div id="SDStudio_popup_content">
 <div class="h3 SDStudio_PopUp_Post_Title">Зашарить:</div>
 <div class="h4 SDStudio_PopUp_Post_Name"></div>
 <img src="/user/pages/01.home/Loader_255×350.gif"class="SDStudio_PopUp_Post_IMG"></div>
 <!–- ADDTOANY START –->
 <div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="#l" data-a2a-title="Example Page Title">
 <a class="a2a_button_viber"></a>
 <a class="a2a_button_skype"></a>
 <a class="a2a_button_telegram"></a>
 <a class="a2a_button_facebook"></a>
 <a class="a2a_button_facebook_messenger"></a>
 <a class="a2a_button_twitter"></a>
 <a class="a2a_button_google_plus"></a>
 <a class="a2a_button_google_gmail"></a>
 <a class="a2a_button_google_bookmarks"></a>
 <a class="a2a_button_email"></a>
 <a class="a2a_button_whatsapp"></a>
 <a class="a2a_button_copy_link"></a>
 <a class="a2a_button_evernote"></a>
 <a class="a2a_button_sms"></a>
 <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
 </div>
 <script async src="https://static.addtoany.com/menu/page.js"></script>
 <!–- ADDTOANY END –->
 <div>
 <a class="popup-close" data-close aria-label="common.close">X</a>
 </div>
 </div>
 </div>
<div class="My_Overlay"></div>

Не забываем подключить js и css Focus Popup’a

Естественно чтобы все это дело заработало нужно было намудрить JS’a, о чем речь пойдет ниже.

В общем выкладываю как получилось, естественно что Вам нужно будет переработать даный код под свои нужды, и свою разметку.

В общих чертах все получилось, надеюсь я ничего не упустил.

Источник записи: