0

Ejemplo:

[https://alvarotrigo.com/fullPage/#firstPage][1]

Al hacer el enrutamiento así,

var express = require('express');

var home = require('./routes/home');
var bloqueuno = require('./routes/bloqueuno');
var bloquedos = require('./routes/bloquedos');
var bloquetres = require('./routes/bloquetres');
var bloquecuatro = require('./routes/bloquecuatro');

app.use('/', home);
app.use('/bloqueuno', bloqueuno);
app.use('/bloquedos', bloquedos);
app.use('/bloquetres', bloquetres);
app.use('/bloquecuatro', bloquecuatro);

Router:

 var express = require('express');
    var router = express.Router();

    router.get('/', function(req, res, next) {
      res.render('home', { title: 'Home' });
    });

    //bloqueUno
    var express = require('express');
    var router = express.Router();

    router.get('/', function(req, res, next) {
      res.render('bloqueuno', { title: 'bloqueuno' });
    });
.......

Pug

 ul#menu
  li.active(data-menuanchor='bloaqueuno')
    a(href='/bloqueuno')  seccion uno
  li(data-menuanchor='bloquedos')
    a(href='/bloquedos') seccion dos
  li(data-menuanchor='bloquetres')
    a(href='/bloquetres') seccion tres
  li(data-menuanchor='bloquecuatro')
    a(href='/bloquecuatro') seccion cuatro

El inconveniente es que cambia a otra pagina,no recarga en la misma pagina,estoy usando node,express,jade.

3
  • Deberías actualizar Jade a Pug npmjs.com/package/pug ahí viene la guía para hacer templates
    – J.Correa
    Commented el 22 ago. 2017 a las 17:13
  • 1
    ¿A qué te refieres con que no carga en la misma página? tienes bien definido lo que se debe renderizar según la URL, siempre te cargará lo que tengas ya sea en Home o BloqueN. ¿Lo que quieres es reutilizar partes del Home en los otros bloques?
    – J.Correa
    Commented el 23 ago. 2017 a las 14:46
  • Exacto!, lo que quiero es dar rutas a las secciones o bloques usando la misma barra de menú. ¿es posible?. la verdad no tengo claro como hacerlo.
    – Developer
    Commented el 23 ago. 2017 a las 15:56

1 respuesta 1

1

Para reutilizar partes de Home dentro de otros bloques hay que crear plantillas.

En Pug existe algo que se llama herencia que significa: un template que puede ser reutilizado por otros templates, pudiendo sustituir bloques de acuerdo a la nomenclatura de las mismas.

En la doc viene cómo hacerlo. Aquí un ejemplo de esa fuente:

Lo que quieras que se reutilice en todos los bloques lo vas a guardar en un archivo que por convención lo nombras layout.pug. Digamos que es algo como:

layout.pug

html
  head
    title My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

Es una estructura HTML básica. Ten cuidado con las correctas identaciones, sino te dará error.

¿Dónde se coloca el contenido de los bloques?

En este ejemplo, las líneas que inician con "block" significa que serán reemplazadas por código que desees a la hora de usar este layout.

¿Cómo lo uso y reemplazo?

Una vez que guardas como archivo tu layout.pug, creas otro archivo de pug que es donde vas a reutilizar el layout. Siguiendo el ejemplo anterior:

page.pug

extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['cat', 'dog']
  each petName in pets
    include pet.pug

extends indica que va a heredar lo que contiene layout, es decir, toda su estructura. Ahora sólo vas a "llenar" el código que quieras. Para eso usas el nombre de los bloques que previamente definiste en layout. Ejemplo:

block content
  h1= title
  - var pets = ['cat', 'dog']
  each petName in pets
    include pet.pug

Estás diciendo que block content va a ser llenado con h1= title y el resto de lo que viene en ese extracto de código.

Nota: En este ejemplo que incluye el archivo pet.pug dentro de un ciclo, esa es otra funcionalidad equivalente al include de php. Simplemente va a agregar un bloque. Pero esta operación es diferente a lo que necesitas. Tú no quieres crear toda la estructura HTML desde cero, quieres hacerlo una vez y reutilizarlo, igual que tu nabvar.

Entonces, en tus rutas con Node, lo que vas a incluir son los archivos particulares, concretos, los que están reutilizando al layout.pug.

1
  • Y bueno, para que puedas usar esto necesita la versión actual de pug. Sólo usa npm i pug -S y te instalará la versión reciente.
    – J.Correa
    Commented el 23 ago. 2017 a las 16:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.