notion blog

Begriff Blog

Dies ist ein Beispiel für das Next.js-Projekt, das die bevorstehende SSG (Static-Site-Generation) Support von Next.js mithilfe der privaten API des Begriffs für ein Backend zeigt.

Hinweis : In diesem Beispiel werden die experimentellen SSG -Hooks verwendet, die nur im nächsten Kanarischen Zweig verfügbar sind! Die in diesem Beispiel verwendeten APIs ändern sich im Laufe der Zeit. Da es eine private API- und experimentelle Funktionen verwendet, verwenden Sie auf eigenes Risiko, da sich diese Dinge jederzeit ändern können.

Live-Beispiel gehostet auf Vercel : https://notion-blog.vercel.app/

Erste Schritte

Um die Schritte zum Einrichten von Begriff anzuzeigen, um mit diesem Beispiel zu arbeiten, anzeigen Sie den Beitrag unter https://notion-blog.vercel.app/blog/my-first-post oder befolgen Sie die folgenden Schritte.

Bereitstellen Sie Ihre eigenen ein

Bereiten Sie Ihr eigenes Begriffsblog mit Vercel ein.

oder

1. Klon diesen Repo git clone https://github.com/ijjk/notion-blog.git
2. Projekt mit vc konfigurieren
3. Fügen Sie Ihre NOTION_TOKEN und BLOG_INDEX_ID als Umgebungsvariablen in Ihrem Projekt hinzu. Hier finden Sie, wie Sie diese Werte finden können
4. Führen Sie die endgültige Bereitstellung mit vc durch

HINWEIS: Wenn Sie lokal mit vc neu einsetzen und Sie keine Änderungen an der Quelle der Anwendung vorgenommen haben und nur im Begriff bearbeitet vc -f

Erstellen Ihrer Seitentabelle

Hinweis : Dies ist automatisch, wenn eine Tabelle beim ersten Besuch /blog nicht erkannt wird

Verwenden des vorkonfigurierten Skripts

1. Erstellen Sie eine leere Seite im Begriff
2. Klon diesen Repo git clone https://github.com/ijjk/notion-blog.git
3. Installieren Sie Abhängigkeiten cd notion-blog && yarn
4. Führen Sie das Skript aus, um table NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js zu erstellen.js finden Sie hier, um die ID für die neue Seite zu finden

Manuelles Erstellen der Tabelle

1. Erstellen Sie eine leere Seite im Begriff
2. Erstellen Sie auf dieser Seite eine Inline -Tabelle. Verwenden Sie keine vollständige Seite, da die Abfragetabelle unterschiedlich erforderlich ist
3. Fügen Sie die folgenden Felder der Tabelle hinzu

Die Tabelle sollte die folgenden Eigenschaften haben:

• Page : Dies ist die Seite des Blog -Beitrags
• Slug : Dies ist der Slug des Blog -Beitrags relativ zu /blog . Es sollte eine Texteigenschaft sein
• Published : Diese Filter -Blog -Beiträge in der Produktion sollte eine Checkbox -Eigenschaft sein
• Date : Dies ist der Zeitpunkt, an dem der Blog -Beitrag als veröffentlicht erscheint. Es sollte eine Datumseigenschaft sein
• Authors : Dies ist eine Liste von Begriffsnutzern, die den Beitrag geschrieben haben. Es sollte eine Personeneigenschaft sein

Blog -Index und Token erhalten

Um Ihren Blog -Indexwert zu erhalten, öffnen Sie den Begriff und navigieren Sie mit der oben erstellten Tabelle zur Vorstellungsseite. Auf dieser Seite sollten Sie in der Lage sein, die Seiten -ID von beiden zu erhalten:

• BLOG_INDEX_ID URL S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul wenn die URL Ihrer Seite https://www.notion.so/blog-5qv1qbuzm1wxm3h3szrqkupi7xjxtul ist
• Wenn Sie Ihre loadPageChunk öffnen und zur Registerkarte Netzwerk gehen, sollten Sie die Seite neu laden, wenn Sie eine Anfrage für loadPageChunk erneut laden. In der Nutzlastanforderung sollten Sie eine pageId sehen und dies ist Ihr BLOG_INDEX_ID

Um Ihren Begriffs -Token zu erhalten, öffnen Sie den Begriff und suchen Sie nach dem token_v2 -Cookie.

Erstellen von Blog -Posts

1. Klicken Sie im Begriff auf Neu in der Tabelle, um eine neue Zeile hinzuzufügen
2. Füllen Sie den Seitennamen, die Schnecke, das Datum und die Autoren ein
3. Fügen Sie oben im Inhaltsbereich die Inhalte hinzu, die Sie als Vorschau anzeigen möchten (behalten Sie diese unter 2 Absätzen).
4. Fügen Sie einen Teilerblock unter Ihrem Vorschaufel -Inhalt hinzu
5. Fügen Sie den Rest Ihres Inhalts unter den Teilerblock hinzu

Vor Ort laufen

Um das Projekt lokal auszuführen

1. Installieren Sie yarn
2. Expose NOTION_TOKEN and BLOG_INDEX_ID in your environment export NOTION_TOKEN='<your-token>' and export BLOG_INDEX_ID='<your-blog-index-id>' or set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>" for Windows
3. Führen Sie als nächstes im Entwicklungsmodus yarn dev aus
4. Erstellen und laufen im Produktionsmodus yarn build && yarn start

Credits

• Guillermo Rauch @Ruchg für die erste Idee
• Shu ding @shuding_ für die Designhilfe
• Luis Alvarez @luis_fades für Designhilfe und Fehlerfang