如何在 sails.js >v1.0 中使用动态页面标题?
How to use dynamic page titles in sails.js >v1.0?
在过去的几天里,我一直在寻找一个可行的解决方案,以优化 sails.js 布局文件中的 html 页面标题 <title>SOME_TITLE</title>
,例如 layout.ejs
,即默认情况下使用静态页面标题。
显然,拥有动态页面标题会更好,例如仪表板、购物车等...
其他人之前一直在寻找这个答案,并在 , Solution 2 and Solution 3 中获得了先前 sails 版本的答案。
不幸的是,其中 none 似乎适用于最新版本的 sails.js(截至本 post)。
引领了正确的方向,并提出了我正在寻找的东西。但是您必须为每个控制器定义一个 title
并将其传递到视图中。否则你会得到
title is not defined at eval
那么如何定义一个默认在每个controller/view中都可以访问的局部变量呢?
因此,当前 sails.js 版本的一个完整工作解决方案如下:
在您的 layout.ejs
文件中定义这样的动态页面标题
<head>
<title>
<%= title %>
</title>
...
</head>
...
创建一个新的自定义挂钩,例如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();
}
}
}
}
};
};
现在覆盖每个应该使用自定义页面标题的控制器中的页面标题,例如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'});
}
};
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'};
}
};
例如:return(标题:'Home page')
我用的是sails 1.4版本
我已将以下代码添加到文件layout.ejs
<% if (typeof pagetitle=="undefined"){%>
<title>write your default title</title>
<% }else{%>
<title><%= pagetitle %></title>
<%}%>
<% if (typeof pagemetadescription=="undefined"){%>
<mеtа nаmе="dеѕсrірtіоn" соntеnt="write your default metadescription"></mеtа>
<% }else{%>
<mеtа nаmе="dеѕсrірtіоn" соntеnt="<%= pagemetadescription %>"></mеtа>
<%}%>
如果在控制器中,我 return 变量 pagetitle 或 pagedescription,它们将被添加到布局中。否则,将打印默认值。
在过去的几天里,我一直在寻找一个可行的解决方案,以优化 sails.js 布局文件中的 html 页面标题 <title>SOME_TITLE</title>
,例如 layout.ejs
,即默认情况下使用静态页面标题。
显然,拥有动态页面标题会更好,例如仪表板、购物车等...
其他人之前一直在寻找这个答案,并在
title
并将其传递到视图中。否则你会得到
title is not defined at eval
那么如何定义一个默认在每个controller/view中都可以访问的局部变量呢?
因此,当前 sails.js 版本的一个完整工作解决方案如下:
在您的 layout.ejs
文件中定义这样的动态页面标题
<head>
<title>
<%= title %>
</title>
...
</head>
...
创建一个新的自定义挂钩,例如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();
}
}
}
}
};
};
现在覆盖每个应该使用自定义页面标题的控制器中的页面标题,例如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'});
}
};
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'};
}
};
例如:return(标题:'Home page')
我用的是sails 1.4版本
我已将以下代码添加到文件layout.ejs
<% if (typeof pagetitle=="undefined"){%>
<title>write your default title</title>
<% }else{%>
<title><%= pagetitle %></title>
<%}%>
<% if (typeof pagemetadescription=="undefined"){%>
<mеtа nаmе="dеѕсrірtіоn" соntеnt="write your default metadescription"></mеtа>
<% }else{%>
<mеtа nаmе="dеѕсrірtіоn" соntеnt="<%= pagemetadescription %>"></mеtа>
<%}%>
如果在控制器中,我 return 变量 pagetitle 或 pagedescription,它们将被添加到布局中。否则,将打印默认值。