page
This block provides templates that create a set of top-level HTML elements for a page: <html>, <head>, and <body>.
Overview
Special fields of the block
| Field |
Type |
Description |
| doctype |
String |
Use this field to redefine the DTD string for the current document. |
| title |
String |
Use this field to specify the content of <title>. |
| favicon |
String |
Use this field to specify the URL of the favicon for the page. |
| head |
BEMJSON |
Use this field to add content to <head>. |
| styles |
BEMJSON |
Use this field to connect CSS style sheets to the document. |
| scripts |
BEMJSON |
Use this field to embed scripts in the body of the document. |
| content |
BEMJSON |
Use this field to set the page content. |
Elements of the block
| Element |
Usage |
Description |
| css |
BEMJSON |
Connects CSS using a URL or a string. |
| js |
BEMJSON |
Connects JS using a URL or a string. |
| meta |
BEMJSON |
Creates <meta> HTML elements. |
Special fields of block elements
| Element |
Field |
Type |
Description |
| css |
url |
String |
Sets the URL for downloading styles. |
|
content |
String |
Sets styles in string format. |
| js |
url |
String |
Sets the URL for downloading a script. |
|
content |
String |
Sets scripts in string format |
Public block technologies
The block is implemented in:
Description
This block is responsible for creating top-level HTML elements, connecting CSS, JS, and <meta> elements to a page, and defining the title. The BEMJSON declaration for the block and its elements have special fields reserved for this purpose.
Special fields of the block
doctype field
Type: String.
Use this field to explicitly set the DTD (Document Type Definition) for the current document. If omitted, <!DOCTYPE html> is used by default.
title field
Type: String.
Title of the page. It becomes the <title> HTML element.
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</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":{}}'>Block page</body>
</html>
{
block: 'page',
title: 'title',
content: 'Block page'
}
favicon field
Type: String.
Use this field to specify the URL of the favicon for the page:
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</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":{}}'>Page with users favicon.ico</body>
</html>
{
block: 'page',
title: 'title',
favicon: 'favicon.ico',
content: 'Page with users favicon.ico'
}
head field
Type: BEMJSON.
Use this field to add content to the <head> HTML element that is defined in the block template:
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</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":{}}'>Page with JS and meta-data</body>
</html>
{
block: 'page',
title: 'title',
head: [
{
elem: 'js',
url: 'jquery-min.js'
},
{
elem: 'meta',
attrs: {
name: 'description',
content: 'Yet another webdev blog'
}
}
],
content: 'Page with JS and meta-data'
}
styles field
Type: BEMJSON.
Use this field to connect 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</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":{}}'>Page with CSS</body>
</html>
{
block: 'page',
title: 'title',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Page with CSS'
}
scripts field
Type: BEMJSON.
Embeds JS in the body of the page, at the end of the <body> HTML element:
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</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 with JS in body
<script src="_index.js"></script>
</body>
</html>
{
block: 'page',
title: 'title',
scripts: {
elem: 'js',
url: '_index.js'
},
content: 'Page with JS in body'
}
content field
Type: BEMJSON.
Use this field to set the page content.
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</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">Pseudo link</div>
</body>
</html>
{
block: 'page',
title: 'title',
content: {
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
},
url: '#',
target: '_blank',
title: 'Click me',
content: 'Pseudo link'
}
}
[
'page',
{
block: 'link',
mods: {
pseudo: 'yes',
togcolor: 'yes',
color: 'green'
}
}
]
Elements of the block
css element
Connects CSS using a URL or a string. Depending on whether the url field is specified in the element declaration, an HTML element is created with the tag:
<link> and the stylesheet property, if url is specified.<style>, if url is omitted. In this case, it is assumed that the element content is passed using the content property in the element's BEMJSON declaration.
Specialized content field
Type: String.
Use this field for explicitly passing the content of the <style> HTML element:
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":{}}'>Page with tag <style></body>
</html>
{
block: 'page',
title: 'Page title',
styles: {
elem: 'css',
content: '.page { color : #f00 }'
},
content: 'Page with tag <style>'
}
Specialized url field
Type: String.
Sets the URL for downloading CSS. The value of the url field in the BEMJSON declaration is passed to the href property in the created HTML element.
js element
Connects JS using a URL or a string. Creates the <script> HTML element.
Specialized content field
Type: String.
Use this field for explicitly passing the content of the <script> HTML element:
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":{}}'>Page with tag <script>
<script>
console.log(document.title)
</script>
</body>
</html>
{
block: 'page',
title: 'Page title',
scripts: {
elem: 'js',
content: 'console.log(document.title)'
},
content: 'Page with tag <script>'
}
Specialized url field
Type: String.
Sets the URL for downloading a script. The value of the url field in the BEMJSON declaration is passed to the src property in the created HTML element.
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":{}}'>Page with tag style</body>
</html>
{
block: 'page',
title: 'Page title',
styles: {
elem: 'css',
url: '_index.css'
},
content: 'Page with tag style'
}
meta element
Creates <meta> HTML elements and defines user metadata for them. Metadata is passed as keys and values of attribute hashes, the attrs properties in the BEMJSON declaration of the element:
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</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":{}}'>Page with CSS и meta-data</body>
</html>
{
block: 'page',
title: 'title',
head: [
{
elem: 'css',
url: 'example.css'
},
{
elem: 'meta',
attrs: {
name: 'keywords',
content: 'js, css, html'
}
}
],
content: 'Page with CSS и meta-data'
}
For more information, see the documentation for <meta> at MDN.