Ответы пользователя по тегу HTML
  • Когда использовать в pug mixins, когда block, когда include?

    AlexandrKazakov
    @AlexandrKazakov
    Frontend
    Здравствуйте.

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

    Сам я занимаюсь вёрсткой сайтов, пишу, что использую сейчас:

    extends core/layout.pug
    
    block vars
      - var pageTitle = 'Название'
      - var pageDescription = 'Описание'
      - var pageKeywords = 'Ключевые слова'
      - var userState= 'logout'
    
    block content


    Данный код у меня идёт в начале типовой страницы. Как видно вначале я подключаю базовый шаблон(layout) на который подключаю: миксины, bemto, HEAD с содержимым, скрипты(перед закрытием body) и тому подобное(ниже есть пример).
    Далее у меня идёт набор переменных. если взять последнюю переменную, то можно понять, как это может быть удобно(в данном случае когда имеет несколько состояний: залогинен пользователь или нет).

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

    Конечно больше я всё же использую миксины, возможно привык. Но вообще здесь куча вариантов, даже например в том, в каком виде передавать значения в миксинах. Я всем желаю не бояться Pug.js а начать писать на нём многостраничный сайт и вскоре вы сами всё поймете, что для вас удобнее.

    Как писал ранее, сам я использую библиотеку миксинов bemto, мне нравится, но использовать её не обязательно, это больше индивидуально.

    Осталось рассказать про block

    Вначале стоит начать использовать block только в шаблоне(layout) , вот например у меня(сопоставьте с примером выше):

    include ../bemto/bemto
    include   mixins
    
    doctype html
    html(lang="ru")
      block vars
      head
        meta(charset='utf-8')
        meta(http-equiv='X-UA-Compatible', content='IE=edge')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta( name="format-detection" content="telephone=no")
        link(href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,700,700i&subset=cyrillic" rel="stylesheet")
        title #{pageTitle}
        meta(name='description', content= pageDescription)
        meta(name='keywords', content= pageKeywords)
        link(rel="stylesheet" href="css/bundle.min.css")
      body
        block content
    
    
        +b.overlay(id="overlay")
    
        include ../blocks/product-card-modal
        include ../blocks/cart-modal
        include ../blocks/login-modal
    
        block scripts 
          script(src="js/bundle.min.js")


    Это вариант моего шаблона, который я использую для типовой страницы(смотрите первый пример).

    Верстая, вскоре научитесь передавать block в миксины, это элементарно(Илья Ростопка привёл пример), жизнь заставит научиться :)
    Ответ написан
    Комментировать