freeCodeCamp

2.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
5895f70bf9fc0f352b528e64	Use a Template Engine's Powers	2		Usa los poderes de una plantilla de motor

Description

Como recordatorio, este proyecto se está construyendo sobre el siguiente proyecto de inicio en Glitch , o clonado desde GitHub . Una de las mejores características de usar un motor de plantillas es poder pasar variables del servidor al archivo de plantillas antes de representarlo en HTML. En su archivo Pug, está a punto de usar una variable haciendo referencia al nombre de la variable como #{variable_name} línea con otro texto en un elemento o usando un lado igual en el elemento sin un espacio como p= variable_name que establece eso Elementos de texto para igualar la variable. Recomendamos encarecidamente consultar la sintaxis y la estructura de Pug aquí en sus Githubs README. Pug tiene que ver con el uso de espacios en blanco y pestañas para mostrar elementos anidados y reducir la cantidad de código necesario para crear un sitio hermoso. Mirando nuestro archivo pug 'index.pug' incluido en su proyecto, usamos el título y el mensaje de las variables Para pasarlas solo desde nuestro servidor, deberá agregar un objeto como segundo argumento a su res.render con las variables y su valor. Por ejemplo, pase este objeto a lo largo de la configuración de las variables para su vista de índice: {title: 'Hello', message: 'Please login' Debería verse como: res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'}); ¡Ahora actualice su página y debería ver esos valores representados en su vista en el lugar correcto como se muestra en su archivo index.pug! Envía tu página cuando creas que lo has hecho bien.

Instructions

Tests

tests:
  - text: Pug render las variables correctas
    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

2.6 KiB Raw Blame History