# Свои настройки: адрес и телефон в одном месте

Все главы  [1 Перед началом](https://eile.site/cookbook/nachalo)[2 Установка](https://eile.site/cookbook/ustanovka)[3 Страницы](https://eile.site/cookbook/stranitsy)[4 Первый шаблон](https://eile.site/cookbook/pervyi-shablon)[5 Компоненты](https://eile.site/cookbook/komponenty)[6 Рамка сайта](https://eile.site/cookbook/ramka)[7 Поля страниц](https://eile.site/cookbook/polya)[8 Списки страниц](https://eile.site/cookbook/spiski)[9 Свои настройки](https://eile.site/cookbook/nastroiki)[10 Заявка на замер](https://eile.site/cookbook/forma)[11 Живые части](https://eile.site/cookbook/zhivye-chasti)[12 В интернет](https://eile.site/cookbook/v-internet)[13 Что дальше](https://eile.site/cookbook/dalshe)

# Свои настройки: адрес и телефон в одном месте

Телефон студии нужен в подвале, на странице контактов и рядом с формой замера. Заведём его один раз в настройках, а шаблоны и тексты будут брать его оттуда.

Глава 9 из 13 · 3 минуты чтения

## Одно значение на весь сайт

Телефон меняется редко, но если меняется, то везде сразу. Если он вписан в пять мест, одно обязательно забудется, и клиенты будут звонить по старому номеру. Поэтому такие значения держат в одном месте, а остальные места на него ссылаются.

## Завести настройки

Откройте **Настройки** → **Свои настройки** и нажмите **Добавить ключ**. Добавьте три настройки:

- `phone`: «+7 (900) 123-45-67»;
- `address`: «Москва, Садовая улица, 12»;
- `hours`: «Шоурум открыт каждый день с 10:00 до 20:00».

Ключ пишется латиницей, по нему значение найдут шаблоны. Правки в таблице сохраняются сразу.

## В подвале

Замените код компонента Footer:

Компонент Footer

```
<!-- @component
Подвал: название, адрес, телефон, часы шоурума и год. Контакты берутся из своих настроек сайта.
-->
<script>
  import { site } from '$core';

  let {
    /** Строка рядом с названием */
    note = 'кухни на заказ',
  } = $props();

  const { name, custom } = site();
  const tel = custom.phone.replace(/[^+\d]/g, '');
  const year = new Date().getFullYear();
</script>

<footer class="footer">
  <p><b>{name}</b> · {note}</p>
  <p>{custom.address} · <a href={`tel:${tel}`}>{custom.phone}</a></p>
  <p>{custom.hours}</p>
  <p>© {year}</p>
</footer>

<style>
  .footer {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem;
    color: #6b6862;
    font-size: 0.9rem;
  }

  .footer p {
    margin: 0.25rem 0;
  }

  .footer a {
    color: inherit;
  }
</style>
```

- `const { name, custom } = site();`: берём из настроек сайта название и свои настройки. В `custom` лежит всё, что вы завели на вкладке **Свои настройки**, по ключам.
- `custom.phone.replace(/[^+\d]/g, '')`: из «+7 (900) 123-45-67» остаётся «+79001234567». Такой номер понимает ссылка `tel:`: на телефоне по ней можно сразу позвонить.

## В тексте страницы

В шаблоне настройки берут через `site().custom`, а в тексте страницы для этого есть короткая запись: ключ в квадратных скобках с собакой. Откройте «Контакты» и напишите:

Текст страницы «Контакты»

```
Адрес шоурума: [@address]
Телефон: [@phone]
[@hours]
```

На сайте вместо `[@phone]` будет номер. Поменяете номер в настройках, и он поменяется и здесь, и в подвале.

![Страница «Контакты»: адрес и телефон подставлены из настроек](https://eile.site/media/screens/cook-contacts-light.webp?v=abb8171452678a78)

Страница «Контакты»: адрес и телефон подставлены из настроек