Przejdź do treści
Uwaga: Tłumaczenie tego artykułu jest podane wyłącznie dla wygody. Tłumaczenie jest tworzone automatycznie za pomocą oprogramowania tłumaczącego i mogło nie zostać sprawdzone. W związku z tym, angielska wersja tego artykułu powinna być uważana za wersję obowiązującą, zawierającą najnowsze informacje. Możesz uzyskać do niej dostęp tutaj.
Design Manager

Tworzenie i edycja modułów

Data ostatniej aktualizacji: października 18, 2021

Dotyczy:

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Wcześniejsze konto Marketing Hub Basic

W narzędziu menedżera projektu, można tworzyć niestandardowe zakodowane moduły, aby dodać zaawansowane funkcje do swojego bloga, stron lub wiadomości e-mail. Moduły niestandardowe oferują szeroki zakres funkcjonalności, dzięki czemu treść może być w pełni dostosowanie treści w edytorze stron, wiadomości e-mail lub blogu.. Możesz budować niestandardowe moduły od podstaw lub dodawać wstępnie zbudowane moduły z HubSpot Marketplace.

Uwaga:tworzenie modułów wymaga znajomości HTML, CSS, HubL i menedżera projektów HubSpot. HubSpot zaleca współpracę z projektantem w celu utworzenia zakodowanych modułów.


Utwórz nowy moduł

  • W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
  • W górnej części Findera kliknij menu rozwijanePlik i wybierzNowy plik.

new-file

  • W oknie dialogowym kliknij menu rozwijane Co chciałbyś dzisiaj zbudować? i wybierz Moduł.

build-a-module

  • Kliknij przyciskNext (Dalej).
  • Wybierz, czy ten moduł będzie używany w szablonachstron,szablonachblogów i/lubszablonach email. Moduły używane w szablonach wiadomości e-mail nie mogą zawierać CSS ani JavaScript.
  • Wybierz, czy ten moduł będzie modułem lokalnymczyglobalnym. Jeśli utworzysz modułglobalny, edycja zawartości tego modułu będzie aktualizować każdą lokalizację, w której moduł jest używany.
  • Wprowadź nazwę pliku dla swojego modułu, a następnie kliknij przyciskUtwórz.

set-up-your-new-module

Oznacz swój moduł etykietą

Domyślnie edytor treści odwołuje się do modułu, używając nazwy, którą nadano mu w menedżerze projektów. Jeśli chcesz, aby Twój moduł używał innej nazwy w edytorze treści, możesz to zrobić, wpisując etykietę.

design-manager-label-module

Dodaj pola do swojego modułu

Dodaj pola do modułu, aby ustawić jego zawartość lub styl i uczynić go edytowalnym w edytorze treści. Dowiedz się więcej o dostępnych typach pól w naszej dokumentacji deweloperskiej.

  • W inspektorze modułu po prawej stronie, kliknij naDodajpolew menurozwijanymw sekcjiPola, a następnie wybierzpole, które chcesz dodać do swojego modułu.

module-add-field

  • Edycja nazwy pola poprzez kliknięcie naikonę ołówkaedytuj Aby zmodyfikowaćnazwę zmiennej HubL, wprowadź zmiany w polu tekstowym Nazwa zmiennej HubL.

Dodaj domyślną zawartość pola

W sekcjiOpcjezawartości możesz dodać domyślną zawartość, która pojawia się, gdy moduł jest używany w szablonach i edytorach zawartości. Opcje domyślnej zawartości będą się różnić w zależności od typu pola.

W poniższym przykładzie typ pola to pole obrazu, więc opcje domyślnej zawartości to wybór domyślnego obrazu oraz ukrycie kontrolek rozmiaru.

field-content-options

Ustawianie opcji edytora pól

W sekcjiOpcje edytora możesz włączyć następujące opcje dotyczące sposobu, w jaki użytkownicy mogą edytować moduł w edytorze treści:

  • Uczyń to pole wymaganym:użytkownik nie będzie mógł pozostawić tego pola pustego w edytorze treści.
  • Uniemożliwiaj edycję w edytorze treści: zawartość pola nie może być edytowana w edytorze treści; jest nadal edytowalna na poziomie szablonu. Opcja ta nie jest dostępna dlamodułów globalnych, które nie mogą być edytowane na poziomie strony.
  • Tekst pomocy Tooltip: dodaj tekst pomocy do pola, aby dać użytkownikom kontekst lub instrukcje. Ten tekst pomocy pojawi się w podpowiedzi, gdy użytkownik najedzie na pole podczas edycji.

    custom-module-help-text
  • Tekst pomocy inline: dodaj tekst pomocy do pola, aby dać użytkownikom kontekst lub instrukcje. Ten tekst pomocy pojawi się pod polem, gdy użytkownik edytuje moduł.

design-manager-module-field-options

Ustawianie warunków wyświetlania pola

Możesz użyć warunków wyświetlania pola, aby ustawić pole modułu tak, by pojawiało się tylko wtedy, gdy inne pole spełnia określone kryteria.

  • WWarunki wyświetlaniaKliknij nazmienną HubLz menurozwijanego, aby wybrać pole modułu, a następnie kliknij na polenie jest puste, aby wybrać warunek dla tego pola.
  • Jeśli wybierzesz warunekjest równy, podajwartość lub regex.

W poniższym przykładzie, warunki wyświetlania są ustawiane dla pola obrazu. Warunkiem jest to, że wartość w polu tekstowym o nazwie image_title musi być równa Headshot, aby pole obrazu pojawiło się w module.

field-display-conditions

Warunki wyświetlania zostaną automatycznie włączone po ustawieniu warunku. Aby wyłączyć warunki wyświetlania, należy kliknąćprzełącznikznajdujący się po prawej stronie opcjiWarunki wyświetlania.

Ustawianie opcji wzmacniacza polowego

Możesz ustawić opcje repeatera dla swojego pola w sekcji Opcje repeatera . Repeatery to pola i grupy, które mogą tworzyć wiele obiektów i wyświetlać je za pomocą pętli for.

  • Wopcjach RepeaterWybierzminimalnąi/lubmaximumliczbę wymaganych instancji tego pola.
  • Możesz także ustawićdomyślną liczbę obiektów, która będzieliczbą wystąpień pola, które pojawią się domyślnie w module.

W the przykład below, the wizerunek pole być ustawiać jako wizerunek suwak. The obiekt liczba ograniczenie ustawiaćwięcminimum3wizerunek pole pojawiać się w the moduł, do maksimum5wizerunek pole. Użytkownik zobaczy4pola obrazu pojawiają się w module domyślnie, i może wybrać, aby dodać jeden więcej pole obrazu lub usunąć jeden istniejące pole obrazu.

field-repeater-options

Opcje repeaterów zostaną automatycznie włączone po zmodyfikowaniu jednej z opcji. Aby wyłączyć opcje repeatera, kliknijprzełącznikznajdujący się po prawej stronieopcji Repeater Options.

Pola modułów grupowych

Po utworzeniu pól, możesz zgrupować do 4 z nich razem, aby utrzymać pola uporządkowane według znaczenia. Grupy pól mogą być używane do budowania niestandardowej logiki pól. Dowiedz się więcej o grupach pól modułu.

Aby zgrupować pola modułu razem:

  • Kliknij przycisk Grupa na prawym pasku bocznym edytora modułów.

    design-manager-group-fields
  • Wybrać pola, które mają być zgrupowane razem.
  • Kliknij przyciskUtwórz grupę.

Skopiuj i wklej swoje fragmenty pól

  • Gdy jesteś gotowy, aby włączyć jeden z pól niestandardowych do swojego modułu, skopiuj i wklej fragment pola do edytoraHTML + HubLmodułu.
    • Jeśli jesteś w inspektorze pola, kliknijprzyciskKopiuj wycinek po prawej stronienazwy zmiennej HubL pola.
    • Jeśli jesteś w inspektorze modułu, najedź na pole i kliknijAkcjerozwijane, a następnie wybierzKopiuj wycinek.
  • Kliknij w miejscu, w którym chcesz dodać pole wedytorze HTML + HubL, a następnie wklej fragment, naciskając klawiszeCtrl+V lubCmd+V.

copy-paste-field-snippet

Napisz składnię modułu

W trakcie edycji modułu można napisać dodatkową składnię modułu w panelach edytoraHTML + HubL,CSS iJS. Dowiedz się więcej na tematedytora kodu modułuiodniesienia do składnimodułu w dokumentacji projektanta HubSpot.

Dodaj tekst pomocy do swojego modułu

W sekcji Opcje edytora, dodaj tekst pomocy, aby dać użytkownikom kontekst podczas edycji modułu. Tekst pomocy nie może być dłuższy niż 300 znaków.

design-manager-help-text

Kiedy użytkownik edytuje moduł w edytorze treści, tekst pomocy pojawi się nad polami modułu.

page-editor-module-help-text

Podgląd Twojego modułu

Możesz podejrzeć, jak Twój moduł będzie wyglądał i funkcjonował w edytorze treści, klikając przycisk Podglądw prawym górnym rogu edytora modułów. Podgląd twojego modułu otworzy się w nowej karcie. Ten podgląd synchronizuje się z edytorem i będzie automatycznie odświeżany podczas pracy.

preview-module

Opublikuj swój moduł

Gdy już skończysz dodawać pola i pisać składnię modułu, możesz przystąpić do jego publikacji. W prawym górnym rogu kliknij przycisk Opublikuj zmiany.

publish-module

Udostępnij swój moduł dla szablonów

  • WłączprzełącznikMake available for templatesw prawym górnym rogu edytora, aby udostępnić ten moduł do dodania do twoich szablonów.

content-toggle

  • Wyłącz ten przełącznik, aby wprowadzić zmiany lub przetestować funkcjonalność modułu. Jeśli ten przełącznik jest wyłączony, Twój zespół zobaczy powiadomienie, że ten moduł nie jest dostępny dla szablonów.

make-module-available

Dodaj swój moduł do szablonu

  • W edytorze układu szablonu kliknij zakładkęDodajna górze inspektora układu, a następnie wyszukaj swój moduł. Utworzone przez ciebie moduły niestandardowe można rozpoznać poikonie modułuniestandardowegocustomModules.
  • Przeciągnij i upuść moduł do swojego szablonu.

add-custom-module

Dodaj lub kup moduł z Marketplace

Oprócz tworzenia własnych modułów, można dodawać lub kupować niestandardowe moduły, które inni użytkownicy lub dostawcy utworzyli w HubSpot Marketplace.

  • W koncie HubSpot kliknij ikonę Marketplace marketplace w głównym panelu nawigacyjnym.
  • W sekcjiFiltruj produktypo lewej stronie, kliknij na rozwijaną listęWszystkie produktywkategoriii wybierzModuły. Możesz filtrować dostępne moduły według:
    • Cena:czy moduł jest darmowy czy płatny
    • Funkcja: rodzaj funkcji, jakie zawiera moduł (np. kalkulator, galeria, mapa)
    • Działa z: typ(y) szablonu(ów), w którym(ch) moduł może być użyty
    • Dostawca: dostawca(y), u którego(ych) moduł jest oferowany
  • Najedź kursorem na wybrany moduł i kliknij Wyświetl szczegóły.
  • Kliknij przyciskPobierz moduł za darmolubKup moduł za $w prawym górnym rogu.
    • Jeśli moduł jest darmowy, zostanie on automatycznie dodany do Twojego menedżera projektów.
    • Jeśli moduł jest płatny, przejdź do wpisania szczegółów płatności. Gdy płatność zostanie przetworzona, moduł zostanie dodany do Twojego menedżera projektów.