Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 351184b4c1 | |||
| 081f072a39 |
@@ -1,10 +0,0 @@
|
|||||||
node_modules/
|
|
||||||
.git/
|
|
||||||
.idea/
|
|
||||||
dist/
|
|
||||||
.astro/
|
|
||||||
.vscode/
|
|
||||||
.claude/
|
|
||||||
*.tar.gz
|
|
||||||
*.log
|
|
||||||
.DS_Store
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
charset = utf-8
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
end_of_line = lf
|
|
||||||
insert_final_newline = true
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
VITE_API_BASE_URL=https://admin.ua42.com/api/
|
|
||||||
6
.gitignore
vendored
6
.gitignore
vendored
@@ -13,6 +13,10 @@ yarn-debug.log*
|
|||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
pnpm-debug.log*
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
# macOS-specific files
|
# macOS-specific files
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
@@ -21,5 +25,3 @@ pnpm-debug.log*
|
|||||||
|
|
||||||
*.tar
|
*.tar
|
||||||
*.gz
|
*.gz
|
||||||
|
|
||||||
.claude
|
|
||||||
|
|||||||
0
.qoder/quests/blog-style-optimization.md
Normal file
0
.qoder/quests/blog-style-optimization.md
Normal file
1198
.qoder/quests/personal-blog-design.md
Normal file
1198
.qoder/quests/personal-blog-design.md
Normal file
File diff suppressed because it is too large
Load Diff
34
AGENTS.md
34
AGENTS.md
@@ -1,34 +0,0 @@
|
|||||||
# Project Scope Rules
|
|
||||||
|
|
||||||
## 文件范围限制
|
|
||||||
|
|
||||||
本项目根目录：
|
|
||||||
|
|
||||||
./
|
|
||||||
|
|
||||||
所有操作必须限制在当前项目目录内。
|
|
||||||
|
|
||||||
禁止：
|
|
||||||
- 访问项目外文件
|
|
||||||
- 修改父级目录文件
|
|
||||||
- 创建项目外文件
|
|
||||||
- 修改用户目录中的其他内容
|
|
||||||
- 禁止访问服务端仓库
|
|
||||||
|
|
||||||
## 修改规则
|
|
||||||
|
|
||||||
修改前必须：
|
|
||||||
1. 列出将修改的文件
|
|
||||||
2. 说明修改原因
|
|
||||||
3. 等待确认
|
|
||||||
|
|
||||||
禁止修改：
|
|
||||||
|
|
||||||
node_modules/
|
|
||||||
.git/
|
|
||||||
build/
|
|
||||||
.env
|
|
||||||
|
|
||||||
## 开发环境
|
|
||||||
|
|
||||||
默认认为已经启动服务，端口为4321
|
|
||||||
166
IMPLEMENTATION.md
Normal file
166
IMPLEMENTATION.md
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
# 个人博客实现总结
|
||||||
|
|
||||||
|
## 项目概述
|
||||||
|
|
||||||
|
基于设计文档成功实现了一个现代化、美观的个人博客系统,使用 Astro + SolidJS 技术栈。
|
||||||
|
|
||||||
|
## 已实现功能
|
||||||
|
|
||||||
|
### 核心页面
|
||||||
|
- ✅ **首页**: Hero 区域 + 文章卡片列表
|
||||||
|
- ✅ **文章详情页**: 完整的 Markdown 渲染和样式
|
||||||
|
- ✅ **关于页面**: 个人简介、技能标签云、联系方式
|
||||||
|
|
||||||
|
### 核心组件
|
||||||
|
- ✅ **Layout**: 基础布局,支持自定义标题和描述
|
||||||
|
- ✅ **BaseHeader**: 导航栏,包含主题切换功能
|
||||||
|
- ✅ **BaseFooter**: 页脚,版权信息和社交链接
|
||||||
|
- ✅ **ThemeToggle**: 明暗主题切换(SolidJS 组件)
|
||||||
|
- ✅ **PostCard**: 文章卡片,带悬停效果
|
||||||
|
- ✅ **Tag**: 彩色标签,自动配色
|
||||||
|
|
||||||
|
### 设计系统
|
||||||
|
- ✅ **CSS 变量**: 完整的色彩、字体、间距、阴影、圆角定义
|
||||||
|
- ✅ **明暗主题**: 支持主题切换,保存到 localStorage
|
||||||
|
- ✅ **响应式设计**: 适配移动端、平板和桌面
|
||||||
|
- ✅ **动画过渡**: 统一的过渡效果
|
||||||
|
|
||||||
|
### 内容管理
|
||||||
|
- ✅ **Content Collections**: 使用 Astro 的类型安全内容管理
|
||||||
|
- ✅ **示例文章**: 5 篇高质量示例博客文章
|
||||||
|
- ✅ **Markdown 样式**: 完整的 Markdown 元素样式优化
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- **框架**: Astro 5.15.8
|
||||||
|
- **UI 库**: SolidJS 1.9.10
|
||||||
|
- **语言**: TypeScript
|
||||||
|
- **包管理**: PNPM
|
||||||
|
- **Node 版本**: 22.21.1 (Volta)
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
blog/
|
||||||
|
├── src/
|
||||||
|
│ ├── components/ # 组件
|
||||||
|
│ │ ├── BaseHeader.astro
|
||||||
|
│ │ ├── BaseFooter.astro
|
||||||
|
│ │ ├── ThemeToggle.tsx
|
||||||
|
│ │ ├── PostCard.astro
|
||||||
|
│ │ └── Tag.astro
|
||||||
|
│ ├── content/ # 内容
|
||||||
|
│ │ ├── config.ts # Content Collections 配置
|
||||||
|
│ │ └── posts/ # 博客文章
|
||||||
|
│ │ ├── welcome.md
|
||||||
|
│ │ ├── css-variables.md
|
||||||
|
│ │ ├── astro-introduction.md
|
||||||
|
│ │ ├── typescript-best-practices.md
|
||||||
|
│ │ └── responsive-design.md
|
||||||
|
│ ├── layouts/ # 布局
|
||||||
|
│ │ └── Layout.astro
|
||||||
|
│ ├── pages/ # 页面路由
|
||||||
|
│ │ ├── index.astro # 首页
|
||||||
|
│ │ ├── about.astro # 关于页面
|
||||||
|
│ │ └── posts/
|
||||||
|
│ │ └── [...slug].astro # 文章详情页
|
||||||
|
│ ├── styles/ # 样式
|
||||||
|
│ │ ├── base.css # 设计系统
|
||||||
|
│ │ └── reset.css
|
||||||
|
│ └── consts.ts # 配置常量
|
||||||
|
├── astro.config.mjs # Astro 配置
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## 设计特色
|
||||||
|
|
||||||
|
### 视觉设计
|
||||||
|
- **现代简约**: 简洁的设计语言,突出内容
|
||||||
|
- **优雅配色**: 和谐的明暗双主题
|
||||||
|
- **流畅交互**: 平滑的动画过渡
|
||||||
|
- **渐变元素**: Hero 区域标题渐变效果
|
||||||
|
|
||||||
|
### 用户体验
|
||||||
|
- **快速加载**: 利用 Astro 的静态生成
|
||||||
|
- **主题切换**: 支持明暗模式,跟随系统偏好
|
||||||
|
- **响应式**: 完美适配各种设备
|
||||||
|
- **易读排版**: 舒适的行高、字号和行宽
|
||||||
|
|
||||||
|
### 技术亮点
|
||||||
|
- **类型安全**: Content Collections 提供类型检查
|
||||||
|
- **SEO 友好**: 正确的 meta 标签和语义化 HTML
|
||||||
|
- **性能优化**: 预渲染静态页面
|
||||||
|
- **可维护性**: 组件化设计,CSS 变量系统
|
||||||
|
|
||||||
|
## 启动项目
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 安装依赖
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# 启动开发服务器
|
||||||
|
pnpm dev
|
||||||
|
|
||||||
|
# 构建生产版本
|
||||||
|
pnpm build
|
||||||
|
|
||||||
|
# 预览构建结果
|
||||||
|
pnpm preview
|
||||||
|
```
|
||||||
|
|
||||||
|
## 访问地址
|
||||||
|
|
||||||
|
- 本地开发: http://localhost:4322
|
||||||
|
- 首页: http://localhost:4322/
|
||||||
|
- 关于: http://localhost:4322/about
|
||||||
|
- 文章示例: http://localhost:4322/posts/welcome
|
||||||
|
|
||||||
|
## 自定义配置
|
||||||
|
|
||||||
|
编辑 `/src/consts.ts` 修改博客配置:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export const metadata = {
|
||||||
|
siteTitle: "你的博客名称",
|
||||||
|
siteDescription: "你的博客描述",
|
||||||
|
author: "你的名字",
|
||||||
|
email: "your-email@example.com",
|
||||||
|
githubUrl: "https://github.com/yourusername",
|
||||||
|
// ... 更多配置
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 添加新文章
|
||||||
|
|
||||||
|
1. 在 `/src/content/posts/` 创建新的 `.md` 文件
|
||||||
|
2. 添加 frontmatter:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
title: "文章标题"
|
||||||
|
date: 2024-11-21
|
||||||
|
summary: "文章摘要"
|
||||||
|
tags: ["标签1", "标签2"]
|
||||||
|
---
|
||||||
|
|
||||||
|
文章内容...
|
||||||
|
```
|
||||||
|
|
||||||
|
3. 文章会自动出现在首页列表
|
||||||
|
|
||||||
|
## 主题定制
|
||||||
|
|
||||||
|
修改 `/src/styles/base.css` 中的 CSS 变量:
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--accent-color: #0066FF; /* 主题色 */
|
||||||
|
--text-h1: 36px; /* 标题字号 */
|
||||||
|
--space-md: 16px; /* 间距 */
|
||||||
|
/* ... 更多变量 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 总结
|
||||||
|
|
||||||
|
成功按照设计文档实现了一个功能完整、美观现代的个人博客系统。所有核心功能都已实现并测试通过,可以直接使用或进一步定制。
|
||||||
@@ -1,22 +1,14 @@
|
|||||||
// @ts-check
|
// @ts-check
|
||||||
import {defineConfig} from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
import solidJs from '@astrojs/solid-js';
|
||||||
import node from '@astrojs/node';
|
import node from '@astrojs/node';
|
||||||
|
|
||||||
// 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',
|
||||||
server: {
|
integrations: [solidJs()],
|
||||||
host: "0.0.0.0",
|
|
||||||
},
|
|
||||||
adapter: node({
|
adapter: node({
|
||||||
mode: 'standalone'
|
mode: 'standalone'
|
||||||
}),
|
})
|
||||||
vite: {
|
|
||||||
server: {
|
|
||||||
...(process.argv.includes('dev')
|
|
||||||
? {watch: {usePolling: true}}
|
|
||||||
: {}),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|||||||
15
package.json
15
package.json
@@ -10,20 +10,13 @@
|
|||||||
"deploy": "./scripts/deploy.sh"
|
"deploy": "./scripts/deploy.sh"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/node": "11.0.2",
|
"@astrojs/node": "^9.5.1",
|
||||||
"astro": "^7.0.6",
|
"@astrojs/solid-js": "^5.1.3",
|
||||||
"clipboard": "^2.0.11",
|
"astro": "^5.15.8",
|
||||||
"dayjs": "^1.11.21",
|
|
||||||
"jsdom": "^29.1.1",
|
|
||||||
"ky": "^2.0.2",
|
|
||||||
"modern-normalize": "^3.0.1",
|
"modern-normalize": "^3.0.1",
|
||||||
"photoswipe": "^5.4.4",
|
"solid-js": "^1.9.10"
|
||||||
"shiki": "^4.3.1"
|
|
||||||
},
|
},
|
||||||
"volta": {
|
"volta": {
|
||||||
"node": "22.21.1"
|
"node": "22.21.1"
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/jsdom": "^28.0.3"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
4249
pnpm-lock.yaml
generated
4249
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,3 +0,0 @@
|
|||||||
allowBuilds:
|
|
||||||
esbuild: true
|
|
||||||
sharp: true
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
46
public/favicon.svg
Normal file
46
public/favicon.svg
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="placeholder favicon">
|
||||||
|
<defs>
|
||||||
|
<!-- 轻微渐变底色 -->
|
||||||
|
<linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#f7f8fb"/>
|
||||||
|
<stop offset="1" stop-color="#e6e9f2"/>
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<!-- 圆角外形的蒙版（用来制造中间空缺） -->
|
||||||
|
<mask id="holeMask">
|
||||||
|
<!-- 全白表示顯示 -->
|
||||||
|
<rect x="0" y="0" width="64" height="64" fill="white"/>
|
||||||
|
<!-- 中间用黑色（掏空） -->
|
||||||
|
<!-- 这里用一个较大的圆角方块作为"空缺" -->
|
||||||
|
<rect x="14" y="14" width="36" height="36" rx="8" ry="8" fill="black"/>
|
||||||
|
</mask>
|
||||||
|
|
||||||
|
<!-- 描边样式（虚线） -->
|
||||||
|
<pattern id="dash" width="6" height="6" patternUnits="userSpaceOnUse">
|
||||||
|
<rect width="6" height="6" fill="none"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 圆角底板 -->
|
||||||
|
<rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" stroke="#d9dce8" stroke-width="1"/>
|
||||||
|
|
||||||
|
<!-- 在底板上绘制一个较暗的阴影区域，让边缘有质感 -->
|
||||||
|
<rect x="2" y="34" width="60" height="28" rx="12" ry="12" fill-opacity="0.03" fill="#000"/>
|
||||||
|
|
||||||
|
<!-- 使用mask把中间挖空（透明） -->
|
||||||
|
<g mask="url(#holeMask)">
|
||||||
|
<!-- 这层是底色的延伸，挖空后中间变透明 -->
|
||||||
|
<rect x="2" y="2" width="60" height="60" rx="12" ry="12" fill="url(#g)" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 在被挖空的边缘画一圈圆角虚线作为占位提示 -->
|
||||||
|
<rect x="14" y="14" width="36" height="36" rx="8" ry="8"
|
||||||
|
fill="none" stroke="#9aa0b6" stroke-width="1.5" stroke-dasharray="3 3" />
|
||||||
|
|
||||||
|
<!-- 中心放置一个小图形（可选）: 一个微小的“文件”轮廓来提示占位 -->
|
||||||
|
<g transform="translate(28,20)">
|
||||||
|
<path d="M0 0 L8 0 L8 12 L0 12 Z" fill="none" stroke="#9aa0b6" stroke-width="1" stroke-linejoin="round"/>
|
||||||
|
<path d="M5 0 L5 3" stroke="#9aa0b6" stroke-width="1" stroke-linecap="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -1,4 +0,0 @@
|
|||||||
User-agent: *
|
|
||||||
Allow: /
|
|
||||||
|
|
||||||
Sitemap: https://ua42.com/sitemap.xml
|
|
||||||
@@ -1,13 +1,12 @@
|
|||||||
FROM alpine:3.22 AS base
|
FROM alpine:3.22 AS base
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
||||||
RUN apk add --no-cache --update nodejs
|
RUN apk add --no-cache --update nodejs pnpm
|
||||||
|
|
||||||
FROM base AS install
|
FROM base AS install
|
||||||
RUN apk add --no-cache pnpm
|
|
||||||
ENV NODE_ENV=production
|
ENV NODE_ENV=production
|
||||||
COPY package.json pnpm-lock.yaml ./
|
COPY package.json pnpm-lock.yaml ./
|
||||||
RUN pnpm install --frozen-lockfile
|
RUN pnpm install
|
||||||
|
|
||||||
FROM install AS build
|
FROM install AS build
|
||||||
COPY . .
|
COPY . .
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ PROJECT_ROOT=$(cd -- "$(dirname "${BASH_SOURCE[0]}")/.." &> /dev/null && pwd)
|
|||||||
DOCKERFILE_PATH=./scripts/Dockerfile
|
DOCKERFILE_PATH=./scripts/Dockerfile
|
||||||
IMAGE_NAME=blog
|
IMAGE_NAME=blog
|
||||||
IMAGE_FILE_NAME=$IMAGE_NAME.tar.gz
|
IMAGE_FILE_NAME=$IMAGE_NAME.tar.gz
|
||||||
REMOTE_SERVER=01
|
REMOTE_SERVER=02
|
||||||
REMOTE_PATH=/srv/docker/nginx/www
|
REMOTE_PATH=/srv/docker/nginx/www
|
||||||
DOCKER_NETWORK=docker_app-bridge
|
DOCKER_NETWORK=docker_app-bridge
|
||||||
|
|
||||||
|
|||||||
0
src/components/ArticleCard.astro
Normal file
0
src/components/ArticleCard.astro
Normal file
107
src/components/BaseFooter.astro
Normal file
107
src/components/BaseFooter.astro
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
---
|
||||||
|
import { metadata } from "@/consts";
|
||||||
|
const { siteTitle, icpNumber, githubUrl } = metadata;
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="content">
|
||||||
|
<div class="footer-left">
|
||||||
|
<p class="copyright">© {currentYear} {siteTitle}</p>
|
||||||
|
{icpNumber && (
|
||||||
|
<a href="https://beian.miit.gov.cn/#/Integrated/index" class="icp" target="_blank" rel="noopener">
|
||||||
|
{icpNumber}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div class="footer-center">
|
||||||
|
<span class="powered">Powered by Astro</span>
|
||||||
|
</div>
|
||||||
|
<div class="footer-right">
|
||||||
|
{githubUrl && (
|
||||||
|
<a href={githubUrl} class="social-link" target="_blank" rel="noopener" aria-label="GitHub">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
footer {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: var(--space-lg) 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: background-color var(--transition-slow), border-color var(--transition-slow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-width: var(--layout-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--space-md);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: var(--text-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-left,
|
||||||
|
.footer-center,
|
||||||
|
.footer-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright,
|
||||||
|
.powered {
|
||||||
|
margin: 0;
|
||||||
|
font-size: var(--text-tiny);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icp {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: var(--text-tiny);
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icp:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--space-sm);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: color var(--transition-fast), background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
background-color: var(--border-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-left,
|
||||||
|
.footer-center,
|
||||||
|
.footer-right {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
125
src/components/BaseHeader.astro
Normal file
125
src/components/BaseHeader.astro
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
---
|
||||||
|
import ThemeToggle from "./ThemeToggle";
|
||||||
|
import { metadata } from "@/consts";
|
||||||
|
const { siteTitle } = metadata;
|
||||||
|
---
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav class="main-nav">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a href="/" class="site-logo">{siteTitle}</a>
|
||||||
|
<ul class="menu">
|
||||||
|
<li class="menu-item"><a href="/">首页</a></li>
|
||||||
|
<li class="menu-item"><a href="/about">关于</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="nav-right">
|
||||||
|
<ThemeToggle client:load />
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
height: 64px;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: background-color var(--transition-slow), border-color var(--transition-slow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav {
|
||||||
|
max-width: var(--layout-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 var(--space-md);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-logo {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-logo:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
font-size: var(--text-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item a:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-toggle) {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: var(--space-sm);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: background-color var(--transition-fast), color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
: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>
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
---
|
|
||||||
import PostList from "@/components/Post/List.astro";
|
|
||||||
import Pagination from "@/components/Post/Pagination.astro";
|
|
||||||
import type {Post} from "@/types";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
posts: Post[]
|
|
||||||
page: number
|
|
||||||
totalPage: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const {posts, page, totalPage} = Astro.props
|
|
||||||
---
|
|
||||||
<main>
|
|
||||||
<div class="intro">
|
|
||||||
<p>did you stand too close to the fire?<br>
|
|
||||||
like a liar looking for forgiveness from a stone.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<PostList posts={posts}/>
|
|
||||||
<Pagination page={page} totalPage={totalPage}/>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.intro {
|
|
||||||
border-bottom: var(--border-secondary);
|
|
||||||
line-height: 2;
|
|
||||||
font-size: 15px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
padding-bottom: 32px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.intro{
|
|
||||||
padding-bottom: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,130 +0,0 @@
|
|||||||
---
|
|
||||||
interface Props {
|
|
||||||
src: string;
|
|
||||||
alt?: string;
|
|
||||||
width?: number;
|
|
||||||
height?: number;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const {
|
|
||||||
src,
|
|
||||||
alt = "",
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
class: className = ""
|
|
||||||
} = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<div
|
|
||||||
class={`lazy-image ${className}`}
|
|
||||||
data-src={src}
|
|
||||||
style={`aspect-ratio:${width}/${height}`}
|
|
||||||
>
|
|
||||||
<div class="placeholder"></div>
|
|
||||||
|
|
||||||
<img
|
|
||||||
class="real-image"
|
|
||||||
alt={alt}
|
|
||||||
width={width}
|
|
||||||
height={height}
|
|
||||||
loading="lazy"
|
|
||||||
decoding="async"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.lazy-image {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lazy-image img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background-image: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
#f3f4f6 0%,
|
|
||||||
#e5e7eb 50%,
|
|
||||||
#f3f4f6 100%
|
|
||||||
);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: loading 1.5s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loading {
|
|
||||||
from {
|
|
||||||
background-position: 200% 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
background-position: -200% 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.real-image {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity .35s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.real-image.loaded {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function initLazyImages() {
|
|
||||||
const images = document.querySelectorAll(".lazy-image");
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
entries => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
|
|
||||||
if (!entry.isIntersecting) return;
|
|
||||||
|
|
||||||
const container = entry.target as HTMLElement;
|
|
||||||
const img = container.querySelector(
|
|
||||||
".real-image"
|
|
||||||
) as HTMLImageElement;
|
|
||||||
|
|
||||||
const src = container.dataset.src;
|
|
||||||
|
|
||||||
if (!src) return;
|
|
||||||
|
|
||||||
img.src = src;
|
|
||||||
|
|
||||||
img.onload = () => {
|
|
||||||
img.classList.add("loaded");
|
|
||||||
|
|
||||||
const placeholder =
|
|
||||||
container.querySelector(".placeholder");
|
|
||||||
|
|
||||||
placeholder?.remove();
|
|
||||||
};
|
|
||||||
|
|
||||||
observer.unobserve(container);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{
|
|
||||||
rootMargin: "300px"
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
images.forEach(img => observer.observe(img));
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
initLazyImages();
|
|
||||||
</script>
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
---
|
|
||||||
import type {Post} from "@/types";
|
|
||||||
import {formatDatetime} from '@/lib/format.ts'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
posts: Post[]
|
|
||||||
}
|
|
||||||
const {posts} = Astro.props
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="posts">
|
|
||||||
{posts.map(item => (
|
|
||||||
<div class="post">
|
|
||||||
<span class="d">{formatDatetime(item.published_at, 'YY.MM.DD')}</span>
|
|
||||||
<h2><a href=`/post/${item.slug}`>{item.title}</a></h2>
|
|
||||||
<span class="arrow">→</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.posts {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.post {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
gap: 20px;
|
|
||||||
padding: 26px 0;
|
|
||||||
border-bottom: var(--border-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post .d {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--text-meta);
|
|
||||||
min-width: 80px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post h2 {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: normal;
|
|
||||||
flex: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post h2 a {
|
|
||||||
color: var(--text-primary);
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post h2 a:hover {
|
|
||||||
color: var(--text-title-hover);
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post .arrow {
|
|
||||||
color: #d0d0d0;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: transform 0.2s, color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post:hover .arrow {
|
|
||||||
color: #334155;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.post .d {
|
|
||||||
min-width: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post h2 {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
---
|
|
||||||
interface Props {
|
|
||||||
page: number
|
|
||||||
totalPage: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const {page, totalPage} = Astro.props
|
|
||||||
---
|
|
||||||
|
|
||||||
<!--分页器-->
|
|
||||||
{totalPage > 1 &&
|
|
||||||
<nav class="pagination" aria-label="分页">
|
|
||||||
{Array.from({length: totalPage}).map((_, index) => {
|
|
||||||
if (page === index + 1) {
|
|
||||||
return <span class="link current">{index + 1}</span>
|
|
||||||
}
|
|
||||||
return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
|
|
||||||
})}
|
|
||||||
{page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页</a> :
|
|
||||||
<span class="link disabled">下一页</span>}
|
|
||||||
</nav>}
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* ========== 分页 ========== */
|
|
||||||
.pagination {
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-top: 32px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 12px;
|
|
||||||
line-height: 1;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.current{
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link.disabled {
|
|
||||||
color: var(--text-disabled);
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
152
src/components/PostCard.astro
Normal file
152
src/components/PostCard.astro
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
---
|
||||||
|
import Tag from "./Tag.astro";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
date: Date;
|
||||||
|
summary: string;
|
||||||
|
slug: string;
|
||||||
|
tags?: string[];
|
||||||
|
readingTime?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, date, summary, slug, tags = [], readingTime } = Astro.props;
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
const formatDate = (date: Date) => {
|
||||||
|
return new Intl.DateTimeFormat("zh-CN", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
}).format(date);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算阅读时长（如果没有提供）
|
||||||
|
const calculateReadingTime = (text: string) => {
|
||||||
|
const wordsPerMinute = 200;
|
||||||
|
const wordCount = text.length;
|
||||||
|
return Math.ceil(wordCount / wordsPerMinute);
|
||||||
|
};
|
||||||
|
|
||||||
|
const estimatedReadingTime = readingTime || calculateReadingTime(summary);
|
||||||
|
---
|
||||||
|
|
||||||
|
<article class="post-card">
|
||||||
|
<a href={`/posts/${slug}`} class="card-link">
|
||||||
|
<div class="card-content">
|
||||||
|
<h2 class="post-title">{title}</h2>
|
||||||
|
|
||||||
|
<div class="post-meta">
|
||||||
|
<time class="post-date" datetime={date.toISOString()}>
|
||||||
|
{formatDate(date)}
|
||||||
|
</time>
|
||||||
|
<span class="reading-time">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<circle cx="12" cy="12" r="10" stroke-width="2"/>
|
||||||
|
<polyline points="12 6 12 12 16 14" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
{estimatedReadingTime} 分钟阅读
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="post-summary">{summary}</p>
|
||||||
|
|
||||||
|
{tags.length > 0 && (
|
||||||
|
<div class="post-tags">
|
||||||
|
{tags.map((tag) => <Tag tag={tag} size="small" />)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post-card {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-slow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-link {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
font-size: var(--text-h3);
|
||||||
|
line-height: var(--line-h3);
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 var(--space-md) 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card:hover .post-title {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
font-size: var(--text-small);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-date {
|
||||||
|
font-size: var(--text-tiny);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reading-time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
font-size: var(--text-tiny);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-summary {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: var(--line-base);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin: 0 0 var(--space-md) 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.card-content {
|
||||||
|
padding: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-summary {
|
||||||
|
font-size: var(--text-small);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
0
src/components/SiteFooter.astro
Normal file
0
src/components/SiteFooter.astro
Normal file
0
src/components/SiteHeader.astro
Normal file
0
src/components/SiteHeader.astro
Normal file
51
src/components/Tag.astro
Normal file
51
src/components/Tag.astro
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
tag: string;
|
||||||
|
size?: "small" | "medium";
|
||||||
|
}
|
||||||
|
|
||||||
|
const { tag, size = "small" } = Astro.props;
|
||||||
|
|
||||||
|
// 为不同标签生成不同的颜色
|
||||||
|
const getTagColor = (tag: string) => {
|
||||||
|
const colors = [
|
||||||
|
{ bg: "#E3F2FD", text: "#1976D2" },
|
||||||
|
{ bg: "#F3E5F5", text: "#7B1FA2" },
|
||||||
|
{ bg: "#E8F5E9", text: "#388E3C" },
|
||||||
|
{ bg: "#FFF3E0", text: "#F57C00" },
|
||||||
|
{ bg: "#FCE4EC", text: "#C2185B" },
|
||||||
|
{ bg: "#E0F2F1", text: "#00796B" },
|
||||||
|
];
|
||||||
|
const index = tag.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % colors.length;
|
||||||
|
return colors[index];
|
||||||
|
};
|
||||||
|
|
||||||
|
const tagColor = getTagColor(tag);
|
||||||
|
---
|
||||||
|
|
||||||
|
<span class={`tag tag-${size}`} style={`background-color: ${tagColor.bg}; color: ${tagColor.text};`}>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: var(--space-xs) var(--space-sm);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
transition: transform var(--transition-fast), opacity var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-small {
|
||||||
|
font-size: var(--text-tiny);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-medium {
|
||||||
|
font-size: var(--text-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
---
|
|
||||||
---
|
|
||||||
<div class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
|
|
||||||
<svg aria-hidden="true" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
||||||
<path class="sun" fill-rule="evenodd"
|
|
||||||
d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
|
|
||||||
<path class="moon" fill-rule="evenodd"
|
|
||||||
d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#themeToggle {
|
|
||||||
border: 0;
|
|
||||||
background: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sun {
|
|
||||||
fill: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.moon {
|
|
||||||
fill: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.dark) .sun {
|
|
||||||
fill: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.dark) .moon {
|
|
||||||
fill: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script is:inline>
|
|
||||||
const meta = document.querySelector('meta[name="theme-color"]');
|
|
||||||
|
|
||||||
const theme = (() => {
|
|
||||||
const localStorageTheme = localStorage?.getItem("theme") ?? '';
|
|
||||||
if (['dark', 'light'].includes(localStorageTheme)) {
|
|
||||||
return localStorageTheme;
|
|
||||||
}
|
|
||||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
||||||
return 'dark';
|
|
||||||
}
|
|
||||||
return 'light';
|
|
||||||
})();
|
|
||||||
|
|
||||||
if (theme === 'light') {
|
|
||||||
document.documentElement.classList.remove('dark');
|
|
||||||
meta.setAttribute('content', '#ffffff');
|
|
||||||
} else {
|
|
||||||
document.documentElement.classList.add('dark');
|
|
||||||
meta.setAttribute('content', '#0a0a0a');
|
|
||||||
}
|
|
||||||
|
|
||||||
window.localStorage.setItem('theme', theme);
|
|
||||||
|
|
||||||
const handleToggleClick = () => {
|
|
||||||
const element = document.documentElement;
|
|
||||||
element.classList.toggle("dark");
|
|
||||||
|
|
||||||
const isDark = element.classList.contains("dark");
|
|
||||||
meta.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
|
|
||||||
localStorage.setItem("theme", isDark ? "dark" : "light");
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
|
|
||||||
</script>
|
|
||||||
49
src/components/ThemeToggle.tsx
Normal file
49
src/components/ThemeToggle.tsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import { createSignal, onMount } from "solid-js";
|
||||||
|
|
||||||
|
export default function ThemeToggle() {
|
||||||
|
const [theme, setTheme] = createSignal<"light" | "dark">("light");
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
// 从 localStorage 读取主题设置，或使用系统偏好
|
||||||
|
const savedTheme = localStorage.getItem("theme");
|
||||||
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||||
|
const initialTheme = savedTheme || (prefersDark ? "dark" : "light");
|
||||||
|
|
||||||
|
setTheme(initialTheme as "light" | "dark");
|
||||||
|
document.documentElement.setAttribute("data-theme", initialTheme);
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleTheme = () => {
|
||||||
|
const newTheme = theme() === "light" ? "dark" : "light";
|
||||||
|
setTheme(newTheme);
|
||||||
|
document.documentElement.setAttribute("data-theme", newTheme);
|
||||||
|
localStorage.setItem("theme", newTheme);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={toggleTheme}
|
||||||
|
class="theme-toggle"
|
||||||
|
aria-label="切换主题"
|
||||||
|
title={theme() === "light" ? "切换到暗色模式" : "切换到亮色模式"}
|
||||||
|
>
|
||||||
|
{theme() === "light" ? (
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<circle cx="12" cy="12" r="5" stroke-width="2"/>
|
||||||
|
<line x1="12" y1="1" x2="12" y2="3" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="12" y1="21" x2="12" y2="23" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="1" y1="12" x2="3" y2="12" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="21" y1="12" x2="23" y2="12" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,7 +1,31 @@
|
|||||||
export const siteConfig = {
|
export const metadata = {
|
||||||
site: "https://ua42.com",
|
siteTitle: "42的博客",
|
||||||
siteTitle: "Uroboros",
|
siteDescription: "分享技术与思考的个人空间",
|
||||||
postPageSize: 7,
|
author: "42",
|
||||||
description: "一个人的自留地 ，不欢迎我，也不欢迎你。",
|
email: "your-email@example.com",
|
||||||
git: "https://git.ua42.com"
|
githubUrl: "https://github.com/yourusername",
|
||||||
|
icpNumber: "鄂ICP备2023000060号-2",
|
||||||
|
|
||||||
|
// Hero 区域配置
|
||||||
|
heroTitle: "42的博客",
|
||||||
|
heroDescription: "在这里记录技术学习、生活思考和创作分享",
|
||||||
|
|
||||||
|
// 关于页面配置
|
||||||
|
aboutBio: `我是一名热爱编程的开发者，专注于 Web 开发和技术写作。
|
||||||
|
|
||||||
|
这个博客用于记录我的学习历程、技术心得和生活感悟。希望通过分享，能够帮助到更多的人。
|
||||||
|
|
||||||
|
欢迎与我交流探讨！`,
|
||||||
|
|
||||||
|
skills: [
|
||||||
|
"JavaScript",
|
||||||
|
"TypeScript",
|
||||||
|
"React",
|
||||||
|
"Vue",
|
||||||
|
"Node.js",
|
||||||
|
"Astro",
|
||||||
|
"CSS",
|
||||||
|
"HTML",
|
||||||
|
"Git",
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|||||||
17
src/content/config.ts
Normal file
17
src/content/config.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { defineCollection, z } from 'astro:content';
|
||||||
|
|
||||||
|
const postsCollection = defineCollection({
|
||||||
|
type: 'content',
|
||||||
|
schema: z.object({
|
||||||
|
title: z.string(),
|
||||||
|
date: z.date(),
|
||||||
|
summary: z.string(),
|
||||||
|
tags: z.array(z.string()).optional(),
|
||||||
|
cover: z.string().optional(),
|
||||||
|
author: z.string().optional(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = {
|
||||||
|
posts: postsCollection,
|
||||||
|
};
|
||||||
160
src/content/posts/astro-introduction.md
Normal file
160
src/content/posts/astro-introduction.md
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
---
|
||||||
|
title: "Astro 框架初探"
|
||||||
|
date: 2024-11-15
|
||||||
|
summary: "Astro 是一个现代化的静态网站生成器，它专注于性能和开发体验。本文将介绍 Astro 的核心概念、特点以及如何使用它构建快速的网站。"
|
||||||
|
tags: ["Astro", "前端框架", "Web开发"]
|
||||||
|
---
|
||||||
|
|
||||||
|
# Astro 框架初探
|
||||||
|
|
||||||
|
在现代 Web 开发中，选择合适的框架至关重要。今天我们来聊聊 Astro —— 一个专注于性能的现代化静态网站生成器。
|
||||||
|
|
||||||
|
## Astro 是什么？
|
||||||
|
|
||||||
|
Astro 是一个为构建内容驱动网站而设计的 Web 框架。它的核心理念是：
|
||||||
|
|
||||||
|
> **默认发送零 JavaScript 到浏览器**
|
||||||
|
|
||||||
|
这听起来很激进，但正是这个理念让 Astro 网站极其快速。
|
||||||
|
|
||||||
|
## 核心特性
|
||||||
|
|
||||||
|
### 1. 群岛架构（Islands Architecture）
|
||||||
|
|
||||||
|
Astro 引入了"群岛架构"的概念：
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
// 静态内容，不需要 JavaScript
|
||||||
|
---
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1>这是静态内容</h1>
|
||||||
|
|
||||||
|
<!-- 这是一个"岛屿"，只有这部分会发送 JS -->
|
||||||
|
<InteractiveComponent client:load />
|
||||||
|
|
||||||
|
<p>又是静态内容</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 框架无关
|
||||||
|
|
||||||
|
Astro 支持多种前端框架，你可以混合使用：
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
import ReactComponent from './React.jsx';
|
||||||
|
import VueComponent from './Vue.vue';
|
||||||
|
import SolidComponent from './Solid.tsx';
|
||||||
|
---
|
||||||
|
|
||||||
|
<ReactComponent client:visible />
|
||||||
|
<VueComponent client:idle />
|
||||||
|
<SolidComponent client:load />
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 内置优化
|
||||||
|
|
||||||
|
Astro 自动优化你的网站：
|
||||||
|
|
||||||
|
- 自动代码分割
|
||||||
|
- CSS 自动提取和内联
|
||||||
|
- 图片优化
|
||||||
|
- 资源预加载
|
||||||
|
|
||||||
|
## 客户端指令
|
||||||
|
|
||||||
|
Astro 提供了灵活的客户端加载策略：
|
||||||
|
|
||||||
|
| 指令 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| `client:load` | 页面加载时立即加载组件 |
|
||||||
|
| `client:idle` | 浏览器空闲时加载 |
|
||||||
|
| `client:visible` | 组件进入视口时加载 |
|
||||||
|
| `client:media` | 媒体查询匹配时加载 |
|
||||||
|
| `client:only` | 仅在客户端渲染 |
|
||||||
|
|
||||||
|
## Content Collections
|
||||||
|
|
||||||
|
Astro 的 Content Collections 提供了类型安全的内容管理：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// src/content/config.ts
|
||||||
|
import { defineCollection, z } from 'astro:content';
|
||||||
|
|
||||||
|
const blog = defineCollection({
|
||||||
|
type: 'content',
|
||||||
|
schema: z.object({
|
||||||
|
title: z.string(),
|
||||||
|
date: z.date(),
|
||||||
|
tags: z.array(z.string()),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = { blog };
|
||||||
|
```
|
||||||
|
|
||||||
|
使用时：
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
|
||||||
|
const posts = await getCollection('blog');
|
||||||
|
---
|
||||||
|
|
||||||
|
{posts.map(post => (
|
||||||
|
<article>
|
||||||
|
<h2>{post.data.title}</h2>
|
||||||
|
<time>{post.data.date}</time>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 性能对比
|
||||||
|
|
||||||
|
让我们看看 Astro 与其他框架的性能对比：
|
||||||
|
|
||||||
|
- **Lighthouse 得分**：通常能达到满分 100
|
||||||
|
- **首次内容绘制（FCP）**：通常 < 1s
|
||||||
|
- **JavaScript 体积**：可以接近 0KB
|
||||||
|
|
||||||
|
## 适用场景
|
||||||
|
|
||||||
|
Astro 特别适合：
|
||||||
|
|
||||||
|
1. **博客和文档站点**：内容为主，交互较少
|
||||||
|
2. **营销网站**：追求极致性能
|
||||||
|
3. **电子商务**：产品展示页面
|
||||||
|
4. **作品集网站**：展示型网站
|
||||||
|
|
||||||
|
## 开始使用
|
||||||
|
|
||||||
|
创建一个 Astro 项目非常简单：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 使用官方模板
|
||||||
|
npm create astro@latest
|
||||||
|
|
||||||
|
# 选择模板
|
||||||
|
# - Empty (空白项目)
|
||||||
|
# - Blog (博客模板)
|
||||||
|
# - Portfolio (作品集)
|
||||||
|
# - Documentation (文档站)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 我的使用体验
|
||||||
|
|
||||||
|
在使用 Astro 构建这个博客的过程中，我最喜欢的几点：
|
||||||
|
|
||||||
|
1. **开发体验优秀**：热更新快，调试方便
|
||||||
|
2. **性能出色**：页面加载速度极快
|
||||||
|
3. **灵活性高**：可以根据需要选择使用哪些功能
|
||||||
|
4. **学习曲线平缓**：如果你懂 HTML/CSS/JS，上手很快
|
||||||
|
|
||||||
|
## 总结
|
||||||
|
|
||||||
|
Astro 是一个专注于性能和开发体验的优秀框架。如果你正在构建内容驱动的网站，强烈推荐尝试 Astro。
|
||||||
|
|
||||||
|
它的"群岛架构"理念和零 JavaScript 默认策略，为现代 Web 开发提供了新的思路。
|
||||||
145
src/content/posts/css-variables.md
Normal file
145
src/content/posts/css-variables.md
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
---
|
||||||
|
title: "深入理解 CSS 变量"
|
||||||
|
date: 2024-11-18
|
||||||
|
summary: "CSS 变量（也称为 CSS 自定义属性）是现代 CSS 的强大功能。本文将深入探讨 CSS 变量的使用方法、最佳实践以及如何在实际项目中应用它们。"
|
||||||
|
tags: ["CSS", "前端开发"]
|
||||||
|
---
|
||||||
|
|
||||||
|
# 深入理解 CSS 变量
|
||||||
|
|
||||||
|
CSS 变量（CSS Custom Properties）为我们提供了一种在 CSS 中定义和使用变量的方式，这极大地提高了样式的可维护性和灵活性。
|
||||||
|
|
||||||
|
## 什么是 CSS 变量？
|
||||||
|
|
||||||
|
CSS 变量允许我们在 CSS 中定义可重用的值。它们使用 `--` 前缀定义，并通过 `var()` 函数使用。
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--primary-color: #0066FF;
|
||||||
|
--spacing-unit: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
padding: var(--spacing-unit);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## CSS 变量的优势
|
||||||
|
|
||||||
|
### 1. 提高可维护性
|
||||||
|
|
||||||
|
使用变量可以将重复的值集中管理，修改时只需改变变量定义：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--text-primary: #1A1A1A;
|
||||||
|
--text-secondary: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 在多处使用 */
|
||||||
|
h1 { color: var(--text-primary); }
|
||||||
|
p { color: var(--text-secondary); }
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 支持主题切换
|
||||||
|
|
||||||
|
CSS 变量可以轻松实现主题切换功能：
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 明亮主题 */
|
||||||
|
:root {
|
||||||
|
--bg-color: #FFFFFF;
|
||||||
|
--text-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗黑主题 */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-color: #0F0F0F;
|
||||||
|
--text-color: #E5E5E5;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 动态计算
|
||||||
|
|
||||||
|
CSS 变量可以与 `calc()` 函数结合使用：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--base-size: 16px;
|
||||||
|
--scale: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
font-size: calc(var(--base-size) * var(--scale));
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 实际应用场景
|
||||||
|
|
||||||
|
### 设计系统
|
||||||
|
|
||||||
|
在构建设计系统时，CSS 变量是核心工具：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
/* 色彩系统 */
|
||||||
|
--color-primary: #0066FF;
|
||||||
|
--color-secondary: #7B1FA2;
|
||||||
|
--color-success: #388E3C;
|
||||||
|
--color-warning: #F57C00;
|
||||||
|
--color-error: #C2185B;
|
||||||
|
|
||||||
|
/* 间距系统 */
|
||||||
|
--space-xs: 4px;
|
||||||
|
--space-sm: 8px;
|
||||||
|
--space-md: 16px;
|
||||||
|
--space-lg: 24px;
|
||||||
|
--space-xl: 32px;
|
||||||
|
|
||||||
|
/* 阴影系统 */
|
||||||
|
--shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
|
||||||
|
--shadow-md: 0 4px 16px rgba(0,0,0,0.08);
|
||||||
|
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 响应式设计
|
||||||
|
|
||||||
|
CSS 变量可以在媒体查询中重新定义：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--container-width: 1200px;
|
||||||
|
--font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
:root {
|
||||||
|
--container-width: 100%;
|
||||||
|
--font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 最佳实践
|
||||||
|
|
||||||
|
1. **使用语义化命名**：`--primary-color` 比 `--blue` 更好
|
||||||
|
2. **分层组织**：将变量按功能分组
|
||||||
|
3. **提供回退值**：`var(--color, #000)`
|
||||||
|
4. **避免过度使用**：不是所有值都需要变量化
|
||||||
|
|
||||||
|
## 浏览器兼容性
|
||||||
|
|
||||||
|
现代浏览器都已支持 CSS 变量，覆盖率超过 98%。对于不支持的浏览器，可以使用回退方案：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.element {
|
||||||
|
color: #0066FF; /* 回退值 */
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 总结
|
||||||
|
|
||||||
|
CSS 变量是现代 CSS 开发的重要工具，它提高了代码的可维护性、灵活性和可读性。通过合理使用 CSS 变量，我们可以构建更加优雅和可维护的样式系统。
|
||||||
281
src/content/posts/responsive-design.md
Normal file
281
src/content/posts/responsive-design.md
Normal file
@@ -0,0 +1,281 @@
|
|||||||
|
---
|
||||||
|
title: "响应式设计的艺术"
|
||||||
|
date: 2024-11-05
|
||||||
|
summary: "响应式设计不仅仅是适配不同屏幕尺寸，更是创造流畅、一致的用户体验。本文将探讨响应式设计的核心原则、实用技巧和常见挑战。"
|
||||||
|
tags: ["CSS", "响应式设计", "UX"]
|
||||||
|
---
|
||||||
|
|
||||||
|
# 响应式设计的艺术
|
||||||
|
|
||||||
|
在移动设备占据主导地位的今天,响应式设计已经不是可选项,而是必需品。让我们深入探讨如何打造优秀的响应式网站。
|
||||||
|
|
||||||
|
## 核心原则
|
||||||
|
|
||||||
|
### 移动优先
|
||||||
|
|
||||||
|
从最小屏幕开始设计,逐步增强:
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 基础样式 - 移动端 */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板 */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 720px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 桌面 */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 流式布局
|
||||||
|
|
||||||
|
使用相对单位而非固定像素:
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* ❌ 固定布局 */
|
||||||
|
.sidebar {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ✅ 流式布局 */
|
||||||
|
.sidebar {
|
||||||
|
width: 25%;
|
||||||
|
min-width: 250px;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 弹性图片
|
||||||
|
|
||||||
|
确保图片自适应容器:
|
||||||
|
|
||||||
|
```css
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 现代布局技术
|
||||||
|
|
||||||
|
### Flexbox
|
||||||
|
|
||||||
|
适合一维布局:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.nav {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Grid
|
||||||
|
|
||||||
|
适合二维布局:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.gallery {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
这段代码会自动调整列数,无需媒体查询!
|
||||||
|
|
||||||
|
### Container Queries
|
||||||
|
|
||||||
|
容器查询让组件真正独立:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.card-container {
|
||||||
|
container-type: inline-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
@container (min-width: 400px) {
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 断点策略
|
||||||
|
|
||||||
|
不要只关注设备,关注内容:
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
/* 基于内容的断点 */
|
||||||
|
--bp-small: 640px;
|
||||||
|
--bp-medium: 768px;
|
||||||
|
--bp-large: 1024px;
|
||||||
|
--bp-xlarge: 1280px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
常用断点参考:
|
||||||
|
|
||||||
|
| 类型 | 尺寸 |
|
||||||
|
|------|------|
|
||||||
|
| 手机 | < 640px |
|
||||||
|
| 平板 | 640px - 1024px |
|
||||||
|
| 桌面 | > 1024px |
|
||||||
|
| 超大屏 | > 1280px |
|
||||||
|
|
||||||
|
## 响应式排版
|
||||||
|
|
||||||
|
### 流式字体
|
||||||
|
|
||||||
|
使用 `clamp()` 实现流畅的字体缩放:
|
||||||
|
|
||||||
|
```css
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2rem, 5vw, 4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: clamp(1rem, 2vw, 1.125rem);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 可读性优化
|
||||||
|
|
||||||
|
控制行宽以提高可读性:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.content {
|
||||||
|
max-width: 65ch; /* 约 65 个字符宽度 */
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 触摸优化
|
||||||
|
|
||||||
|
### 可点击区域
|
||||||
|
|
||||||
|
确保触摸目标足够大:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.button,
|
||||||
|
.link {
|
||||||
|
min-height: 44px; /* iOS 建议最小尺寸 */
|
||||||
|
min-width: 44px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 悬停状态
|
||||||
|
|
||||||
|
移动端没有真正的 hover:
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 仅在支持 hover 的设备上显示 */
|
||||||
|
@media (hover: hover) {
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 性能考虑
|
||||||
|
|
||||||
|
### 响应式图片
|
||||||
|
|
||||||
|
使用 `srcset` 和 `sizes`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img
|
||||||
|
src="image-800.jpg"
|
||||||
|
srcset="
|
||||||
|
image-400.jpg 400w,
|
||||||
|
image-800.jpg 800w,
|
||||||
|
image-1200.jpg 1200w
|
||||||
|
"
|
||||||
|
sizes="
|
||||||
|
(max-width: 640px) 100vw,
|
||||||
|
(max-width: 1024px) 50vw,
|
||||||
|
800px
|
||||||
|
"
|
||||||
|
alt="描述"
|
||||||
|
>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 延迟加载
|
||||||
|
|
||||||
|
非首屏图片延迟加载:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="image.jpg" loading="lazy" alt="描述">
|
||||||
|
```
|
||||||
|
|
||||||
|
## 调试技巧
|
||||||
|
|
||||||
|
### Chrome DevTools
|
||||||
|
|
||||||
|
1. 切换设备模拟
|
||||||
|
2. 查看断点效果
|
||||||
|
3. 测试不同屏幕尺寸
|
||||||
|
4. 模拟网络速度
|
||||||
|
|
||||||
|
### 有用的 CSS
|
||||||
|
|
||||||
|
调试边框:
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 开发时使用 */
|
||||||
|
* {
|
||||||
|
outline: 1px solid red;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 常见陷阱
|
||||||
|
|
||||||
|
1. **固定高度**: 避免使用固定高度,使用 `min-height` 代替
|
||||||
|
2. **像素完美**: 不同设备有差异是正常的
|
||||||
|
3. **忽略横屏**: 记得测试横屏模式
|
||||||
|
4. **过多断点**: 保持简单,不要为每个设备单独设置
|
||||||
|
|
||||||
|
## 检查清单
|
||||||
|
|
||||||
|
- [ ] 移动端优先设计
|
||||||
|
- [ ] 触摸目标至少 44x44px
|
||||||
|
- [ ] 图片响应式处理
|
||||||
|
- [ ] 测试常见断点
|
||||||
|
- [ ] 检查横屏模式
|
||||||
|
- [ ] 优化加载性能
|
||||||
|
- [ ] 测试真实设备
|
||||||
|
|
||||||
|
## 总结
|
||||||
|
|
||||||
|
响应式设计是一门艺术,需要在美观、性能和用户体验之间找到平衡。记住:
|
||||||
|
|
||||||
|
- 从小屏幕开始
|
||||||
|
- 使用现代布局技术
|
||||||
|
- 关注性能
|
||||||
|
- 在真实设备上测试
|
||||||
|
|
||||||
|
优秀的响应式设计应该让用户感觉不到它的存在 —— 一切都是那么自然流畅。
|
||||||
237
src/content/posts/typescript-best-practices.md
Normal file
237
src/content/posts/typescript-best-practices.md
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
---
|
||||||
|
title: "TypeScript 最佳实践"
|
||||||
|
date: 2024-11-10
|
||||||
|
summary: "TypeScript 为 JavaScript 带来了类型安全，但如何正确使用它以获得最佳开发体验？本文总结了一些 TypeScript 开发中的最佳实践和常见陷阱。"
|
||||||
|
tags: ["TypeScript", "JavaScript", "编程"]
|
||||||
|
---
|
||||||
|
|
||||||
|
# TypeScript 最佳实践
|
||||||
|
|
||||||
|
TypeScript 已经成为现代前端开发的标配。正确使用 TypeScript 可以显著提高代码质量和开发效率，但不当使用也可能适得其反。
|
||||||
|
|
||||||
|
## 基础类型定义
|
||||||
|
|
||||||
|
### 使用类型推断
|
||||||
|
|
||||||
|
TypeScript 的类型推断很强大，不需要每个地方都显式标注类型：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ❌ 不必要的类型标注
|
||||||
|
const count: number = 0;
|
||||||
|
const name: string = "TypeScript";
|
||||||
|
|
||||||
|
// ✅ 利用类型推断
|
||||||
|
const count = 0;
|
||||||
|
const name = "TypeScript";
|
||||||
|
```
|
||||||
|
|
||||||
|
### 优先使用接口而非类型别名
|
||||||
|
|
||||||
|
对于对象类型，接口通常是更好的选择：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ 使用接口
|
||||||
|
interface User {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ❌ 避免过度使用 type
|
||||||
|
type User = {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
但是对于联合类型、元组等，type 更合适：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
type Status = "pending" | "success" | "error";
|
||||||
|
type Point = [number, number];
|
||||||
|
```
|
||||||
|
|
||||||
|
## 高级类型技巧
|
||||||
|
|
||||||
|
### 使用泛型提高复用性
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// 通用的 API 响应类型
|
||||||
|
interface ApiResponse<T> {
|
||||||
|
data: T;
|
||||||
|
status: number;
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用
|
||||||
|
type UserResponse = ApiResponse<User>;
|
||||||
|
type PostsResponse = ApiResponse<Post[]>;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 善用工具类型
|
||||||
|
|
||||||
|
TypeScript 内置了许多工具类型：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface Todo {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
completed: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Partial - 所有属性变为可选
|
||||||
|
type PartialTodo = Partial<Todo>;
|
||||||
|
|
||||||
|
// Pick - 选择部分属性
|
||||||
|
type TodoPreview = Pick<Todo, "title" | "completed">;
|
||||||
|
|
||||||
|
// Omit - 排除某些属性
|
||||||
|
type TodoInfo = Omit<Todo, "completed">;
|
||||||
|
|
||||||
|
// Readonly - 所有属性变为只读
|
||||||
|
type ReadonlyTodo = Readonly<Todo>;
|
||||||
|
```
|
||||||
|
|
||||||
|
## 类型守卫
|
||||||
|
|
||||||
|
使用类型守卫让代码更安全：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
function isString(value: unknown): value is string {
|
||||||
|
return typeof value === "string";
|
||||||
|
}
|
||||||
|
|
||||||
|
function processValue(value: string | number) {
|
||||||
|
if (isString(value)) {
|
||||||
|
// TypeScript 知道这里 value 是 string
|
||||||
|
console.log(value.toUpperCase());
|
||||||
|
} else {
|
||||||
|
// 这里 value 是 number
|
||||||
|
console.log(value.toFixed(2));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 避免 any
|
||||||
|
|
||||||
|
`any` 类型会破坏类型安全，应该尽量避免：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ❌ 使用 any
|
||||||
|
function process(data: any) {
|
||||||
|
return data.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ 使用 unknown 并做类型检查
|
||||||
|
function process(data: unknown) {
|
||||||
|
if (typeof data === "object" && data !== null && "value" in data) {
|
||||||
|
return (data as { value: any }).value;
|
||||||
|
}
|
||||||
|
throw new Error("Invalid data");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ 或者定义明确的类型
|
||||||
|
interface Data {
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function process(data: Data) {
|
||||||
|
return data.value;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 严格模式配置
|
||||||
|
|
||||||
|
在 `tsconfig.json` 中启用严格模式：
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"strict": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"strictFunctionTypes": true,
|
||||||
|
"strictBindCallApply": true,
|
||||||
|
"strictPropertyInitialization": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"alwaysStrict": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 处理 null 和 undefined
|
||||||
|
|
||||||
|
启用 `strictNullChecks` 后，需要明确处理可能的 null/undefined：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface User {
|
||||||
|
name: string;
|
||||||
|
age?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function greet(user: User) {
|
||||||
|
// ❌ 可能出错
|
||||||
|
console.log(`Hello, ${user.name}. You are ${user.age} years old.`);
|
||||||
|
|
||||||
|
// ✅ 正确处理
|
||||||
|
console.log(`Hello, ${user.name}. You are ${user.age ?? "unknown"} years old.`);
|
||||||
|
|
||||||
|
// ✅ 或使用可选链
|
||||||
|
console.log(`Age: ${user.age?.toString() ?? "not provided"}`);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 枚举的使用
|
||||||
|
|
||||||
|
优先使用常量对象或联合类型而非枚举：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ❌ 枚举会生成额外代码
|
||||||
|
enum Direction {
|
||||||
|
Up,
|
||||||
|
Down,
|
||||||
|
Left,
|
||||||
|
Right
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ 使用 const 对象
|
||||||
|
const Direction = {
|
||||||
|
Up: 0,
|
||||||
|
Down: 1,
|
||||||
|
Left: 2,
|
||||||
|
Right: 3
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
// ✅ 或使用联合类型
|
||||||
|
type Direction = "up" | "down" | "left" | "right";
|
||||||
|
```
|
||||||
|
|
||||||
|
## 函数重载
|
||||||
|
|
||||||
|
对于复杂的函数签名，使用函数重载：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
function createElement(tag: "div"): HTMLDivElement;
|
||||||
|
function createElement(tag: "span"): HTMLSpanElement;
|
||||||
|
function createElement(tag: "button"): HTMLButtonElement;
|
||||||
|
function createElement(tag: string): HTMLElement {
|
||||||
|
return document.createElement(tag);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用时会有精确的类型推断
|
||||||
|
const div = createElement("div"); // HTMLDivElement
|
||||||
|
const span = createElement("span"); // HTMLSpanElement
|
||||||
|
```
|
||||||
|
|
||||||
|
## 总结
|
||||||
|
|
||||||
|
TypeScript 的类型系统非常强大，但需要正确使用才能发挥其优势：
|
||||||
|
|
||||||
|
1. 充分利用类型推断
|
||||||
|
2. 避免使用 `any`
|
||||||
|
3. 启用严格模式
|
||||||
|
4. 使用类型守卫和工具类型
|
||||||
|
5. 明确处理 null/undefined
|
||||||
|
|
||||||
|
遵循这些最佳实践，可以让你的 TypeScript 代码更安全、更易维护。
|
||||||
62
src/content/posts/welcome.md
Normal file
62
src/content/posts/welcome.md
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
title: "欢迎来到我的博客"
|
||||||
|
date: 2024-11-20
|
||||||
|
summary: "这是我的第一篇博客文章，在这里我将分享关于 Web 开发、技术学习和生活思考的内容。让我们一起开启这段精彩的旅程！"
|
||||||
|
tags: ["博客", "日常"]
|
||||||
|
---
|
||||||
|
|
||||||
|
# 欢迎来到我的博客
|
||||||
|
|
||||||
|
你好！欢迎来到我的个人博客。这是一个全新的开始，我将在这里记录和分享我的技术学习、开发经验和生活感悟。
|
||||||
|
|
||||||
|
## 为什么写博客？
|
||||||
|
|
||||||
|
写博客有很多好处：
|
||||||
|
|
||||||
|
1. **知识沉淀**：将学到的知识系统化整理，加深理解
|
||||||
|
2. **经验分享**：帮助遇到类似问题的人，传递价值
|
||||||
|
3. **自我提升**：通过写作锻炼表达能力和思维能力
|
||||||
|
4. **记录成长**：回顾过去，见证自己的进步
|
||||||
|
|
||||||
|
## 博客内容规划
|
||||||
|
|
||||||
|
在这个博客中，我计划分享以下几类内容：
|
||||||
|
|
||||||
|
### 技术文章
|
||||||
|
|
||||||
|
- Web 开发相关的技术文章
|
||||||
|
- 编程语言学习心得
|
||||||
|
- 开发工具使用技巧
|
||||||
|
- 项目实战经验
|
||||||
|
|
||||||
|
### 学习笔记
|
||||||
|
|
||||||
|
记录学习新技术的过程和心得体会，包括但不限于：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 比如学习 JavaScript 的一些技巧
|
||||||
|
const greet = (name) => {
|
||||||
|
console.log(`Hello, ${name}!`);
|
||||||
|
};
|
||||||
|
|
||||||
|
greet("World");
|
||||||
|
```
|
||||||
|
|
||||||
|
### 生活随笔
|
||||||
|
|
||||||
|
技术之外，生活中的思考和感悟同样重要。
|
||||||
|
|
||||||
|
## 关于这个博客
|
||||||
|
|
||||||
|
这个博客使用 [Astro](https://astro.build) 构建，它是一个现代化的静态网站生成器，具有以下特点：
|
||||||
|
|
||||||
|
- 🚀 极快的页面加载速度
|
||||||
|
- 🎨 优雅的开发体验
|
||||||
|
- 📝 完善的 Markdown 支持
|
||||||
|
- 🌙 内置主题切换功能
|
||||||
|
|
||||||
|
## 最后
|
||||||
|
|
||||||
|
感谢你的访问！如果你对我的文章有任何建议或想法，欢迎与我交流。
|
||||||
|
|
||||||
|
让我们一起在技术的世界里探索前行！
|
||||||
@@ -1,69 +1,78 @@
|
|||||||
---
|
---
|
||||||
import "@/styles/global.css";
|
import "@/styles/base.css";
|
||||||
import {siteConfig} from "@/consts.ts";
|
|
||||||
import PageHeader from "./PageHeader.astro";
|
|
||||||
import PageFooter from "./PageFooter.astro";
|
|
||||||
|
|
||||||
const {siteTitle} = siteConfig;
|
import BaseHeader from "@/components/BaseHeader.astro";
|
||||||
|
import BaseFooter from "@/components/BaseFooter.astro";
|
||||||
|
|
||||||
|
import { metadata } from "@/consts.ts";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title?: string;
|
title?: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {title, description} = Astro.props;
|
const { title, description } = Astro.props;
|
||||||
|
const { siteTitle, siteDescription } = metadata;
|
||||||
|
|
||||||
const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
|
const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
|
||||||
|
const pageDescription = description || siteDescription;
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8" />
|
||||||
<meta
|
<meta
|
||||||
name="viewport"
|
name="viewport"
|
||||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
||||||
/>
|
/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="generator" content={Astro.generator}/>
|
<meta name="generator" content={Astro.generator} />
|
||||||
<meta name="description" content={description}/>
|
<meta name="description" content={pageDescription} />
|
||||||
<meta name="theme-color" content="#ffffff"/>
|
<title>{pageTitle}</title>
|
||||||
<title>{pageTitle}</title>
|
|
||||||
</head>
|
<!-- 预加载主题脚本，防止闪烁 -->
|
||||||
<body>
|
<script is:inline>
|
||||||
<div class="container">
|
// 立即应用保存的主题，防止页面闪烁
|
||||||
<PageHeader/>
|
const savedTheme = localStorage.getItem("theme");
|
||||||
<main>
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||||
<slot></slot>
|
const theme = savedTheme || (prefersDark ? "dark" : "light");
|
||||||
</main>
|
document.documentElement.setAttribute("data-theme", theme);
|
||||||
<PageFooter />
|
</script>
|
||||||
</div>
|
</head>
|
||||||
</body>
|
<body>
|
||||||
|
<BaseHeader />
|
||||||
|
<main>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
<BaseFooter />
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
html,
|
||||||
body {
|
body {
|
||||||
background: var(--background);
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
body {
|
||||||
width: 100%;
|
|
||||||
max-width: var(--layout-width);
|
|
||||||
height: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 24px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 24px 0;
|
max-width: var(--layout-width);
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.container {
|
main {
|
||||||
padding: 16px;
|
padding: var(--space-sm);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
<footer>
|
|
||||||
<div>© 2026 Uroboros</div>
|
|
||||||
<a href="https://beian.miit.gov.cn" target="_blank">备案号：鄂ICP备2023000060号-2</a>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
footer {
|
|
||||||
flex-shrink: 0;
|
|
||||||
min-height: 0;
|
|
||||||
height: 84px;
|
|
||||||
padding-bottom: 24px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 13px;
|
|
||||||
gap: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
footer {
|
|
||||||
height: 64px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
---
|
|
||||||
import {siteConfig} from "@/consts.ts";
|
|
||||||
import ThemeIcon from "@/components/ThemeIcon.astro";
|
|
||||||
|
|
||||||
const {siteTitle,git} = siteConfig;
|
|
||||||
---
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<a href="/"><h1>{siteTitle}</h1></a>
|
|
||||||
<nav>
|
|
||||||
<a href="/archive">归档</a>
|
|
||||||
<a target="_blank" href={git}>git</a>
|
|
||||||
|
|
||||||
<ThemeIcon />
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: var(--border-primary);
|
|
||||||
margin-top: 32px;
|
|
||||||
padding-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
header {
|
|
||||||
margin-top: 12px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
0
src/layouts/PostLayout.astro
Normal file
0
src/layouts/PostLayout.astro
Normal file
@@ -1,10 +0,0 @@
|
|||||||
import dayjs from 'dayjs';
|
|
||||||
import utc from 'dayjs/plugin/utc';
|
|
||||||
import timezone from 'dayjs/plugin/timezone';
|
|
||||||
|
|
||||||
dayjs.extend(utc);
|
|
||||||
dayjs.extend(timezone);
|
|
||||||
|
|
||||||
export const formatDatetime = (date: string,format = 'YYYY-MM-DD HH:mm') => {
|
|
||||||
return dayjs(date).tz('Asia/Shanghai').format(format);
|
|
||||||
};
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
import {JSDOM} from 'jsdom'
|
|
||||||
import {createHighlighter} from 'shiki'
|
|
||||||
|
|
||||||
const DEFAULT_THEME = 'github-dark-dimmed'
|
|
||||||
|
|
||||||
const highlighter = await createHighlighter({
|
|
||||||
themes: [DEFAULT_THEME],
|
|
||||||
langs: []
|
|
||||||
})
|
|
||||||
|
|
||||||
const SUPPORTED_LANGS = [
|
|
||||||
"bash", "json", "yaml", "xml", "html", "css", "scss",
|
|
||||||
"javascript", "typescript", "jsx", "tsx", "vue",
|
|
||||||
"markdown", "sql", "python", "go", "dockerfile", "nginx"
|
|
||||||
] as const
|
|
||||||
|
|
||||||
const loadedLangs = new Set<string>(['text'])
|
|
||||||
|
|
||||||
type SupportedLang = typeof SUPPORTED_LANGS[number]
|
|
||||||
|
|
||||||
const supportedSet = new Set<string>(SUPPORTED_LANGS)
|
|
||||||
|
|
||||||
const ensureLangLoaded = async (lang: string): Promise<string> => {
|
|
||||||
if (lang === 'text' || loadedLangs.has(lang)) return lang
|
|
||||||
if (!supportedSet.has(lang)) return 'text'
|
|
||||||
try {
|
|
||||||
await highlighter.loadLanguage(lang as SupportedLang)
|
|
||||||
loadedLangs.add(lang)
|
|
||||||
return lang
|
|
||||||
} catch {
|
|
||||||
return 'text'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const processHtmlWithJsdom = async (rawHtml: string) => {
|
|
||||||
const dom = new JSDOM(rawHtml)
|
|
||||||
const document = dom.window.document
|
|
||||||
|
|
||||||
const codeBlocks = document.querySelectorAll('pre code')
|
|
||||||
|
|
||||||
for (const codeBlock of codeBlocks) {
|
|
||||||
const preEl = codeBlock.parentElement
|
|
||||||
if (!preEl || preEl.tagName !== 'PRE') continue
|
|
||||||
|
|
||||||
const codeContent = codeBlock.textContent || ''
|
|
||||||
let lang = 'text'
|
|
||||||
for (const cls of codeBlock.classList) {
|
|
||||||
if (cls.startsWith('language-')) {
|
|
||||||
lang = cls.slice('language-'.length)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
lang = await ensureLangLoaded(lang) // ← 唯一改动点：按需加载
|
|
||||||
|
|
||||||
const highlighted = highlighter.codeToHtml(codeContent, {
|
|
||||||
lang,
|
|
||||||
theme: DEFAULT_THEME,
|
|
||||||
})
|
|
||||||
|
|
||||||
// 替换 DOM
|
|
||||||
const wrapper = document.createElement('div')
|
|
||||||
wrapper.innerHTML = highlighted.trim()
|
|
||||||
|
|
||||||
const newNode = wrapper.firstElementChild
|
|
||||||
if (newNode && preEl.parentNode) {
|
|
||||||
const container = document.createElement('div')
|
|
||||||
container.className = 'code-block'
|
|
||||||
|
|
||||||
const header = document.createElement('div')
|
|
||||||
header.className = 'code-header'
|
|
||||||
|
|
||||||
const headerLeft = document.createElement('div')
|
|
||||||
headerLeft.className = 'code-header-left'
|
|
||||||
|
|
||||||
const headerRight = document.createElement('div')
|
|
||||||
headerRight.className = 'code-header-right'
|
|
||||||
|
|
||||||
// 装饰点
|
|
||||||
const actions = document.createElement('div')
|
|
||||||
actions.className = 'code-actions'
|
|
||||||
|
|
||||||
const close = document.createElement('span')
|
|
||||||
close.className = 'dot close'
|
|
||||||
|
|
||||||
const minimize = document.createElement('span')
|
|
||||||
minimize.className = 'dot minimize'
|
|
||||||
|
|
||||||
const maximize = document.createElement('span')
|
|
||||||
maximize.className = 'dot maximize'
|
|
||||||
|
|
||||||
actions.append(close, minimize, maximize)
|
|
||||||
|
|
||||||
// 显示语言
|
|
||||||
const langDisplay = document.createElement('div')
|
|
||||||
langDisplay.className = 'code-language'
|
|
||||||
langDisplay.textContent = lang ? lang : 'text'
|
|
||||||
|
|
||||||
const copyBtn = document.createElement('div')
|
|
||||||
copyBtn.className = 'code-copy-btn'
|
|
||||||
copyBtn.textContent = '复制代码'
|
|
||||||
|
|
||||||
headerLeft.append(actions, langDisplay)
|
|
||||||
headerRight.append(copyBtn)
|
|
||||||
|
|
||||||
header.append(headerLeft, headerRight)
|
|
||||||
|
|
||||||
container.append(header, newNode)
|
|
||||||
|
|
||||||
preEl.parentNode.replaceChild(container, preEl)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return document.body.innerHTML
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
import ky, {type Options} from 'ky'
|
|
||||||
|
|
||||||
type ForwardHeaderSource = Headers | Record<string, string | undefined> | undefined | null
|
|
||||||
|
|
||||||
const api = ky.create({
|
|
||||||
baseUrl: import.meta.env.VITE_API_BASE_URL
|
|
||||||
});
|
|
||||||
|
|
||||||
const pickHeader = (source: ForwardHeaderSource, name: string): string | undefined => {
|
|
||||||
if (!source) return undefined
|
|
||||||
if (source instanceof Headers) return source.get(name) ?? undefined
|
|
||||||
return source[name] ?? source[name.toLowerCase()]
|
|
||||||
}
|
|
||||||
|
|
||||||
const buildForwardHeaders = (source: ForwardHeaderSource): Record<string, string> => {
|
|
||||||
const xff = pickHeader(source, 'x-forwarded-for')
|
|
||||||
const realIp = pickHeader(source, 'x-real-ip')
|
|
||||||
const cfIp = pickHeader(source, 'cf-connecting-ip')
|
|
||||||
const ua = pickHeader(source, 'user-agent')
|
|
||||||
const referer = pickHeader(source, 'referer')
|
|
||||||
const host = pickHeader(source, 'host')
|
|
||||||
const proto = pickHeader(source, 'x-forwarded-proto')
|
|
||||||
|
|
||||||
return {
|
|
||||||
...(xff ? {'x-forwarded-for': xff} : {}),
|
|
||||||
...(realIp ? {'x-real-ip': realIp} : {}),
|
|
||||||
...(cfIp ? {'cf-connecting-ip': cfIp} : {}),
|
|
||||||
...(ua ? {'user-agent': ua} : {}),
|
|
||||||
...(referer ? {referer} : {}),
|
|
||||||
...(host ? {host} : {}),
|
|
||||||
...(proto ? {'x-forwarded-proto': proto} : {})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const createHttp = (forwardHeadersSource?: ForwardHeaderSource) => {
|
|
||||||
const forwardedHeaders = buildForwardHeaders(forwardHeadersSource)
|
|
||||||
|
|
||||||
return {
|
|
||||||
get: async <T = unknown>(url: string, options?: Options): Promise<T> => {
|
|
||||||
return api.get(url, {
|
|
||||||
...options,
|
|
||||||
headers: {
|
|
||||||
...forwardedHeaders,
|
|
||||||
...(options?.headers ?? {})
|
|
||||||
}
|
|
||||||
}).json<T>()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const http = createHttp();
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
---
|
|
||||||
import Layout from "@/layouts/Layout.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="404" description="这里什么也没有">
|
|
||||||
<div class="not-found">
|
|
||||||
<h1>404 NOT FOUND</h1>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.not-found{
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
298
src/pages/about.astro
Normal file
298
src/pages/about.astro
Normal file
@@ -0,0 +1,298 @@
|
|||||||
|
---
|
||||||
|
import Layout from "@/layouts/Layout.astro";
|
||||||
|
import Tag from "@/components/Tag.astro";
|
||||||
|
import { metadata } from "@/consts";
|
||||||
|
|
||||||
|
const { author, email, githubUrl, aboutBio, skills } = metadata;
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="关于" description="关于我和这个博客">
|
||||||
|
<article class="about">
|
||||||
|
<!-- 个人简介区域 -->
|
||||||
|
<section class="profile-section">
|
||||||
|
<div class="avatar-container">
|
||||||
|
<div class="avatar">
|
||||||
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="50" cy="50" r="50" fill="url(#gradient)"/>
|
||||||
|
<circle cx="50" cy="35" r="15" fill="white" opacity="0.9"/>
|
||||||
|
<path d="M25 75 Q25 55, 50 55 T75 75" fill="white" opacity="0.9"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#0066FF;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#7B1FA2;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="page-title">关于我</h1>
|
||||||
|
|
||||||
|
<div class="bio">
|
||||||
|
{aboutBio.split('\n\n').map((paragraph: string) => (
|
||||||
|
<p>{paragraph}</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 技能标签云 -->
|
||||||
|
<section class="skills-section">
|
||||||
|
<h2 class="section-title">技能标签</h2>
|
||||||
|
<div class="skills-cloud">
|
||||||
|
{skills.map((skill: string) => (
|
||||||
|
<Tag tag={skill} size="medium" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 联系方式 -->
|
||||||
|
<section class="contact-section">
|
||||||
|
<h2 class="section-title">联系方式</h2>
|
||||||
|
<div class="contact-links">
|
||||||
|
{email && (
|
||||||
|
<a href={`mailto:${email}`} class="contact-link">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke-width="2"/>
|
||||||
|
<polyline points="22,6 12,13 2,6" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{githubUrl && (
|
||||||
|
<a href={githubUrl} class="contact-link" target="_blank" rel="noopener">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||||
|
</svg>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 关于博客 -->
|
||||||
|
<section class="blog-info-section">
|
||||||
|
<h2 class="section-title">关于这个博客</h2>
|
||||||
|
<div class="blog-info">
|
||||||
|
<p>
|
||||||
|
这个博客使用 <a href="https://astro.build" target="_blank" rel="noopener">Astro</a>
|
||||||
|
构建，配合 <a href="https://www.solidjs.com" target="_blank" rel="noopener">SolidJS</a>
|
||||||
|
实现交互功能。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
设计追求简洁、优雅和高性能，支持明暗主题切换，提供舒适的阅读体验。
|
||||||
|
</p>
|
||||||
|
<div class="tech-stack">
|
||||||
|
<div class="tech-item">
|
||||||
|
<strong>框架</strong>
|
||||||
|
<span>Astro</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<strong>UI 库</strong>
|
||||||
|
<span>SolidJS</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<strong>语言</strong>
|
||||||
|
<span>TypeScript</span>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item">
|
||||||
|
<strong>样式</strong>
|
||||||
|
<span>CSS Variables</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</Layout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.about {
|
||||||
|
max-width: var(--content-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 个人简介区域 */
|
||||||
|
.profile-section {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
padding-bottom: var(--space-2xl);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-container {
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: var(--text-h1);
|
||||||
|
line-height: var(--line-h1);
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0 0 var(--space-lg) 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio p {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: var(--line-base);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 技能区域 */
|
||||||
|
.skills-section {
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
padding-bottom: var(--space-2xl);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--text-h2);
|
||||||
|
line-height: var(--line-h2);
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 var(--space-lg) 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills-cloud {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-md);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 联系方式区域 */
|
||||||
|
.contact-section {
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
padding-bottom: var(--space-2xl);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-links {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
padding: var(--space-md) var(--space-lg);
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-link:hover {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 博客信息区域 */
|
||||||
|
.blog-info-section {
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-info p {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: var(--line-base);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-info a {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
transition: border-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-info a:hover {
|
||||||
|
border-bottom-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-stack {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||||
|
gap: var(--space-md);
|
||||||
|
margin-top: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-item {
|
||||||
|
padding: var(--space-md);
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-item strong {
|
||||||
|
font-size: var(--text-small);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-item span {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.page-title {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-links {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-link {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-stack {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,135 +0,0 @@
|
|||||||
---
|
|
||||||
import Layout from "@/layouts/Layout.astro";
|
|
||||||
import type {Archive} from "@/types/archive";
|
|
||||||
import {createHttp} from "@/lib/request";
|
|
||||||
|
|
||||||
const http = createHttp(Astro.request.headers);
|
|
||||||
|
|
||||||
const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
<Layout title="归档" description="">
|
|
||||||
<div class="archive">
|
|
||||||
{
|
|
||||||
data.map((year) => (
|
|
||||||
<div class="archive-year">
|
|
||||||
<h2 class="year-title">
|
|
||||||
<span class="year-badge">{year.year}年</span>
|
|
||||||
<span class="year-count">共 {year.total} 篇</span>
|
|
||||||
</h2>
|
|
||||||
<div>
|
|
||||||
{year.list.map((month) => (
|
|
||||||
<div class="month-group">
|
|
||||||
<h3 class="month-title">{month.month} 月</h3>
|
|
||||||
<ul class="post-list">
|
|
||||||
{month.list.map((post) => (
|
|
||||||
<li class="post-item">
|
|
||||||
<span class="post-date">
|
|
||||||
{post.published_at_display}
|
|
||||||
</span>
|
|
||||||
<a class="post-title" href={`/post/${post.slug}`}>{post.title}</a>
|
|
||||||
<span class="post-cat">{post.category_name}</span>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.archive {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-year {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.year-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 28px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.year-badge {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.year-count {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-group {
|
|
||||||
padding: 12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-title {
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list {
|
|
||||||
padding: 12px 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-item {
|
|
||||||
display: flex;
|
|
||||||
gap: 24px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-bottom: var(--border-secondary);
|
|
||||||
padding: 18px 0;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-date {
|
|
||||||
color: var(--text-meta);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-title {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 16px;
|
|
||||||
text-underline-offset: 4px;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-title:hover{
|
|
||||||
color: var(--text-title-hover);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-cat {
|
|
||||||
color: var(--text-meta);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.year-title{
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-title{
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
0
src/pages/categories/[category].astro
Normal file
0
src/pages/categories/[category].astro
Normal file
0
src/pages/categories/index.astro
Normal file
0
src/pages/categories/index.astro
Normal file
@@ -1,139 +0,0 @@
|
|||||||
---
|
|
||||||
const noindex = true;
|
|
||||||
---
|
|
||||||
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8"/>
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
|
||||||
/>
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
|
|
||||||
<meta name="generator" content={Astro.generator}/>
|
|
||||||
<title>Gitea 入口</title>
|
|
||||||
<meta name="theme-color" content="#ffffff"/>
|
|
||||||
<meta name="robots" content="noindex, nofollow">
|
|
||||||
<style>
|
|
||||||
@import "modern-normalize";
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--bg: #f6f7f9;
|
|
||||||
--card-bg: #ffffff;
|
|
||||||
--border: #e5e7eb;
|
|
||||||
--text-color: #2b2f36;
|
|
||||||
--text-secondary: #6b7280;
|
|
||||||
--primary: #4f6df5;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
min-height: 100vh;
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--text-color);
|
|
||||||
font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 24px 24px 24px 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitea-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 520px;
|
|
||||||
background: var(--card-bg);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitea-card__title {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitea-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitea-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 13px 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitea-item + .gitea-item {
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitea-item:hover {
|
|
||||||
background: #fafbfc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitea-item__label {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitea-item__link {
|
|
||||||
color: var(--primary);
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitea-item__link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page-container">
|
|
||||||
<div class="gitea-card">
|
|
||||||
<div class="gitea-card__title">常用入口</div>
|
|
||||||
<div class="gitea-content">
|
|
||||||
<div class="gitea-item">
|
|
||||||
<span class="gitea-item__label">博客地址</span>
|
|
||||||
<a class="gitea-item__link" target="_blank" href="https://ua42.com">点击访问</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gitea-item">
|
|
||||||
<span class="gitea-item__label">博客管理后台(支持游客查看)</span>
|
|
||||||
<a class="gitea-item__link" target="_blank" href="https://admin.ua42.com">点击访问</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gitea-item">
|
|
||||||
<span class="gitea-item__label">仓库地址</span>
|
|
||||||
<a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin">点击访问</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gitea-item">
|
|
||||||
<span class="gitea-item__label">博客服务端仓库</span>
|
|
||||||
<a class="gitea-item__link" target="_blank" href="https://git.ua42.com/beggin/blog-server">点击访问</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gitea-item">
|
|
||||||
<span class="gitea-item__label">博客服务端 API文档</span>
|
|
||||||
<a class="gitea-item__link" target="_blank" href="https://dev.ua42.com/docs/server-documentation.html">点击访问</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@@ -1,23 +1,119 @@
|
|||||||
---
|
---
|
||||||
import Layout from "@/layouts/Layout.astro";
|
import Layout from "@/layouts/Layout.astro";
|
||||||
import {siteConfig} from "@/consts.ts";
|
import PostCard from "@/components/PostCard.astro";
|
||||||
import {createHttp} from "@/lib/request.ts";
|
import { getCollection } from "astro:content";
|
||||||
import type {Post} from "@/types";
|
import { metadata } from "@/consts";
|
||||||
import IndexPage from "@/components/IndexPage.astro";
|
|
||||||
|
|
||||||
const {postPageSize, description} = siteConfig;
|
const { heroTitle, heroDescription } = metadata;
|
||||||
|
|
||||||
const http = createHttp(Astro.request.headers);
|
// 获取所有文章并按日期排序
|
||||||
|
const posts = (await getCollection("posts")).sort(
|
||||||
const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
|
(a, b) => b.data.date.getTime() - a.data.date.getTime()
|
||||||
searchParams: {
|
);
|
||||||
page: 1,
|
|
||||||
page_size: postPageSize,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const totalPage = Math.ceil(total / postPageSize);
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="博客首页" description={description}>
|
<Layout title="首页">
|
||||||
<IndexPage page={1} totalPage={totalPage} posts={list}/>
|
<!-- Hero 区域 -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1 class="hero-title">{heroTitle}</h1>
|
||||||
|
<p class="hero-description">{heroDescription}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 文章列表 -->
|
||||||
|
<section class="posts-section">
|
||||||
|
<h2 class="section-title">最新文章</h2>
|
||||||
|
<div class="posts-grid">
|
||||||
|
{posts.map((post) => (
|
||||||
|
<PostCard
|
||||||
|
title={post.data.title}
|
||||||
|
date={post.data.date}
|
||||||
|
summary={post.data.summary}
|
||||||
|
slug={post.slug}
|
||||||
|
tags={post.data.tags}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Hero 区域样式 */
|
||||||
|
.hero {
|
||||||
|
padding: var(--space-2xl) 0;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: var(--text-h1);
|
||||||
|
line-height: var(--line-h1);
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0 0 var(--space-md) 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: linear-gradient(135deg, var(--accent-color) 0%, #7B1FA2 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: var(--text-h3);
|
||||||
|
line-height: var(--line-h3);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章区域 */
|
||||||
|
.posts-section {
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--text-h2);
|
||||||
|
line-height: var(--line-h2);
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 var(--space-xl) 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.posts-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||||
|
gap: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.hero {
|
||||||
|
padding: var(--space-xl) 0;
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posts-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,34 +0,0 @@
|
|||||||
---
|
|
||||||
import Layout from "@/layouts/Layout.astro";
|
|
||||||
import {siteConfig} from "@/consts.ts";
|
|
||||||
import {createHttp} from "@/lib/request.ts";
|
|
||||||
import type {Post} from "@/types";
|
|
||||||
import IndexPage from "@/components/IndexPage.astro";
|
|
||||||
const {page} = Astro.params;
|
|
||||||
|
|
||||||
const pageInt = Number(page);
|
|
||||||
|
|
||||||
if (isNaN(pageInt) || pageInt <= 1) {
|
|
||||||
return Astro.redirect("/");
|
|
||||||
}
|
|
||||||
|
|
||||||
const {postPageSize,description} = siteConfig;
|
|
||||||
|
|
||||||
const http = createHttp(Astro.request.headers);
|
|
||||||
|
|
||||||
const {list, total} = await http.get<ApiPageResponse<Post>>("posts", {
|
|
||||||
searchParams: {
|
|
||||||
page: pageInt,
|
|
||||||
page_size: postPageSize,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const totalPage = Math.ceil(total / postPageSize);
|
|
||||||
|
|
||||||
if (totalPage < pageInt) {
|
|
||||||
return Astro.redirect("/404");
|
|
||||||
}
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="博客首页" description={description}>
|
|
||||||
<IndexPage page={pageInt} totalPage={totalPage} posts={list}/>
|
|
||||||
</Layout>
|
|
||||||
@@ -1,237 +0,0 @@
|
|||||||
---
|
|
||||||
import "@/styles/github-markdown.css";
|
|
||||||
import "@/styles/github-markdown-reset.css";
|
|
||||||
import "photoswipe/dist/photoswipe.css";
|
|
||||||
|
|
||||||
import Layout from '@/layouts/Layout.astro';
|
|
||||||
import {createHttp} from "@/lib/request.ts";
|
|
||||||
import type {Post} from "@/types";
|
|
||||||
import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
|
|
||||||
import {formatDatetime} from "@/lib/format.ts";
|
|
||||||
|
|
||||||
const {slug} = Astro.params;
|
|
||||||
|
|
||||||
const http = createHttp(Astro.request.headers);
|
|
||||||
|
|
||||||
let data: Post;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await http.get<ApiResponse<Post>>(`posts/${slug}`);
|
|
||||||
data = res.data;
|
|
||||||
} catch (error) {
|
|
||||||
return Astro.redirect("/404");
|
|
||||||
}
|
|
||||||
|
|
||||||
const content = await processHtmlWithJsdom(data.content);
|
|
||||||
const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title={data.title} description={data.summary}>
|
|
||||||
<article>
|
|
||||||
<div class="meta">
|
|
||||||
<div class="meta-left">
|
|
||||||
<span>{data.category_name} · {data.category_code.toUpperCase()}</span>
|
|
||||||
<span>{published_at}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="meta-view-count">{data.view_count} 次阅读</div>
|
|
||||||
</div>
|
|
||||||
<h1>{data.title}</h1>
|
|
||||||
|
|
||||||
{data.cover &&
|
|
||||||
<div>
|
|
||||||
<img class="cover" src={data.cover} alt={data.title}>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<p class="summary">{data.summary}</p>
|
|
||||||
|
|
||||||
<div class="divider"></div>
|
|
||||||
|
|
||||||
<div class="markdown-body" data-color-mode="dark" set:html={content}/>
|
|
||||||
|
|
||||||
{
|
|
||||||
data.tags.length > 0 &&
|
|
||||||
<div class="tags">
|
|
||||||
{data.tags.map(tag => <span>{tag.name}</span>)}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</article>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
article {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
flex: 1;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta {
|
|
||||||
color: var(--text-meta);
|
|
||||||
font-size: 13px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-left {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-view-count:hover {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary {
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: var(--text-meta);
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
border-bottom: var(--border-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-body {
|
|
||||||
margin-top: 24px;
|
|
||||||
line-height: 1.8;
|
|
||||||
font-size: 15px;
|
|
||||||
color: var(--article-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags {
|
|
||||||
margin-top: 24px;
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags span {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
border: var(--border-primary);
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
h1{
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
|
||||||
import ClipboardJS from "clipboard";
|
|
||||||
|
|
||||||
const init = async () => {
|
|
||||||
const article = document.querySelector(".markdown-body")!;
|
|
||||||
const images = Array.from(article.querySelectorAll("img"));
|
|
||||||
|
|
||||||
if(images.length === 0) return
|
|
||||||
|
|
||||||
const waitImageLoaded = (img: HTMLImageElement) => {
|
|
||||||
if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise<void>((resolve) => {
|
|
||||||
img.addEventListener("load", () => resolve(), {once: true});
|
|
||||||
img.addEventListener("error", () => resolve(), {once: true});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
await Promise.all(
|
|
||||||
images.map(async (img) => {
|
|
||||||
if (img.closest("a")) return;
|
|
||||||
|
|
||||||
await waitImageLoaded(img);
|
|
||||||
|
|
||||||
const link = document.createElement("a");
|
|
||||||
|
|
||||||
link.href = img.currentSrc || img.src;
|
|
||||||
link.target = "_blank";
|
|
||||||
link.rel = "noreferrer";
|
|
||||||
link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
|
|
||||||
link.dataset.pswpHeight = String(
|
|
||||||
img.naturalHeight || img.height || 800,
|
|
||||||
);
|
|
||||||
|
|
||||||
img.parentNode?.insertBefore(link, img);
|
|
||||||
link.appendChild(img);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const lightbox = new PhotoSwipeLightbox({
|
|
||||||
gallery: ".markdown-body",
|
|
||||||
children: "a[data-pswp-width]",
|
|
||||||
pswpModule: () => import("photoswipe"),
|
|
||||||
|
|
||||||
padding: {
|
|
||||||
top: 48,
|
|
||||||
right: 24,
|
|
||||||
bottom: 48,
|
|
||||||
left: 24,
|
|
||||||
},
|
|
||||||
bgOpacity: 0.5,
|
|
||||||
tapAction: "close",
|
|
||||||
bgClickAction: "close",
|
|
||||||
});
|
|
||||||
|
|
||||||
lightbox.init();
|
|
||||||
};
|
|
||||||
|
|
||||||
init();
|
|
||||||
|
|
||||||
|
|
||||||
const copyTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
|
|
||||||
|
|
||||||
// 代码块复制功能
|
|
||||||
const clipboard = new ClipboardJS(".code-copy-btn", {
|
|
||||||
text: (el) => {
|
|
||||||
const sibling = el.closest(".code-header")?.nextElementSibling;
|
|
||||||
return sibling?.textContent.trim() || "";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
clipboard.on("success", (e) => {
|
|
||||||
const btn = e.trigger as HTMLElement;
|
|
||||||
|
|
||||||
// 清理当前按钮之前的定时器
|
|
||||||
const oldTimer = copyTimers.get(btn);
|
|
||||||
if (oldTimer) {
|
|
||||||
clearTimeout(oldTimer);
|
|
||||||
}
|
|
||||||
|
|
||||||
const originalText = btn.textContent || "";
|
|
||||||
|
|
||||||
btn.textContent = "✓ 代码已复制";
|
|
||||||
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
btn.textContent = originalText;
|
|
||||||
copyTimers.delete(btn);
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
copyTimers.set(btn, timer);
|
|
||||||
|
|
||||||
e.clearSelection();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
344
src/pages/posts/[...slug].astro
Normal file
344
src/pages/posts/[...slug].astro
Normal file
@@ -0,0 +1,344 @@
|
|||||||
|
---
|
||||||
|
import Layout from "@/layouts/Layout.astro";
|
||||||
|
import Tag from "@/components/Tag.astro";
|
||||||
|
import { getCollection } from "astro:content";
|
||||||
|
|
||||||
|
export const prerender = true;
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const posts = await getCollection("posts");
|
||||||
|
return posts.map((post) => ({
|
||||||
|
params: { slug: post.slug },
|
||||||
|
props: { post },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
const { post } = Astro.props;
|
||||||
|
const { Content } = await post.render();
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
const formatDate = (date: Date) => {
|
||||||
|
return new Intl.DateTimeFormat("zh-CN", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
}).format(date);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算阅读时间
|
||||||
|
const calculateReadingTime = (text: string) => {
|
||||||
|
const wordsPerMinute = 200;
|
||||||
|
const wordCount = text.length;
|
||||||
|
return Math.ceil(wordCount / wordsPerMinute);
|
||||||
|
};
|
||||||
|
|
||||||
|
const readingTime = calculateReadingTime(post.body);
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title={post.data.title} description={post.data.summary}>
|
||||||
|
<article class="post">
|
||||||
|
<!-- 文章头部 -->
|
||||||
|
<header class="post-header">
|
||||||
|
<h1 class="post-title">{post.data.title}</h1>
|
||||||
|
|
||||||
|
<div class="post-meta">
|
||||||
|
<time class="post-date" datetime={post.data.date.toISOString()}>
|
||||||
|
{formatDate(post.data.date)}
|
||||||
|
</time>
|
||||||
|
<span class="separator">·</span>
|
||||||
|
<span class="reading-time">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<circle cx="12" cy="12" r="10" stroke-width="2"/>
|
||||||
|
<polyline points="12 6 12 12 16 14" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
{readingTime} 分钟阅读
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{post.data.tags && post.data.tags.length > 0 && (
|
||||||
|
<div class="post-tags">
|
||||||
|
{post.data.tags.map((tag) => <Tag tag={tag} size="medium" />)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 文章内容 -->
|
||||||
|
<div class="post-content">
|
||||||
|
<Content />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章底部操作 -->
|
||||||
|
<footer class="post-footer">
|
||||||
|
<a href="/" class="back-button">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
返回首页
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</Layout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post {
|
||||||
|
max-width: var(--content-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章头部 */
|
||||||
|
.post-header {
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
padding-bottom: var(--space-xl);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
font-size: var(--text-h1);
|
||||||
|
line-height: var(--line-h1);
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0 0 var(--space-lg) 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
font-size: var(--text-small);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-date {
|
||||||
|
font-size: var(--text-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reading-time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
font-size: var(--text-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章内容样式 */
|
||||||
|
.post-content {
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: var(--line-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Markdown 元素样式 */
|
||||||
|
.post-content :global(h1),
|
||||||
|
.post-content :global(h2),
|
||||||
|
.post-content :global(h3),
|
||||||
|
.post-content :global(h4),
|
||||||
|
.post-content :global(h5),
|
||||||
|
.post-content :global(h6) {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-top: var(--space-xl);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(h1) {
|
||||||
|
font-size: var(--text-h1);
|
||||||
|
margin-top: var(--space-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(h2) {
|
||||||
|
font-size: var(--text-h2);
|
||||||
|
padding-bottom: var(--space-sm);
|
||||||
|
border-bottom: 2px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(h3) {
|
||||||
|
font-size: var(--text-h3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(p) {
|
||||||
|
margin: var(--space-md) 0;
|
||||||
|
line-height: var(--line-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(a) {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
transition: border-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(a:hover) {
|
||||||
|
border-bottom-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(strong) {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(em) {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表样式 */
|
||||||
|
.post-content :global(ul),
|
||||||
|
.post-content :global(ol) {
|
||||||
|
margin: var(--space-md) 0;
|
||||||
|
padding-left: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(li) {
|
||||||
|
margin: var(--space-sm) 0;
|
||||||
|
line-height: var(--line-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(li::marker) {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 引用样式 */
|
||||||
|
.post-content :global(blockquote) {
|
||||||
|
margin: var(--space-lg) 0;
|
||||||
|
padding: var(--space-md) var(--space-lg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(blockquote p) {
|
||||||
|
margin: var(--space-sm) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 代码样式 */
|
||||||
|
.post-content :global(code) {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.9em;
|
||||||
|
background-color: var(--border-color);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(pre) {
|
||||||
|
margin: var(--space-lg) 0;
|
||||||
|
padding: var(--space-md);
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(pre code) {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
color: #d4d4d4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格样式 */
|
||||||
|
.post-content :global(table) {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: var(--space-lg) 0;
|
||||||
|
font-size: var(--text-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(th),
|
||||||
|
.post-content :global(td) {
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(th) {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(tr:nth-child(even)) {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片样式 */
|
||||||
|
.post-content :global(img) {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
margin: var(--space-lg) 0;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分割线 */
|
||||||
|
.post-content :global(hr) {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
margin: var(--space-xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章底部 */
|
||||||
|
.post-footer {
|
||||||
|
margin-top: var(--space-2xl);
|
||||||
|
padding-top: var(--space-xl);
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
font-size: var(--text-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button:hover {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
transform: translateX(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.post-title {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-meta {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(h1) {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(h2) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(h3) {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(pre) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content :global(table) {
|
||||||
|
font-size: var(--text-tiny);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import type {APIRoute} from 'astro';
|
|
||||||
import {siteConfig} from "@/consts";
|
|
||||||
|
|
||||||
const site = siteConfig.site
|
|
||||||
|
|
||||||
const staticUrls = [
|
|
||||||
'',
|
|
||||||
'/archive'
|
|
||||||
];
|
|
||||||
|
|
||||||
export const GET: APIRoute = async () => {
|
|
||||||
const urls = staticUrls
|
|
||||||
.filter((url, index, array) => {
|
|
||||||
return array.indexOf(url) === index;
|
|
||||||
});
|
|
||||||
|
|
||||||
const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
|
||||||
${urls.map((url) => `<url>
|
|
||||||
<loc>${site}${url}</loc>
|
|
||||||
</url>`
|
|
||||||
)
|
|
||||||
.join('\n')}
|
|
||||||
</urlset>`;
|
|
||||||
|
|
||||||
return new Response(xml, {
|
|
||||||
status: 200,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/xml; charset=utf-8',
|
|
||||||
'Cache-Control': 'public, max-age=3600, s-maxage=3600',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import type {APIRoute} from 'astro';
|
|
||||||
import {siteConfig} from "@/consts";
|
|
||||||
import {createHttp} from "@/lib/request.ts";
|
|
||||||
import type {PostForSitemap} from "@/types";
|
|
||||||
import dayjs from "dayjs";
|
|
||||||
|
|
||||||
const site =siteConfig.site
|
|
||||||
|
|
||||||
export const GET: APIRoute = async (context) => {
|
|
||||||
const http = createHttp(context.request.headers);
|
|
||||||
|
|
||||||
const {data} = await http.get<ApiResponse<PostForSitemap[]>>("posts/sitemap")
|
|
||||||
|
|
||||||
const urls = data
|
|
||||||
.filter((url, index, array) => {
|
|
||||||
return array.indexOf(url) === index;
|
|
||||||
});
|
|
||||||
|
|
||||||
const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
|
||||||
${urls.map((post) => `<url>
|
|
||||||
<loc>${site}/post/${post.slug}</loc>
|
|
||||||
<lastmod>${dayjs(post.updated_at || post.created_at).toISOString()}</lastmod>
|
|
||||||
</url>`
|
|
||||||
)
|
|
||||||
.join('\n')}
|
|
||||||
</urlset>`;
|
|
||||||
|
|
||||||
return new Response(xml, {
|
|
||||||
status: 200,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/xml; charset=utf-8',
|
|
||||||
'Cache-Control': 'public, max-age=3600, s-maxage=3600',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import type {APIRoute} from 'astro';
|
|
||||||
import {siteConfig} from "@/consts";
|
|
||||||
|
|
||||||
const site = siteConfig.site
|
|
||||||
|
|
||||||
export const GET: APIRoute = () => {
|
|
||||||
const xml = `<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
|
||||||
<sitemap>
|
|
||||||
<loc>${site}/sitemap-pages.xml</loc>
|
|
||||||
</sitemap>
|
|
||||||
<sitemap>
|
|
||||||
<loc>${site}/sitemap-posts.xml</loc>
|
|
||||||
</sitemap>
|
|
||||||
</sitemapindex>`;
|
|
||||||
|
|
||||||
return new Response(xml, {
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/xml; charset=utf-8',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
0
src/pages/tags/[tag].astro
Normal file
0
src/pages/tags/[tag].astro
Normal file
0
src/pages/tags/index.astro
Normal file
0
src/pages/tags/index.astro
Normal file
123
src/styles/base.css
Normal file
123
src/styles/base.css
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
@import "modern-normalize";
|
||||||
|
@import "./reset.css";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* 布局宽度 */
|
||||||
|
--layout-width: 1200px;
|
||||||
|
--content-width: 800px;
|
||||||
|
|
||||||
|
/* 明亮主题配色 */
|
||||||
|
--bg-primary: #FAFAFA;
|
||||||
|
--bg-secondary: #FFFFFF;
|
||||||
|
--text-primary: #1A1A1A;
|
||||||
|
--text-secondary: #666666;
|
||||||
|
--accent-color: #0066FF;
|
||||||
|
--border-color: #E5E5E5;
|
||||||
|
|
||||||
|
/* 字体家族 */
|
||||||
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
|
||||||
|
--font-mono: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
|
||||||
|
|
||||||
|
/* 字体尺寸 */
|
||||||
|
--text-h1: 36px;
|
||||||
|
--text-h2: 28px;
|
||||||
|
--text-h3: 22px;
|
||||||
|
--text-base: 17px;
|
||||||
|
--text-small: 14px;
|
||||||
|
--text-tiny: 12px;
|
||||||
|
|
||||||
|
/* 行高 */
|
||||||
|
--line-h1: 1.3;
|
||||||
|
--line-h2: 1.4;
|
||||||
|
--line-h3: 1.4;
|
||||||
|
--line-base: 1.8;
|
||||||
|
--line-small: 1.6;
|
||||||
|
--line-tiny: 1.5;
|
||||||
|
|
||||||
|
/* 间距系统 (8px base) */
|
||||||
|
--space-xs: 4px;
|
||||||
|
--space-sm: 8px;
|
||||||
|
--space-md: 16px;
|
||||||
|
--space-lg: 24px;
|
||||||
|
--space-xl: 32px;
|
||||||
|
--space-2xl: 48px;
|
||||||
|
|
||||||
|
/* 圆角 */
|
||||||
|
--radius-sm: 6px;
|
||||||
|
--radius-md: 12px;
|
||||||
|
--radius-lg: 16px;
|
||||||
|
|
||||||
|
/* 阴影 */
|
||||||
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||||
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
/* 过渡动画 */
|
||||||
|
--transition-fast: 150ms ease-in-out;
|
||||||
|
--transition-base: 200ms ease-out;
|
||||||
|
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗黑主题 */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-primary: #0F0F0F;
|
||||||
|
--bg-secondary: #1A1A1A;
|
||||||
|
--text-primary: #E5E5E5;
|
||||||
|
--text-secondary: #A0A0A0;
|
||||||
|
--accent-color: #3B82F6;
|
||||||
|
--border-color: #2A2A2A;
|
||||||
|
|
||||||
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||||
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 全局样式 */
|
||||||
|
html {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: var(--line-base);
|
||||||
|
color: var(--text-primary);
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
transition: background-color var(--transition-slow), color var(--transition-slow);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接样式 */
|
||||||
|
a {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 代码样式 */
|
||||||
|
code {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.9em;
|
||||||
|
background-color: var(--border-color);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre code {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,li{
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
0
src/styles/enhancements.css
Normal file
0
src/styles/enhancements.css
Normal file
@@ -1,84 +0,0 @@
|
|||||||
.markdown-body pre code {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-body h1,
|
|
||||||
.markdown-body h2,
|
|
||||||
.markdown-body h3,
|
|
||||||
.markdown-body h4,
|
|
||||||
.markdown-body h5,
|
|
||||||
.markdown-body h6 {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.markdown-body pre code {
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-body .highlight pre,
|
|
||||||
.markdown-body pre {
|
|
||||||
border-radius: 0 0 8px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-body img {
|
|
||||||
margin: 12px 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-block {
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-header {
|
|
||||||
height: 36px;
|
|
||||||
background: var(--code-block-header-bg);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
color: var(--text-primary);
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-header-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-actions .dot {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-actions .close {
|
|
||||||
background: #ff5f57;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-actions .minimize {
|
|
||||||
background: #febc2e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-actions .maximize {
|
|
||||||
background: #28c840;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-copy-btn {
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-copy-btn:hover {
|
|
||||||
color: var(--code-block-copy-btn-hover-color);
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,65 +0,0 @@
|
|||||||
@import "modern-normalize";
|
|
||||||
@import "css-reset.css";
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
--layout-width: 760px;
|
|
||||||
|
|
||||||
--background: #ffffff;
|
|
||||||
--border-primary: 1px solid #dcdcdc;
|
|
||||||
--border-secondary: 1px solid #eee;
|
|
||||||
--text-primary: #030712;
|
|
||||||
--text-secondary: #3f3f46;
|
|
||||||
--text-disabled: #d1d5db;
|
|
||||||
--text-meta: #71717a;
|
|
||||||
--article-text-color: #404040;
|
|
||||||
--text-title-hover: #000;
|
|
||||||
|
|
||||||
--code-block-header-bg: #f5f5f4;
|
|
||||||
--code-block-copy-btn-hover-color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--background: #0a0a0a;
|
|
||||||
--border-primary: 1px solid #52525b;
|
|
||||||
--border-secondary: 1px solid #525252;
|
|
||||||
--text-primary: #e4e4e7;
|
|
||||||
--text-secondary: #d1d5db;
|
|
||||||
--text-disabled: #6b7280;
|
|
||||||
--text-meta: #d4d4d8;
|
|
||||||
--article-text-color: #d4d4d8;
|
|
||||||
--text-title-hover: #fff;
|
|
||||||
|
|
||||||
--code-block-header-bg: #374151;
|
|
||||||
--code-block-copy-btn-hover-color: #9ca3af;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
font-family: var(--font-family), serif;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滚动条轨道 */
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滚动条滑块 */
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(139,139,139,.5);
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 鼠标悬停 */
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: rgba(139,139,139,.7);
|
|
||||||
}
|
|
||||||
11
src/styles/reset.css
Normal file
11
src/styles/reset.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/* css reset */
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, ol {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
0
src/styles/typography.css
Normal file
0
src/styles/typography.css
Normal file
@@ -1,21 +0,0 @@
|
|||||||
type ArchiveYear = {
|
|
||||||
year: number;
|
|
||||||
total: number;
|
|
||||||
list: ArchiveMonth[];
|
|
||||||
};
|
|
||||||
|
|
||||||
type ArchivePost = {
|
|
||||||
id: number;
|
|
||||||
slug: string;
|
|
||||||
title: string;
|
|
||||||
published_at: string;
|
|
||||||
published_at_display: string;
|
|
||||||
category_name: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type ArchiveMonth = {
|
|
||||||
month: number;
|
|
||||||
list: ArchivePost[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Archive = ArchiveYear[];
|
|
||||||
29
src/types/global.d.ts
vendored
29
src/types/global.d.ts
vendored
@@ -1,29 +0,0 @@
|
|||||||
/** 基础 API 响应结构 */
|
|
||||||
declare interface ApiResponse<T = unknown> {
|
|
||||||
msg?: string
|
|
||||||
data: T
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 分页响应结构 */
|
|
||||||
declare interface ApiPageResponse<T = unknown> {
|
|
||||||
msg?: string
|
|
||||||
/** 当前页码 */
|
|
||||||
page: number
|
|
||||||
/** 每页数量 */
|
|
||||||
pageSize: number
|
|
||||||
/** 业务数据列表 */
|
|
||||||
list: T[]
|
|
||||||
/** 总记录数 */
|
|
||||||
total: number
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 错误响应结构 - 当请求失败时的响应格式 */
|
|
||||||
declare interface ApiErrorResponse {
|
|
||||||
msg: string
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 通用请求参数类型 */
|
|
||||||
declare interface Pagination {
|
|
||||||
page?: number
|
|
||||||
pageSize?: number
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from './post.ts'
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
export type Tag = {
|
|
||||||
id: number
|
|
||||||
code: string
|
|
||||||
name: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Post = {
|
|
||||||
title: string;
|
|
||||||
summary: string;
|
|
||||||
slug: string;
|
|
||||||
cover: string;
|
|
||||||
category_name: string;
|
|
||||||
category_code: string;
|
|
||||||
category_id?: number;
|
|
||||||
published_at: string;
|
|
||||||
view_count: number;
|
|
||||||
content: string;
|
|
||||||
tags: Tag[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CategoriesStats = {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
code: string
|
|
||||||
post_count: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type PostForSitemap = {
|
|
||||||
slug: string
|
|
||||||
created_at: string
|
|
||||||
updated_at: string
|
|
||||||
}
|
|
||||||
@@ -13,6 +13,8 @@
|
|||||||
"@/*": [
|
"@/*": [
|
||||||
"src/*"
|
"src/*"
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
"jsx": "preserve",
|
||||||
|
"jsxImportSource": "solid-js"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user