Створити шаблон Blogger - Частина 1

Пропоную невеличкий вступний посібник до роботи з шаблонами Blogger. Він може бути корисний для новачків і користувачів середньої кваліфікації.

Навряд чи Ви знайдете офіційне повідомлення про спеціальну мову, яку використовує Blogger на стороні користувача обо на стороні севера. Існує деяка інформація про те, що Blogger написаний на Python у серверній частині і використовує сценарії XHTML для генерації веб-сторінок локально. Шаблон Blogger повністю закодований у XHTML і Blogger Elements. Він містить HTML-код, CSS, код JavaScript і XML-теги, система Blogger аналізує шаблон і повертає HTML із даними бази даних у браузер для його відображення.

Blogger має спеціальну мову шаблонів, розроблену для кастомізації блогів на платформі Blogger. Ця мова схожа на XML і дозволяє створювати умовні конструкції, перевіряти змінні та працювати з віджетами.

Я не зустрічав офіційної назви мови шаблонів, яку використовує Google у своїй документації, але вона може зустрічаєтися серед розробників та спільноти для короткого опису набору інструментів, доступних для роботи з шаблонами Blogger. Скоріш за все офіційної назви для системи шаблонізації Blogger від Google немає, принаймні в їхній офіційній документації вона не названа якимось конкретним терміном на кшталт "Blogger Templating Language". Замість цього Google просто описує її як "Blogger Template System" або "Template Data Tags".

Це не самостійна мова програмування, а система з інтегрованих XML та HTML тегів, яка дозволяє змінювати структуру та дизайн блогів на платформі Blogger.

Механізм шаблонів Blogger працює на основі гнучкої мови редагування, що складається з набору тегів віджетів , які використовують вирази для умовної зміни вихідного HTML для кожної публікації та сторінки вашого блогу.

Коли ми надсилаємо код XHTML шаблону на Blogger, він зберігається в його базі даних. Коли блог запитується через веб-переглядач, синтаксичний аналізатор Blogger аналізує код і надсилає назад HTML-вивід проаналізованого XML-коду, який відображатиметься у веб-переглядачі.

Найпростіший базовий макет

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http:/ /www.google.com/2005/gml/expr'>
<head> 
<title><data:blog.pageTitle/></title>
</head> 
<body> <!-- BODY CONTENTS --> </body>
</html>

Простір імен

Простір імен, як xmlns:b, xmlns:data, xmlns:expr дозволяє нам створювати веб-сторінку нашого блогера, а також отримувати дані з бази даних блогера.

xmlns:b- доступ до елементів blogger
xmlns:data- звідки надходять дані блогу
xmlns:expr- використовується для обчислення виразу для атрибутів

Три основні категорії мови Blogger шаблону

У мові Blogger шаблону існує поділ тегів на три основні категорії: теги HTML Розділів, теги секцій шаблону(<b:section>) та теги віджетів (<b:widget>). Цей поділ умовний, можна сказати не офіційний. Я вважаю, що усвідомлення поділу на ці три категорії тегів може стати чудовою відправною точкою для початкового етапу вивчення мови Blogger шаблонів. Це допоможе зрозуміти основні принципи роботи з шаблонами та полегшить подальше їх освоєння.

Для кращого розуміння структури тегів елементів у шаблоні Blogger потрібно розуміти його своєрідну ієрархічну структуру. Тут немає нічого складного, особливо для тих, хто знає HTML та CSS. Просто запам'ятайте одне правило.

Шаблон Blogger створюється на основі стандартної HTML-структури, яка включає базові теги <html>, <head> і <body>. Розділ <head> містить метадані, стилі та скрипти для шаблону, а розділ <body> використовується для контенту сторінки. Основна структура контенту формується в блоці(контейнері) <body>.

Контейнер <body> теми шаблону, в свою чергу, складається з HTML блоків, Blogger секцій шаблону та віджетів.

HTML Розділ – це область сторінки сформована за допомогою HTML тегів, наприклад, sidebar (бічна панель) або footer (нижній колонтитул).
Blogger секції шаблону - використовується для створення контейнерів для віджетів, які можуть бути додані на сторінку в різних частинах її структури.
Віджет – це окремий елемент сторінки, наприклад зображення, блогролл або інший варіант, який можна вибрати на вкладці "Елементи сторінки".

HTML розділи прописуються відповідно HTML кодом, що дозволяє легко змінювати їх дизайн у темі шаблону.

Blogger секція шаблону <b:section>

Секція блогера – це виділений простір у темі Blogger для розміщення віджетів. Тег <b:section> у шаблоні Blogger використовується для створення контейнерів для віджетів, які можуть бути додані на сторінку в різних частинах її HTML структури (наприклад, основний контент, бічна панель, футер). У цьому контейнері можуть бути розміщені віджети, такі як списки публікацій, популярні пости, коментарі, пошукові форми тощо.

Кожен розділ має початковий та кінцевий теги. Початковий тег - <b:section>, а кінцевий тег – </b:section>.

Тег <b:section> сам по собі не визначає тип блоку шаблону (як «хедер», «основний контент» чи «футер»), цим займаються відповідні HTML теги, але він організовує місця для віджетів у межах цих секцій.

Тег <b:section> може бути використаний як всередині стандартних HTML-блоків, таких як <header>, <main>, <aside>, або <footer>, так і поза ними. Наприклад, він може бути використаний для організації додаткових або специфічних секцій, які не належать до основної структури сторінки, але потребують контейнерів для віджетів.

Крім того, <b:section> може бути використано поза межами стандартних HTML-блоків для технічних чи адміністративних потреб, таких як динамічні скрипти, мета-дані, або контент, що не відображається безпосередньо на сторінці, але використовується для внутрішньої логіки шаблону. Такі секції часто приховані за допомогою атрибутів, таких як class="hidden", або налаштувань, як-от showaddelement="no".

Синтаксис blogger секції:

<b:section [attribs] ></b:section>

У контексті роботи з шаблонами Blogger (HTML), елемент <b:section> не підтримує вкладення інших елементів <b:section>.

Це пов’язано з тим, що кожен <b:section> призначений для визначення окремої секції в шаблоні, і вкладення одного в інший може призвести до помилок у рендерингу або неправильного функціонування шаблону.

Теги віджетів

Теги віджетів вставляються в Blogger секції шаблону <b:section>.

Теги віджетів b:widget можуть бути одинарними самозакриваючими тегами <b:widget/>, а також парними з використанням початкового і кінцевого тегу в оголошенні віджета. Початковий тег, <b:widget> і кінцевий тег – </b:widget>.

Розглянемо приклад кількох одинарних самозакриваючих віджетів:

<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id="BlogArchive1" locked="false" mobile="yes" title="Blog Archive" type="BlogArchive"/>

Ці віджети використовуються для управління різними частинами контенту на сторінці, такими як заголовки, списки та архіви.

Віджети можуть бути використані для додавання різноманітного контенту, як-от список публікацій, популярні пости, коментарі, пошукові форми тощо.

Після чергової публікації у блозі, при перегляді коду за допомогою браузера, ви побачите класи div замість віджетів. Але коли ви ререглядатимете код в базовому HTML редакторі Blogger, Ви побачите саме віджети, які не змінено на div(и).

З самого початку, під час створення основної частини блогу в розділі адмінпанелі "Макет" використовуйте можливість працювати з віджетами, щоб додавати чи видаляти на сторінку різні елементи, наприклад віджети пошуку, тегів, архіву та інших.

Давайте коротенько підведемо підсумки цієї частини

Blogger є платформою, яка використовує специфічну систему шаблонів для створення і кастомізації блогів. Її шаблони базуються на XHTML і включають мову Blogger шаблону, яка надає розширені можливості для налаштування. Основні елементи шаблонів поділяються на три категорії:

HTML-розділи – визначають базову структуру сторінки блоками header, nav, main, footer, sidebar, які оформлюються стандартними HTML і CSS.
Секції Blogger (<b:section>) – спеціальні контейнери для розміщення віджетів, що забезпечують динамічність і кастомізацію структури сторінки.
Віджети (<b:widget>) – елементи, що додають функціональність, як-от архів публікацій, популярні записи, пошукові форми тощо.

Розуміння ієрархічної структури та поділу на HTML-розділи, секції й віджети спрощує створення і налаштування блогів.

На цьому першу частину даного матеріалу, на мою думку можна завершити. Можливо я її ще буду оновлювати та доповнювати і готуватися до створення другої частини...

SHEN