在NodeJS中更改页面标题

Question

在NodeJS中更改页面标题

4

如何使用NodeJS更改每个页面的标题？

位于公共文件夹中的index.html（而不是.js文件）内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta
     name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
   />
   <meta name="theme-color" content="#000000" />

  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <title>Default Titlte for all pages</title>
</head>
<body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>

 </body>
</html>

无论我导航到哪个页面，我该如何动态更改标题？

- key.m

5个回答

0

res.write(<head> <title>我的标题</title> </head>);

将上述代码尝试放置于不同页面的 (app.get) 端点中。

- Prakash

0

注意：您不能在公共文件夹中进行更改，因为公共文件夹的想法是显示静态页面、图像、样式、客户端脚本等。如果您仍然想要更改标题但不想将文件移出公共文件夹，请跳到最后一段。

您需要使用任何模板引擎，例如EJS，首先将您的.html文件重命名为.ejs，然后假设您正在使用Express.JS，您可以将数据传递给您的设计页面（请注意：这发生在服务器端）。

在您的index.js中：

app.get("/path/to/your/page",function(req,res){
    res.render("path/to/your/layout/index.ejs",{
       title:"Your Title Here"
    });
});

在你的index.ejs文件中（不需要全部代码，只需添加其余的HTML）。

<head>
    <title><%- title %></title>
</head>

你可以在这里了解更多关于如何使用模板引擎使用EJS与Express。

那么为什么要使用Node.JS来更改标题呢？你可以使用客户端JS在任何时候更改标题，例如：当用户点击登录按钮并打开登录弹出窗口时，你可以使用document.title="登录";，当用户点击注册按钮并打开注册弹出窗口时，你可以设置标题document.title="注册";，两者都在同一页中。

- 27px

0

我正在使用 EJS 模板引擎，所以使用 EJS 我通过以下方法实现：

在路由中执行以下操作：

router.get("/add", function (req, res, next) {
    res.render('category/add', { layout: "layoutMain", title: "Add New Category" });
});

这里的layoutMain是包含CSS、JS链接、侧边栏和网站头部的布局文件，该部分在网站的所有页面中都是共享的，因此我们将使其成为通用的。

更多信息请查看官方文档中的EJS LAYOUT文档。

现在在layoutMain文件中执行以下操作：

<title><%- title%></title>

- Krishna Jangid

0

试试这个，伙计：

    app.get('/simple',(req, res) => {
    res.render('simple.hbs',{title='mytitle'});
}

/simple 是一个路由，它将呈现您的“simple”（HTML、EJS、Handlebars等-取决于您使用的是什么）页面，并提供全新的标题作为额外选项。
在这个例子中，它将是mytitle :)

更新：一个使用纯HTML的示例 app.get('/', function (req, res) { /*** 'template.html' - 模板的文件名 {} - 上下文 - 用所有变量填充此上下文您想在模板中使用 ***/ res.render('template.html', {title: 'My New Title'}); });

- Dzenis H.

完全不起作用，它根本没有改变index.html中标题的内容！！！ - key.m

你是不是把等号（=）写成了点号（.）了？ :) - Dzenis H.

1

我正在使用后端和前端，我尝试在后端中使用那段代码!!!，并且我使用了 router.get('/', async (req,res) => { ...... .... res.json({title: 'My New Title'});}); - key.m

我建议你先轻松一点。首先，尝试使用我提供的完整代码，然后再尝试使用async/await等其他内容进行实验...除此之外，你刚刚提供的代码中有一组额外的符号。看到这里有什么可疑的地方吗：});});？祝你好运 :) - Dzenis H.

代码的后端和前端都很好，只是标题根本没有改变！！！`router.get('/', async (req,res) => { let result = await _buildSearchQuery(req); models.ListingPost.findAll({ include: [models.HousingType,models.ListingImage], exclude: [models.Chat], where: result.searchQuery, order: result.order }).then(listings =>{
var body = convertSequilizeToObject(listings); res.json({title: '我的新标题'}); }); });` - key.m

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix Haeberle · Accepted Answer

这不过是通过默认的javascript更改页面标题，例如document.title = 'title';，但它取决于您的环境。

NodeJS本身缺乏解析和转换HTML的能力。

在express中，它会像这样（一种基于路由的方法）：

router.get('/', function(req, res, next) {
    res.render('index', { title: 'title' });
});