Интеграция кнопки Flatr в веб-сайт на Jekyll
Flattr это бесплатный и простой способ заработать деньги с блога. Как вы можете видеть мой Jekyll веб-сайт размещённый в Github используется в основном как блог. Разместив маленькую кнопку Flattr в конце каждого поста в блоге, чуть выше раздела комментариев, Я могу быть уверенным в том, что посетители моего блога имеют возможность поблагодарить меня за статью. В этой статье Я покажу вам, как легко использовать Flattr, чтобы показать кнопку «Спасибо» в Jekyll.
Далее пошаговая инструкция о том, как это сделать.
Регистрация.
Во-первых тебе нужен аккаунт Flattr. Зарегистрируйся во Flattr используя следующую ссылку: Flattr
Создание шаблона с Flattr Loader script.
Создай файл с именем flattr-script.html
в _includes
каталоге твоего Jekyll веб-сайта. Вставь следующее содержимое в этот файл:
<script type="text/javascript">
/* <![CDATA[ */
(function() {
var s = document.createElement('script');
var t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = '//api.flattr.com/js/0.6/load.js?'+
'mode=auto' +
'&html5-key-prefix=data-flattr';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */
</script>
Это полностью готовый к использованию код. Для получения дополнительной информации смотри Embedded buttons на странице документации Flattr.
Создание шаблона с кнопкой Flattr.
Создай файл с именем flattr-button.html
в _includes
каталоге твоего Jekyll веб-сайта. Вставь следующее содержимое в этот файл:
<a class="FlattrButton" style="display:none;"
title="{{ page.title }}"
data-flattr-uid="YOUR-USER-NAME"
data-flattr-tags="{{ page.tags }}"
data-flattr-category="text"
data-flattr-language="{{ page.lang }}"
data-flattr-button="compact"
href="{{ site.url }}{{ page.url }}">
{{ page.excerpt }}
</a>
Примечание: Опция
style="display:none;"
нужна для того, чтобы избежать показа кнопки во время загрузки страницы.
Примечание: Замени
YOUR-USER-NAME
на твоё собственное имя из аккаунта Fllatr.
Примечание: Переменная
data-flattr-category
может быть установлена в любую из доступных категорий:text
,images
,video
,audio
,software
,people
,rest
.
Примечание: Так как посты на моём блоге доступны на двух языках (английском и русском) то Я установил динамический аттрибут языка. Если посты на твоём Jekyll веб-сайте написаны только на одном языке то замени
{{ page.lang }}
кодом актуального для вас языка. Все доступные коды языков можешь найти здесь.
Примечание: Реши какую кнопку ты хочешь использовать - компактную или классическую. Чтобы переключиться на классическую, всё что тебе нужно это полностью удалить строку
data-flattr-button="compact"
.
Примечание: Убедись, что ты установил
page.excerpt
через “Front Matter” в верхней части твоего поста. Смотри следующий пример:
---
layout: post
lang: en_EN
title: "This is the first post on my blog"
date: 2016-07-04 17:49:00
category: blogging
tags: "post, jekyll, blogging"
excerpt: "Teaser text ..."
---
Вызов шаблона flattr-script из основного шаблона блога.
Перейди в каталог _layouts
, найди файл default.html
и вставь следующий код прямо перед тегом </head>
:
{% include flattr-script.html %}
Благодаря этому шаблон flattr-script будет добавлен к каждой странице твоего веб-сайта.
Примечание: Некоторые темы имеют отделенный файл с
head
секцией (<head></head>
теги). Этот файл может называться напримерhead.html
и располагаться в каталоге_includes
.
Вызов шаблона flattr-button из шаблона поста.
Перейди в каталог _layouts
и найди файл post.html
(или любой другой файл макета в который ты хочешь встроить кнопку Flattr) и вставь следующий код:
{% include flattr-button.html %}
Я разместил этот код сразу после {{ content }}
, но место размещения полностью зависит от тебя. В моём случае копка Flattr будет показываться в конце каждого поста в блоге, чуть выше секции с комментариями.
Заключение
Если всё сделано правильно, то кнопка Flattr должна появится на активированых страницах после следующей генерации страниц. Теперь кнопка Flattr будет автоматически добавлятся ко всем постам с кратким содержанием на Flattr странице твоих “thing”.
Поддержка браузерами
Кнопки должны поддерживать все современные браузеры, такие как последнии версии Firefox, Safari, Chrome а также Internet Explorer 8 и новее. В старых браузерах, таких как Internet Explorer 7 - кнопки просто не будут показываться.
Если эта статья помогла вам, пожалуйста, оставьте комментарий
Спасибо за прочтение!
Arthur is a designer and full stack software engineer. He is the founder of Space X-Chimp and the blog My Cyber Universe. His personal website can be found at arthurgareginyan.com.