web-dev-qa-db-fra.com

Guidons avec Express: différentes têtes html pour différentes pages

J'utilise des guidons dans une application Express Node.js. Mon fichier layout.html comprend une section <head>. Comment puis-je rendre la section <head> différente pour différentes pages? (Pour pouvoir par exemple référencer un fichier JavaScript dans une seule page et faire varier le <title> pour chaque page.)

layout.html ressemble à ceci:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src='/public/ajsfile.js'></script>
    <link type='text/css' href="/public/style.css" rel="stylesheet">
  </head>
  <body>
    {{{body}}}
  </body>
</html>

(J'imagine faire varier le contenu de <head> avec quelque chose d'analogue de {{{body}}} ci-dessus, mais avec {{{head}}}.)

expresshandlebars.js
26
user3303012

C’est une excellente question et, à mon sens, une faiblesse flagrante du modèle de vue d’Express. Heureusement, il existe une solution: utilisez le guidon block helpers . Voici l'aide que j'utilise à cet effet:

helpers: {
    section: function(name, options){
        if(!this._sections) this._sections = {};
        this._sections[name] = options.fn(this);
        return null;
    }
}

Ensuite, dans votre mise en page, vous pouvez effectuer les opérations suivantes:

<head>
    {{{_sections.head}}}
</head>
<body>
    {{{body}}}
</body>

Et à votre avis:

{{#section 'head'}}
    <!-- stuff that goes in head...example: -->
    <meta name="robots" content="noindex">
{{/section}}

<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
48
Ethan Brown

Vous pouvez faire ce qui suit:

layout.hbs

<head>
    <title>{{title}}</title>
    {{#each css}}
        <link rel="stylesheet" href="/css/{{this}}" />
    {{/each}}
</head>

app.js

router.get('/', function (req, res, next) {
    res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});

Résultat:

<head>
    <title>MyApp</title>
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/custom.css" />
</head>
7
Fabricio

Je sais que c'est une question plus ancienne, mais je voulais proposer une solution de remplacement claire à ce que vous demandez (je ne suis pas tout à fait sûr de savoir pourquoi personne d'autre n'en a parlé au fil des ans). Vous aviez réellement la réponse que vous recherchiez lorsque vous proposez de placer des éléments dans {{{head}}} comme vous le faites pour {{{body}}}, mais je suppose que vous aviez besoin d'aide pour comprendre comment le faire fonctionner. 

Il semble possible que la plupart des réponses figurant sur cette page concernent les "sections" de nœud, car vous parlez des différentes sections de HTML que vous avez incluses dans votre fichier de présentation que vous souhaitez modifier. Les "Sections" dont tout le monde parle dans ce fil semblent être une technique, bien que je puisse me tromper, provenant du moteur de gabarit de rasoir de Microsoft. Plus d'infos: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm

Quoi qu'il en soit, les sections fonctionnent pour votre question, de même que "Partials" en théorie (bien que cela puisse ne pas être la meilleure option pour cela). Plus d'infos sur les Partials: https://www.npmjs.com/package/express-partial

Cependant, vous avez simplement demandé un moyen de modifier le contenu des balises HTML de la présentation de votre modèle dans le guidon, et si nous parlons de balises en-tête HTML, il vous suffit de remplacer le contenu que vous avez dans la disposition de vos balises. un de ceux-ci (j'utilise 3 crochets car il semble que HTML serait inclus et vous ne voulez pas qu'il soit échappé):

<head> 
{{{headContent}}}
</head>

Ensuite, il vous suffit de transmettre dynamiquement les données de votre choix via la route créée dans votre fichier app.js pour "obtenir" la page de la manière suivante (je prends principalement le code @Fabricio déjà fourni, de sorte que je n'ai pas eu à la réécrire):

router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});

Maintenant, lorsque vous chargez votre page, "I DID IT!" sera où vous vous attendez à ce qu'il apparaisse.

0
ViaTech

Vous pourriez peut-être utiliser cette implémentation de l’assistant de section: https://github.com/cyberxander90/express-handlebars-sections

Il vous suffit de l'installer et de l'activer:

yarn add express-handlebars-sections # or npm

const expressHandlebarsSections = require('express-handlebars-sections');

app.engine('handlebars', expressHandlebars({
    section: expressHandlebarsSections()
}));

J'espère que ça aide.

Younes

0
Younes for Wishtack