Newsletter na Autopilocie: Podział szablonu na moduły

0:00W tej lekcji musimy jeszcze podjąć jedno

0:02działania związane z przygotowaniem szablonu na potrzeby automatyzacji.

0:06Mianowicie, mowa tutaj o podziale go na

0:09poszczególne moduły, które będą albo uzupełniane przez automatyzację z poziomu

0:13Airtable, albo w ogóle nie będą wyświetlane.

0:16Czyli przykładowo jeżeli mamy sekcję

0:18TL;DR w praktyce może okazać się, że nie będzie ona wyświetlana.

0:23W mojej opinii wszystko wygląda tutaj w porządku.

0:26Co prawda przestrzeń mogłaby być

0:27delikatnie mniejsza, aczkolwiek myślę, że nie ma z tym aż tak dużego problemu.

0:32Tym bardziej, że w momencie gdy sekcja TL;DR

0:34jest wyświetlana, również taka przestrzeń jest tutaj obecna.

0:39Następnie musimy też upewnić się, co się

0:41dzieje, gdy jakiś tekst jest nieco dłuższy niż początkowo zakładamy.

0:45Przykładowo tutaj nagłówek może być znacznie dłuższy niż tylko jedna linia.

0:50W związku z tym musiałem upewnić się, że posiadam odpowiednie style, które zwiększą

0:54interlinię na tyle, aby była wystarczająco czytelna i estetyczna.

0:59No i teraz jeżeli chodzi o pozostałe

1:01elementy, to również należy się tutaj upewnić co się stanie w sytuacji, gdy np.

1:06nasz link będzie zawierał nieco dłuższy

1:07tytuł, bądź w momencie, gdy cała sekcja z linkami nie będzie wyświetlana.

1:12W tym przypadku zachowujemy tutaj

1:14oddzielenie od głównej części treści, aczkolwiek przestrzeń, którą mamy tutaj na

1:18górze w porównaniu do tej, którą mamy na dole, jest nieco mniejsza.

1:22Oznacza to, że w sekcji zawierającej

1:24główną treść naszego szablonu możemy ustawić wewnętrzne margines dolne na zero.

1:29W tej sytuacji, jeżeli nawet sekcja z

1:31linkami się pojawi, sytuacja się nieco odmieni.

1:34Mianowicie przestrzeń na górze jest większa niż ta, którą mamy na dole.

1:39Zatem to, co musimy tutaj zrobić, to po prostu dodać do sekcji z linkami

1:44margines górny ustawiony na 35 pikseli.

1:47W takiej sytuacji odstępy są tutaj wyrównane, niezależnie od tego, czy sekcja

1:52z linkami zostaje wyświetlona, czy też nie.

1:55No i dokładnie o takie modyfikacje szablonu nam tutaj chodzi.

1:58Niewykluczone, że jeszcze w przyszłości przyjdzie nam go w jakiś sposób edytować.

2:02Natomiast myślę, że takie sytuacje będą miały miejsce dość rzadko.

2:07No i teraz ostatnim krokiem, który musimy

2:09tutaj zrobić będzie wygenerowanie wersji HTML oraz przejście do HTML formatter,

2:15aby sprawić, by ten kod był nieco bardziej czytelny.

2:18W tej chwili, jeżeli przejdziemy sobie do

2:20serwisu, jsbin.com, możemy wkleić tutaj treść naszego szablonu.

2:25Kolejnym krokiem będzie wydzielenie poszczególnych sekcji.

2:28Na szczęście wszystkie zaczynają się tutaj

2:31od odpowiednich komentarzy, aczkolwiek dodamy własne.

2:34W HTMLu komentarz dodajemy w następujący sposób.

2:38Tutaj będzie intro,

2:41a mniej więcej w tym miejscu będzie jego zakończenie.

2:44Upewnij się, że tak faktycznie jest

2:46poprzez wycięcie na chwilę tej sekcji.

2:49Rzeczywiście wszystko się tutaj zgadzałem, więc przechodzimy dalej.

2:52Tutaj mamy sekcję TL;DR, która kończy się dokładnie w tym miejscu.

2:58Zaraz potem zaczyna się główna treść, która kończy się dopiero tutaj.

3:04Zaraz pod nią zaczyna się kolejna, zawierająca linki.

3:08No i te linki kończą się

3:11dokładnie tutaj.

3:12Jak widzisz, początek oraz koniec sekcji odnajduję stosunkowo łatwo ze względu na

3:17wcięcia, które tutaj mamy dzięki HTML formatter.

3:21No i teraz ostatnia sekcja kończy się dokładnie tutaj.

3:24W związku z tym, że te wszystkie sekcje

3:26posiadają takie oto komentarze, będę w stanie wykorzystywać je w momencie

3:30tworzenia automatyzacji po to, aby generować je niezależnie w zależności od

3:35tego, jakie dane znajdują się bądź nie znajdują w Airtable.

3:39Teraz najlepiej będzie, jeżeli weźmiemy

3:41sobie ten cały kod HTML i zapiszemy w oddzielnym pliku.

3:45W moim przypadku wykorzystamy edytor

3:47Sublime Text, z pomocą którego dokonuję właśnie takich

3:51prostych modyfikacji kodu na potrzeby programowania.

3:54Zapisuję sobie teraz ten plik, ale jeszcze

3:57zanim zakończymy, to samo zrobię z jego wersją mjml

4:01ze względu na to, że w razie gdybym chciał

4:03wprowadzić w nim jakieś większe zmiany, to chciałbym to robić właśnie wykorzystując

4:06mjml, a nie edytując bezpośrednio kod HTML.

4:10Jednocześnie konwertowanie kodu HTML do

4:13składni mjml nie jest możliwe w sposób automatyczny

4:16w związku z tym musimy zachować oryginał.

4:21Jeden i drugi plik dołączam do zasobów tej lekcji.

4:24A teraz dziękuję Ci za uwagę i zapraszam do kolejnej.