[Intum Pomoc](https://intum.pl/pomoc.md) / [CMS](https://intum.pl/pomoc/cms.md)

# [Z czego składa się witryna](https://intum.pl/pomoc/cms/cms-z-czego-sklada-sie-witryna.md)

Strona, którą widzi odwiedzający, powstaje z kilku warstw. Każdą edytuje się w innym miejscu
i każda odpowiada za co innego - stąd bierze się większość pytań „gdzie to zmienić". Ten artykuł
pokazuje warstwy na jednym obrazku i mówi, której użyć do czego.

> [!PATH]
> [CMS](app:/cms)

## Jak to się składa

```
+-- SZABLON: rama witryny (nagłówek, menu, stopka) --------------------+
|  {{ layout.haslo }}          <- pole szablonu: jeden tekst na całej  |
|                                 witrynie, zmieniany w szablonie      |
|                                                                      |
|  +-- STRONA /oferta: treść pod własnym adresem -------------------+  |
|  |  <h1>{{ naglowek }}</h1>   <- pole strony: klikasz i poprawiasz |  |
|  |  <p>Stały tekst wpisany w treści strony.</p>                   |  |
|  |                                                                |  |
|  |  +-- BOX "oferta": miejsce na paragrafy ---------------------+ |  |
|  |  |  PARAGRAF „Wdrożenia"   (tytuł, zdjęcie, treść, wygląd)   | |  |
|  |  |  PARAGRAF „Szkolenia"                                     | |  |
|  |  |  PARAGRAF „Aktualności" = lista ARTYKUŁÓW z kategorii     | |  |
|  |  +-----------------------------------------------------------+ |  |
|  +----------------------------------------------------------------+  |
|                                                                      |
|  +-- BOX "stopka", wspólny dla całej witryny ---------------------+  |
|  |  PARAGRAF „Dane firmy"  - ten sam na każdej stronie            |  |
|  +----------------------------------------------------------------+  |
+----------------------------------------------------------------------+
```

Czytając od zewnątrz: **szablon** daje ramę, w nią wchodzi **strona** wybrana po adresie, a w stronie
i w szablonie stoją **boxy** - miejsca, w które redaktor wkłada **paragrafy**. Drobne napisy to
**pola**. **Artykuły** nie mają własnego miejsca na obrazku - pokazuje je paragraf z listą.

## Czego użyć

| Chcę... | Użyj | Gdzie to zrobisz |
|---|---|---|
| dodać stronę pod własnym adresem: kontakt, cennik, regulamin | **strony** | [Strony](app:/cms/pages) albo **Dodaj stronę** na pasku podglądu |
| dodać sekcję z tytułem, zdjęciem i tekstem, którą będę dokładać i przestawiać | **paragrafu** w boxie | klikając na stronie w trybie edycji, albo [Paragrafy](app:/cms/paragraphs) |
| mieć blok powtarzany na każdej stronie: stopka, baner, dane kontaktowe | **paragrafu wspólnego** (box wspólny dla witryny) | jak wyżej - zmiana w jednym miejscu działa wszędzie |
| poprawić krótki napis w stałym miejscu: hasło, telefon, podpis | **pola** | klikając w tekst na stronie w trybie edycji |
| prowadzić blog, aktualności, porady - wpisy z datą | **artykułów** i paragrafu „artykuły" na stronie | [Artykuły](app:/cms/articles) |
| zmienić nagłówek, menu, stopkę, style - to, co wspólne | **szablonu** | [Szablony](app:/cms/layouts) |
| wgrać obrazek, arkusz stylów, PDF | **plików** | [Pliki](app:/cms/assets) |

## Witryna

Witryna to jedna strona internetowa: ma nazwę, kod, domenę, język i szablon domyślny. Wszystko
niżej należy do konkretnej witryny. Zakładanie opisuje [Pierwsza witryna](cms/cms-pierwsza-witryna).

## Szablon {#szablon}

Szablon to rama: nagłówek, menu, stopka i miejsce `{{ content }}`, w które wchodzi treść strony.
Witryna ma szablon domyślny, a pojedyncza strona może wskazać własny albo wybrać **Bez szablonu**
- wtedy pokazuje samą swoją treść (przydatne, gdy strona ma własny pełny HTML). Do wyboru są
gotowe układy albo własny HTML. Więcej: [Szablon witryny](cms/cms-szablon-witryny).

## Strona {#strona}

Strona ma **własny adres** (pole **Ścieżka**: `/` to strona startowa, `/kontakt`, `/oferta/cennik`)
i sama o sobie decyduje. Strona z zaznaczonym **W menu** trafia do menu witryny w kolejności
z pola **Priorytet** (mniejsza liczba = wcześniej; u paragrafów w boxie odwrotnie - wyżej stoi
większa, [Paragrafy](cms/paragrafy-cms-bloki)). **Kod menu** to opcjonalny krótki identyfikator
strony, po którym szablon może np. podświetlić aktywną pozycję menu - zwykle zostaje pusty.
Z podglądu witryny do formatki strony prowadzi **Ustawienia strony** na
pasku administratora, a treść wygodniej poprawiać wprost na stronie -
[Edycja wprost na stronie](cms/cms-edycja-na-stronie).

Zakładanie strony (formatka, klon, szybkie dodanie z podglądu), adresy i przekierowania,
wyszukiwarka i podpięcie bazy wiedzy: [Strony](cms/strony-cms).

## Box i paragraf

Box to miejsce w szablonie lub w treści strony zarezerwowane na paragrafy - w kodzie jedna linia
`<cms type="box" id="nazwa"></cms>`. Pusty box nie zostawia śladu; w trybie edycji ma przycisk
**Dodaj treść**.

Paragraf to blok, który redaktor wkłada do boxa: **tekst** albo **artykuły**. Paragraf przypisany
do strony pokazuje się tylko na niej, paragraf z pustym polem **Strona** jest wspólny - pokazuje
się w swoim boxie na każdej stronie witryny, tak robi się stopkę i baner.

Rodzaje paragrafu, szablony prezentacji, kolejność i edytor treści: [Paragrafy](cms/paragrafy-cms).

## Pole {#pole}

Pole to pojedyncza wartość wstawiona w treść strony lub szablonu w klamrach: `{{ telefon }}`,
`{{ naglowek }}`. Wartości są w sekcji **Pola dodatkowe** formatki strony, ale nie trzeba ich tam
zakładać - wystarczy wpisać w klamrach tekst, który ma się pokazać, a po zapisie stanie się polem.
W trybie edycji pole poprawia się kliknięciem. Pola pasują do napisów, paragrafy do sekcji -
porównanie jest w [Edycja wprost na stronie](cms/cms-edycja-na-stronie).

## Artykuł

Artykuł to wpis z **Datą publikacji** i kategorią. Nie ma stałego miejsca w menu - trafia na listę,
którą witryna układa sama od najnowszego, i ma własny adres pod stroną z listą. Tak robi się blog,
aktualności i porady. Więcej: [Artykuły i blog](cms/cms-artykuly-i-blog).

## Pliki

Obrazki, arkusze CSS, skrypty i dokumenty do pobrania wgrywa się w [CMS → Pliki](app:/cms/assets),
z podziałem na foldery. Każdy plik ma publiczny adres, który kopiujesz z listy i wklejasz
w szablonie lub treści. Adres jest stały - wgranie nowej wersji pliku pod tą samą nazwą nie
zmienia linku, więc nie trzeba go nigdzie podmieniać. Zmienia go natomiast zmiana nazwy pliku
albo przeniesienie do innego folderu.

W opcjach dodatkowych pliku administrator systemu ma przełącznik **Pobieranie z innych domen
(CORS)**. Potrzebny jest tylko wtedy, gdy plik ma być wczytywany kodem JavaScript ze strony
stojącej na innej domenie - np. aplikacja pobiera stąd plik `.wasm`. Zwykłe wstawienie obrazka
czy arkusza stylów w witrynie tego nie wymaga.