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 .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 폴더 아래에서 markdown 게시물 항목 생성 ( 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.
NPM 스크립트 추가 DEV 모드를 package.json 에 실행합니다.
"scripts" : {
"dev" : " next "
}개발 서버를 실행하십시오
npm run dev package.json 에 다른 NPM 스크립트를 추가하여 사이트를 내보내십시오.
"scripts" : {
"dev" : " next " ,
"export" : " next build && next export "
}fetcherFetcher를 사용하여 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 및 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 범주는 기본적으로 폴더 구조에 의해 해결됩니다. 즉, posts/categoryA/subOne 에 위치한 게시물은 FrontMatter에 카테고리 이름을 지정하지 않는 한 범주 categoryA/subOne 을 갖습니다.
import { getPosts } from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'
//...
const posts = await getPosts ( )
const homePosts = posts . filter ( inCategory ( 'home' ) )
특정 카테고리에서 모든 게시물을 검색하려면 subOne 의 모든 것들이 포함 includeSubCategories: true categoryA 를 사용한다고 가정 해 봅시다.
import { inCategory } from 'nextein/filters'
const categoryAPosts = posts
. filter ( inCategory ( 'categoryA' , { includeSubCategories : true } ) )Content post 객체를 렌더링하는 구성 요소. 이 구성 요소는 게시물에서 content 속성으로 수신합니다. excerpt 속성을 사용하여 첫 번째 단락 만 렌더링하십시오 (게시물 목록을 렌더링 할 때 유용합니다).
content : {Object} 마크 다운 내용은 렌더링 할 수 있습니다. 이것은 post.content 에서 제공합니다excerpt : {Boolean} 첫 번째 단락 만 렌더링하는 것이 참으로 참. 선택 과목. 기본값 : falserenderers : {Object} [tagName]: renderer 형식의 Markdown 요소에 대한 사용자 정의 렌더러 세트.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 : JSON 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 구성을 추가하는 방법을 제공합니다.
다음 .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 . 게시물 객체에 raw 내용을 추가하지 않도록이를 false 만드십시오.position : 기본값으로 false . 컨텐츠를 게시하기 위해 위치 정보를 추가하도록이를 true 만드십시오.rehype : [] 에 대한 기본값. rehype 용 플러그인 세트를 추가하십시오remark : 기본값 [] . remark 위해 플러그인 세트를 추가하십시오 초안 / 출판 된 항목을 표시하지 않기 위해 속성을 사용하여 포스트를 필터링합니다.
옵션 :
field : 기본값 'published' . false 로 설정된 경우 field 게시물 data 및 필터에 있는지 확인합니다.자신의 플러그인을 쓸 수 있습니다. 기본적으로 두 가지 다른 유형 (소스 및 변환)이 있습니다. 소스 플러그인은 게시물 항목을 생성하기 위해 호출되며 변환 플러그인은 해당 항목을 수신하고 어쨌든 게시물 목록을 수정, 필터, 추가 또는 변환 할 수 있습니다.
플러그인 및 Lifecyle 설계 문서를 참조하십시오.
