Comment puis-je changer le titre de chaque page en utilisant NodeJS ?
Le index.html (et non le fichier .js ) qui est à l'intérieur du dossier public est:
<!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>
Comment puis-je changer le titre de manière dynamique chaque fois que je navigue vers une page?
5 Réponses :
Ce n'est rien d'autre que de changer le titre de la page en javascript par défaut comme document.title = 'title'; mais cela dépend de votre environnement.
NodeJS lui-même n'a pas la capacité d'analyser et de transformer le HTML .
En express, ce serait comme (une approche basée sur l'itinéraire):
router.get('/', function(req, res, next) {
res.render('index', { title: 'title' });
});
Je n'utilise pas express
Je n'utilise pas express, alors quelle est la solution, je n'utilise que le matériel ui et Node Js aucun autre module
voir ma réponse mise à jour, nodejs ne peut pas le faire lui-même.
Oui je sais, alors quelle solution est simple pour ça?
La solution serait d'utiliser Express dans le backend ou certains JS dans le frontend.
Si vous appréciez ma réponse, vous pouvez voter pour une note acceptée, c'est le genre de récompense ici sur SO pour remercier la personne qui fournit de l'aide.
Si je veux l'utiliser dans Front End, comment dois-je le faire exactement?
Il y a déjà beaucoup de réponses à cette question ici sur SO, cherchez-les. Bonne chance.
Qu'est-ce que vous utilisez?
@Bigga_HD J'ai utilisé maintenant express mais ce code res.render ('index', {title: 'title'}); ne fonctionne PAS
@Felix J'ai utilisé maintenant express mais ce code res.render ('index', {title: 'title'}); ne fonctionne PAS
app.get('/simple',(req, res) => {
res.render('simple.hbs',{title='mytitle'});
}
/ simple est la route qui rendra votre ' simple em > '( HTML , EJS , Handlebars , etc. - en fonction de votre utilisation) et donnez-lui le tout nouveau titre en supplément option.
Dans cet exemple, ce serait mytitle :)
Mise à jour: un exemple utilisant strictement HTML em>
app.get ('/', fonction (req, res) {
/ ***
'template.html' - le nom de fichier du modèle
{} - le contexte - remplissez ceci avec toutes les variables que vous
souhaitez utiliser dans votre modèle
*** /
res.render ('template.html', {title: 'Mon nouveau titre'});
});
Ne fonctionne pas, cela ne change pas du tout le titre dans index.html !!!!
Avez-vous mis un signe égal (=) au lieu d'un point (.) ?? :)
J'utilise le backend et le front end, j'ai essayé le code taht dans Back end !!!, et j'utilise router.get ('/', async (req, res) => {...... ... . res.json ({title: 'Mon nouveau titre'});});
Je suggérerais d'y aller doucement. Essayez-le d'abord avec mon code exact fourni, puis expérimentez avec des trucs comme async / await, etc ... En plus de cela, vous avez un ensemble supplémentaire de symboles dans le code que vous venez de fournir. Voyez quelque chose de louche ici: });}); ? Bonne chance :)
Le code backend et frontend fonctionne bien, seul le titre ne change pas du tout !!! router.get ('/', async (req, res) => {let result = wait _buildSearchQuery (req); models.ListingPost.findAll ({include: [models.HousingType, models.ListingImage], exclure: [models.Chat], où: result.searchQuery, order: result.order}). then (lists => {var body = convertSequilizeToObject (lists); res.json ({title: 'My New Title'});} );});
res.write(
);
Essayez le code ci-dessus au point de terminaison (app.get) d'une page différente en conséquence
J'utilise EJS template Engine donc j'utilise EJS Je fais cela en utilisant la méthode suivante
dans Route Faites ceci
<title><%- title%></title>
Remarque: vous ne pouvez pas le faire tant qu'il se trouve dans le dossier public, car l'idée du dossier public est d'afficher des pages statiques, des images, des styles, des scripts côté client, etc. Si vous souhaitez déplacer le fichier hors du dossier public, passez au dernier paragraphe.
Vous devez utiliser n'importe quel moteur de modèle tel que EJS pour cela, renommez d'abord votre .html code > fichier à .ejs puis en supposant que vous utilisez Express.JS, vous pouvez transmettre des données à votre page de conception (Remarque: cela se produit côté serveur).
Dans votre index.js
<head>
<title><%- title %></title>
</head>
Dans votre index.ejs (pas le code complet, ajoutez le reste du html) p>
app.get("/path/to/your/page",function(req,res){
res.render("path/to/your/layout/index.ejs",{
title:"Your Title Here"
});
});
Vous pouvez en savoir plus sur l'utilisation des moteurs de modèles ici Utilisation d'EJS avec Express . Remarque: le code est un exemple simple, le code complet d'utilisation d'Express et d'EJS est largement disponible sur youtube, documentations, stackoverflow.
Et pourquoi voulez-vous changer de titre avec Node.JS? Vous pouvez utiliser JS côté client pour changer de titre quand vous le souhaitez, par exemple: lorsque l'utilisateur clique sur un bouton de connexion et qu'une fenêtre contextuelle de connexion s'ouvre, vous pouvez utiliser document.title = "Connexion"; et lorsque l'utilisateur clique sur le bouton d'enregistrement et une fenêtre contextuelle de registre s'ouvre, vous pouvez définir le titre document.title = "Register"; , les deux étaient dans la même page.