Servir du HTML dynamique avec Pug et Express

Avant que les applications à page unique ne deviennent une réalité, les langages de création de modèles comme Pug étaient très populaires car ils permettaient aux développeurs d'afficher une page côté serveur avant de l'envoyer au client. Express est le framework d'application backend le plus populaire pour Node.js. Il se targue d’être léger, sans opinion et minimal à utiliser. Dans ce guide, vous apprendrez à diffuser du HTML dynamique avec Pug à partir d'une application serveur Express.js.

Comment fonctionne Carlin ?

Le HTML peut parfois être fastidieux à écrire. Le langage ne prend pas en charge des fonctionnalités telles que les « composants », ce qui peut entraîner une duplication de code à moins que vous ne comptiez sur des outils externes tels que JavaScript.

Pug est un moteur de création de modèles qui facilite l'écriture de HTML. Avec Pug, vous pouvez diviser votre code et réutiliser des « composants » à autant d'endroits que vous le souhaitez. Concernant la syntaxe, Pug diffère du HTML traditionnel car il utilise l'indentation au lieu des balises fermantes. En HTML, vous définissez un élément comme ceci :

<div class='hello'>This is something worth noting</div>

Dans Pug, cependant, vous définissez un élément comme ceci :

div(class='hello') This is something worth noting

Le nom du tag est défini à gauche, avec ses attributs entre parenthèses. La balise est séparée de son contenu par l'espace à côté d'elle. Le transpileur Pug transpilera votre code vers le code HTML approprié reconnu par le navigateur. Les éléments enfants sont définis par indentation. Cela signifie que si vous vouliez avoir un div dans une balise principale, vous feriez quelque chose comme ceci :

main
div Hello from the children of planet Earth!

Intégration de Pug avec Express

Pour ajouter Pug à votre projet Express.js, installez simplement Pug avec n'importe quel gestionnaire de packages de votre choix. Pour cet exemple, je travaille avec NPM :

npm i pug

Cela ajoutera Pug à votre liste de dépendances dans votre fichier package.json. Maintenant, vous devrez définir votre moteur d'affichage sur pug, donc dans le fichier d'entrée de votre projet (généralement main.js, app.js ou index.js ), importez express correctement et configurez les paramètres de l'application avec la méthode set.

import express from 'express';
const app = express();

app.set('view engine', 'pug');

En définissant le moteur d'affichage sur « pug », vous dites à Express d'utiliser Pug comme moteur de création de modèles. Ainsi, lorsque vous appelez la méthode de rendu sur l'objet de réponse, vous devez transmettre une « vue » valide pour qu'Express puisse le restituer. Les vues dans Express doivent être placées dans un répertoire de vues spécial, dans le répertoire racine du projet. Si vous n'avez pas créé de répertoire de vues, vous pouvez le faire avec ce qui suit :

mkdir views
# Make sure you are in your project root 

Maintenant que tout est configuré, passons à l'écriture de notre première vue dans Pug.

Utilisation de base de Pug dans un projet express

Créez un fichier vues/index.pug et ajoutez-y ce qui suit :

html
  head
    title Welcome to my website
  body
    div Hello World

Maintenant que votre fichier index.pug est prêt, vous devrez le servir au client sur une route. Accédez au fichier d'entrée de votre projet et définissez un gestionnaire de requête get qui restituera et renverra le fichier views/index.pug au client.

app.get("/", (req, res) => {
  res.render("index.pug");
});

Lorsque vous ouvrez localhost:, vous devriez voir le message "Hello World" imprimé à l'écran. Dans la fonction de rappel de la méthode get, vous verrez l'utilisation de res.render dans sa forme la plus simple. La syntaxe de la méthode de rendu est indiquée ci-dessous :

res.render(view [, locals] [, callback]);

Tout d'abord, nous avons la vue, qui est simplement le chemin du fichier .pug que vous souhaitez restituer. N'oubliez pas qu'Express localise les fichiers .pug par rapport au répertoire vues. Ainsi, si vous avez un fichier Pug situé dans views/layouts/main.pug, vous devez y faire référence sous le nom layouts/main lors de la définition de la vue sur votre itinéraire.

app.get("/", (req, res) => {
  res.render("layouts/main");
});

Ensuite, les locaux sont un objet avec des propriétés qui définissent les variables locales qui doivent être transmises dans la vue spécifiée pour l'interpolation. Lorsque le rappel est fourni, le code HTML résultant de l'opération de rendu n'est pas envoyé au client. Au lieu de cela, vous pouvez y accéder via un paramètre dans la fonction de rappel, comme ceci :

app.get("/", (req, res) => {
  res.render("index.pug", {}, (err, html) => {
    console.log(html);
  });
});

Lorsque le client fait une requête get à '/', aucune réponse n'est envoyée. Au lieu de cela, le HTML est enregistré sur la console du serveur. Vous pouvez envoyer manuellement le HTML au client avec la méthode d'envoi :

res.send(html)

Création de pages HTML dynamiques

Il est maintenant temps de passer au niveau supérieur. Vous apprendrez à interpoler des données avec Pug pour créer du contenu dynamique à la volée. Dans Pug, l'interpolation de chaîne se fait avec la syntaxe #{}. Au moment de la compilation, #{} est résolu à sa valeur réelle. Voici un exemple.

// greet.pug
html
  head
    title Welcome to my website
  body
    div Hello #{name}

Dans le bloc de code ci-dessus, name sera remplacé par la valeur réelle de l'objet local transmis à la méthode de rendu. Si le nom n'est pas défini, aucune erreur n'est générée. Le voici en action.

app.get('/greet', (req, res) => {
    const {name} = req.query;
    res.render('greet.pug', {name})
})

Lorsque le client clique sur /greet?name=David, le code HTML suivant sera renvoyé

<html>
  <head>
    <title>Welcome to my website</title>
  </head>
  <body>
    <div>Hello David</div>
  </body>
</html>

The string interpolation syntax (#{}), is escaped by Pug. This is useful in situations where the content comes from users. If you want Pug is render the string as is without escaping, you'll need to use the !{} syntax.

- var example = <strong>very risky</strong>
div !{example}

Tags and Tag Intepolation in Pug

Pug provides a handy syntax for tag interpolation #[], which you can use like this:

1. Basic Tag Interpolation: You can interpolate a tag directly within text.

p This is a #[strong very important] message.

This will render as:

<p>This is a <strong>very important</strong> message.</p>

1. Interpolating with Variables: You can also interpolate tags with variables.

- var username = 'John' 
p Hello, #[strong #{username}]!

You don't have to worry about self-closing tags, because Pug knows what tags are self closing. But if you really need to self-close a tag, you can append the / character to the end of the tag like this:

div/

To save space, You can use the : shorthand instead of indentation to specify nested tags.

label: input(type='text' name='username')

The code block above is just as valid as:

label
    input(type='text' name='username')

Using JavaScript in Pug

In the last code block, notice the use of the var keyword from JavaScript to create a variable. Pug allows you to insert valid JavaScript code on any line that starts with an -. For example, you can create an array and iterate over it to render a list of items. Pug has its native syntax for this, but in this example, you can use JavaScript.

html
  head
    title Welcome to my website
  body
    div List of items 
    - var items = ['milk', 'peas', 'bread']
    - items.forEach((item)=>{
      li #{item}
    - })

Study the previous example. Notice how Pug and JavaScript are combined. The forEach method is not part of the Pug API, it belongs to JavaScript. Likewise, the string interpolation symbol is not part of the #{} JavaScript API. The lines with valid JavaScript code are marked with the - symbol. On the second to last line, there is no - symbol, because that is Pug code.

Iteration and conditionals with Pug

For common things like conditionals and iteration, Pug provides its syntax that you can use instead of JavaScript. The most popular keyword for iteration in Pug is each. each must come in the form each VARIABLE_NAME of JS_EXPRESSION. Here's how you can use it:

each item in ['milk', 'peas', 'bread']
   li #{item}

When dealing with objects, the expected format for each is each VALUE, KEY OF JS_EXPRESSION. For example:

each val, key in {1:'milk', 2:'peas', 3:'bread'}
  #{key} : #{val}

You can use the if syntax to handle conditionals. Here's an example:

╴ var loggedIn = false

if !loggedIn
    p Sorry you cannot access this item because you're not logged in

Conversely, Pug has an unless keyword that you can use like this:

unless loggedIn
    p Sorry you cannot access this item because you're not logged in

Advanced Techniques with Pug

Pug offers many features beyond just string interpolation and conditionals. If you are working on a large website, you might need to use advanced features that Pug provides, such as layouts and partials.

Using Layout files for consistent page structure

Layout files allow you to define a common structure for your pages and extend it in other templates, ensuring consistency across your website. Here's an example of how you can use layout files.

//- views/layout.pug
html
  head
    title My Website Title
  body
    header
      h1 My Website
    block content
    footer
      p Footer content

Notice the block keyword in the code block above. A block in a layout file acts as a placeholder. Each block must have a name. In this example, block is defined as content. Whenever you want to use your layout file, you use the extends syntax to tell Pug that a template should include a layout.

//- views/index.pug
extends layout

block content
  p Welcome to the homepage!

In this example, index.pug extends the layout.pug template, which provides the page's base structure, including the header and footer. The block content line defines a block named content where the indented paragraph "Welcome to the homepage!" is inserted. When index.pug is rendered, the final HTML will look this this:

<html>
  <head>
    <title>My Website Title</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <p>Welcome to the homepage!</p>
    <footer>
      <p>Footer content</p>
    </footer>
  </body>
</html>

Using Partials for Reusable Components

Partials are reusable pieces of templates that can be included in other templates, which helps to keep your code DRY (Don't Repeat Yourself). You can create partials in Pug with the include syntax.

//- views/partials/sidebar.pug
aside
  p This is the sidebar content.

In sidebar.pug defines a partial template for a sidebar with an aside element containing a paragraph of text.

//- views/layout.pug
html
  head
    title My Website Title
  body
    include partials/sidebar
    block content
    footer
      p Footer content

In layout.pug, a layout template is created with a basic HTML structure. It includes the header and sidebar partials using the include keyword, places a block content placeholder for dynamic content, and adds a footer with a paragraph of text. The final render should look something like this:

<html>
  <head>
    <title>My Website Title</title>
  </head>
  <body>
    <header></header>
    <aside>
      <p>This is the sidebar content.</p>
    </aside>
    <p>Welcome to the homepage!</p>
    <footer>
      <p>Footer content</p>
    </footer>
  </body>
</html>

Tips for optimizing Pug templates

1. Use partials and layouts wherever you can: Using partials, layouts, and helpers in Pug enhances template organization and efficiency. Partials are reusable snippets that prevent code repetition, while layouts provide a consistent structure for pages by defining common elements and extending them in individual templates.

2. Minimize the use of inline JavaScript: When writing your templates, try to use inline JavaScript sparingly. Adding huge blocks of JavaScript to your code can create issues with debugging and maintainability.

One way to reduce inline JavaScript is through the use of helpers. Helpers, defined in the server-side code, allow dynamic content within templates. You can pass a helper function to a template using the locals method on the express app.

const express = require('express');
const app = express();

app.set('view engine', 'pug');

app.locals.formatDate = function(date) {
  return new Date(date).toLocaleDateString();
};

app.get('/', (req, res) => {
  res.render('index', { title: 'Home', currentDate: new Date() });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

With the formatDate helper function set, you can use it in your Pug template like this:

p Welcome to the homepage!
p Today's date is #{formatDate(currentDate)}

Conclusion

In this guide, you learned how to serve dynamic HTML with Pug and Express. We covered basic Pug syntax, integrating Pug with Express, building dynamic pages, and advanced techniques like using layout files and partials.

Templating engines are very powerful especially when building a server-side web application. They are great for Search Engine optimization too because unlike single-page applications, the content is rendered on the server on each request.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!