beggin/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: beggin:ai
Branches Tags
beggin:main beggin:new-theme beggin:ai2 beggin:ai
..
compare: beggin:ai2
Branches Tags
beggin:new-theme beggin:main beggin:ai2 beggin:ai

2 Commits
ai ... ai2

Author SHA1 Message Date
xy
351184b4c1 feat: ai2 2025-11-21 13:11:03 +08:00
xy
081f072a39 feat: a2 2025-11-21 12:26:58 +08:00
48 changed files with 3495 additions and 6326 deletions
Expand all files Collapse all files

1081
.qoder/quests/blog-style-adjustment-and-feature-expansion.md
View File

File diff suppressed because it is too large Load Diff

510
.qoder/quests/blog-style-optimization.md
View File

@@ -1,510 +0,0 @@
# 博客样式优化设计
## 目标
优化博客的整体视觉呈现，确保风格统一、样式美观，并增强 Markdown 内容渲染和代码块高亮显示能力。
## 背景
当前博客基于 Astro + SolidJS 技术栈，已具备基础样式系统（包括 base.css、typography.css、enhancements.css），并支持暗色模式切换。项目使用 TypeScript 和 PNPM 包管理器，运行于 Node.js 22.21.1 环境。
现有样式系统已建立 CSS 变量体系，覆盖颜色主题、圆角、阴影、过渡动画等设计规范，但在 Markdown 渲染和代码高亮方面存在提升空间。
## 核心需求
### 风格统一性
确保整个站点在视觉呈现上保持一致的设计语言：
- **色彩体系统一**：所有组件遵循统一的 CSS 变量定义，包括亮色和暗色两套主题配色
- **间距规范一致**：页面布局、组件内边距、外边距采用统一的间距标准
- **字体层级清晰**：建立明确的字体大小、行高、字重等级体系
- **交互反馈统一**：hover、focus、active 等状态的视觉反馈保持一致性
### Markdown 渲染优化
提升 Markdown 内容的可读性和视觉表现：
- **标题层级视觉区分**：h1-h6 各级标题具有明显的视觉差异，便于内容层级识别
- **段落排版优化**：合理的行高、段落间距，提升长文阅读体验
- **列表样式美化**：有序列表和无序列表具有清晰的视觉标识
- **引用块样式增强**：blockquote 具有独特的视觉设计，突出引用内容
- **链接交互优化**：链接具有醒目但不突兀的视觉效果和悬停动画
- **图片展示优化**：图片具有适当的边框、圆角、阴影效果，支持放大效果
- **分隔线美化**：hr 标签具有渐变或装饰性样式
- **表格样式优化**：表格具有清晰的边框、斑马纹或悬停高亮效果
### 代码块高亮
实现专业的代码展示能力：
- **语法高亮引擎选型**：选择合适的语法高亮方案（Shiki 或 Prism），支持多种编程语言
- **主题适配**：代码高亮主题需适配亮色和暗色两种模式，确保视觉和谐
- **代码块装饰**：代码块具有语言标识、行号显示、复制按钮等增强功能
- **行内代码区分**：行内 `code` 标签与代码块在视觉上有明确区分
- **代码块容器样式**：代码块具有边框、圆角、阴影、背景色等装饰效果
- **横向滚动优化**：长代码行支持横向滚动，滚动条样式与整体风格匹配
## 设计方案
### 样式系统强化
#### CSS 变量体系扩展
在现有 CSS 变量基础上，补充完善以下变量定义：
**代码相关变量**
- 行内代码背景色、文字色、边框色
- 代码块背景色（需区分亮色和暗色模式）
- 代码块边框色
- 代码行号颜色
- 代码高亮行背景色
**Markdown 元素专用变量**
- 引用块左侧装饰色
- 引用块背景色
- 表格边框色
- 表格斑马纹背景色
- 链接装饰线颜色
**间距规范变量**
- 文章内容最大宽度
- 标题上下边距
- 段落间距
- 列表项间距
#### 排版增强策略
**中英文混排优化**
- 设置适合中文的行高（1.8-2.0）
- 字体栈优先选择系统优化字体
- 字符间距微调，提升可读性
**响应式排版**
- 大屏设备：标准字号（17px）
- 平板设备：适中字号（16px）
- 移动设备：缩小字号（15px），调整行高和间距
### Markdown 渲染方案
#### Astro Markdown 配置
利用 Astro 内置的 Markdown 处理能力，通过配置优化渲染输出：
**配置项规划**
- 启用 GitHub Flavored Markdown（GFM）扩展，支持表格、任务列表等
- 配置自动链接识别
- 启用智能标点符号转换
- 配置标题自动生成 ID，便于锚点跳转
**插件集成考量**
- 评估是否需要引入 remark 或 rehype 插件增强处理能力
- 考虑添加目录生成插件
- 评估是否需要图片懒加载或优化插件
#### 自定义样式映射
针对 Markdown 渲染后的 HTML 结构，编写精准的 CSS 选择器：
**文章容器作用域**
- 所有 Markdown 样式限定在 `article` 或 `.post-content` 作用域内
- 避免全局样式污染
**元素样式定义清单**
- 标题：h1-h6 的字号、字重、颜色、间距、装饰效果
- 段落：行高、间距、文字颜色
- 链接：颜色、下划线样式、悬停效果、过渡动画
- 列表：标记样式、缩进、间距
- 引用块：边框、背景、左侧装饰、引号装饰
- 图片：边框、圆角、阴影、悬停效果
- 表格：边框、表头样式、斑马纹、悬停高亮
- 分隔线：渐变效果或装饰性样式
- 行内代码：背景、边框、颜色、字体
### 代码高亮方案
#### Shiki 语法高亮集成
选择 Shiki 作为代码高亮引擎，原因如下：
- Astro 官方推荐，集成简单
- 基于 VS Code 主题引擎，主题丰富且美观
- 支持服务端渲染，无需客户端 JavaScript
- 支持多语言和自定义主题
#### 主题配置策略
**亮色模式主题**
- 选择柔和、对比度适中的主题（如 GitHub Light、One Light）
- 背景色需与整体页面风格协调
**暗色模式主题**
- 选择护眼、对比度适中的暗色主题（如 One Dark Pro、Night Owl）
- 背景色需与暗色模式整体风格匹配
**主题切换机制**
- 通过 CSS 变量或 data-theme 属性实现主题动态切换
- 确保切换过程平滑，无闪烁
#### 代码块增强功能
**语言标识显示**
- 在代码块顶部或角落显示语言标签
- 标签样式需与整体风格一致
**复制功能**
- 在代码块区域提供复制按钮
- 点击后复制代码内容到剪贴板
- 提供复制成功的视觉反馈
**行号显示（可选）**
- 评估是否需要显示行号
- 行号样式不干扰代码阅读
**代码块容器装饰**
- 边框样式：细边框或无边框，颜色与主题协调
- 圆角效果：使用统一的圆角变量（如 var(--radius-lg)）
- 阴影效果：适度阴影增强层次感（如 var(--shadow-md)）
- 左侧装饰线：渐变色装饰线增强视觉效果
### 样式文件组织
#### 文件结构规划
当前样式文件结构保持不变，在现有基础上增强：
**base.css**
- 补充代码高亮相关 CSS 变量
- 补充 Markdown 渲染相关变量
**typography.css**
- 优化现有文章排版样式
- 补充缺失的 Markdown 元素样式
- 确保所有样式作用域限定在 article 内
**enhancements.css**
- 添加代码块复制按钮样式
- 添加语言标识样式
- 优化表格、引用块等增强效果
**代码高亮主题（新增）**
- 考虑是否需要单独的代码主题样式文件
- 如果使用 Shiki，可能无需额外 CSS 文件
#### 样式优先级与覆盖策略
**导入顺序**
- reset.css → typography.css → enhancements.css
- 确保增强样式可以覆盖基础样式
**选择器特异性控制**
- 避免使用过高权重的选择器
- 优先使用类选择器和属性选择器
- 必要时使用作用域限定
### 响应式设计
#### 断点规划
遵循移动优先原则，定义以下断点：
- 小屏移动设备：<= 480px
- 大屏移动设备：481px - 768px
- 平板设备：769px - 1024px
- 桌面设备：>= 1025px
#### 各断点样式调整策略
**移动设备（<= 768px）**
- 减小标题字号
- 增加段落行高，便于触摸阅读
- 代码块字号适当缩小
- 表格横向滚动处理
- 图片宽度 100%
**平板设备（769px - 1024px）**
- 标题字号适中
- 代码块保持可读性
- 表格可正常展示或滚动
**桌面设备（>= 1025px）**
- 最佳阅读体验
- 充分利用屏幕空间
- 图片可展示大尺寸
### 暗色模式适配
#### 主题切换机制
依托现有的 `data-theme="dark"` 属性实现主题切换：
**颜色变量切换**
- 所有颜色变量在暗色模式下重新定义
- 代码块背景色、文字色适配暗色主题
- 边框、阴影适配暗色环境
**代码高亮主题切换**
- 根据 `data-theme` 属性切换 Shiki 主题
- 确保暗色模式下代码可读性和对比度
**过渡动画**
- 主题切换过程平滑过渡
- 避免颜色突变导致的视觉不适
#### 暗色模式特殊处理
**图片亮度调整**
- 暗色模式下图片亮度略微降低（opacity: 0.9）
- 悬停时恢复正常亮度
**代码块对比度优化**
- 暗色模式代码块背景色需与页面背景有一定区分
- 语法高亮颜色对比度适中，避免刺眼
## 技术实现要点
### Astro 配置调整
在 `astro.config.mjs` 中配置 Markdown 处理选项：
**Markdown 配置项**
- syntaxHighlight：设置为 'shiki'
- shikiConfig：配置 Shiki 主题和选项
- remarkPlugins：可选引入 remark 插件
- rehypePlugins：可选引入 rehype 插件
**配置示例结构**
```
markdown: {
syntaxHighlight: 'shiki',
shikiConfig: {
theme: 亮色主题,
themes: { light: 亮色主题, dark: 暗色主题 },
wrap: 是否换行,
langs: 支持的语言列表
},
remarkPlugins: [...],
rehypePlugins: [...]
}
```
### CSS 变量定义规范
**命名约定**
- 使用 kebab-case 命名法
- 前缀分类：--bg（背景）、--text（文字）、--code（代码）、--border（边框）等
- 语义化命名，便于理解和维护
**亮色与暗色变量对应关系**
- 每个亮色变量在 `[data-theme="dark"]` 中都有对应定义
- 变量名保持一致，仅值不同
### 组件样式隔离
**PostLayout 组件**
- 确保文章内容区域使用 `.post-content` 类包裹
- 所有 Markdown 样式限定在此作用域内
**全局样式与组件样式协同**
- 全局样式定义基础规范
- 组件样式处理特定场景
### 性能优化考量
**CSS 体积控制**
- 避免冗余样式定义
- 使用 CSS 变量减少重复代码
- 生产环境压缩 CSS
**代码高亮性能**
- Shiki 在构建时高亮，无运行时性能损耗
- 避免客户端高亮库增加包体积
**字体加载优化**
- 使用系统字体栈，避免额外字体加载
- 如需自定义字体，采用字体子集化和预加载
## 验收标准
### 风格统一性检查
- 所有页面组件遵循统一的色彩体系
- 间距、圆角、阴影等设计元素保持一致
- 亮色和暗色模式切换流畅，无样式错乱
- 响应式布局在各断点表现正常
### Markdown 渲染质量
- 标题层级清晰，视觉区分明显
- 段落排版舒适，行高和间距合理
- 列表、引用块、表格样式美观
- 链接具有明确的视觉提示和交互反馈
- 图片展示效果良好，支持悬停效果
- 分隔线、行内代码等细节元素样式完善
### 代码高亮效果
- 支持常见编程语言的语法高亮（JavaScript、TypeScript、Python、Go、CSS、HTML 等）
- 代码配色与整体主题协调
- 亮色和暗色模式下代码可读性良好
- 代码块具有清晰的边界和装饰效果
- 行内代码与代码块视觉区分明显
- 复制功能正常工作（如实现）
### 可访问性
- 颜色对比度符合 WCAG AA 标准
- 键盘导航支持良好
- 屏幕阅读器友好
- 减少动画模式（prefers-reduced-motion）生效
### 性能指标
- 页面首次渲染时间无明显增加
- CSS 文件体积控制在合理范围
- 无不必要的客户端 JavaScript 加载
- 代码高亮渲染速度快
## 潜在风险与应对
### 主题切换闪烁
**风险描述**
暗色模式切换时可能出现短暂的白屏或颜色闪烁。
**应对策略**
- 在 HTML 加载初期通过内联脚本读取主题偏好
- 在 CSS 加载前应用主题属性
- 使用 localStorage 持久化主题选择
### 代码高亮主题适配问题
**风险描述**
选择的 Shiki 主题可能与整体风格不匹配。
**应对策略**
- 预先测试多个主题，选择最协调的方案
- 必要时自定义 Shiki 主题配色
- 通过 CSS 变量覆盖部分颜色
### 移动端代码块可读性
**风险描述**
移动设备屏幕小，代码块显示可能不佳。
**应对策略**
- 设置合适的最小字号
- 启用横向滚动，避免代码换行
- 优化移动端代码块内边距
### 长文章性能问题
**风险描述**
包含大量代码块的长文章可能导致渲染性能下降。
**应对策略**
- Shiki 在构建时处理，不影响运行时性能
- 优化 CSS 选择器性能
- 避免过度使用复杂动画
## 后续优化方向
### 交互增强
- 代码块行高亮功能
- 代码差异对比展示
- 图片点击放大查看（Lightbox）
- 文章目录自动生成和锚点跳转
### 内容增强
- 代码注释高亮
- 公式渲染支持（KaTeX 或 MathJax）
- 图表渲染支持（Mermaid）
- 视频嵌入样式优化
### 个性化定制
- 用户可选代码高亮主题
- 字号调节功能
- 阅读进度指示器
- 打印样式优化
### 性能优化
- 关键 CSS 内联
- 非关键样式延迟加载
- 图片懒加载和响应式图片
- 字体加载策略优化
## 潜在风险与应对
### 主题切换闪烁
**风险描述**
暗色模式切换时可能出现短暂的白屏或颜色闪烁。
**应对策略**
- 在 HTML 加载初期通过内联脚本读取主题偏好
- 在 CSS 加载前应用主题属性
- 使用 localStorage 持久化主题选择
### 代码高亮主题适配问题
**风险描述**
选择的 Shiki 主题可能与整体风格不匹配。
**应对策略**
- 预先测试多个主题，选择最协调的方案
- 必要时自定义 Shiki 主题配色
- 通过 CSS 变量覆盖部分颜色
### 移动端代码块可读性
**风险描述**
移动设备屏幕小，代码块显示可能不佳。
**应对策略**
- 设置合适的最小字号
- 启用横向滚动，避免代码换行
- 优化移动端代码块内边距
### 长文章性能问题
**风险描述**
包含大量代码块的长文章可能导致渲染性能下降。
**应对策略**
- Shiki 在构建时处理，不影响运行时性能
- 优化 CSS 选择器性能
- 避免过度使用复杂动画
## 后续优化方向
### 交互增强
- 代码块行高亮功能
- 代码差异对比展示
- 图片点击放大查看（Lightbox）
- 文章目录自动生成和锚点跳转
### 内容增强
- 代码注释高亮
- 公式渲染支持（KaTeX 或 MathJax）
- 图表渲染支持（Mermaid）
- 视频嵌入样式优化
### 个性化定制
- 用户可选代码高亮主题
- 字号调节功能
- 阅读进度指示器
- 打印样式优化
### 性能优化
- 关键 CSS 内联
- 非关键样式延迟加载
- 图片懒加载和响应式图片
- 字体加载策略优化
- 代码高亮渲染速度快

1198
.qoder/quests/personal-blog-design.md Normal file
View File

File diff suppressed because it is too large Load Diff

166
IMPLEMENTATION.md Normal file
View 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; /* 间距 */
/* ... 更多变量 */
}
```
## 总结
成功按照设计文档实现了一个功能完整、美观现代的个人博客系统。所有核心功能都已实现并测试通过,可以直接使用或进一步定制。

21
astro.config.mjs
View File

@@ -2,30 +2,13 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config';
import solidJs from '@astrojs/solid-js'; import solidJs from '@astrojs/solid-js';
import node from '@astrojs/node'; import node from '@astrojs/node';
import sitemap from '@astrojs/sitemap';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: 'https://ua42.com', site: 'https://ua42.com',
output: 'server', output: 'server',
integrations: [ integrations: [solidJs()],
solidJs(),
sitemap()
],
adapter: node({ adapter: node({
mode: 'standalone' mode: 'standalone'
}), })
markdown: {
syntaxHighlight: 'shiki',
shikiConfig: {
themes: {
light: 'github-light',
dark: 'one-dark-pro'
},
wrap: true,
transformers: []
},
remarkPlugins: [],
rehypePlugins: []
}
}); });

3
package.json
View File

@@ -11,11 +11,8 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/node": "^9.5.1", "@astrojs/node": "^9.5.1",
"@astrojs/rss": "^4.0.14",
"@astrojs/sitemap": "^3.6.0",
"@astrojs/solid-js": "^5.1.3", "@astrojs/solid-js": "^5.1.3",
"astro": "^5.15.8", "astro": "^5.15.8",
"fuse.js": "^7.1.0",
"modern-normalize": "^3.0.1", "modern-normalize": "^3.0.1",
"solid-js": "^1.9.10" "solid-js": "^1.9.10"
}, },

89
pnpm-lock.yaml generated
View File

@@ -11,21 +11,12 @@ importers:
'@astrojs/node': '@astrojs/node':
specifier: ^9.5.1 specifier: ^9.5.1
version: 9.5.1(astro@5.15.8(@types/node@24.10.1)(rollup@4.53.2)(typescript@5.9.3)) version: 9.5.1(astro@5.15.8(@types/node@24.10.1)(rollup@4.53.2)(typescript@5.9.3))
'@astrojs/rss':
specifier: ^4.0.14
version: 4.0.14
'@astrojs/sitemap':
specifier: ^3.6.0
version: 3.6.0
'@astrojs/solid-js': '@astrojs/solid-js':
specifier: ^5.1.3 specifier: ^5.1.3
version: 5.1.3(@types/node@24.10.1)(solid-js@1.9.10) version: 5.1.3(@types/node@24.10.1)(solid-js@1.9.10)
astro: astro:
specifier: ^5.15.8 specifier: ^5.15.8
version: 5.15.8(@types/node@24.10.1)(rollup@4.53.2)(typescript@5.9.3) version: 5.15.8(@types/node@24.10.1)(rollup@4.53.2)(typescript@5.9.3)
fuse.js:
specifier: ^7.1.0
version: 7.1.0
modern-normalize: modern-normalize:
specifier: ^3.0.1 specifier: ^3.0.1
version: 3.0.1 version: 3.0.1
@@ -56,12 +47,6 @@ packages:
resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==} resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==}
engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
'@astrojs/rss@4.0.14':
resolution: {integrity: sha512-KCe1imDcADKOOuO/wtKOMDO/umsBD6DWF+94r5auna1jKl5fmlK9vzf+sjA3EyveXA/FoB3khtQ/u/tQgETmTw==}
'@astrojs/sitemap@3.6.0':
resolution: {integrity: sha512-4aHkvcOZBWJigRmMIAJwRQXBS+ayoP5z40OklTXYXhUDhwusz+DyDl+nSshY6y9DvkVEavwNcFO8FD81iGhXjg==}
'@astrojs/solid-js@5.1.3': '@astrojs/solid-js@5.1.3':
resolution: {integrity: sha512-KxfYt4y1d7BuSw6EsN1EaPoGYsIES7bEI6AtTbncuabRUUMZs+mOWOeOdmgnwVLj+jbNbhBjUZsqr77eUviZdw==} resolution: {integrity: sha512-KxfYt4y1d7BuSw6EsN1EaPoGYsIES7bEI6AtTbncuabRUUMZs+mOWOeOdmgnwVLj+jbNbhBjUZsqr77eUviZdw==}
engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
@@ -652,15 +637,9 @@ packages:
'@types/nlcst@2.0.3': '@types/nlcst@2.0.3':
resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==} resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
'@types/node@17.0.45':
resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
'@types/node@24.10.1': '@types/node@24.10.1':
resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==} resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==}
'@types/sax@1.2.7':
resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
'@types/unist@3.0.3': '@types/unist@3.0.3':
resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
@@ -691,9 +670,6 @@ packages:
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
engines: {node: '>= 8'} engines: {node: '>= 8'}
arg@5.0.2:
resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
argparse@2.0.1: argparse@2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -938,10 +914,6 @@ packages:
fast-deep-equal@3.1.3: fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
fast-xml-parser@5.3.2:
resolution: {integrity: sha512-n8v8b6p4Z1sMgqRmqLJm3awW4NX7NkaKPfb3uJIBTSH7Pdvufi3PQ3/lJLQrvxcMYl7JI2jnDO90siPEpD8JBA==}
hasBin: true
fdir@6.5.0: fdir@6.5.0:
resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==} resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
engines: {node: '>=12.0.0'} engines: {node: '>=12.0.0'}
@@ -970,10 +942,6 @@ packages:
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin] os: [darwin]
fuse.js@7.1.0:
resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
engines: {node: '>=10'}
gensync@1.0.0-beta.2: gensync@1.0.0-beta.2:
resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
@@ -1322,9 +1290,6 @@ packages:
parse5@7.3.0: parse5@7.3.0:
resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==} resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
piccolore@0.1.3:
resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==}
picocolors@1.1.1: picocolors@1.1.1:
resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
@@ -1422,9 +1387,6 @@ packages:
engines: {node: '>=18.0.0', npm: '>=8.0.0'} engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true hasBin: true
sax@1.4.3:
resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
semver@6.3.1: semver@6.3.1:
resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
hasBin: true hasBin: true
@@ -1464,11 +1426,6 @@ packages:
sisteransi@1.0.5: sisteransi@1.0.5:
resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
sitemap@8.0.2:
resolution: {integrity: sha512-LwktpJcyZDoa0IL6KT++lQ53pbSrx2c9ge41/SeLTyqy2XUNA6uR4+P9u5IVo5lPeL2arAcOKn1aZAxoYbCKlQ==}
engines: {node: '>=14.0.0', npm: '>=6.0.0'}
hasBin: true
smol-toml@1.5.2: smol-toml@1.5.2:
resolution: {integrity: sha512-QlaZEqcAH3/RtNyet1IPIYPsEWAaYyXXv1Krsi+1L/QHppjX4Ifm8MQsBISz9vE8cHicIq3clogsheili5vhaQ==} resolution: {integrity: sha512-QlaZEqcAH3/RtNyet1IPIYPsEWAaYyXXv1Krsi+1L/QHppjX4Ifm8MQsBISz9vE8cHicIq3clogsheili5vhaQ==}
engines: {node: '>= 18'} engines: {node: '>= 18'}
@@ -1496,9 +1453,6 @@ packages:
resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==} resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
engines: {node: '>= 0.8'} engines: {node: '>= 0.8'}
stream-replace-string@2.0.0:
resolution: {integrity: sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==}
string-width@4.2.3: string-width@4.2.3:
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
engines: {node: '>=8'} engines: {node: '>=8'}
@@ -1518,9 +1472,6 @@ packages:
resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==} resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
engines: {node: '>=12'} engines: {node: '>=12'}
strnum@2.1.1:
resolution: {integrity: sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw==}
tiny-inflate@1.0.3: tiny-inflate@1.0.3:
resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==} resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
@@ -1851,17 +1802,6 @@ snapshots:
dependencies: dependencies:
prismjs: 1.30.0 prismjs: 1.30.0
'@astrojs/rss@4.0.14':
dependencies:
fast-xml-parser: 5.3.2
piccolore: 0.1.3
'@astrojs/sitemap@3.6.0':
dependencies:
sitemap: 8.0.2
stream-replace-string: 2.0.0
zod: 3.25.76
'@astrojs/solid-js@5.1.3(@types/node@24.10.1)(solid-js@1.9.10)': '@astrojs/solid-js@5.1.3(@types/node@24.10.1)(solid-js@1.9.10)':
dependencies: dependencies:
solid-js: 1.9.10 solid-js: 1.9.10
@@ -2366,16 +2306,10 @@ snapshots:
dependencies: dependencies:
'@types/unist': 3.0.3 '@types/unist': 3.0.3
'@types/node@17.0.45': {}
'@types/node@24.10.1': '@types/node@24.10.1':
dependencies: dependencies:
undici-types: 7.16.0 undici-types: 7.16.0
'@types/sax@1.2.7':
dependencies:
'@types/node': 24.10.1
'@types/unist@3.0.3': {} '@types/unist@3.0.3': {}
'@ungap/structured-clone@1.3.0': {} '@ungap/structured-clone@1.3.0': {}
@@ -2397,8 +2331,6 @@ snapshots:
normalize-path: 3.0.0 normalize-path: 3.0.0
picomatch: 2.3.1 picomatch: 2.3.1
arg@5.0.2: {}
argparse@2.0.1: {} argparse@2.0.1: {}
aria-query@5.3.2: {} aria-query@5.3.2: {}
@@ -2704,10 +2636,6 @@ snapshots:
fast-deep-equal@3.1.3: {} fast-deep-equal@3.1.3: {}
fast-xml-parser@5.3.2:
dependencies:
strnum: 2.1.1
fdir@6.5.0(picomatch@4.0.3): fdir@6.5.0(picomatch@4.0.3):
optionalDependencies: optionalDependencies:
picomatch: 4.0.3 picomatch: 4.0.3
@@ -2736,8 +2664,6 @@ snapshots:
fsevents@2.3.3: fsevents@2.3.3:
optional: true optional: true
fuse.js@7.1.0: {}
gensync@1.0.0-beta.2: {} gensync@1.0.0-beta.2: {}
get-east-asian-width@1.4.0: {} get-east-asian-width@1.4.0: {}
@@ -3306,8 +3232,6 @@ snapshots:
dependencies: dependencies:
entities: 6.0.1 entities: 6.0.1
piccolore@0.1.3: {}
picocolors@1.1.1: {} picocolors@1.1.1: {}
picomatch@2.3.1: {} picomatch@2.3.1: {}
@@ -3468,8 +3392,6 @@ snapshots:
'@rollup/rollup-win32-x64-msvc': 4.53.2 '@rollup/rollup-win32-x64-msvc': 4.53.2
fsevents: 2.3.3 fsevents: 2.3.3
sax@1.4.3: {}
semver@6.3.1: {} semver@6.3.1: {}
semver@7.7.3: {} semver@7.7.3: {}
@@ -3545,13 +3467,6 @@ snapshots:
sisteransi@1.0.5: {} sisteransi@1.0.5: {}
sitemap@8.0.2:
dependencies:
'@types/node': 17.0.45
'@types/sax': 1.2.7
arg: 5.0.2
sax: 1.4.3
smol-toml@1.5.2: {} smol-toml@1.5.2: {}
solid-js@1.9.10: solid-js@1.9.10:
@@ -3577,8 +3492,6 @@ snapshots:
statuses@2.0.2: {} statuses@2.0.2: {}
stream-replace-string@2.0.0: {}
string-width@4.2.3: string-width@4.2.3:
dependencies: dependencies:
emoji-regex: 8.0.0 emoji-regex: 8.0.0
@@ -3604,8 +3517,6 @@ snapshots:
dependencies: dependencies:
ansi-regex: 6.2.2 ansi-regex: 6.2.2
strnum@2.1.1: {}
tiny-inflate@1.0.3: {} tiny-inflate@1.0.3: {}
tinyexec@1.0.2: {} tinyexec@1.0.2: {}

181
src/components/ArticleCard.astro
View File

@@ -1,181 +0,0 @@
---
import type { CollectionEntry } from 'astro:content';
import { formatDate } from '@/utils/date';
import { getReadingTime } from '@/utils/reading-time';
interface Props {
post: CollectionEntry<'posts'>;
}
const { post } = Astro.props;
const readingTime = getReadingTime(post.body);
---
<article class="article-card">
<a href={`/posts/${post.slug}`} class="card-link">
<div class="title-row">
<h2 class="title">{post.data.title}</h2>
<span class="category">{post.data.category}</span>
</div>
<p class="description">{post.data.description}</p>
<div class="meta">
<time datetime={post.data.pubDate.toISOString()}>
{formatDate(post.data.pubDate)}
</time>
<span class="separator">·</span>
<span>{readingTime}</span>
</div>
{post.data.tags.length > 0 && (
<div class="tags">
{post.data.tags.map((tag, index) => (
<span class="tag">
#{tag}{index < post.data.tags.length - 1 ? ', ' : ''}
</span>
))}
</div>
)}
</a>
</article>
<style>
.article-card {
padding: 1.75rem 2rem;
background: transparent;
border-radius: 0;
transition: all var(--transition-base);
border: none;
border-bottom: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.article-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: var(--accent-color);
transform: scaleY(0);
transform-origin: top;
transition: transform var(--transition-base);
}
.article-card:hover {
transform: translateY(-2px);
background: var(--bg-secondary);
}
.article-card:hover::before {
transform: scaleY(1);
}
.card-link {
display: block;
color: inherit;
}
.title-row {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 0.75rem;
}
.title {
font-size: 1.625rem;
color: var(--text-heading);
line-height: 1.3;
font-weight: 700;
transition: color var(--transition-base);
flex: 1;
}
.article-card:hover .title {
color: var(--accent-color);
}
.category {
color: var(--accent-secondary);
font-size: 0.875rem;
font-weight: 600;
flex-shrink: 0;
}
.description {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1rem;
font-size: 1rem;
}
.meta {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-tertiary);
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
.separator {
opacity: 0.5;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.tag {
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 400;
transition: color var(--transition-fast);
}
.article-card:hover .tag {
color: var(--accent-secondary);
}
@media (max-width: 768px) {
.article-card {
padding: 1.5rem 1rem;
}
.title {
font-size: 1.375rem;
}
.title-row {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.description {
font-size: 0.9375rem;
}
.meta {
font-size: 0.8125rem;
}
}
@media (max-width: 480px) {
.article-card {
padding: 1.25rem 1rem;
}
.title {
font-size: 1.25rem;
}
.description {
font-size: 0.875rem;
line-height: 1.6;
}
}
</style>

44
src/components/BackToTop.tsx
View File

@@ -1,44 +0,0 @@
import { createSignal, onMount, onCleanup, Show } from 'solid-js';
export default function BackToTop() {
const [isVisible, setIsVisible] = createSignal(false);
onMount(() => {
const handleScroll = () => {
setIsVisible(window.scrollY > 800);
};
window.addEventListener('scroll', handleScroll);
onCleanup(() => window.removeEventListener('scroll', handleScroll));
});
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
return (
<Show when={isVisible()}>
<button
class="back-to-top"
onClick={scrollToTop}
aria-label="返回顶部"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 15l-6-6-6 6"></path>
</svg>
</button>
</Show>
);
}

125
src/components/BaseFooter.astro
View File

@@ -1,28 +1,107 @@
<style> ---
footer { import { metadata } from "@/consts";
background-color: #1a1a1a; const { siteTitle, icpNumber, githubUrl } = metadata;
height: 70px; const currentYear = new Date().getFullYear();
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>
<footer> <footer>
<div class="content"> <div class="content">
<a href="https://beian.miit.gov.cn/#/Integrated/index"> <div class="footer-left">
备案号：鄂ICP备2023000060号-2 <p class="copyright">&copy; {currentYear} {siteTitle}</p>
</a> {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> </div>
</footer> </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>

122
src/components/BaseHeader.astro
View File

@@ -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> <style>
header { header {
height: 60px; height: 64px;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 99999; 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; flex-shrink: 0;
background: #fff; transition: background-color var(--transition-slow), border-color var(--transition-slow);
} }
.main-nav { .main-nav {
max-width: var(--layout-width); max-width: var(--layout-width);
margin: 0 auto; margin: 0 auto;
height: 100%; 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; list-style: none;
display: flex; display: flex;
gap: 20px; gap: var(--space-lg);
height: 100%; 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; align-items: center;
} }
/* element: menu-item */ :global(.theme-toggle) {
.main-nav .menu-item a { background: transparent;
text-decoration: none; border: none;
font-weight: bold; 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> </style>
<header>
<nav class="main-nav">
<ul class="menu">
<li class="menu-item"><a href="/">首页</a></li>
</ul>
</nav>
</header>

12
src/components/Link.astro
View File

@@ -1,12 +0,0 @@
---
interface Props {
href: string;
class?: string;
}
const { href, class: className } = Astro.props;
---
<a href={href} class={className}>
<slot />
</a>

152
src/components/PostCard.astro Normal file
View 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>

157
src/components/SearchButton.tsx
View File

@@ -1,157 +0,0 @@
import { createSignal, Show, For, onMount } from 'solid-js';
import Fuse from 'fuse.js';
import type { SearchIndexItem } from '@/utils/search-index';
export default function SearchButton() {
const [isExpanded, setIsExpanded] = createSignal(false);
const [searchQuery, setSearchQuery] = createSignal('');
const [searchResults, setSearchResults] = createSignal<SearchIndexItem[]>([]);
const [showResults, setShowResults] = createSignal(false);
const [searchIndex, setSearchIndex] = createSignal<SearchIndexItem[]>([]);
const [fuse, setFuse] = createSignal<Fuse<SearchIndexItem> | null>(null);
let inputRef: HTMLInputElement | undefined;
let containerRef: HTMLDivElement | undefined;
// 加载搜索索引
onMount(async () => {
try {
const response = await fetch('/search-index.json');
const data = await response.json();
setSearchIndex(data);
// 初始化 Fuse.js
const fuseInstance = new Fuse(data, {
keys: [
{ name: 'title', weight: 3 },
{ name: 'description', weight: 2 },
{ name: 'tags', weight: 2 },
{ name: 'category', weight: 1.5 },
{ name: 'content', weight: 1 },
],
threshold: 0.3,
includeScore: true,
});
setFuse(fuseInstance);
} catch (error) {
console.error('Failed to load search index:', error);
}
// 点击外部关闭
document.addEventListener('click', handleClickOutside);
return () => document.removeEventListener('click', handleClickOutside);
});
const handleClickOutside = (event: MouseEvent) => {
if (containerRef && !containerRef.contains(event.target as Node)) {
setIsExpanded(false);
setShowResults(false);
}
};
const handleExpand = () => {
setIsExpanded(true);
setTimeout(() => inputRef?.focus(), 100);
};
const handleSearch = (query: string) => {
setSearchQuery(query);
if (!query.trim()) {
setShowResults(false);
setSearchResults([]);
return;
}
const fuseInstance = fuse();
if (!fuseInstance) return;
const results = fuseInstance.search(query);
setSearchResults(results.slice(0, 10).map(r => r.item));
setShowResults(true);
};
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
setIsExpanded(false);
setShowResults(false);
setSearchQuery('');
}
};
return (
<div class="search-container" ref={containerRef}>
<Show
when={isExpanded()}
fallback={
<button
class="search-button"
onClick={handleExpand}
aria-label="搜索"
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
</button>
}
>
<div class="search-input-wrapper">
<input
ref={inputRef}
type="text"
class="search-input"
placeholder="搜索文章..."
value={searchQuery()}
onInput={(e) => handleSearch(e.currentTarget.value)}
onKeyDown={handleKeyDown}
/>
<button
class="search-close"
onClick={() => {
setIsExpanded(false);
setShowResults(false);
setSearchQuery('');
}}
>
✕
</button>
</div>
</Show>
<Show when={showResults() && searchResults().length > 0}>
<div class="search-results">
<For each={searchResults()}>
{(result) => (
<a href={result.url} class="search-result-item">
<div class="result-title">{result.title}</div>
<div class="result-description">{result.description}</div>
<div class="result-meta">
<span class="result-category">{result.category}</span>
<span class="result-date">
{new Date(result.date).toLocaleDateString('zh-CN')}
</span>
</div>
</a>
)}
</For>
</div>
</Show>
<Show when={showResults() && searchQuery() && searchResults().length === 0}>
<div class="search-results">
<div class="no-results">未找到相关文章</div>
</div>
</Show>
</div>
);
}

32
src/components/SiteFooter.astro
View File

@@ -1,32 +0,0 @@
---
const currentYear = new Date().getFullYear();
---
<footer class="site-footer">
<div class="container">
<p>&copy; {currentYear} 42. All rights reserved.</p>
</div>
</footer>
<style>
.site-footer {
border-top: 1px solid var(--border-color);
padding: 2rem 0;
margin-top: auto;
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
}
.container {
max-width: var(--layout-width);
margin: 0 auto;
padding: 0 2rem;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
}
</style>

381
src/components/SiteHeader.astro
View File

@@ -1,381 +0,0 @@
---
import ThemeToggle from './ThemeToggle';
import SearchButton from './SearchButton';
interface Props {
currentPath?: string;
}
const { currentPath = '/' } = Astro.props;
const navItems = [
{ label: '首页', href: '/' },
{ label: '标签', href: '/tags' },
{ label: '分类', href: '/categories' },
{ label: '关于', href: '/about' },
];
---
<header class="site-header">
<div class="container">
<a href="/" class="logo">
<span class="logo-icon"></span>
<span class="logo-text">
<span class="logo-number">42</span><span class="logo-suffix">的博客</span>
</span>
</a>
<nav class="nav">
{navItems.map(item => (
<a
href={item.href}
class:list={['nav-link', { active: currentPath === item.href }]}
>
{item.label}
</a>
))}
<SearchButton client:load />
<ThemeToggle client:load />
</nav>
</div>
</header>
<style>
.site-header {
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
}
@supports (backdrop-filter: blur(10px)) {
.site-header {
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
background: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .site-header {
background: rgba(9, 9, 11, 0.95);
}
}
.container {
max-width: var(--layout-width);
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 700;
transition: transform var(--transition-fast);
}
.logo:hover {
transform: scale(1.05);
}
.logo-icon {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-color);
flex-shrink: 0;
}
.logo-text {
display: flex;
align-items: baseline;
}
.logo-number {
color: var(--accent-color);
font-weight: 700;
}
.logo-suffix {
color: var(--text-secondary);
font-size: 0.9em;
margin-left: 0.1em;
}
.nav {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-link {
color: var(--text-secondary);
transition: all var(--transition-fast);
font-weight: 500;
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--accent-color);
transform: scaleX(0);
transition: transform var(--transition-fast);
}
.nav-link:hover {
color: var(--text-primary);
transform: scale(1.02);
}
.nav-link:hover::after {
transform: scaleX(1);
}
.nav-link.active {
color: var(--text-primary);
font-weight: 600;
}
.nav-link.active::after {
transform: scaleX(1);
}
.nav :global(.search-container) {
position: relative;
}
.nav :global(.search-button) {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
transition: all var(--transition-base);
cursor: pointer;
}
.nav :global(.search-button:hover) {
background: var(--accent-secondary);
border-color: var(--accent-secondary);
box-shadow: var(--shadow-md);
}
.nav :global(.search-button svg) {
color: var(--text-primary);
}
.nav :global(.search-button:hover svg) {
color: white;
}
.nav :global(.search-input-wrapper) {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
padding: 0.5rem 1rem;
min-width: 280px;
transition: all var(--transition-base);
}
.nav :global(.search-input-wrapper:focus-within) {
border-color: var(--accent-secondary);
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}
.nav :global(.search-input) {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 0.9375rem;
color: var(--text-primary);
}
.nav :global(.search-input::placeholder) {
color: var(--text-tertiary);
}
.nav :global(.search-close) {
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--text-tertiary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.nav :global(.search-close:hover) {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.nav :global(.search-results) {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
min-width: 400px;
max-height: 500px;
overflow-y: auto;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
z-index: 1000;
}
.nav :global(.search-result-item) {
display: block;
padding: 1rem;
border-bottom: 1px solid var(--border-color);
transition: background var(--transition-fast);
color: inherit;
}
.nav :global(.search-result-item:last-child) {
border-bottom: none;
}
.nav :global(.search-result-item:hover) {
background: var(--bg-secondary);
}
.nav :global(.result-title) {
font-size: 1rem;
font-weight: 600;
color: var(--text-heading);
margin-bottom: 0.25rem;
}
.nav :global(.result-description) {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nav :global(.result-meta) {
display: flex;
gap: 0.75rem;
font-size: 0.8125rem;
color: var(--text-tertiary);
}
.nav :global(.result-category) {
color: var(--accent-secondary);
font-weight: 500;
}
.nav :global(.no-results) {
padding: 2rem;
text-align: center;
color: var(--text-secondary);
}
.nav :global(.theme-toggle) {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
transition: all var(--transition-base);
cursor: pointer;
}
.nav :global(.theme-toggle:hover) {
background: var(--accent-color);
border-color: var(--accent-color);
box-shadow: var(--shadow-md);
}
.nav :global(.theme-toggle .icon-wrapper) {
position: relative;
width: 20px;
height: 20px;
}
.nav :global(.theme-toggle .icon) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition-base), transform var(--transition-base);
opacity: 0;
transform: rotate(-90deg) scale(0);
}
.nav :global(.theme-toggle .icon.active) {
opacity: 1;
transform: rotate(0) scale(1);
}
.nav :global(.theme-toggle svg) {
width: 100%;
height: 100%;
color: var(--text-primary);
}
.nav :global(.theme-toggle:hover svg) {
color: white;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.nav {
gap: 1rem;
font-size: 0.875rem;
}
.logo {
font-size: 1.25rem;
}
}
@media (max-width: 480px) {
.nav-link:not(:first-child) {
font-size: 0.8125rem;
}
.nav {
gap: 0.75rem;
}
}
</style>

146
src/components/TableOfContents.tsx
View File

@@ -1,146 +0,0 @@
import { createSignal, onMount, onCleanup, For } from 'solid-js';
import type { Heading } from '@/utils/extract-headings';
interface Props {
headings: Heading[];
}
export default function TableOfContents(props: Props) {
const [activeId, setActiveId] = createSignal('');
const [isOpen, setIsOpen] = createSignal(false);
onMount(() => {
// 使用 IntersectionObserver 监听标题元素
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setActiveId(entry.target.id);
}
});
},
{
rootMargin: '-100px 0px -66%',
threshold: 1.0,
}
);
// 观察所有标题元素
props.headings.forEach((heading) => {
const element = document.getElementById(heading.id);
if (element) {
observer.observe(element);
}
});
onCleanup(() => observer.disconnect());
});
const handleClick = (id: string) => {
const element = document.getElementById(id);
if (element) {
const top = element.getBoundingClientRect().top + window.scrollY - 80;
window.scrollTo({ top, behavior: 'smooth' });
}
setIsOpen(false);
};
// 如果标题少于3个，不显示目录
if (props.headings.length < 3) {
return null;
}
return (
<>
{/* 桌面端：侧边固定目录 */}
<nav class="toc-desktop">
<div class="toc-title">目录</div>
<ul class="toc-list">
<For each={props.headings}>
{(heading) => (
<li
class="toc-item"
classList={{
active: activeId() === heading.id,
'level-3': heading.level === 3,
}}
>
<a
href={`#${heading.id}`}
onClick={(e) => {
e.preventDefault();
handleClick(heading.id);
}}
>
{heading.text}
</a>
</li>
)}
</For>
</ul>
</nav>
{/* 移动端：浮动按钮 + 抽屉 */}
<div class="toc-mobile">
<button
class="toc-toggle"
onClick={() => setIsOpen(!isOpen())}
aria-label="目录"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
{isOpen() && (
<>
<div class="toc-overlay" onClick={() => setIsOpen(false)} />
<div class="toc-drawer">
<div class="toc-drawer-header">
<span class="toc-drawer-title">目录</span>
<button
class="toc-drawer-close"
onClick={() => setIsOpen(false)}
>
✕
</button>
</div>
<ul class="toc-drawer-list">
<For each={props.headings}>
{(heading) => (
<li
class="toc-drawer-item"
classList={{
active: activeId() === heading.id,
'level-3': heading.level === 3,
}}
>
<a
href={`#${heading.id}`}
onClick={(e) => {
e.preventDefault();
handleClick(heading.id);
}}
>
{heading.text}
</a>
</li>
)}
</For>
</ul>
</div>
</>
)}
</div>
</>
);
}

51
src/components/Tag.astro Normal file
View 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>

63
src/components/ThemeToggle.tsx
View File

@@ -1,52 +1,49 @@
import { createSignal, onMount } from 'solid-js'; import { createSignal, onMount } from "solid-js";
export default function ThemeToggle() { export default function ThemeToggle() {
const [theme, setTheme] = createSignal<'light' | 'dark'>('light'); const [theme, setTheme] = createSignal<"light" | "dark">("light");
const [isAnimating, setIsAnimating] = createSignal(false);
onMount(() => { onMount(() => {
const currentTheme = document.documentElement.getAttribute('data-theme') as 'light' | 'dark'; // 从 localStorage 读取主题设置，或使用系统偏好
setTheme(currentTheme || 'light'); 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 toggleTheme = () => {
setIsAnimating(true); const newTheme = theme() === "light" ? "dark" : "light";
setTimeout(() => setIsAnimating(false), 600);
const newTheme = theme() === 'light' ? 'dark' : 'light';
setTheme(newTheme); setTheme(newTheme);
document.documentElement.setAttribute('data-theme', newTheme); document.documentElement.setAttribute("data-theme", newTheme);
localStorage.setItem('theme', newTheme); localStorage.setItem("theme", newTheme);
}; };
return ( return (
<button <button
onClick={toggleTheme} onClick={toggleTheme}
class="theme-toggle" class="theme-toggle"
classList={{ 'is-animating': isAnimating() }}
aria-label="切换主题" aria-label="切换主题"
title={theme() === 'light' ? '切换到暗色模式' : '切换到亮色模式'} title={theme() === "light" ? "切换到暗色模式" : "切换到亮色模式"}
> >
<span class="icon-wrapper"> {theme() === "light" ? (
<span class="icon sun" classList={{ 'active': theme() === 'light' }}> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <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"/>
<circle cx="12" cy="12" r="5"/> </svg>
<line x1="12" y1="1" x2="12" y2="3"/> ) : (
<line x1="12" y1="21" x2="12" y2="23"/> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> <circle cx="12" cy="12" r="5" stroke-width="2"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> <line x1="12" y1="1" x2="12" y2="3" stroke-width="2" stroke-linecap="round"/>
<line x1="1" y1="12" x2="3" y2="12"/> <line x1="12" y1="21" x2="12" y2="23" stroke-width="2" stroke-linecap="round"/>
<line x1="21" y1="12" x2="23" y2="12"/> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke-width="2" stroke-linecap="round"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke-width="2" stroke-linecap="round"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> <line x1="1" y1="12" x2="3" y2="12" stroke-width="2" stroke-linecap="round"/>
</svg> <line x1="21" y1="12" x2="23" y2="12" stroke-width="2" stroke-linecap="round"/>
</span> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke-width="2" stroke-linecap="round"/>
<span class="icon moon" classList={{ 'active': theme() === 'dark' }}> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke-width="2" stroke-linecap="round"/>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> </svg>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> )}
</svg>
</span>
</span>
</button> </button>
); );
} }

30
src/consts.ts
View File

@@ -1,7 +1,31 @@
export const metadata = { export const metadata = {
siteTitle: "42的博客", siteTitle: "42的博客",
siteDescription: "分享技术、思考与生活", siteDescription: "分享技术与思考的个人空间",
siteUrl: "https://ua42.com",
author: "42", author: "42",
postsPerPage: 10, 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",
],
} }

19
src/content/config.ts
View File

@@ -1,18 +1,17 @@
import { defineCollection, z } from 'astro:content'; import { defineCollection, z } from 'astro:content';
const posts = defineCollection({ const postsCollection = defineCollection({
type: 'content', type: 'content',
schema: z.object({ schema: z.object({
title: z.string(), title: z.string(),
description: z.string(), date: z.date(),
pubDate: z.coerce.date(), summary: z.string(),
updatedDate: z.coerce.date().optional(), tags: z.array(z.string()).optional(),
author: z.string().default('42'), cover: z.string().optional(),
image: z.string().optional(), author: z.string().optional(),
tags: z.array(z.string()).default([]),
category: z.string().default('未分类'),
draft: z.boolean().default(false),
}), }),
}); });
export const collections = { posts }; export const collections = {
posts: postsCollection,
};

160
src/content/posts/astro-introduction.md Normal file
View 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
View 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 变量，我们可以构建更加优雅和可维护的样式系统。

264
src/content/posts/markdown-test.md
View File

@@ -1,264 +0,0 @@
---
title: "Markdown 渲染测试"
description: "测试博客的 Markdown 渲染能力，包括各种元素和代码高亮"
pubDate: 2024-11-21
author: "42"
tags: ["测试", "Markdown", "代码高亮"]
category: "技术"
draft: false
---
## 标题测试
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
## 段落和文本格式
这是一个普通的段落。Lorem ipsum dolor sit amet, consectetur adipiscing elit. 中文和英文混排测试，确保行高和间距合理。
这是另一个段落，包含**粗体文本**、*斜体文本*和`行内代码`。
## 列表测试
### 无序列表
- 第一项
- 第二项
- 嵌套项 2.1
- 嵌套项 2.2
- 更深层嵌套 2.2.1
- 第三项
### 有序列表
1. 第一步
2. 第二步
1. 子步骤 2.1
2. 子步骤 2.2
3. 第三步
## 链接测试
这是一个[内联链接](https://example.com)。
这是一个[带标题的链接](https://example.com "链接标题")。
## 引用块测试
> 这是一个引用块。
>
> 引用块可以包含多个段落。
>
> 引用块的样式应该与正文有明显区分。
## 代码测试
### 行内代码
使用 `const` 和 `let` 声明变量，用 `console.log()` 输出日志。
### JavaScript 代码块
```javascript
// JavaScript 示例
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);
// ES6+ 特性
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
```
### TypeScript 代码块
```typescript
// TypeScript 示例
interface User {
id: number;
name: string;
email: string;
}
class UserService {
private users: User[] = [];
addUser(user: User): void {
this.users.push(user);
}
getUserById(id: number): User | undefined {
return this.users.find(user => user.id === id);
}
}
const service = new UserService();
service.addUser({ id: 1, name: '张三', email: 'zhang@example.com' });
```
### Python 代码块
```python
# Python 示例
def fibonacci(n):
"""计算斐波那契数列第 n 项"""
if n <= 1:
return n
return fibonacci(n - 1) + fibonacci(n - 2)
# 列表推导式
squares = [x**2 for x in range(10)]
# 字典
user = {
'name': '李四',
'age': 25,
'email': 'li@example.com'
}
print(f"用户: {user['name']}, 年龄: {user['age']}")
```
### CSS 代码块
```css
/* CSS 示例 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
```
### HTML 代码块
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例页面</title>
</head>
<body>
<header class="site-header">
<h1>欢迎</h1>
<nav>
<a href="/">首页</a>
<a href="/about">关于</a>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
</body>
</html>
```
### Go 代码块
```go
// Go 示例
package main
import (
"fmt"
"time"
)
type User struct {
ID int
Name string
Email string
}
func main() {
user := User{
ID: 1,
Name: "王五",
Email: "wang@example.com",
}
fmt.Printf("用户: %s (ID: %d)\n", user.Name, user.ID)
// 并发示例
go func() {
fmt.Println("并发执行")
}()
time.Sleep(time.Second)
}
```
## 表格测试
| 语言 | 类型 | 特点 | 流行度 |
|-----------|---------|---------------|-------|
| JavaScript | 动态 | 灵活，生态丰富 | ⭐⭐⭐⭐⭐ |
| TypeScript | 静态 | 类型安全 | ⭐⭐⭐⭐ |
| Python | 动态 | 简洁，易学 | ⭐⭐⭐⭐⭐ |
| Go | 静态 | 高性能，并发 | ⭐⭐⭐⭐ |
| Rust | 静态 | 内存安全，性能 | ⭐⭐⭐ |
## 图片测试
![示例图片](https://via.placeholder.com/800x400/667eea/ffffff?text=示例图片)
## 分隔线
---
## 混合内容测试
让我们结合多种元素：
1. **列表项包含代码**：使用 `Array.prototype.map()` 进行数组转换
2. **列表项包含链接**：访问 [MDN 文档](https://developer.mozilla.org)
3. **列表项包含强调**：这是*非常重要*的一点
> **提示**：以上测试涵盖了常见的 Markdown 元素。
>
> 确保在亮色和暗色模式下都有良好的显示效果。
```typescript
// 综合示例
interface Config {
theme: 'light' | 'dark';
language: string;
features: string[];
}
const config: Config = {
theme: 'dark',
language: 'zh-CN',
features: ['syntax-highlight', 'responsive', 'dark-mode']
};
```
## 结尾
这个测试文档涵盖了博客系统支持的主要 Markdown 功能。

281
src/content/posts/responsive-design.md Normal file
View 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
View 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 代码更安全、更易维护。

72
src/content/posts/welcome.md
View File

@@ -1,30 +1,62 @@
--- ---
title: "欢迎来到我的博客" title: "欢迎来到我的博客"
description: "这是第一篇博客文章，介绍了博客的功能和技术栈。" date: 2024-11-20
pubDate: 2024-11-21 summary: "这是我的第一篇博客文章，在这里我将分享关于 Web 开发、技术学习和生活思考的内容。让我们一起开启这段精彩的旅程！"
author: "42" tags: ["博客", "日常"]
tags: ["博客", "Astro", "SolidJS"]
category: "技术"
draft: false
--- ---
## 欢迎！ # 欢迎来到我的博客
这是使用 Astro + SolidJS 构建的现代化博客系统。 你好！欢迎来到我的个人博客。这是一个全新的开始，我将在这里记录和分享我的技术学习、开发经验和生活感悟。
### 技术特点 ## 为什么写博客？
- **服务端渲染**：基于 Astro 的 SSR 模式，提供极致的首屏加载速度 写博客有很多好处：
- **响应式组件**：使用 SolidJS 构建高性能的交互式组件
- **TypeScript**：完整的类型支持，提升开发体验
- **内容管理**：使用 Content Collections 管理文章
### 功能亮点 1. **知识沉淀**：将学到的知识系统化整理，加深理解
2. **经验分享**：帮助遇到类似问题的人，传递价值
3. **自我提升**：通过写作锻炼表达能力和思维能力
4. **记录成长**：回顾过去，见证自己的进步
1. 文章分类和标签系统 ## 博客内容规划
2. 搜索功能
3. RSS 订阅
4. 响应式设计
5. 暗色模式支持
开始你的阅读之旅吧！ 在这个博客中，我计划分享以下几类内容：
### 技术文章
- Web 开发相关的技术文章
- 编程语言学习心得
- 开发工具使用技巧
- 项目实战经验
### 学习笔记
记录学习新技术的过程和心得体会，包括但不限于：
```javascript
// 比如学习 JavaScript 的一些技巧
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet("World");
```
### 生活随笔
技术之外，生活中的思考和感悟同样重要。
## 关于这个博客
这个博客使用 [Astro](https://astro.build) 构建，它是一个现代化的静态网站生成器，具有以下特点：
- 🚀 极快的页面加载速度
- 🎨 优雅的开发体验
- 📝 完善的 Markdown 支持
- 🌙 内置主题切换功能
## 最后
感谢你的访问！如果你对我的文章有任何建议或想法，欢迎与我交流。
让我们一起在技术的世界里探索前行！

56
src/layouts/BaseLayout.astro
View File

@@ -1,56 +0,0 @@
---
import '@/styles/base.css';
import { metadata } from '@/consts';
interface Props {
title?: string;
description?: string;
image?: string;
}
const {
title = metadata.siteTitle,
description = metadata.siteDescription,
image = `${metadata.siteUrl}/og-image.jpg`,
} = Astro.props;
const fullTitle = title === metadata.siteTitle ? title : `${title} - ${metadata.siteTitle}`;
---
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<meta name="generator" content={Astro.generator} />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={Astro.url} />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={fullTitle} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="sitemap" href="/sitemap-index.xml" />
<title>{fullTitle}</title>
<script is:inline>
// 主题切换逻辑
const theme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
</script>
</head>
<body>
<slot />
</body>
</html>

62
src/layouts/Layout.astro
View File

@@ -5,11 +5,21 @@ import BaseHeader from "@/components/BaseHeader.astro";
import BaseFooter from "@/components/BaseFooter.astro"; import BaseFooter from "@/components/BaseFooter.astro";
import { metadata } from "@/consts.ts"; 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> <!doctype html>
<html lang="en"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta <meta
@@ -18,12 +28,21 @@ const { siteTitle } = metadata;
/> />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <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> </head>
<body> <body>
<BaseHeader /> <BaseHeader />
<main> <main>
<div class="grid-background"></div>
<slot /> <slot />
</main> </main>
<BaseFooter /> <BaseFooter />
@@ -34,7 +53,7 @@ const { siteTitle } = metadata;
html, html,
body { body {
width: 100%; width: 100%;
height: 100%; min-height: 100vh;
} }
body { body {
@@ -47,34 +66,13 @@ const { siteTitle } = metadata;
max-width: var(--layout-width); max-width: var(--layout-width);
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 16px; padding: var(--space-md);
position: relative;
} }
.grid-background { /* 响应式设计 */
position: absolute; @media (max-width: 640px) {
top: 0; main {
left: 0; padding: var(--space-sm);
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;
} }
</style> </style>

193
src/layouts/PostLayout.astro
View File

@@ -1,193 +0,0 @@
---
import BaseLayout from './BaseLayout.astro';
import { formatDate } from '@/utils/date';
import type { CollectionEntry } from 'astro:content';
import SiteHeader from '@/components/SiteHeader.astro';
import TableOfContents from '@/components/TableOfContents';
import BackToTop from '@/components/BackToTop';
import { extractHeadings } from '@/utils/extract-headings';
import '@/styles/toc.css';
interface Props {
post: CollectionEntry<'posts'>;
readingTime: string;
}
const { post, readingTime } = Astro.props;
const { title, description, pubDate, author, tags, category } = post.data;
const headings = extractHeadings(post.body);
---
<BaseLayout title={title} description={description}>
<div class="layout">
<SiteHeader currentPath="" />
<main class="main">
<TableOfContents headings={headings} client:load />
<BackToTop client:load />
<article class="post">
<header class="post-header">
<h1 class="post-title">{title}</h1>
<div class="post-meta">
<div class="meta-row">
<span class="author">{author}</span>
<span class="separator">·</span>
<time datetime={pubDate.toISOString()}>
{formatDate(pubDate)}
</time>
</div>
<div class="meta-row">
<span class="reading-time">{readingTime}</span>
<span class="separator">·</span>
<span class="category">{category}</span>
</div>
</div>
{tags.length > 0 && (
<div class="post-tags">
{tags.map((tag, index) => (
<a href={`/tags/${tag}`} class="tag">
#{tag}{index < tags.length - 1 ? ', ' : ''}
</a>
))}
</div>
)}
</header>
<div class="post-content">
<slot />
</div>
</article>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; {new Date().getFullYear()} {author}. All rights reserved.</p>
</div>
</footer>
</div>
</BaseLayout>
<style>
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-header {
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
}
.main {
flex: 1;
max-width: 680px;
margin: 0 auto;
padding: 3rem 2rem;
width: 100%;
}
.post-header {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-color);
}
.post-title {
font-size: 2.5rem;
line-height: 1.3;
color: var(--text-heading);
margin-bottom: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.post-meta {
display: flex;
flex-direction: column;
gap: 0.5rem;
color: var(--text-tertiary);
font-size: 0.9375rem;
margin-bottom: 1rem;
}
.meta-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.separator {
opacity: 0.5;
}
.category {
color: var(--accent-secondary);
font-weight: 600;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: 1rem;
}
.tag {
color: var(--text-secondary);
font-size: 0.9375rem;
font-weight: 400;
transition: color var(--transition-fast);
}
.tag:hover {
color: var(--accent-secondary);
}
.post-content {
margin-bottom: 3rem;
}
.site-footer {
border-top: 1px solid var(--border-color);
padding: 2rem 0;
margin-top: auto;
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
}
@media (max-width: 768px) {
.main {
padding: 2rem 1rem;
}
.post-title {
font-size: 2rem;
}
.post-meta {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.main {
padding: 1.5rem 1rem;
}
.post-title {
font-size: 1.75rem;
}
.post-header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
}
}
</style>

469
src/pages/about.astro
View File

@@ -1,283 +1,298 @@
--- ---
import BaseLayout from '@/layouts/BaseLayout.astro'; import Layout from "@/layouts/Layout.astro";
import SiteHeader from '@/components/SiteHeader.astro'; import Tag from "@/components/Tag.astro";
import { metadata } from "@/consts";
const { author, email, githubUrl, aboutBio, skills } = metadata;
--- ---
<BaseLayout title="关于"> <Layout title="关于" description="关于我和这个博客">
<div class="layout"> <article class="about">
<SiteHeader currentPath="/about" /> <!-- 个人简介区域 -->
<section class="profile-section">
<main class="main"> <div class="avatar-container">
<article class="about-content"> <div class="avatar">
<h1>关于本站</h1> <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)"/>
<section> <circle cx="50" cy="35" r="15" fill="white" opacity="0.9"/>
<h2>技术栈</h2> <path d="M25 75 Q25 55, 50 55 T75 75" fill="white" opacity="0.9"/>
<p>本博客基于现代化的技术栈构建：</p> <defs>
<ul> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<li><strong>Astro</strong> - 现代化的静态网站生成器</li> <stop offset="0%" style="stop-color:#0066FF;stop-opacity:1" />
<li><strong>SolidJS</strong> - 高性能的响应式UI框架</li> <stop offset="100%" style="stop-color:#7B1FA2;stop-opacity:1" />
<li><strong>TypeScript</strong> - 类型安全的开发体验</li> </linearGradient>
<li><strong>Docker</strong> - 容器化部署方案</li> </defs>
</ul> </svg>
</section> </div>
<section>
<h2>关于作者</h2>
<p>42 - 一个热爱技术、喜欢折腾的开发者。</p>
<p>在这里分享技术心得、项目经验和生活感悟。</p>
</section>
<section>
<h2>联系方式</h2>
<p>欢迎通过以下方式与我交流：</p>
<ul>
<li>网站：<a href="https://ua42.com">ua42.com</a></li>
<li>Email: hello@ua42.com</li>
</ul>
</section>
</article>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
</div> </div>
</footer>
</div> <h1 class="page-title">关于我</h1>
</BaseLayout>
<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> <style>
.layout { .about {
display: flex; max-width: var(--content-width);
flex-direction: column; margin: 0 auto;
min-height: 100vh;
} }
.site-header { /* 个人简介区域 */
.profile-section {
text-align: center;
margin-bottom: var(--space-2xl);
padding-bottom: var(--space-2xl);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
} }
@supports (backdrop-filter: blur(10px)) { .avatar-container {
.site-header { margin-bottom: var(--space-xl);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
background: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .site-header {
background: rgba(15, 23, 42, 0.95);
}
} }
.container { .avatar {
max-width: var(--layout-width); width: 120px;
height: 120px;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; border-radius: 50%;
display: flex; overflow: hidden;
justify-content: space-between; box-shadow: var(--shadow-md);
align-items: center;
} }
.logo { .avatar svg {
font-size: 1.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav {
display: flex;
gap: 2rem;
}
.nav a {
color: var(--text-secondary);
transition: color var(--transition-fast);
font-weight: 500;
position: relative;
}
.nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%; width: 100%;
height: 2px; height: 100%;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-fast);
} }
.nav a:hover { .page-title {
color: var(--text-primary); font-size: var(--text-h1);
} line-height: var(--line-h1);
.nav a:hover::after {
transform: scaleX(1);
}
.main {
flex: 1;
max-width: 800px;
margin: 0 auto;
padding: 3rem 2rem;
width: 100%;
}
.about-content h1 {
font-size: 3rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 3rem;
font-weight: 800; font-weight: 800;
margin: 0 0 var(--space-lg) 0;
color: var(--text-primary);
} }
.about-content section { .bio {
margin-bottom: 3rem; max-width: 600px;
padding: 2rem; margin: 0 auto;
background: var(--bg-secondary); text-align: left;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
transition: transform var(--transition-base), box-shadow var(--transition-base);
} }
.about-content section:hover { .bio p {
transform: translateY(-2px); font-size: var(--text-base);
box-shadow: var(--shadow-lg); line-height: var(--line-base);
color: var(--text-secondary);
margin-bottom: var(--space-md);
} }
.about-content h2 { /* 技能区域 */
font-size: 1.875rem; .skills-section {
color: var(--text-heading); margin-bottom: var(--space-2xl);
margin-bottom: 1.25rem; 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; font-weight: 700;
position: relative; margin: 0 0 var(--space-lg) 0;
padding-left: 1rem;
}
.about-content h2::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 70%;
background: var(--gradient-primary);
border-radius: var(--radius-sm);
}
.about-content p {
line-height: 1.8;
color: var(--text-primary);
margin-bottom: 1rem;
}
.about-content ul {
list-style: none;
padding-left: 0;
color: var(--text-primary); color: var(--text-primary);
} }
.about-content li { .skills-cloud {
margin-bottom: 0.75rem; display: flex;
line-height: 1.8; flex-wrap: wrap;
padding-left: 1.75rem; gap: var(--space-md);
position: relative; justify-content: center;
} }
.about-content li::before { /* 联系方式区域 */
content: '▸'; .contact-section {
position: absolute; margin-bottom: var(--space-2xl);
left: 0; padding-bottom: var(--space-2xl);
color: var(--accent-color); border-bottom: 1px solid var(--border-color);
font-weight: bold;
} }
.about-content a { .contact-links {
color: var(--link-color); 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; text-decoration: none;
transition: all var(--transition-base);
font-weight: 500; font-weight: 500;
border-bottom: 2px solid transparent; }
.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); transition: border-color var(--transition-fast);
} }
.about-content a:hover { .blog-info a:hover {
color: var(--link-hover); border-bottom-color: var(--accent-color);
border-bottom-color: var(--link-hover);
} }
.site-footer { .tech-stack {
border-top: 1px solid var(--border-color); display: grid;
padding: 2rem 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
margin-top: auto; gap: var(--space-md);
text-align: center; 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); color: var(--text-secondary);
font-size: 0.9rem; font-weight: 600;
} }
@media (max-width: 768px) { .tech-item span {
.container { font-size: var(--text-base);
padding: 0 1rem; color: var(--text-primary);
} font-weight: 500;
.nav {
gap: 1rem;
font-size: 0.875rem;
}
.logo {
font-size: 1.25rem;
}
.main {
padding: 2rem 1rem;
}
.about-content h1 {
font-size: 2rem;
margin-bottom: 2rem;
}
.about-content section {
padding: 1.5rem;
margin-bottom: 2rem;
}
.about-content h2 {
font-size: 1.5rem;
}
} }
@media (max-width: 480px) { /* 响应式设计 */
.nav a:not(:first-child) { @media (max-width: 640px) {
font-size: 0.8125rem; .page-title {
font-size: 28px;
} }
.about-content h1 { .section-title {
font-size: 1.75rem; font-size: 24px;
} }
.about-content section { .bio {
padding: 1.25rem; text-align: left;
} }
.about-content h2 { .contact-links {
font-size: 1.375rem; flex-direction: column;
align-items: stretch;
}
.contact-link {
justify-content: center;
}
.tech-stack {
grid-template-columns: 1fr;
} }
} }
</style> </style>

292
src/pages/categories/[category].astro
View File

@@ -1,292 +0,0 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';
import ArticleCard from '@/components/ArticleCard.astro';
import ThemeToggle from '@/components/ThemeToggle';
const { category } = Astro.params;
if (!category) {
return Astro.redirect('/404');
}
const allPosts = await getCollection('posts', ({ data }) => !data.draft);
const posts = allPosts
.filter(post => post.data.category === category)
.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
if (posts.length === 0) {
return Astro.redirect('/categories');
}
---
<BaseLayout title={`分类: ${category}`}>
<div class="layout">
<header class="site-header">
<div class="container">
<a href="/" class="logo">42的博客</a>
<nav class="nav">
<a href="/">首页</a>
<a href="/tags">标签</a>
<a href="/categories">分类</a>
<a href="/about">关于</a>
<ThemeToggle client:load />
</nav>
</div>
</header>
<main class="main">
<div class="page-header">
<h1 class="page-title">分类: {category}</h1>
<p class="post-count">{posts.length} 篇文章</p>
</div>
<div class="posts-list">
{posts.map(post => (
<ArticleCard post={post} />
))}
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
</div>
</footer>
</div>
</BaseLayout>
<style>
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-header {
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
}
@supports (backdrop-filter: blur(10px)) {
.site-header {
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
background: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .site-header {
background: rgba(15, 23, 42, 0.95);
}
}
.container {
max-width: var(--layout-width);
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: transform var(--transition-fast);
}
.logo:hover {
transform: scale(1.05);
}
.nav {
display: flex;
gap: 2rem;
align-items: center;
}
.nav a {
color: var(--text-secondary);
transition: color var(--transition-fast);
font-weight: 500;
position: relative;
}
.nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-fast);
}
.nav a:hover {
color: var(--text-primary);
}
.nav a:hover::after {
transform: scaleX(1);
}
.nav :global(.theme-toggle) {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
transition: all var(--transition-base);
cursor: pointer;
}
.nav :global(.theme-toggle:hover) {
background: var(--accent-color);
border-color: var(--accent-color);
transform: rotate(180deg);
box-shadow: var(--shadow-md);
}
.nav :global(.theme-toggle .icon-wrapper) {
position: relative;
width: 20px;
height: 20px;
}
.nav :global(.theme-toggle .icon) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition-base), transform var(--transition-base);
opacity: 0;
transform: rotate(-180deg) scale(0);
}
.nav :global(.theme-toggle .icon.active) {
opacity: 1;
transform: rotate(0) scale(1);
}
.nav :global(.theme-toggle.is-animating) {
animation: spin 0.6s ease-in-out;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.nav :global(.theme-toggle svg) {
width: 100%;
height: 100%;
color: var(--text-primary);
}
.nav :global(.theme-toggle:hover svg) {
color: white;
}
.main {
flex: 1;
max-width: 900px;
margin: 0 auto;
padding: 3rem 2rem;
width: 100%;
}
.page-header {
margin-bottom: 3rem;
}
.page-title {
font-size: 2.75rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.75rem;
font-weight: 800;
}
.post-count {
color: var(--text-tertiary);
font-size: 1.125rem;
}
.posts-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.site-footer {
border-top: 1px solid var(--border-color);
padding: 2rem 0;
margin-top: auto;
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.nav {
gap: 1rem;
font-size: 0.875rem;
}
.logo {
font-size: 1.25rem;
}
.main {
padding: 2rem 1rem;
}
.page-title {
font-size: 2rem;
}
.post-count {
font-size: 1rem;
}
.posts-list {
gap: 1rem;
}
}
@media (max-width: 480px) {
.nav a:not(:first-child) {
font-size: 0.8125rem;
}
.page-title {
font-size: 1.75rem;
}
}
</style>

358
src/pages/categories/index.astro
View File

@@ -1,358 +0,0 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';
import ThemeToggle from '@/components/ThemeToggle';
const posts = await getCollection('posts', ({ data }) => !data.draft);
// 统计所有分类
const categoryCount = new Map<string, number>();
posts.forEach(post => {
const category = post.data.category;
categoryCount.set(category, (categoryCount.get(category) || 0) + 1);
});
// 按文章数量排序
const sortedCategories = Array.from(categoryCount.entries())
.sort((a, b) => b[1] - a[1]);
---
<BaseLayout title="分类">
<div class="layout">
<header class="site-header">
<div class="container">
<a href="/" class="logo">42的博客</a>
<nav class="nav">
<a href="/">首页</a>
<a href="/tags">标签</a>
<a href="/categories">分类</a>
<a href="/about">关于</a>
<ThemeToggle client:load />
</nav>
</div>
</header>
<main class="main">
<h1 class="page-title">分类</h1>
<div class="categories-list">
{sortedCategories.map(([category, count]) => (
<a href={`/categories/${category}`} class="category-item">
<span class="category-name">{category}</span>
<span class="category-count">{count} 篇</span>
</a>
))}
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
</div>
</footer>
</div>
</BaseLayout>
<style>
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-header {
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
}
@supports (backdrop-filter: blur(10px)) {
.site-header {
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
background: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .site-header {
background: rgba(15, 23, 42, 0.95);
}
}
.container {
max-width: var(--layout-width);
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: transform var(--transition-fast);
}
.logo:hover {
transform: scale(1.05);
}
.nav {
display: flex;
gap: 2rem;
align-items: center;
}
.nav a {
color: var(--text-secondary);
transition: color var(--transition-fast);
font-weight: 500;
position: relative;
}
.nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-fast);
}
.nav a:hover {
color: var(--text-primary);
}
.nav a:hover::after {
transform: scaleX(1);
}
.nav :global(.theme-toggle) {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
transition: all var(--transition-base);
cursor: pointer;
}
.nav :global(.theme-toggle:hover) {
background: var(--accent-color);
border-color: var(--accent-color);
transform: rotate(180deg);
box-shadow: var(--shadow-md);
}
.nav :global(.theme-toggle .icon-wrapper) {
position: relative;
width: 20px;
height: 20px;
}
.nav :global(.theme-toggle .icon) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition-base), transform var(--transition-base);
opacity: 0;
transform: rotate(-180deg) scale(0);
}
.nav :global(.theme-toggle .icon.active) {
opacity: 1;
transform: rotate(0) scale(1);
}
.nav :global(.theme-toggle.is-animating) {
animation: spin 0.6s ease-in-out;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.nav :global(.theme-toggle svg) {
width: 100%;
height: 100%;
color: var(--text-primary);
}
.nav :global(.theme-toggle:hover svg) {
color: white;
}
.main {
flex: 1;
max-width: 900px;
margin: 0 auto;
padding: 3rem 2rem;
width: 100%;
}
.page-title {
font-size: 3rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 3rem;
font-weight: 800;
}
.categories-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.category-item {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 2rem 1.5rem;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
transition: all var(--transition-base);
color: var(--text-primary);
position: relative;
overflow: hidden;
}
.category-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.category-item:hover {
background: var(--accent-color);
color: white;
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--accent-color);
}
.category-item:hover::before {
transform: scaleX(1);
}
.category-name {
font-size: 1.375rem;
font-weight: 700;
}
.category-count {
font-size: 0.9rem;
opacity: 0.8;
}
.site-footer {
border-top: 1px solid var(--border-color);
padding: 2rem 0;
margin-top: auto;
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.nav {
gap: 1rem;
font-size: 0.875rem;
}
.logo {
font-size: 1.25rem;
}
.main {
padding: 2rem 1rem;
}
.page-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.categories-list {
grid-template-columns: 1fr;
gap: 1rem;
}
.category-item {
padding: 1.5rem 1.25rem;
}
.category-name {
font-size: 1.25rem;
}
.category-count {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.nav a:not(:first-child) {
font-size: 0.8125rem;
}
.page-title {
font-size: 1.75rem;
}
.category-item {
padding: 1.25rem 1rem;
}
.category-name {
font-size: 1.125rem;
}
}
</style>

342
src/pages/index.astro
View File

@@ -1,295 +1,119 @@
--- ---
import BaseLayout from '@/layouts/BaseLayout.astro'; import Layout from "@/layouts/Layout.astro";
import { getCollection } from 'astro:content'; import PostCard from "@/components/PostCard.astro";
import ArticleCard from '@/components/ArticleCard.astro'; import { getCollection } from "astro:content";
import SiteHeader from '@/components/SiteHeader.astro'; import { metadata } from "@/consts";
const posts = await getCollection('posts', ({ data }) => !data.draft); const { heroTitle, heroDescription } = metadata;
const sortedPosts = posts.sort((a, b) =>
b.data.pubDate.getTime() - a.data.pubDate.getTime() // 获取所有文章并按日期排序
const posts = (await getCollection("posts")).sort(
(a, b) => b.data.date.getTime() - a.data.date.getTime()
); );
// 获取所有标签
const allTags = [...new Set(posts.flatMap(post => post.data.tags))];
const topTags = allTags.slice(0, 8);
--- ---
<BaseLayout> <Layout title="首页">
<div class="layout"> <!-- Hero 区域 -->
<SiteHeader currentPath="/" /> <section class="hero">
<div class="hero-content">
<h1 class="hero-title">{heroTitle}</h1>
<p class="hero-description">{heroDescription}</p>
</div>
</section>
<main class="main"> <!-- 文章列表 -->
<div class="hero"> <section class="posts-section">
<div class="hero-content"> <h2 class="section-title">最新文章</h2>
<h1>42的博客</h1> <div class="posts-grid">
<p class="subtitle">分享技术、思考与生活</p> {posts.map((post) => (
<p class="description">在这里记录开发过程中的思考，分享工程实践经验，探索技术的可能性。</p> <PostCard
</div> title={post.data.title}
<div class="hero-stats"> date={post.data.date}
<div class="stat-item"> summary={post.data.summary}
<div class="stat-number">{sortedPosts.length}</div> slug={post.slug}
<div class="stat-label">篇文章</div> tags={post.data.tags}
</div> />
<div class="stat-item"> ))}
<div class="stat-number">{allTags.length}</div> </div>
<div class="stat-label">个标签</div> </section>
</div> </Layout>
<div class="tags-preview">
<div class="tags-title">热门标签</div>
<div class="tags-list">
{topTags.map(tag => (
<a href={`/tags/${tag}`} class="tag-item">#{tag}</a>
))}
</div>
</div>
</div>
</div>
<div class="posts-section">
<h2 class="section-title">最新文章</h2>
<div class="posts-list">
{sortedPosts.map(post => (
<ArticleCard post={post} />
))}
</div>
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
</div>
</footer>
</div>
</BaseLayout>
<style> <style>
.layout { /* Hero 区域样式 */
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-header {
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
}
.main {
flex: 1;
max-width: 760px;
margin: 0 auto;
padding: 0 2rem 3rem;
width: 100%;
}
.hero { .hero {
padding: 5rem 0; padding: var(--space-2xl) 0;
margin-bottom: 4rem; text-align: center;
display: grid; background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg);
gap: 4rem; margin-bottom: var(--space-2xl);
align-items: start;
} }
.hero-content { .hero-content {
text-align: left; max-width: 800px;
margin: 0 auto;
padding: 0 var(--space-md);
} }
.hero h1 { .hero-title {
font-size: 3rem; font-size: var(--text-h1);
color: var(--text-heading); line-height: var(--line-h1);
margin-bottom: 1rem;
font-weight: 800; font-weight: 800;
letter-spacing: -0.02em; margin: 0 0 var(--space-md) 0;
position: relative; 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 h1::after { .hero-description {
content: ''; font-size: var(--text-h3);
position: absolute; line-height: var(--line-h3);
bottom: -0.5rem;
left: 0;
width: 80px;
height: 5px;
background: var(--accent-color);
border-radius: 2px;
}
.subtitle {
font-size: 1.5rem;
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 1rem; margin: 0;
margin-top: 1.5rem;
}
.description {
font-size: 1.0625rem;
color: var(--text-secondary);
line-height: 1.7;
max-width: 500px;
}
.hero-stats {
display: flex;
flex-direction: column;
gap: 2rem;
}
.stat-item {
text-align: center;
padding: 1.5rem;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border-left: 4px solid var(--accent-color);
}
.stat-number {
font-size: 3rem;
font-weight: 800;
color: var(--accent-color);
line-height: 1;
}
.stat-label {
font-size: 0.875rem;
color: var(--text-secondary);
margin-top: 0.5rem;
}
.tags-preview {
padding: 1.5rem;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
}
.tags-title {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 1rem;
font-weight: 600;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.tag-item {
color: var(--text-secondary);
font-size: 0.875rem;
transition: color var(--transition-fast);
}
.tag-item:hover {
color: var(--accent-secondary);
} }
/* 文章区域 */
.posts-section { .posts-section {
margin-bottom: 3rem; margin-bottom: var(--space-2xl);
} }
.section-title { .section-title {
font-size: 1.5rem; font-size: var(--text-h2);
line-height: var(--line-h2);
font-weight: 700; font-weight: 700;
color: var(--text-heading); margin: 0 0 var(--space-xl) 0;
margin-bottom: 2rem; color: var(--text-primary);
padding-left: 1rem;
border-left: 4px solid var(--accent-color);
} }
.posts-list { .posts-grid {
display: flex; display: grid;
flex-direction: column; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 0; gap: var(--space-lg);
} }
.site-footer { /* 响应式设计 */
border-top: 1px solid var(--border-color); @media (max-width: 640px) {
padding: 2rem 0;
margin-top: auto;
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
}
@media (max-width: 992px) {
.hero { .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; grid-template-columns: 1fr;
gap: 3rem; gap: var(--space-md);
} }
.hero-stats { .section-title {
flex-direction: row; font-size: 24px;
gap: 1rem;
}
.stat-item {
flex: 1;
}
.tags-preview {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
.main {
padding: 0 1rem 2rem;
}
.hero {
padding: 3rem 0;
margin-bottom: 3rem;
}
.hero h1 {
font-size: 2.25rem;
}
.subtitle {
font-size: 1.25rem;
}
.description {
font-size: 1rem;
}
.hero-stats {
flex-direction: column;
}
.stat-number {
font-size: 2.5rem;
}
}
@media (max-width: 480px) {
.hero {
padding: 2rem 0;
margin-bottom: 2rem;
}
.hero h1 {
font-size: 2rem;
}
.subtitle {
font-size: 1.125rem;
}
.description {
font-size: 0.9375rem;
}
.stat-number {
font-size: 2rem;
} }
} }
</style> </style>

352
src/pages/posts/[...slug].astro
View File

@@ -1,24 +1,344 @@
--- ---
import { getCollection, getEntry } from 'astro:content'; import Layout from "@/layouts/Layout.astro";
import PostLayout from '@/layouts/PostLayout.astro'; import Tag from "@/components/Tag.astro";
import { getReadingTime } from '@/utils/reading-time'; import { getCollection } from "astro:content";
const { slug } = Astro.params; export const prerender = true;
if (!slug) { export async function getStaticPaths() {
return Astro.redirect('/404'); const posts = await getCollection("posts");
} return posts.map((post) => ({
params: { slug: post.slug },
const post = await getEntry('posts', slug); props: { post },
}));
if (!post || post.data.draft) {
return Astro.redirect('/404');
} }
const { post } = Astro.props;
const { Content } = await post.render(); const { Content } = await post.render();
const readingTime = getReadingTime(post.body);
// 格式化日期
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);
--- ---
<PostLayout post={post} readingTime={readingTime}> <Layout title={post.data.title} description={post.data.summary}>
<Content /> <article class="post">
</PostLayout> <!-- 文章头部 -->
<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>

25
src/pages/rss.xml.ts
View File

@@ -1,25 +0,0 @@
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import { metadata } from '@/consts';
import type { APIContext } from 'astro';
export async function GET(context: APIContext) {
const posts = await getCollection('posts', ({ data }) => !data.draft);
return rss({
title: metadata.siteTitle,
description: metadata.siteDescription,
site: context.site || metadata.siteUrl,
items: posts
.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
.map(post => ({
title: post.data.title,
description: post.data.description,
pubDate: post.data.pubDate,
link: `/posts/${post.slug}/`,
categories: [post.data.category, ...post.data.tags],
author: post.data.author,
})),
customData: `<language>zh-CN</language>`,
});
}

14
src/pages/search-index.json.ts
View File

@@ -1,14 +0,0 @@
import type { APIRoute } from 'astro';
import { generateSearchIndex } from '@/utils/search-index';
export const GET: APIRoute = async () => {
const searchIndex = await generateSearchIndex();
return new Response(JSON.stringify(searchIndex), {
status: 200,
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'public, max-age=3600',
},
});
};

407
src/pages/tags/[tag].astro
View File

@@ -1,407 +0,0 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';
import { formatDate } from '@/utils/date';
import { getReadingTime } from '@/utils/reading-time';
import ThemeToggle from '@/components/ThemeToggle';
export async function getStaticPaths() {
const posts = await getCollection('posts', ({ data }) => !data.draft);
const tags = new Set<string>();
posts.forEach(post => {
post.data.tags.forEach(tag => tags.add(tag));
});
return Array.from(tags).map(tag => ({
params: { tag },
props: {
posts: posts.filter(post => post.data.tags.includes(tag))
.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
},
}));
}
const { tag } = Astro.params;
const { posts } = Astro.props;
---
<BaseLayout title={`标签: ${tag}`}>
<div class="layout">
<header class="site-header">
<div class="container">
<a href="/" class="logo">42的博客</a>
<nav class="nav">
<a href="/">首页</a>
<a href="/tags">标签</a>
<a href="/categories">分类</a>
<a href="/about">关于</a>
<ThemeToggle client:load />
</nav>
</div>
</header>
<main class="main">
<div class="page-header">
<h1 class="page-title">标签: #{tag}</h1>
<p class="post-count">{posts.length} 篇文章</p>
</div>
<div class="posts-list">
{posts.map(post => {
const readingTime = getReadingTime(post.body);
return (
<article class="post-card">
<a href={`/posts/${post.slug}`} class="post-link">
<h2 class="post-title">{post.data.title}</h2>
<p class="post-description">{post.data.description}</p>
<div class="post-meta">
<time datetime={post.data.pubDate.toISOString()}>
{formatDate(post.data.pubDate)}
</time>
<span class="separator">·</span>
<span>{readingTime}</span>
<span class="separator">·</span>
<span class="category">{post.data.category}</span>
</div>
</a>
</article>
);
})}
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
</div>
</footer>
</div>
</BaseLayout>
<style>
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-header {
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
}
@supports (backdrop-filter: blur(10px)) {
.site-header {
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
background: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .site-header {
background: rgba(15, 23, 42, 0.95);
}
}
.container {
max-width: var(--layout-width);
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: transform var(--transition-fast);
}
.logo:hover {
transform: scale(1.05);
}
.nav {
display: flex;
gap: 2rem;
align-items: center;
}
.nav a {
color: var(--text-secondary);
transition: color var(--transition-fast);
font-weight: 500;
position: relative;
}
.nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-fast);
}
.nav a:hover {
color: var(--text-primary);
}
.nav a:hover::after {
transform: scaleX(1);
}
.nav :global(.theme-toggle) {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
transition: all var(--transition-base);
cursor: pointer;
}
.nav :global(.theme-toggle:hover) {
background: var(--accent-color);
border-color: var(--accent-color);
transform: rotate(180deg);
box-shadow: var(--shadow-md);
}
.nav :global(.theme-toggle .icon-wrapper) {
position: relative;
width: 20px;
height: 20px;
}
.nav :global(.theme-toggle .icon) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition-base), transform var(--transition-base);
opacity: 0;
transform: rotate(-180deg) scale(0);
}
.nav :global(.theme-toggle .icon.active) {
opacity: 1;
transform: rotate(0) scale(1);
}
.nav :global(.theme-toggle.is-animating) {
animation: spin 0.6s ease-in-out;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.nav :global(.theme-toggle svg) {
width: 100%;
height: 100%;
color: var(--text-primary);
}
.nav :global(.theme-toggle:hover svg) {
color: white;
}
.main {
flex: 1;
max-width: 900px;
margin: 0 auto;
padding: 3rem 2rem;
width: 100%;
}
.page-header {
margin-bottom: 3rem;
}
.page-title {
font-size: 2.75rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.75rem;
font-weight: 800;
}
.post-count {
color: var(--text-tertiary);
font-size: 1.125rem;
}
.posts-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.post-card {
padding: 2rem;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
position: relative;
overflow: hidden;
}
.post-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.post-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
background: var(--bg-primary);
}
.post-card:hover::before {
transform: scaleX(1);
}
.post-link {
display: block;
color: inherit;
}
.post-title {
font-size: 1.75rem;
color: var(--text-heading);
margin-bottom: 0.75rem;
line-height: 1.3;
font-weight: 700;
transition: color var(--transition-base);
}
.post-card:hover .post-title {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.post-description {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1rem;
}
.post-meta {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-tertiary);
font-size: 0.875rem;
}
.separator {
opacity: 0.5;
}
.site-footer {
border-top: 1px solid var(--border-color);
padding: 2rem 0;
margin-top: auto;
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.nav {
gap: 1rem;
font-size: 0.875rem;
}
.logo {
font-size: 1.25rem;
}
.main {
padding: 2rem 1rem;
}
.page-title {
font-size: 2rem;
}
.post-count {
font-size: 1rem;
}
.posts-list {
gap: 1rem;
}
.post-card {
padding: 1.5rem;
}
.post-title {
font-size: 1.5rem;
}
.post-description {
font-size: 0.9375rem;
}
}
@media (max-width: 480px) {
.nav a:not(:first-child) {
font-size: 0.8125rem;
}
.page-title {
font-size: 1.75rem;
}
.post-card {
padding: 1.25rem;
}
.post-title {
font-size: 1.375rem;
}
}
</style>

346
src/pages/tags/index.astro
View File

@@ -1,346 +0,0 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';
import SiteHeader from '@/components/SiteHeader.astro';
const posts = await getCollection('posts', ({ data }) => !data.draft);
// 统计所有标签
const tagCount = new Map<string, number>();
posts.forEach(post => {
post.data.tags.forEach(tag => {
tagCount.set(tag, (tagCount.get(tag) || 0) + 1);
});
});
// 按文章数量排序
const sortedTags = Array.from(tagCount.entries())
.sort((a, b) => b[1] - a[1]);
---
<BaseLayout title="标签">
<div class="layout">
<SiteHeader currentPath="/tags" />
<main class="main">
<h1 class="page-title">标签</h1>
<div class="tags-cloud">
{sortedTags.map(([tag, count]) => (
<a href={`/tags/${tag}`} class="tag-item">
<span class="tag-name">#{tag}</span>
<span class="tag-count">{count}</span>
</a>
))}
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; {new Date().getFullYear()} 42. All rights reserved.</p>
</div>
</footer>
</div>
</BaseLayout>
<style>
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-header {
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
}
@supports (backdrop-filter: blur(10px)) {
.site-header {
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
background: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .site-header {
background: rgba(15, 23, 42, 0.95);
}
}
.container {
max-width: var(--layout-width);
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: transform var(--transition-fast);
}
.logo:hover {
transform: scale(1.05);
}
.nav {
display: flex;
gap: 2rem;
align-items: center;
}
.nav a {
color: var(--text-secondary);
transition: color var(--transition-fast);
font-weight: 500;
position: relative;
}
.nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-fast);
}
.nav a:hover {
color: var(--text-primary);
}
.nav a:hover::after {
transform: scaleX(1);
}
.nav :global(.theme-toggle) {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
transition: all var(--transition-base);
cursor: pointer;
}
.nav :global(.theme-toggle:hover) {
background: var(--accent-color);
border-color: var(--accent-color);
transform: rotate(180deg);
box-shadow: var(--shadow-md);
}
.nav :global(.theme-toggle .icon-wrapper) {
position: relative;
width: 20px;
height: 20px;
}
.nav :global(.theme-toggle .icon) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition-base), transform var(--transition-base);
opacity: 0;
transform: rotate(-180deg) scale(0);
}
.nav :global(.theme-toggle .icon.active) {
opacity: 1;
transform: rotate(0) scale(1);
}
.nav :global(.theme-toggle.is-animating) {
animation: spin 0.6s ease-in-out;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.nav :global(.theme-toggle svg) {
width: 100%;
height: 100%;
color: var(--text-primary);
}
.nav :global(.theme-toggle:hover svg) {
color: white;
}
.main {
flex: 1;
max-width: 900px;
margin: 0 auto;
padding: 3rem 2rem;
width: 100%;
}
.page-title {
font-size: 3rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 3rem;
font-weight: 800;
}
.tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 1rem;
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tag-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.5rem;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
transition: all var(--transition-base);
color: var(--text-primary);
position: relative;
overflow: hidden;
}
.tag-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--gradient-primary);
transform: scaleY(0);
transition: transform var(--transition-base);
}
.tag-item:hover {
background: var(--accent-color);
color: white;
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--accent-color);
}
.tag-item:hover::before {
transform: scaleY(1);
}
.tag-name {
font-size: 1.125rem;
font-weight: 600;
}
.tag-count {
font-size: 0.9rem;
opacity: 0.8;
}
.site-footer {
border-top: 1px solid var(--border-color);
padding: 2rem 0;
margin-top: auto;
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.nav {
gap: 1rem;
font-size: 0.875rem;
}
.logo {
font-size: 1.25rem;
}
.main {
padding: 2rem 1rem;
}
.page-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.tags-cloud {
gap: 0.75rem;
}
.tag-item {
padding: 0.75rem 1.25rem;
}
.tag-name {
font-size: 1rem;
}
.tag-count {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.nav a:not(:first-child) {
font-size: 0.8125rem;
}
.page-title {
font-size: 1.75rem;
}
.tag-item {
padding: 0.625rem 1rem;
}
.tag-name {
font-size: 0.9375rem;
}
}
</style>

222
src/styles/base.css
View File

@@ -1,171 +1,123 @@
@import "modern-normalize"; @import "modern-normalize";
@import "./reset.css"; @import "./reset.css";
@import "./typography.css";
@import "./enhancements.css";
:root { :root {
/* 布局宽度 */
--layout-width: 1200px; --layout-width: 1200px;
--content-width: 680px; --content-width: 800px;
/* 亮色模式 */ /* 明亮主题配色 */
--bg-primary: #ffffff; --bg-primary: #FAFAFA;
--bg-secondary: #fafaf9; --bg-secondary: #FFFFFF;
--bg-tertiary: #f5f5f4; --text-primary: #1A1A1A;
--text-primary: #18181b; --text-secondary: #666666;
--text-secondary: #71717a; --accent-color: #0066FF;
--text-tertiary: #a1a1aa; --border-color: #E5E5E5;
--text-heading: #09090b;
--link-color: #0891b2;
--link-hover: #0e7490;
--accent-color: #d97706;
--accent-secondary: #0891b2;
--success-color: #10b981;
--warning-color: #f59e0b;
--border-color: #e5e7eb;
--border-light: #f3f4f6;
/* 代码相关 */ /* 字体家族 */
--code-inline-bg: #f4f5f7; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
--code-inline-color: #e91e63; --font-mono: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
--code-inline-border: #e5e7eb;
--code-block-bg: #f6f8fa;
--code-block-border: #e5e7eb;
--code-line-number: #9ca3af;
--code-highlight-bg: #fff9db;
/* Markdown 元素 */ /* 字体尺寸 */
--quote-border: #3b82f6; --text-h1: 36px;
--quote-bg: #f8f9fa; --text-h2: 28px;
--table-border: #e5e7eb; --text-h3: 22px;
--table-header-bg: #f0f2f5; --text-base: 17px;
--table-stripe-bg: #f8f9fa; --text-small: 14px;
--link-underline: #3b82f6; --text-tiny: 12px;
/* 间距规范 */ /* 行高 */
--spacing-xs: 0.25rem; --line-h1: 1.3;
--spacing-sm: 0.5rem; --line-h2: 1.4;
--spacing-md: 1rem; --line-h3: 1.4;
--spacing-lg: 1.5rem; --line-base: 1.8;
--spacing-xl: 2rem; --line-small: 1.6;
--spacing-2xl: 2.5rem; --line-tiny: 1.5;
--spacing-3xl: 3rem;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* 间距系统 (8px base) */
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --space-xs: 4px;
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --space-sm: 8px;
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --space-md: 16px;
--space-lg: 24px;
/* 装饰线条颜色（替代渐变） */ --space-xl: 32px;
--accent-line: var(--accent-color); --space-2xl: 48px;
--accent-line-secondary: var(--accent-secondary);
/* 圆角 */ /* 圆角 */
--radius-sm: 6px; --radius-sm: 6px;
--radius-md: 8px; --radius-md: 12px;
--radius-lg: 12px; --radius-lg: 16px;
--radius-xl: 16px;
--radius-full: 9999px;
/* 过渡 */ /* 阴影 */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); --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"] { [data-theme="dark"] {
/* 暗色模式 */ --bg-primary: #0F0F0F;
--bg-primary: #09090b; --bg-secondary: #1A1A1A;
--bg-secondary: #18181b; --text-primary: #E5E5E5;
--bg-tertiary: #27272a; --text-secondary: #A0A0A0;
--text-primary: #fafafa; --accent-color: #3B82F6;
--text-secondary: #a1a1aa; --border-color: #2A2A2A;
--text-tertiary: #71717a;
--text-heading: #fafafa;
--link-color: #06b6d4;
--link-hover: #22d3ee;
--accent-color: #fbbf24;
--accent-secondary: #06b6d4;
--success-color: #34d399;
--warning-color: #fbbf24;
--border-color: #27272a;
--border-light: #18181b;
/* 代码相关 */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--code-inline-bg: #1e293b; --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
--code-inline-color: #f472b6; --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
--code-inline-border: #334155;
--code-block-bg: #1e293b;
--code-block-border: #334155;
--code-line-number: #64748b;
--code-highlight-bg: #374151;
/* Markdown 元素 */
--quote-border: #60a5fa;
--quote-bg: #1e293b;
--table-border: #334155;
--table-header-bg: #1e293b;
--table-stripe-bg: #0f172a;
--link-underline: #60a5fa;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
/* 暗色模式装饰线条 */
--accent-line: var(--accent-color);
--accent-line-secondary: var(--accent-secondary);
} }
* { /* 全局样式 */
box-sizing: border-box; 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; margin: 0;
padding: 0; padding: 0;
} }
html { * {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', box-sizing: border-box;
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color var(--transition-base), color var(--transition-base);
min-height: 100vh;
position: relative;
} }
/* 链接样式 */
a { a {
color: inherit; color: var(--accent-color);
text-decoration: none; text-decoration: none;
transition: color var(--transition-fast);
} }
img, a:hover {
picture, text-decoration: underline;
video,
canvas,
svg {
display: block;
max-width: 100%;
} }
input, /* 代码样式 */
button, code {
textarea, font-family: var(--font-mono);
select { font-size: 0.9em;
font: inherit; background-color: var(--border-color);
padding: 2px 6px;
border-radius: 4px;
} }
button { pre {
cursor: pointer; font-family: var(--font-mono);
border: none; overflow-x: auto;
background: none; }
pre code {
background-color: transparent;
padding: 0;
} }

295
src/styles/enhancements.css
View File

@@ -1,295 +0,0 @@
/* UI/UX 增强样式 */
/* 选中文本样式 */
::selection {
background: var(--accent-color);
color: white;
}
::-moz-selection {
background: var(--accent-color);
color: white;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb {
background: var(--text-tertiary);
border-radius: var(--radius-sm);
transition: background var(--transition-base);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color);
}
/* Focus 样式增强 */
*:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
/* 按钮基础样式增强 */
button {
-webkit-tap-highlight-color: transparent;
}
/* 平滑过渡类 */
.fade-in {
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 链接悬停效果 */
a {
position: relative;
}
/* 响应式图片 */
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* 代码块增强 */
pre {
position: relative;
}
/* Shiki 代码块样式适配 */
.astro-code,
.shiki {
padding: 1.5rem;
border-radius: var(--radius-lg);
overflow-x: auto;
line-height: 1.6;
font-size: 0.875rem;
margin: 1.5rem 0;
box-shadow: var(--shadow-md);
border: 1px solid var(--code-block-border);
}
/* 代码块滚动条样式 */
pre::-webkit-scrollbar,
.astro-code::-webkit-scrollbar,
.shiki::-webkit-scrollbar {
height: 8px;
}
pre::-webkit-scrollbar-track,
.astro-code::-webkit-scrollbar-track,
.shiki::-webkit-scrollbar-track {
background: transparent;
}
pre::-webkit-scrollbar-thumb,
.astro-code::-webkit-scrollbar-thumb,
.shiki::-webkit-scrollbar-thumb {
background: var(--text-tertiary);
border-radius: var(--radius-sm);
}
pre::-webkit-scrollbar-thumb:hover,
.astro-code::-webkit-scrollbar-thumb:hover,
.shiki::-webkit-scrollbar-thumb:hover {
background: var(--accent-color);
}
/* 移动端代码块优化 */
@media (max-width: 768px) {
.astro-code,
.shiki,
article pre {
padding: 1rem;
font-size: 0.8125rem;
border-radius: var(--radius-md);
}
}
/* 加载动画 */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.skeleton {
animation: shimmer 2s infinite;
background: linear-gradient(
to right,
var(--bg-secondary) 0%,
var(--bg-tertiary) 50%,
var(--bg-secondary) 100%
);
background-size: 1000px 100%;
}
/* 工具提示基础样式 */
[data-tooltip] {
position: relative;
cursor: help;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
padding: 0.5rem 0.75rem;
background: var(--text-heading);
color: white;
border-radius: var(--radius-md);
font-size: 0.875rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-fast), transform var(--transition-fast);
z-index: 1000;
}
[data-tooltip]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(-4px);
}
/* 徽章样式 */
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-full);
background: var(--accent-color);
color: white;
}
/* 分隔线增强 */
hr {
margin: 2rem 0;
border: none;
height: 1px;
background: linear-gradient(
to right,
transparent,
var(--border-color),
transparent
);
}
/* 引用块增强样式 */
blockquote {
position: relative;
isolation: isolate;
}
/* 响应式视频容器 */
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: var(--radius-lg);
}
.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* 打印样式优化 */
@media print {
body {
background: white;
color: black;
}
.site-header,
.site-footer,
.theme-toggle,
nav {
display: none;
}
article {
max-width: 100%;
}
a {
color: black;
text-decoration: underline;
}
pre,
code {
border: 1px solid #ccc;
page-break-inside: avoid;
}
}
/* 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* 暗色模式特定增强 */
[data-theme="dark"] img {
opacity: 0.9;
}
[data-theme="dark"] img:hover {
opacity: 1;
}
/* 高对比度模式支持 */
@media (prefers-contrast: high) {
:root {
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}
button,
a {
outline: 2px solid currentColor;
}
}

263
src/styles/toc.css
View File

@@ -1,263 +0,0 @@
/* 文章目录（TOC）样式 */
/* 桌面端：侧边固定目录 */
.toc-desktop {
position: fixed;
left: max(1rem, calc((100vw - var(--layout-width)) / 2 - 240px));
top: 120px;
width: 200px;
max-height: calc(100vh - 200px);
overflow-y: auto;
display: none;
}
@media (min-width: 1400px) {
.toc-desktop {
display: block;
}
}
.toc-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.toc-item {
margin-bottom: 0.5rem;
position: relative;
}
.toc-item.level-3 {
padding-left: 1rem;
}
.toc-item a {
display: block;
padding: 0.25rem 0;
padding-left: 0.75rem;
font-size: 0.875rem;
color: var(--text-secondary);
text-decoration: none;
border-left: 2px solid transparent;
transition: all var(--transition-fast);
line-height: 1.5;
}
.toc-item a:hover {
color: var(--text-primary);
border-left-color: var(--text-tertiary);
}
.toc-item.active a {
color: var(--accent-color);
font-weight: 600;
border-left-color: var(--accent-color);
border-left-width: 3px;
}
/* 移动端：浮动按钮 + 抽屉 */
.toc-mobile {
display: block;
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 100;
}
@media (min-width: 1400px) {
.toc-mobile {
display: none;
}
}
.toc-toggle {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent-color);
color: white;
border: none;
box-shadow: var(--shadow-lg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-base);
}
.toc-toggle:hover {
transform: scale(1.1);
box-shadow: var(--shadow-xl);
}
.toc-toggle:active {
transform: scale(0.95);
}
.toc-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 200;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.toc-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 60vh;
background: var(--bg-primary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: var(--shadow-xl);
z-index: 201;
animation: slideUp 0.3s ease-out;
overflow: hidden;
display: flex;
flex-direction: column;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.toc-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.toc-drawer-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-heading);
}
.toc-drawer-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.toc-drawer-close:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.toc-drawer-list {
list-style: none;
padding: 1rem;
margin: 0;
overflow-y: auto;
flex: 1;
}
.toc-drawer-item {
margin-bottom: 0.5rem;
}
.toc-drawer-item.level-3 {
padding-left: 1rem;
}
.toc-drawer-item a {
display: block;
padding: 0.75rem 1rem;
font-size: 1rem;
color: var(--text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
border-left: 3px solid transparent;
}
.toc-drawer-item a:active {
transform: scale(0.98);
}
.toc-drawer-item:hover a {
background: var(--bg-secondary);
color: var(--text-primary);
}
.toc-drawer-item.active a {
background: var(--bg-secondary);
color: var(--accent-color);
font-weight: 600;
border-left-color: var(--accent-color);
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent-secondary);
color: white;
border: none;
box-shadow: var(--shadow-lg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-base);
z-index: 50;
animation: fadeIn 0.3s ease-out;
}
.back-to-top:hover {
transform: scale(1.1);
box-shadow: var(--shadow-xl);
}
.back-to-top:active {
transform: scale(0.95);
}
/* 当有TOC按钮时，调整返回顶部按钮位置 */
@media (max-width: 1399px) {
.back-to-top {
bottom: 5.5rem;
}
}

267
src/styles/typography.css
View File

@@ -1,267 +0,0 @@
/* 排版样式 */
article {
line-height: 1.75;
color: var(--text-primary);
font-size: 1.125rem; /* 18px */
}
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
margin-top: 3em;
margin-bottom: 1em;
line-height: 1.4;
font-weight: 700;
color: var(--text-heading);
letter-spacing: -0.02em;
scroll-margin-top: 5rem;
position: relative;
}
article h1:first-child,
article h2:first-child,
article h3:first-child,
article h4:first-child {
margin-top: 0;
}
article h1 {
font-size: 2.5rem;
color: var(--text-heading);
position: relative;
padding-bottom: 0.5rem;
}
article h1::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: var(--accent-color);
border-radius: 2px;
}
article h2 {
font-size: 1.875rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border-color);
}
article h3 {
font-size: 1.5rem;
font-weight: 600;
}
article h4 {
font-size: 1.375rem;
}
article h5 {
font-size: 1.125rem;
}
article h6 {
font-size: 1rem;
color: var(--text-secondary);
}
article p {
margin-bottom: 1.75em;
}
article a {
color: var(--link-color);
text-decoration: none;
border-bottom: 2px solid transparent;
background-image: linear-gradient(var(--link-color), var(--link-color));
background-size: 0% 2px;
background-repeat: no-repeat;
background-position: left bottom;
transition: background-size var(--transition-base), color var(--transition-base);
font-weight: 500;
}
article a:hover {
color: var(--link-hover);
background-size: 100% 2px;
}
article ul,
article ol {
margin-bottom: 1.5em;
padding-left: 2em;
}
article ul {
list-style-type: disc;
}
article ol {
list-style-type: decimal;
}
article li {
margin-bottom: 0.5em;
line-height: 1.8;
}
article li > ul,
article li > ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
article ul ul {
list-style-type: circle;
}
article ul ul ul {
list-style-type: square;
}
article code {
padding: 0.25rem 0.5rem;
background: var(--code-inline-bg);
border-radius: var(--radius-sm);
font-size: 0.9em;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
color: var(--code-inline-color);
font-weight: 500;
border: 1px solid var(--code-inline-border);
}
article pre {
margin-bottom: 1.5em;
padding: 1.5em;
background: var(--code-block-bg);
border-radius: var(--radius-lg);
overflow-x: auto;
box-shadow: var(--shadow-md);
border: 1px solid var(--code-block-border);
position: relative;
line-height: 1.6;
}
article pre::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--accent-color);
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
article pre code {
padding: 0;
background: none;
font-size: 0.875rem;
border: none;
color: inherit;
font-weight: 400;
display: block;
}
article blockquote {
margin: 2em 0;
padding: 1.5em 1.5em 1.5em 2em;
border-left: 6px solid var(--accent-color);
background: var(--quote-bg);
border-radius: var(--radius-md);
color: var(--text-primary);
font-style: italic;
position: relative;
box-shadow: var(--shadow-sm);
}
article blockquote p {
margin-bottom: 0.5em;
}
article blockquote p:last-child {
margin-bottom: 0;
}
article img {
max-width: 100%;
height: auto;
border-radius: var(--radius-lg);
margin: 2em 0;
box-shadow: var(--shadow-lg);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
article img:hover {
transform: scale(1.01);
box-shadow: var(--shadow-xl);
}
article hr {
margin: 3em 0;
border: none;
height: 1px;
background: linear-gradient(to right, transparent, var(--border-color), transparent);
}
/* 表格样式 */
article table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
background: var(--bg-primary);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--table-border);
}
article thead {
background: var(--table-header-bg);
}
article th {
padding: 0.75rem 1rem;
text-align: left;
font-weight: 600;
color: var(--text-heading);
border-bottom: 2px solid var(--table-border);
font-size: 0.9375rem;
}
article td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--table-border);
color: var(--text-primary);
}
article tr:last-child td {
border-bottom: none;
}
article tbody tr {
transition: background var(--transition-fast);
}
article tbody tr:nth-child(even) {
background: var(--table-stripe-bg);
}
article tbody tr:hover {
background: var(--bg-secondary);
}
/* 移动端表格滚动 */
@media (max-width: 768px) {
article table {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}

19
src/types/post.ts
View File

@@ -1,19 +0,0 @@
import type { CollectionEntry } from 'astro:content';
export type Post = CollectionEntry<'posts'>;
export interface PostMetadata {
title: string;
description: string;
pubDate: Date;
updatedDate?: Date;
author: string;
image?: string;
tags: string[];
category: string;
draft: boolean;
}
export interface PostWithReadingTime extends Post {
readingTime: string;
}

15
src/utils/date.ts
View File

@@ -1,15 +0,0 @@
export function formatDate(date: Date): string {
return new Date(date).toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
}
export function formatDateShort(date: Date): string {
return new Date(date).toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
}

29
src/utils/extract-headings.ts
View File

@@ -1,29 +0,0 @@
// 提取文章标题的工具函数
export interface Heading {
id: string;
text: string;
level: number;
}
export function extractHeadings(content: string): Heading[] {
const headings: Heading[] = [];
const lines = content.split('\n');
for (const line of lines) {
// 匹配 Markdown 标题 (## 或 ###)
const match = line.match(/^(#{2,3})\s+(.+)$/);
if (match) {
const level = match[1].length;
const text = match[2].trim();
// 生成 ID（简单处理，实际 Astro 会自动生成）
const id = text
.toLowerCase()
.replace(/[^\w\u4e00-\u9fa5]+/g, '-')
.replace(/^-+|-+$/g, '');
headings.push({ id, text, level });
}
}
return headings;
}

19
src/utils/reading-time.ts
View File

@@ -1,19 +0,0 @@
export function getReadingTime(content: string): string {
const wordsPerMinute = 200;
const chineseCharsPerMinute = 300;
// 计算中文字符数
const chineseChars = (content.match(/[\u4e00-\u9fa5]/g) || []).length;
// 计算英文单词数
const englishWords = content
.replace(/[\u4e00-\u9fa5]/g, '')
.split(/\s+/)
.filter(word => word.length > 0).length;
const minutes = Math.ceil(
chineseChars / chineseCharsPerMinute + englishWords / wordsPerMinute
);
return `${minutes} 分钟`;
}

28
src/utils/search-index.ts
View File

@@ -1,28 +0,0 @@
// 搜索索引生成工具
import { getCollection } from 'astro:content';
export interface SearchIndexItem {
id: string;
title: string;
description: string;
content: string;
category: string;
tags: string[];
date: string;
url: string;
}
export async function generateSearchIndex(): Promise<SearchIndexItem[]> {
const posts = await getCollection('posts', ({ data }) => !data.draft);
return posts.map(post => ({
id: post.slug,
title: post.data.title,
description: post.data.description,
content: post.body.slice(0, 500), // 仅索引前500字符
category: post.data.category,
tags: post.data.tags,
date: post.data.pubDate.toISOString(),
url: `/posts/${post.slug}`,
}));
}