Tworzenie niestandardowego szablonu

Programiści mogą tworzyć blogi, strony w witrynie internetowej, 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.

Przed rozpoczęciem

Zanim rozpoczniesz pracę 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życia.

Zrozumienie wymagań

• Upewnij się, że masz uprawnienia Narzędzia do projektowania do tworzenia i edycji szablonów w Design Manager.
• Zaleca się również posiadanie uprawnień Global content and theme settings i Website Settings, jeśli będziesz musiał edytować globalne zasoby internetowe i ustawienia bloga/strony.

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 wykorzystującego przeciąganie i upuszczanie.
• 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 dla wiadomości e-mail, strony internetowej i strony docelowej HubL.

Utwórz nowy plik HTML + HubL

• Na swoim koncie HubSpot przejdź do Treści > Design Manager.
• W górnej części lewej kolumny kliknij menu File i wybierz New file.

• W oknie dialogowym New file kliknij menu rozwijane What would you like to build today? i wybierz HTML + HubL, a następnie kliknij Next.

• W oknie dialogowym Set up your new HTML + HUBL template wprowadź szczegóły nowego pliku:
  • Wybierz opcję Co tworzysz?
    • Szablon: definiuje układ i strukturę treści, które będą wyświetlane na stronach w witrynie internetowej, stronach docelowych, we wpisach na blogu lub w wiadomościach e-mail.
    • Template Partial: to kod wielokrotnego użytku lub fragmenty kodu, które mogą być zawarte w wielu innych szablonach.
  • Kliknij menu rozwijane Typ szablonu i wybierz typ szablonu z kodem niestandardowym (strona, wpis na blogu/listing, wiadomość e-mail lub strona systemowa). Dowiedz się więcej o typach szablonów.
  • W polu Nazwa pliku wprowadź nazwę pliku.
  • Aby zaktualizować lokalizację pliku, kliknij przycisk Zmień w sekcji Lokalizacja pliku i wybierz folder.
• Kliknij przycisk Utwórz.

Dodaj HTML + HubL do swojego szablonu

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

Dodaj HTML + HubL

• Wprowadź kod HTML szablonu. Dowiedz się więcej o dodawaniu plików CSS i JavaScript do niestandardowego szablonu.
• Aby wyświetlić sposób renderowania szablonu HubL, kliknij, aby włączyć przełącznik Pokaż dane wyjściowe. Po prawej stronie otworzy się panel z podglądem renderowania.

Dodaj wymagany HubL

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

• Szablony stron i blogów wymagają następujących zmiennych:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• Szablony wiadomości e-mail wymagają następujących zmiennych, aby były zgodne z CAN-SPAM.
  • {{unsubscribe_link}} lub {{unsubscribe_link_all}} (uwzględnij co najmniej jeden)
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • {{site_settings.company_zip}}

Klonowanie szablonu do HTML

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

• Aby utworzyć zakodowaną wersję istniejącego szablonu:
  • Na swoim koncie HubSpot przejdź do Treści > Design Manager.

• • Na lewym pasku bocznym otwórz szablon, który chcesz sklonować.
  • 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żna wyświetlić podgląd jego wyglądu na aktywnej stronie, a następnie opublikować go.

• W prawym górnym rogu kliknij przycisk Podgląd.
• 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 ustawienia wstępne obszaru Obszar viewport.
• Jeśli wybierzesz opcję Podgląd bez opcji wyświetlania, możesz wyświetlić podgląd szablonu tylko w przeglądarkach.
• Po zakończeniu edycji kliknij przycisk Opublikuj zmiany w prawym górnym rogu.

• 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 dolnej części edytora kodu i kliknij Pokaż szczegóły.