Jak używać Notion jako CMS dla Twojej witryny Webflow [Samouczek]

Jedną z największych zalet Notion jest łatwość budowania na nim.

Za pomocą kilku kliknięć, ukośników i osadzeń możesz skonfigurować stronę i połączyć ją z kimś w mniej niż godzinę.

Jego wszechstronność i funkcjonalność to jeden z głównych powodów, dla których studenci, twórcy i start-upy uczynili z niego jedno z głównych narzędzi do tworzenia pięknych pulpitów nawigacyjnych, baz danych i wewnętrznych witryn wiki.

Co więcej, za pomocą produktów takich jak Super lub Fruition możesz nawet dołączyć niestandardową domenę do dowolnej ze swoich stron, tworząc oficjalne strony internetowe do użytku osobistego lub biznesowego.

Sam stworzyłem kilka stron Notion i uwielbiam, jak przystępne i wygodne jest dodawanie i edytowanie treści.

Mimo że jest niezwykle potężny, największym problemem, o którym słyszałem, jest to, że pod koniec dnia strona Notion nadal wygląda, no cóż, jak strona Notion.

Przekłada się to na wiele wizualnych ograniczeń i wad, takich jak:

  • Nieprzyjazny SEO
  • Brak najlepszej w swojej klasie wydajności, jeśli chodzi o kwestie techniczne, takie jak prędkość ładowania

To dwa główne powody, dla których wiele osób korzysta z Webflow, aby tworzyć bardziej oszałamiające doświadczenia internetowe.

Więc zadałem sobie pytanie – czy jest sposób, w jaki możemy wykorzystać elastyczność Notion, jednocześnie tworząc potężne środowisko front-endowe przy użyciu czegoś takiego jak Webflow?

Dzięki Notion API i Integromat wydaje się to być początkiem spełnienia marzeń i zamierzam wykorzystać ten post, aby dowiedzieć się, jak to zrobić.

W tym przypadku udzielę Ci instrukcji krok po kroku, jak stworzyć swoją pierwszą witrynę Webflow, która będzie obsługiwana przez Notion jako Twój CMS.

Będę również budować swoją własną stronę internetową razem z wami, gdy będziemy wymyślać, jak sprawić, by ta magia się wydarzyła!

Krok 1: Zdefiniuj cel i intencję strony internetowej

Pierwszym krokiem w procesie jest określenie, jaki rodzaj witryny chcesz stworzyć.

Na przykład, jeśli tworzysz stronę docelową, która nie wymaga częstego dodawania ani aktualizowania treści, dobrym pomysłem może być rozpoczęcie bezpośrednio od narzędzia takiego jak Carrd lub Webflow .

Jeśli szukasz katalogu lub rynku, polecam zacząć od Softr lub Pory .

Ale jeśli wyobrażasz sobie witrynę internetową, w której często aktualizujesz zawartość — pomyśl o wpisach na blogu, projektach, zdjęciach, a nawet aktualizacjach statusu — jesteś we właściwym miejscu.

W moim własnym projekcie nabrałem zwyczaju codziennego rysowania sztuki abstrakcyjnej (bardziej doodle niż sztuki, ale sztuka zależy od oka patrzącego!), a moim celem jest publikowanie jednego obrazu każdego dnia i posiadanie go pojawiają się na stronie internetowej.

Teraz, gdy masz już swoją wizję, zacznijmy budować.

Krok 2: Konfiguracja Notion

Pierwszym krokiem w tej konfiguracji jest utworzenie nowej bazy danych w Notion, którą będę nazywać „Notion CMS”.

Ta baza danych określi dynamiczną zawartość, którą chcesz umieścić w swojej witrynie.

Możesz także użyć istniejącej bazy danych, którą już masz, ale przeczytaj dalej, aby upewnić się, że przechwyciłeś wszystkie niezbędne konfiguracje, aby ta automatyzacja działała.

Następnie dodaj do swojej bazy danych następujące właściwości:

notion-cms-database

Wymagane są następujące właściwości:

  • Czas utworzenia : będzie używany do określenia, kiedy dodasz nowy element treści
  • Czas ostatniej aktualizacji : Aby określić, kiedy wprowadzasz jakiekolwiek zmiany lub edycje w elemencie treści
  • Identyfikator elementu Webflow : użyj właściwości typu „Tekst”. Skorzystamy z tego później, aby określić, do którego elementu należy się odnieść w Webflow
  • Publikować? : Użyj właściwości typu „Pole wyboru”. Użyjemy tego, aby określić, kiedy element Notion jest gotowy do wepchnięcia do Webflow

Jednocześnie polecam również uwzględnienie poniższych właściwości:

  • Obraz : użyj właściwości typu „URL” zamiast „Pliki i multimedia”. Więcej o tym później
  • Tekst : uwzględnij tyle właściwości tekstu, ile chcesz. Będziesz potrzebować oddzielnego pola tekstowego, jeśli potrzebujesz tytułu i treści/opisu
  • Tagi : możesz również dołączyć pole wielokrotnego wyboru, jeśli planujesz skorzystać z dodatkowych funkcji związanych z kategoryzacją lub filtrowaniem witryny

Wszystkie właściwości zostaną wykorzystane do określenia zawartości aktualizowanej na naszej głównej stronie internetowej, więc możesz dodawać dodatkowe, jeśli uznasz to za konieczne dla własnej witryny. Oto jak skonfigurowałem moją bazę danych .

Na koniec upewnij się, że przechodzisz do ustawień „Udostępnianie” i włączasz „Udostępnij w sieci”.

Dzięki temu Integromat będzie mógł się z nim połączyć w następnym kroku.

Krok 3: Konfiguracja Webflow

Teraz, gdy zakończyliśmy konfigurację Notion, nadszedł czas, aby skonfigurować również naszą główną witrynę Webflow (warto zauważyć, że nie będziesz potrzebować do tego płatnego planu).

Jeśli nie znasz Webflow lub nigdy nie budowałeś z nim strony internetowej, nie martw się, pomogę Ci zacząć.

Moim ulubionym sposobem na rozpoczęcie pracy z Webflow jest odwiedzenie sekcji z możliwością klonowania .

Tutaj możesz szukać inspiracji, zajrzeć za maskę, aby zobaczyć, jak powstają różne kompilacje, a nawet sklonować jeden do użycia.

W przypadku tego konkretnego projektu polecam zacząć od szablonów, które mają utworzone "Kolekcje CMS", a także mają prosty układ. Oto dwa, od których polecam zacząć:

Po wybraniu i sklonowaniu szablonu pierwszym krokiem jest upewnienie się, że „Kolekcja CMS” zawiera niestandardowe pola, które odpowiadają tym, które utworzyliśmy w Notion w kroku 1 tego przypadku użycia.

Gdy to zrobisz, jesteśmy gotowi do rozpoczęcia budowy automatyzacji w Integromacie!

Krok 4: Tworzenie pierwszego scenariusza Integromatu

Po przejściu do pulpitu Integromatu utwórz nowy scenariusz, wybierz aplikację Notion i wybierz moduł Notion „ Obserwuj elementy bazy danych ”.

Zanim zaczniemy bawić się danymi, musimy najpierw skonfigurować połączenie.

Kliknij „ Dodaj ” i postępuj zgodnie z instrukcjami. W polu konfiguracji modułu upewnij się, że wybrałeś bazę danych/stronę "Notion CMS", którą stworzyliśmy wcześniej!

Po nawiązaniu połączenia wróć do Notion, aby sprawdzić, czy zostało połączone z utworzoną bazą danych.

verify-notion-connection

Po weryfikacji wróć do modułu Notion w Integromacie i ustaw wyzwalacz, gdy zmieni się „Przez zaktualizowany czas”. Następnie zwiększ limit do wyższej liczby – powiedzmy 10.

Po zakończeniu konfiguracji modułu kliknij " Ok ".

Teraz jesteśmy gotowi do dodania modułu Webflow w kolejnym kroku.

Dodaj kolejny moduł do swojego scenariusza Integromat, wyszukaj aplikację Webflow i wybierz moduł „Utwórz element ”.

Tak jak poprzednio, zacznij od dodania połączenia webflow w polu konfiguracyjnym modułu.

Upewnij się, że wybrałeś odpowiednią witrynę Webflow, którą utworzyłeś w kroku 3!

Następnie wybierz z menu „ Identyfikator witryny ” i „ Identyfikator kolekcji ”.

Po zakończeniu powinna pojawić się lista pól w „Kolekcje CMS”, które utworzyliśmy w poprzednim kroku.

Teraz nadszedł czas, aby zmapować dane z Notion do Webflow!

Kliknij każdą z pustych przestrzeni i wybierz z listy dane, które chcesz wypełnić w Webflow.

Wszystkie dane, których szukasz zostaną zagnieżdżone albo w „Nieruchomości” tablicy, albo pod "Właściwości wartości”.

Zróbmy to razem, mapując tytuł elementu Notion do Webflow. Z modułu Notion wybierz Właściwości Wartość -> Nazwa -> Tekst -> Treść .

mapping-notion-title

Aby dowiedzieć się, czy to działa, wpisz dane testowe w bazie danych Notion.

Następnie uruchom automatyzację Integromatu jeden raz. Po wykonaniu tej czynności powinieneś zobaczyć element utworzony w Webflow.

Jeśli Ci się podoba, upewnij się, że wybrałeś „Tak” w sekcji „ Na żywo ”. Dzięki temu to, co zostało ukończone w Notion, zostanie automatycznie opublikowane w Webflow.

Na koniec dodamy moduł Notion „ Zaktualizuj element bazy danych ” do naszego scenariusza Integromat.

W przypadku „ Identyfikatora elementu bazy danych ” upewnij się, że mapujesz go na oryginalny, który mieliśmy z naszego modułu wyzwalacza (pierwszy moduł w twoim scenariuszu).

W sekcji „ Identyfikator elementu Webflow ” zmapujemy do „ Identyfikator elementu ” z modułu Webflow. Zobacz obraz poniżej w celach informacyjnych.

map-webflow-item-id

Zanim zakończymy ten pierwszy scenariusz, ostatnia rzecz: utwórz filtr między pierwszym modułem Notion a modułem Webflow.

Ustaw warunek filtra jako „ Pole wyboru ” równy „ prawda ”.

Dzięki temu będziemy przetwarzać tylko te elementy z Notion, które są gotowe do opublikowania.

published-filter

Krok 5: Tworzenie drugiego scenariusza Integromatu

Następny scenariusz pozwoli Ci automatycznie aktualizować zawartość Webflow za pomocą samego Notion.

Więc śmiało utwórz nowy scenariusz i dodaj moduł „Obserwuj elementy bazy danych ”. Skonfiguruj go dokładnie tak, jak w poprzednim scenariuszu.

Następnie dodaj moduł Webflow „ Aktualizuj element ” i zmapuj „ Element ” na właściwość „ Identyfikator elementu Webflow ”.

Następnie przejdź do mapowania pozostałych właściwości Notion na Webflow, tak jak to zrobiliśmy wcześniej.

I to wszystko!

notion-webflow-notion-scenario

Teraz za każdym razem, gdy dokonasz jakichkolwiek zmian w Notion, automatycznie wprowadzi on również zmiany w Webflow.

Jak to jest schludne?

Dodatkowe zaawansowane kroki

Jeśli myślisz o dynamicznym dodawaniu obrazów do swojej witryny Webflow, czytaj dalej.

Ponieważ Notion właśnie wydał swoje API nieco ponad 3 miesiące temu i wciąż jest w wersji Beta, należy pamiętać o kilku ograniczeniach (pełna dokumentacja dotycząca ograniczeń API znajduje się tutaj ).

Jedną z istotnych dla nas rzeczy jest to, że API Notion nie zawiera właściwości typu „Image”. Tak więc, aby mieć jakiekolwiek obrazy zawarte w witrynie Webflow, musisz użyć właściwości typu „URL” w swojej bazie danych Notion.

Jeśli pobierasz obraz z internetu (na przykład przez Google Images lub Unsplash), możesz pobrać adres URL za pomocą „Kopiuj adres obrazu”.

image -pulling

Jeśli jednak używasz obrazów poprzez przesłanie pliku, oto dwie zalecane opcje:

1. Dropbox

Jeśli znasz Dysk Google, powinieneś wiedzieć, jak utworzyć „udostępniony” link w Dropbox, aby inni mogli go przeglądać, a nawet pobierać.

Jednak ten udostępniony link nie pozwala nam na stworzenie obrazu w formacie, który można wykorzystać również w Webflow.

Aby utworzyć użyteczny adres URL obrazu, musisz umieścić „ dl=0 ” na końcu łącza udostępniania wygenerowanego przez Dropbox z „ raw=1 ”.

W celach informacyjnych oto zrzut ekranu .

Aby przekonwertować go na format rozpoznawany przez Webflow, zmień go na .

Nawiasem mówiąc, wszystko to możesz zrobić w Integromacie dynamicznie, korzystając z modułu Dropbox wraz z funkcją tekstową Replace().

dropbox-replace-text-function

2. Dodaj moduł, który może wygenerować dla Ciebie adres URL obrazu

Inną metodą jest wykorzystanie funkcji do utworzenia adresu URL obrazu w ramach przepływu pracy automatyzacji.

Jednym z typowych sposobów, aby to zrobić, jest użycie jednego z modułów mediów społecznościowych Integromatu (Instagram, Twitter lub Reddit).

Za każdym razem, gdy „opublikujesz” coś z obrazem jako załącznik do tych witryn za pośrednictwem Integromatu, pomoże to wygenerować adres URL obrazu.

Jako przykład pokażę, jak możesz to zrobić z Reddit.

W kroku 1 wspomniałem, że na potrzeby tego projektu stworzyłem stronę internetową, która jest codziennie aktualizowana rysunkami sztuki abstrakcyjnej.

Tak więc dla mojego przepływu pracy automatyzacji, kiedy publikuję w subreddit /AbstractArt , tworzy również nowy element bazy danych w Notion i dołącza do niego adres URL Reddit obrazu, który następnie jest publikowany w Webflow.

generate-image-url-module

Wniosek

Przeszedłeś przez całą drogę! Poklep się po plecach: oficjalnie zbudowałeś niestandardowy CMS Notion dla swojej witryny Webflow.

Korzystając z Integromatu, możesz stworzyć niestandardowy przepływ pracy, który pozwala robić rzeczy w bardziej elastyczny sposób, a także uprościć kroki związane z aktualizacją strony internetowej z potencjałem promowania tego, nad czym pracujesz regularnie.

Ostatecznie możesz powoli zacząć wyobrażać sobie, w jaki sposób Integromat może pomóc Ci stworzyć dynamiczną stronę internetową, która pozyska wszystkie najważniejsze dane o Twoich projektach, hobby, nawykach i pismach oraz znajdzie sposoby na kompilację, gromadzenie i publikowanie w sposób, który odzwierciedla najdokładniejsze przedstawienie tego, kim jesteś, co robiłeś, co robisz, a nawet jak myślisz .

Czekaj na więcej kompilacji, aby to urzeczywistnić i zautomatyzuj!