nextein
1.0.0
Next.js中的靜態站點生成器
nextein是next.js周圍的包裝器，它允許您使用markdown和react編寫靜態站點。
nodejs v10.x +運行nextein命令。
如果您想跳入一個入門項目，請檢查NextEin-Starter
您必須遵循幾個步驟，以使您的網站啟動並運行nextein
創建一個項目：
mkdir my-sitecd my-sitenpm init -y安裝依賴項
npm i nextein next react react-dom添加next.config.js配置文件
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 >
)
} )在posts Folder（ posts/my-first-post.md ）下創建一個markdown帖子條目
---
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.
添加NPM腳本以將開發模式運行到您的package.json
"scripts" : {
"dev" : " next "
}運行開發服務器
npm run dev將另一個NPM腳本添加到您的package.json 。
"scripts" : {
"dev" : " next " ,
"export" : " next build && next export "
}fetcher使用Fetcher從Markdown文件中檢索帖子和數據。
Fetcher中的getPostsFilterBy和getDataFilterBy方法允許傳遞過濾功能。例如，我們可以使用inCategory過濾器在給定類別中檢索帖子：
import { getPostsFilterBy } from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'
//...
const blog = await getPostsFilterBy ( InCategory ( 'blog' ) ) getData和getDataFilterBy將僅檢索為條目而不是整個帖子生成的元數據。
fetcher方法是定義過濾器，然後在應用過濾器中使用getPosts和getData的便捷方法。
import fetcher from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'
//...
const { getPosts } = fetcher ( InCategory ( 'blog' ) )
//...
const blog = await getPosts ( )您可以使用Fetcher方法使用動態路由和靜態生成器功能（GetStaticProps和Getstatic Pathers ）。
[name].js動態路線的示例
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 } ) {
//...
} [[...name]].js動態路線：
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)過濾功能將應用於帖子以檢索給定類別中的帖子。
category ： {String}要過濾結果的類別。options ： {Object}可選includeSubCategories: Boolean ture，將帖子包含在子類別中。默認值： false默認情況下，文件夾結構可以解決類別。這意味著，除非您在FrontMatter中指定類別名稱，否則位於posts/categoryA/subOne的帖子將具有categoryA/subOne
import { getPosts } from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'
//...
const posts = await getPosts ( )
const homePosts = posts . filter ( inCategory ( 'home' ) )
如果您想檢索某個類別下的所有帖子，則假設將包括所有subOne下的所有帖子，請使用categoryA選項” includeSubCategories: true 。
import { inCategory } from 'nextein/filters'
const categoryAPosts = posts
. filter ( inCategory ( 'categoryA' , { includeSubCategories : true } ) )Content渲染post對象的組件。該組件作為屬性從帖子中接收content 。使用excerpt屬性僅渲染第一段（在呈現帖子列表時，這很有用）。
content ： {Object}以HAST格式呈現的標記內容。這是由post.content提供的excerpt ： {Boolean}真正僅渲染第一段。選修的。默認值： falserenderers ： {Object}一組用於標記元素的自定義渲染器，其形式為[tagName]: renderer 。component ： {String|React.Component}用於根節點的組件。 import Content from 'nextein/content'
//...
export default function PostPage ( { post } ) {
return < Content { ... post } />
} 使用renderers更改/樣式<p>標籤
const Paragraph = ( { children } ) => ( < p style = { { padding : 10 , background : 'silver' } } > { children } </ p > )
// Then in your render method ...
< Content
{ ... post }
renderers = { {
p : Paragraph
} }
/ >post__id是NextEin生成的唯一標識符。data是前材料對象包含郵政元信息（標題，頁面，類別等）data.category是帖子的類別。如果未指定，如果帖子在文件夾內，則將使用posts下的目錄結構。data.date的日期來自FrontMatter的文件名或文件創建日期的日期或日期content是由構建插件為給定的模擬類型創建的POST內容（通常為HAST格式）的表示。 { data , content } = postnextein使用的前元元數據中只有幾個定義的屬性
---
category : categoryOne
date : 2017-06-23
---
Post Content...
category ：類別名稱（可選）date ：YYYY-MM-DD格式的日期字符串。用於排序帖子列表。 （選修的）published ：設置為false以從條目中刪除此帖子。name ：僅閱讀帖子名稱。如果存在，將從名稱中刪除日期。withNextein包裝器配置函數要應用於next.config.js 。它提供了一種添加您自己的next.js配置以及nextein Internal next.js配置的方法。
next.config.js
const { withNextein } = require ( 'nextein/config' )
module . exports = withNextein ( {
// Your own next.js config here
} ) 您還可以使用withNextein配置來定義NextEin插件：
const { withNextein } = require ( 'nextein/config' )
module . exports = withNextein ( {
nextein : {
plugins : [
//your nextein plugins here
]
}
// Your own next.js config here
} ) nextein.plugins配置接受以下格式的插件數組：
[name] ：只是一個字符串來定義插件。[name, options] ：一個字符串來定義插件和插件選項對象。{ name, id, options } ：插件對象。需要name字段。所有先前的定義蛋白都轉化為這種格式。 id是可選的，當提供時允許多個實例相同的插件。插件name應為預安裝的插件（ nextein-plugin-markdown ）或本地文件（ ./myplugins/my-awesome-plugin myplugins/my-waweshy-plugin）
默認配置包括：
plugins: [
[ 'nextein-plugin-source-fs' , { path : 'posts' , data : { page : 'post' } } ] ,
'nextein-plugin-markdown' ,
'nextein-plugin-filter-unpublished'
] 從文件系統讀取文件。
選項：
path ：從讀取文件的路徑。data ：默認數據將作為每個條目額外傳遞。默認為{}includes ：默認為**/*.* 。ignore ：一組忽略的文件。默認列表包括： '**/.DS_Store' ,
'**/.gitignore' ,
'**/.npmignore' ,
'**/.babelrc' ,
'**/node_modules' ,
'**/yarn.lock' ,
'**/package-lock.json' 渲染標記文件。
選項：
raw ：默認為true 。使此false以不在郵政對像中添加raw內容。position ：默認為false 。使此true添加位置信息以發佈內容HAST。rehype ：默認為[] 。添加一組插件以進行rehyperemark ：默認為[] 。添加一組插件進行remark 通過使用屬性來防止顯示草稿 /未發表條目的過濾柱。
選項：
field ：默認為'published' 。將檢查郵data中是否存在field ，並在設置為false中過濾。您可以編寫自己的插件。基本上有2種不同類型（源和轉換）。源插件將被調用以生成帖子條目，然後轉換插件將接收這些條目，並可以在帖子列表中修改，過濾，附加或變換。
請參閱插件和生命系列設計文檔。
