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

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

*.schema.json:

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

Strona: templates/blog.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

<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:

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, aby sprawdzić implementację i zmienne motywu.

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

.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.

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.