41

有没有办法改变<title>Meteor 应用程序中的元素？似乎模板仅在<body>.

4

8 回答 8

45

几乎在您的客户端 JavaScript 代码中的任何地方：

document.title = "My new title";
于 2012-12-26T09:46:36.127 回答
38

您可以扩展 David Wihl 的解决方案：

Deps.autorun(function(){
  document.title = Session.get("DocumentTitle");
});

然后您可以随时调用：

Session.set("DocumentTitle","New Document Title");
于 2014-09-04T05:03:03.773 回答
12

如果你使用iron:router，你可以添加包manuelschoebel:ms-seo来处理标题和元标记。这对于静态和动态 SEO 数据很有用：

Router.map(function() {
  return this.route('blogPost', {
    path: '/blog/:slug',

    onAfterAction: function() {
      var post = this.data().post;
      SEO.set({
        title: post.title,
        meta: {
          'description': post.description
        },
        og: {
          'title': post.title,
          'description': post.description
        }
      });
    }
  });
});
于 2015-02-09T18:32:13.710 回答
10

您可以创建一个帮助器来设置标题（CoffeeScript）：

UI.registerHelper "setTitle", ->
  title = ""
  for i in [0..arguments.length-2]
    title += arguments[i]
  document.title = title
  undefined

或在 Js 中相同：

UI.registerHelper("setTitle", function() {
  var title = "";
  for (var i = 0; i < arguments.length - 1; ++i) {
    title += arguments[i];
  }
  document.title = title;
});

然后你可以以复杂的方式使用它，它会是响应式的：

{{#if book}}
  {{setTitle book.title}}
{{else}}
  {{setTitle "My books"}}
{{/if}}
于 2013-09-25T16:52:41.710 回答
7

我发现直接在路由器中处理这种事情更方便onBeforeAction：

Router.map(function() {
  return this.route('StudioRoot', {
    path: '/',
    onBeforeAction: function() {
      return document.title = "My Awesome Meteor Application";
    }
  });
});
于 2014-10-07T16:21:33.510 回答
3

您还可以包含<head> </head>不在模板中的标签中。试试这个：

sample.html 的内容：

<head>
    <title>my title</title>
</head>

<body>
    ...
</body>

<template name="mytemplate">
    ...
</template>
于 2014-11-05T09:40:41.580 回答
1

我最终做了什么：

在 Meteor.isClient 中：

Meteor.startup(function() {
    Deps.autorun(function() {
        document.title = Session.get('documentTitle');
    });
});

既然 var 是被动设置的，请进入路由器文件（如果尚未完成：meteor add iron:router。我的路由器文件既是客户端又是服务器）

Router.route('/', {
    name: 'nameOfYourTemplate',
    onBeforeAction: function () {
        Session.set('documentTitle', 'whateverTitleIWant');
        this.next();    //Otherwise I would get no template displayed
    }
});

如果您已经在 head 标签中设置了标题，则无关紧要。它将根据您的路线替换为这个。

于 2015-08-06T12:29:20.853 回答
-1

我不得不寻找一个适用于 ui-router 的答案。我知道这可能不是您想要的答案。由于这个问题是大约 2 年前发布的，我想如果其他人来这里寻找 ui-router 的解决方案，这个答案可以帮助他们：

myApp.run.js

(function() {
  'use strict';

  angular
    .module('myApp')
    .run(run);

  run.$inject = ['$rootScope', '$state'];

  function run($rootScope, $state) {
    $rootScope.$on("$stateChangeSuccess", function(previousRoute, currentRoute){
      document.title = 'myApp - ' + currentRoute.data.pageTitle;
    });
  };

})();

路由.js

(function() {
    'use strict';

    angular
      .module('myApp')
      .config(config);

    config.$inject = 
      ['$urlRouterProvider', '$stateProvider', '$locationProvider'];

    function config($urlRouterProvider, $stateProvider) {

        // ...
        $stateProvider
          .state('home', {
            url: '/',
            templateUrl: 'client/home/views/home.ng.html',
            controller: 'HomeController',
            data: {
              pageTitle: 'My Dynamic title'
            }
          })
    }
})();
于 2015-12-19T16:01:14.503 回答