Вопросы с меткой [pug]
Pug (бывш. Jade) – препроцессор HTML и серверный шаблонизатор для Node.js, написанный на JavaScript.
142
вопроса
0
голосов
0
ответов
6
показов
Как связать Figma и .pug
Нашел как перевести макет из Figma в html/css(есть специальный генератор)
А вот как перевести этот макет в формат .pug/css, или в ручную придется?
0
голосов
0
ответов
10
показов
Не работают стили для pug
В папке server главный файл:
import express from "express";
import cors from "cors";
import indexRoute from "./routes/index.js";
import path from "path";
import { fileURLToPath } from "url";
...
0
голосов
1
ответ
28
показов
Нужно переработать код js под классы
Есть подобная двусторонняя шкала, с полностью рабочим функционалом, но проблема заключается в том, что их должно быть четыре, а это тонна дополнительного кода, понимаю, что на классах это было бы ...
0
голосов
1
ответ
34
показа
Миксин для картинок pug
На страницу добавляется картинка
+image('illustration.svg')
Я нашла миксин, но у картинок разное расширение
`
mixin image(name)
img.src(src=require(`../src/images/${name}.png`) alt=name)
`
Как ...
0
голосов
0
ответов
9
показов
Не удаётся установить pug
При попытке установки pug (Выполнении команды npm install pug) выводится следующий результат:
$ npm install pug
changed 1 package, and audited 69 packages in 1s
8 packages are looking for funding
...
0
голосов
1
ответ
48
показов
Как получить данные из json файла в pug шаблон?
У меня есть файл dataset.json и файл index.pug В файле у меня есть переменная -let data. Как мне получить данные из файла dataset.json в переменную data в файл index.pug, где я буду в дальнейшем через ...
0
голосов
1
ответ
68
показов
Как получить данные из json файла в pug шаблон
Всем доброго времени суток. У меня есть файл dataset.json и файл index.pug
В файле у меня есть переменная -let data. Как мне получить данные из файла dataset.json в переменную data в файл index.pug, ...
0
голосов
0
ответов
50
показов
Как сделать часть текста атрибута жирным в pug?
Из index.pug передается такой объект:
+section({
img: 'flashcards.png',
title: '{# some text #}',
text: '{# some text #}'
}).section_flashcards
в компоненту section
....
0
голосов
0
ответов
371
показ
В webpack 5 не загружаются изображения из pug после обновления стилей и автообновления страницы (webpack-dev-server)
Изображения в pug добавлены через require, в webpack.config через 'asset/resources'.
При первой загрузке страницы все отображается правильно, если внести изменения в любой файл pug - страница ...
0
голосов
0
ответов
20
показов
PUG, как разобраться в чужом коде?
Изучаю верстку c препроцессором PUG. Для изучения скачала готовый проект, но разбираться в нем очень сложно. Подскажите, как правильно разбираться в таком коде. Например на index.pug в блоке ...
0
голосов
0
ответов
29
показов
tailwind не дружит с pug
Пытаюсь использовать pug в связке с tailwindcss
Но pug не хочет компилировать угловатые скобки в классах, которые в tailwind можно использовать в качестве создания произвольных значений
например:
.max-...
0
голосов
0
ответов
17
показов
Почему ломается миксин при замене var на let?
Заменил в коде все var на let и все работает, кроме этого миксина. Тут почему-то все ломается.
mixin dropdown(params)
.dropdown(class=`js-${params.type}`)
.dropdown__caption
h3....
2
голоса
1
ответ
89
показов
Как настроить вебпак для автоматической обработки множества страниц
Я сделал сборку на webpack, в которой pug файлы генерируются из общей папки ".src/pages/". Как создать отдельную папку для каждого .pug файла в ".src/pages/" и при этом сохранить ...
0
голосов
1
ответ
35
показов
Компиляция PugJS
Нужно скомпилировать файлы из папки src/myproject в папку build/myproject
Делаю это такой командой в консоле
pug src/myproject -P -w -o build/myproject
Как сделать то же самое через node index.js? Что ...
0
голосов
0
ответов
42
показа
Как подключить стили из _header.scss в index.pug?
include pug/libs/_libs
doctype html
html(lang='ru')
head
meta(charset='UTF-8')
meta(http-equiv='X-UA-Compatible' content='IE=edge')
meta(name='viewport' content='width=device-width, ...
0
голосов
1
ответ
163
показа
Webpack выдает ошибки при сборке проекта, когда пытаюсь подключить файлы Pug
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve 'C:\Users\sonic\Desktop\landing\src\index.pug' in 'C:\Users\sonic\Desktop\landing'
ModuleNotFoundError: Module ...
1
голос
0
ответов
103
показа
Pug + gulp-file-include
Не совсем понимаю, как работает плагин gulp-file-include с pug
Как можно в файл index.pug передать модуль head.pug c переменной ( @@title ), пример :
head.pug
doctype html
html(lang="ru")
...
0
голосов
1
ответ
468
показов
Не отображаются картинки webpack + pug
Пробую настроить webpack с pug, но почему-то не отображаются картинки на странице.
Подскажите, в чем может быть проблема?
При чем при работе с чистым html все работает нормально и картинки ...
1
голос
1
ответ
24
показа
Что написано в коде блока-шаблона?
Пытаюсь понять, как правильно создавать готовую сборку для работы над вэб-проектами и дальнейшей сборки через webpack.
Нашел вроде бы неплохую статью про это: https://nicothin.pro/page/my-start-kit Но ...
1
голос
0
ответов
28
показов
Как настроить переход на другие страницы в PUG?
Правильно ли я понял, что при верстке на pug создается отдельный pug-файл для каждой страницы и уже потом с помощью webpack это все собирается в одно? Но я не пойму, как происходит переход на другую ...
0
голосов
0
ответов
86
показов
Как в PUG правильно выглядит шаблон многостраничного сайта?
Обычно при создании многостраничного сайта для каждой страницы создается отдельный html файл: portfolio.html, about.html итд с похожим шаблоном
<!DOCTYPE html>
<html lang="ru">
<...
2
голоса
1
ответ
873
показа
SVG sprite. Не отображается картинка
Собираю верстку в gulp 4, создаю спрайт из свг вот таким таском:
gulp.task('svgSpriteBuild', function () {
return gulp.src('app/img/sprites/svg/*.svg')
// minify svg
.pipe(svgmin({
...
2
голоса
0
ответов
71
показ
Замена пути к pug шаблону в атрибуте href на итоговый html
Есть два pug шаблона, в разметки одного есть тег <a> в href указан путь к другому pug шаблону, как настроить webpack так, чтобы при сборке, путь указывающий на pug шаблон заменялся на путь к его ...
1
голос
0
ответов
36
показов
Как можно использовать Sass и Pug вместе с React (Create-React-App)?
Обычно пишу html на pug, css - на scss. С Реактом из-за этого возникли проблемы, т.к. на вёрстку и стилизацию уходит много времени. Хочу как обычно писать на pug и scss. Возможно ли их троих подружить ...
0
голосов
1
ответ
286
показов
air-datepicker. Почему в разметку добавляется два календаря?
Есть компонент air-datepicker в который я добавляю кнопку "применить"
mixin date-picker()
.date-picker(id='date-picker' type='text')
import './date-picker.scss';
import 'air-datepicker/...
1
голос
2
ответа
128
показов
Как в PUG указать несколько атрибутов для тега?
Мне нужно подключить файл css через pug. Для этого для link нужно указать несколько атрибутов в файле PUG. Я не знаю как это сделать.
Как в PUG указать несколько атрибутов для тега?
Код в PUG:
block ...
0
голосов
0
ответов
54
показа
Как использовать шаблоны Pug?
Друзья, всем доброго времени суток.
Я некоторое время назад учился веб-разработке и сейчас настало время освежить мои знания. Вообщем у меня не получается скомпилировать html из двух файлов - layout....
0
голосов
0
ответов
651
показ
Как вызвать функцию из другого файла?
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
ответа
94
показа
Flex. Как выровнять класс по правому краю?
.iqdropdown-buttons
button.iqdropdown-button_clean очистить
button.iqdropdown-button_apply применить
.iqdropdown-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;...
0
голосов
1
ответ
212
показов
Как передать массив в миксин в pug?
mixin dropdown(params)
.iqdropdown.menu-open(id=`iqdropdown${params.idPostfix}`)
p.iqdropdown-selection= params.selectionText
.iqdropdown-menu
each item in ['item1','item2','...
1
голос
1
ответ
841
показ
Событие на дочернем компоненте, не касаясь родительского
Имеем pug и vue.
На клик по элементу .item настроено событие pushElement.
На клик по дочернему элементу .check настроено событие addGoodsCheck.
Но при клике по по .check срабатывает и pushElement.
...
1
голос
0
ответов
14
показов
Как отследить используемые Pug файлы
Использую свою библиотеку блоков в pug миксинах, каждый блок в отдельной папке. Собираю с помощью gulp. Есть ли способ отслеживать в gulp, какие миксины были использованы на странице чтобы подтянуть ...
0
голосов
1
ответ
39
показов
Настройка шаблонизатора PUG
Такой вопрос, можно ли как-то настроить PUG что бы он на выходе форматировал код не в одну большую строку?
<div class="gallery__list our-work__gallery-big">
<div class="...
2
голоса
0
ответов
89
показов
Информация из mongodb не выводится в элемент pug
В схеме базы данных есть ключ Biography, его то нам и надо вывести в модальное окно документа PUG. В PUG ничего не выводится.
Вот схема:
const characterSchema = new Schema({
desc: String,
...
0
голосов
1
ответ
61
показ
Способ отправки данных с сервера node js в модальное окно
На сервере, который написан на node js, имеются данные типа string. Как это можно отправить в содержимое модального окна? Содержимое окна:
.modal-overlay
.modal
a.close-...
0
голосов
1
ответ
129
показов
Object is possibly 'null' - ошибка. Typescript
Нам необходимо активировать модальное окно с помощью функции в классе, но переменную modal терминал выдает как Object is possibly 'null'. Функция в конце класса - modalAction.
export class PonyBox {
...
1
голос
1
ответ
74
показа
Не могу корректно собрать PHP файл из PUG
Верстаю сайт через PUG, хочу посадить его на WordPress. При вставке PHP кода (который вставляет картинку на страницу) в PUG-файл, в конечном PHP-файле вместо символа "<" получается "&...
0
голосов
0
ответов
323
показа
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
ответов
24
показа
Выдает ошибку в pug при попытке написать dropdown menu
Необходимо написать код на pug, который создает кнопку с вываливающимся меню при нажатии. Что здесь не так? В консоли выдает ошибку.
hr
.dropdown
button.dropbtn ...
0
голосов
1
ответ
162
показа
Pug + v-for + prettier неправильно форматируется, как пофиксить?
Использую VSCode.
Пример:
<template lang="pug">
item(v-for="item, index in list")
</template>
prettier форматирует в:
<template lang="pug">
item(v-...
2
голоса
1
ответ
1k
показов
Как подружить Vuelidate с Typescript
package.json
"dependencies": {
"vuelidate": "^0.7.5",
},
"devDependencies": {
"@types/vuelidate": "^0.7.13",
...
0
голосов
1
ответ
95
показов
Как добавить внешнюю ссылку на картинку в img(src="")?
В документе product-list.pug я добавляю карточки продуктов и при добавлении ссылки на внешнюю картинку по url она не подтягивается:
each product in prods
.card
...
0
голосов
0
ответов
56
показов
Верстка иконок с генерацией через each в Pug
Всем привет. В чем собственно проблема. Мне нужно сверстать 4 иконки в ряд. Причем нужно использовать Font Awesome. Вообщем, я создал цикл each с переменной social для создания элементов списка, но ...
1
голос
0
ответов
30
показов
Как подключить один стиль(scss) на две страницы сразу(Parcel JS)?
У меня есть простейшая структура проекта:
index.pug:
doctype html
html(lang="ru")
head
meta(charset="utf-8")
title MyPage
body
include src/header/header.pug
src/header/header.pug:
...
0
голосов
0
ответов
373
показа
Как передать переменную в модальное окно pug
Есть форма, которая строит таблицу из некоторых данных. У каждой строки в таблице есть кнопка, при нажатии на которую открывается модальное окно. Мне надо передать в него переменную, которая ...
1
голос
1
ответ
82
показа
Возможно ли в Pug подставлять родительский селектор?
В Sass можно использовать символ & для обозначения родительского селектора, есть ли подобная функция в Pug?
Например
.my_class
&_inner
&_more
и чтоб на выходе получилось:
&...
0
голосов
1
ответ
750
показов
Настройка Webpack и Pug, как правильно указать src для image
Уже пол дня не могу настроить правильные пути для картинок в pug файлах, мне кажется я что-то не понимаю или упускаю из виду.
В src использую require() и указываю относительный путь
img(src=require('...
0
голосов
2
ответа
715
показов
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
голосов
1
ответ
46
показов
Как переключиться на класс scss на pug шаблонизаторе(div.header) в phpstorm
Всем привет. Подскажите, какой плагин скачать или как настроить pug(jade) что бы при работе в phpstorm я мог при клике на класс перейти на этот самый класс, как это доступно с обычным html
2
голоса
1
ответ
562
показа
Как подружить pug и BrowserSync?
index.pug преобразовался в index.html
BrowserSync следил за изменениями index.html и показывал изменения в браузере без перезагрузки страницы
Код взят отсюда https://github.com/morphIsmail/...