Navbar example
This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.
View navbar docs »This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.
View navbar docs »В head(голове) сайта задаются основные настройки и мета-данные страницы, и подключаются стили оформления:
<head>

	<title>[[*longtitle]]</title>

	<base href="[[!++site_url]]" />

	<meta name="description" content="[[*description]]">

	<meta name="keywords" content="[[*keywords]]">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

	<style>

		[[$style]]

	</style>

</head>
Кусок кода | Что делает |
---|---|
<head> |
Открываем head(голову) сайта |
<title>[[*longtitle]]</title> |
Задаем title(заголовок) страницы, используя поле-переменную [[*longtitle]] , встроенную в Modx |
<base href="[[!++site_url]]" /> |
Задаем основной домен сайта, используя переменную Modx [[!++site_url]] |
<meta name="description" content="[[*description]]"> |
Задаем discription(описание) страницы, используя поле Modx [[*description]] |
<meta name="keywords" content="[[*keywords]]"> |
Задаем keywords(ключевые слова) страницы, используя созданное дополнителное поле Modx [[*keywords]] |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
Мета-теги для поддержки старых версий Internet Explorer |
<meta charset="utf-8"> |
Задаем кодировку utf-8 |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
Включаем адаптацию для мобильных устройствах |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> |
Подключаем стили оформления(CSS) Bootstrap 4, используя CDN(облако) Bootstrap. Свежую версию копируем с официального сайта https://getbootstrap.com/ |
<style>

		[[$style]]

	</style> |
Подключаем наши стили оформления(CSS), для этого создаем чанк - [[$style]] |
</head> |
Закрываем head |