nextein
1.0.0
Ein statischer Site -Generator mit Sitz in Next.js
nextein ist ein Wrapper um next.js , mit dem Sie statische Websites mit markdown und react schreiben können.
NodeJS v10.x + ist erforderlich, um nextein -Befehle auszuführen.
Wenn Sie in einen Starterprojekt einspringen möchten, überprüfen Sie Nextein-Starter
Es gibt ein paar Schritte, die Sie befolgen müssen, um Ihre Website mit nextein zum Einsatz zu bringen
Ein Projekt erstellen:
mkdir my-sitecd my-sitenpm init -yAbhängigkeiten installieren
npm i nextein next react react-dom Fügen Sie eine Konfigurationsdatei next.config.js hinzu
const { withNextein } = require ( 'nextein/config' )
module . exports = withNextein ( {
} ) pages/index.js
import React from 'react'
import { getPosts } from 'nextein/fetcher'
import Content from 'nextein/content'
export async function getStaticProps ( ) {
return {
props : {
posts : await getPosts ( )
}
}
}
export default function Index ( { posts } ) {
return (
< section >
{
posts . map ( post => < Content { ... post } /> )
}
</ section >
)
} ) Erstellen Sie einen markdown -Posteintrag unter posts Ordner ( posts/my-first-post.md )
---
title : First Post
category : post
---
This is the first paragraph and it will be used as an excerpt when loaded in a ` <Content excerpt /> ` tag.
This paragraph should * not * appear in that list.
Fügen Sie NPM -Skripte hinzu, um Dev -Modus in Ihrem package.json zu führen.json
"scripts" : {
"dev" : " next "
}Führen Sie den Entwicklungsserver aus
npm run dev Fügen Sie Ihrem package.json ein weiteres NPM -Skript hinzu, um die Website zu exportieren
"scripts" : {
"dev" : " next " ,
"export" : " next build && next export "
}fetcherVerwenden Sie Fetcher, um die Beiträge und Daten aus Ihren Markdown -Dateien abzurufen.
Die Methoden getPostsFilterBy und getDataFilterBy in Fetcher ermöglichen es, Filterfunktionen zu übergeben. Zum Beispiel können wir den inCategory -Filter verwenden, um Beiträge in einer bestimmten Kategorie abzurufen:
import { getPostsFilterBy } from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'
//...
const blog = await getPostsFilterBy ( InCategory ( 'blog' ) ) Die getData und getDataFilterBy holen nur die für Einträge erzeugten Metadaten anstelle des gesamten Beitrags ab.
Die fetcher -Methode ist eine bequeme Möglichkeit, einen Filter zu definieren und dann die getPosts und getData mit einem angelegten Filter zu verwenden.
import fetcher from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'
//...
const { getPosts } = fetcher ( InCategory ( 'blog' ) )
//...
const blog = await getPosts ( )Sie können dynamische Routen und statische Generatorfunktionen (getStaticProps und GetstaticPaths) mit Fetcher -Methoden verwenden.
Beispiel für einen [name].js dynamische Route
import fetcher from 'nextein/fetcher'
const { getData , getPost } = fetcher ( /* filter */ )
export async function getStaticPaths ( ) {
const data = await getData ( )
return {
paths : data . map ( ( { name } ) => ( { params : { name } } ) ) ,
fallback : false
}
}
export async function getStaticProps ( { params } ) {
const post = await getPost ( params )
return { props : { post } }
}
export default function Post ( { post } ) {
//...
} Beispiel für eine [[...name]].js Dynamische Route:
import fetcher from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'
const { getData , getPosts , getPost } = fetcher ( inCategory ( 'guides' ) )
export async function getStaticPaths ( ) {
const data = await getData ( )
return {
paths : [ { params : { name : [ ] } } ,
... data . map ( ( { name } ) => ( { params : { name : [ name ] } } ) )
] ,
fallback : false
}
}
export async function getStaticProps ( { params } ) {
const posts = await getPosts ( )
const post = await getPost ( params ) // This can be null if not matching `...name`
return { props : { posts , post } }
}
export default function Guides ( { posts , post } ) {
//...
}inCategory(category, options)Filterfunktion, die auf Posts angewendet werden soll, um Beiträge in einer bestimmten Kategorie abzurufen.
category : {String} Die Kategorie zum Filtern der Ergebnisse.options : {Object} optionalincludeSubCategories: Boolean true, um Beiträge in Unterkategorien aufzunehmen. Standard: false Die Kategorien werden standardmäßig von der Ordnerstruktur aufgelöst. Dies bedeutet, dass ein Beitrag in posts/categoryA/subOne eine Kategorie -Kategorie categoryA/subOne enthält, es sei denn, Sie geben den Kategorienamen in FrontMatter an.
import { getPosts } from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'
//...
const posts = await getPosts ( )
const homePosts = posts . filter ( inCategory ( 'home' ) )
Wenn Sie alle Beiträge unter einer bestimmten Kategorie abrufen möchten, sagen wir categoryA , die alle unter subOne enthalten. Verwenden Sie die Optionen includeSubCategories: true .
import { inCategory } from 'nextein/filters'
const categoryAPosts = posts
. filter ( inCategory ( 'categoryA' , { includeSubCategories : true } ) )Content Komponente, um ein post zu rendern. Diese Komponente empfängt den content der Post als Eigenschaft. Verwenden Sie die excerpt , um nur den ersten Absatz zu rendern (dies ist nützlich, wenn Sie eine Liste von Beiträgen rendern).
content : {Object} Markdown -Inhalt im HI -Format zu rendern. Dies wird von post.content bereitgestelltexcerpt : {Boolean} , um nur den ersten Absatz zu rendern. Optional. Standard: falserenderers : {Object} Ein Satz benutzerdefinierter Renderer für Markdown -Elemente mit der Form von [tagName]: renderer .component : {String|React.Component} Die für den Stammknoten verwendete Komponente. import Content from 'nextein/content'
//...
export default function PostPage ( { post } ) {
return < Content { ... post } />
} Verwenden renderers zum Ändern/Stil des <p> -Tags
const Paragraph = ( { children } ) => ( < p style = { { padding : 10 , background : 'silver' } } > { children } </ p > )
// Then in your render method ...
< Content
{ ... post }
renderers = { {
p : Paragraph
} }
/ >post__id ist der von Nextein erzeugte eindeutige Kennung.data sind das FrontMatter -Objekt, das die Post -Meta -Informationen enthält (Titel, Seite, Kategorie usw.)data.category ist die Kategorie des Posts. Wenn nicht angegeben ist, wird die Verzeichnisstruktur unter posts verwendet, wenn sich der Beitrag in einem Ordner befindet.data.date : JSON -Datum vom Datum oder Datum von FrontMatter im Dateinamen oder Dateierstellung Datumcontent ist die Darstellung von Post -Inhalten (im Allgemeinen im HI -Format), das vom Build -Plugin für einen bestimmten Mimetyp erstellt wurde. { data , content } = post Es gibt nur wenige definierte Eigenschaften in der Frontmatter -Metadaten, die von nextein verwendet werden
---
category : categoryOne
date : 2017-06-23
---
Post Content...
category : Der Kategorienname (optional)date : Datumszeichenfolge im Format yyyy-mm-dd. Wird verwendet, um die Postliste zu sortieren. (optional)published : auf false einstellen, um diesen Beitrag aus Einträgen zu entfernen.name : Lesen Sie nur den Namen der Post -Dateinamen. Das Datum wird aus dem Namen entfernt, wenn sie vorhanden sind.withNextein Eine Wrapper -Konfigurationsfunktion, die in die next.config.js angewendet werden soll.config.js. Es bietet eine Möglichkeit, Ihre eigene next.js -Konfiguration zusammen mit nextein Internal Next.js -Konfiguration hinzuzufügen.
Next.config.js
const { withNextein } = require ( 'nextein/config' )
module . exports = withNextein ( {
// Your own next.js config here
} ) Sie können auch NexTein -Plugins mit der withNextein -Konfiguration definieren:
const { withNextein } = require ( 'nextein/config' )
module . exports = withNextein ( {
nextein : {
plugins : [
//your nextein plugins here
]
}
// Your own next.js config here
} ) Die Konfiguration nextein.plugins akzeptiert ein Array von Plugins mit den folgenden Formaten:
[name] : Nur eine Zeichenfolge, um das Plugin zu definieren.[name, options] : Eine Zeichenfolge zum Definieren des Plugin- und ein Plugins -Optionsobjekt.{ name, id, options } : Ein Plugin -Objekt. Das Feld name ist erforderlich. Alle früheren Definitoine werden in dieses Format umgewandelt. Die id ist optional, wenn die Bereitstellung mehrerer Instanzen desselben Plugins ermöglicht. Der Plugin name sollte ein vorinstalliertes Plugin ( nextein-plugin-markdown ) oder eine lokale Datei ( ./myplugins/my-awesome-plugin ) sein
Die Standardkonfiguration enthält:
plugins: [
[ 'nextein-plugin-source-fs' , { path : 'posts' , data : { page : 'post' } } ] ,
'nextein-plugin-markdown' ,
'nextein-plugin-filter-unpublished'
] Lesen Sie Dateien aus dem Dateisystem.
Optionen:
path : Pfad zum Lesen von Dateien von.data : Standarddaten, die für jeden Eintrag als extra übergeben werden sollen. Standard zu {}includes : Standard zu **/*.* .ignore : Eine Reihe ignorierter Dateien. Die Standardliste enthält: '**/.DS_Store' ,
'**/.gitignore' ,
'**/.npmignore' ,
'**/.babelrc' ,
'**/node_modules' ,
'**/yarn.lock' ,
'**/package-lock.json' Markierdateien rendern.
Optionen:
raw : Standard zu true . Machen Sie dies false , um den raw nicht im Post -Objekt hinzuzufügen.position : Standard zu false . Machen Sie dies true , um die Positionsinformationen hinzuzufügen, um Inhalte zu veröffentlichen.rehype : Standard an [] . Fügen Sie einen Satz von Plugins für rehype hinzuremark : Standard an [] . Fügen Sie eine Reihe von Plugins für remark hinzu Filterposten mithilfe einer Eigenschaft, um zu verhindern, dass Entwürfe / unveröffentlichte Einträge angezeigt werden.
Optionen:
field : Standard zu 'published' . Überprüft, ob ein field in data und Filter vorhanden ist, wenn sie auf false festgelegt sind.Sie können Ihre eigenen Plugins schreiben. Es gibt im Grunde 2 verschiedene Typen (Quelle und Transformationen). Source -Plugins werden aufgerufen, um die Beiträge zu generieren, und dann empfangen die Transformations -Plugins diese Einträge und können in der Postliste sowieso ändern, filtern, angehängt oder transformiert werden.
Siehe Plugins & Lifecyle Design -Dokument.
