Wyprowadzanie wartości zmiennej z kodem html jako text/html

pytanie zadane 27 marca 2024 w Inne języki przez Piotrek2713 Mądrala (5,520 p.)

Tworzę szasblon headera strony www w obiekcie

const templates = {
    title: 'Codek - Programming Blog',
    header: `<div class="brand-wrapper">
    <h1 class="brand"><a href="" class="brand-link">CODEK.PL</a></h1>
    <h2>Programming Blog</h2>
</div>
<nav class="main-menu">
    <ul>
        <li class="nav-item"><a href="" class="nav-link">Blog</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Memes</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Q&A</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
        <li class="nav-item"><a href="#" class="nav-link">About</a></li>
    </ul>
</nav>`
}

i renderuję do pliku index.hbs

const express = require('express');
const path = require('path');
const templates = require('./templates');
const app = express();

app.set('view engine', 'hbs');
app.use(express.static('public'))
app.get('', (req,res) => {
    res.render('index.hbs', templates);
})

app.listen(3030);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <link rel="stylesheet" href="../style.css" type="text/css">
</head>
<body>
    <header class="header">
        {{header}}
    </header>
</body>
</html>

Problem polega na tym, że

mam zwłykły tekst zamiast html, a nie wiem jak to przekonwertować na html

1 odpowiedź

odpowiedź 27 marca 2024 przez VBService Ekspert (256,600 p.)
wybrane 27 marca 2024 przez Piotrek2713

Najlepsza

Użyj {{{header}}} zamiast {{header}}. Potrójne nawiasy klamrowe {{{ }}} służą do renderowania nieprzetworzonego kodu HTML, pozwalając na wstrzykiwanie kodu HTML w zmiennych bez jego escape-owania.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <link rel="stylesheet" href="../style.css">
  </head>
  <body>
    <header class="header">
      {{{header}}}
    </header>
  </body>
</html>

[ What is the difference between double curly braces and triple curly braces ]