feat(blog): add blog feature with layout, list component and i18n support
- Create BlogLayout for consistent blog page structure - Implement BlogList component with responsive design and line-clamp - Add blog navigation to header with proper routing - Include i18n support for both English and Chinese - Add sample blog pages with mock data
This commit is contained in:
joyzhao
127
src/pages/zh/blog/index.astro
Normal file
127
src/pages/zh/blog/index.astro
Normal file
@@ -0,0 +1,127 @@
|
||||
---
|
||||
import BlogLayout from '../../../layouts/BlogLayout.astro';
|
||||
import BlogList from '../../../components/BlogList.tsx';
|
||||
|
||||
// 示例博客数据 - 暂时内联
|
||||
const blogPosts = [
|
||||
{
|
||||
id: 1,
|
||||
title: "精通 React Hooks：深入探索",
|
||||
description: "探索 React Hooks 在函数组件中管理状态和副作用的强大功能，包含实用示例和最佳实践。",
|
||||
image: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400&h=250&fit=crop&crop=center",
|
||||
date: "2025年5月10日",
|
||||
readTime: "5分钟阅读",
|
||||
tags: ["React", "JavaScript", "前端"],
|
||||
slug: "mastering-react-hooks"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "使用 Docker 扩展 Node.js 应用",
|
||||
description: "学习如何使用 Docker 容器化 Node.js 应用程序，实现生产环境中的无缝部署和可扩展性。",
|
||||
image: "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=400&h=250&fit=crop&crop=center",
|
||||
date: "2025年4月25日",
|
||||
readTime: "7分钟阅读",
|
||||
tags: ["Node.js", "Docker", "DevOps"],
|
||||
slug: "scaling-nodejs-docker"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "使用 Tailwind CSS 构建现代 UI",
|
||||
description: "探索如何使用 Tailwind CSS 实用类和组件模式创建美观、响应式的用户界面。",
|
||||
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=250&fit=crop&crop=center",
|
||||
date: "2025年4月15日",
|
||||
readTime: "6分钟阅读",
|
||||
tags: ["CSS", "Tailwind", "UI/UX"],
|
||||
slug: "modern-ui-tailwind"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "大型项目的 TypeScript 最佳实践",
|
||||
description: "在企业级应用中维护代码质量和开发者生产力的必备 TypeScript 模式和实践。",
|
||||
image: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=250&fit=crop&crop=center",
|
||||
date: "2025年3月30日",
|
||||
readTime: "8分钟阅读",
|
||||
tags: ["TypeScript", "JavaScript", "架构"],
|
||||
slug: "typescript-best-practices"
|
||||
}
|
||||
];
|
||||
|
||||
// 示例分类和标签
|
||||
const categories = ["React", "Node.js", "TailwindCSS", "TypeScript", "DevOps"];
|
||||
const tags = ["#React", "#JavaScript", "#前端", "#Node.js", "#Docker", "#DevOps", "#TailwindCSS", "#CSS", "#TypeScript"];
|
||||
|
||||
---
|
||||
|
||||
<BlogLayout title="博客 - 赵桂阳" description="深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。">
|
||||
<main class="min-h-screen">
|
||||
<!-- 头部区域 -->
|
||||
<div class="container mx-auto px-4 pt-24 pb-12">
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
|
||||
我的 <span class="text-purple-500">最新</span> 博客
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<div class="container mx-auto px-4 pb-20">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<!-- 侧边栏 -->
|
||||
<div class="lg:col-span-1 space-y-8">
|
||||
<!-- 分类 -->
|
||||
<div class="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border">
|
||||
<h3 class="text-xl font-semibold text-card-foreground mb-4 flex items-center">
|
||||
<svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14-7l2 2-2 2m2-2H9m10 0V9M5 19l2-2-2-2m2 2H3m2 0v2"></path>
|
||||
</svg>
|
||||
分类
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
{categories.map((category) => (
|
||||
<a href={`/zh/blog/categories/${category.toLowerCase()}`}
|
||||
class="block text-muted-foreground hover:text-purple-500 transition-colors duration-200">
|
||||
{category}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签 -->
|
||||
<div class="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border">
|
||||
<h3 class="text-xl font-semibold text-card-foreground mb-4 flex items-center">
|
||||
<svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
||||
</svg>
|
||||
# 标签
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{tags.map((tag) => (
|
||||
<a href={`/zh/blog/tags/${tag.slice(1).toLowerCase()}`}
|
||||
class="inline-block px-3 py-1 text-sm bg-muted text-muted-foreground rounded-full hover:bg-purple-500/20 hover:text-purple-500 transition-all duration-200">
|
||||
{tag}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 博客文章 -->
|
||||
<div class="lg:col-span-3">
|
||||
<BlogList posts={blogPosts} lang="zh" client:load />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</BlogLayout>
|
||||
|
||||
<style>
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user