Stwórz szablon z własnym kodem

Programiści mogą tworzyć od podstaw szablony blogów, stron internetowych, stron docelowych i wiadomości e-mail przy użyciu HTML i HubL. Można również sklonować układ szablonu za pomocą funkcji „przeciągnij i upuść” do formatu HTML, a następnie dostosować go jako szablon oparty na kodzie.

Więcej informacji na temat projektowania niestandardowych zasobów znajdziesz w naszej dokumentacji dla programistów.

Utwórz nowy plik HTML + HubL

1. Na koncie HubSpot kliknij opcję Więcej, a następnie przejdź do Treść > Design manager. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Treść > Design manager.
2. W górnej części okna wyszukiwania kliknij menu rozwijane Plik i wybierz opcję Nowy plik.

3. W oknie dialogowym kliknij menu rozwijane „Co chcesz dzisiaj stworzyć?” i wybierz opcję „HTML + HubL”.

4. W polu „Co tworzysz? ” wybierz jedną z opcji:
   • Szablon: określa układ i strukturę treści, które będą wyświetlane na stronach internetowych, stronach docelowych, 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 własnym kodem (strona, wpis na blogu/lista, wiadomość e-mail lub strona systemowa). Dowiedz się więcej o typach szablonów.
6. Wpisz nazwę pliku w polu „Nazwa pliku ”.
7. Aby zaktualizować lokalizację pliku, kliknij przyc isk Zmień w sekcji Lokalizacja pliku i wybierz folder.
8. Po zakończeniu kliknij „Utwórz”.

Dodaj kod HTML i HubL do szablonu

Po skonfigurowaniu nowego pliku zostaniesz przekierowany do edytora kodu, gdzie możesz dodać własny kod i wyświetlić podgląd tego, jak będzie on wyglądał na stronie w trybie podglądu na żywo.

Dodaj kod HTML + HubL

1. Wprowadź kod HTML dla szablonu. Dowiedz się więcej o dodawaniu plików CSS i JavaScript do szablonów z własnym kodem.
2. Aby wyświetlić, jak zostanie wyrenderowany kod HTML + HubL, włącz przełącznik Pokaż wynik w lewym górnym rogu. Po prawej stronie otworzy się panel z wyrenderowanym podglądem.

Dodaj wymagany kod HTML + HubL

Szablony z własnym kodem wymagają określonych zmiennych HTML lub HubL do prawidłowego działania. 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 przepisami 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, aby wyświetlać tekst podglądu w niektórych klientach poczty elektronicznej:

<!-- 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>

Sklonuj szablon do formatu HTML

Oprócz tworzenia szablonów od podstaw można również klonować szablony typu „przeciągnij i upuść” dla blogów, stron internetowych i stron docelowych do formatu HTML.

1. Na koncie HubSpot kliknij opcję Więcej, a następnie przejdź do Treść > Design manager. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Treść > Design manager.
2. W przeglądarce plików kliknij nazwę szablonu, który chcesz sklonować.
3. Kliknij menu rozwijane „Działania ” i wybierz opcję „Sklonuj do HTML”. Plik HTML zostanie utworzony w tym samym folderze co plik oryginalny.

Wyświetl podgląd i opublikuj szablon

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

1. Na koncie HubSpot kliknij opcję Więcej, a następnie przejdź do Treść > Design manager. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Treść > Design manager.
2. W przeglądarce kliknij nazwę szablonu, który chcesz wyświetlić w podglądzie lub opublikować.
3. W prawym górnym rogu kliknij menu rozwijane „Podgląd ” i wybierz jedną z opcji:
   • Jeśli wybierzesz opcję „Podgląd na żywo z opcjami wyświetlania”, możesz wyświetlić podgląd szablonu tak, jak będzie on wyglądał na innych urządzeniach, wybierając ustawienie „Viewport”.
   • Jeśli wybierzesz opcję „Podgląd bez opcji wyświetlania”, będziesz mógł wyświetlić podgląd szablonu wyłącznie w przeglądarkach.
4. Po zakończeniu kliknij opcję „Opublikuj zmiany”.
5. Jeśli występują jakiekolwiek błędy w kodzie, pojawi się komunikat o błędzie. Więcej informacji na temat tych błędów znajdziesz w konsoli błędów poniżej edytora kodu:

• • W komunikacie o błędzie u góry strony kliknij opcję „Konsola błędów”, aby otworzyć konsolę poniżej edytora kodu.
  • Możesz też przejść do lewego dolnego rogu edytora kodu i kliknąć „Pokaż szczegóły”.