UdnlxPortfolio - Посадка верстки на ModX

Для начала нам нужно установить полезные базовые плагины на ModX. Эти плагины могут пригодится на любом сайте, поэтому советую поставить их все.

Ставим через "Пакеты" - "Установщик":

Ace
AjaxForm
Breadcrumbs
getResources
FormIt
pdoTools
SimpleSearch
tagElementPlugin
TinyMCE
translit

Теперь некоторые из скриптов поднастроим.

Переходим в "Системные настройки", выбираем "ace" и "Тема редактора" меняем на "terminal".

Настроим сразу ЧПУ. Для этого переходим в настройки "core" в раздел "Дружественные URL". Меняем "Транслитерация псевдонимов" на "russian" и последние 5 параметров: Использовать дружественные URL, Строгий режим дружественных URL, Проверять на дублирование URI во всех контекстах, Использовать вложенные URL, Использовать «замороженные» URI родителя меняем на "Да".

Перебрасываем все содержимое нашей папки "assets" в ModX на хостинге в папку "assets".

Подготовим "Главную страницу" к посадке верстки.

Переходим на нее, удаляем из контентной части все содержимое. "Заголовок" и "Расширенный заголовок" меняем на "Главная страница".

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

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

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

<body>

(($HEADER))





РАЗМЕТКА ГЛАВНОЙ СТРАНИЦЫ





(($FOOTER))

(($SCRIPT))

</body>
</html>

Создаем категорию "Главные разделы на страницах" и создаем чанки размещая их в этой категории.

HEAD

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<meta name="Description" content="">
	<meta name="keywords" content="">

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="assets/css/styles.css">

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

	<link rel="stylesheet" href="assets/css/owl.carousel.css">
	<link rel="stylesheet" href="assets/css/owl.theme.default.css">
</head>

В HEADER помещаем наши менюшки

	<a id="home"></a>
	<div class="container-header1">
		<div class="container-header1-content">
			<div class="container-header1__logo">
				<a class="container-header1__logo-link" href="">
					<img class="container-header1__logo-link-img" src="assets\images\logo.png" alt="">
					<p class="container-header1__logo-link-text">ОИК</p>
				</a>
			</div>
			<div class="container-header1__center">
				<p class="container-header1__center-text1">
					Комплексные решения для производства электроники
				</p>
				<p class="container-header1__center-text2">
					Решения "под ключ" технологический аудит, программные продукты
				</p>
			</div>
			<div class="container-header1__phone">
				<a class="container-header1__phone-link1" href="">+7(495)123-45-78</a>
				<a class="container-header1__phone-link2" href="">КОНСУЛЬТАЦИЯ</a>
			</div>
		</div>
	</div>





	<div class="container-header2">
		<div class="container-header2-content">
			<nav class="navbar navbar-expand-lg">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="fa fa-bars"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#link1">ГЛАВНАЯ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link2">О КОМПАНИИ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link3">УСЛУГИ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">ПРОЕКТЫ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">ОТЗЫВЫ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">НОВОСТИ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">ВАКАНСИИ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">КОНТАКТЫ</a>
					</li>
				</ul>
				</div>
			</nav>
		</div>
	</div>

В FOOTER помещаем код нашего Футера

	<div class="container-footer1">
		<div class="container-footer1-content">
			<div class="container-footer1__items">

				<div class="container-footer1__items-itm">
					<p class="container-footer1__items-itm-maintext">
						О компании
					</p>
					<p class="container-footer1__items-itm-text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
					</p>
				</div>

				<div class="container-footer1__items-itm">
					<p class="container-footer1__items-itm-maintext">
						Услуги
					</p>
					<p class="container-footer1__items-itm-text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
					</p>
				</div>

				<div class="container-footer1__items-itm lastblock">
					<p class="container-footer1__items-itm-maintext">
						Контакты
					</p>
					<p class="container-footer1__items-itm-text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
					</p>
				</div>

			</div>
		</div>
	</div>





	<div class="container-footer2">
		<div class="container-footer2-content">
			<div class="container-footer2__items">

				<div class="container-footer2__items-itm">
					<a class="container-footer2__items-itm-link" href="">Политика конфеденциальности</a>
				</div>

				<div class="container-footer2__items-itm">
					<p class="container-footer2__items-itm-text">2010-2022</a>
				</div>

				<div class="container-footer2__items-itm itm-right">
					<a class="container-footer2__items-itm-link" href="">Разработка сайта</a>
				</div>

			</div>
		</div>
	</div>

Ну и соответственно в SCRIPT помещаем блок со скриптами.

SCRIPT

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<script src="assets/js/main.js"></script>

<script src="assets/js/owl.carousel.js"></script>
<script>
	$(document).ready(function(){
	$('#carousel-one').owlCarousel({
		loop: false,
		autoplay: false,
		margin: 0,
		nav: false,
		dots: false,
		responsive:{
					0:{
                        items:2
                    },
                    400:{
                        items:2
                    },
                    576:{
                        items:2
                    },
                    768:{
                        items:2
                    },
                    950:{
                        items:3
                    },
                    1200:{
                        items:3
                    }
                }
	});
	$('#pre01').parent().addClass('off-element');
	});
</script>

На этом все, наша верстка посажена на CMS ModX.