nextein

Nextein

Generator situs statis yang berbasis di next.js

Situs | Dokumentasi | Pemandu

Apa itu?

nextein adalah pembungkus di sekitar next.js yang memungkinkan Anda untuk menulis situs statis menggunakan markdown dan react .

Persyaratan

NODEJS V10.X + Diperlukan untuk menjalankan perintah nextein .

Starter kit

Jika Anda ingin melompat ke proyek starter, periksa Nextein-starter

Memulai

Ada beberapa langkah yang harus Anda ikuti untuk mendapatkan situs Anda dan berjalan dengan nextein

• Buat proyek:

  • mkdir my-site
  • cd my-site
  • npm init -y

• Instal dependensi

  • npm i nextein next react react-dom

• Tambahkan file konfigurasi next.config.js

   const { withNextein } = require ( 'nextein/config' )
  
  module . exports = withNextein ( {
  
  } )

• Buat 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 >
    )
  } )

• Buat entri posting markdown di bawah folder posts ( 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.
  

• Tambahkan skrip NPM untuk menjalankan mode dev ke package.json Anda.json

   "scripts" : {
    "dev" : " next "
  }

• Jalankan server pengembangan

  • npm run dev
  • Buka http: // localhost: 3000

• Tambahkan skrip NPM lain ke package.json Anda.json untuk mengekspor situs

   "scripts" : {
    "dev" : " next " ,
    "export" : " next build && next export "
  }

Dokumentasi

fetcher

Gunakan Fetcher untuk mengambil posting dan data dari file penurunan harga Anda.

Metode getPostsFilterBy dan getDataFilterBy di Fetcher memungkinkan untuk lulus fungsi filter. Misalnya, kita dapat menggunakan filter inCategory untuk mengambil posting dalam kategori yang diberikan:

 import { getPostsFilterBy } from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'

//...
const blog = await getPostsFilterBy ( InCategory ( 'blog' ) )

getData dan getDataFilterBy hanya akan mengambil metadata yang dihasilkan untuk entri alih -alih seluruh pos.

Metode fetcher adalah cara yang nyaman untuk menentukan filter dan kemudian menggunakan getPosts dan getData dengan filter yang diterapkan.

 import fetcher from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'

//...
const { getPosts } = fetcher ( InCategory ( 'blog' ) )


//...
const blog = await getPosts ( )

Anda dapat menggunakan rute dinamis dan fungsi generator statis (GetStaticProps dan GetStaticPaths) dengan metode fetcher.

Contoh untuk Rute Dinamis [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 } ) {
  //...
}

Contoh untuk [[...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)

Fungsi filter yang akan diterapkan pada posting untuk mengambil posting dalam kategori tertentu.

• category : {String} Kategori untuk memfilter hasil.
• options : {Object} opsional
  • includeSubCategories: Boolean benar untuk memasukkan posting dalam sub kategori. Default: false

Kategori diselesaikan dengan struktur folder secara default. Ini berarti bahwa posting yang terletak di posts/categoryA/subOne akan memiliki kategori categoryA/subOne kecuali Anda menentukan nama kategori di frontmatter.

 import { getPosts } from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'

//...

const posts = await getPosts ( )
const homePosts = posts . filter ( inCategory ( 'home' ) )
  

Jika Anda ingin mengambil semua posting di bawah kategori tertentu, katakanlah categoryA yang akan mencakup semua yang di bawah subOne , gunakan opsi includeSubCategories: true .

 import { inCategory } from 'nextein/filters'

const categoryAPosts = posts
  . filter ( inCategory ( 'categoryA' , { includeSubCategories : true } ) )

Content

Komponen untuk membuat objek post . Komponen ini menerima content dari pos sebagai properti. Gunakan properti excerpt untuk hanya membuat paragraf pertama (ini berguna saat merender daftar posting).

• content : {Object} Markdown konten dalam format HAST untuk dirender. Ini disediakan oleh post.content
• excerpt : {Boolean} benar hanya membuat paragraf pertama. Opsional. Default: false
• renderers : {Object} Satu set renderer khusus untuk elemen penurunan harga dengan bentuk [tagName]: renderer .
• component : {String|React.Component} Komponen yang digunakan untuk node root.

 import Content from 'nextein/content'

//...

export default function PostPage ( { post } ) {
  return < Content { ... post } />
} 

Menggunakan renderers untuk mengubah/menata tag <p>

 const Paragraph = ( { children } ) => ( < p style = { { padding : 10 , background : 'silver' } } > { children } </ p > )

// Then in your render method ...

  < Content
    { ... post } 
    renderers = { {
      p : Paragraph 
    } }
  / >

post

• __id adalah pengidentifikasi unik yang dihasilkan oleh Nextein.
• data adalah objek FrontMatter berisi informasi meta pos (judul, halaman, kategori, dll)
  • data.category adalah kategori posting. Ketika tidak ditentukan, jika posting berada di dalam folder, struktur direktori di bawah posts akan digunakan.
  • data.date : JSON Tanggal dari Tanggal atau Tanggal Frontmatter di Nama File atau Tanggal Pembuatan File
• content adalah representasi konten posting (umumnya dalam format HAST) yang dibuat oleh plugin build untuk mimetype yang diberikan.

 { data , content } = post

Frontmatter

Hanya ada beberapa sifat yang ditentukan di metadata frontmatter yang digunakan oleh nextein

 ---
category : categoryOne
date : 2017-06-23

---

Post Content...

• category : Nama Kategori (Opsional)
• date : Tanggal string dalam format yyyy-mm-dd. Digunakan untuk mengurutkan daftar posting. (opsional)
• published : Setel ke false untuk menghapus posting ini dari entri.
• name : Baca hanya nama file postingan. Tanggal dihapus dari nama jika ada.

withNextein

Fungsi konfigurasi pembungkus untuk diterapkan ke next.config.js . Ini menyediakan cara nextein menambahkan konfigurasi next.js .

next.config.js

 const { withNextein } = require ( 'nextein/config' )

module . exports = withNextein ( {
  // Your own next.js config here
} ) 

Plugin

Anda juga dapat mendefinisikan plugin Nextein menggunakan konfigurasi withNextein :

 const { withNextein } = require ( 'nextein/config' )

module . exports = withNextein ( {
  nextein : {
    plugins : [
      //your nextein plugins here
    ]
  }
  // Your own next.js config here
} )

Konfigurasi nextein.plugins menerima array plugin dengan format berikut:

• [name] : Hanya string untuk menentukan plugin.
• [name, options] : String untuk menentukan objek opsi plugin dan plugin.
• { name, id, options } : Objek plugin. Bidang name diperlukan. Semua definitoin sebelumnya diubah menjadi format ini. id opsional, ketika disediakan memungkinkan beberapa contoh plugin yang sama.

name plugin harus menjadi plugin yang sudah dipasang sebelumnya ( nextein-plugin-markdown ), atau file lokal ( ./myplugins/my-awesome-plugin )

Plugin default

Konfigurasi default termasuk:

plugins: [
  [ 'nextein-plugin-source-fs' , { path : 'posts' , data : { page : 'post' } } ] ,
  'nextein-plugin-markdown' ,
  'nextein-plugin-filter-unpublished'
] 

nextein-plugin-source-fs

Baca file dari sistem file.

Opsi:

• path : Path to Read File dari.
• data : Data default untuk disahkan sebagai tambahan untuk setiap entri. Default ke {}
• includes : default ke **/*.* .
• ignore : Satu set file yang diabaikan. Daftar default meliputi:

   '**/.DS_Store' ,
  '**/.gitignore' ,
  '**/.npmignore' ,
  '**/.babelrc' ,
  '**/node_modules' ,
  '**/yarn.lock' ,
  '**/package-lock.json' 

Nextein-plugin-markdown

Render file penurunan harga.

Opsi:

• raw : Default ke true . Jadikan ini false untuk tidak menambahkan konten raw di objek POST.
• position : Default ke false . Buat ini true untuk menambahkan info posisi untuk memposting konten HAST.
• rehype : default ke [] . Tambahkan satu set plugin untuk rehype
• remark : default ke [] . Tambahkan satu set plugin untuk remark

nextein-plugin-filter-tidak diterbitkan

Posting filter dengan menggunakan properti untuk mencegah entri draft / tidak dipublikasikan ditampilkan.

Opsi:

• field : Default untuk 'published' . Akan memeriksa apakah suatu field hadir dalam data pos dan filter jika diatur ke false .

Plugin menulis

Anda dapat menulis plugin Anda sendiri. Pada dasarnya ada 2 jenis yang berbeda (sumber dan transformasi). Plugin sumber akan dipanggil untuk menghasilkan entri posting dan kemudian plugin transformasi akan menerima entri tersebut dan dapat memodifikasi, memfilter, menambahkan, atau mengubah daftar pos.

Lihat Dokumen Desain Plugin & Lifecyle.