Meteor-设置文档标题_Meteor - Fatal编程技术网

Meteor-设置文档标题

meteor

Meteor-设置文档标题,meteor,Meteor,有没有办法更改Meteor应用程序中的元素？似乎只在客户端JavaScript代码中的中处理模板： document.title = "My new title"; 您可以创建用于设置标题的帮助器（CoffeeScript）：或者Js中的相同内容： UI.registerHelper("setTitle", function() { var title = ""; for (var i = 0; i < arguments.length - 1; ++i) { titl

有没有办法更改Meteor应用程序中的

元素？似乎只在客户端JavaScript代码中的

中处理模板：

document.title = "My new title";

您可以创建用于设置标题的帮助器（CoffeeScript）：

或者Js中的相同内容：

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

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

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

然后您可以随时拨打：

Session.set("DocumentTitle","New Document Title");

我发现直接在路由器中使用

on-beforeaction

处理这类事情更方便：

Router.map(function() {
  return this.route('StudioRoot', {
    path: '/',
    onBeforeAction: function() {
      return document.title = "My Awesome Meteor Application";
    }
  });
});

您还可以在

中包含不在模板中的标记。试试这个：

sample.html的内容：

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

<body>
    ...
</body>

<template name="mytemplate">
    ...
</template>


我的头衔
...
...

如果使用，可以添加包来处理标题和元标记。这对于静态和动态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
        }
      });
    }
  });
});

我最终做了什么：

在Meteor.isClient中：

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

现在，var是被动设置的，进入路由器文件（如果还没有完成：meteor add iron:router。我的路由器文件是客户端和服务器）

如果您已经在head标记中设置了标题，这并不重要。根据您的路线，它将被这个替换。

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

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;
    });
  };

})();

(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'
            }
          })
    }
})();

routes.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;
    });
  };

})();

(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'
            }
          })
    }
})();

与此处建议的相同，对某些人来说可能无关紧要，但会话变量在页面刷新后将无法生存。@Durham，在刷新时，路由将再次运行。因为您在Meteor.js相关的问题线程中发布了Angular.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'
            }
          })
    }
})();