Hubzilla Webpages
Hubzilla предоставляет несколько способов публиковать информацию на сайте, и каждый способ имеет свои особенности. Ознакомится с возможностями можно в статье [url=https://tiksi.net/articles/net/hubzilla-publishing-explained]Заметки? Статьи? Веб-страницы? Wiki? Методы публикации в Hubzilla[/url].
Разберём один из них — Веб-страницы.
Разберём один из них — Веб-страницы.
Просмотр статьи
Просмотр резюме
Замечание: Данный материал составлен на основе доступной документации по Webpages и собственного опыта их создания для нашего сайта. Некоторые сомнительные моменты осознанно пропущены, чтобы не добавлять путаницы.
Hubzilla позволяет создавать и добавлять к своему каналу отдельные веб-страницы и связывать их с помощью меню.
Это бывает полезно для того чтобы публиковать общую информацию, контактные данные или создать специальную панель навигации.
Подключение Веб-страниц
Сначала необходимо включить приложение Webpages для вашего канала. Делается это через традиционный «габмургер» меню в правом верхнем углу, затем 'Add apps' (Добавить приложения), 'Available Apps' (Доступные приложения), там найти и установить Webpages. После чего они появятся в меню.
Веб-страницы добавляют два новых разрешения к вашему каналу: 'Can view my channel webpages' (Могут просматривать веб-страницы на моём канале) и 'Can create/edit my channel webpages' (Могут создавать/редактировать веб-страницы на моём канале).
После перехода в Webpages через меню, вы увидите панель 'Design Tools' (Инструменты дизайна) слева с 4 пунктами:
- Blocks — именованные блоки со статическим контентом, которые можно добавлять на страницы в Layouts.
- Menus — создание блоков и пунктов меню, которые можно добавить на страницы через Layouts, а так же на стандартные страницы вашего канала.
- Layouts — макеты страниц, на которых определяется, как будут располагаться элементы страницы (заголовок, левая/правая панели, содержимое, footer/"подвал"/нижний колонтитул и так далее) и блоки в них.
- Pages — непосредственно страницы и их содержимое, которое будет размещено согласно выбранному макету.
Layouts
Он задаётся при помощи специфичного языка разметки Comanche, краткое руководство по которому доступно по кнопке Help. Однако там описано далеко не всё.
При создании своего Layout необходимо задать 'Layout Name' (название макета), можно дополнить его 'Layout Description' (описанием), затем непосредственно определить структуру страницы в поле Share.
Template
Первым делом нужно задать Template (шаблон), который определит, на какие регионы будет разделена ваша страница и как они будут располагаться. В документации упоминаются следующие доступные шаблоны:
default
Стандартный шаблон, задающий регионы:full
- 'htmlhead' располагается в <head> страницы и позволяет задавать дополнительные скрипты и css файлы,
- 'header' сверху страницы,
- 'nav' как планку под 'header' во всю ширину страницы,
- 'aside' как панель фиксированной ширины слева,
- 'right_aside' как панель фиксированной ширины справа,
- 'content' для содержимого по центру,
- 'footer' динамической ширины внизу от левой границы. Динамическая ширина означает, что элемент будет подстраиваться под размер содержимого, по этому традиционный footer во всю ширину страницы с текстом по центру сделать без правки стилей не получается.
Шаблон полной страницы отличается от стандартного отсутствием регионов 'aside', 'right_aside' и 'footer', то есть 'content' занимает всю ширину.
choklet
Шаблон choklet использует инвертированные цвета для региона 'nav' и дополнительно разделяется на несколько вариантов, задаваемых с помощью параметра 'flavour':
(default flavour) — трёхколоночный шаблон, аналогичный default, но вместо 'right_aside' пустой отступ. Дополнительно есть регион 'banner' под регионом 'nav'.
bannertwo — двухколоночный вариант стандартного, то есть регион 'right_aside' отсутствует и 'content' становится шире.
three — трёхколоночный вариант, аналогичный default, с добавлением региона 'banner' под регионом 'nav'.
edgestwo — вариант choklet-bannertwo с фиксированными отступами по сторонам страницы.
edgesthree — вариант choklet-three с фиксированными отступами по сторонам страницы.
full — вариант chokelet-three с фиксированными отступами по сторонам страницы и должен добавлять регион 'header', но все варианты его и так содержат, так что на мой взгляд точная копия choklet-three.
redable (sic)
Шаблон аналогичный default, но с очень узкой центральной колонкой, пропорциональными боковыми колонками и инвертированнымы цветами в 'nav'. Предназначен для чтения на мобильных устройствах, при этом рекомендуется заполнять только центральную колонку.
zen
Шаблон с единственным регионом 'content'. Позволяет полностью задать оформление в самих Pages.
Шаблон задаётся следующим образом:
[template]default[/template]Region
Регионы могут содержать блоки, меню, виджеты, некоторые другие тэги Commanche, макросы (переменные) и просто текст. При этом порядок задания регионов не важен, важна только последовательность элементов внутри.
Пример, пустой регион htmlhead:
[template]default[/template]
[region=htmlhead][/region]Движок Layouts позволяет использовать следующие макросы:
- $content — будет заменён на содержимое страницы.
- $nav — будет заменён на стандартную навигационную панель hubzilla.
- $htmlhead — будет заменён на стандартное содержимое <head> для выбранной темы оформления.
[template]default[/template]
[region=nav]$nav[/region]Просто текст, написанный внутри региона, очищается от html тэгов и отображается. Его можно использовать для задания фиксированных надписей, но в целом его применение весьма ограничено.
Виджеты
Виджеты описаны в документации вскользь (с пометкой TODO) и явно указано всего несколько:
- profile — добавляет панель профиля, как настроено для канала, включая аватар, связи, архивы и остальные подключенные элементы.
- tagcloud — добавляет облако тэгов с возможностью ограничить число тэгов при помощи параметра count. На момент публикации работает не польностью: тэги перечислены, но не являются ссылками.
- recent_visitors — добавляет список недавно посетивших страницу участников. На момент публикации добавляет пустой блок.
[template]default[/template]
[region=nav]$nav[/region]
[region=aside]
[widget=profile][/widget]
[/region][template]default[/template]
[region=nav]$nav[/region]
[region=aside]
[widget=tagcloud]
[var=count]10[/var]
[/widget]
[/region]Блоки создаются в отдельном разделе Blocks, на странице оформляются при помощи <div> и заданных css классов. При создании блоку обязательно даётся название и опционально заголовок, который будет виден на странице.
Для того, чтобы просто добавить блок с именем contacts в регион 'aside':
[template]default[/template]
[region=nav]$nav[/region]
[region=aside]
[widget=profile][/widget]
[block]contacts[/block]
[/region]Можно переопределить css класс блока при помощи параметра (если классов несколько, они задаются через пробел без кавычек):
[template]default[/template]
[region=nav]$nav[/region]
[region=aside]
[widget=profile][/widget]
[block=myclass1 myclass2]contacts[/block]
[/region]Кроме того, можно полностью убрать <div> добавив в блок переменную [var=wrap]none[/var]:
[template]default[/template]
[region=nav]$nav[/region]
[region=aside]
[widget=profile][/widget]
[block][var=wrap]none[/var]contacts[/block]
[/region]Меню задаются в отдельном разделе Menus так же как блоки. У них есть название, заголовок и список пунктов меню. Так же как блоки, на странице они оформляются при помощи тэгов <div class="pmenu widget">.
Для того, чтобы добавить меню main в регион 'aside':
[template]default[/template]
[region=nav]$nav[/region]
[region=aside]
[widget=profile][/widget]
[block]contacts[/block]
[menu]main[/menu]
[/region][template]choklet[/template]
[region=nav]$nav[/region]
[region=banner]
[menu=horizontal][/menu]
[/region]
[region=aside]
[widget=profile][/widget]
[block]contacts[/block]
[/region][template]choklet[/template]
[region=nav]$nav[/region]
[region=banner]
[menu=horizontal mymenu][/menu]
[/region]
[region=aside]
[widget=profile][/widget]
[block]contacts[/block]
[/region]Прочие тэги Commanche
Кроме тэгов [widget], [block], [menu] доступны ещё несколько, в частности [comment]Здесь будет HTML комментарий[/comment], задание [css]bootstrap[/css], [js]bootstrap[/js] в регионе 'htmlhead' и тэги условий [if][else][/if], которые выходят за рамки данной статьи. Подробнее о них можно прочитать в документации.
Пример Layout
Следующий пример задаёт страницу, на основе шаблона default, практически полностью эмулирующую стандартную домашнюю страницу канала Hubzilla, за исключением правой панели, без использования дополнительных блоков:
[template]default[/template]
[region=nav]$nav[/region]
[region=aside]
[widget=profile][/widget]
[/region]
[region=content]$content[/region][template]default[/template]
[region=htmlhead]$htmlhead[/region]
[region=header]...header...[/region]
[region=nav]$nav[/region]
[region=banner]...banner content goes here...[/region]
[region=aside]....left aside content goes here....[/region]
[region=right_aside]....right aside content goes here....[/region]
[region=content]$content[/region]
[region=footer]....footer content goes here....[/region]Пункт Pages позволяет создавать страницы на основе тех макетов, которые были созданы в Layouts.
При создании страницы можно выбрать 'Page content type' (тип содержимого страницы): BBcode, HTML, Markdown, Text, Comanche layout. Последний вариант используется в первую очередь в связке с шаблоном Zen, позволяя задавать шаблон в самой странице.
Далее выбирается Layout (макет) из созданных ранее. Если вы не создавали макет, здесь не будет вариантов, но после создания хотябы одного макета, туда неожиданно добавляется пустой макет с именем default, который просто выводит содержимое страницы без каких либо регионов.
Ниже нужно задать 'Page Link Name' (имя ссылки для страницы), которое будет адресом страницы на канале. Например, страница с именем main будет доступна как domain.tld/page/channel/main.
Title (загловок) и само содержимое из поля Share будет вставлено на место макроса $content в выбранном макете.
Заголовок страницы опционален и будет оформлен так же, как оформляются заголовки обычных постов. Если заголовок не задан, он будет полностью пропущен.
Blocks
Блоки могут использоваться для задания отдельных элементов оформления на странице. По настройкам они аналогичны страницам Pages.
При создании можно выбрать 'Page content type' (тип контента страницы): BBcode, HTML, Markdown, Text, Comanche layout. Задать 'Block Name' (название блока), которое потом может использоваться, например, в Layouts, Title (заголовок) и само содержимое в поле Share.
Menus
Меню могут быть многоуровневыми и размещены на разных страницах, включая стандартные страницы канала. В последнем случае можно выбрать только одно меню и оно будет размещено под блоком профиля.
Меню создаются в 2 этапа: сначала создаётся само меню, затем его элементы.
При создании меню нужно задать 'Menu Name' (имя меню), 'Menu Title' (заголовок меню) и указать, может ли оно использоваться для хранения закладок.
Внимание: После создания само меню нельзя отредактировать. Не смотря на то, что кнопки активны, попытка сохранить выдаёт ошибку. Надеюсь, в будущем это исправят. Элементы можно свободно редактировать позже.
По имени меню выбирается в макетах, заголовок вставляется если не выбран режим horizontal.
После создания меню необходимо добавить в него элементы.
Для каждого элемента задаётся:
- 'Link Name' — имя элемента в меню.
- 'Link or Submenu Target' — куда ведёт данный элемент меню, может быть ссылкой, абсолютной или относительной, или именем другого меню, чтобы создать выпадающее подменю.
- 'Order in list' — порядоковый вес элемента в отображении меню: чем меньше число, тем ближе к началу меню этот элемент будет располагаться. Два элемента с одинаковым весом сортируются по имени элемента в алфавитном порядке.
- 'Use magic-auth if available' — добавлять ли к ссылке magic-auth аргумент для авторизации через Zot профиль, то есть указывать zrl вместо url. Если ссылка ведёт на ресурс Hubzilla и вы хотите, чтобы пользователь просматривал его от своего имени, этот флаг стоит включить.
- 'Open link in new window' — открывать ли ссылку в новом окне/вкладке.
Для добавления меню в Layout (макет) страницы используется тэг [menu]имя[/menu].
Для добавления меню к панели профиля, чтобы оно было доступно на домашней и других страницах, необходимо выбрать его в настройках домашней страницы. Это можно сделать через «гамбургер» меню, 'Add Apps' (добавить приложения), найти среди 'Installed Apps' (установленные приложения) приложение 'Channel Home' (домашняя страница канала) и нажать на кнопку с шестерёнкой. Либо перейдя на домашнюю страницу канала и кликнув шестерёнку слева в панели навигации.
Там в параметре 'Personal menu to display in your channel pages' (персональное меню для отображения на страницах канала) можно выбрать нужное меню, либо убрать его выбрав пустой пункт.
Eugene Lisovsky
Hubzilla connected people. Workshop RU