如何使用 javascript 或 nodejs 更新带有通用头文件的链接答案

【问题标题】：How to update links with common header file using javascript or nodejs如何使用 javascript 或 nodejs 更新带有通用头文件的链接
【发布时间】：2019-11-06 03:20:14
【问题描述】：

我想知道如何更新所有页面的链接。

我有一个通用头文件，其中包含带有语言下拉菜单的导航栏。目前，我对所有页面使用相同的头文件，可以说，如果我选择一种下拉语言，它会导航到后端路线，

当下拉选择时在索引页面上，下拉 url 应该是/en``/th，在“关于”页面上，下拉 URL 应为 /en/about /th/about 在联系页面上，下拉 url 应该是/en/contact, th/about

所以我的问题是因为我有一个共同的标题，当我去相应的页面时，我如何更新下拉 url 中的链接。如何使用前端/后端，有点困惑

//language.js
var express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
    res.render('index.ejs'});
});
module.exports = router;
//aboutus.js
var express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
    res.render('aboutus.ejs');
});
module.exports = router;


header.ejs

<body>
  <nav>
  <ul>
 <li class="nav-item">
            <a class="nav-link" href="/en/about" style="margin-right: 1.5rem!important;">about us</a>
          </li>
          <li class=" nav-item">
            <a class="nav-link" href="/en/contact"
              style="margin-right: 1.5rem!important;">contact us</a>
          </li>
  </ul>
    <div class="dropdown">
      <button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
        English
      </button>
      <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
        <a class="dropdown-item" href="/en">English</a> //change this link according to the page
        <a class="dropdown-item" href="/th">Thai</a>//change this link according to the page
      </div>
    </div>
  </nav>
</body>

//index.ejs

  <%- include header.ejs %>
  <h1>Welcome to My Site</h1>
//about.ejs

  <%- include header.ejs %>
  <h1>About us</h1>

【问题讨论】：

标签： javascript html node.js ajax express

【解决方案1】：

 <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
    <a class="dropdown-item" href="javascript:" onclick="updateLang("en")">English</a> //change this link according to the page
    <a class="dropdown-item" href="javascript:" onclick="updateLang("th")">Thai</a>//change this link according to the page
  </div>

Script for the updatelang
updateLang(val){
 var url = new URL(location.href);
 var query_string = url.search;
 var search_params = new URLSearchParams(query_string); 

 // new value of "lang" is set to "th" val = "th"
 search_params.set('lang', val);

 // change the search property of the main url
 url.search = search_params.toString();

 // the new url string
 var new_url = url.toString();

 // output : http://demourl.com/path?lang=th
 console.log(new_url);
 location.replace(new_url)
}


you can send query parameter to backend
router.get('/', function (req, res) {
   let lang = req.query.lang;
// based on lang you can send file
   res.render('aboutus.ejs');
});

【讨论】：

感谢帮助，请问可以使用ajax调用请求吗
已经更新了我的代码，当我点击about us 并且下拉菜单是thai 时，将把url 替换为/th/about 作为路由？
是否可以将设置参数替换为http://demourl.com/path/:lang
location.pathname.split('/')[2];您将获得 lang 值，Happy coding。