How to route node express to a page with several sections in the html?

Question

How to route node express to a page with several sections in the html?

Navigation

#1 by (0 votes)

0

Example:

When routing like this,

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

The drawback is that it changes to another page, it does not reload on the same page, I'm using node, express, jade.

javascript nodejs express

asked by Developer 22.08.2017 в 19:12

source

1 answer

How can I save a table and have the result displayed in another form? replaceAll txt JAVA

score 0 · Answer 1

To reuse parts of Home within other blocks you have to create templates.

In Pug there is something called inheritance which means: a template that can be reused by other templates, being able to replace blocks according to their nomenclature.

On the doc comes how to do it. Here is an example of that source:

What you want to be reused in all the blocks you will save it in a file that by convention you name it layout.pug . Let's say it's something like:

layout.pug

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

It's a basic HTML structure. Be careful with the correct indentations, otherwise it will give you an error.

Where is the content of the blocks placed?

In this example, the lines that start with "block" mean that they will be replaced by the code you want when using this layout.

How do I use and replace it?

Once you save your layout.pug as a file, you create another pug file that is where you will reuse the layout. Following the previous example:

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 indicates that it will inherit what it contains layout, that is, its entire structure. Now you're just going to "fill in" the code you want. For that you use the name of the blocks that you previously defined in layout. Example:

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

You're saying that block content is going to be filled with h1 = title and the rest of what comes in that code extract.

Note: In this example that includes the pet.pug file within a cycle, that is another functionality equivalent to the php include. It will simply add a block. But this operation is different than what you need. You do not want to create the entire HTML structure from scratch, you want to do it once and reuse it, just like your nabvar.

So, in your routes with Node, what you are going to include are the particular, concrete files, which are being reused in the layout.pug.