init
This commit is contained in:
砂糖
31
app/[locale]/blog/BlogCard.tsx
Normal file
31
app/[locale]/blog/BlogCard.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Link as I18nLink } from "@/i18n/routing";
|
||||
import { BlogPost } from "@/types/blog";
|
||||
import dayjs from "dayjs";
|
||||
import Image from "next/image";
|
||||
|
||||
export function BlogCard({ post, locale }: { post: BlogPost; locale: string }) {
|
||||
return (
|
||||
<I18nLink
|
||||
href={`/blog${post.slug}`}
|
||||
prefetch={false}
|
||||
className="bg-transparent rounded-lg hover:underline"
|
||||
>
|
||||
<div className="relative rounded shadow-md pt-[56.25%]">
|
||||
<Image
|
||||
src={post.image || "/placeholder.svg"}
|
||||
alt={post.title}
|
||||
fill
|
||||
className="object-cover shadow-sm w-full rounded hover:shadow-lg transition-shadow duration-200 h-[200p]"
|
||||
/>
|
||||
</div>
|
||||
<div className="py-3 flex-1 flex flex-col">
|
||||
<h2 className="text-lg font-500 line-clamp-2 flex-grow">
|
||||
{post.title}
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 text-sm mt-2">
|
||||
{dayjs(post.date).format("YYYY-MM-DD")}
|
||||
</p>
|
||||
</div>
|
||||
</I18nLink>
|
||||
);
|
||||
}
|
||||
35
app/[locale]/blog/ParallaxHero.tsx
Normal file
35
app/[locale]/blog/ParallaxHero.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function ParallaxHero() {
|
||||
const [y, setY] = useState(0);
|
||||
useEffect(() => {
|
||||
const onScroll = () => setY(window.scrollY);
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
const maxH = 420;
|
||||
const minH = 140;
|
||||
const delta = Math.max(0, Math.min(maxH - minH, y));
|
||||
const height = maxH - delta;
|
||||
const overlayOpacity = 0.25 + delta / (maxH - minH) * 0.15;
|
||||
const titleScale = 1 - delta / (maxH - minH) * 0.2;
|
||||
|
||||
return (
|
||||
<div className="relative" style={{ height: maxH }}>
|
||||
<div className="sticky top-0 z-40">
|
||||
<div className="relative w-full" style={{ height }}>
|
||||
<Image src="/placeholder.svg" alt="投资者关系" fill className="object-cover" priority />
|
||||
<div className="absolute inset-0" style={{ backgroundColor: `rgba(0,0,0,${overlayOpacity})` }} />
|
||||
<div className="absolute left-6 md:left-12 bottom-6 md:bottom-10 text-white" style={{ transform: `scale(${titleScale})`, transformOrigin: "left bottom" }}>
|
||||
<div className="text-2xl md:text-4xl font-semibold">投资者关系</div>
|
||||
<div className="text-lg md:text-2xl mt-1 opacity-90">Investor</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
156
app/[locale]/blog/[slug]/page.tsx
Normal file
156
app/[locale]/blog/[slug]/page.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { Callout } from "@/components/mdx/Callout";
|
||||
import MDXComponents from "@/components/mdx/MDXComponents";
|
||||
import { Locale, LOCALES } from "@/i18n/routing";
|
||||
import { getPosts } from "@/lib/getBlogs";
|
||||
import { constructMetadata } from "@/lib/metadata";
|
||||
import { BlogPost } from "@/types/blog";
|
||||
import fs from "fs/promises";
|
||||
import matter from 'gray-matter';
|
||||
import { Metadata } from "next";
|
||||
import { MDXRemote } from "next-mdx-remote-client/rsc";
|
||||
import { notFound } from "next/navigation";
|
||||
import path from "path";
|
||||
|
||||
type Params = Promise<{
|
||||
locale: string;
|
||||
slug: string;
|
||||
}>;
|
||||
|
||||
type MetadataProps = {
|
||||
params: Params;
|
||||
};
|
||||
|
||||
async function getMDXContent(locale: string, section: string): Promise<BlogPost> {
|
||||
const filePath = path.join(
|
||||
process.cwd(),
|
||||
"blogs",
|
||||
locale,
|
||||
`${section}.mdx`
|
||||
);
|
||||
|
||||
try {
|
||||
const content = await fs.readFile(filePath, "utf-8");
|
||||
|
||||
// 解析MDX文件的frontmatter和内容
|
||||
const { data: frontmatter, content: postContent } = matter(content);
|
||||
|
||||
// 构建BlogPost对象
|
||||
const blogPost: BlogPost = {
|
||||
locale,
|
||||
title: frontmatter.title || '',
|
||||
description: frontmatter.description,
|
||||
image: frontmatter.image,
|
||||
slug: frontmatter.slug || '',
|
||||
tags: frontmatter.tags,
|
||||
// 解析日期
|
||||
date: frontmatter.date ? new Date(frontmatter.date) : new Date(),
|
||||
// 设置visible默认值为published
|
||||
visible: frontmatter.visible || 'published',
|
||||
// 处理pin字段 - 如果有pin标记则为true，否则为false
|
||||
pin: frontmatter.pin === 'pin',
|
||||
// 去除frontmatter后的内容
|
||||
content: postContent.trim(),
|
||||
// 所有frontmatter作为metadata
|
||||
metadata: { ...frontmatter }
|
||||
};
|
||||
|
||||
return blogPost;
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Error reading MDX file: ${error}`);
|
||||
// 返回默认的BlogPost对象（符合类型要求）
|
||||
return {
|
||||
title: '',
|
||||
slug: '',
|
||||
date: new Date(),
|
||||
content: '',
|
||||
visible: 'published',
|
||||
pin: false,
|
||||
metadata: {},
|
||||
locale
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: MetadataProps): Promise<Metadata> {
|
||||
const { locale, slug } = await params;
|
||||
let post = await getMDXContent(locale, slug);
|
||||
|
||||
if (!post) {
|
||||
return constructMetadata({
|
||||
title: "404",
|
||||
description: "Page not found",
|
||||
noIndex: true,
|
||||
locale: locale as Locale,
|
||||
path: `/blog/${slug}`,
|
||||
canonicalUrl: `/blog/${slug}`,
|
||||
});
|
||||
}
|
||||
|
||||
return constructMetadata({
|
||||
page: "blog",
|
||||
title: post.title || '',
|
||||
description: post.description || '',
|
||||
images: [],
|
||||
locale: locale as Locale,
|
||||
path: `/blog/${slug}`,
|
||||
canonicalUrl: `/blog/${slug}`,
|
||||
});
|
||||
}
|
||||
|
||||
export default async function BlogPage({ params }: { params: Params }) {
|
||||
const { locale, slug } = await params;
|
||||
let post = await getMDXContent(locale, slug);
|
||||
|
||||
if (!post) {
|
||||
return notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full md:w-3/5 px-2 md:px-12">
|
||||
<h1 className="break-words text-4xl font-bold mt-6 mb-4">{post.title}</h1>
|
||||
{post.image && (
|
||||
<img src={post.image} alt={post.title} className="rounded-sm" />
|
||||
)}
|
||||
{post.tags && post.tags.split(",").length ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{post.tags.split(",").map((tag) => {
|
||||
return (
|
||||
<div
|
||||
key={tag}
|
||||
className={`rounded-md bg-gray-200 hover:!no-underline dark:bg-[#24272E] flex px-2.5 py-1.5 text-sm font-medium transition-colors hover:text-black hover:dark:bg-[#15AFD04C] hover:dark:text-[#82E9FF] text-gray-500 dark:text-[#7F818C] outline-none focus-visible:ring transition`}
|
||||
>
|
||||
{tag.trim()}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{post.description && <Callout>{post.description}</Callout>}
|
||||
<MDXRemote source={post?.content || ""} components={MDXComponents} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
let posts = (await getPosts()).posts;
|
||||
|
||||
// Filter out posts without a slug
|
||||
posts = posts.filter((post) => post.slug);
|
||||
|
||||
return LOCALES.flatMap((locale) =>
|
||||
posts.map((post) => {
|
||||
const slugPart = post.slug.replace(/^\//, "").replace(/^blog\//, "");
|
||||
|
||||
return {
|
||||
locale,
|
||||
slug: slugPart,
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
186
app/[locale]/blog/page.tsx
Normal file
186
app/[locale]/blog/page.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import ParallaxHero from "@/app/[locale]/blog/ParallaxHero";
|
||||
import TablerEyeFilled from "@/components/icons/eye";
|
||||
import { Link as I18nLink, Locale, LOCALES } from "@/i18n/routing";
|
||||
import { getPosts } from "@/lib/getBlogs";
|
||||
import { constructMetadata } from "@/lib/metadata";
|
||||
import dayjs from "dayjs";
|
||||
import { Metadata } from "next";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
type Params = Promise<{ locale: string }>;
|
||||
|
||||
type MetadataProps = {
|
||||
params: Params;
|
||||
};
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: MetadataProps): Promise<Metadata> {
|
||||
const { locale } = await params;
|
||||
const t = await getTranslations({ locale, namespace: "Blog" });
|
||||
|
||||
return constructMetadata({
|
||||
page: "Blog",
|
||||
title: t("title"),
|
||||
description: t("description"),
|
||||
locale: locale as Locale,
|
||||
path: `/blog`,
|
||||
canonicalUrl: `/blog`,
|
||||
});
|
||||
}
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
// searchParams,
|
||||
}: {
|
||||
params: Params;
|
||||
}) {
|
||||
const { locale } = await params;
|
||||
// const resolvedSearchParams = await searchParams;
|
||||
// const category = resolvedSearchParams.category as string || "";
|
||||
|
||||
let { posts } = await getPosts(locale);
|
||||
|
||||
const t = await getTranslations("Blog");
|
||||
|
||||
// const pageRaw = resolvedSearchParams.page as string || "1";
|
||||
// const page = Math.max(1, parseInt(10, 10));
|
||||
const page = 1;
|
||||
const pageSize = 10;
|
||||
const totalPages = Math.max(1, Math.ceil(posts.length / pageSize));
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
const pagePosts = posts.slice(start, end);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<ParallaxHero />
|
||||
|
||||
{/* 顶部操作区：标签 + 面包屑 */}
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mt-4">
|
||||
{/* <div className="flex gap-3">
|
||||
<button className="px-4 py-2 rounded-md border bg-white text-gray-700 shadow-sm hover:bg-gray-50">
|
||||
投资者保护
|
||||
</button>
|
||||
<button className="px-4 py-2 rounded-md border bg-white text-gray-700 shadow-sm hover:bg-gray-50">
|
||||
公司公告
|
||||
</button>
|
||||
</div> */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<I18nLink href="/" prefetch={false} className="hover:underline">
|
||||
首页
|
||||
</I18nLink>
|
||||
<span>/</span>
|
||||
<I18nLink href="/blog" prefetch={false} className="hover:underline">
|
||||
新闻中心
|
||||
</I18nLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 列表 */}
|
||||
<div className="mt-4">
|
||||
{pagePosts.map((post) => {
|
||||
const year = dayjs(post.date).format("YYYY");
|
||||
const monthDay = dayjs(post.date).format("MM-DD");
|
||||
const views = (post.metadata?.views as number) || 0;
|
||||
return (
|
||||
<I18nLink
|
||||
key={post.slug}
|
||||
href={`/blog/${post.slug}`}
|
||||
prefetch={false}
|
||||
className="block rounded-md mb-4 bg-gray-100 px-6 py-5 transition-all duration-200 shadow hover:bg-gray-200 hover:translate-y-[1px] hover:shadow-inner active:translate-y-[2px] active:shadow-inner focus:outline-none focus:ring-1 focus:ring-gray-300"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="flex-1 pr-4">
|
||||
<div className="text-base md:text-lg font-medium text-gray-800">
|
||||
{post.title}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-gray-600 flex items-center gap-1">
|
||||
<TablerEyeFilled className="w-4 h-4" />
|
||||
访问量：{views}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-24 md:w-28 text-right">
|
||||
<div className="text-xs text-gray-500">{year}</div>
|
||||
<div className="text-2xl md:text-3xl font-bold text-gray-500">{monthDay}</div>
|
||||
</div>
|
||||
</div>
|
||||
</I18nLink>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="my-6 flex items-center justify-center gap-2">
|
||||
<I18nLink
|
||||
href={`/blog?page=${Math.max(1, page - 1)}`}
|
||||
prefetch={false}
|
||||
className={`px-2.5 py-1 border rounded-sm text-sm ${page === 1 ? "bg-gray-100 text-gray-400" : "bg-white hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{"<"}
|
||||
</I18nLink>
|
||||
{(() => {
|
||||
const items: (number | string)[] = [];
|
||||
const showTotal = totalPages;
|
||||
const maxNumbers = 4;
|
||||
const startNum = 1;
|
||||
const endNum = Math.min(showTotal, maxNumbers);
|
||||
for (let n = startNum; n <= endNum; n++) items.push(n);
|
||||
if (showTotal > maxNumbers + 1) items.push("...");
|
||||
if (showTotal > maxNumbers) items.push(showTotal);
|
||||
return items.map((it, idx) => {
|
||||
if (typeof it === "string")
|
||||
return (
|
||||
<span key={`dot-${idx}`} className="px-2.5 py-1 text-sm text-gray-500">
|
||||
{it}
|
||||
</span>
|
||||
);
|
||||
const isActive = it === page;
|
||||
return (
|
||||
<I18nLink
|
||||
key={it}
|
||||
href={`/blog?page=${it}`}
|
||||
prefetch={false}
|
||||
className={`px-2.5 py-1 border rounded-sm text-sm ${isActive
|
||||
? "bg-red-600 text-white border-red-600"
|
||||
: "bg-white hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{it}
|
||||
</I18nLink>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
<I18nLink
|
||||
href={`/blog?page=${Math.min(totalPages, page + 1)}`}
|
||||
prefetch={false}
|
||||
className={`px-2.5 py-1 border rounded-sm text-sm ${page === totalPages ? "bg-gray-100 text-gray-400" : "bg-white hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{">"}
|
||||
</I18nLink>
|
||||
<span className="ml-2 text-sm text-gray-600">跳往</span>
|
||||
<form action="/blog" method="get" className="flex items-center gap-1">
|
||||
<input
|
||||
type="number"
|
||||
name="page"
|
||||
min={1}
|
||||
max={totalPages}
|
||||
defaultValue={page}
|
||||
className="w-14 h-7 border rounded-sm px-2 text-sm"
|
||||
/>
|
||||
<button className="px-2.5 h-7 border rounded-sm text-sm bg-white hover:bg-gray-50" type="submit">
|
||||
前往
|
||||
</button>
|
||||
<span className="text-sm text-gray-600">页</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return LOCALES.map((locale) => ({ locale }));
|
||||
}
|
||||
Reference in New Issue
Block a user