Как создать общий заголовок для всех страниц в приложении на express.js?

Как создать общий заголовок для всех страниц в приложении на Express.js?
  • 8 декабря 2024 г. 8:03
Ответы на вопрос 2
Чтобы создать общий заголовок для всех страниц в приложении на Express.js, вы можете использовать middleware, который будет добавлять заголовок в каждый ответ, отправляемый клиенту. Вот пример того, как это сделать:

1. Установите и создайте проект Express, если он еще не создан:

```bash
npm init -y
npm install express
```

2. Создайте файл `server.js` и добавьте следующий код:

```javascript
const express = require('express');
const app = express();
const port = 3000;

// Middleware для установки общего заголовка
app.use((req, res, next) => {
  res.set('X-Powered-By', 'My App'); // Здесь вы можете задать нужный вам заголовок
  next();
});

// Пример маршрутов
app.get('/', (req, res) => {
  res.send('Главная страница');
});

app.get('/about', (req, res) => {
  res.send('О нас');
});

// Запуск сервера
app.listen(port, () => {
  console.log(`Сервер запущен на http://localhost:${port}`);
});
```

В этом примере мы использовали middleware, которое срабатывает для каждого входящего запроса, устанавливая заголовок `X-Powered-By` в ответ. Вы можете изменить заголовок на любой другой, который вам нужен.

### Настройка заголовков для HTML-страниц

Если вам нужно добавить заголовок для HTML-страниц, можно использовать шаблонизаторы, такие как EJS или Pug. Пример с EJS:

1. Установите EJS:

```bash
npm install ejs
```

2. Настройте EJS в вашем приложении:

```javascript
const express = require('express');
const app = express();
const port = 3000;

app.set('view engine', 'ejs');

app.use((req, res, next) => {
  res.locals.commonHeader = 'Мой Заголовок'; // Здесь задаем общий заголовок
  next();
});

// Пример маршрутов с использованием шаблонов
app.get('/', (req, res) => {
  res.render('index'); // index.ejs
});

app.get('/about', (req, res) => {
  res.render('about'); // about.ejs
});

// Запуск сервера
app.listen(port, () => {
  console.log(`Сервер запущен на http://localhost:${port}`);
});
```

3. Создайте папку `views` и добавьте в нее файлы `index.ejs` и `about.ejs`:

`views/index.ejs`:

```html
<!DOCTYPE html>
<html>
<head>
    <title><%= commonHeader %></title>
</head>
<body>
    <h1>Главная страница</h1>
</body>
</html>
```

`views/about.ejs`:

```html
<!DOCTYPE html>
<html>
<head>
    <title><%= commonHeader %></title>
</head>
<body>
    <h1>О нас</h1>
</body>
</html>
```

Теперь все страницы будут иметь одинаковый заголовок, который вы можете задать в middleware. Вычисляемый заголовок доступен через `res.locals`, что делает его доступным для всех шаблонов.
Прочесть документацию к шаблонизатору который используешь. В вопросе этого не указано.
Похожие вопросы