2013-11-09 8 views
6

Wie zum Festlegen der HTML-Titel bei der Verwendung von Eisen-Router? Hier ist, was ich tun möchte:Legen Sie HTML-Titel bei der Verwendung von Eisen-Router

<template name="layout"> 
    <head><title>{{KAZOOM}}</title></head> 
    <body> 
     {{> menu}} 
     {{yield}} 
    </body> 
</template> 

<template name="example"> 
    {{KAZOOM 'example page'}} 
    That's just an example page 
</template> 

<template name="foo"> 
    {{KAZOOM 'foo page'}} 
    Another example page with different HTML title 
</template> 

Sie sehen, wie die Kazoom reist in der Zeit zurück, die HTML-Titel zu setzen? Der Grund, warum ich es so machen möchte ist, dass ich den HTML-Titel als Teil des Inhalts betrachte. Es wäre schön, wenn ich den HTML-Titel einer Seite anpassen könnte, indem ich nur die Vorlage ändere, die ihn erzeugt hat. Leider sehe ich keinen sauberen Weg, dies zu erreichen. Der nächste, den ich mir vorstellen kann, wäre benannter Ertrag, dann würde der Titel durch die Route und nicht durch die Vorlage bestimmt werden.

ist die andere Möglichkeit, die Layout-Vorlage nur zu verzichten und ist stets bemüht, einen Header:

<template name="head"> 
    <head><title>{{this}}</title></head> 
    {{> menu}} 
</template> 

<template name="example"> 
    {{> head 'example page'}} 
    That's just an example page 
</template> 

<template name="foo"> 
    {{> head 'foo page'}} 
    Another example page with different HTML title 
</template> 

Das ist nicht sehr schön. Haben Sie eine angemessene Lösung dafür?

+1

Antwort kann hier gefunden werden: http://stackoverflow.com/questions/14036248/meteor-setting-the-document-title –

Antwort

16

Set document.title onAfterRun in Iron Router:

var pageTitle = 'My super web'; 
Router.map(function() { 
    this.route('user', { 
     onAfterRun: function() { 
     document.title = 'User ' + this.params.name + ' - ' + pageTitle; 
     } 
    }); 
}); 

EDIT:

Wenn Sie Titel in Vorlage festlegen möchten, erstellen Sie benutzerdefinierte Lenker Helfer (Client-Code):

Handlebars.registerHelper("KAZOOM", function(title) { 
    if(title) { 
     document.title = title; 
    } else { 
     document.title = "Your default title"; 
    } 
}); 

Und verwenden Sie es in Ihren Vorlagen, wie Sie es

verwendet haben
{{KAZOOM 'example page'}} 

oder

{{KAZOOM}} 

für Standardtitel.

EDIT 26 Jully 2015: für neue Eisen Router würde es wie folgt aussehen:

Router.route('/user', { 
    onAfterAction: function() { 
    document.title = 'page title'; 
    } 
}); 
+0

Danke, das funktioniert für statische Titel. Ich würde immer noch lieber den Titel in der Vorlage festlegen, wie alle anderen Text – sba

+1

Was meinst du statische Titel? Ich habe die Antwort dann aktualisiert. –

+3

Warum nicht das Paket verwenden: [Eisen-Router-Titel] (https://atmosphherejs.com/ostrio/iron-router-title)? –

10

Ich iron-router 0.7.1 verwenden.

Und haben diese in libs/router.js

Router.onAfterAction(function() { 
     document.title = 'My Site - '+this.route.name; 
     } 
); 

, die alle meine Routen Griffe, also muss ich es nicht in jeder Route setzen.

+0

this.route.getName() jetzt, es erscheint – IGx89

3

Ich bevorzuge es, das title-Attribut direkt mit der Routendefinition gespeichert zu haben.

Wie https://github.com/iron-meteor/iron-router/issues/292#issuecomment-38508234 zu diesem Thema von @nullpo vorgeschlagen

Router.route('/admin/users', { 
    name: 'admin_users', 
    template: 'admin_users', 
    title: 'User Manager' 
    data: function() { 
     return Meteor.users.find(); 
    }, 
    waitOn: function() { 
     return Meteor.subscribe('users_admin'); 
    } 
}); 

Router.after(function(){ 
    if (this.route.options.title) 
     document.title = this.route.options.title + ' - my cool site'; 
}); 

Hoffnung, das hilft.

+0

Beste Antwort für mich!Es ist schade, dass der Titelparameter nicht neu bewertet wird, wenn Sie eine reaktive Variable darin verwenden. Was wäre die beste Lösung, wenn Sie diese Art von Funktionalität möchten? – Wonko

Verwandte Themen