tailwind nextjs starter blog
v2.3.0
Dies ist eine nächste. Version 2 basiert auf dem nächsten App -Verzeichnis mit React Server -Komponente und verwendet ContentLayer, um Markdown -Inhalte zu verwalten.
Wahrscheinlich die feature-reichen Next.js Markdown-Blogging-Vorlage da draußen. Einfach konfigurierbar und anpassbar. Perfekt als Ersatz für vorhandene individuelle Blogs von Jekyll und Hugo.
Schauen Sie sich die folgende Dokumentation an, um loszulegen.
Mit Problemen konfrontiert? Überprüfen Sie die FAQ -Seite und suchen Sie zu früheren Themen. Fühlen Sie sich frei, ein neues Problem zu eröffnen, wenn zuvor keines veröffentlicht wurde.
Feature -Anfrage? Überprüfen Sie die vergangenen Diskussionen, um festzustellen, ob sie zuvor angesprochen wurde. Ansonsten können Sie einen neuen Diskussionsthread beginnen. Alle Ideen sind begrüßt!
HINWEIS : Dies sind Community -beigetragene Gabeln, die verschiedene Frameworks oder wesentliche Änderungen an der Codebasis verwenden - nicht offiziell unterstützt.
Astro Alternative - Rückenwind -Astro -Vorlage.
Remix-Run Alternative-Tailwind Remix-Run Starter Blog-Vorlage.
Internationalisierungsunterstützung - Vorlage mit i18n und Quellcode.
/resume -Seite zu rendern. (Quellcode)/snippets , /books -Seiten hinzu, fügen Sie ProfileCard , CareerTimeline -Komponenten und viele weitere hinzu.Verwenden der Vorlage? Fühlen Sie sich frei, eine PR zu erstellen und Ihr Blog dieser Liste hinzuzufügen.
Vielen Dank an die Community der Benutzer und Mitwirkenden der Vorlage! Wir akzeptieren hier keine neuen Blog -Listings mehr. Wenn Sie von Version 1 bis Version 2 aktualisiert haben, können Sie Ihr Blog aus dieser Liste entfernen und zu dem oben genannten hinzufügen.
mdx-embed wurde hinzugefügt, die Anzahl der Minuten anzeigen, Minuten lesen und mehr.Ich wollte meinen vorhandenen Blog auf das CSS von NextJs und Tailwind portieren, aber es gab keine einfache Schablone für die Verwendung, also habe ich mich entschlossen, einen zu erstellen. Das Design wird aus dem Tailwindlabs -Blog angepasst.
Ich wollte, dass es fast so featurziert reich ist
npx degit ' timlrx/tailwind-nextjs-starter-blog 'siteMetadata.js (seitenbezogene Informationen)next.config.js Wenn Sie einen anderen Analyseanbieter oder eine andere Kommentarlösung als GISCUS verwenden möchten.authors/default.md (Hauptautor)projectsData.tsheaderNavLinks.ts , um Navigationslinks anzupassenyarnBitte beachten Sie, dass Sie möglicherweise ausführen müssen, wenn Sie Windows verwenden:
$env :PWD = $( Get-Location ) .PathFühren Sie zunächst den Entwicklungsserver aus:
yarn devÖffnen Sie http: // localhost: 3000 mit Ihrem Browser, um das Ergebnis zu sehen.
Bearbeiten Sie das Layout in app oder Inhalten in data . Mit Live-Nachladeing haben die Seiten automatisch, während Sie sie bearbeiten.
data/siteMetadata.js - Enthält die meisten von den Site bezogenen Informationen, die für den Bedarf eines Benutzers geändert werden sollten.
data/authors/default.md - Standardautorinformationen (erforderlich). Zusätzliche Autoren können als Dateien in data/authors hinzugefügt werden.
data/projectsData.js - Daten, die zum Generieren von gestalteter Karte auf der Projektseite verwendet werden.
data/headerNavLinks.js - Navigationslinks.
data/logo.svg - Ersetzen Sie durch Ihr eigenes Logo.
data/blog - Ersetzen Sie durch Ihre eigenen Blog -Beiträge.
public/static - speichern Vermögenswerte wie Bilder und Favicons.
tailwind.config.js und css/tailwind.css - Tailwind -Konfiguration und Stylesheet, die geändert werden können, um das Gesamtaussehen und das Gefühl der Website zu ändern.
css/prism.css - steuert die mit den Codeblöcken verbundenen Stile. Fühlen Sie sich frei, es anzupassen und verwenden Sie Ihre bevorzugten Prismjs -Themen, z. B. Prism -Themen.
contentlayer.config.ts - Konfiguration für ContentLayer, einschließlich Definition von Inhaltsquellen und verwendeten MDX -Plugins. Weitere Informationen finden Sie unter ContentLayer -Dokumentation.
components/MDXComponents.js - Übergeben Sie Ihren eigenen JSX -Code oder reagieren Sie die Komponente, indem Sie ihn hier angeben. Sie können sie dann direkt in der Datei .mdx oder .md verwenden. Standardmäßig werden ein benutzerdefinierter Link, next/image , die Inhaltskomponente und ein Newsletter -Formular weitergegeben. Beachten Sie, dass die Komponenten standardmäßig exportiert werden sollten, um vorhandene Probleme mit Next.js.
layouts - Hauptvorlagen, die auf Seiten verwendet werden:
PostLayout , PostSimple und PostBanner . PostLayout ist das Standard -Spaltenlayout für 2 -Spalten mit Meta- und Autoreninformationen. PostSimple ist eine vereinfachte Version von PostLayout , während PostBanner ein Bannerbild bietet.ListLayout , das in Version 1 der Vorlage verwendete Layout mit einer Suchleiste und ListLayoutWithTags , die derzeit in Version 2 verwendet wird, die die Suchleiste auslässt, aber eine Seitenleiste mit Informationen zu den Tags enthält. app - Seiten zum Routen zu. Lesen Sie die nächste Dokumentation.JS -Dokumentation, um weitere Informationen zu erhalten.
next.config.js - Konfiguration im Zusammenhang mit Next.js. Sie müssen die Inhaltssicherheitsrichtlinie anpassen, wenn Sie Skripte, Bilder usw. aus anderen Domänen laden möchten.
Der Inhalt wird mit ContentLayer modelliert, sodass Sie Ihr eigenes Inhaltsschema definieren und es verwenden können, um typisierte Inhaltsobjekte zu generieren. Weitere Informationen finden Sie unter ContentLayer -Dokumentation.
Frontmatter folgt Hugos Standards.
In contentlayer.config.ts finden Sie eine aktuelle Liste der unterstützten Felder. Die folgenden Felder werden unterstützt:
title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)
Hier ist ein Beispiel für den Frontmatter eines Beitrags:
---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---
A pages.yml -Workflow ist bereits bereitgestellt. Wählen Sie einfach "GitHub -Aktionen" in: Settings > Pages > Build and deployment > Source .
Der einfachste Weg, die Vorlage bereitzustellen, besteht darin, auf Vercel bereitzustellen. Weitere Informationen finden Sie in der Next.JS -Bereitstellungsdokumentation.
NESTS.JS RUNTime Configures von Netlify ermöglicht die Funktionalität von Key Next.js auf Ihrer Website, ohne dass zusätzliche Konfigurationen erforderlich sind. Netlify generiert serverlose Funktionen, mit denen die NEXT.JS-Funktionen wie serverseitige Rendered (SSR) Seiten, inkrementelle statische Regeneration (ISR), next/images usw.
Weitere Informationen finden Sie unter NEXT.JS auf NetLify für vorgeschlagene Konfigurationswerte und weitere Details.
Laufen:
$ EXPORT=1 UNOPTIMIZED=1 yarn build Stellen Sie dann den generierten out ein oder führen Sie ihn lokal npx serve out .
Wichtig
Wenn Sie mit einem URL-Basispfad wie https://example.org/myblog bereitgestellt werden, benötigen Sie einen zusätzlichen BASE_PATH Shell-Var zum Befehl Build:
$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build => In Ihrem Code ${process.env.BASE_PATH || ''}/robots.txt druckt "/myblog/robots.txt" im out Build (oder nur /robots.txt if yarn dev , dh auf localhost: 3000)
Tipp
Alternativ zu UNOPTIMIZED=1 , um weiterhin next/image zu verwenden, können Sie einen alternativen Bildoptimierungsanbieter wie IMGIX, Cloudinary oder Akamai verwenden. Weitere Informationen finden Sie unter Dokumentation zur Bildoptimierung.
Erwägen Sie, die folgenden Funktionen zu entfernen, die nicht in einem statischen Build verwendet werden können:
headers() von next.config.js .api -Ordner und die Komponenten, die die serverseitige Funktion wie die Newsletter-Komponente aufrufen. Technisch gesehen nicht erforderlich und die Website erstellt erfolgreich, aber die APIs kann nicht verwendet werden, da sie serverseitige Funktionen sind. kbar -Suche anpassen?Verwenden der Vorlage? Unterstützen Sie diese Bemühungen, indem Sie einen Stern auf Github geben, Ihr eigenes Blog teilen und einen Shoutout auf Twitter geben oder ein Projektsponsor werden.
MIT © Timothy Lin
