UdnlxPortfolio - Внутренние страницы на ModX

В этой шпаргалке будет рассмотрен пример создания внутренних страниц со своим фоном для каждой страницы, с хлебными крошками и контентной частью.

Первое что нужно сделать, это создаем шаблон для внутренних страниц, и называем его "Шаблон внутренней страницы".

Шаблон (символ "((" заменяем на две квадратные скобки)

<!DOCTYPE html>
<html lang="ru">
    <base href="((++site_url))" />
    
(($HEAD))

<body>

(($HEADER))





	<div class="container-page-001">
	    <div class="overlay-black">
		<div class="container-page-001-content">
		    <p class="container-page-001__title">((*pagetitle))</p>
		    <nav aria-label="breadcrumb">
            (($BREADCRUMBS))
            </nav> 
		</div>
		</div>
	</div>
	
	<style>
	    .container-page-001:before {
	        background-image: url(((*background_image)));
	    }
	</style>
	
	
	
	
	
    <div class="container-page-002">
		<div class="container-page-002-content">
		    <div class="container-page-002__textcontent">
		        ((*content))
		    </div>
		</div>
	</div>
	
	
	
	
	
(($FOOTER))

(($SCRIPT))

</body>
</html>

Эти строки нужно будет добавить в начало CSS файла:

Начало CSS

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;}

После этого создаем стили для наших внутренних страниц.

CSS

/*СТИЛИ ВНУТРЕННЕЙ СТРАНИЦЫ*/
.container-page-001 {
    padding: 198px 0 0 0;}
.container-page-001:before {
    content: '';
    background-color: #ffffff;
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;}
.container-page-001-content {
    width: 1200px;
    height: 300px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 10px 10px 10px;}
.container-page-001-content p.container-page-001__title {
    position: relative;
    margin: 0;
    font-family: VerdanaBold;
    font-size: 57px;
    line-height: 1;
    color: #ffffff;}
ul.breadcrumb {
    position: relative;
    padding: 0 5px 0 5px;
    margin: 10px 0 0 0;
    background-color: transparent;}
.container-page-001-content a {
    padding: 3px;
    text-decoration: none;
    font-family: Verdana;
    font-size: 15px;
    color: #ffffff;
    transition:0.5s;}
.container-page-001-content a:hover {
    background-color: #007dc094;
    border-radius: 5px;
    transition:0.5s;}
.breadcrumb-item+.breadcrumb-item::before {
    font-family: Verdana;
    display: inline-block;
    color: #ffffff;
    content: "-";
    font-size: 15px;}
    
    
    
    
    
.container-page-002 {
    background-color: #ffffff;
    flex-grow: 1;}
.container-page-002-content {
    width: 1200px;
    margin: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;}
.container-page-002__textcontent p {
    margin: 0;
    font-family: Verdana;
    font-size: 15px;
    line-height: 1.2;
    color: #000000;
    text-align: justify;}
    
    
    
    
    
@media (max-width: 1200px) {
.container-page-001-content {
    width: 100%;}  
.container-page-002-content {
    width: 100%;}}



@media (max-width: 992px) {
.container-page-001 {
    padding: 147px 0 0 0;}    
.container-page-001-content p.container-page-001__title {
    font-size: 45px;}}
    
    
    
@media (max-width: 768px) {
.container-page-001 {
    padding: 96px 0 0 0;}}
    
    
    
@media (max-width: 576px) {
.container-page-001-content p.container-page-001__title {
    font-size: 37px;}}
    
    
    
@media (max-width: 400px) {
.container-page-001-content p.container-page-001__title {
    font-size: 30px;}
.container-page-001-content a {
    font-size: 11px;}}

Следующий этап, это создадим "хлебные крошки".

Для этого в разделе "Категории" создадим новую категорию "Хлебные крошки", далее создадим чанк с именем "BREADCRUMBS", поместим его в созданный раздел и напишем в него код:

BREADCRUMBS (символ "((" заменяем на две квадратные скобки)

((Breadcrumbs? &crumbSeparator=`` &homeCrumbTitle=`Главная`))

После этого находим файл по пути /public_html/core/components/breadcrumbs/model/breadcrumbs файл breadcrumbs.class.php, находим в нем строки:

'maxDelimiter' => '...',

и начиная с них заменяем на такой вот код: скачать.

Далее создаем пользовательское поле "background_image" для бэка страницы, привязываем его к шаблону внутренних страниц.

Теперь создаем страницу, прицепляем к ней шаблон внутренних страниц, устанавливаем картинку для бэка, и на этом все.