Wygląd i motywy

Wygląd i branding

Logo, favikona, kolory, tryb ciemny, tła oraz precyzyjne ustawienia kart i strony odtwarzania.

Ekran Wygląd pod adresem /admin/appearance to centrum sterowania bez pisania kodu. Wszystko tutaj zmienia styl aktywnego motywu — logotypy, kolory, tryb ciemny, układ oraz szczegóły kart wideo i stron odtwarzania — bez dotykania ani jednego pliku. Zmiany są zapisywane jako ustawienia i odczytywane przez motyw w czasie renderowania, dzięki czemu możesz swobodnie eksperymentować i cofać dowolne zmiany.

Ekran jest podzielony na podzakładki u góry. Ta strona omawia każdą grupę. Jeśli wolisz zmienić sam kod znaczników, to zadanie motywów; poniższe wartości są udostępniane kodowi szablonu jako zmienne z prefiksem $_, w pełni udokumentowane w dokumentacji API motywu.

Marka

Otwórz Wygląd → Marka, aby ustawić swoją tożsamość. Możesz przesłać oddzielne logo dla jasnego i ciemnego motywu — pozostaw oba puste, aby wyświetlać nazwę witryny jako zwykły tekst, a ciemne logo używa odwróconej wersji jasnego, jeśli podasz tylko jasne. Favicon (kwadratowy, co najmniej 32×32 px) jest wyświetlany na karcie przeglądarki.

Wszystkie pliki marki znajdują się w /uploads/branding/. Obsługiwany jest też obraz tła witryny z trybem wyświetlania cover, contain lub repeat; Twój motyw odczytuje je jako $_siteBackground i $_siteBackgroundMode. Możesz też dostosować wysokość logo na komputerze (domyślnie 36px) i urządzeniu mobilnym (domyślnie 28px) z podglądem na żywo.

Używaj przezroczystego PNG lub SVG. Logo z przezroczystym tłem doskonale pasuje zarówno do jasnych, jak i ciemnych nagłówków. Zachowaj każdy plik poniżej 5 MB.

Kolory i tryb ciemny

W sekcji Wygląd → Kolory ustawiasz dwie palety — jedną dla motywu Jasny i jedną dla motywu Ciemny — za pomocą selektora kolorów z opcjonalną przezroczystością. Każde nadpisanie jest kompilowane do właściwości niestandardowych CSS i wstrzykiwane jako blok $_colorOverrides <style>, dzięki czemu kilka wartości kaskaduje przez cały motyw. Każda paleta udostępnia te same osiem ról:

Primary

Kolor akcentu dla przycisków, linków i aktywnych stanów. Domyślnie współdzielony między obydwoma motywami.

Background

Tło strony.

Surface

Paski boczne, tła sekcji i pola formularzy.

Card

Karty wideo, komentarze i bloki treści.

Dark BG

Stopka, nakładki i elementy zastępcze.

Text / Muted Text

Tekst podstawowy oraz mniej wyraziste meta, linki i tekst zastępczy.

Border

Separatory i obramowania kart.

Ten sam ekran zawiera kontrolki trybu ciemnego. Główny przełącznik użytkownika decyduje, czy odwiedzający otrzymują przełącznik jasny/ciemny w nagłówku, a opcja Domyślny ustawiona na Jasny lub Ciemny określa, co widzą jako pierwsze. Jeśli wyłączysz przełącznik użytkownika, witryna zawsze używa wybranego motywu domyślnego, a nieużywana paleta jest wyszarzona.

Układ

Wygląd → Układ kontroluje sposób skalowania siatek. Główną opcją jest liczba filmów w wierszu — wybierz 4, 5 lub 6 (domyślnie 5), udostępniana szablonom jako $_videosPerRow. Zakładki sekcji umożliwiają też ustawienie liczby na stronę i domyślnego sortowania dla filmów, kategorii, gwiazd porno i kanałów, a blok Wymiary witryny ustawia ogólną maksymalną szerokość (domyślnie 1800px) i odstępy strony.

Sortowanie według popularności wymaga wtyczki CTR. Opcja domyślnego sortowania Według popularności pozostaje zablokowana do czasu włączenia rankingu klikalności. Zobacz ranking CTR.

Opcje kart wideo

W sekcji Wygląd → Karty wideo dopracowujesz każdą miniaturę na liście, z przyklejonym podglądem na żywo aktualizującym się przy każdej zmianie.

Opcja	Zmienna	Co robi
Pokaż odznakę czasu trwania	`$_cardShowDuration`	Znacznik czasu trwania w prawym dolnym rogu miniatury.
Pokaż tytuł	`$_cardShowTitle`	Tytuł wideo pod miniaturą.
Liczba linii tytułu	`$_cardTitleLines`	Ogranicz tytuł do 1 lub 2 linii.
Meta lewa / prawa	`$_cardMetaLeft` / `$_cardMetaRight`	Wybierz, co wyświetla się po każdej stronie: `views`, `likes`, `time` (czas temu) lub `none`.
Odstęp siatki	`$_cardGridGap`	Odstęp między kartami, 0–30 px.
Zaokrąglenie rogów	`$_cardBorderRadius`	Zaokrąglenie narożników, 0–24 px.
Powiększenie po najechaniu	`$_cardThumbnailHover`	Powiększ miniaturę po najechaniu kursorem.

Te opcje uwzględniają poniższe ustawienia strony odtwarzania. Jeśli ukryjesz czas trwania lub wartość meta na stronie odtwarzania, odpowiadająca opcja karty zostanie automatycznie wyłączona, aby zachować spójność.

Opcje strony odtwarzania

Podzakładka Strona odtwarzania decyduje o tym, co pojawia się wokół odtwarzacza. Każdy element to niezależny przełącznik; sekcje bez danych ukrywają się niezależnie.

Informacje o filmie — Wyświetlenia, Czas trwania, Data publikacji, Lubię / Nie lubię i przycisk Ulubione.
Szczegóły wideo — Wykonawcy, Kanały, Kategorie i Tagi.
Komentarze — włącz lub wyłącz wątek komentarzy w całej witrynie ($_commentsEnabled). Zobacz komentarze.

Ten sam ekran konfiguruje też odtwarzacz (domyślna jakość, prędkość odtwarzania, przycisk pobierania, pętla i pełny ekran po dwukliknięciu) oraz liczbę powiązanych filmów na pasku bocznym. Odpowiadają one zmiennym $_watchShow* w API motywu.

Nawigacja i wyszukiwanie

Podzakładka Menu buduje nawigację nagłówkową. Włącz lub wyłącz pasek wyszukiwania ($_menuSearch), a następnie złóż menu z wbudowanych miejsc docelowych lub własnych niestandardowych linków. Każdy element ($_menuItems) zawiera label, url, flagę enabled i opcjonalną listę templates, dzięki której link może pojawiać się tylko na określonych typach stron. Gdy publikujesz więcej niż jeden język, przełącznik języków pojawia się automatycznie.

Aby dowiedzieć się o stronach statycznych zasilających menu i stopkę, zobacz strony i menu.

Następne kroki

MotywyZainstaluj, aktywuj i edytuj motyw stojący za tymi kontrolkami. Theme APIWszystkie zmienne udostępniane szablonom przez te ustawienia. Strony i menuBuduj strony statyczne, do których prowadzą linki w nawigacji.

Nadal masz problem?

Otwórz zgłoszenie z poziomu panelu, a nasz zespół Ci pomoże.

Wypróbuj demo na żywo → Pobierz TubePress →