Вопросы с меткой [pug]
Pug (бывш. Jade) – препроцессор HTML и серверный шаблонизатор для Node.js, написанный на JavaScript.
129
вопросов
0
голосов
0ответов
9 показов
Как использовать шаблоны Pug?
Друзья, всем доброго времени суток.
Я некоторое время назад учился веб-разработке и сейчас настало время освежить мои знания. Вообщем у меня не получается скомпилировать html из двух файлов - layout....
0
голосов
0ответов
26 показов
Как вызвать функцию из другого файла?
mixin checkbox-buttons(params)
.expandable-checkbox-list(id=params.inpId, type='button', onclick='testfunc()' )
.expandable-checkbox-list__caption
h3.expandable-checkbox-list__text= params....
0
голосов
2ответа
25 показов
Flex. Как выровнять класс по правому краю?
.iqdropdown-buttons
button.iqdropdown-button_clean очистить
button.iqdropdown-button_apply применить
.iqdropdown-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;...
0
голосов
0ответов
48 показов
Как сделать такие динамические и кликабельные сектора в круге?
Есть сайт на vue. И там такой круг:
Кол-во частей в круге может быть от 2 до 12. Все они кликабельны. Я дошёл до такого этапа:
Я не могу понять как менять их размер в зависимости от их кол-ва. ...
0
голосов
0ответов
13 показов
Как передать массив в миксин в pug?
mixin dropdown(params)
.iqdropdown.menu-open(id=`iqdropdown${params.idPostfix}`)
p.iqdropdown-selection= params.selectionText
.iqdropdown-menu
each item in ['item1','item2','...
0
голосов
0ответов
5 показов
Как реализовать присваивание класса в списке меню Pug
Использую Html препроцессор PUG
Хочу реализовать меню так, чтоб при переходе на другую страницу подсвечивался активный пункт меню.
Возможно есть способ узнать window.location.href внутри препроцессора....
0
голосов
0ответов
8 показов
Как сделать, чтобы пользователь передавал выбранные элементы в массив с помощью select?
Есть пустой массив. При выборе из select выбранный элемент должен добавляться в массив. Проблема в том, что это у меня работает, но добавляется только первый выбранный элемент, остальные - нет.
Код из ...
0
голосов
0ответов
18 показов
Как в Pug (jade) правильно создать переиспользуемые секции подключаемые через include на многостраничных сайтах
На скринах выделен блок page-preview, который меняется на разных страницах сайта(меняется текст, оформление и т.д.). Я создал отдельный файл _page-preview.pug, в котором описал разметку этого блока ...
0
голосов
0ответов
12 показов
Получаю выбранный option, а ничего не отправляется, как сделать чтоб отправлялось?
pug:
form(action="/cart/add" method="POST")
input(type="hidden" name="id" value= product.id)
select(name="size" required)
each size in product.sizes
option(value= size)= ...
0
голосов
0ответов
15 показов
Как избавиться от ошибок при компиляции pug и sass?
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-...
1
голос
1ответ
70 показов
Событие на дочернем компоненте, не касаясь родительского
Имеем pug и vue.
На клик по элементу .item настроено событие pushElement.
На клик по дочернему элементу .check настроено событие addGoodsCheck.
Но при клике по по .check срабатывает и pushElement.
...
0
голосов
0ответов
15 показов
Как отработать данную ссылку на клиенте?
Выводится только страница с json, например если я написал в поиск: "костюм", то выводится:
[{"img":["/big-size/IMG_2256.jpg","/big-size/IMG_2257.jpg","big-size/IMG_2264.jpg"],"sizes":["S"...
1
голос
0ответов
9 показов
Как отследить используемые Pug файлы
Использую свою библиотеку блоков в pug миксинах, каждый блок в отдельной папке. Собираю с помощью gulp. Есть ли способ отслеживать в gulp, какие миксины были использованы на странице чтобы подтянуть ...
0
голосов
0ответов
46 показов
миксин Pug отказывается работать Error: Error parsing body of the with expression
миксин отказывается работать: не знаю как правильно вывести данные из массива
mixin menuMobile(element)
.menu-mobile
ul.menu-mobile__list
li.menu-mobile__item
a(...
0
голосов
1ответ
23 показа
Настройка шаблонизатора PUG
Такой вопрос, можно ли как-то настроить PUG что бы он на выходе форматировал код не в одну большую строку?
<div class="gallery__list our-work__gallery-big">
<div class="...
2
голоса
0ответов
56 показов
Информация из mongodb не выводится в элемент pug
В схеме базы данных есть ключ Biography, его то нам и надо вывести в модальное окно документа PUG. В PUG ничего не выводится.
Вот схема:
const characterSchema = new Schema({
desc: String,
...
0
голосов
1ответ
20 показов
Способ отправки данных с сервера node js в модальное окно
На сервере, который написан на node js, имеются данные типа string. Как это можно отправить в содержимое модального окна? Содержимое окна:
.modal-overlay
.modal
a.close-...
0
голосов
1ответ
15 показов
Object is possibly 'null' - ошибка. Typescript
Нам необходимо активировать модальное окно с помощью функции в классе, но переменную modal терминал выдает как Object is possibly 'null'. Функция в конце класса - modalAction.
export class PonyBox {
...
1
голос
1ответ
32 показа
Не могу корректно собрать PHP файл из PUG
Верстаю сайт через PUG, хочу посадить его на WordPress. При вставке PHP кода (который вставляет картинку на страницу) в PUG-файл, в конечном PHP-файле вместо символа "<" получается "&...
0
голосов
0ответов
30 показов
Pretty: true некоректно работает в gulp-pug
Всем привет, компилирую pug через gulp. Функция выглядит так:
function html() {
return src(path.src.pug)
.pipe(pug({ pretty: true }))
.pipe(webphtml())
.pipe(dest(path.build.html))
....
0
голосов
0ответов
16 показов
Выдает ошибку в pug при попытке написать dropdown menu
Необходимо написать код на pug, который создает кнопку с вываливающимся меню при нажатии. Что здесь не так? В консоли выдает ошибку.
hr
.dropdown
button.dropbtn ...
0
голосов
1ответ
38 показов
Pug + v-for + prettier неправильно форматируется, как пофиксить?
Использую VSCode.
Пример:
<template lang="pug">
item(v-for="item, index in list")
</template>
prettier форматирует в:
<template lang="pug">
item(v-...
1
голос
1ответ
250 показов
Как подружить Vuelidate с Typescript
package.json
"dependencies": {
"vuelidate": "^0.7.5",
},
"devDependencies": {
"@types/vuelidate": "^0.7.13",
...
0
голосов
1ответ
29 показов
Как добавить внешнюю ссылку на картинку в img(src=“”)?
В документе product-list.pug я добавляю карточки продуктов и при добавлении ссылки на внешнюю картинку по url она не подтягивается:
each product in prods
.card
...
0
голосов
0ответов
24 показа
Можно ли использовать препроцессор PUG (jade) и Gulp как замену генераторам статических сайтов?
Есть небольшой проект, примерно, на 35 страниц, Так как динамической информации там мало, решил не использовать CMS, а делать сайт статичным. Использую в работе препроцессор PUG + таск ранер Gulp. Для ...
0
голосов
0ответов
33 показа
Верстка иконок с генерацией через each в Pug
Всем привет. В чем собственно проблема. Мне нужно сверстать 4 иконки в ряд. Причем нужно использовать Font Awesome. Вообщем, я создал цикл each с переменной social для создания элементов списка, но ...
0
голосов
0ответов
14 показов
Автозакрытие скобок Pug в WebStorm
Как настроить автозакрытие скобок Pug в WebStorm? Дико неудобно так писать, когда сначала открываешь вручную скобку, потом еще вручну дописываешь закрывающую. Или может какие-нибудь плагины кто знает, ...
0
голосов
0ответов
27 показов
js файлы подключаются только в index.html, а в других .html нет
Не могу понять почему не переносится папка js и не подключаются .js на других страницах.
На index.html есть папка js с файлами http://i.imgur.com/1DYUlhf.png и они подключаются. Все норм. А вот на ...
0
голосов
0ответов
84 показа
Как передать переменную в модальное окно pug
Есть форма, которая строит таблицу из некоторых данных. У каждой строки в таблице есть кнопка, при нажатии на которую открывается модальное окно. Мне надо передать в него переменную, которая ...
1
голос
1ответ
59 показов
Возможно ли в Pug подставлять родительский селектор?
В Sass можно использовать символ & для обозначения родительского селектора, есть ли подобная функция в Pug?
Например
.my_class
&_inner
&_more
и чтоб на выходе получилось:
&...
0
голосов
1ответ
250 показов
Настройка Webpack и Pug, как правильно указать src для image
Уже пол дня не могу настроить правильные пути для картинок в pug файлах, мне кажется я что-то не понимаю или упускаю из виду.
В src использую require() и указываю относительный путь
img(src=require('...
0
голосов
2ответа
278 показов
Webpack 2 pug - не работает require
В общем, есть webpack.config.js
const webpack = require("webpack");
const path = require("path");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const PATHS = {...
0
голосов
0ответов
96 показов
Как настроить pug с webpack-dev-server?
Я не могу получить html-файлы при запуске webpack-dev-server. У меня есть файлы pug, и эти файлы хорошо работают, когда я запускаю их с webpack в режиме разработки или продакшена. Я вижу ...
0
голосов
1ответ
32 показа
Как переключиться на класс scss на pug шаблонизаторе(div.header) в phpstorm
Всем привет. Подскажите, какой плагин скачать или как настроить pug(jade) что бы при работе в phpstorm я мог при клике на класс перейти на этот самый класс, как это доступно с обычным html
2
голоса
1ответ
212 показов
Как подружить pug и BrowserSync?
index.pug преобразовался в index.html
BrowserSync следил за изменениями index.html и показывал изменения в браузере без перезагрузки страницы
Код взят отсюда https://github.com/morphIsmail/...
0
голосов
0ответов
33 показа
PUG: Таблица в таблице из array of objects?
У меня задача создать таблицу определенной ширины и наполнять ее объектами из массива объектов заполняя ее по 6 объектов в ряд, создавая новый ряд каждый раз когда заполнятся 6 объектов и так до конца ...
0
голосов
0ответов
72 показа
Как по умолчанию во Vue CLI писать разметку в файлах pug, чтобы они потом компилились в html?
всем привет!
при сборке билда столкнулся с проблемой
Child html-webpack-plugin for "index.html":
1 asset
ERROR in ./node_modules/html-webpack-plugin/lib/loader.js!./source/index.pug
Module parse ...
1
голос
0ответов
58 показов
Как организована разработка и дальнейшая поддержка шаблонов custom WordPress-темы?
Натягиваю вёрстку на движок WP. Для реализации frontend-части выбрал Webpack (PUG + Sass). На выходе получил исходники, которые "нарезаю" в соответствующие WP-шаблоны. Мне не нравится двух-этапный ...
0
голосов
1ответ
52 показа
Создание аккордеона, направить на путь правильный
Есть такая структура в PUG:
.table-wrap
.table-block
.services__block.services__title.services__btn Нажать кнопку
.table-hidden
table.services__table
.table-...
-1
голос
1ответ
114 показов
Как создать mixin в pug с несколькими дефолтными аргументами?
mixin article(title='Default Title')
Примерно так, но с несколькими аргументами, и у каждого дефолтное значение.
0
голосов
1ответ
125 показов
Множественный <select> на PUG
Пытаюсь написать выпадающий список национальностей на PUG. Знаю что для сокращения нужно использовать цикл. Но никак не получается скомпилировать чтобы подставлялись значения массива в код html. ...
0
голосов
1ответ
117 показов
Как в PUG добавить ссылки в переменную
- var values = [];
ul
each val in values.length ? values : ['Home', 'documentation', 'about']
li= val
Как вместо строк добавить ссылки.
Например, вместо Home было a(href='home.html') Home
0
голосов
1ответ
50 показов
Обновление данных на pug странице каждую секунду
В своем проекте я использую express, node.js в качестве серверной части. Для отображения использую шаблонизатор pug. Я хотел бы узнать, как я могу передавать новые данные каждую секунду на страницу. ...
0
голосов
1ответ
179 показов
pug вложенный миксин
Всем привет, помогите разобраться с миксинами в pug. Мне нужно, чтобы один миксин входил во вложенность другого
mixin cards(header, image)
._cards-list--el
._cards-list--el-header= header
...
0
голосов
0ответов
17 показов
Почему так мало разрешений у WebPack
Кто в курсе почему webpack конвертирует из js в js? Почему можно только с Sass работать? Есть ли какой то скрипт помогающий работать с less и Pug ?
0
голосов
1ответ
92 показа
pug mixin input type
mixin input-text(value, type)
- var type = text
case type
when date
input.form-control(type="date" value=value)
default
input.form-control(type=type ...
0
голосов
0ответов
62 показа
Pug компиляция в HTML. На выходе красивый HTML
Есть код pug
ul.header__menu-list#header-menu
li.header__menu-item
a.header__menu-link(href='catalog.html') Ювелирные изделия
li.header__menu-item
a.header__menu-link(href='')...
0
голосов
0ответов
95 показов
Как встроить переменную Pug в Vue структуру?
Есть шаблон на pug и vuejs
#masthead(v-for="item in dataTitles[1].id" :class="dataTitles[0].pageClass" :data-title="dataTitles[0].dataName")
.content
h1.pageTitle {{ dataTitles[0].dataName }...
0
голосов
0ответов
209 показов
Ошибка TypeError: document.body is null
Не понимаю что не так.. вроде всё правильно сделал. Страницу отображает, но выдаёт в консоли firefox ошибку эту. Стоит ли волноваться?
Вроде все отступы поставлены правильно, может я не вижу просто:)
...
0
голосов
1ответ
64 показа
Express.js использовать html вместо pug(jade)
только начал изучать node.js по заграничным гайдам и там используют pug, а мне это не особо нравится, т.к. уже имеется готовая верстка(html) с которой хочется продолжать работать. Погуглив, нашел ...