How to use dynamic page titles in sails.js >v1.0?

问题

For the last few days I was looking for a viable solution in order to optimize html page titles <title>SOME_TITLE</title> within sails.js layout files, like layout.ejs, that by default use a static page title.
Obviously, it would be way better to have dynamic page titles, e.g. Dashboard, Shopping Cart, etc...
Other people were looking for this answer before and got answers for prior sails versions in Solution 1, Solution 2 and Solution 3. Unfortunately, none of them seem to be appropriate for the latest version of sails.js (as of this post).

Solution 1 was leading in the right direction and suggested what I was looking for. But you had to define a title for every controller and pass it into the view. Otherwise you will get

title is not defined at eval

So how to define a local variable that is accessible in each controller/view by default?

回答1:

So one working complete solution for the current sails.js version is the following:

In your layout.ejs file define a dynamic page title like this

<head>
  <title>
    <%= title %>
  </title>
  ...
</head>
...

Create a new custom hook, e.g. api/hooks/dynamic-page-title/index.js

module.exports = function dynamicPageTitleHook(sails) {

  return {
    routes: {
      /**
       * Runs before every matching route.
       *
       * @param {Ref} req
       * @param {Ref} res
       * @param {Function} next
       */
      before: {
        '/*': {
          skipAssets: true,
          fn: async function(req, res, next){
            // add page title variable to each response
            if (req.method === 'GET') {
              if (res.locals.title === undefined) {
                res.locals.title = 'plusX';
              }
            }
            return next();
          }
        }
      }
    }
  };

};

Now overwrite the page title in every controller that should use a custom page title, e.g. view-login.ejs

module.exports = {


  friendlyName: 'View login',


  description: 'Display "Login" page.',


  exits: {

    success: {
      viewTemplatePath: 'pages/entrance/login',
    },

    redirect: {
      description: 'The requesting user is already logged in.',
      responseType: 'redirect'
    }

  },


  fn: async function (inputs, exits) {

    if (this.req.me) {
      throw {redirect: '/'};
    }

    return exits.success({title: 'Login'});

  }


};

回答2:

module.exports = {


  friendlyName: 'View homepage or redirect',


  description: 'Display or redirect to the appropriate homepage, depending on login status.',


  exits: {

    success: {
      statusCode: 200,
      description: 'Requesting user is a guest, so show the public landing page.',
      viewTemplatePath: 'pages/homepage'
    },

    redirect: {
      responseType: 'redirect',
      description: 'Requesting user is logged in, so redirect to the internal welcome page.'
    },

  },


  fn: async function () {
    if (this.req.me) {
      throw {redirect:'/welcome'};
    }
    return {title: 'Home page'};
  }
};

e.g: return (title: 'Home page')

来源：https://stackoverflow.com/questions/53520452/how-to-use-dynamic-page-titles-in-sails-js-v1-0

标签

sails.js