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>
HTML{
block: 'page',
title: 'Заголовок страницы',
content: 'Блок page'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
favicon: 'favicon.ico',
content: 'Страница с пользовательской фавиконкой'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
head: [
{
elem: 'js',
url: 'jquery-min.js'
},
{
elem: 'meta',
attrs: {
name: 'description',
content: 'Yet another webdev blog'
}
}
],
content: 'Страница с подключенным JS и meta-данными'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Страница с подключенным CSS'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
scripts: {
elem: 'js',
url: '_index.js'
},
content: 'Страница со скриптом подключенным в body'
}
BEMJSONdeps
Поле 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
content: {
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
},
url: '#',
target: '_blank',
title: 'Кликни меня',
content: 'Псевдоссылка, меняющая цвет по клику'
}
}
BEMJSON[
'page',
{
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
}
}
]
deps
Элементы блока
Элемент 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>
HTML{
block: 'page',
title: 'Page title',
styles: {
elem: 'css',
content: '.page { color: #f00 }'
},
content: 'Страница с тэгом <style>'
}
BEMJSONdeps
Специализированное поле 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>
HTML{
block: 'page',
title: 'Page title',
scripts: {
elem: 'js',
content: 'console.log(document.title)'
},
content: 'Страница с тэгом <script>'
}
BEMJSONdeps
Специализированное поле 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>
HTML{
block: 'page',
title: 'Page title',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Страница с тэгом style'
}
BEMJSONdeps
Элемент 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>
HTML{
block: 'page',
title: 'Заголовок страницы',
head: [
{
elem: 'css',
url: 'example.css'
},
{
elem: 'meta',
attrs: {
name: 'keywords',
content: 'js, css, html'
}
}
],
content: 'Страница с подключенным CSS и meta-данными'
}
BEMJSONdeps
Подробнее смотрите в документации к <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>
HTML{
block: 'page',
title: 'Hello, World!',
zoom: true,
content: 'Включение масштабирования страницы'
}
BEMJSONdeps
Элементы блока
Элемент 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>
HTML{
block: 'page',
title: 'Page title',
head: {
elem: 'icon',
src72: 'example.png'
},
content: 'Страница с подключенным значком'
}
BEMJSONdeps