91 lines
2.6 KiB
JavaScript
91 lines
2.6 KiB
JavaScript
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({ articles, totalPages, currentPage }) {
|
||
return (
|
||
<div className="container">
|
||
<Head>
|
||
<title>iBoard - 经济数据与理论</title>
|
||
<link rel="icon" href="/favicon.ico" />
|
||
</Head>
|
||
|
||
<Navbar />
|
||
|
||
<main>
|
||
<h1 className="title">
|
||
欢迎来到 iBoard
|
||
</h1>
|
||
|
||
<p className="description">
|
||
收集和整理经济数据，以策略为主体重新组织。
|
||
</p>
|
||
|
||
<div className="grid">
|
||
<div className="card">
|
||
<a href="#articles-section">
|
||
<h2>经济文章</h2>
|
||
</a>
|
||
<p>最新的经济分析和研究文章</p>
|
||
</div>
|
||
|
||
<div className="card">
|
||
<Link href="/data">
|
||
<h2>经济数据</h2>
|
||
</Link>
|
||
<p>深入分析经济数据和趋势</p>
|
||
</div>
|
||
|
||
<div className="card">
|
||
<Link href="/strategy">
|
||
<h2>策略研究</h2>
|
||
</Link>
|
||
<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
|
||
}
|
||
}
|
||
}
|