Tworzenie niestandardowego szablonu

Programiści mogą tworzyć blogi, strony internetowe, strony docelowe i szablony wiadomości e-mail od podstaw za pomocą HTML + HubL. Możesz także sklonować układ szablonu metodą przeciągnij i upuść do HTML, a następnie dostosować go jako zakodowany szablon.

Dowiedz się więcej o projektowaniu niestandardowych zasobów w naszej dokumentacji dla deweloperów.

Zanim zaczniesz

Przed rozpoczęciem pracy z tą funkcją upewnij się, że w pełni rozumiesz, jakie kroki należy podjąć z wyprzedzeniem, a także ograniczenia funkcji i potencjalne konsekwencje jej używania.

Zrozumienie wymagań

• Upewnij się, że masz uprawnienia Design tools do tworzenia i edytowania szablonów w menedżerze projektów.
• Zaleca się również posiadanie uprawnieńGlobalna zawartość i ustawienia motywu oraz Ustawienia witryny, jeśli będziesz musiał edytować globalne zasoby internetowe i ustawienia bloga / witryny.

Zrozumienie ograniczeń i rozważań

• Do tworzenia szablonów wiadomości e-mail wymagana jest subskrypcja Marketing Hub Professional lub Enterprise. Konta Content Hub mogą tworzyć wiadomości e-mail za pomocą edytora wiadomości e-mail typu "przeciągnij i upuść".
• Niestandardowe szablony mogą wykorzystywać wiele predefiniowanych zmiennych. Niektóre z tych zmiennych są wymagane do tworzenia wiadomości e-mail i stron, podczas gdy inne są opcjonalne. Dowiedz się więcej o dodawaniu wymaganych zmiennych wiadomości e-mail, witryny i strony docelowej HubL.

Utwórz nowy plik HTML + HubL

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W górnej części wyszukiwarki kliknij menu rozwijane Plik i wybierz opcję Nowy plik.

3. W oknie dialogowym kliknij menu rozwijane What would you like to build today? i wybierz HTML + HubL.

4. W polu What are you building? wybierz odpowiednią opcję:
   • Szablon: definiuje układ i strukturę treści, które będą wyświetlane na stronach witryny, stronach docelowych, we wpisach na blogu lub w wiadomościach e-mail.
   • Szablon częściowy: to kod wielokrotnego użytku lub fragment kodu, który można dołączyć do wielu innych szablonów.
5. Kliknij menu rozwijane Typ szablonu i wybierz typ szablonu z kodem niestandardowym (strona, wpis na blogu/lista, wiadomość e-mail lub strona systemowa). Dowiedz się więcej o typach szablonów.
6. Wprowadź nazwę pliku w polu Nazwa pliku.
7. Aby zaktualizować lokalizację pliku, kliknij przycisk Zmień w sekcji Lokalizacja pliku i wybierz folder.
8. Po zakończeniu kliknij przycisk Utwórz.

Dodawanie HTML + HubL do szablonu

Po skonfigurowaniu nowego pliku zostaniesz przekierowany do edytora kodu, aby dodać niestandardowy kod i wyświetlić podgląd jego wyglądu na aktywnej stronie.

Dodaj HTML + HubL

1. Wprowadź kod HTML szablonu. Dowiedz się więcej o dodawaniu plików CSS i JavaScript do szablonów z kodem niestandardowym.
2. Aby wyświetlić sposób renderowania HTML + HubL, włącz przełącznik Pokaż dane wyjściowe w lewym górnym rogu. Po prawej stronie otworzy się panel z podglądem renderowania.

Dodaj wymagany HTML + HubL

Niestandardowe szablony wymagają do działania określonych zmiennych HTML lub HubL. Jeśli brakuje którejkolwiek z tych wymaganych zmiennych, podczas próby opublikowania szablonu może pojawić się komunikat o błędzie.

• Szablony stron i blogów wymagają następujących zmiennych:

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• Szablony wiadomości e-mail wymagają następujących zmiennych, aby były zgodne z CAN-SPAM:

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• Szablony wiadomości e-mail wymagają następującego kodu do wyświetlania tekstu podglądu w niektórych klientach poczty e-mail:

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

Klonowanie szablonu do HTML

Oprócz tworzenia szablonów od podstaw, możesz także klonować szablony blogów, stron internetowych i stron docelowych metodą przeciągnij i upuść do HTML.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij nazwę szablonu, który chcesz sklonować.
3. Kliknij menu rozwijane Akcje i wybierz opcję Klonuj do HTML. Plik HTML zostanie utworzony w tym samym folderze, co oryginalny plik.

Podgląd i publikacja szablonu

Po utworzeniu szablonu możesz wyświetlić podgląd jego wyglądu na aktywnej stronie, a następnie opublikować go.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij nazwę szablonu, którego podgląd chcesz wyświetlić lub opublikować.
3. W prawym górnym rogu kliknij menu rozwijane Podgląd i wybierz opcję:
   • Jeśli wybierzesz Podgląd na żywo z opcjami wyświetlania, możesz wyświetlić podgląd szablonu tak, jak wygląda on na innych urządzeniach, wybierając ustawienie wstępne Viewport.
   • Jeśli wybierzesz opcję Podgląd bez opcji wyświetlania, możesz wyświetlić podgląd szablonu tylko w przeglądarkach.
4. Po zakończeniu kliknij przycisk Opublikuj zmiany.
5. Jeśli wystąpią jakiekolwiek błędy w kodzie, pojawi się komunikat o błędzie. Więcej informacji na temat tych błędów można znaleźć w konsoli błędów poniżej edytora kodu:

• • W komunikacie o błędzie u góry strony kliknij konsolę błędów, aby otworzyć konsolę poniżej edytora kodu.
  • Alternatywnie, przejdź do lewego dolnego rogu edytora kodu i kliknij Pokaż szczegóły.