wygląda to tak, jakbyś'ponownie korzystał z IE11…

Jeśli po raz pierwszy słyszysz o określeniu „breadcrumb” używanym w projektowaniu stron internetowych, pozwól, że pokażę Ci, jak to wygląda:

jestem prawie pewien, że napotkałeś go w strony, które odwiedziłeś. Teraz, dodajmy jeden na Twoim website.To Dodaj element bułka tarta, po prostu wyszukaj „bułka tarta” na panelu elementy i przeciągnij element bułka tarta do panelu Zawartość.

będziesz mógł zobaczyć coś takiego:

teraz tekst, który widzisz w kreatorze lub w Cornerstone nie jest faktycznym tekstem, który pojawi się na front-end Twojej witryny. To tylko Element Zastępczy. Na front-endzie zobaczysz hierarchię stron internetowych, zaczynając od linku do domu po lewej stronie, a następnie przesuwając jedno dziecko dalej po prawej stronie.

w tym przypadku, ponieważ tworzona przez nas strona jest profilem firmy, który w tym przykładzie jest potomkiem strony O nas, struktura jest następująca: strona główna >o nas > profil firmy.

w grupie pól konfiguracji zobaczysz następujące pola:

typ etykiety głównej

Możesz wybrać, czy chcesz użyć zwykłego tekstu (np.

Home Label

Jeśli wybrałeś tekst w polu Home Label Type powyżej, możesz zmienić tekst z „Home” na coś innego (np. Blog, News).

Jeśli wybierzesz ikonę, będziesz mieć możliwość wyboru ikony, której chcesz użyć.

Szerokość& Maksymalna szerokość

możesz ustawić domyślną szerokość elementu bułki tartej. Można również ustawić jego maksymalną szerokość, aby nie przekraczała tej szerokości.

Justification& Direction

pozwala to na zmianę ustawień właściwości Flex CSS elementu Breadcrumb. Jeśli nie znasz systemu Flexbox, znajdziesz tutaj pomocne wprowadzenie.

Tło

możesz dodać kolor tła do elementu.

możesz ustawić czcionki, marginesy, paddingi, cienie, obramowania i promień obramowania elementu bułki tartej. Te właściwości zobaczysz na panelu sterowania:

zwracają uwagę, że wspomniane właściwości, po skonfigurowaniu, dotyczą całego elementu panierki, a nie pojedynczych linków wewnątrz tego elementu. Oznacza to, że jeśli ustawisz Paddings, będzie to dotyczyć całego elementu.

później omówimy, jak skonfigurować poszczególne linki wewnątrz breadcrumb.

w panierce „separatory” są separatorami każdego linku.

domyślnym ogranicznikiem jest strzałka, ale możemy to zmienić, a nawet całkowicie usunąć. Ustawienia można znaleźć w grupie pola ustawień Delimeter.

teraz omówmy poszczególne ustawienia.

Enable

domyślnie ograniczniki są włączone, ale można je wyłączyć, usuwając w ten sposób dowolny ogranicznik.

Typ ogranicznika

podobnie jak w typie etykiety głównej w grupie pola konfiguracji omówionej wcześniej, możesz wybrać, czy chcesz użyć tekstu, czy ikony dla typu ogranicznika. Kiedy mówimy „tekst”, niekoniecznie oznacza to słowa, chociaż słowa są dozwolone. Najczęściej używane są kody ASCII. Domyślny separator, → jest kodem ASCII, który generuje strzałkę.

Jeśli wybierzesz ikonę jako typ ogranicznika, pojawi się pole wyboru ikon, aby wybrać ikony, których chcesz użyć.

LTR& Separator RTL

LTR oznacza „od lewej do prawej”, podczas gdy RTL oznacza „od prawej do lewej”. To w zasadzie oznacza kierunek w jaki czytamy litery. Na przykład, czytasz ten artykuł zaczynając od lewej do prawej, więc jest to LTR. Języki takie jak arabski i Hebrajski czytają swoje znaki i słowa, zaczynając od prawej do lewej.

niektóre strony internetowe obsługują wiele języków, w których obsługiwane są zarówno LTR, jak i RTL. To ustawienie przygotowuje separator breadcrumb, umożliwiając ustawienie nie tylko separatora LTR, ale także tego, czego należy używać, gdy włączony jest RTL.

odstępy

wartość, którą tu umieścisz, zostanie ustawiona jako odległość po lewej i prawej stronie ogranicznika. Więc jeśli ustawisz 10px jako wartość, każdy ogranicznik będzie miał spację 10px po lewej i kolejne 10px po prawej.

Ustawienia linków są praktycznie takie same jak ustawienia konfiguracji i projektowania razem wzięte. Główną różnicą jest to, że ustawienia linków są specyficzne dla poszczególnych linków, podczas gdy pierwsze dwa są stosowane do samego elementu breadcrumb.

Konfiguracja linków pozwala również ustawić kolor tekstu i kolor tła wszystkich linków wewnątrz ścieżki, którą kursor myszki najeżdża na link.

Customize

sekcja customize składa się z kontrolek do dostosowywania elementu, jeśli jesteś w HTML, CSS i Javascript.

• ID – Użyj tej opcji, aby ustawić identyfikator HTML dla elementu. Identyfikator powinien być unikalny na stronie.
• Class – Użyj tej opcji, aby ustawić klasę HTML dla elementu. Możesz użyć tej klasy dla swojego niestandardowego kodu CSS.
• element CSS-Użyj tej opcji, aby mieć lepszą kontrolę nad elementem, aby uzyskać dostęp do wewnętrznych tagów elementu za pomocą $el jako wyboru CSS. Kliknij tutaj, aby uzyskać więcej szczegółowych informacji.
• Ukryj podczas przerwania – Użyj tej opcji, aby ukryć element na różnych rozmiarach urządzeń. Kliknij tutaj, aby uzyskać więcej informacji.
• niestandardowe atrybuty – Użyj tej opcji, aby dodać niestandardowe atrybuty do znacznika HTML elementu wrapper. Takich jak data-info=123. Możesz użyć opcji, aby wstrzyknąć informacje Niestandardowe do elementu, aby użyć go w kodzie dostosowywania.

Demo

aby zobaczyć demo na żywo elementu panierki kliknij tutaj.

podsumowanie

w ciągu zaledwie kilku minut nauczyłeś się, jak dodawać i konfigurować okruszki chleba do Cornerstone / content Builder. Nauczyłeś się, jak zaprojektować element breadcrumb, a także jego poszczególne linki. Wreszcie nauczyłeś się również, jak skonfigurować ogranicznik do własnych upodobań.