@AleksKek
учусь веб-разработке

Когда использовать в pug mixins, когда block, когда include?

Когда использовать в pug mixins, когда block, когда include? Не пойму что когда использовать, с инклюдами все вроде ясно, а блоки и миксины вызывают путаницу
  • Вопрос задан
  • 6008 просмотров
Пригласить эксперта
Ответы на вопрос 2
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 в миксины, это элементарно(Илья Ростопка привёл пример), жизнь заставит научиться :)
Ответ написан
Комментировать
alvvi
@alvvi
export default apathy;
1. Внутри миксина чтобы получить детей которых вы ему передаете
2. Внутри темплейта который в будущем будет extend-ить другой темплейт, чтобы получить детей из темплейта, который extend-ит этот темплейт.
3. Внутри темплейта, который extend-ит чтобы передать детей
Примеры 2 и 3 здесь: https://pugjs.org/language/inheritance.html

А вот пример для 1
mixin foo()
  div.bar
    block

+foo()
  div.foo Hello world

На выходе получим
<div class="bar">
  <div class="foo">Hello world</div>
</div>

ну или тоже есть в доках, но чуть сложнее: https://pugjs.org/language/mixins.html
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы