Подскажите как сверстать страницу в drupal10

Главные вкладки

Аватар пользователя riaron986 riaron986 26 сентября в 20:02
<div class="ssyls">
            <div class="strel"><div class="strelk"><b>>>></b></div></div>
        <b class="nazv">Авиационные смазки</b><br>
          <div class="text">Мы предлагаем премиальными авиационными смазками и предназначены для обеспечения исключительной защиты от износа и коррозии.</div><br/>
          <div class="ssylk1"><a href="/avsmaz/" class="ssylk">>>></a></div>
        </div>

как это сверстать по друпаловски

Комментарии

Аватар пользователя jura12 jura12 27 сентября в 12:14

Наследуете нужную тему. В своей теме прописываете нужные параметры по имеющимся классам. Я так делал. Новые параметры имеют приоритет.

Аватар пользователя riaron986 riaron986 27 сентября в 13:19

У меня это содержимое. Т.е. футер и хедер остаются неизменными. Если я просто скопирую код в article(учил друпал на английском не помню как по русски) это будет нормальная практика?

Аватар пользователя y-vo y-vo 27 сентября в 15:56

Сильно зависит от того в каком контексте Вы это хотите применить, но если именно правка темы, то алгоритм примерно следующий: Нужно активировать дебагинг в конфигурациях друпала, тогда в инструментах разработчика будет видно какой файл отвечает за формирования данного куска вашей верстки. После чего идете в ядро, смотря от какой темы наследовались, берете из нее этот файл, копируете и вставляете в свою тему в соответствующую дирректорию, там уже переопределяете по своему усмотрению. Обычно самое базовое это page.html.twig скорее всего.
Но судя по вопросу не очень понятно куда это нужно имплементировать, это можно решить разными путями - от блоков, до простого создания ноды или переопределения файлов темы.

Аватар пользователя riaron986 riaron986 28 сентября в 15:30

вот точнее
у меня в меню есть ссылка главная я хочу чтобы в ней была эта страница

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>Главная</title>
    <style>
        b.head{
            color:red;
            font-size: 1.3em;
        }
        div.center{margin-left: 46.7%}
       div.fleft{
           float: left;
           display: inline-block;
       }
       div.cenRed{
           border: 2px solid red;
           width:3.3%;
       }
       div.sinRed{
           border: 1px solid red;
           margin-top:1px;
           width:2.4%;
       }div.sinGrey{
           border: 1px solid grey;
           margin-top:1px;
           width:5%;

       }
        div.imgg{
            margin-top: 1%;
            margin-left:44.8%;
        }
        div.texte{
            text-align: justify;
            width: 70%;
            margin-left: 15%;
            color: grey;
        }
        div.text{
            margin-top: 1em;
        }
        div.strel{
            margin-top: 1em;
            margin-bottom: 1em;
            border:2px solid white;
            box-shadow: inset 0 0 6px;box-shadow: inset 0 0 6px;
            height:5em;
            width:5em;
            border-radius: 50%;
            margin-left: 4em;
            horiz-align: center;
            vertical-align: center;
        }
        div.strelk{
            margin-left: 1.7em;
            margin-top: 2em;
            color:red;
        }
        b.nazv{
            margin-left: 1.7em;

        }
        div.ssyls{
            width:17.5%;
            height:25.5em;
            padding:2%;
            float: left;
            display: inline-block;
            text-align: justify;
            background-color: lightgray;

        }
        div.ssyls:hover{
            background-color: red;
        }
        div.ssyls:hover  div.strelk{
            color: white;
        }
        div.ssyslss{
            margin-left: 15%;

        }
        div.bgrey{
            position: absolute;
            margin-top: 6%;
            width:100%;
            height: 65%;
            background-color: lightgray;
        }
        div.ssylk1{
            margin-top: 7em;
            margin-left: 5em;

        }div.ssylk2{
            margin-top: 3.5em;
            margin-left: 5em;

        }div.ssylk3{
            margin-top: 4.5em;
            margin-left: 5em;

        }div.ssylk4{
            margin-top: 4.5em;
            margin-left: 5em;

        }
        a.ssylk
        {
            padding:5px;
            background-color: white;
            color:red;

        }
    </style>
</head>
<body>

<div class="center">
    <b class="head">Авиамасло</b><br/>
</div>
<div class="imgg"><div class="sinGrey fleft"></div><div class="sinRed fleft"></div> <div class="cenRed fleft"></div><div class="sinRed fleft"></div><div class="sinGrey fleft"></div></div><br/>
<div class="texte"> Наша компания была учреждена в 1992 году и осуществляет поставки авиационных масел, смазок и гидравлических жидкостей как зарубежного, так и российского производства.

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

    Наша миссия - поставка продукции и предоставление комплекса услуг авиакомпаниям, предпочитающим гарантированное качество, оперативность, повсеместную доступность авиационных масел, смазок и гидравлических жидкостей.</div>

<div class="bgrey">
    <div class="ssyslss">
        <div class="ssyls">
            <div class="strel"><div class="strelk"><b>>>></b></div></div>
        <b class="nazv">Авиационные смазки</b><br>
          <div class="text">Мы предлагаем премиальными авиационными смазками и предназначены для обеспечения исключительной защиты от износа и коррозии.</div><br/>
          <div class="ssylk1"><a class="ssylk">>>></a></div>
        </div>
        <div class="ssyls">
          <div class="strel"><div class="strelk"><b>>>></b></div></div>
          <b class="nazv">Авиационные масла</b><br>
          <div class="text"> Мы предлагаем масла применяемые более чем в 11000 авиационных двигателях и способные обеспечить отличную производительность. Они подходят для применения в большинстве коммерческих авиационных двигателях.</div><br/>
          <div class="ssylk2"><a class="ssylk">>>></a></div>
        </div>
        <div class="ssyls">
            <div class="strel"><div class="strelk"><b>>>></b></div></div>
             <b class="nazv">Гидравлические жидкости</b><br>
              <div class="text"> Мы предлагаем гидравлические жидкости обеспечивающие максимальную производительность. Они предназначены для использования в коммерческих самолетах.</div><br/>
             <div class="ssylk3"><a class="ssylk">>>></a></div>
        </div><div class="ssyls">
            <div class="strel"><div class="strelk"><b>>>></b></div></div>
             <b class="nazv">Другие смазочные материалы</b><br>
              <div class="text"> Мы предлагаем широкий спектр смазочных материалов, которые включают редукторные и специальные масла. Все они разработаны для обеспечения превосходной производительности.</div><br/>
             <div class="ssylk4"><a class="ssylk">>>></a></div>
        </div>

    </div>
</div>
</body>
</html>

Аватар пользователя y-vo y-vo 29 сентября в 7:41

Ну проще всего создать страницу, вставить туда верстку и указать ее как главную в настройках друпал, css уже прописать в вашей теме. Но правильнее наверное было бы переопределить page--front.html.twig в своей теме и там уже сделать все как положено. Еще наверное даже проще чем первый вариант это создать блок, засунуть туда верстку и вывести его только для главной в нужном регионе, ну а css соответственно залить в тему.

Аватар пользователя VasyOK VasyOK 28 сентября в 22:41

1. Как подключать CSS файлы в тему оформления знаете?
2. Эти файлы можно задать не только для всей темы, но и для любой ноды или блока прописав на них ссылки в их twig файлах.
3. Нужный контент (то что у вас в секции body) вы можете просто вставить в контент ноды со всеми тегами не используя CKEditor. Смотрите чтоб формат ввода не исправлял HTML и не добавлял отступы.

На будущее. HTML для нод и вьюх настроить можно как в админке Друпала (возможно с доп модулями) так и в twig файлах. Если зададитесь этим вопросам - сможете выбрать удобные для себя методы.