丰富内容

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
+      }
+    }
+  }
+}

pages/index.js

@@ -2,8 +2,9 @@ import Head from 'next/head'
 import Link from 'next/link'
 import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
+import { getPagedArticles } from '../utils/articleUtils'
 
-export default function Home() {
+export default function Home({ articles, totalPages, currentPage }) {
   return (
     <div className="container">
       <Head>
@@ -24,7 +25,9 @@ export default function Home() {
         
         <div className="grid">
           <div className="card">
-            <h2>经济文章</h2>
+            <a href="#articles-section">
+              <h2>经济文章</h2>
+            </a>
             <p>最新的经济分析和研究文章</p>
           </div>
           
@@ -42,9 +45,46 @@ export default function Home() {
             <p>基于经济理论的数据分析框架</p>
           </div>
         </div>
+        
+        <section id="articles-section" className="articles-section">
+        <h5 className="section-title">看经济</h5>
+          <div className="articles-grid">
+            {articles.map((article) => (
+              <Link key={article.id} href={`/articles/${article.id}`} className="article-card">
+                <div className="article-date">{article.date}</div>
+                <h3 className="article-title">{article.title}</h3>
+                <p className="article-excerpt">{article.excerpt}</p>
+              </Link>
+            ))}
+          </div>
+          
+          {totalPages > 1 && (
+            <div className="pagination">
+              {Array.from({ length: totalPages }, (_, index) => (
+                <Link key={index + 1} href={`/?page=${index + 1}`} className={`page-link ${currentPage === index + 1 ? 'active' : ''}`}>
+                  {index + 1}
+                </Link>
+              ))}
+            </div>
+          )}
+        </section>
       </main>
       
       <Footer />
     </div>
   )
 }
+
+export async function getServerSideProps({ query }) {
+  const page = parseInt(query.page) || 1
+  const { articles, total, totalPages } = getPagedArticles(page, 5)
+  
+  return {
+    props: {
+      articles,
+      total,
+      totalPages,
+      currentPage: page
+    }
+  }
+}