GC.CMS — zarządzanie treścią

GC.CMS pozwala zarządzać treścią strony w naturalny sposób, za pomocą wizualnego edytora HTML. Ten przewodnik obejmuje menu główne, edytor i jego pasek narzędzi, edycję artykułów systemowych (karuzela, stopka, pasek informacyjny) oraz przywracanie danych z kopii zapasowych.

Przegląd menu głównego CMS

1. Przejdź do listy artykułów.
2. Wyczyść cache strony — sprawia, że zmiany są od razu widoczne na stronie. Dotyczy głównie artykułów systemowych (oznaczonych jako System resource na liście), które są normalnie cache'owane, oraz innych danych w cache, takich jak magazyny czy metadane SEO.
3. Edytor konfiguracji CMS — edycja konfiguracji strony; pozwala zarządzać niektórymi elementami konfiguracji (wymaga podstawowej znajomości struktury plików JSON).
4. Lista artykułów — wybierz artykuł do edycji.
5. Kategorie aktualności dla blogów i najnowszych wiadomości.

Shared resources — sekcja zawierająca osobną listę artykułów, których można używać na wielu stronach tego samego klienta (artykuły niezwiązane tylko z jedną stroną).

Wizualny edytor HTML

Wizualny edytor pozwala zarządzać treścią strony w naturalny sposób. Za pomocą opcji paska narzędzi możesz zarządzać nagłówkami (style wizualne), predefiniowanymi czcionkami i kolorami.

Obrazy można wgrywać operacją „przeciągnij i upuść" lub za pomocą dedykowanej ikony menedżera plików na pasku narzędzi.

Jeśli chcesz wgrać i podlinkować plik wewnątrz edytowanego artykułu, obejrzyj poniższy tutorial. Pozwala on wstawiać nie tylko obrazy, ale też osadzać pliki takie jak PDF-y czy inne dane do podlinkowania i pobrania ze strony — regulaminy, formularze itp.

Krótki opis opcji edytora

W kolejności przyciski paska narzędzi to:

1. Wstaw link (alternatywa dla przeciągnij i upuść)
2. Wstaw obraz (alternatywa dla przeciągnij i upuść)
3. Wstaw wideo (wklej link z YouTube — osadza wideo na stronie)
4. Wgraj plik — pozwala też utworzyć link do pobrania świeżo wgranego pliku
5. Historia — wyświetla historię zmian artykułu i pozwala przywrócić poprzednią wersję z kopii zapasowej. Kopie tworzone są automatycznie przy zapisie.
6. Tryb szczegółowy — pomocnik edytora HTML, który pokazuje zagnieżdżone obiekty i elementy HTML, takie jak <div>, <span> czy <a>, aby pomóc zachować właściwą strukturę dokumentu. Używany głównie przy edycji artykułów System resource, np. edytora karuzeli (LandingPageSliders), gdzie zdecydowanie zaleca się tryb szczegółowy i przynajmniej podstawową znajomość HTML.
7. Tłumaczenia — pozwala wstawić predefiniowane tłumaczenie. Lista tłumaczeń jest ograniczona, ale bywa pomocna. Wstawiony klucz widoczny w edytorze zostanie automatycznie zastąpiony właściwym tłumaczeniem na stronie. Opcja przydatna przy edycji zasobów systemowych, np. stopki.
8. Przełącz tryb pełnoekranowy.
9. Widok kodu — ważna opcja pozwalająca edytować wygenerowany HTML bezpośrednio. Używana głównie przy edycji artykułów systemowych, do poprawiania kodu lub dodawania własnych arkuszy stylów.
10. Lista skrótów edytora.

Edycja artykułów systemowych — przegląd

Udostępnianie zmian na stronie. Wszystkie zmiany w artykułach systemowych stają się widoczne automatycznie, gdy wygaśnie cache (maksymalnie 24 h lub mniej, w zależności od tego, kiedy utworzono bieżący cache). Jeśli chcesz, aby zmiany były widoczne natychmiast, zapisz je, kliknij przycisk Back to CMS i naciśnij Make changes visible now — odświeży to dane w cache.

Edycja karuzeli na stronie głównej (slidery)

Aby dodać lub usunąć slajdy z karuzeli:

1. Otwórz artykuł karuzeli na liście artykułów CMS i wybierz odpowiedni język.
2. Kliknij EDIT; zwróć uwagę na wyświetlane ostrzeżenia.
3. Włącz tryb szczegółowy za pomocą jego ikony na pasku narzędzi.
4. Edytuj zgodnie z poniższymi zasadami.

a) Usuwanie banera karuzeli. Pierwszy baner w edytowanym artykule jest zawsze pokazywany na stronie głównej (jako pierwszy w karuzeli). Pozostałe są losowo wybierane (wyświetlane są 3, maksymalnie 4).

b) Dodawanie nowego banera. Kliknij ikonę Add Slide i postępuj zgodnie z kreatorem AddSlide. Nowy baner zostanie dodany na koniec listy. Kolejność nie ma znaczenia, ponieważ banery są wybierane losowo (poza pierwszym, który jest zawsze widoczny).

Po zmianach sprawdź poprawność kodu, wchodząc w Widok kodu. Poprawny kod powinien wyglądać tak:

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="/images/getFromCms/carousel/LTSHOP1.jpg" alt="">
    </div>
    <div class="item active">
        <img src="/images/getFromCms/carousel/LTSHOPlogistics.jpg" alt="">
    </div>
    <div class="item active">
        <img src="/images/getFromCms/carousel/LTSHOPprice.jpg" alt="">
    </div>
</div>

Każdy tag otwierający musi mieć swój tag zamykający. Nie powinno być pustych elementów, takich jak:

    <div class="item active">
    </div>

Edycja treści stopki

Przed edycją treści stopki obejrzyj tutorial wideo.

Edycja paska informacyjnego

Pasek informacyjny służy do wyświetlania na stronie głównej wymaganych informacji, np. o godzinach pracy w okresie świątecznym.

Domyślny szablon paska informacyjnego:

<div class="card m-b-0 m-t-10"><p class="m-b-0" style="padding: 10px; color: red">Information</p></div>

Przywracanie danych z kopii zapasowej

Aby przywrócić dane z kopii zapasowej, naciśnij ikonę Historia na pasku narzędzi edytora. Wybierz wymaganą wersję (zwykle ostatnią), naciśnij przywróć i zapisz. Jeśli przywracasz artykuł systemowy, odśwież cache strony, aby zobaczyć zmiany.

Ważna informacja

W prawym dolnym rogu należy zmienić Compress na WebP. Pozostałymi dwoma suwakami można zmienić jakość zdjęcia. Linia na środku ekranu pokazuje zdjęcie: po lewej bez zmian, a po prawej z bieżącą zmianą jakości.