nextein
1.0.0
next.jsに基づいた静的サイトジェネレーター
nextein 、 markdownとreactを使用して静的サイトを作成できるnext.js周辺のラッパーです。
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フォルダー（ 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スクリプトを追加してdevモードをpackage.jsonに実行します。json
"scripts" : {
"dev" : " next "
}開発サーバーを実行します
npm run devpackage.jsonに別のNPMスクリプトを追加して、サイトをエクスポートする
"scripts" : {
"dev" : " next " ,
"export" : " next build && next export "
}fetcherフェッチャーを使用して、マークダウンファイルから投稿とデータを取得します。
FetcherのgetPostsFilterByとgetDataFilterByメソッドにより、フィルター関数を渡すことができます。たとえば、 inCategory Filterを使用して、特定のカテゴリの投稿を取得できます。
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およびGetStaticPaths）を使用できます。
[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サブカテゴリに投稿を含めるためにtrue。デフォルト： 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は、ポストメタ情報（タイトル、ページ、カテゴリなど）を含むFrontMatterオブジェクトですdata.categoryは、投稿のカテゴリです。指定されていない場合、投稿がフォルダー内にある場合、 postsの下のディレクトリ構造が使用されます。data.date日付FrontMatterの日付またはファイル名またはファイルの作成日からの日付content 、特定のMIMETYPEのビルドプラグインによって作成されたポストコンテンツ（一般的には、HAST形式）の表現です。 { data , content } = post FrontMatterメタデータには、 nexteinが使用する定義されたプロパティはごくわずかです。
---
category : categoryOne
date : 2017-06-23
---
Post Content...
category ：カテゴリ名（オプション）date ：yyyy-mm-dd形式の日付文字列。投稿リストをソートするために使用されます。 （オプション）published ：この投稿をエントリから削除するようにfalseに設定します。name ：投稿ファイル名のみを読み取ります。存在する場合、日付は名前から削除されます。withNextein next.config.jsに適用されるラッパー構成関数。 nextein internal next.js configとともに、独自の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 ）である必要があります。
デフォルトの構成には次のものが含まれます。
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になります。 POSTオブジェクトにrawコンテンツを追加しないように、これをfalseします。position ：デフォルトでfalseになります。これをtrueして、コンテンツを投稿するためにポジション情報を追加します。rehype ：デフォルト[]にデフォルト。 rehype用のプラグインのセットを追加しますremark ：デフォルト[]に。 remark用のプラグインのセットを追加しますプロパティを使用して、ドラフト /未発表のエントリが表示されるのを防ぐことにより、投稿をフィルターします。
オプション：
field ：デフォルト'published'にデフォルト。ポストdataにfieldが存在するかどうかを確認し、 falseに設定した場合はフィルターをフィルターします。独自のプラグインを書くことができます。基本的に2つの異なるタイプ（ソースと変換）があります。ソースプラグインが呼び出され、投稿エントリが生成され、変換プラグインがそれらのエントリを受信し、とにかく投稿リストを変更、フィルタリング、追加、または変換できます。
プラグイン＆ライフキャイルデザインドキュメントを参照してください。
