Для чего используется экранирование !{} в шаблонизаторе Jade?

#nodejs #jade #javascript

Если не сложно, то хотелось бы разобрать на примерах, заранее благодарен. Jade использую
c фреймворком Express на Node.JS.     

Ответы

Ответ 1

Просто попробуйте:

my_var = 'test test'
p #{my_var}
p !{my_var}


В первом случае Jade эскейпит html, во втором нет. Т.е. когда вы передаете в шаблон
кусок html кода, разметки, то нужно пользоваться !{}, а если это текст, где вы хотите
показать отобразить кусок кода (в комментарии кто-то запостил например), тогда #{}
отэскейпит html, и на странице будет отображен текст html (в исходнике будут < и >).



let $ = q => document.querySelector(q);

$('#result').innerHTML = jade.compile($('#template').innerHTML)({my_var: 'test test'});







UPD Playground

Как создать переменные, которые будут видимы в SASS, JavaScript и Jade(Pug)

#javascript #sass #jade #pug

Каким наиболее простым образом можно создать переменные, которые будут видимы в:


SASS
JavaScript-файлах (с использованием Webpack и возможностей ES6)
Jade-шаблонах


Зачем это надо, думаю понятно: меняем имя, например, CSS-класса в одном месте, и
оно автоматически подставляется везде. Без этой возможности изменить имя класса в крупном
проекте - целая проблема.
    

Ответы

Ответ 1

создаете файл .env и в нем переменную SOME_ENV_VAR к примеру
SASS_ENV=blabla

читаем переменную в компиляторе SASS или JS: var ENV = process.env.SOME_ENV_VAR ||
'default';

асайним переменную для Jade: 

const express = require('express');
var app = express();
app.locals.env = process.env;

и читаем переменную в Jade #{env.SOME_ENV_VAR}

Дополнение #1

var sass = encodeURIComponent(jsonToSassVars(sassGlobals));
var webpackConfig = {
    module: {
        loaders:[
            {test: /.scss$/, loader: "style!css!sass!prepend?data=" + sass}
        ]
    },
}


jsonToSassVars - https://gist.github.com/Kasu/ea4f4861a81e626ea308

Update: the previous link is not available anymore, prefer to use https://gist.github.com/ali-master/cb54a3501c0ea29a88a0297cb9533be9

Как создать переменные, которые будут видимы в SASS, JavaScript и Jade(Pug)

#javascript #sass #jade #pug

Каким наиболее простым образом можно создать переменные, которые будут видимы в:


SASS
JavaScript-файлах (с использованием Webpack и возможностей ES6)
Jade-шаблонах


Зачем это надо, думаю понятно: меняем имя, например, CSS-класса в одном месте, и
оно автоматически подставляется везде. Без этой возможности изменить имя класса в крупном
проекте - целая проблема.
    

Ответы

Ответ 1

создаете файл .env и в нем переменную SOME_ENV_VAR к примеру
SASS_ENV=blabla

читаем переменную в компиляторе SASS или JS: var ENV = process.env.SOME_ENV_VAR ||
'default';

асайним переменную для Jade: 

const express = require('express');
var app = express();
app.locals.env = process.env;

и читаем переменную в Jade #{env.SOME_ENV_VAR}

Дополнение #1

var sass = encodeURIComponent(jsonToSassVars(sassGlobals));
var webpackConfig = {
    module: {
        loaders:[
            {test: /.scss$/, loader: "style!css!sass!prepend?data=" + sass}
        ]
    },
}


jsonToSassVars - https://gist.github.com/Kasu/ea4f4861a81e626ea308

Update: the previous link is not available anymore, prefer to use https://gist.github.com/ali-master/cb54a3501c0ea29a88a0297cb9533be9

node.js: зачем использовать express?

#nodejs #безопасность #шаблонизаторы #jade

Прочитал массу статей, но так и не понял какой смысл привязываться к express и шаблонизаторам?
Не дает ли больше контроля над собственным приложением подход с использованием базовых
модулей node.js как описано в этой книжке

Прежде всего интересует с точки зрения безопасности (в том числе "затруднение" ддос
атаки), а не удобства и времени разработки.
    

Ответы

Ответ 1

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

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

Далее, в плане безопасности. Вот стал ты делать что-то сам. Да, возможно, ты суперкрутой
специалист в этой теме, сделаешь всё идеально и оно будет очень хорошо работать. Да,
возможно. Но таких случаев единицы. Весьма вероятно, что ты что-то не учтёшь, сделаешь
посредственно и, даже если удастся избежать явных косяков, можно просто насажать всяких дыр.

Плюс популярных модулей в том, что они широко используются и можно рассчитывать,
что раз их выбрали, то они достаточно качественные, чтобы этого заслужить. Кроме того,
можно рассчитывать на исправление ошибок в них, если такие обнаружатся. Минус же в
том, что если вдруг выясняется какая-либо дыра, то все, кто использует этот модуль
становятся уязвимы. Вполне возможно, что никого твой сайтик особо и не интересовал,
чтобы искать в нём дыры, даже если их там много. Но вот опробовать нечто уже готовое
на нём - почему бы нет.

В большинстве случаев быстрота разработки и достаточная надёжность перевешивают необходимость
в излишней гибкости. Ну мало кто хочет себе признаться "я делаю хреновый сайт, на котором
будет полтора человека и пофиг на все дыры, как-нибудь сам слеплю".

Хотя в целях обучения можно было бы попробовать написать нужную функциональность
самому вместо использования готового модуля.

Условия if/else в pug

#html5 #jade #pug

Есть блок с svg и нужно менять содержимое в зависимости от переменной, код:

mixin container(svg)    
.logo-box
    if svg == first
      svg.class__first
    else if svg === second
      svg.class__second
    else if svg === third
      svg.class__third
    else
      svg.class__fourth
+container(first)
+container(second)
+container(third)


Проблема заключается в том, что неважно какое значение я пишу в миксине container()
всегда отображается svg.class__first?
    

Ответы

Ответ 1

Синтаксис pug, вроде как, гласит что нужны кавычки. 

mixin container(svg)    
  .logo-box
      if svg=='first'
        svg.class__first
      else if svg=='second'
        svg.class__second
      else if svg=='third'
        svg.class__third
      else
        svg.class__fourth


+container('first')
+container('second')
+container('third')


Пример на CodePen (View Compiled HTML)


Ответ 2

Небольшое дополнение к соседнему ответу.

Код в pug является обычным кодом javascript.

Без кавычек first, second, third считаются переменными и, так как они нигде не объявлены,
их значением будет undefined.

Убедиться в этом можно добавив следующее условие:

if(typeof(first) == 'undefined')
  +container(first)


И в этом случае будет выведено всего два блока.

Так как все переменные равны undefined, и передаются тоже, то вполне работает равенство
undefined === undefined.

Для исправления можно воспользоваться решением из соседнего ответа: отказаться от
переменных и использовать строки.

Либо объявить переменные и присвоить им нужные значения.

Jade запись объекта

#gulp #jade

Мое знание Jade - базовое, поэтому поэтому вопрос от новичка )))

Как можно(если можно) создать объект (не получая его из JSON или других внешних файлов)
в самом jade файле

Моя попытка - при которой получаю ошибку unexpexted text {

-var profiles = [
    {
        'name': 'anna',
        'age': 26
    }
]

Причину понимаю, это из-за перевода строки. Все работает если записать это в одну
строку, но при большем объеме это не удобно.

-var profiles = [{'name':'anna','age': 26}]

Может кто сталкивался с подобным и знает методы, как правильно это записывается (если
такое вообще возможно), если нет буду грузить из внешки.
    

Ответы

Ответ 1

Попробуйте так

-
    var profiles = {
        'name': 'anna',
        'age': 26
    };


Ответ 2

В Jade блоки небуфиризированного JavaScript-кода обрамляются при помощи символа -
и идущих за ним строк с отступом:

-
    var profiles = [
        {
            'name': 'anna',
            'age': 26
        }
    ]

    // код сверху и снизу от этой строки
    // принадлежит одному блоку

    var foo = 'bar';
    foo += ' of gold';


p А здесь уже идут 
  strong обычные
  |  конструкции Jade


Блок кода заканчивается последней строкой  c отступом.

Как корректно перейти с Jade на Pug?

#nodejs #jade #pug

Здравствуйте. Я создал чистый проект при помощи express-generator'а и проверив его
на устаревшие зависимости при помощи npm-check, начал их обновлять. Всё обновилось
успешно, кроме jade, который недавно сменил имя. NPM пишет по этому поводу следующее: 


  npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the
latest version of pug instead of jade


Я выполнил следующие команды:

npm uninstall --save jade
npm install --save pug
npm start


Сервер запустился, но при переходе на localhost:3000 упал с ошибкой 'Error: Cannot
find module 'jade'. Тогда я обновил в коде app.js

app.set('view engine', 'jade');


на

app.set('view engine', 'pug');


и сервер падает с новой ошибкой: Error: Failed to lookup view "error" in views directory
"~/documents/projects/node/template/views"

Подскажите пожалуйста, что я делаю не так?
    

Ответы

Ответ 1

Всё, спасибо, разобрался методом тыка! :) Нужно было в папке views переименовать
все файлы *.jade на *.pug!


Ответ 2

У меня проблема решилась сама собой после

npm-check -u

Intellij Webstorm и Jade форматирование скомпилированного HTML

Есть IDE Webstorm в которой я работаю с Jade файлами, которые после компиляции в HTML выдают такое форматирование кода:

А мне нужно вот такое:
Может такое делать webstorm из коробки или нужно использовать сборщики типа gulp?

Ответ

В Jade есть опция --pretty -P, --pretty compile pretty html output Добавьте её как аргумент

Как добавлять инкремент(i) в css класс на pug(он же бывший jade)?

На нативном javascript это было-бы примерно следующим образом:
HTML:

Js:
var buttons = document.querySelectorAll('.btns');
for(i=0; iPug:
- var modalList = [{ title: "Многокамерная съемка", posterImage: "content/video.jpg", description: 'Мы используем камеры Panasonic, Sony, Blackmagic, Go Pro.Съемка на несколько камер с возможностью прямой трансляции, проекторы, плазменные панели. Онлайн трансляции в сети Интернет: 720р, 1080р, 4К.В нашем арсенале мультироторы для съемки верхних планов с 3-х осевой стабилизацией и возможностью передачи сигнала на пульт видеоинженеров (с дальнейшей трансляцией на экраны или в сеть).Кинематографические краны и тележки обеспечивают подвижность картинки и необходимую плавность кадра. Тросовая гиростабилизированная система подвеса с длиной кабельной линии до 100 метров позволяет снимать большие спортивные мероприятия и концерты непосредственно над зрителями.Благодаря оптическим удлинителям сигнала работа операторов проходит на значительном удалении от пультовой. Изображение передается в формате высокой четкости.' }, {title: "blabla"} ];
mixin modal-tackles(tackles) .modal.modal-contact.fade.tackles__modal_(здесь должен быть инкремент)(tabindex="-1", role="dialog", aria-labelledby="exampleModalLabel") .modal-dialog(role="document") .modal-content .modal-header span= tackles.title button.close(type="button",data-dismiss="modal", aria-label="Close") span(aria-hidden="true") x .modal-body
for tackles in modalList +modal-tackles(tackles)

Ответ

Вместо for в данном случае лучше использовать each, так как он позволяет получить индекс текущей итерации.
Далее этот индекс нужно передать в mixin.
Так как классы не поддерживают интерполяцию, класс, который надо собирать динамически нужно перенести в атрибуты.
В итоге должно получиться что-то такое:
for tackles, index in modalList +modal-tackles(tackles, index)
И в mixin:
mixin modal-tackles(tackles, index) .modal.modal-contact.fade(class=`tackles__modal_${index}`, tabindex="-1", role="dialog", aria-labelledby="exampleModalLabel")

Как создать переменные, которые будут видимы в SASS, JavaScript и Jade(Pug)

Каким наиболее простым образом можно создать переменные, которые будут видимы в:
SASS JavaScript-файлах (с использованием Webpack и возможностей ES6) Jade-шаблонах
Зачем это надо, думаю понятно: меняем имя, например, CSS-класса в одном месте, и оно автоматически подставляется везде. Без этой возможности изменить имя класса в крупном проекте - целая проблема.

Ответ

создаете файл .env и в нем переменную SOME_ENV_VAR к примеру SASS_ENV=blabla
читаем переменную в компиляторе SASS или JS: var ENV = process.env.SOME_ENV_VAR || 'default';
асайним переменную для Jade:
const express = require('express'); var app = express(); app.locals.env = process.env;
и читаем переменную в Jade #{env.SOME_ENV_VAR}
Дополнение #1
var sass = encodeURIComponent(jsonToSassVars(sassGlobals)); var webpackConfig = { module: { loaders:[ {test: /.scss$/, loader: "style!css!sass!prepend?data=" + sass} ] }, }
jsonToSassVars - https://gist.github.com/Kasu/ea4f4861a81e626ea308
Update: the previous link is not available anymore, prefer to use https://gist.github.com/ali-master/cb54a3501c0ea29a88a0297cb9533be9

node.js: зачем использовать express?

Прочитал массу статей, но так и не понял какой смысл привязываться к express и шаблонизаторам? Не дает ли больше контроля над собственным приложением подход с использованием базовых модулей node.js как описано в этой книжке
Прежде всего интересует с точки зрения безопасности (в том числе "затруднение" ддос атаки), а не удобства и времени разработки.

Ответ

Шаблонизаторы удобны тем, что разметка не пишется в коде. ПОмимо отделения логики от разметки, отпаданет необходимость экранирования всяких символов и кучи конкатенаций строк.
Что касается контроля. Node.js даёт вообще максимальный контроль за происходящем. Но, чем более низкоуровневые инструменты ты используешь, тем больше придётся реализовать самому. Да, это даст максимальную гибкость в тех местах, которые нужны лично тебе. Но одновременно это значительно увеличит время разработки.
Далее, в плане безопасности. Вот стал ты делать что-то сам. Да, возможно, ты суперкрутой специалист в этой теме, сделаешь всё идеально и оно будет очень хорошо работать. Да, возможно. Но таких случаев единицы. Весьма вероятно, что ты что-то не учтёшь, сделаешь посредственно и, даже если удастся избежать явных косяков, можно просто насажать всяких дыр.
Плюс популярных модулей в том, что они широко используются и можно рассчитывать, что раз их выбрали, то они достаточно качественные, чтобы этого заслужить. Кроме того, можно рассчитывать на исправление ошибок в них, если такие обнаружатся. Минус же в том, что если вдруг выясняется какая-либо дыра, то все, кто использует этот модуль становятся уязвимы. Вполне возможно, что никого твой сайтик особо и не интересовал, чтобы искать в нём дыры, даже если их там много. Но вот опробовать нечто уже готовое на нём - почему бы нет.
В большинстве случаев быстрота разработки и достаточная надёжность перевешивают необходимость в излишней гибкости. Ну мало кто хочет себе признаться "я делаю хреновый сайт, на котором будет полтора человека и пофиг на все дыры, как-нибудь сам слеплю".
Хотя в целях обучения можно было бы попробовать написать нужную функциональность самому вместо использования готового модуля.

Условия if/else в pug

Есть блок с svg и нужно менять содержимое в зависимости от переменной, код:
mixin container(svg) .logo-box if svg == first svg.class__first else if svg === second svg.class__second else if svg === third svg.class__third else svg.class__fourth +container(first) +container(second) +container(third)
Проблема заключается в том, что неважно какое значение я пишу в миксине container() всегда отображается svg.class__first?

Ответ

Синтаксис pug, вроде как, гласит что нужны кавычки.
mixin container(svg) .logo-box if svg=='first' svg.class__first else if svg=='second' svg.class__second else if svg=='third' svg.class__third else svg.class__fourth
+container('first') +container('second') +container('third')
Пример на CodePen (View Compiled HTML)

Как корректно перейти с Jade на Pug?

Здравствуйте. Я создал чистый проект при помощи express-generator'а и проверив его на устаревшие зависимости при помощи npm-check, начал их обновлять. Всё обновилось успешно, кроме jade, который недавно сменил имя. NPM пишет по этому поводу следующее:
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
Я выполнил следующие команды:
npm uninstall --save jade npm install --save pug npm start
Сервер запустился, но при переходе на localhost:3000 упал с ошибкой 'Error: Cannot find module 'jade'. Тогда я обновил в коде app.js
app.set('view engine', 'jade');
на
app.set('view engine', 'pug');
и сервер падает с новой ошибкой: Error: Failed to lookup view "error" in views directory "~/documents/projects/node/template/views"
Подскажите пожалуйста, что я делаю не так?

Ответ

Всё, спасибо, разобрался методом тыка! :) Нужно было в папке views переименовать все файлы *.jade на *.pug!