# Blog i komentarze

## Wymagania

Szablon musi deklarować obsługę bloga przez użycie `<gs-blog>` w plikach Loom. Kompilator wykrywa ten element i zapisuje `supports_blog` w rejestrze paczki. Po `npm run themes:build` uruchom `php artisan themes:sync` w katalogu `api`. Włącz plugin Blog dla workspace. Sam plik Loom nie nadaje dostępu do pluginu.

## Archiwum: sections/journal.html

```html
<section class="theme-journal">
  <gs-blog variant="blog-grid-sidebar"></gs-blog>
</section>
```

`*.schema.json`:

```json
{
  "name": "Blog",
  "settings": [],
  "presets": [
    {
      "name": "Blog"
    }
  ]
}
```

## Strona: templates/blog.json

```json
{"title":"Blog","role":"blog","sections":{"journal":{"type":"journal"}},"order":["journal"]}
```

Dla strony artykułu użyj `role: "blog-details"`. Te role umożliwiają wspólną obsługę nawigacji, sitemap i ukrywania stron po wyłączeniu Bloga. Nowa instalacja paczki tworzy te strony; aktualizacja paczki nie dopisuje automatycznie stron istniejącym klientom. W istniejącej witrynie dodaj stronę z układem blogowym i sekcję bloga.

## Warianty i adresy

`blog-grid-sidebar` i `blog-list-sidebar` pokazują listę, a po wybraniu wpisu także artykuł. `blog-detail-sidebar` jest widokiem szczegółowym. Do własnego układu użyj `blog-cards`, `blog-list`, `blog-article`, `blog-search`, `blog-categories`, `blog-tags`, `blog-recent`, `blog-pagination`, `blog-author` i `blog-post-footer`.

Link do artykułu ma postać `/article?post=slug-wpisu`. Adres archiwum i szczegółów ustala renderer na podstawie ról stron. API obsługuje `post`, `page`, `search`, `category`, `tag`. Gotowe komponenty generują linki i formularz wyszukiwarki; nie pobieraj prywatnych endpointów z plików szablonu. Publiczne odpowiedzi nie zawierają draftów ani zaplanowanych na przyszłość wpisów.

## Plugin Komentarze

```html
<gs-blog variant="blog-article"></gs-blog>
<gs-comments></gs-comments>
```

Włącz Blog i Komentarze oraz komentarze w ustawieniach wpisu. Widoczne są zatwierdzone komentarze. Formularz odpowiedzi używa wspólnej walidacji, ochrony i endpointu GrowSite. W kreatorze wysyłanie jest wyłączone. Warianty z sidebar mają już komentarze w szczegółach — nie dodawaj wtedy drugiego `gs-comments`.

## Własny styl Bloga i Komentarzy

`gs-blog` i `gs-comments` zapewniają wspólną obsługę treści, nawigacji i formularzy. Nie odtwarzają automatycznie wyglądu Twojego szablonu. Style pluginów umieść w paczce motywu, np. w `assets/blog.css`. GS Loom ładuje CSS z `assets/` w zakresie danego motywu; ogranicz selektory do odpowiednich komponentów, aby pozostałe sekcje zachowały swój wygląd.

Dostosuj cały widok czytania:

| Element | Selektory CSS |
| --- | --- |
| Układ listy i artykułu | `.blog-layout`, `.blog-posts`, `.blog-grid`, `.blog-article` |
| Zdjęcie główne i miniatury | `.blog-image`, `.blog-recent img` |
| Wyszukiwarka, kategorie i panel boczny | `.blog-search`, `.blog-widget`, `.blog-sidebar` |
| Tagi, udostępnianie i paginacja | `.blog-tags a`, `.blog-share a`, `.blog-pagination` |
| Autor i sąsiednie wpisy | `.blog-author`, `.blog-post-navigation` |
| Komentarze i formularz odpowiedzi | `.blog-comments`, `.blog-form-row`, `.blog-avatar`, `.blog-submit` |

GrowSite Skeleton zawiera własny `assets/blog.css` dla stron `templates/blog.json` i `templates/article.json`. Korzysta z ciemnych, zaokrąglonych kart, tagów i przycisków w kolorze akcentu, zaokrąglonych zdjęć oraz formularza komentarzy dopasowanego do Instant. Plik obejmuje również bloki kodu w bogatym tekście. Pobierz kompletną [paczkę GrowSite Skeleton](/downloads/growsite-skeleton.zip), aby sprawdzić implementację i zmienne motywu.

Przykład stylowania wspólnej wyszukiwarki w Skeleton bez zastępowania jej formularza:

```css
.sk-page .blog-section .blog-search {
  border: 1px solid var(--sk-border);
  border-radius: 50px;
  background: var(--sk-surface);
}
.sk-page .blog-section .blog-search input {
  font-size: 16px;
  color: var(--sk-text);
  background: transparent;
}
```

Zmienne `--sk-*` należą do Skeleton; przy adaptacji do innego motywu zdefiniuj własne zmienne. Ustaw czytelny rozmiar tekstu inputu wprost: wspólna etykieta wyszukiwarki ukrywa widoczny tekst przez `font-size: 0`, zachowując nazwę dostępną dla czytników ekranu.

Dostosuj hover, fokus klawiatury, nieaktywne kontrolki i wąskie ekrany. Zachowaj wspólną obsługę wysyłania, walidacji oraz dostępu do pluginów. Na telefonie ustaw panel boczny i pola komentarza w jednej kolumnie, pozwól tagom się zawijać i utrzymuj długą treść w obrębie strony. Zobacz także [stylowanie kodu](/pl/text/#bloki-kodu-i-kod-w-tekscie).

## Sprawdzenie i SEO

Utwórz opublikowany wpis, draft i wpis z przyszłą datą. Sprawdź listę, szukanie, kategorie, paginację i artykuł. Przetestuj brak wpisów, wyłączone komentarze, moderację i błędne odpowiedzi. Po wyłączeniu Bloga strony z rolami blogowymi znikają z publicznej nawigacji, bez kasowania treści. Metadane artykułu i canonical generuje GrowSite: szczegóły w [SEO](/pl/seo-plugins/).