Mittwoch, Januar 29, 2020

LENKER mit Express: verschiedene html-Kopf für verschiedene Seiten

Bin ich mit dem LENKER in einer Express Node.js app. Meine layout.html die Datei enthält eine <head> Abschnitt. Wie kann ich machen das <head> Abschnitt für verschiedene Seiten? (So, dass ich, zum Beispiel, Verweis auf eine JavaScript-Datei in nur eine Seite, und variieren Sie die <title> für jede Seite.)

layout.html sieht wie folgt aus:

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

(Ich Stell mir die Variation der <head> Inhalt mit etwas Analog zu {{{body}}} in die oben genannten, aber mit {{{head}}}.)

InformationsquelleAutor user3303012 | 2014-02-12

4 Kommentare

  1. 52

    Dies ist eine große Frage und in meinen Augen eine eklatante Schwäche in der Express-Ansicht-Modell. Glücklicherweise gibt es eine Lösung: verwenden Sie einen LENKER block Helfer. Hier ist der Helfer, die ich für diesen Zweck verwenden:

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

    Dann im layout, können Sie Folgendes tun:

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

    Und in Ihrem Blick:

    {{#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>
    • Danke, gute Lösung! (Aber vielleicht meintest du zu Typ {{#section ‚head‘}} am Anfang der Ansicht — missing ‚#‘.)
    • Recht hast du, guter Fang! Antwort aktualisiert.
    • ist es möglich, Anhängen, wenn Sie den Abschnitt bereits Inhalt? Ich bin Implementierung von partials und zu etwas aufnehmen wollen, die Inhalte einschließen, in den Kopf.
    • Ja, Don: ändern Sie einfach die Helfer zum Anhängen an _sections[name] anstelle von zuweisen zu
    • Hier ist was ich landete mit, wenn(!diese._sections) diese._sections = {}; if(!diese._sections[name]) this._sections[name] = []; dies._sections[name].push („Optionen“.fn(this));
    • Was ist this uns hier beziehen, bitte ?
    • Der LENKER Kontext-Objekt
    • Ich habe versucht, aber ich konnte nicht scheinen, um es zu arbeiten, hat die section Funktion nur erhalten, definiert über die hbs.registerHelper Funktion?
    • Diese Lösung ist speziell für die Arbeit mit express-handlebars, nicht hbs; ich bin mir sicher, dass es angepasst werden können, um die Arbeit mit hbs, aber es sollte funktionieren out of the box mit express-handlebars.
    • Ich versuchte Ihren code, aber egal was ich mache, mein Kopf Abschnitt endet in der <body> Abschnitt. Gibt es etwas, was ich tun muss?
    • Hi, @DonP, NÖ das ist alles dort ist zu es. Ohne zu sehen, Ihren code, ich kann nicht wissen, was nicht für Sie arbeiten. Ich erstellte eine minimale demo, vielleicht hilft Sie: github.com/EthanRBrown/express-handlebars-section-demo

  2. 7

    Können Sie die Folgen:

    layout.hbs

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

    app.js

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

    Ergebnis:

    <head>
        <title>MyApp</title>
        <link  href="/css/style.css" />
        <link  href="/css/custom.css" />
    </head>
    
  3. 0

    Vielleicht könnten Sie diese Umsetzung des § Helfer: https://github.com/cyberxander90/express-handlebars-sections

    Müssen Sie nur installieren Sie es und aktivieren Sie es:

    yarn add express-handlebars-sections # or npm

    const expressHandlebarsSections = require('express-handlebars-sections');
    
    app.engine('handlebars', expressHandlebars({
        section: expressHandlebarsSections()
    }));
    

    Hoffe, es hilft.

    Younes

  4. 0

    Ich weiß, dies ist eine ältere Frage, aber ich wollte darauf hinweisen, eine klare alternative Lösung, um was Sie bitten (ich bin nicht ganz sicher, warum niemand sonst Sprach darüber, es im Laufe der Jahre). Sie hatte eigentlich die Antwort, die Sie gesucht haben, wenn Sie bringen Sie platzieren Dinge in {{{Kopf}}} wie Sie tun, für {{{body}}}, aber ich denke, Sie brauchte Hilfe, das Verständnis, wie es funktioniert.

    Scheint es möglich, dass die meisten Antworten auf dieser Seite orientieren sich an den Knoten „Sections“, weil Sie sprechen über die verschiedenen Abschnitte der HTML-Sie haben in Ihrer layout-Datei, die Sie ändern möchten. Die „Abschnitte“ jeder spricht darüber, in diesem thread scheint ein Verfahren zu sein, obwohl ich kann mich irren, die aus Microsoft ‚ s Razor Template-Engine. Mehr info: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm

    Sowieso Abschnitte der Arbeit für Ihre Frage, und so konnte die „Partials“ theoretisch (obwohl es nicht wirklich die beste option für diese). Mehr info auf der Teiltöne:
    https://www.npmjs.com/package/express-partial

    Jedoch, Sie einfach gefragt für einen Weg zu ändern, den HTML-tag Inhalt deiner template-layout in den LENKER, und vorausgesetzt, wir reden über HTML-head-tags, alles, was Sie tun müssen ist, ersetzen Sie die Inhalte, die Sie in Ihrem template-layout in der HTML-head-tags mit einem dieser (ich verwende 3 Klammern, weil es scheint, die HTML enthalten sein würden und Sie wollen es nicht entgangen):

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

    Dann ist man eben dynamisch passieren, was auch immer Daten, die Sie wollen, durch die route, die Sie erstellen in Ihrem app.js Datei „Holen“ Sie die Seite so (ich bin meist unter dem code @Fabricio bereits gestellt, so dass ich nicht haben, um diese umschreiben):

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

    Wenn Sie jetzt laden Sie Ihre Seite, „ich WUSSTE ES!“ sein, wo Sie erwarten, es zu zeigen.

Kostenlose Online-Tests