Skip to content

Latest commit

 

History

History
271 lines (189 loc) · 9.41 KB

page.ru.md

File metadata and controls

271 lines (189 loc) · 9.41 KB
Raw

page

Блок предоставляет шаблоны, создающие набор HTML-элементов верхнего уровня страницы: <html>, <head>, <body>.

Обзор

Специальные поля блока

Поле Тип Описание
doctype String Позволяет переопределить строку DTD текущего документа.
title String Позволяет указать содержимое <title>.
favicon String Позволяет указать URL значка страницы (фавиконки).
head BEMJSON Позволяет дополнить содержимое <head>.
styles BEMJSON Позволяет подключать таблицы стилей CSS.
scripts BEMJSON Позволяет подключать скрипты в тело документа.
content BEMJSON Позволяет указать содержимое страницы.

Элементы блока

Элемент Способы использования Описание
css BEMJSON Служит для подключения CSS по ссылке или в виде строки.
js BEMJSON Служит для подключения JS по ссылке или в виде строки.
meta BEMJSON Служит для создания HTML-элементов <meta>.

Специальные поля элементов блока

Элемент Поле Тип Описание
css url String Позволяет задать URL для загрузки стилей.
content String Служит для задания стилей в виде строки
js url String Позволяет задать URL для загрузки скрипта.
content String Служит для задания скриптов в виде строки

Публичные технологии блока

Блок реализован в технологиях:

  • bh.js
  • bemhtml

Описание

Блок отвечает за создание HTML-элементов верхнего уровня, подключение к странице CSS, JS, элементов <meta> и указание заголовка. Для этого в BEMJSON-декларации блока и элементов блока зарезервированы специальные поля.

Специальные поля блока

Поле doctype

Тип: String.

Позволяет явно указать строку с DTD (Document Type Definition) текущего документа. Если свойство не задано, по умолчанию будет использоваться <!DOCTYPE html>.

Поле title

Тип: String.

Название страницы. Становится HTML-элементом <title>.

{
    block : 'page',
    title : 'Заголовок страницы',
    content : 'Блок page'
}

Поле favicon

Тип: String.

Позволяет указать URL значка страницы (фавиконки):

{
    block : 'page',
    title : 'Заголовок страницы',
    favicon : 'favicon.ico',
    content : 'Страница с пользовательской фавиконкой'
}

Поле head

Тип: BEMJSON.

Позволяет дополнить содержимое HTML-элемента <head>, определенное в шаблоне блока:

{
    block : 'page',
    title : 'Заголовок страницы',
    head : [
        { elem : 'js', url : 'jquery-min.js' },
        { elem : 'meta', attrs : { name : 'description', content : 'Yet another webdev blog' } }
    ],
    content : 'Страница с подключенным JS и meta-данными'
}

Поле styles

Тип: BEMJSON.

Позволяет подключить CSS:

{
    block : 'page',
    title : 'Заголовок страницы',
    styles : { elem : 'css', url : '_index.css' },
    content : 'Страница с подключенным CSS'
}

Поле scripts

Тип: BEMJSON.

Позволяет подключать JS в тело страницы в конец HTML-элемента <body>:

{
    block : 'page',
    title : 'Заголовок страницы',
    scripts : { elem : 'js', url : '_index.js' },
    content : 'Страница со скриптом подключенным в body'
}

Поле content

Тип: BEMJSON.

Позволяет указать содержимое страницы.

{
    block : 'page',
    title : 'Заголовок страницы',
    content : {
        block : 'link',
        mods : { pseudo : 'yes', togcolor : 'yes', color : 'green' },
        url : '#',
        target : '_blank',
        title : 'Кликни меня',
        content : 'Псевдоссылка, меняющая цвет по клику'
    }
}

Элементы блока

Элемент css

Служит для подключения CSS по ссылке или в виде строки. В зависимости от того, указано ли в декларации элемента поле url, создается HTML-элемент с тегом:

  • <link> и свойством stylesheet, если url есть.
  • <style>, если поле url неуказано. В этом случае предполагается, что содержимое элемента передается с помощью свойства content BEMJSON-декларации элемента.

Специализированное поле content

Тип: String.

Служит для явной передачи содержимого HTML-элементу <style>:

{
    block : 'page',
    title : 'Page title',
    styles : {
        elem : 'css',
        content : '.page { color : #f00 }'
    },
    content : 'Страница с тэгом <style>'
 }

Специализированное поле url

Тип: String.

Позволяет задать URL для загрузки таблицы CSS. Значение поля url BEMJSON-декларации передается свойству href создаваемого HTML-элемента.

Элемент js

Служит для подключения JS по ссылке или в виде строки. Создает HTML-элемент <script>.

Специализированное поле content

Тип: String.

Служит для явной передачи содержимого HTML-элементу <script>:

{
    block : 'page',
    title : 'Page title',
    scripts : {
        elem : 'js',
        content : 'console.log(document.title)'
    },
    content : 'Страница с тэгом <script>'
}

Специализированное поле url

Тип: String.

Позволяет задать URL для загрузки скрипта. Значение поля url BEMJSON-декларации передается свойству src создаваемого HTML-элемента.

{
    block : 'page',
    title : 'Page title',
    styles : { elem : 'css', url : '_index.css' },
    content : 'Страница с тэгом style'
}

Элемент meta

Служит для создания HTML-элементов <meta> и указания для них пользовательских метаданных. Метаданные передаются как ключи и значения хеша атрибутов – свойства attrs BEMJSON-декларации элемента:

{
    block : 'page',
    title : 'Заголовок страницы',
    head : [
        { elem : 'css', url : 'example.css' },
        { elem : 'meta', attrs : { name : 'keywords', content : 'js, css, html' } }
    ],
    content : 'Страница с подключенным CSS и meta-данными'
}

Подробнее смотрите в документации к <meta> на MDN.