1

I recently took a course on back-end web developing.

As the title says, I don't get how can I use a header partial for the whole website but have different titles for each page. (because is included in the tag)

Is there any trick?

Andrei Daniel
  • 171
  • 1
  • 12
  • pass data as a parameter to the partial. See [here](https://stackoverflow.com/questions/29196562/how-to-include-a-template-with-parameters-in-ejs) for example – Geert-Jan Sep 09 '18 at 13:21
  • @Geert-Jan so should I have a specific title in each route and pass it to the ejs file? Is that common practice? – Andrei Daniel Sep 09 '18 at 13:23
  • yep that's common practise. A partial defines the structure of a part of the page (in your case a header). Each specific page that includes the partial however may want to pass in other data, which is done through parameters. – Geert-Jan Sep 09 '18 at 15:43
  • Thanks a lot. You can post it as an answer so I can accept it. – Andrei Daniel Sep 09 '18 at 16:12
  • Hey, can any one of you post a working code to change the title of every page through ejs? I'm unable to do it and I'm new to this. I have a header partial in every page with a single title. I've been trying to implement title dynamically of every page. – Zak Dec 13 '19 at 09:22

3 Answers3

6

1st) In your Express route:

app.get("/", function(req, res){
  res.locals.title = "Abel's Home Page";                    // THIS LINE IS KEY
  res.render("home.ejs");
});

2nd) In your views/home.ejs file:

<% include partials/header.ejs %>

3rd) In your views/partials/header.ejs file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= title %></title>                               <!-- THIS LINE IS KEY -->
  <link rel="stylesheet" href="../style.css">
  <link rel="shortcut icon" href="../logo_sm.png" type="image/x-icon">
</head>
<body>
Abel Wenning
  • 483
  • 8
  • 6
  • 1
    Hey. This is what I've been looking for. However, I had one question. We are setting the title only when the client clicks on the page(that is access the route). So my question is will it affect SEO as we are not fixing the title as it is beforehand but only setting the titles if the client tries to access it? – Zak Dec 13 '19 at 09:35
  • The search engine's crawler still has to load the page (i.e., your Express route still has to produce a page to be sent to the crawler/client); so a title will be sent with it, assuming your logic in your Express route is correct/valid (1st step above). – Abel Wenning Jan 28 '20 at 21:25
  • Thanks so much mate. Big help. – Zak Feb 11 '20 at 19:09
0

Each page that includes the partial is free to pass data to said partial through parameters. See here for an example.

Geert-Jan
  • 18,623
  • 16
  • 75
  • 137
0

route

app.get('/', (req, res) => {
    res.render('pages/index', {
        title: "Home Page" //this is title
    })
})

partials head

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
     <%= typeof title !='undefined' ? title : 'Page default' %> <!-- if you dont set title in route then title is 'Page default' -->
  </title>
</head>
<body>
Black Undo
  • 1