freeCodeCamp

3.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
5895f70bf9fc0f352b528e64	Use a Template Engine's Powers	2		Использование мощностей шаблонных движков

Description

Напомним, что этот проект строится на следующем стартовом проекте Glitch или клонируется из GitHub . Одна из величайших особенностей использования механизма шаблонов - это возможность передавать переменные от сервера к файлу шаблона перед его переносом в HTML. В вашем файле Pug вы собираетесь использовать переменную, ссылаясь на имя переменной как #{variable_name} строке с другим текстом на элементе или используя равную сторону элемента без пробела, такого как p= variable_name которое устанавливает это p элементов текст, равный переменной. Мы настоятельно рекомендуем посмотреть синтаксис и структуру Pug здесь, на их GITUBES README. Мопс - это использование пробелов и вкладок для отображения вложенных элементов и сокращения количества кода, необходимого для создания красивого сайта. Если посмотреть на наш файл-мопс «index.pug», включенный в ваш проект, мы использовали заголовок и сообщение переменных. Чтобы передать их только с нашего сервера, вам нужно будет добавить объект в качестве второго аргумента в ваш res.render с переменными и их значение. Например, передайте этот объект вместе с установкой переменных для вашего индексного представления: {title: 'Hello', message: 'Please login' Он должен выглядеть так: res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'}); Обновите свою страницу, и вы увидите те значения, которые отображаются в вашем представлении, в правильном месте, как указано в файле index.pug! Представьте свою страницу, когда вы думаете, что у вас все в порядке.

Instructions

Tests

tests:
  - text: Моппер отображает переменные правильно
    testString: 'getUserInput => $.get(getUserInput("url")+ "/") .then(data => { assert.match(data, /pug-variable("|")>Please login/gi, "Your projects home page should now be rendered by pug with the projects .pug file unaltered"); }, xhr => { throw new Error(xhr.statusText); })'

Challenge Seed

Solution

// solution required

3.7 KiB Raw Blame History Unescape Escape