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 |
Служит для задания скриптов в виде строки |
Публичные технологии блока
Блок реализован в технологиях:
Описание
Блок отвечает за создание HTML-элементов верхнего уровня, подключение к странице CSS, JS, элементов <meta> и указание заголовка. Для этого в BEMJSON-декларации блока и элементов блока зарезервированы специальные поля.
Специальные поля блока
Поле doctype
Тип: String.
Позволяет явно указать строку с DTD (Document Type Definition) текущего документа. Если свойство не задано, по умолчанию будет использоваться <!DOCTYPE html>.
Поле title
Тип: String.
Название страницы. Становится HTML-элементом <title>.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Блок page</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
content: 'Блок page'
}
Поле favicon
Тип: String.
Позволяет указать URL значка страницы (фавиконки):
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Страница с пользовательской фавиконкой</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
favicon: 'favicon.ico',
content: 'Страница с пользовательской фавиконкой'
}
Поле head
Тип: BEMJSON.
Позволяет дополнить содержимое HTML-элемента <head>, определенное в шаблоне блока:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<script src="jquery-min.js"></script>
<meta name="description" content="Yet another webdev blog">
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Страница с подключенным JS и meta-данными</body>
</html>
{
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:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="stylesheet" href="_index.css">
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Страница с подключенным CSS</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Страница с подключенным CSS'
}
Поле scripts
Тип: BEMJSON.
Позволяет подключать JS в тело страницы в конец HTML-элемента <body>:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Страница со скриптом подключенным в body
<script src="_index.js"></script>
</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
scripts: {
elem: 'js',
url: '_index.js'
},
content: 'Страница со скриптом подключенным в body'
}
Поле content
Тип: BEMJSON.
Позволяет указать содержимое страницы.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>
<div class="link link_pseudo_yes link_togcolor_yes link_color_green">Псевдоссылка, меняющая цвет по клику</div>
</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
content: {
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
},
url: '#',
target: '_blank',
title: 'Кликни меня',
content: 'Псевдоссылка, меняющая цвет по клику'
}
}
[
'page',
{
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
}
}
]
Элементы блока
Элемент css
Служит для подключения CSS по ссылке или в виде строки. В зависимости от того, указано ли в декларации элемента поле url, создается HTML-элемент с тегом:
<link> и свойством stylesheet, если url есть.<style>, если поле url неуказано. В этом случае предполагается, что содержимое элемента передается с помощью свойства content BEMJSON-декларации элемента.
Специализированное поле content
Тип: String.
Служит для явной передачи содержимого HTML-элементу <style>:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page title</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<style>
.page {
color: #f00
}
</style>
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Страница с тэгом <style></body>
</html>
{
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>:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page title</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Страница с тэгом <script>
<script>
console.log(document.title)
</script>
</body>
</html>
{
block: 'page',
title: 'Page title',
scripts: {
elem: 'js',
content: 'console.log(document.title)'
},
content: 'Страница с тэгом <script>'
}
Специализированное поле url
Тип: String.
Позволяет задать URL для загрузки скрипта. Значение поля url BEMJSON-декларации передается свойству src создаваемого HTML-элемента.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page title</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="stylesheet" href="_index.css">
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Страница с тэгом style</body>
</html>
{
block: 'page',
title: 'Page title',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Страница с тэгом style'
}
Элемент meta
Служит для создания HTML-элементов <meta> и указания для них пользовательских метаданных. Метаданные передаются как ключи и значения хеша атрибутов – свойства attrs BEMJSON-декларации элемента:
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Заголовок страницы</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="stylesheet" href="example.css">
<meta name="keywords" content="js, css, html">
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Страница с подключенным CSS и meta-данными</body>
</html>
{
block: 'page',
title: 'Заголовок страницы',
head: [
{
elem: 'css',
url: 'example.css'
},
{
elem: 'meta',
attrs: {
name: 'keywords',
content: 'js, css, html'
}
}
],
content: 'Страница с подключенным CSS и meta-данными'
}
Подробнее смотрите в документации к <meta> на MDN.
# page
На уровне переопределения touch.blocks блок предоставляет шаблоны, создающие дополнительный набор HTML-элементов внутри head.
Обзор
Специализированные поля блока
| Поле |
Тип |
Описание |
| zoom |
{Boolean} |
Наличие масштабирования. |
Элементы блока
| Элемент |
Способы использования |
Описание |
| icon |
BEMJSON |
Позволяет задать ссылку на значки Web Clips, для отображения на рабочем столе iOS при добавлении ссылки на сайт. |
Специализированные поля элементов блока
| Элемент |
Поле |
Тип |
Описание |
| icon |
src{X} |
{String} |
Используются для указания пути к файлу значка. |
Публичные технологии блока
Блок реализован в технологиях:
Подробности
Блок создает HTML-элементы:
<meta> с атрибутом name в значении 'format-detection'. Значением content служит 'telephone=no'. Элемент отключает автоматическое распознавание телефонных номеров в html-коде и их набор по нажатию.<link> с атрибутом name в значении 'apple-mobile-web-app-capable'. Значением content служит 'yes'. Элемент задает для страницы полноэкранный режим отображения на устройствах с iOS.<meta> с атрибутом name в значении 'viewport'. Элемент позволяет управлять масштабированием страницы. По умолчанию, масштабирование отключено. Для включения используйте специализированное поле zoom со значением true.
Кроме того, к элементу
с классом
page подмешивается блок
ua.
Специализированные поля блока
Специализированное поле zoom
Тип: {Boolean}.
Управляет масштабированием страницы. Определяет значение атрибута content HTML-элемент <meta> с атрибутом name в значении 'viewport':
- со значением
true – 'initial-scale=1'. Масштабирование включено. Масштаб по умолчанию устанавливается равным 100%.
- без значения или
false – 'maximum-scale=1,initial-scale=1,user-scalable=no'. Масштаб по умолчанию устанавливается равным 100%. Масштабирование отключено.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello, World!</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Включение масштабирования страницы</body>
</html>
{
block: 'page',
title: 'Hello, World!',
zoom: true,
content: 'Включение масштабирования страницы'
}
Элементы блока
Элемент icon
Позволяет задать ссылку на значки Web Clips, для отображения на рабочем столе iOS при добавлении ссылки на сайт. Ссылка задается через специализированное поле src{X}.
Специализированное поле src{X}
Тип: String.
Поле вида src{X} используются для указания пути к файлу значка. В зависимости от значения {X} элемент icon преобразуется в HTML-элемент:
src16 – <link> c атрибутом rel со значением 'shortcut icon'. src57 – <link> c атрибутами:
sizes со значением '57x57';rel со значением 'apple-touch-icon-precomposed'.
src72 – <link> c атрибутами:
sizes со значением '72x72';rel со значением 'apple-touch-icon-precomposed'.
src114 – <link> c атрибутом rel со значением 'apple-touch-icon-precomposed'.
Open in a new window<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page title</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
})(document.documentElement, "className");
</script>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="example.png">
<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link name="apple-mobile-web-app-capable" content="yes">
</head>
<body class="page ua i-bem" data-bem='{"ua":{}}'>Страница с подключенным значком</body>
</html>
{
block: 'page',
title: 'Page title',
head: {
elem: 'icon',
src72: 'example.png'
},
content: 'Страница с подключенным значком'
}