Цей урок про додавання деякої функціональності до сайту на Jekyll, яка здається неможливою: коментарів. Це тому, що Jekyll не має бекенд-компонент для збереження коментарів. Але нам це не потрібно, оскільки ми зробимо все на фронтенді за допомогою Firebase!
Власні рішення забезпечують більше контролю над дизайном, функціональністю та даними, ніж готові рішення, такі як Disqus та плагін коментарів Facebook.
Що таке Firebase?
Firebase — масштабований бекенд, що працює в режим реального часу. Це дозволяє розробникам створювати додатки з автентифікацією та постійними даними для статичних сайтів. /h2>
Для початку зареєструйте обліковий запис Firebase.
Після реєстрації створіть нову програму для коментарів блогу та запишіть App URL для подальшого використання.
Налаштування
Нам потрібен ряд бібліотек JavaScript для запуску системи коментування. Firebase зберігає та отримує коментарі, jQuery додає елементи на сторінку, Moment форматує дати, а blueimp-md5 генерує MD5. /js/blog.js містить код нашої програми для системи коментування.
Додайте такі скрипти вище </body> до _layouts/default.html:
HTML
<code data-language="html"><script src="https://cdn.firebase .com/js/client/2.2.1/firebase.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.1.0/js/md5.js"></script> <script src="/js/blog.js"></script>
Огляд Firebase
Коли відвідувач переглядає статтю блогу ми отримуємо всі підходящі коментарі Firebase.
Відвідувачі залишають коментарі з ім'ям, адресою електронної пошти та повідомленням. Ми беремо цю інформацію, додаємо мітку часу та поточну сторінку, а потім зберігаємо все у Firebase.
У Firebase дані зберігаються у вигляді об'єктів JSON. Коментарі зберігаються у вигляді масиву об'єктів для кожної статті блога.
JSON
<code data-language="javascript">{ "/tutorial/2016/01 /02/title-tag.html": [ { "name": "Bill", "email": "bill@example.org", "message": "Hi there, nice blog!" ;, "timestamp": 1452042357209 }, { "name": "Bob", "email": "bob@example.org", "message": "quot; , "timestamp": 145204235846 }
], "/announcement/2016/01/01/latest-seo-trends.html": [ { "name": "Steve", "" @example.org", "message": "First post!", "timestamp": 1452043267245 }
] } Реалізація
Покажчики в Firebase забезпечують доступ для читання та запису бази даних. Додайте вказівник на базу даних /js/blog.js:
JavaScript
<code data-language="javascript">var ref=new Firebase(" ;https://<YOUR-APP-ID>.firebaseio.com/");ref дає нам доступ до корені бази даних. Ми можемо отримати вказівник на статтю блогу за допомогою ref.child ("<шлях_к_стаття_блогу>").
Збереження коментарів
Шлях це відмінний спосіб ідентифікувати статті блогу, але Firebase не підтримує символи, такі як амперсанд в імені ключа. Щоб вирішити цю проблему, додайте функцію заміни неприпустимих символів:
JavaScript
<code data-language="javascript">function slugify(text) { return text.toString(). toLowerCase().trim() .replace(/&/g, '-and-') .replace(/[\s\W-]+/g, '-') .replace(/[^a-zA-Z0-9-_]+/g,''); }Збережіть вказівник, використовуючи функцію slugify() та поточний шлях.
JavaScript
<code data-language="javascript">var postRef=ref.child(slugify(window.location.pathname));
Додамо форму для надсилання нових коментарів після статті блогу. Введіть наступну розмітку нижче {{ content }} у _layouts/post.html:
HTML
<code data-language="html"><h3>Leave a comment</h3> <form id="comment"> <label for="message">Message</label> <textarea id="message"></textarea> <label for="name">Name</label> <input type="text" id="name"> <label for="email">Email</label> <input type="text" id="email"> <input type="submit" value="Post Comment"> </form>
Для відправки даних у Firebase при відправленні форми, перевизначимо слухача submit за замовчуванням в /js/blog.js:
jQuery
<code data-language="javascript">$("#comment").submit(function() { postRef.push().set({ name: $("#name" ;).val(), message: $("#message").val(), md5Email: md5($("#email").val()), postedAt: Firebase.ServerValue.TIMESTAMP }); $("input[type=text], textarea").val(""); return false; });postRef. push() створює масив Firebase, якщо він не існує, і повертає покажчик на перший елемент. set зберігає дані у Firebase.
Ми зберігаємо MD5 для адреси електронної пошти для захисту конфіденційності коментаторів, оскільки дані є загальнодоступними. Gravatar використовує MD5 для відображення зображення профілю.
Замість new Date().getTime() для мітки часу, ми використовуємо Firebase.ServerValue.TIMESTAMP. Це мітка часу серверів Firebase, яка дозволяє уникнути проблем з часовими поясами та підробкою запитів. p>
HTML
<code data-language="html"><hr> <div class="comments"></div>
У Firebase є вказівник для прослуховування нових коментарів. child_added — це тригер подій для існуючих та нових коментарів. Ми використовуємо цю подію для відображення всіх коментарів.
child_added повертає поточний знімок даних. Ми отримуємо дані зі знімка, форматуємо їх у HTML і додаємо в <div class="comments"></div>.
jQuery
<code data-language="javascript">postRef.on("child_added", function(snapshot) { var newComment=snapshot.val(); $(". comments").prepend('<div class="comment">' + '<h4>' + newComment.name + '</h4>' + '<div class="profile-image" ;><img src="http://www.gravatar.com/avatar/' + newComment.md5Email + '?s=100&d=retro"/></div> ' + '' + moment(newComment.postedAt).fromNow() + '<p>' + newComment.message + '</p></div>'); }); Остаточний файл
Збережіть його в /js/blog.js. Змініть <YOUR-APP-ID> на ідентифікатор, записаний раніше.
jQuery
<code data-language="javascript">$(function() { var ref=new Firebase("https://<YOUR-APP-ID>.firebaseio.com/"), postRef=ref.child(slugify( window.location.pathname)), postRef.on("child_added", function(snapshot) { var newPost=snapshot.val(); $(".comments").prepend('<div class=" comment">' + '<h4>' + newPost.name + '</h4>' + '<div class="profile-image"><img src="http://www.gravatar.com/avatar/' + newPost.md5Email + '?s=100&d=retro"/></div> ' + '<span class="date">' + moment( newPost.postedAt).fromNow() + '</span><p>' + newPost.message + '</p></div>'); }); $("#comment") .submit(function() { postRef.push().set({ name: $("#name").val(), message: $("#message").val(), md5Email: md5( $(&q uot;#email").val()), postedAt: Firebase.ServerValue.TIMESTAMP }); $("input[type=text], textarea").val(""); return false; }); }); function slugify(text) { return text.toString().toLowerCase().trim() .replace(/&/g, '-and-') .replace(/[\s\W-]+/g, '-') .replace(/[^a-zA-Z0-9-_]+/g,''); }Завершена система коментування виглядає так:
Спробуйте демонстрацію тут. Відкрийте два вікна, залиште коментар і ви побачите, що він з'явиться у двох вікнах одразу. Для базової безпеки ми зробимо правило, що відвідувачі можуть додавати коментарі. У Firebase відкрийте вкладку Security and Rules:
Існуючі правила дозволяють глобальні операції читання та запису. Щоб запобігти видаленню або запису даних Firebase, якщо вони вже існують, змініть .write на наступне:
<code data-language="javascript">{ " ;rules": { ".read": true, ".write": "false", "$slug": { ".write": "!data.exists()", " $message": { ".write": "!data.exists() && newData.exists()" }
}
}
}Повний набір варіантів аутентифікації дозволяє побудувати щось складніше.
Готовий сайт
За допомогою декількох бібліотек та 31 рядки на JavaScript ми отримали повнофункціональний бекенд для коментарів блогу, що працюють на статичному сайті.
Це підводить нас до фіналу даного керівництва. За три короткі уроки ми перейшли від статичного сайту до оновлюваного, живого сайту на Jekyll з нашою власною системою коментування.