feat: a2
This commit is contained in:
1198
.qoder/quests/personal-blog-design.md
Normal file
1198
.qoder/quests/personal-blog-design.md
Normal file
File diff suppressed because it is too large
Load Diff
166
IMPLEMENTATION.md
Normal file
166
IMPLEMENTATION.md
Normal file
@@ -0,0 +1,166 @@
|
||||
# 个人博客实现总结
|
||||
|
||||
## 项目概述
|
||||
|
||||
基于设计文档成功实现了一个现代化、美观的个人博客系统,使用 Astro + SolidJS 技术栈。
|
||||
|
||||
## 已实现功能
|
||||
|
||||
### 核心页面
|
||||
- ✅ **首页**: Hero 区域 + 文章卡片列表
|
||||
- ✅ **文章详情页**: 完整的 Markdown 渲染和样式
|
||||
- ✅ **关于页面**: 个人简介、技能标签云、联系方式
|
||||
|
||||
### 核心组件
|
||||
- ✅ **Layout**: 基础布局,支持自定义标题和描述
|
||||
- ✅ **BaseHeader**: 导航栏,包含主题切换功能
|
||||
- ✅ **BaseFooter**: 页脚,版权信息和社交链接
|
||||
- ✅ **ThemeToggle**: 明暗主题切换(SolidJS 组件)
|
||||
- ✅ **PostCard**: 文章卡片,带悬停效果
|
||||
- ✅ **Tag**: 彩色标签,自动配色
|
||||
|
||||
### 设计系统
|
||||
- ✅ **CSS 变量**: 完整的色彩、字体、间距、阴影、圆角定义
|
||||
- ✅ **明暗主题**: 支持主题切换,保存到 localStorage
|
||||
- ✅ **响应式设计**: 适配移动端、平板和桌面
|
||||
- ✅ **动画过渡**: 统一的过渡效果
|
||||
|
||||
### 内容管理
|
||||
- ✅ **Content Collections**: 使用 Astro 的类型安全内容管理
|
||||
- ✅ **示例文章**: 5 篇高质量示例博客文章
|
||||
- ✅ **Markdown 样式**: 完整的 Markdown 元素样式优化
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **框架**: Astro 5.15.8
|
||||
- **UI 库**: SolidJS 1.9.10
|
||||
- **语言**: TypeScript
|
||||
- **包管理**: PNPM
|
||||
- **Node 版本**: 22.21.1 (Volta)
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
blog/
|
||||
├── src/
|
||||
│ ├── components/ # 组件
|
||||
│ │ ├── BaseHeader.astro
|
||||
│ │ ├── BaseFooter.astro
|
||||
│ │ ├── ThemeToggle.tsx
|
||||
│ │ ├── PostCard.astro
|
||||
│ │ └── Tag.astro
|
||||
│ ├── content/ # 内容
|
||||
│ │ ├── config.ts # Content Collections 配置
|
||||
│ │ └── posts/ # 博客文章
|
||||
│ │ ├── welcome.md
|
||||
│ │ ├── css-variables.md
|
||||
│ │ ├── astro-introduction.md
|
||||
│ │ ├── typescript-best-practices.md
|
||||
│ │ └── responsive-design.md
|
||||
│ ├── layouts/ # 布局
|
||||
│ │ └── Layout.astro
|
||||
│ ├── pages/ # 页面路由
|
||||
│ │ ├── index.astro # 首页
|
||||
│ │ ├── about.astro # 关于页面
|
||||
│ │ └── posts/
|
||||
│ │ └── [...slug].astro # 文章详情页
|
||||
│ ├── styles/ # 样式
|
||||
│ │ ├── base.css # 设计系统
|
||||
│ │ └── reset.css
|
||||
│ └── consts.ts # 配置常量
|
||||
├── astro.config.mjs # Astro 配置
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## 设计特色
|
||||
|
||||
### 视觉设计
|
||||
- **现代简约**: 简洁的设计语言,突出内容
|
||||
- **优雅配色**: 和谐的明暗双主题
|
||||
- **流畅交互**: 平滑的动画过渡
|
||||
- **渐变元素**: Hero 区域标题渐变效果
|
||||
|
||||
### 用户体验
|
||||
- **快速加载**: 利用 Astro 的静态生成
|
||||
- **主题切换**: 支持明暗模式,跟随系统偏好
|
||||
- **响应式**: 完美适配各种设备
|
||||
- **易读排版**: 舒适的行高、字号和行宽
|
||||
|
||||
### 技术亮点
|
||||
- **类型安全**: Content Collections 提供类型检查
|
||||
- **SEO 友好**: 正确的 meta 标签和语义化 HTML
|
||||
- **性能优化**: 预渲染静态页面
|
||||
- **可维护性**: 组件化设计,CSS 变量系统
|
||||
|
||||
## 启动项目
|
||||
|
||||
```bash
|
||||
# 安装依赖
|
||||
pnpm install
|
||||
|
||||
# 启动开发服务器
|
||||
pnpm dev
|
||||
|
||||
# 构建生产版本
|
||||
pnpm build
|
||||
|
||||
# 预览构建结果
|
||||
pnpm preview
|
||||
```
|
||||
|
||||
## 访问地址
|
||||
|
||||
- 本地开发: http://localhost:4322
|
||||
- 首页: http://localhost:4322/
|
||||
- 关于: http://localhost:4322/about
|
||||
- 文章示例: http://localhost:4322/posts/welcome
|
||||
|
||||
## 自定义配置
|
||||
|
||||
编辑 `/src/consts.ts` 修改博客配置:
|
||||
|
||||
```typescript
|
||||
export const metadata = {
|
||||
siteTitle: "你的博客名称",
|
||||
siteDescription: "你的博客描述",
|
||||
author: "你的名字",
|
||||
email: "your-email@example.com",
|
||||
githubUrl: "https://github.com/yourusername",
|
||||
// ... 更多配置
|
||||
}
|
||||
```
|
||||
|
||||
## 添加新文章
|
||||
|
||||
1. 在 `/src/content/posts/` 创建新的 `.md` 文件
|
||||
2. 添加 frontmatter:
|
||||
|
||||
```markdown
|
||||
---
|
||||
title: "文章标题"
|
||||
date: 2024-11-21
|
||||
summary: "文章摘要"
|
||||
tags: ["标签1", "标签2"]
|
||||
---
|
||||
|
||||
文章内容...
|
||||
```
|
||||
|
||||
3. 文章会自动出现在首页列表
|
||||
|
||||
## 主题定制
|
||||
|
||||
修改 `/src/styles/base.css` 中的 CSS 变量:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--accent-color: #0066FF; /* 主题色 */
|
||||
--text-h1: 36px; /* 标题字号 */
|
||||
--space-md: 16px; /* 间距 */
|
||||
/* ... 更多变量 */
|
||||
}
|
||||
```
|
||||
|
||||
## 总结
|
||||
|
||||
成功按照设计文档实现了一个功能完整、美观现代的个人博客系统。所有核心功能都已实现并测试通过,可以直接使用或进一步定制。
|
||||
@@ -1,28 +1,107 @@
|
||||
<style>
|
||||
footer {
|
||||
background-color: #1a1a1a;
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: aliceblue;
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
color: #f9f8f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
---
|
||||
import { metadata } from "@/consts";
|
||||
const { siteTitle, icpNumber, githubUrl } = metadata;
|
||||
const currentYear = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div class="content">
|
||||
<a href="https://beian.miit.gov.cn/#/Integrated/index">
|
||||
备案号：鄂ICP备2023000060号-2
|
||||
<div class="footer-left">
|
||||
<p class="copyright">© {currentYear} {siteTitle}</p>
|
||||
{icpNumber && (
|
||||
<a href="https://beian.miit.gov.cn/#/Integrated/index" class="icp" target="_blank" rel="noopener">
|
||||
{icpNumber}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<div class="footer-center">
|
||||
<span class="powered">Powered by Astro</span>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
{githubUrl && (
|
||||
<a href={githubUrl} class="social-link" target="_blank" rel="noopener" aria-label="GitHub">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background-color: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: var(--space-lg) 0;
|
||||
flex-shrink: 0;
|
||||
transition: background-color var(--transition-slow), border-color var(--transition-slow);
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-small);
|
||||
}
|
||||
|
||||
.footer-left,
|
||||
.footer-center,
|
||||
.footer-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.copyright,
|
||||
.powered {
|
||||
margin: 0;
|
||||
font-size: var(--text-tiny);
|
||||
}
|
||||
|
||||
.icp {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-tiny);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.icp:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.social-link {
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition-fast), background-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
color: var(--accent-color);
|
||||
background-color: var(--border-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-left,
|
||||
.footer-center,
|
||||
.footer-right {
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,43 +1,125 @@
|
||||
---
|
||||
import ThemeToggle from "./ThemeToggle";
|
||||
import { metadata } from "@/consts";
|
||||
const { siteTitle } = metadata;
|
||||
---
|
||||
|
||||
<header>
|
||||
<nav class="main-nav">
|
||||
<div class="nav-left">
|
||||
<a href="/" class="site-logo">{siteTitle}</a>
|
||||
<ul class="menu">
|
||||
<li class="menu-item"><a href="/">首页</a></li>
|
||||
<li class="menu-item"><a href="/about">关于</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<ThemeToggle client:load />
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
height: 60px;
|
||||
height: 64px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
|
||||
background: var(--bg-secondary);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
transition: background-color var(--transition-slow), border-color var(--transition-slow);
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
padding: 0 var(--space-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main-nav .menu {
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.site-logo:hover {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
gap: var(--space-lg);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-item a {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
transition: color var(--transition-fast);
|
||||
font-size: var(--text-small);
|
||||
}
|
||||
|
||||
.menu-item a:hover {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* element: menu-item */
|
||||
.main-nav .menu-item a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
:global(.theme-toggle) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: var(--space-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background-color var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.main-nav .menu-item a:hover {
|
||||
:global(.theme-toggle:hover) {
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
.nav-left {
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.menu-item a {
|
||||
font-size: var(--text-tiny);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<nav class="main-nav">
|
||||
<ul class="menu">
|
||||
<li class="menu-item"><a href="/">首页</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
152
src/components/PostCard.astro
Normal file
152
src/components/PostCard.astro
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
import Tag from "./Tag.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
date: Date;
|
||||
summary: string;
|
||||
slug: string;
|
||||
tags?: string[];
|
||||
readingTime?: number;
|
||||
}
|
||||
|
||||
const { title, date, summary, slug, tags = [], readingTime } = Astro.props;
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date: Date) => {
|
||||
return new Intl.DateTimeFormat("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
// 计算阅读时长（如果没有提供）
|
||||
const calculateReadingTime = (text: string) => {
|
||||
const wordsPerMinute = 200;
|
||||
const wordCount = text.length;
|
||||
return Math.ceil(wordCount / wordsPerMinute);
|
||||
};
|
||||
|
||||
const estimatedReadingTime = readingTime || calculateReadingTime(summary);
|
||||
---
|
||||
|
||||
<article class="post-card">
|
||||
<a href={`/posts/${slug}`} class="card-link">
|
||||
<div class="card-content">
|
||||
<h2 class="post-title">{title}</h2>
|
||||
|
||||
<div class="post-meta">
|
||||
<time class="post-date" datetime={date.toISOString()}>
|
||||
{formatDate(date)}
|
||||
</time>
|
||||
<span class="reading-time">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<circle cx="12" cy="12" r="10" stroke-width="2"/>
|
||||
<polyline points="12 6 12 12 16 14" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{estimatedReadingTime} 分钟阅读
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="post-summary">{summary}</p>
|
||||
|
||||
{tags.length > 0 && (
|
||||
<div class="post-tags">
|
||||
{tags.map((tag) => <Tag tag={tag} size="small" />)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.post-card {
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-slow);
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.card-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: var(--text-h3);
|
||||
line-height: var(--line-h3);
|
||||
font-weight: 700;
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
color: var(--text-primary);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.post-card:hover .post-title {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: var(--text-small);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.post-date {
|
||||
font-size: var(--text-tiny);
|
||||
}
|
||||
|
||||
.reading-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: var(--text-tiny);
|
||||
}
|
||||
|
||||
.post-summary {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--line-base);
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
.card-content {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.post-summary {
|
||||
font-size: var(--text-small);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
src/components/Tag.astro
Normal file
51
src/components/Tag.astro
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
interface Props {
|
||||
tag: string;
|
||||
size?: "small" | "medium";
|
||||
}
|
||||
|
||||
const { tag, size = "small" } = Astro.props;
|
||||
|
||||
// 为不同标签生成不同的颜色
|
||||
const getTagColor = (tag: string) => {
|
||||
const colors = [
|
||||
{ bg: "#E3F2FD", text: "#1976D2" },
|
||||
{ bg: "#F3E5F5", text: "#7B1FA2" },
|
||||
{ bg: "#E8F5E9", text: "#388E3C" },
|
||||
{ bg: "#FFF3E0", text: "#F57C00" },
|
||||
{ bg: "#FCE4EC", text: "#C2185B" },
|
||||
{ bg: "#E0F2F1", text: "#00796B" },
|
||||
];
|
||||
const index = tag.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % colors.length;
|
||||
return colors[index];
|
||||
};
|
||||
|
||||
const tagColor = getTagColor(tag);
|
||||
---
|
||||
|
||||
<span class={`tag tag-${size}`} style={`background-color: ${tagColor.bg}; color: ${tagColor.text};`}>
|
||||
{tag}
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 500;
|
||||
transition: transform var(--transition-fast), opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.tag-small {
|
||||
font-size: var(--text-tiny);
|
||||
}
|
||||
|
||||
.tag-medium {
|
||||
font-size: var(--text-small);
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
transform: translateY(-2px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
49
src/components/ThemeToggle.tsx
Normal file
49
src/components/ThemeToggle.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { createSignal, onMount } from "solid-js";
|
||||
|
||||
export default function ThemeToggle() {
|
||||
const [theme, setTheme] = createSignal<"light" | "dark">("light");
|
||||
|
||||
onMount(() => {
|
||||
// 从 localStorage 读取主题设置，或使用系统偏好
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
const initialTheme = savedTheme || (prefersDark ? "dark" : "light");
|
||||
|
||||
setTheme(initialTheme as "light" | "dark");
|
||||
document.documentElement.setAttribute("data-theme", initialTheme);
|
||||
});
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newTheme = theme() === "light" ? "dark" : "light";
|
||||
setTheme(newTheme);
|
||||
document.documentElement.setAttribute("data-theme", newTheme);
|
||||
localStorage.setItem("theme", newTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
class="theme-toggle"
|
||||
aria-label="切换主题"
|
||||
title={theme() === "light" ? "切换到暗色模式" : "切换到亮色模式"}
|
||||
>
|
||||
{theme() === "light" ? (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<circle cx="12" cy="12" r="5" stroke-width="2"/>
|
||||
<line x1="12" y1="1" x2="12" y2="3" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="12" y1="21" x2="12" y2="23" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="1" y1="12" x2="3" y2="12" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="21" y1="12" x2="23" y2="12" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,31 @@
|
||||
export const metadata = {
|
||||
siteTitle: "42的博客",
|
||||
siteDescription: "分享技术与思考的个人空间",
|
||||
author: "42",
|
||||
email: "your-email@example.com",
|
||||
githubUrl: "https://github.com/yourusername",
|
||||
icpNumber: "鄂ICP备2023000060号-2",
|
||||
|
||||
// Hero 区域配置
|
||||
heroTitle: "42的博客",
|
||||
heroDescription: "在这里记录技术学习、生活思考和创作分享",
|
||||
|
||||
// 关于页面配置
|
||||
aboutBio: `我是一名热爱编程的开发者，专注于 Web 开发和技术写作。
|
||||
|
||||
这个博客用于记录我的学习历程、技术心得和生活感悟。希望通过分享，能够帮助到更多的人。
|
||||
|
||||
欢迎与我交流探讨！`,
|
||||
|
||||
skills: [
|
||||
"JavaScript",
|
||||
"TypeScript",
|
||||
"React",
|
||||
"Vue",
|
||||
"Node.js",
|
||||
"Astro",
|
||||
"CSS",
|
||||
"HTML",
|
||||
"Git",
|
||||
],
|
||||
}
|
||||
|
||||
17
src/content/config.ts
Normal file
17
src/content/config.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const postsCollection = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
date: z.date(),
|
||||
summary: z.string(),
|
||||
tags: z.array(z.string()).optional(),
|
||||
cover: z.string().optional(),
|
||||
author: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = {
|
||||
posts: postsCollection,
|
||||
};
|
||||
160
src/content/posts/astro-introduction.md
Normal file
160
src/content/posts/astro-introduction.md
Normal file
@@ -0,0 +1,160 @@
|
||||
---
|
||||
title: "Astro 框架初探"
|
||||
date: 2024-11-15
|
||||
summary: "Astro 是一个现代化的静态网站生成器，它专注于性能和开发体验。本文将介绍 Astro 的核心概念、特点以及如何使用它构建快速的网站。"
|
||||
tags: ["Astro", "前端框架", "Web开发"]
|
||||
---
|
||||
|
||||
# Astro 框架初探
|
||||
|
||||
在现代 Web 开发中，选择合适的框架至关重要。今天我们来聊聊 Astro —— 一个专注于性能的现代化静态网站生成器。
|
||||
|
||||
## Astro 是什么？
|
||||
|
||||
Astro 是一个为构建内容驱动网站而设计的 Web 框架。它的核心理念是：
|
||||
|
||||
> **默认发送零 JavaScript 到浏览器**
|
||||
|
||||
这听起来很激进，但正是这个理念让 Astro 网站极其快速。
|
||||
|
||||
## 核心特性
|
||||
|
||||
### 1. 群岛架构（Islands Architecture）
|
||||
|
||||
Astro 引入了"群岛架构"的概念：
|
||||
|
||||
```astro
|
||||
---
|
||||
// 静态内容，不需要 JavaScript
|
||||
---
|
||||
|
||||
<div>
|
||||
<h1>这是静态内容</h1>
|
||||
|
||||
<!-- 这是一个"岛屿"，只有这部分会发送 JS -->
|
||||
<InteractiveComponent client:load />
|
||||
|
||||
<p>又是静态内容</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 2. 框架无关
|
||||
|
||||
Astro 支持多种前端框架，你可以混合使用：
|
||||
|
||||
```astro
|
||||
---
|
||||
import ReactComponent from './React.jsx';
|
||||
import VueComponent from './Vue.vue';
|
||||
import SolidComponent from './Solid.tsx';
|
||||
---
|
||||
|
||||
<ReactComponent client:visible />
|
||||
<VueComponent client:idle />
|
||||
<SolidComponent client:load />
|
||||
```
|
||||
|
||||
### 3. 内置优化
|
||||
|
||||
Astro 自动优化你的网站：
|
||||
|
||||
- 自动代码分割
|
||||
- CSS 自动提取和内联
|
||||
- 图片优化
|
||||
- 资源预加载
|
||||
|
||||
## 客户端指令
|
||||
|
||||
Astro 提供了灵活的客户端加载策略：
|
||||
|
||||
| 指令 | 说明 |
|
||||
|------|------|
|
||||
| `client:load` | 页面加载时立即加载组件 |
|
||||
| `client:idle` | 浏览器空闲时加载 |
|
||||
| `client:visible` | 组件进入视口时加载 |
|
||||
| `client:media` | 媒体查询匹配时加载 |
|
||||
| `client:only` | 仅在客户端渲染 |
|
||||
|
||||
## Content Collections
|
||||
|
||||
Astro 的 Content Collections 提供了类型安全的内容管理：
|
||||
|
||||
```typescript
|
||||
// src/content/config.ts
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const blog = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
date: z.date(),
|
||||
tags: z.array(z.string()),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { blog };
|
||||
```
|
||||
|
||||
使用时：
|
||||
|
||||
```astro
|
||||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const posts = await getCollection('blog');
|
||||
---
|
||||
|
||||
{posts.map(post => (
|
||||
<article>
|
||||
<h2>{post.data.title}</h2>
|
||||
<time>{post.data.date}</time>
|
||||
</article>
|
||||
))}
|
||||
```
|
||||
|
||||
## 性能对比
|
||||
|
||||
让我们看看 Astro 与其他框架的性能对比：
|
||||
|
||||
- **Lighthouse 得分**：通常能达到满分 100
|
||||
- **首次内容绘制（FCP）**：通常 < 1s
|
||||
- **JavaScript 体积**：可以接近 0KB
|
||||
|
||||
## 适用场景
|
||||
|
||||
Astro 特别适合：
|
||||
|
||||
1. **博客和文档站点**：内容为主，交互较少
|
||||
2. **营销网站**：追求极致性能
|
||||
3. **电子商务**：产品展示页面
|
||||
4. **作品集网站**：展示型网站
|
||||
|
||||
## 开始使用
|
||||
|
||||
创建一个 Astro 项目非常简单：
|
||||
|
||||
```bash
|
||||
# 使用官方模板
|
||||
npm create astro@latest
|
||||
|
||||
# 选择模板
|
||||
# - Empty (空白项目)
|
||||
# - Blog (博客模板)
|
||||
# - Portfolio (作品集)
|
||||
# - Documentation (文档站)
|
||||
```
|
||||
|
||||
## 我的使用体验
|
||||
|
||||
在使用 Astro 构建这个博客的过程中，我最喜欢的几点：
|
||||
|
||||
1. **开发体验优秀**：热更新快，调试方便
|
||||
2. **性能出色**：页面加载速度极快
|
||||
3. **灵活性高**：可以根据需要选择使用哪些功能
|
||||
4. **学习曲线平缓**：如果你懂 HTML/CSS/JS，上手很快
|
||||
|
||||
## 总结
|
||||
|
||||
Astro 是一个专注于性能和开发体验的优秀框架。如果你正在构建内容驱动的网站，强烈推荐尝试 Astro。
|
||||
|
||||
它的"群岛架构"理念和零 JavaScript 默认策略，为现代 Web 开发提供了新的思路。
|
||||
145
src/content/posts/css-variables.md
Normal file
145
src/content/posts/css-variables.md
Normal file
@@ -0,0 +1,145 @@
|
||||
---
|
||||
title: "深入理解 CSS 变量"
|
||||
date: 2024-11-18
|
||||
summary: "CSS 变量（也称为 CSS 自定义属性）是现代 CSS 的强大功能。本文将深入探讨 CSS 变量的使用方法、最佳实践以及如何在实际项目中应用它们。"
|
||||
tags: ["CSS", "前端开发"]
|
||||
---
|
||||
|
||||
# 深入理解 CSS 变量
|
||||
|
||||
CSS 变量（CSS Custom Properties）为我们提供了一种在 CSS 中定义和使用变量的方式，这极大地提高了样式的可维护性和灵活性。
|
||||
|
||||
## 什么是 CSS 变量？
|
||||
|
||||
CSS 变量允许我们在 CSS 中定义可重用的值。它们使用 `--` 前缀定义，并通过 `var()` 函数使用。
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary-color: #0066FF;
|
||||
--spacing-unit: 8px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: var(--primary-color);
|
||||
padding: var(--spacing-unit);
|
||||
}
|
||||
```
|
||||
|
||||
## CSS 变量的优势
|
||||
|
||||
### 1. 提高可维护性
|
||||
|
||||
使用变量可以将重复的值集中管理，修改时只需改变变量定义：
|
||||
|
||||
```css
|
||||
:root {
|
||||
--text-primary: #1A1A1A;
|
||||
--text-secondary: #666666;
|
||||
}
|
||||
|
||||
/* 在多处使用 */
|
||||
h1 { color: var(--text-primary); }
|
||||
p { color: var(--text-secondary); }
|
||||
```
|
||||
|
||||
### 2. 支持主题切换
|
||||
|
||||
CSS 变量可以轻松实现主题切换功能：
|
||||
|
||||
```css
|
||||
/* 明亮主题 */
|
||||
:root {
|
||||
--bg-color: #FFFFFF;
|
||||
--text-color: #000000;
|
||||
}
|
||||
|
||||
/* 暗黑主题 */
|
||||
[data-theme="dark"] {
|
||||
--bg-color: #0F0F0F;
|
||||
--text-color: #E5E5E5;
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 动态计算
|
||||
|
||||
CSS 变量可以与 `calc()` 函数结合使用：
|
||||
|
||||
```css
|
||||
:root {
|
||||
--base-size: 16px;
|
||||
--scale: 1.5;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: calc(var(--base-size) * var(--scale));
|
||||
}
|
||||
```
|
||||
|
||||
## 实际应用场景
|
||||
|
||||
### 设计系统
|
||||
|
||||
在构建设计系统时，CSS 变量是核心工具：
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* 色彩系统 */
|
||||
--color-primary: #0066FF;
|
||||
--color-secondary: #7B1FA2;
|
||||
--color-success: #388E3C;
|
||||
--color-warning: #F57C00;
|
||||
--color-error: #C2185B;
|
||||
|
||||
/* 间距系统 */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
|
||||
/* 阴影系统 */
|
||||
--shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,0.08);
|
||||
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
|
||||
}
|
||||
```
|
||||
|
||||
### 响应式设计
|
||||
|
||||
CSS 变量可以在媒体查询中重新定义：
|
||||
|
||||
```css
|
||||
:root {
|
||||
--container-width: 1200px;
|
||||
--font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--container-width: 100%;
|
||||
--font-size: 14px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 最佳实践
|
||||
|
||||
1. **使用语义化命名**：`--primary-color` 比 `--blue` 更好
|
||||
2. **分层组织**：将变量按功能分组
|
||||
3. **提供回退值**：`var(--color, #000)`
|
||||
4. **避免过度使用**：不是所有值都需要变量化
|
||||
|
||||
## 浏览器兼容性
|
||||
|
||||
现代浏览器都已支持 CSS 变量，覆盖率超过 98%。对于不支持的浏览器，可以使用回退方案：
|
||||
|
||||
```css
|
||||
.element {
|
||||
color: #0066FF; /* 回退值 */
|
||||
color: var(--primary-color);
|
||||
}
|
||||
```
|
||||
|
||||
## 总结
|
||||
|
||||
CSS 变量是现代 CSS 开发的重要工具，它提高了代码的可维护性、灵活性和可读性。通过合理使用 CSS 变量，我们可以构建更加优雅和可维护的样式系统。
|
||||
281
src/content/posts/responsive-design.md
Normal file
281
src/content/posts/responsive-design.md
Normal file
@@ -0,0 +1,281 @@
|
||||
---
|
||||
title: "响应式设计的艺术"
|
||||
date: 2024-11-05
|
||||
summary: "响应式设计不仅仅是适配不同屏幕尺寸，更是创造流畅、一致的用户体验。本文将探讨响应式设计的核心原则、实用技巧和常见挑战。"
|
||||
tags: ["CSS", "响应式设计", "UX"]
|
||||
---
|
||||
|
||||
# 响应式设计的艺术
|
||||
|
||||
在移动设备占据主导地位的今天,响应式设计已经不是可选项,而是必需品。让我们深入探讨如何打造优秀的响应式网站。
|
||||
|
||||
## 核心原则
|
||||
|
||||
### 移动优先
|
||||
|
||||
从最小屏幕开始设计,逐步增强:
|
||||
|
||||
```css
|
||||
/* 基础样式 - 移动端 */
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 平板 */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 桌面 */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 流式布局
|
||||
|
||||
使用相对单位而非固定像素:
|
||||
|
||||
```css
|
||||
/* ❌ 固定布局 */
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
/* ✅ 流式布局 */
|
||||
.sidebar {
|
||||
width: 25%;
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
}
|
||||
```
|
||||
|
||||
### 弹性图片
|
||||
|
||||
确保图片自适应容器:
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
## 现代布局技术
|
||||
|
||||
### Flexbox
|
||||
|
||||
适合一维布局:
|
||||
|
||||
```css
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Grid
|
||||
|
||||
适合二维布局:
|
||||
|
||||
```css
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
```
|
||||
|
||||
这段代码会自动调整列数,无需媒体查询!
|
||||
|
||||
### Container Queries
|
||||
|
||||
容器查询让组件真正独立:
|
||||
|
||||
```css
|
||||
.card-container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
@container (min-width: 400px) {
|
||||
.card {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 断点策略
|
||||
|
||||
不要只关注设备,关注内容:
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* 基于内容的断点 */
|
||||
--bp-small: 640px;
|
||||
--bp-medium: 768px;
|
||||
--bp-large: 1024px;
|
||||
--bp-xlarge: 1280px;
|
||||
}
|
||||
```
|
||||
|
||||
常用断点参考:
|
||||
|
||||
| 类型 | 尺寸 |
|
||||
|------|------|
|
||||
| 手机 | < 640px |
|
||||
| 平板 | 640px - 1024px |
|
||||
| 桌面 | > 1024px |
|
||||
| 超大屏 | > 1280px |
|
||||
|
||||
## 响应式排版
|
||||
|
||||
### 流式字体
|
||||
|
||||
使用 `clamp()` 实现流畅的字体缩放:
|
||||
|
||||
```css
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: clamp(1rem, 2vw, 1.125rem);
|
||||
line-height: 1.6;
|
||||
}
|
||||
```
|
||||
|
||||
### 可读性优化
|
||||
|
||||
控制行宽以提高可读性:
|
||||
|
||||
```css
|
||||
.content {
|
||||
max-width: 65ch; /* 约 65 个字符宽度 */
|
||||
margin: 0 auto;
|
||||
}
|
||||
```
|
||||
|
||||
## 触摸优化
|
||||
|
||||
### 可点击区域
|
||||
|
||||
确保触摸目标足够大:
|
||||
|
||||
```css
|
||||
.button,
|
||||
.link {
|
||||
min-height: 44px; /* iOS 建议最小尺寸 */
|
||||
min-width: 44px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
```
|
||||
|
||||
### 悬停状态
|
||||
|
||||
移动端没有真正的 hover:
|
||||
|
||||
```css
|
||||
/* 仅在支持 hover 的设备上显示 */
|
||||
@media (hover: hover) {
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 性能考虑
|
||||
|
||||
### 响应式图片
|
||||
|
||||
使用 `srcset` 和 `sizes`:
|
||||
|
||||
```html
|
||||
<img
|
||||
src="image-800.jpg"
|
||||
srcset="
|
||||
image-400.jpg 400w,
|
||||
image-800.jpg 800w,
|
||||
image-1200.jpg 1200w
|
||||
"
|
||||
sizes="
|
||||
(max-width: 640px) 100vw,
|
||||
(max-width: 1024px) 50vw,
|
||||
800px
|
||||
"
|
||||
alt="描述"
|
||||
>
|
||||
```
|
||||
|
||||
### 延迟加载
|
||||
|
||||
非首屏图片延迟加载:
|
||||
|
||||
```html
|
||||
<img src="image.jpg" loading="lazy" alt="描述">
|
||||
```
|
||||
|
||||
## 调试技巧
|
||||
|
||||
### Chrome DevTools
|
||||
|
||||
1. 切换设备模拟
|
||||
2. 查看断点效果
|
||||
3. 测试不同屏幕尺寸
|
||||
4. 模拟网络速度
|
||||
|
||||
### 有用的 CSS
|
||||
|
||||
调试边框:
|
||||
|
||||
```css
|
||||
/* 开发时使用 */
|
||||
* {
|
||||
outline: 1px solid red;
|
||||
}
|
||||
```
|
||||
|
||||
## 常见陷阱
|
||||
|
||||
1. **固定高度**: 避免使用固定高度,使用 `min-height` 代替
|
||||
2. **像素完美**: 不同设备有差异是正常的
|
||||
3. **忽略横屏**: 记得测试横屏模式
|
||||
4. **过多断点**: 保持简单,不要为每个设备单独设置
|
||||
|
||||
## 检查清单
|
||||
|
||||
- [ ] 移动端优先设计
|
||||
- [ ] 触摸目标至少 44x44px
|
||||
- [ ] 图片响应式处理
|
||||
- [ ] 测试常见断点
|
||||
- [ ] 检查横屏模式
|
||||
- [ ] 优化加载性能
|
||||
- [ ] 测试真实设备
|
||||
|
||||
## 总结
|
||||
|
||||
响应式设计是一门艺术,需要在美观、性能和用户体验之间找到平衡。记住:
|
||||
|
||||
- 从小屏幕开始
|
||||
- 使用现代布局技术
|
||||
- 关注性能
|
||||
- 在真实设备上测试
|
||||
|
||||
优秀的响应式设计应该让用户感觉不到它的存在 —— 一切都是那么自然流畅。
|
||||
237
src/content/posts/typescript-best-practices.md
Normal file
237
src/content/posts/typescript-best-practices.md
Normal file
@@ -0,0 +1,237 @@
|
||||
---
|
||||
title: "TypeScript 最佳实践"
|
||||
date: 2024-11-10
|
||||
summary: "TypeScript 为 JavaScript 带来了类型安全，但如何正确使用它以获得最佳开发体验？本文总结了一些 TypeScript 开发中的最佳实践和常见陷阱。"
|
||||
tags: ["TypeScript", "JavaScript", "编程"]
|
||||
---
|
||||
|
||||
# TypeScript 最佳实践
|
||||
|
||||
TypeScript 已经成为现代前端开发的标配。正确使用 TypeScript 可以显著提高代码质量和开发效率，但不当使用也可能适得其反。
|
||||
|
||||
## 基础类型定义
|
||||
|
||||
### 使用类型推断
|
||||
|
||||
TypeScript 的类型推断很强大，不需要每个地方都显式标注类型：
|
||||
|
||||
```typescript
|
||||
// ❌ 不必要的类型标注
|
||||
const count: number = 0;
|
||||
const name: string = "TypeScript";
|
||||
|
||||
// ✅ 利用类型推断
|
||||
const count = 0;
|
||||
const name = "TypeScript";
|
||||
```
|
||||
|
||||
### 优先使用接口而非类型别名
|
||||
|
||||
对于对象类型，接口通常是更好的选择：
|
||||
|
||||
```typescript
|
||||
// ✅ 使用接口
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
// ❌ 避免过度使用 type
|
||||
type User = {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
```
|
||||
|
||||
但是对于联合类型、元组等，type 更合适：
|
||||
|
||||
```typescript
|
||||
type Status = "pending" | "success" | "error";
|
||||
type Point = [number, number];
|
||||
```
|
||||
|
||||
## 高级类型技巧
|
||||
|
||||
### 使用泛型提高复用性
|
||||
|
||||
```typescript
|
||||
// 通用的 API 响应类型
|
||||
interface ApiResponse<T> {
|
||||
data: T;
|
||||
status: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
// 使用
|
||||
type UserResponse = ApiResponse<User>;
|
||||
type PostsResponse = ApiResponse<Post[]>;
|
||||
```
|
||||
|
||||
### 善用工具类型
|
||||
|
||||
TypeScript 内置了许多工具类型：
|
||||
|
||||
```typescript
|
||||
interface Todo {
|
||||
title: string;
|
||||
description: string;
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
// Partial - 所有属性变为可选
|
||||
type PartialTodo = Partial<Todo>;
|
||||
|
||||
// Pick - 选择部分属性
|
||||
type TodoPreview = Pick<Todo, "title" | "completed">;
|
||||
|
||||
// Omit - 排除某些属性
|
||||
type TodoInfo = Omit<Todo, "completed">;
|
||||
|
||||
// Readonly - 所有属性变为只读
|
||||
type ReadonlyTodo = Readonly<Todo>;
|
||||
```
|
||||
|
||||
## 类型守卫
|
||||
|
||||
使用类型守卫让代码更安全：
|
||||
|
||||
```typescript
|
||||
function isString(value: unknown): value is string {
|
||||
return typeof value === "string";
|
||||
}
|
||||
|
||||
function processValue(value: string | number) {
|
||||
if (isString(value)) {
|
||||
// TypeScript 知道这里 value 是 string
|
||||
console.log(value.toUpperCase());
|
||||
} else {
|
||||
// 这里 value 是 number
|
||||
console.log(value.toFixed(2));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 避免 any
|
||||
|
||||
`any` 类型会破坏类型安全，应该尽量避免：
|
||||
|
||||
```typescript
|
||||
// ❌ 使用 any
|
||||
function process(data: any) {
|
||||
return data.value;
|
||||
}
|
||||
|
||||
// ✅ 使用 unknown 并做类型检查
|
||||
function process(data: unknown) {
|
||||
if (typeof data === "object" && data !== null && "value" in data) {
|
||||
return (data as { value: any }).value;
|
||||
}
|
||||
throw new Error("Invalid data");
|
||||
}
|
||||
|
||||
// ✅ 或者定义明确的类型
|
||||
interface Data {
|
||||
value: string;
|
||||
}
|
||||
|
||||
function process(data: Data) {
|
||||
return data.value;
|
||||
}
|
||||
```
|
||||
|
||||
## 严格模式配置
|
||||
|
||||
在 `tsconfig.json` 中启用严格模式：
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"noImplicitAny": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"strictBindCallApply": true,
|
||||
"strictPropertyInitialization": true,
|
||||
"noImplicitThis": true,
|
||||
"alwaysStrict": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 处理 null 和 undefined
|
||||
|
||||
启用 `strictNullChecks` 后，需要明确处理可能的 null/undefined：
|
||||
|
||||
```typescript
|
||||
interface User {
|
||||
name: string;
|
||||
age?: number;
|
||||
}
|
||||
|
||||
function greet(user: User) {
|
||||
// ❌ 可能出错
|
||||
console.log(`Hello, ${user.name}. You are ${user.age} years old.`);
|
||||
|
||||
// ✅ 正确处理
|
||||
console.log(`Hello, ${user.name}. You are ${user.age ?? "unknown"} years old.`);
|
||||
|
||||
// ✅ 或使用可选链
|
||||
console.log(`Age: ${user.age?.toString() ?? "not provided"}`);
|
||||
}
|
||||
```
|
||||
|
||||
## 枚举的使用
|
||||
|
||||
优先使用常量对象或联合类型而非枚举：
|
||||
|
||||
```typescript
|
||||
// ❌ 枚举会生成额外代码
|
||||
enum Direction {
|
||||
Up,
|
||||
Down,
|
||||
Left,
|
||||
Right
|
||||
}
|
||||
|
||||
// ✅ 使用 const 对象
|
||||
const Direction = {
|
||||
Up: 0,
|
||||
Down: 1,
|
||||
Left: 2,
|
||||
Right: 3
|
||||
} as const;
|
||||
|
||||
// ✅ 或使用联合类型
|
||||
type Direction = "up" | "down" | "left" | "right";
|
||||
```
|
||||
|
||||
## 函数重载
|
||||
|
||||
对于复杂的函数签名，使用函数重载：
|
||||
|
||||
```typescript
|
||||
function createElement(tag: "div"): HTMLDivElement;
|
||||
function createElement(tag: "span"): HTMLSpanElement;
|
||||
function createElement(tag: "button"): HTMLButtonElement;
|
||||
function createElement(tag: string): HTMLElement {
|
||||
return document.createElement(tag);
|
||||
}
|
||||
|
||||
// 使用时会有精确的类型推断
|
||||
const div = createElement("div"); // HTMLDivElement
|
||||
const span = createElement("span"); // HTMLSpanElement
|
||||
```
|
||||
|
||||
## 总结
|
||||
|
||||
TypeScript 的类型系统非常强大，但需要正确使用才能发挥其优势：
|
||||
|
||||
1. 充分利用类型推断
|
||||
2. 避免使用 `any`
|
||||
3. 启用严格模式
|
||||
4. 使用类型守卫和工具类型
|
||||
5. 明确处理 null/undefined
|
||||
|
||||
遵循这些最佳实践，可以让你的 TypeScript 代码更安全、更易维护。
|
||||
62
src/content/posts/welcome.md
Normal file
62
src/content/posts/welcome.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: "欢迎来到我的博客"
|
||||
date: 2024-11-20
|
||||
summary: "这是我的第一篇博客文章，在这里我将分享关于 Web 开发、技术学习和生活思考的内容。让我们一起开启这段精彩的旅程！"
|
||||
tags: ["博客", "日常"]
|
||||
---
|
||||
|
||||
# 欢迎来到我的博客
|
||||
|
||||
你好！欢迎来到我的个人博客。这是一个全新的开始，我将在这里记录和分享我的技术学习、开发经验和生活感悟。
|
||||
|
||||
## 为什么写博客？
|
||||
|
||||
写博客有很多好处：
|
||||
|
||||
1. **知识沉淀**：将学到的知识系统化整理，加深理解
|
||||
2. **经验分享**：帮助遇到类似问题的人，传递价值
|
||||
3. **自我提升**：通过写作锻炼表达能力和思维能力
|
||||
4. **记录成长**：回顾过去，见证自己的进步
|
||||
|
||||
## 博客内容规划
|
||||
|
||||
在这个博客中，我计划分享以下几类内容：
|
||||
|
||||
### 技术文章
|
||||
|
||||
- Web 开发相关的技术文章
|
||||
- 编程语言学习心得
|
||||
- 开发工具使用技巧
|
||||
- 项目实战经验
|
||||
|
||||
### 学习笔记
|
||||
|
||||
记录学习新技术的过程和心得体会，包括但不限于：
|
||||
|
||||
```javascript
|
||||
// 比如学习 JavaScript 的一些技巧
|
||||
const greet = (name) => {
|
||||
console.log(`Hello, ${name}!`);
|
||||
};
|
||||
|
||||
greet("World");
|
||||
```
|
||||
|
||||
### 生活随笔
|
||||
|
||||
技术之外，生活中的思考和感悟同样重要。
|
||||
|
||||
## 关于这个博客
|
||||
|
||||
这个博客使用 [Astro](https://astro.build) 构建，它是一个现代化的静态网站生成器，具有以下特点：
|
||||
|
||||
- 🚀 极快的页面加载速度
|
||||
- 🎨 优雅的开发体验
|
||||
- 📝 完善的 Markdown 支持
|
||||
- 🌙 内置主题切换功能
|
||||
|
||||
## 最后
|
||||
|
||||
感谢你的访问！如果你对我的文章有任何建议或想法，欢迎与我交流。
|
||||
|
||||
让我们一起在技术的世界里探索前行！
|
||||
@@ -5,11 +5,21 @@ import BaseHeader from "@/components/BaseHeader.astro";
|
||||
import BaseFooter from "@/components/BaseFooter.astro";
|
||||
|
||||
import { metadata } from "@/consts.ts";
|
||||
const { siteTitle } = metadata;
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
const { siteTitle, siteDescription } = metadata;
|
||||
|
||||
const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
|
||||
const pageDescription = description || siteDescription;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
@@ -18,12 +28,21 @@ const { siteTitle } = metadata;
|
||||
/>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{siteTitle}</title>
|
||||
<meta name="description" content={pageDescription} />
|
||||
<title>{pageTitle}</title>
|
||||
|
||||
<!-- 预加载主题脚本，防止闪烁 -->
|
||||
<script is:inline>
|
||||
// 立即应用保存的主题，防止页面闪烁
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
const theme = savedTheme || (prefersDark ? "dark" : "light");
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<BaseHeader />
|
||||
<main>
|
||||
<div class="grid-background"></div>
|
||||
<slot />
|
||||
</main>
|
||||
<BaseFooter />
|
||||
@@ -34,7 +53,7 @@ const { siteTitle } = metadata;
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -47,34 +66,13 @@ const { siteTitle } = metadata;
|
||||
max-width: var(--layout-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.grid-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background-color: #ffffff;
|
||||
opacity: 0.3;
|
||||
background-image: linear-gradient(#d7edfb 2px, transparent 2px),
|
||||
linear-gradient(90deg, #d7edfb 2px, transparent 2px),
|
||||
linear-gradient(#d7edfb 1px, transparent 1px),
|
||||
linear-gradient(90deg, #d7edfb 1px, #ffffff 1px);
|
||||
background-size:
|
||||
50px 50px,
|
||||
50px 50px,
|
||||
10px 10px,
|
||||
10px 10px;
|
||||
background-position:
|
||||
-2px -2px,
|
||||
-2px -2px,
|
||||
-1px -1px,
|
||||
-1px -1px;
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
main {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
298
src/pages/about.astro
Normal file
298
src/pages/about.astro
Normal file
@@ -0,0 +1,298 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Tag from "@/components/Tag.astro";
|
||||
import { metadata } from "@/consts";
|
||||
|
||||
const { author, email, githubUrl, aboutBio, skills } = metadata;
|
||||
---
|
||||
|
||||
<Layout title="关于" description="关于我和这个博客">
|
||||
<article class="about">
|
||||
<!-- 个人简介区域 -->
|
||||
<section class="profile-section">
|
||||
<div class="avatar-container">
|
||||
<div class="avatar">
|
||||
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="50" cy="50" r="50" fill="url(#gradient)"/>
|
||||
<circle cx="50" cy="35" r="15" fill="white" opacity="0.9"/>
|
||||
<path d="M25 75 Q25 55, 50 55 T75 75" fill="white" opacity="0.9"/>
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0066FF;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#7B1FA2;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="page-title">关于我</h1>
|
||||
|
||||
<div class="bio">
|
||||
{aboutBio.split('\n\n').map((paragraph: string) => (
|
||||
<p>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 技能标签云 -->
|
||||
<section class="skills-section">
|
||||
<h2 class="section-title">技能标签</h2>
|
||||
<div class="skills-cloud">
|
||||
{skills.map((skill: string) => (
|
||||
<Tag tag={skill} size="medium" />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<section class="contact-section">
|
||||
<h2 class="section-title">联系方式</h2>
|
||||
<div class="contact-links">
|
||||
{email && (
|
||||
<a href={`mailto:${email}`} class="contact-link">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke-width="2"/>
|
||||
<polyline points="22,6 12,13 2,6" stroke-width="2"/>
|
||||
</svg>
|
||||
<span>Email</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{githubUrl && (
|
||||
<a href={githubUrl} class="contact-link" target="_blank" rel="noopener">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 关于博客 -->
|
||||
<section class="blog-info-section">
|
||||
<h2 class="section-title">关于这个博客</h2>
|
||||
<div class="blog-info">
|
||||
<p>
|
||||
这个博客使用 <a href="https://astro.build" target="_blank" rel="noopener">Astro</a>
|
||||
构建，配合 <a href="https://www.solidjs.com" target="_blank" rel="noopener">SolidJS</a>
|
||||
实现交互功能。
|
||||
</p>
|
||||
<p>
|
||||
设计追求简洁、优雅和高性能，支持明暗主题切换，提供舒适的阅读体验。
|
||||
</p>
|
||||
<div class="tech-stack">
|
||||
<div class="tech-item">
|
||||
<strong>框架</strong>
|
||||
<span>Astro</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>UI 库</strong>
|
||||
<span>SolidJS</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>语言</strong>
|
||||
<span>TypeScript</span>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>样式</strong>
|
||||
<span>CSS Variables</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.about {
|
||||
max-width: var(--content-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 个人简介区域 */
|
||||
.profile-section {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-2xl);
|
||||
padding-bottom: var(--space-2xl);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.avatar svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: var(--text-h1);
|
||||
line-height: var(--line-h1);
|
||||
font-weight: 800;
|
||||
margin: 0 0 var(--space-lg) 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.bio {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bio p {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--line-base);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
/* 技能区域 */
|
||||
.skills-section {
|
||||
margin-bottom: var(--space-2xl);
|
||||
padding-bottom: var(--space-2xl);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--text-h2);
|
||||
line-height: var(--line-h2);
|
||||
font-weight: 700;
|
||||
margin: 0 0 var(--space-lg) 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.skills-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 联系方式区域 */
|
||||
.contact-section {
|
||||
margin-bottom: var(--space-2xl);
|
||||
padding-bottom: var(--space-2xl);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-base);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
background-color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* 博客信息区域 */
|
||||
.blog-info-section {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.blog-info p {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--line-base);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.blog-info a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.blog-info a:hover {
|
||||
border-bottom-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.tech-stack {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: var(--space-md);
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.tech-item {
|
||||
padding: var(--space-md);
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.tech-item strong {
|
||||
font-size: var(--text-small);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tech-item span {
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.bio {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tech-stack {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +1,119 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import PostCard from "@/components/PostCard.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
import { metadata } from "@/consts";
|
||||
|
||||
const posts = [
|
||||
{
|
||||
title: "First Post",
|
||||
date: "2024-01-01",
|
||||
summary: "This is the summary of the first post.",
|
||||
},
|
||||
];
|
||||
const { heroTitle, heroDescription } = metadata;
|
||||
|
||||
// 获取所有文章并按日期排序
|
||||
const posts = (await getCollection("posts")).sort(
|
||||
(a, b) => b.data.date.getTime() - a.data.date.getTime()
|
||||
);
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<a href={`/posts/${post.title.replace(/\s+/g, "-").toLowerCase()}`}>
|
||||
<h2>{post.title}</h2>
|
||||
<p>{post.date}</p>
|
||||
<p class="summary">{post.summary}</p>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<Layout title="首页">
|
||||
<!-- Hero 区域 -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">{heroTitle}</h1>
|
||||
<p class="hero-description">{heroDescription}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 文章列表 -->
|
||||
<section class="posts-section">
|
||||
<h2 class="section-title">最新文章</h2>
|
||||
<div class="posts-grid">
|
||||
{posts.map((post) => (
|
||||
<PostCard
|
||||
title={post.data.title}
|
||||
date={post.data.date}
|
||||
summary={post.data.summary}
|
||||
slug={post.slug}
|
||||
tags={post.data.tags}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.summary {
|
||||
line-height: 2;
|
||||
font-size: 16px;
|
||||
color: rgb(66, 63, 63);
|
||||
/* Hero 区域样式 */
|
||||
.hero {
|
||||
padding: var(--space-2xl) 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: var(--text-h1);
|
||||
line-height: var(--line-h1);
|
||||
font-weight: 800;
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
color: var(--text-primary);
|
||||
background: linear-gradient(135deg, var(--accent-color) 0%, #7B1FA2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: var(--text-h3);
|
||||
line-height: var(--line-h3);
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 文章区域 */
|
||||
.posts-section {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--text-h2);
|
||||
line-height: var(--line-h2);
|
||||
font-weight: 700;
|
||||
margin: 0 0 var(--space-xl) 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.posts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
.hero {
|
||||
padding: var(--space-xl) 0;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.posts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,344 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Tag from "@/components/Tag.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
const { slug } = Astro.params;
|
||||
export const prerender = true;
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("posts");
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: { post },
|
||||
}));
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
const { Content } = await post.render();
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date: Date) => {
|
||||
return new Intl.DateTimeFormat("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
// 计算阅读时间
|
||||
const calculateReadingTime = (text: string) => {
|
||||
const wordsPerMinute = 200;
|
||||
const wordCount = text.length;
|
||||
return Math.ceil(wordCount / wordsPerMinute);
|
||||
};
|
||||
|
||||
const readingTime = calculateReadingTime(post.body);
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<h1>Post Slug: {slug}</h1>
|
||||
<Layout title={post.data.title} description={post.data.summary}>
|
||||
<article class="post">
|
||||
<!-- 文章头部 -->
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{post.data.title}</h1>
|
||||
|
||||
<div class="post-meta">
|
||||
<time class="post-date" datetime={post.data.date.toISOString()}>
|
||||
{formatDate(post.data.date)}
|
||||
</time>
|
||||
<span class="separator">·</span>
|
||||
<span class="reading-time">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<circle cx="12" cy="12" r="10" stroke-width="2"/>
|
||||
<polyline points="12 6 12 12 16 14" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{readingTime} 分钟阅读
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{post.data.tags && post.data.tags.length > 0 && (
|
||||
<div class="post-tags">
|
||||
{post.data.tags.map((tag) => <Tag tag={tag} size="medium" />)}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<div class="post-content">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<!-- 文章底部操作 -->
|
||||
<footer class="post-footer">
|
||||
<a href="/" class="back-button">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
返回首页
|
||||
</a>
|
||||
</footer>
|
||||
</article>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.post {
|
||||
max-width: var(--content-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 文章头部 */
|
||||
.post-header {
|
||||
margin-bottom: var(--space-2xl);
|
||||
padding-bottom: var(--space-xl);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: var(--text-h1);
|
||||
line-height: var(--line-h1);
|
||||
font-weight: 800;
|
||||
margin: 0 0 var(--space-lg) 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
font-size: var(--text-small);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.post-date {
|
||||
font-size: var(--text-small);
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--border-color);
|
||||
}
|
||||
|
||||
.reading-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: var(--text-small);
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
/* 文章内容样式 */
|
||||
.post-content {
|
||||
color: var(--text-primary);
|
||||
line-height: var(--line-base);
|
||||
}
|
||||
|
||||
/* Markdown 元素样式 */
|
||||
.post-content :global(h1),
|
||||
.post-content :global(h2),
|
||||
.post-content :global(h3),
|
||||
.post-content :global(h4),
|
||||
.post-content :global(h5),
|
||||
.post-content :global(h6) {
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-top: var(--space-xl);
|
||||
margin-bottom: var(--space-md);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.post-content :global(h1) {
|
||||
font-size: var(--text-h1);
|
||||
margin-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
.post-content :global(h2) {
|
||||
font-size: var(--text-h2);
|
||||
padding-bottom: var(--space-sm);
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.post-content :global(h3) {
|
||||
font-size: var(--text-h3);
|
||||
}
|
||||
|
||||
.post-content :global(p) {
|
||||
margin: var(--space-md) 0;
|
||||
line-height: var(--line-base);
|
||||
}
|
||||
|
||||
.post-content :global(a) {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.post-content :global(a:hover) {
|
||||
border-bottom-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.post-content :global(strong) {
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.post-content :global(em) {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 列表样式 */
|
||||
.post-content :global(ul),
|
||||
.post-content :global(ol) {
|
||||
margin: var(--space-md) 0;
|
||||
padding-left: var(--space-xl);
|
||||
}
|
||||
|
||||
.post-content :global(li) {
|
||||
margin: var(--space-sm) 0;
|
||||
line-height: var(--line-base);
|
||||
}
|
||||
|
||||
.post-content :global(li::marker) {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* 引用样式 */
|
||||
.post-content :global(blockquote) {
|
||||
margin: var(--space-lg) 0;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-left: 4px solid var(--accent-color);
|
||||
background-color: var(--bg-secondary);
|
||||
font-style: italic;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.post-content :global(blockquote p) {
|
||||
margin: var(--space-sm) 0;
|
||||
}
|
||||
|
||||
/* 代码样式 */
|
||||
.post-content :global(code) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
background-color: var(--border-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.post-content :global(pre) {
|
||||
margin: var(--space-lg) 0;
|
||||
padding: var(--space-md);
|
||||
background-color: #1e1e1e;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.post-content :global(pre code) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.post-content :global(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: var(--space-lg) 0;
|
||||
font-size: var(--text-small);
|
||||
}
|
||||
|
||||
.post-content :global(th),
|
||||
.post-content :global(td) {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: 1px solid var(--border-color);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.post-content :global(th) {
|
||||
background-color: var(--bg-secondary);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.post-content :global(tr:nth-child(even)) {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.post-content :global(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-md);
|
||||
margin: var(--space-lg) 0;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.post-content :global(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin: var(--space-xl) 0;
|
||||
}
|
||||
|
||||
/* 文章底部 */
|
||||
.post-footer {
|
||||
margin-top: var(--space-2xl);
|
||||
padding-top: var(--space-xl);
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition-base);
|
||||
font-size: var(--text-small);
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
color: white;
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
.post-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.post-content :global(h1) {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.post-content :global(h2) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.post-content :global(h3) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.post-content :global(pre) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.post-content :global(table) {
|
||||
font-size: var(--text-tiny);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,122 @@
|
||||
@import "./reset.css";
|
||||
|
||||
:root {
|
||||
/* 布局宽度 */
|
||||
--layout-width: 1200px;
|
||||
--content-width: 800px;
|
||||
|
||||
/* 明亮主题配色 */
|
||||
--bg-primary: #FAFAFA;
|
||||
--bg-secondary: #FFFFFF;
|
||||
--text-primary: #1A1A1A;
|
||||
--text-secondary: #666666;
|
||||
--accent-color: #0066FF;
|
||||
--border-color: #E5E5E5;
|
||||
|
||||
/* 字体家族 */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
|
||||
--font-mono: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
|
||||
|
||||
/* 字体尺寸 */
|
||||
--text-h1: 36px;
|
||||
--text-h2: 28px;
|
||||
--text-h3: 22px;
|
||||
--text-base: 17px;
|
||||
--text-small: 14px;
|
||||
--text-tiny: 12px;
|
||||
|
||||
/* 行高 */
|
||||
--line-h1: 1.3;
|
||||
--line-h2: 1.4;
|
||||
--line-h3: 1.4;
|
||||
--line-base: 1.8;
|
||||
--line-small: 1.6;
|
||||
--line-tiny: 1.5;
|
||||
|
||||
/* 间距系统 (8px base) */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
--space-2xl: 48px;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
|
||||
/* 过渡动画 */
|
||||
--transition-fast: 150ms ease-in-out;
|
||||
--transition-base: 200ms ease-out;
|
||||
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 暗黑主题 */
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #0F0F0F;
|
||||
--bg-secondary: #1A1A1A;
|
||||
--text-primary: #E5E5E5;
|
||||
--text-secondary: #A0A0A0;
|
||||
--accent-color: #3B82F6;
|
||||
--border-color: #2A2A2A;
|
||||
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 全局样式 */
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--line-base);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
transition: background-color var(--transition-slow), color var(--transition-slow);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码样式 */
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
background-color: var(--border-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user