72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
import Head from 'next/head'
|
|
import Navbar from '../../components/Navbar'
|
|
import Footer from '../../components/Footer'
|
|
import fs from 'fs'
|
|
import path from 'path'
|
|
import matter from 'gray-matter'
|
|
import { marked } from 'marked'
|
|
|
|
export default function Article({ article }) {
|
|
return (
|
|
<div className="container">
|
|
<Head>
|
|
<title>{article.title} - iBoard</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
|
|
<Navbar />
|
|
|
|
<main>
|
|
<div className="article-detail">
|
|
<h1 className="article-detail-title">{article.title}</h1>
|
|
<div className="article-detail-date">{article.date}</div>
|
|
<div className="article-detail-content" dangerouslySetInnerHTML={{ __html: article.contentHtml }} />
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export async function getStaticPaths() {
|
|
const articlesDirectory = path.join(process.cwd(), 'content', 'articles')
|
|
const fileNames = fs.readdirSync(articlesDirectory)
|
|
|
|
const paths = fileNames
|
|
.filter(fileName => fileName.endsWith('.md'))
|
|
.map(fileName => ({
|
|
params: { slug: fileName.replace('.md', '') }
|
|
}))
|
|
|
|
return {
|
|
paths,
|
|
fallback: false
|
|
}
|
|
}
|
|
|
|
export async function getStaticProps({ params }) {
|
|
const articlesDirectory = path.join(process.cwd(), 'content', 'articles')
|
|
const fullPath = path.join(articlesDirectory, `${params.slug}.md`)
|
|
const fileContents = fs.readFileSync(fullPath, 'utf8')
|
|
const { data, content } = matter(fileContents)
|
|
|
|
// 从文件名中提取日期
|
|
const dateMatch = params.slug.match(/^(\d{4}-\d{2}-\d{2})-/)
|
|
const date = dateMatch ? dateMatch[1] : ''
|
|
|
|
// 将markdown转换为HTML
|
|
const contentHtml = marked(content)
|
|
|
|
return {
|
|
props: {
|
|
article: {
|
|
id: params.slug,
|
|
title: data.title || params.slug.replace(/\d{4}-\d{2}-\d{2}-/, ''),
|
|
date,
|
|
contentHtml
|
|
}
|
|
}
|
|
}
|
|
}
|