Github style: 更新博客列表样式 · juzhiyuan/blog@1ad007d · GitHub
source link: https://github.com/juzhiyuan/blog/commit/1ad007d94a6a5164f95a46388fca6908635c97d1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
更新博客列表样式 · juzhiyuan/blog@1ad007d · GitHubPermalink
@@ -29,8 +29,9 @@ export const getAllPosts = () => {
slug: data.slug,
filePath,
title: data.title,
date: data.date,
};
});
return posts.filter(Boolean) as Pick<Post, "slug" | "filePath">[];
return posts.filter(Boolean).reverse() as Pick<Post, "slug" | "filePath">[];
};
@@ -1,5 +1,5 @@
import { GetStaticProps } from "next";
import { Container, Heading, Link } from "@chakra-ui/react";
import { Container, Heading, Link, Box, Text } from "@chakra-ui/react";
import Head from "next/head";
import { getAllPosts } from "../../helper";
@@ -19,11 +19,14 @@ const BlogList = ({ posts }: { posts: Post[] }) => {
<Head>
<title>博客</title>
</Head>
<Container>
<Container mt="4" mb="10">
{posts.map((post) => (
<Link href={`/blog/${post.slug}`} key={post.slug}>
<Heading fontSize="2xl">{post.title}</Heading>
</Link>
<Box key={post.slug} mb="3">
<Link href={`/blog/${post.slug}`}>
<Heading fontSize="2xl">{post.title}</Heading>
</Link>
<Text>{post.date}</Text>
</Box>
))}
</Container>
</>
@@ -17,3 +17,23 @@
.article a:link {
text-decoration: underline;
}
.article h1 {
font-size: 2em;
font-weight: bolder;
}
.article h2 {
font-size: 1.5em;
font-weight: bolder;
}
.article h3 {
font-size: 1.17em;
font-weight: bolder;
}
.article h4 {
font-size: 1em;
font-weight: bolder;
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK