2

I have implemented bootstrap navbar having dropdown with multiple languages, when I select the language, it will translate the page, how to change url for other pages and button text when i select french, change all url to /fr/about and /fr/contact. How to do using javascript

//app.js
var express = require('express');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs')
var languageRouter = require('./routes/language');

app.use('/:lan', languageRouter);
app.use('/:lan/contact', contactusRouter);
app.use('/:lan/aboutus', aboutusRouter);

//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>
    <div class="dropdown">
 <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown mr-4">
                <a class="nav-link dropdown-toggle" href="/en/about" id="navbarDropdownProvider" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                   about us
                </a>
</li>
<li class="nav-item dropdown mr-4">
                <a class="nav-link dropdown-toggle" href="/en/contact" id="navbarDropdownProvider" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                   contact us
                </a>
</li>
</ul>
      <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>
        <a class="dropdown-item" href="/fr">French</a>
      </div>
    </div>
  </nav>
</body>

//index.ejs

  <%- include header.ejs %>
  <h1>Welcome to My Site</h1>
miyavv
  • 763
  • 3
  • 12
  • 30
  • Any luck on solving this yet? – jonahe Jun 24 '19 at 20:11
  • @jonahe thanks for reply , but not yet, when i click on dropdown `french`, it should change all nav links like about , contact to `/fr/about /fr/contact` – miyavv Jun 25 '19 at 01:19
  • @jonahe can you please have a look https://stackoverflow.com/questions/56746425/change-language-code-within-url-javascript-nodejs/56746489#56746489 – miyavv Jun 25 '19 at 03:58
  • If you study and learn the principle behind the methods used here https://stackoverflow.com/a/56731675/4763083, you can maybe see that you can extend that to also pass your selected language code to your templates (.ejs-files), and then you can use language code to to dynamically build different hrefs depending on what language is chosen – jonahe Jun 25 '19 at 07:02

1 Answers1

0

It should be possible to "nest" routes with express. (As an example checkout this answer Rest with Express.js nested router)

In your case, I think that would mean that your old code

var languageRouter = require('./routes/language');

app.use('/:lan', languageRouter);
app.use('/:lan/contact', contactusRouter);
app.use('/:lan/aboutus', aboutusRouter);

becomes something like this:

var languageRouter = require('./routes/language');

app.use('/:lan', languageRouter);
languageRouter.use('/:lan/contact', contactusRouter);
languageRouter.use('/:lan/aboutus', aboutusRouter);
jonahe
  • 4,820
  • 1
  • 15
  • 19