丰富内容

pages/articles/[slug].js

@@ -0,0 +1,71 @@
+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
+      }
+    }
+  }
+}