lyf:Blog

FireflyBlog AI 功能完整指南

Mon, 01 Jun 2026 00:00:00 GMT

一、功能概览

FireflyBlog 集成了两套 AI 功能，基于 DeepSeek API 实现：

功能	入口	能力
AI 问答	文章页面右下角「🤖」按钮	基于当前文章内容进行多轮对话，支持引用跳转、思维链展示
文章概括	文章标题下方「✨ AI 概括」卡片	一键生成文章摘要，含思维链展开、段落引用、追问建议

功能特点

前端零密钥：API Key 存储在服务端环境变量中，前端不暴露
SSE 流式输出：逐 Token 渲染，用户体验流畅
引用跳转：回答中的 ↗ 链接可直接跳转到文章对应章节
追问建议：AI 生成相关问题，点击直接发送到聊天面板
sessionStorage 缓存：同一会话内不重复请求概括
Swup 兼容：支持 SPA 风格页面切换

二、目录结构

1
src/
2
├── config/
3
│   └── aiConfig.ts                    # AI 配置文件（功能开关、模型参数）
4
├── pages/
5
│   └── api/
6
│       └── ai/
7
│           ├── chat.ts                # AI 问答 API 路由
8
│           └── summarize.ts           # 文章概括 API 路由
9
├── components/
10
│   └── ai/
11
│       ├── AiChat.svelte              # AI 聊天面板组件
12
│       └── ArticleSummary.svelte      # 文章概括卡片组件
13
├── styles/
14
│   └── ai.css                         # AI 组件样式
15
├── layouts/
16
│   └── Layout.astro                   # 添加了 Swup 钩子（需修改）
17
├── components/
18
│   └── controls/
19
│       └── FloatingControls.astro     # 添加了 AI 聊天按钮（需修改）
20
└── pages/
21
    └── posts/
22
        └── [...slug].astro            # 添加了概括卡片（需修改）

展开收起

三、技术架构

1
┌─────────────────────────────────────────────────────┐
2
│                    浏览器端                          │
3
│  ┌──────────────────┐  ┌────────────────────────┐   │
4
│  │   AiChat.svelte  │  │  ArticleSummary.svelte │   │
5
│  │   (聊天面板)      │  │  (概括卡片)            │   │
6
│  └────────┬─────────┘  └───────────┬────────────┘   │
7
│           │                        │                │
8
│           └──────────┬─────────────┘                │
9
│                      │ POST /api/ai/chat            │
10
│                      │ POST /api/ai/summarize       │
11
└──────────────────────┼──────────────────────────────┘
12
                       │
13
┌──────────────────────┼──────────────────────────────┐
14
│          Astro API Routes (SSR)                      │
15
│                      │                               │
16
│  ┌───────────────────┴───────────────────────┐      │
17
│  │              路由处理                      │      │
18
│  │  ├── chat.ts → 构建 System Prompt        │      │
19
│  │  └── summarize.ts → 构建概括 Prompt      │      │
20
│  └───────────────────┬───────────────────────┘      │
21
│                      │                               │
22
│  ┌───────────────────┴───────────────────────┐      │
23
│  │           环境变量读取                     │      │
24
│  │  import.meta.env.AI_API_KEY              │      │
25
│  └───────────────────┬───────────────────────┘      │
26
└──────────────────────┼──────────────────────────────┘
27
                       │
28
                       ▼
29
              ┌─────────────────┐
30
              │   DeepSeek API  │
31
              │  - deepseek-chat│
32
              │  - SSE 流式响应 │
33
              └─────────────────┘

展开收起

四、配置说明

4.1 环境变量

在 .env.local 文件中添加：

Terminal window

1
# DeepSeek API Key（必需）
2
AI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx

4.2 AI 配置文件

编辑 src/config/aiConfig.ts：

1
export const aiConfig = {
2
  // 是否启用 AI 功能
3
  enable: true,
4

5
  // DeepSeek API 配置
6
  apiEndpoint: 'https://api.deepseek.com/v1/chat/completions',
7
  model: 'deepseek-chat',
8
  maxTokens: 4096,
9
  temperature: 0.7,        // 问答模式
10
  summaryTemperature: 0.1,  // 概括模式（更稳定）
11

12
  // 功能开关
13
  chatEnabled: true,        // 启用 AI 问答
14
  summaryEnabled: true,     // 启用文章概括
15
  summaryAutoGenerate: false, // 是否自动生成概括
16

17
  // 博主信息
18
  authorName: 'Firefly',
19
  authorBio: '这是一个技术博客，分享编程、AI、Web 开发等技术内容。',
20
};

展开收起

4.3 配置项说明

配置项	类型	默认值	说明
`enable`	boolean	`true`	总开关
`chatEnabled`	boolean	`true`	显示问AI按钮
`summaryEnabled`	boolean	`true`	显示概括卡片
`summaryAutoGenerate`	boolean	`false`	进入文章自动生成概括
`temperature`	number	`0.7`	问答温度（越高越随机）
`summaryTemperature`	number	`0.1`	概括温度（越低越稳定）
`maxTokens`	number	`4096`	最大输出 token 数

五、实现流程

5.1 AI 问答流程

1
用户输入问题
2
    │
3
    ▼
4
前端构建请求 { messages, articleContent, articleTitle, headings }
5
    │
6
    ▼
7
POST /api/ai/chat
8
    │
9
    ├─ 1. 读取环境变量 AI_API_KEY
10
    │
11
    ├─ 2. 构建 System Prompt
12
    │     ├── SYSTEM_PROMPT（角色定义 + 输出格式）
13
    │     ├── 博主信息
14
    │     ├── 文章标题
15
    │     ├── 章节索引（用于引用编号）
16
    │     └── 文章全文
17
    │
18
    ├─ 3. 调用 DeepSeek API（stream: true）
19
    │
20
    └─ 4. 透传 SSE 流 → 浏览器

展开收起

5.2 文章概括流程

1
页面加载 / 点击「生成概括」按钮
2
    │
3
    ├─ 检查 sessionStorage 缓存
4
    │     ├─ 命中 → 直接渲染缓存结果
5
    │     └─ 未命中 → 发起请求
6
    │
7
    ├─ POST /api/ai/summarize
8
    │
9
    ├─ 服务端处理：
10
    │     ├── 读取文章内容
11
    │     ├── 构建章节索引
12
    │     ├── 组装 SUMMARIZE_PROMPT + 文章内容
13
    │     └── 调用 DeepSeek API → SSE 流
14
    │
15
    ├─ 前端流式渲染：
16
    │     ├── thinking 过程（可折叠）
17
    │     ├── 正文段落（支持行内 Markdown）
18
    │     ├── 引用链接（↗ + 章节编号）
19
    │     └── 提问建议标签
20
    │
21
    └─ 写入 sessionStorage

展开收起

5.3 SSE 流式渲染

1
// 前端 SSE 解析核心逻辑
2
const reader = response.body?.getReader();
3
const decoder = new TextDecoder();
4

5
while (true) {
6
  const { done, value } = await reader.read();
7
  if (done) break;
8

9
  const chunk = decoder.decode(value, { stream: true });
10
  const lines = chunk.split('\n');
11

12
  for (const line of lines) {
13
    if (!line.startsWith('data: ')) continue;
14
    const data = line.slice(6).trim();
15
    if (data === '[DONE]') continue;
16

17
    const parsed = JSON.parse(data);
18
    const delta = parsed.choices?.[0]?.delta;
19

20
    // 处理思维链（thinking）
21
    if (delta?.reasoning_content) {
22
      thinkingContent += delta.reasoning_content;
23
    }
24

25
    // 处理正文内容
26
    if (delta?.content) {
27
      fullContent += delta.content;
28
    }
29
  }
30
}

展开收起

六、Prompt 设计

6.1 问答 System Prompt

1
你是一个专业的博客助手，专门为读者解答关于博客文章的问题。
2

3
## 输出格式
4
请以 JSON 数组格式输出，每个元素包含：
5
- p: 段落内容
6
- r: 引用的章节编号数组（可选）
7
- q: 追问建议数组（在最后一个元素中）
8

9
示例：
10
[
11
  {"p": "根据文章内容...", "r": [1, 2]},
12
  {"p": "你可能还想了解...", "q": ["如何优化性能？"]}
13
]

6.2 概括 Prompt

1
你是一个文章概括助手，专门生成简洁准确的文章摘要。
2

3
## 输出格式
4
{
5
  "p": ["段落1内容", "段落2内容", "段落3内容"],
6
  "q": ["追问建议1", "追问建议2", "追问建议3"]
7
}

七、注意事项

7.1 环境变量读取

在 Astro SSR API 路由中，必须使用 import.meta.env 读取环境变量：

1
// ✅ 正确
2
const apiKey = (import.meta as any).env?.AI_API_KEY;
3

4
// ❌ 错误（在 Astro 中可能不工作）
5
const apiKey = process.env.AI_API_KEY;

7.2 CORS 配置

API 路由需要配置 CORS 头，否则浏览器会阻止请求：

1
const corsHeaders = {
2
  'Access-Control-Allow-Methods': 'POST, OPTIONS',
3
  'Access-Control-Allow-Headers': 'Content-Type',
4
  'Access-Control-Allow-Origin': isDev ? origin : '*',
5
};

生产环境建议限制为你的域名：

1
const allowedOrigins = ['https://your-domain.com'];

7.3 Swup 兼容

由于使用了 Swup SPA 导航，AI 组件必须：

在 onMount 中将函数注册到 window 对象
在 Layout.astro 的 page:view 钩子中重新初始化

1
// 组件中
2
onMount(() => {
3
  (window as any).setupAiChat = () => {
4
    getArticleData();
5
  };
6
});
7

8
// Layout.astro 中
9
window.swup.hooks.on("page:view", () => {
10
  if ((window as any).setupAiChat) {
11
    (window as any).setupAiChat();
12
  }
13
});

7.4 Svelte 响应式更新

更新数组中的对象时，必须创建新对象才能触发响应式更新：

1
// ✅ 正确 - 创建新对象
2
messages = messages.map((m, i) =>
3
  i === messages.length - 1
4
    ? { ...m, content: newContent }
5
    : m
6
);
7

8
// ❌ 错误 - 直接修改不会触发更新
9
assistantMessage.content = newContent;
10
messages = [...messages];

7.5 避免嵌套箭头函数

Svelte 编译器对嵌套箭头函数的支持有限，建议使用 for 循环：

1
// ✅ 推荐
2
const results: string[] = [];
3
for (const item of items) {
4
  results.push(process(item));
5
}
6

7
// ❌ 可能导致编译错误
8
const results = items.map(item => {
9
  return item.subItems.map(sub => {
10
    return process(sub);
11
  }).join('');
12
});

7.6 API Key 安全

永远不要将 API Key 提交到 Git 仓库
使用 .env.local 文件存储敏感信息
确保 .gitignore 中包含 .env.local
生产环境使用 Vercel 环境变量

7.7 错误处理

前端需要处理以下错误情况：

1
// API 请求失败
2
if (!response.ok) {
3
  throw new Error('AI 服务暂时不可用');
4
}
5

6
// SSE 解析错误
7
try {
8
  const parsed = JSON.parse(data);
9
} catch (e) {
10
  // 忽略解析错误，继续处理下一个 chunk
11
}
12

13
// JSON 响应解析失败
14
try {
15
  const parsed = JSON.parse(fullContent);
16
} catch (e) {
17
  // 如果不是 JSON，保持原始内容
18
}

展开收起

八、部署说明

8.1 Vercel 部署

将代码推送到 GitHub
在 Vercel 控制台导入项目
在 Settings → Environment Variables 中添加：
- AI_API_KEY = sk-xxxxxxxxxx
部署完成后测试

8.2 本地开发

Terminal window

1
# 1. 安装依赖
2
npm install
3

4
# 2. 配置环境变量
5
echo 'AI_API_KEY=sk-xxxxxxxxxx' >> .env.local
6

7
# 3. 启动开发服务器
8
npm run dev

九、常见问题

Q1: 显示「API Key 未配置」

检查 .env.local 文件是否存在且包含 AI_API_KEY，然后重启开发服务器。

Q2: 显示「AI 服务暂时不可用」

检查终端日志，看 DeepSeek API 返回的状态码
确认 API Key 是否有效
检查网络连接

Q3: 概括卡片不显示

检查 aiConfig.ts 中的 summaryEnabled 是否为 true。

Q4: Swup 导航后 AI 功能失效

确保 Layout.astro 中的 page:view 钩子正确调用了 setupAiChat 和 setupAiSummary。

Q5: 流式输出不显示

检查浏览器控制台是否有 SSE 解析错误，确保 DeepSeek API 返回的是标准 SSE 格式。

十、扩展方向

多模型支持：参考 UpXuu 的实现，支持多个模型切换和失败重试链
Cloudflare Worker：将 AI 代理层部署到边缘计算，降低延迟
文章索引：通过 GitHub API 获取文章列表，构建全局知识库
对话历史：将对话历史存储到 localStorage，支持跨页面继续对话
自定义 Prompt：允许用户在前端选择不同的 Prompt 模板

java学习笔记下

Sun, 10 May 2026 18:19:03 GMT

异常

初识

异常（Exception） 是指程序在运行过程中出现的错误情况，这些错误可能导致程序的正常流程中断。异常可以是由程序自身的逻辑错误引起，也可以是由外部因素（如文件未找到、网络中断等）导致。

层级结构

Error（错误）描述：错误通常指的是由Java虚拟机（JVM）自身引起的严重问题，这些问题往往超出了程序的控制。错误通常无法通过程序代码来恢复，因此是不建议进行捕获和处理的（虽然它们可以写在 catch 后的括号中）。示例：常见的错误有 OutOfMemoryError（内存不足）、StackOverflowError（栈溢出）和 NoClassDefFoundError（类定义未找到）。处理建议：对于错误，通常不需要程序员处理，发生后程序很可能会直接终止。正确的做法是优化代码以避免这些错误的发生。

Exception（异常）描述：异常是程序运行过程中可以被捕获并处理的问题。当程序遇到异常时，可以通过适当的处理机制（如 try-catch 块）来防止程序崩溃。分类：检查型异常（Checked Exceptions）：又名，编译时异常

描述：检查型异常是在编译时被检查的异常。程序员必须在代码中进行处理，否则编译器会报错。它们通常表示外部环境的问题，如文件未找到、网络连接失败等。示例：IOException（输入输出异常）、SQLException（SQL异常）、ClassNotFoundException（类未找到异常）。处理方式：使用 try-catch 块捕获异常，或在方法签名中使用 throws 声明该异常。非检查型异常（Unchecked Exceptions）：又名，运行时异常

描述：非检查型异常是在运行时发生的异常，它们通常是由程序的逻辑错误引起的，如数组越界、空指针引用等。编译器不会强制要求程序员处理这些异常。示例：NullPointerException（空指针异常）、ArrayIndexOutOfBoundsException（数组下标越界）、IllegalArgumentException（非法参数异常）。处理方式：虽然不强制要求捕获，但建议在适当的地方进行处理，以提高程序的健壮性。

运行时异常

1.NullPointerException 空指针异常

当应用程序试图使用 null 作为对象的引用时，会抛出 NullPointerException。这通常发生在尝试访问对象的方法或属性时。

1
public class Example {
2
  public static void main(String[] args) {
3
    String str = null;
4
    System.out.println(str.length()); // 尝试使用空引用
5
  }
6
}

ArithmeticException 数学运算异常

当发生算术运算的异常情况时，会抛出 ArithmeticException。最常见的情况是除以零。

1
public class Example {
2
  public static void main(String[] args) {
3
    int result = 10 / 0;
4
  }
5
}

ArrayIndexOutOfBoundsException 数组下标越界异常

当尝试访问数组中不存在的索引时，会抛出 ArrayIndexOutOfBoundsException。该异常表示访问的索引超出了合法范围（0到数组长度-1）。

1
public class Example {
2
  public static void main(String[] args) {
3
    int[] arr = new int[5];
4
    System.out.println(arr[-1]);
5
  }
6
}

ClassCastException 类型转换异常

当尝试将对象强制转换为不兼容的类型时，会抛出 ClassCastException。这通常发生在使用类型转换时。

1
public class Example {
2
  public static void main(String[] args) {
3
    Object obj = new String();
4
    Integer num = (Integer)obj;
5
  }
6
}

NumberFormatException 数字格式不正确异常

当尝试将字符串转换为数字格式时，如果字符串的格式不符合数字的要求，就会抛出 NumberFormatException。例如，尝试将一个非数字字符串转换为整数。

1
public class Example {
2
  public static void main(String[] args) {
3
    String str = "abc";
4
    int num = Integer.parseInt(str);
5
  }
6
}

编译时异常

1、SQLException SQLException 是在与数据库交互时可能发生的异常。它可以指示由于数据库访问错误或其他数据库问题（如查询语法错误、连接失败等）而导致的错误。

2、IOException IOException 是与输入/输出操作相关的异常，例如文件读取或网络通信时出错。它是处理文件和流操作时的常见异常。

3、FileNotFoundException FileNotFoundException 是 IOException 的一个子类，在尝试打开一个不存在的文件时抛出。它通常在文件操作时进行检查。

4、ClassNotFoundException ClassNotFoundException 是当应用程序尝试通过字符串名称加载类，但没有找到对应类时抛出的异常。这通常发生在使用反射或动态加载类时。

5、EOFException EOFException 是在读取文件时遇到文件末尾（End of File）而未能成功读取数据时抛出的异常。通常在使用数据 [MySQL 8.0 Command Line Client.lnk](C:\Users\LYF\Desktop\MySQL 8.0 Command Line Client.lnk) 输入流（DataInputStream）时会遇到此异常。

捕获异常

try-catch 语句

1
try {
2
    int result = 10 / 0; // 可能抛出 ArithmeticException
3
} catch (ArithmeticException e) {
4
    System.out.println("ArithmeticException: " + e.getMessage());
5
}

try-catch-finally语句

区别

finally块中的代码无论是否发生异常，都会执行，通常用于清理资源，如关闭文件或数据库连

对于 try-catch 语句和 try-catch-finally 语句是可以嵌套的

1
BufferedReader reader = null;
2
try {
3
    reader = new BufferedReader(new FileReader("file.txt"));
4
    String line = reader.readLine();
5
    System.out.println(line);
6
} catch (IOException e) {
7
    System.out.println("IOException: " + e.getMessage());
8
} finally {
9
    // 确保资源被释放
10
    if (reader != null) {
11
        try {
12
            reader.close();
13
        } catch (IOException e) {
14
            System.out.println("Error closing reader: " + e.getMessage());
15
        }
16
    }
17
}

展开收起

一个catch块捕获多个异常

可以在一个catch块中捕获多个异常，使用管道符号**|**分隔多个异常类型。这对于处理多个异常类型时执行相同的处理逻辑非常有用。

1
try {
2
    // 可能抛出异常的代码
3
} catch (IOException | NullPointerException e) {
4
    // 处理 IOException 或 NullPointerException
5
    System.out.println("Exception: " + e.getMessage());
6
}

try-with-resources

初识

try-with-resources 语句用于自动管理资源（如文件流、数据库连接等），确保在 try 块结束时自动关闭资源，避免资源泄漏。

1
import java.io.BufferedReader;
2
import java.io.FileReader;
3
import java.io.IOException;
4

5
public class TryWithResourcesExample {
6
    public static void main(String[] args) {
7
        try (BufferedReader reader = new BufferedReader(new FileReader("file.txt"))) {
8
            String line = reader.readLine();
9
            System.out.println(line);
10
        } catch (IOException e) {
11
            System.out.println("IOException: " + e.getMessage());
12
        }
13
        // 无需显式关闭 reader，Java 会自动处理
14
    }
15
}

展开收起

注意点

1.可能出现异常的语句要放到 try 块中

只有放到 try 语句块中的代码抛出的异常才能被 catch 语句块捕获到。

2.在 try 块中的某一句代码抛出异常后，该异常被 catch 捕获，则会直接跳入 catch 语句块中执行。try 块的剩余语句不会再执行了。

1
public class Example {
2
  public static void main(String[] args) {
3
    try {
4
      int res = 1 / 0;
5
      System.out.println("..."); // 这一句不会执行
6
    } catch(ArithmeticException e) {
7
      System.out.println(e.getMessage());
8
    }
9
  }
10
}

3.没有发生异常或者没有捕获到异常，catch 块都不会被执行。

1
public class Example {
2
  public static int method() {
3
    try {
4
      String name = null;
5
      name.length();
6
    } catch (NullPointerException e) {
7
      return 1;
8
    } finally {
9
      return 2;
10
    }
11
  }
12

13
  public static void main(String[] args) {
14
    System.out.println(method());
15
  }
16
}
17
//由于 finally 块无论是否发生异常都会被执行，所以在 catch 块中不会返回，到了 finally 块中才会返回，所以最终 method() 方法返回值为 2

展开收起

自定义异常

初识

自定义异常类通常需要继承 Exception 类（对于编译时异常）或 RuntimeException 类（对于运行时异常）。

可以根据需要为自定义异常类添加多个构造方法，以便于传递错误信息或其他相关信息

1
class AgeOutOfRangeException extends RuntimeException {
2
  public AgeOutOfRangeException(String message) {
3
    super(message);
4
  }
5

6
  public AgeOutOfRangeException(String message, Throwable cause) {
7
    super(message, cause);
8
  }
9
}

自定义异常的使用

1
public class Example {
2
  public static void main(String[] args) {
3
    try {
4
      testAge(-1);
5
    } catch(AgeOutOfRangeException e) {
6
      System.out.println(e.getMessage());
7
    }
8
  }
9

10
  public static void testAge(int age)  {
11
    if(age < 0) {
12
      throw new AgeOutOfRangeException("年龄要大于或等于0岁");
13
    }
14
  }
15
}
16

17
class AgeOutOfRangeException extends RuntimeException {
18
  public AgeOutOfRangeException(String message) {
19
    super(message);
20
  }
21

22
  public AgeOutOfRangeException(String message, Throwable cause) {
23
    super(message, cause);
24
  }
25
}

展开收起

抛出异常

初识throw

throw 是一个关键字，用于显式地抛出一个异常。它可以抛出任何类型的异常，包括自定义异常和Java内置异常。使用 throw 可以让开发者在特定条件下主动触发异常，从而能够进行异常的处理或传递。

抛出内置异常

1
public void checkNumber(int number) {
2
    if (number < 0) {
3
        throw new IllegalArgumentException("数字不能为负数");
4
    }
5
}

抛出自定义异常

1
class InvalidAgeException extends Exception {
2
    public InvalidAgeException(String message) {
3
        super(message);
4
    }
5
}
6

7
public class AgeValidator {
8
    public void validate(int age) throws InvalidAgeException {
9
        if (age < 18) {
10
            throw new InvalidAgeException("年龄必须大于或等于18岁");
11
        }
12
    }
13
}

throws抛出异常

初识throws异常

用于在方法声明中表明该方法可能会抛出哪些异常，由调用者处理。它告诉方法的调用者需要准备处理这些异常，或将它们传播给更高级别的异常处理代码。

一般用于某个方法中的语句可能抛出异常，但是并不能确定如何处理这个异常，则通过 throws 显式声明这个方法可能抛出的异常，表示这个方法将不对这个异常进行处理，调用者需要处理异常。

1
public void myMethod() throws ExceptionType {
2
    // 可能抛出 ExceptionType 的代码
3
    // 这里的 ExceptionType 可以是可能抛出异常的类型，也可以是其父类类型
4
}
5

6

7
public static void foo() throws IOException, SQLException {
8
    // 可能抛出 IOException, SQLException 异常的语句
9
  }

抛出编译时异常

throws 一般声明方法可能抛出编译时异常，这些异常必须在方法内部或调用者中进行处理。

1
import java.io.BufferedReader;
2
import java.io.FileReader;
3
import java.io.IOException;
4

5
public class ThrowsExample {
6

7
    public static void main(String[] args) {
8
        try {
9
            readFile("nonexistentfile.txt");
10
        } catch (IOException e) {
11
            System.out.println("文件未找到: " + e.getMessage());
12
        }
13
    }
14

15
    public static void readFile(String fileName) throws IOException {
16
        BufferedReader reader = new BufferedReader(new FileReader(fileName));
17
        String line = reader.readLine();
18
        System.out.println(line);
19
        reader.close();
20
    }
21
}

展开收起

异常处理

编译时异常必须处理

对于编译时异常，必须在程序中处理，有两种方案，一种是捕获异常（使用 try-catch 语句），另一种是接着将异常抛到上级调用者（使用 throws 关键字）

运行时异常

概述

对于运行时异常，如果程序中没有使用 try-catch 处理，默认就是使用 throws 的方案处理。所以说运行时异常出现可以不进行处理，实际上个是因为它有默认处理方式，而且一般使用默认处理方式。

这里在 foo() 方法中会出现 ArithmeticException 异常，这是一个运行时异常，显然我们在 foo() 方法中没有对这个异常进行处理（使用 try-catch 语句），所以它默认是使用 throws 方案处理的，这个异常被抛到 main 方法中，然后又被 main 方法抛到 JVM 中，最终由 JVM 将异常信息打印出来，然后结束程序。

1
public class Example {
2
  public static void main(String[] args) {
3
    foo();
4
  }
5

6
  public static void foo() {
7
    int res = 1 / 0;
8
  }
9
}

子类重写父类方法抛出异常的限制

子类重写父类的方法时，如果父类的这个方法会抛出异常，则子类重写的方法可以不抛出异常（也就是使用 try-catch 处理这个异常），或者抛出父类异常的一样类型的异常，或者抛出父类异常的子类异常。

1
class SuperClass {
2
  public void foo() throws Exception {
3
    int res = 1 / 0;
4
  }
5
}
6

7
class SubClass1 extends SuperClass {
8
  @Override
9
  public void foo() { // 不抛出异常
10
    try{
11
      int res = 1 / 0;
12
    } catch(ArithmeticException e) {
13
      System.out.println(e.getMessage());
14
    }
15
  }
16
}
17

18
class SubClass2 extends SuperClass {
19
  @Override
20
  public void foo() throws Exception { // 抛出父类异常同类型异常
21
    int res = 1 / 0;
22
  }
23
}
24

25
class SubClass3 extends SuperClass {
26
  @Override
27
  public void foo() throws ArithmeticException { // 抛出父类方法抛出异常的子类异常
28
    int res = 1 / 0;
29
  }
30
}

展开收起

API

String类

初识

初识string类

1.String 类是一个 final 类，不能被继承。

2.String 类直接继承 Object 类，同时，String 类实现了 Serializable、Comparable、CharSequence 接口。

接口的用途

实现 Serializable 接口用途：

Serializable 接口是一个标记接口，表示实现该接口的类可以被序列化。序列化是将对象的状态转换为字节流的过程，以便于存储或传输。

对于 String 类来说，实现 Serializable 接口使得字符串对象可以被安全地保存到文件中，或通过网络传输。将字符串对象序列化后存储到文件中或者通过网络发送时，可以方便地恢复原始的字符串对象。

实现 Comparable 接口用途：

Comparable 接口定义了一个比较两个对象的顺序的标准。

实现这个接口允许字符串对象按照字典顺序进行比较，这在排序和搜索时非常有用。

使用 Collections.sort() 方法对字符串列表进行排序时，String 类中的 compareTo(String anotherString) 方法将被调用，以确定字符串的自然顺序。

实现 CharSequence 接口用途：

CharSequence 接口允许 String 类提供对字符序列的访问。

这个接口定义了一组可以用于处理字符序列的方法，如 length()、charAt(int index)、subSequence(int start, int end) 等。

实现这个接口使得String类能够与其他处理字符序列的类（如 StringBuilder、StringBuffer 等）兼容。可以将 String 对象直接传递给需要 CharSequence 类型参数的方法，比如 StringBuilder 的构造函数。

构造器

string()

创建一个空字符串对象。

1
String str = new String();

String(String original)

通过复制指定字符串的内容来创建一个新的字符串对象

1
String str = new String("Hello");

String(char[] value)

通过字符数组创建字符串对象

1
char[] chars = {'H', 'e', 'l', 'l', 'o'};
2
String str = new String(chars);

String(byte[] bytes, int offset, int length)

1
byte[] bytes = {72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100};
2
String str = new String(bytes, 0, 5); // "Hello"

字符串储存

String 对象的内容是存储在一个名为 value 的字符数组中，而且这个数组是使用 final 修饰的，意味着一旦被初始化，它的引用不能被改变（只是引用不能修改，value 的每一个元素是可以修改的）。这个设计决定了 String 对象的不可变性，以及其在内存中的表现。

1
    private final char value[];

当创建一个 String 对象时，JVM 会为其分配内存，并在 value 数组中存储字符。value 数组会根据字符串的字符数动态大小化。字符串的每个字符会被存储为 char 类型，Java 使用 UTF-16 编码来表示字符，因此每个字符占用两个字节。

不可变性

不可变性认识

由上面的 String 对象的内容是被存储在一个 final 字符数组 value 中的，我们可知，String 对象是不可变的（immutable）。

这意味着一旦创建了一个 String 对象，它的值就不能被改变。如果你对字符串进行任何修改操作，比如拼接、替换等，实际上会生成一个新的 String 对象。

上面说到 value 被 final 修饰只是 value 的引用不能修改，而 value 的每一个元素值可以修改。如果你想要对 String 对象的某个字母进行修改，可以使用 replace 方法，但是这个方法实际上还是会返回一个新的对象：

其实不直接修改源字符串的 value 的某个元素还有一个原因，因为 value 可能指向字符串常量池的某个字符串常量，字符串常量是没法被修改的。

1
String original = "Hello";
2
String modified = original.replace('H', 'J');
3
// original 仍为 "Hello"
4
// modified 为 "Jello"

字符串常量

常量及池

1.字符串常量是指在程序中直接使用的固定字符串值。

1
String str = "Hello, World!";

2、字符串常量池

字符串常量池（String Constant Pool）是用于存放字符串常量的特殊内存区域。这个池的主要作用是避免重复创建相同内容的字符串对象，从而节省内存。

1
public class Example {
2
  public static void main(String[] args) {
3
    String str1 = "Hello";
4
    String str2 = "Hello";
5

6
    System.out.println(str1 == str2);
7
  }
8
}//ture str1 和 str2 指向的是同一个对象。

字符串创建方式

只要使用了字符串常量，JVM 会先查找常量池中是否有相同的字符串常量，如果有，则什么也不做，如果没有的话，这个字符串常量会放到常量池。

直接使用字符串常量赋值

认识

如果常量池没有相同的字符串常量的话，这个字符串常量会被放到常量池中，然后 String 引用变量会指向这个字符串常量。如果常量池中有相同的字符串常量，则 String 引用变量直接指向这个相同的字符串常量。

使用字符串常量加构造器创建

1
  String str = new String("Hello");

认识

JVM 会先在常量池中找是否有 “Hello” 这个字符串常量

如果有的话，在堆区创建一个 String 对象，然后这个对象的 value 字段指向常量池的 “Hello” 字符串常量。如果常量池没有 “Hello” 这个字符串常量的话，则会在常量池中创建一个 “Hello” 字符串常量，然后在堆区创建一个 String 对象，然后这个对象的 value 字段指向常量池的 “Hello” 字符串常量。这里为什么要有找这个字符串常量的动作呢，因为这里使用构造器创建时使用了字符串常量，我们上面提到过使用字符串常量就会导致这一系列动作。

1
  String str1 = "Hello";
2
  String str2 = new String("Hello");

不使用或间接使用字符串常量创建

1
  char[] chars = {'H', 'e', 'l', 'l', 'o'};
2
  String str = new String(chars);

这种方式会直接在堆区中创建 String 对象，然后 String 对象的 value 数组是从以上代码中的 chars 数组中复制得到的。

1
  String str1 = new String("Hello");
2
  String str2 = new String("World");
3
  String str = str1 + str2;//方式二  堆对象
4
// StringBuilder s = new StringBuilder;
5
    // s.append(str1);
6
    // s.append(str2);
7
    // str = s.toString();
8
最后 toString 方法会创建一个新的 String 对象，而且常量池中没有与这个 String 对象内容一样的 字符串常量。

intren方法

原理

当调用 intern() 方法时，JVM 会查看字符串常量池中是否有与当前字符串内容一样的字符串常量：

如果存在，则直接返回这个字符串常量的引用。如果不存在，则将当前的 String 对象的引用放到常量池中，然后返回这个引用（这里只是将当前的 String 对象的引用放到了常量池中，没有创建新的对象）。

JDK7 时将字符串常量从方法区移动到了堆区中。

1
public class Example {
2
  public static void main(String[] args) {
3
    String str = new String("Hello");
4
    // 这里使用了字符串常量"Hello"，所以它会被放到常量池
5

6
    System.out.println(str == str.intern()); // false
7
    // 由于字符串常量池中有"Hello"常量，所以这里str.intern()返回的
8
    // 是常量池中的"Hello"常量的引用，而str指向的是堆区的字符串对象，
9
    // 所以这里的结果是false
10
  }
11
}

1
public class Example {
2
  public static void main(String[] args) {
3
    String str1 = new String("Hello");
4
    String str2 = new String("World");
5

6
    String str = str1 + str2;
7
        // 这里是上面字符串创建方式提到的第三种创建方式
8
        // 间接使用构造器创建，所以这里的str指向的是一个堆区的
9
        // 字符串对象，而且常量池中没有与str内容一样的字符串常量
10

11
    System.out.println(str == str.intern()); // true
12
    // 这里由于str指向的是一个新的在堆区的String对象，内容为"HelloWorld"
13
    // 而在常量池中没有与"HelloWorld"内容一样的字符串常量，所以，str的引用会被放入到常量池中，然后被返回，所以这里str.intern()返回的还是str，所以
14
    // 这里会输出true
15
  }
16
}

展开收起

1
public class Example {
2
  public static void main(String[] args) {
3
    String a = "123";
4
    // a指向常量池的"123"
5
    String b = new String("123");
6
    // b指向堆区的String对象，
7
    // String对象的value指向常量池的"123"
8

9
    System.out.println(a.equals(b)); // true
10
    System.out.println(a == b); // false
11
    System.out.println(a == b.intern()); // true
12
        // 由于常量池中已经有了"123"常量，所以返回的是这个常量的引用，
13
        // 而a的引用就是这个常量的引用，所以这里结果为true
14
    System.out.println(b == b.intern()); // false
15
        // 这里b.intern()返回的是常量池中的"123"常量，对于b指向的则是堆区中的
16
        // 对象，所以这里是结果false
17
  }
18
}

展开收起

String常用方法

equals(Object obj): 比较两个字符串的内容是否相同，返回布尔值。

equalsIgnoreCase(String anotherString): 比较两个字符串的内容是否相同，忽略大小写，返回布尔值。

length(): 返回字符串的长度，即字符的数量。

indexOf(String str): 返回指定子字符串在字符串中首次出现的位置，如果未找到则返回-1。

lastIndexOf(String str): 返回指定子字符串在字符串中最后一次出现的位置，如果未找到则返回-1。

substring(int beginIndex): 从指定的开始索引返回一个子字符串。

substring(int beginIndex, int endIndex): 返回从指定的开始索引到结束索引之间的子字符串（不包括结束索引）。

trim(): 返回去除字符串前后空格的新字符串。

charAt(int index): 返回指定索引处的字符。

toUpperCase(): 返回一个新的字符串，将原字符串中的所有字符转换为大写。

toLowerCase(): 返回一个新的字符串，将原字符串中的所有字符转换为小写。

concat(String str): 将指定字符串连接到原字符串的末尾，返回新的字符串。

compareTo(String anotherString): 按字典顺序比较两个字符串，返回一个整数，表示它们的相对顺序。

toCharArray(): 将字符串转换为一个字符数组。

format(String format, Object… args): 使用指定的格式字符串和参数生成格式化的字符串

八大包装类

简要介绍

初识

包装类是用于将基本数据类型（如 int、char、boolean 等）包装成对象的类。每种基本数据类型都有对应的包装类，这些包装类提供了一种面向对象的方式来处理基本数据类型，允许它们被用于需要对象的场景，如集合框架、泛型等

包装类的特点及用途

认识

包装类特点封装性：所有的包装类都是 final 类，这意味着它们不能被继承。这种设计确保了包装类的行为和特性的一致性，从而避免了子类可能引入的不确定性。

不可变性：包装类的实例一旦被创建后，其中保存的基本数据类型数据就不能再被改变。这种不可变性使得包装类在多线程环境中更加安全，避免了因数据被意外修改而导致的错误。

提供方法：包装类封装了许多实用的方法，提供了丰富的功能。例如，它们支持数据类型转换、判断字符串的大小写、以及获取最大值和最小值等。

继承关系：除了 Character 和 Boolean 之外，其他所有的包装类都继承自 Number 类。这种继承关系使得这些包装类能够共享一些通用的功能和特性，例如数字的比较和转换，这为在不同数值类型之间的操作提供了一致的接口。

包装类的用途

对象操作：在Java中，许多集合类和框架方法需要对象作为参数，而不是基本数据类型。为了满足这一需求，包装类提供了将基本数据类型转换为对象的机制。通过使用包装类，我们可以轻松地在这些方法中传递基本数据类型。

Null值处理：基本数据类型无法为null，而包装类则可以。这一特性在某些情况下非常有用，例如在方法参数中，需要表示可选值或缺省值时。通过使用包装类，我们能够更灵活地处理这些场景，确保代码的健壮性和可读性。这种设计使得我们在处理数据时，可以更方便地进行null值检查，并在需要时安全地进行区分，从而提高了代码的灵活性。

手动装箱和拆箱

装箱（Boxing）是将基本数据类型转换为相应的包装类的过程。拆箱（Unboxing）是将包装类转换为基本数据类型的过程。

手动装箱就是使用一个值创建一个 Integer 对象

1
int num = 50000;
2

3
Integer boxedInt1 = new Integer(num); // 手动装箱方式一
4

5
Integer boxedInt2 = Integer.valueOf(num); // 手动装箱方式二

手动拆箱就是使用 Integer 类型对象的 intValue() 方法来获取这个对象的 int 值

1
Integer boxedInt = new Integer(5);
2
int num = boxedInt.intValue(); // 手动拆箱

自动装拆箱

1
int num = 50000;
2
Integer boxedInt = num; // 自动装箱
3
Integer boxedInt = new Integer(50000);
4
int num = boxedInt; // 自动拆箱

底层

自动装箱的底层实现自动装箱是通过调用包装类的valueOf()方法来实现的。

我们可以通过调试来验证这一结论，在要发生自动装箱的地方打上断点，然后直接跳到这个断点处，然后强制进入（force step into），就会进入到 valueOf() 方法中。

2）自动拆箱的底层实现自动拆箱是通过调用包装类对象的xxxValue()方法来实现的。

我们可以通过调试来验证这一结论，在要发生自动拆箱的地方打上断点，然后直接跳到这个断点处，然后强制进入（force step into），就会进入到 xxxValue() 方法中。

包装类的缓存机制

初步认识

Java中的包装类缓存机制是为了优化性能和节省内存而设计的。

它为整型（Byte、Short、Integer、Long）、字符型（Character）和布尔型（Boolean）的包装类提供了缓存，确保在这些类型的小范围值之间可以复用对象。而对于浮点数类型的包装类（Float、Double），则没有这种缓存机制，意味着每次都需要创建新的对象。

这样一来，Java在处理常用值时更加高效，但在浮点数处理上则相对简单直接。

缓存范围

对于 Integer 类，Java会缓存范围在 -128 到 127 之间的所有整数。

对于 Byte、Short 和 Character 类，缓存的范围也是类似的。具体范围如下：

Byte：-128 到 127 Short：-128 到 127 Character：0 到 127（即所有的ASCII字符） Boolean：只有 true 和 false 两个值会被缓存

触发缓存机制

只有调用 valueOf() 方法时，如果要创建的值已经被缓存，则会触发缓存机制。

我们可以查看 Integer 类的 valueOf() 方法的源代码

1
    public static Integer valueOf(int i) {
2
        if (i >= IntegerCache.low && i <= IntegerCache.high)
3
            return IntegerCache.cache[i + (-IntegerCache.low)];
4
        return new Integer(i);
5
    }
6
//如果要创建的 Integer 对象的值在预定范围内，则返回缓存的对象，如果不在范围内，则直接新创建一个对象。

测试缓存机制

我们可以通过使用 valueOf() 方法创建两个值一样且值在范围内的对象，然后比较它们的引用是否相等，如果相等，则能证明缓存机制的存在。

1
public class Example {
2
  public static void main(String[] args) {
3
    Integer i1 = Integer.valueOf(1);
4
    Integer i2 = Integer.valueOf(1);
5

6
    System.out.println(i1 == i2);
7
  }
8
}

包装类方法

基本转换方法

1.parseInt(String s), parseDouble(String s), parseBoolean(String s) 等：将字符串转换为相应的基本类型。

2.valueOf(String s): 返回对应类型的包装类实例，例如 Integer.valueOf(“123”) 返回一个 Integer 对象。

其他方法

初识

1**.获取基本类型值**

intValue(), doubleValue(), charValue(), booleanValue() 等: 返回包装类中封装的基本类型值。

2.比较方法

compareTo(T another): 用于比较两个包装类对象的大小。

equals(Object obj): 判断两个对象是否相等。

Integer.compare(x, y) 方法比较两个 Integer 对象的值。

3.类型检测

isNaN(), isInfinite(): 用于 Double 和 Float 以检测是否为非数字或无穷大。

**isLetter(char ch)：**检查指定的字符是否为字母（包括大写和小写字母）。

**isDigit(char ch)**检查指定的字符是否为数字。

**isWhitespace(char ch)：**检查指定的字符是否为白空格字符（如空格、制表符等）

包装类与字符串相互转换

1
    Integer i = 10000;
2

3
    // 方式一
4
    String str1 = i + "";
5

6
    // 方式二
7
    String str2 = i.toString();
8

9
    // 方式三
10
    String str3 = String.valueOf(i);
11
//对于方法三，实际上内部也是调用 toString() 方法的。

1
    String str = "10000";
2

3
    // 方式一
4
    Integer i1 = Integer.parseInt(str);
5

6
    // 方式二
7
    Integer i2 = Integer.valueOf(str);
8

9
    // 方式三
10
    Integer i3 = new Integer(str);
11
//这里看似通过字符串创建 Integer 类对象有三种方法，实际上就一种方法，对于方法二和方法三内部实际上都是调用 parseInt() 方法来将字符串转换为整型的。

Math类

常用方法

初识Math类

Math 类是一个工具类，提供了一系列用于数学运算的方法。该类中的方法都是静态的，因此可以直接通过类名调用，而不需要创建 Math 类的实例。Math 类主要用于基本的数学计算，如三角函数、对数、平方根等。

Math 类位于 java.lang 包中，因此无需导入即可使用，它是一个 final 类，这意味着它不能被继承。

random方法使用公式

1
//生成特定范围的随机浮点数
2
double min = 5.0; // 最小值
3
double max = 10.0; // 最大值
4
double randomValue = min + (Math.random() * (max - min));
5
//生成特定范围的随机整数
6
int min = 5; // 最小值
7
int max = 10; // 最大值
8
int randomInt = min + (int)(Math.random() * (max - min + 1));
9
//生成随机布尔值
10
boolean randomBoolean = Math.random() < 0.5;
11
//生成随机字符（例如：小写字母
12
char randomChar = (char)('a' + Math.random() * 26);
13
//生成指定长度的随机字符串
14
StringBuilder randomString = new StringBuilder();
15
int length = 10; // 指定字符串长度
16
for (int i = 0; i < length; i++) {
17
    char randomChar = (char)('a' + Math.random() * 26); // 生成小写字母
18
    randomString.append(randomChar);
19
}

展开收起

System类

常用方法

1、arraycopy

用于快速复制数组。这比使用循环进行复制更高效

1
import java.util.Arrays;
2

3
public class Example {
4
  public static void main(String[] args) {
5
    String[] arr1 = {"Hello", "World", "HelloWorld"};
6

7
    String[] arr2 = new String[3];
8

9
    System.arraycopy(arr1, 0, arr2, 0, arr1.length);
10

11
    System.out.println(Arrays.toString(arr2));
12
  }
13
}

1
public class Example {
2
  public static void main(String[] args) {
3
    System.out.println("Hello");
4

5
    System.exit(1);
6

7
    System.out.println("World"); // 这一句将不会被输出
8
  }
9
}

1
public class Example {
2
  public static void main(String[] args) {
3
    String s = new String();
4

5
    long startTime = System.currentTimeMillis();
6

7
    for(int i = 0; i < 10000; i++) {
8
      s += "Hello";
9
    }
10

11
    long endTime = System.currentTimeMillis();
12
    System.out.println("Execution time: " + (endTime - startTime) + " ms");
13
  }
14
}

StringBuilder和StingBuffer类

StringBuffer

Arrays类

简要介绍

Arrays 类是 Java 语言中用于操作数组的一个工具类，提供了多种静态方法来处理数组，包括排序、搜索、填充、比较等操作。这个类位于 java.util 包中。

Arrays类的构造方法被设置为私有（private），因此无法创建 Arrays 对象。Arrays 类的所有公有方法都是静态的，可以直接通过类名调用

Arrays.toString()方法

使用实例

1
import java.util.Arrays;
2

3
public class Example {
4
  public static void main(String[] args) {
5
    int[] arr = {1, 2, 3, 4, 5, 6};
6
    System.out.println(Arrays.toString(arr));
7
  }
8
}

源码分析

1
    public static String toString(int[] a) {
2
        if (a == null) // 判断 a 是否为空引用，如果为空引用，则返回 "null" 字符串
3
            return "null";
4
        int iMax = a.length - 1;
5
        if (iMax == -1) // 判断数组内容是否为空，如果内容为空，则返回 "[]" 字符串
6
            return "[]";
7

8
        StringBuilder b = new StringBuilder();
9
        b.append('[');
10
        for (int i = 0; ; i++) {
11
            b.append(a[i]); // 依次将数组的元素追加到字符串中
12
            if (i == iMax) // 判断是否为最后一个元素，如果是最后一个元素，则返回最终的字符串
13
                return b.append(']').toString();
14
            b.append(", ");
15
        }
16
    }

展开收起

Arrays.copyof()方法

1
import java.util.Arrays;
2

3
public class Example {
4
  public static void main(String[] args) {
5
    // 原始数组
6
    int[] originalArray = {1, 2, 3, 4, 5};
7

8
    // 复制数组，指定新数组的长度
9
    // 新数组长度小于原数组长度
10
    int[] newArray1 = Arrays.copyOf(originalArray, 3);
11
    System.out.println("新数组1: " + Arrays.toString(newArray1)); // 输出: [1, 2, 3]
12

13
    // 新数组长度大于原数组长度
14
    int[] newArray2 = Arrays.copyOf(originalArray, 8);
15
    System.out.println("新数组2: " + Arrays.toString(newArray2)); // 输出: [1, 2, 3, 4, 5, 0, 0, 0]
16

17
    // 新数组长度等于原数组长度
18
    int[] newArray3 = Arrays.copyOf(originalArray, originalArray.length);
19
    System.out.println("新数组3: " + Arrays.toString(newArray3)); // 输出: [1, 2, 3, 4, 5]
20
  }
21
}
22
//第一个参数是源数组，第二个参数是从源数组中复制多少个元素到新数组中，如果第二个参数大于了源数组的大小，则新数组中大于源数组大小的部分的元素都是类型默认值。

展开收起

Arrays.sort()方法

1
import java.util.Arrays;
2

3
public class Example {
4
  public static void main(String[] args) {
5
    int[] arr = {11, 33, 99, 22, 88, 44, 55, 66, 77};
6
    Arrays.sort(arr);
7
    System.out.println(Arrays.toString(arr));
8
  }
9
}

使用comparator接口

1
import java.util.Arrays;
2
import java.util.Comparator;
3

4
public class Example {
5
  public static void main(String[] args) {
6
    Integer[] arr = {11, 33, 99, 22, 88, 44, 55, 66, 77};
7
        // 这里要使用 Integer 包装类
8

9
    Arrays.sort(arr, new Comparator<Integer>() {
10
      @Override
11
      public int compare(Integer o1, Integer o2) {
12
        return o2 - o1;
13
      }
14
    });
15
    System.out.println(Arrays.toString(arr));
16
  }
17
}

展开收起

这里的数组不能使用基本数据类型，因为这里的 sort() 方法的声明是这样的

1
public static <T> void sort(T[] a, Comparator<? super T> c);

这里的 sort 是一个泛型方法，泛型参数只能接受类类型，所以这里需要使用包装类型数组作为第一个参数，对于第二个参数，我们传入的是

1
    new Comparator<Integer>() {
2
    @Override
3
    public int compare(Integer o1, Integer o2) {
4
      return o2 - o1;
5
    }
6
  }

代码解释

这显然是一个匿名内部类，它实现了 Comparator 接口，同时重写了这个接口的 compare() 方法，这个方法是关键，这里返回值是 o2 - o1，这就代表了，如果 o1 如果大于 o2 的话，则返回负值，对于 sort() 方法内部某个地方就是调用的 compare() 方法来比较两个参数的大小。

如果是升序的话，o1 大于 o2 应当返回的是正值，这里返回了负值，所以就是将顺序设置为反的，所以最终可以得到降序的数组。

使用的相关算法

简要分析

基本类型数组（如 int[], char[] 等）：

对于基本数据类型数组，Arrays.sort() 方法使用了一种名为 Dual-Pivot Quicksort 的排序算法。这是一种改进的快速排序算法，由 Vladimir Yaroslavskiy 提出。它在平均情况下具有 O(n log n) 的时间复杂度，并且在实践中通常表现良好。

对象类型数组（如 Integer[], String[] 等）：

对于对象数组，Arrays.sort() 方法则使用 Timsort 算法。这是一种混合排序算法，结合了归并排序和插入排序的优点。Timsort 是为了优化对部分有序数据的排序而设计的，具有 O(n log n) 的时间复杂度，并且在实际应用中表现出色。

Arrays.binarySearch()方法

1
import java.util.Arrays;
2

3
public class Example {
4
  public static void main(String[] args) {
5
    int[] arr = {11, 22, 33, 44, 55, 66, 77, 88, 99};
6

7
    // Arrays.sort(arr)
8
    // 在调用 binarySearch 前需要对数组先进行排序
9
    // 这里为了方便比对结果，数组已经是有序的
10
    int index = Arrays.binarySearch(arr, 99);
11

12
    System.out.println("index of 99: " + index);
13
  }
14
}

Arrays.fill()方法

用指定的值填充数组，如果想要将一个数组的所有元素都是设置为某个值的话，可以使用这个方法。

1
import java.util.Arrays;
2

3
public class Example {
4
  public static void main(String[] args) {
5
    int[] arr = new int[10];
6
    Arrays.fill(arr, 2333);
7

8
    System.out.println(Arrays.toString(arr));
9
  }
10
}

Arrays.equals方法

Arrays.equals() 方法用于比较两个一维数组是否相等。

1
import java.util.Arrays;
2

3
public class Example {
4
  public static void main(String[] args) {
5
    int[] array1 = {1, 2, 3};
6
    int[] array2 = {1, 2, 3};
7
    int[] array3 = {1, 2, 4};
8

9
    // 比较相同的数组
10
    boolean isEqual1 = Arrays.equals(array1, array2);
11
    System.out.println("array1 和 array2 相等? " + isEqual1); // 输出: true
12

13
    // 比较不同的数组
14
    boolean isEqual2 = Arrays.equals(array1, array3);
15
    System.out.println("array1 和 array3 相等? " + isEqual2); // 输出: false
16
  }
17
}

展开收起

Arrays.deepequals()方法

Arrays.deepEquals() 方法用于比较两个多维数组是否相等。它会递归地比较数组的每个元素。如果使用 Arrays.equals() 方法的话，则只会比较每一个低一维数组的引用是否相等。

1
import java.util.Arrays;
2

3
public class Example {
4
  public static void main(String[] args) {
5
    int[][] array1 = {{1, 2, 3}, {4, 5, 6}};
6
    int[][] array2 = {{1, 2, 3}, {4, 5, 6}};
7
    int[][] array3 = {{1, 2, 3}, {4, 5, 7}};
8

9
    // 比较相同的二维数组
10
    boolean isEqual1 = Arrays.deepEquals(array1, array2);
11
    System.out.println("array1 和 array2 相等? " + isEqual1); // 输出: true
12

13
    // 比较不同的二维数组
14
    boolean isEqual2 = Arrays.deepEquals(array1, array3);
15
    System.out.println("array1 和 array3 相等? " + isEqual2); // 输出: false
16
  }
17
}

展开收起

Arrays.asLIst()方法

Arrays.asList() 方法是 Java 中的一个静态方法，属于 java.util.Arrays 类。它可以将指定的数组转换为一个固定大小的列表（List）。这个方法返回一个 List 的视图，修改该列表会影响原始数组，反之亦然。

1
import java.util.Arrays;
2
import java.util.List;
3

4
public class Example {
5
  public static void main(String[] args) {
6
    Integer[] numbersArray = {1, 2, 3, 4, 5};
7

8
    // 转换为列表
9
    List<Integer> numbersList = Arrays.asList(numbersArray);
10

11
    // 修改列表中的元素
12
    numbersList.set(0, 10);
13

14
    // 打印修改后的列表和数组
15
    System.out.println("修改后的列表: " + numbersList); // 输出: 修改后的列表: [10, 2, 3, 4, 5]
16
    System.out.println("修改后的数组: " + Arrays.toString(numbersArray)); // 输出: 修改后的数组: [10, 2, 3, 4, 5]
17
  }
18
}

展开收起

不能添加元素

1
import java.util.Arrays;
2
import java.util.List;
3

4
public class Example {
5
  public static void main(String[] args) {
6
    String[] colorsArray = {"Red", "Green", "Blue"};
7

8
    // 转换为列表
9
    List<String> colorsList = Arrays.asList(colorsArray);
10

11
    // 尝试添加新元素（会抛出 UnsupportedOperationException）
12
    try {
13
      colorsList.add("Yellow");
14
    } catch (UnsupportedOperationException e) {
15
      System.out.println("无法添加元素到列表: " + e.getMessage());
16
    }
17
  }
18
}
19
//固定大小：返回的 List 的大小是固定的，因为原数组的大小是固定的。换句话说，您不能向该列表中添加或删除元素，因为这会导致列表的大小发生变化。当尝试调用 add() 或 remove() 方法来修改列表的大小时，会抛出 UnsupportedOperationException

展开收起

集合框架

简要引入

集合框架（Java Collections Framework）是一个用于存储和操作数据的架构，它提供了一组接口和类，用于处理不同类型的数据集合。集合框架的设计旨在提高代码的可重用性和灵活性。集合框架主要是从两个根接口：Collection 和 Map发散出来的。

我们知道数组创建之后大小就是固定的了，如果想要扩容还需要新建数组，然后将之前的数据复制到新数组中。使用集合框架，则可以解决这一问题。

collection单列集合

单列结构：Collection 接口及其子接口（如 List、Set 和 Queue）主要用于存储单一类型的元素。每个集合只包含元素，不涉及键值对的概念。

1.List代表了有序元素插入顺序 = 遍历顺序可重复集合，可直接根据元素的索引来访问

2.Set代表无序不可重复集合，只能根据元素本身来访问

3.Queue是队列集合,用于按特定顺序处理元素

map双列集合

双列结构：Map 接口用于存储键值对（key-value pairs），其中每个键（key）都与一个值（value）相关联。每个键是唯一的，而值可以重复。常见实现包括：

HashMap：基于哈希表实现，允许快速查找，不保持元素的插入顺序。 TreeMap：基于红黑树实现，保持键的自然顺序或指定的顺序。 LinkedHashMap：保持元素的插入顺序

Collection接口

List接口

ArrayList实现类

初识ArrayList

List 接口的核心特点是有序（元素插入顺序 = 遍历顺序）、可重复，支持通过索引操作元素，适合需要按位置访问、频繁查询的场景。

（1）ArrayList：数组实现的 “动态数组”（最常用）底层原理：基于数组实现，默认初始容量为 10，当元素个数超过容量时，会扩容为原来的 1.5 倍（oldCapacity + (oldCapacity >> 1)），扩容时会复制原数组元素到新数组；核心特点：查询快（数组支持索引随机访问，时间复杂度 O (1)）、增删慢（需移动数组元素，时间复杂度 O (n)）；适用场景：频繁查询、少量增删的场景（如商品列表展示、数据查询结果存储）

1
import java.util.ArrayList;
2
import java.util.List;
3

4
public class ArrayListDemo {
5
    public static void main(String[] args) {
6
        // 1. 创建ArrayList（存储字符串）
7
        List<String> list = new ArrayList<>();
8

9
        // 2. 添加元素（有序、可重复）
10
        list.add("Java");
11
        list.add("Python");
12
        list.add("Java"); // 允许重复元素
13
        System.out.println("添加后：" + list); // 输出：[Java, Python, Java]
14

15
        // 3. 按索引访问元素
16
        String element = list.get(1);
17
        System.out.println("索引1的元素：" + element); // 输出：Python
18

19
        // 4. 按索引修改元素
20
        list.set(2, "C++");
21
        System.out.println("修改后：" + list); // 输出：[Java, Python, C++]
22

23
        // 5. 按索引删除元素
24
        list.remove(1);
25
        System.out.println("删除后：" + list); // 输出：[Java, C++]
26

27
        // 6. 遍历元素（三种方式）
28
        // 方式1：普通for循环（适合需要索引的场景）
29
        for (int i = 0; i < list.size(); i++) {
30
            System.out.print(list.get(i) + " ");
31
        }
32
        System.out.println();
33

34
        // 方式2：增强for循环（简洁）
35
        for (String s : list) {
36
            System.out.print(s + " ");
37
        }
38
        System.out.println();
39

40
        // 方式3：迭代器（支持遍历中删除元素）
41
        java.util.Iterator<String> iterator = list.iterator();
42
        while (iterator.hasNext()) {
43
            String s = iterator.next();
44
            if (s.equals("Java")) {
45
                iterator.remove(); // 安全删除，不会触发ConcurrentModificationException
46
            }
47
        }
48
        System.out.println("迭代器删除后：" + list); // 输出：[C++]
49
    }
50
}

展开收起

LinkedList实现类

初识LinkedList实现类

LinkedList：双向链表实现的 “链表集合” 底层原理：基于双向链表实现，每个元素（节点）包含前驱节点、后继节点的引用，无需连续内存空间；核心特点：查询慢（需遍历链表，时间复杂度 O (n)）、增删快（只需修改节点引用，时间复杂度 O (1)）；适用场景：频繁增删、少量查询的场景（如队列、栈、消息队列）

1
import java.util.LinkedList;
2
import java.util.List;
3

4
public class LinkedListDemo {
5
    public static void main(String[] args) {
6
        List<Integer> list = new LinkedList<>();
7

8
        // 添加元素
9
        list.add(10);
10
        list.add(20);
11
        list.add(30);
12
        System.out.println("添加后：" + list); // 输出：[10, 20, 30]
13

14
        // 在指定位置插入元素（增删效率高）
15
        list.add(1, 15);
16
        System.out.println("插入后：" + list); // 输出：[10, 15, 20, 30]
17

18
        // 删除指定元素
19
        list.remove(Integer.valueOf(20));
20
        System.out.println("删除后：" + list); // 输出：[10, 15, 30]
21

22
        // 链表特有的操作（作为队列/栈）
23
        LinkedList<Integer> linkedList = (LinkedList<Integer>) list;
24
        linkedList.addFirst(5); // 头部添加
25
        linkedList.addLast(35); // 尾部添加
26
        System.out.println("头部+尾部添加后：" + linkedList); // 输出：[5, 10, 15, 30, 35]
27

28
        int first = linkedList.getFirst(); // 获取头部元素
29
        int last = linkedList.getLast(); // 获取尾部元素
30
        System.out.println("头部：" + first + "，尾部：" + last); // 输出：头部：5，尾部：35
31
    }
32
}

展开收起

set接口

HashSet实现类

初识HashSet

Set 接口：无序、不可重复的 “集合”

Set 接口的核心特点是 无序（元素插入顺序≠遍历顺序）、不可重复（基于equals()和hashCode()判断），适合需要去重的场景。

HashSet：哈希表实现的去重集合（最常用）底层原理：基于 HashMap 实现（HashSet 的元素作为 HashMap 的 key，value 为固定常量），利用哈希表保证元素唯一；核心特点：无序、不可重复、查询和增删效率高（时间复杂度 O (1)）；去重规则：先通过hashCode()计算哈希值，若哈希值不同则元素不同；

不同的元素hash值可能相同

若哈希值相同，再通过equals()判断是否相同，两者都相同则视为重复元素

1
import java.util.HashSet;
2
import java.util.Set;
3

4
public class HashSetDemo {
5
    public static void main(String[] args) {
6
        Set<String> set = new HashSet<>();
7
        //接口多态编译左边实现右边
8

9
        // 添加元素（不可重复）
10
        set.add("Apple");
11
        set.add("Banana");
12
        set.add("Apple"); // 重复元素，添加失败
13
        System.out.println("添加后：" + set); // 输出：[Apple, Banana]（无序）
14

15
        // 删除元素
16
        set.remove("Banana");
17
        System.out.println("删除后：" + set); // 输出：[Apple]
18

19
        // 判断元素是否存在
20
        boolean contains = set.contains("Apple");
21
        System.out.println("是否包含Apple：" + contains); // 输出：true
22

23
        // 遍历元素（增强for/迭代器，无普通for循环，因为无序无索引）
24
        for (String s : set) {
25
            System.out.print(s + " "); // 输出：Apple
26
        }
27

28
        // 去重场景示例：数组去重
29
        String[] arr = {"Java", "Python", "Java", "C++"};
30
        Set<String> uniqueSet = new HashSet<>();
31
        for (String s : arr) {
32
            uniqueSet.add(s);
33
        }
34
        System.out.println("\n数组去重后：" + uniqueSet); // 输出：[Java, Python, C++]
35
    }
36
}

展开收起

LinkedHashSet实现类

认识LinkedHashSet

LinkedHashSet：有序的去重集合

底层原理：基于 HashMap + 双向链表实现，链表记录元素插入顺序，哈希表保证元素唯一；
核心特点：有序（插入顺序 = 遍历顺序）、不可重复、效率略低于 HashSet；
适用场景：需要去重且保持插入顺序的场景（如用户浏览记录去重）。

TreeSet实现类

初识TreeSet

底层原理：基于红黑树实现，元素会按自然顺序（或自定义比较器）排序；
核心特点：有序（排序后顺序）、不可重复、查询和增删效率 O (logn)；
适用场景：需要去重且排序的场景（如成绩排名、数据按关键字排序）

1
import java.util.TreeSet;
2

3
public class TreeSetDemo {
4
    public static void main(String[] args) {
5
        // 1. 自然排序（Integer按数值升序）
6
        TreeSet<Integer> numSet = new TreeSet<>();
7
        numSet.add(30);
8
        numSet.add(10);
9
        numSet.add(20);
10
        System.out.println("自然排序：" + numSet); // 输出：[10, 20, 30]
11

12
        // 2. 自定义排序（字符串按长度降序）
13
        TreeSet<String> strSet = new TreeSet<>((s1, s2) -> s2.length() - s1.length());
14
        strSet.add("Apple");
15
        strSet.add("Banana");
16
        strSet.add("Pear");
17
        System.out.println("自定义排序（长度降序）：" + strSet); // 输出：[Banana, Apple, Pear]
18
    }
19
}

展开收起

Queue接口

初识对列

Queue 接口：先进先出的 “队列” Queue 接口遵循先进先出（FIFO）原则，元素从队列尾部添加，从头部删除，适合任务排队、消息传递等场景。

核心方法 offer(E e)：添加元素到队列尾部，失败返回 false（推荐使用，不抛出异常）； poll()：删除并返回队列头部元素，队列为空返回 null； peek()：返回队列头部元素，不删除，队列为空返回 null； remove()：删除并返回队列头部元素，队列为空抛出异常。

1
import java.util.LinkedList;
2
import java.util.Queue;
3

4
public class QueueDemo {
5
    public static void main(String[] args) {
6
        Queue<String> queue = new LinkedList<>();
7

8
        // 添加元素到队列
9
        queue.offer("任务1");
10
        queue.offer("任务2");
11
        queue.offer("任务3");
12
        System.out.println("队列初始化：" + queue); // 输出：[任务1, 任务2, 任务3]
13

14
        // 获取头部元素（不删除）
15
        String head = queue.peek();
16
        System.out.println("队列头部：" + head); // 输出：任务1
17

18
        // 删除并返回头部元素
19
        String task = queue.poll();
20
        System.out.println("执行任务：" + task); // 输出：执行任务：任务1
21
        System.out.println("执行后队列：" + queue); // 输出：[任务2, 任务3]
22
    }
23
}

展开收起

Map接口

HashMap实现类

认识HashMap

Map 接口存储键值对（key-value），key 唯一（不可重复），value 可重复，每个 key 对应一个 value，适合通过 key 快速查找 value 的场景（如用户信息存储、配置项管理）。

HashMap：哈希表实现的键值对集合（最常用）底层原理：JDK8 之前是 “数组 + 链表”，JDK8 之后是 “数组 + 链表 + 红黑树”；当链表长度超过阈值（8）且数组容量≥64 时，链表转为红黑树（提高查询效率）；当链表长度≤6 时，红黑树转回链表（节省内存）；核心特点：无序、key 唯一、查询和增删效率高（O (1)）、线程不安全； key 去重规则：同 HashSet，基于hashCode()和equals()判断。

1
import java.util.HashMap;
2
import java.util.Map;
3
import java.util.Set;
4

5
public class HashMapDemo {
6
    public static void main(String[] args) {
7
        // 1. 创建HashMap（存储用户ID-用户名）
8
        Map<Integer, String> userMap = new HashMap<>();
9

10
        // 2. 添加键值对（key唯一，重复key会覆盖value）
11
        userMap.put(1001, "张三");
12
        userMap.put(1002, "李四");
13
        userMap.put(1001, "张三三"); // 重复key，覆盖value
14
        System.out.println("添加后：" + userMap); // 输出：{1001=张三三, 1002=李四}
15

16
        // 3. 根据key获取value
17
        String username = userMap.get(1001);
18
        System.out.println("用户1001的名称：" + username); // 输出：张三三
19

20
        // 4. 判断key是否存在
21
        boolean hasKey = userMap.containsKey(1002);
22
        System.out.println("是否存在key=1002：" + hasKey); // 输出：true
23

24
        // 5. 删除键值对
25
        userMap.remove(1002);
26
        System.out.println("删除后：" + userMap); // 输出：{1001=张三三}
27

28
        // 6. 遍历HashMap（三种方式）
29
        // 方式1：遍历key集合
30
        Set<Integer> keySet = userMap.keySet();
31
        for (Integer key : keySet) {
32
            System.out.println("key：" + key + "，value：" + userMap.get(key));
33
        }
34

35
        // 方式2：遍历entrySet（推荐，效率高，避免多次get）
36
        Set<Map.Entry<Integer, String>> entrySet = userMap.entrySet();
37
        for (Map.Entry<Integer, String> entry : entrySet) {
38
            System.out.println("key：" + entry.getKey() + "，value：" + entry.getValue());
39
        }
40

41
        // 方式3：遍历value集合（无法获取key）
42
        for (String value : userMap.values()) {
43
            System.out.println("value：" + value);
44
        }
45
    }
46
}

展开收起

LinkedMap实现类

认识LinkedMap

底层原理：基于 HashMap + 双向链表实现，链表记录键值对的插入顺序或访问顺序；
核心特点：有序（插入顺序或访问顺序）、key 唯一、效率略低于 HashMap；
适用场景：需要保持键值对顺序的场景（如缓存 LRU 策略、历史操作记录）

1
import java.util.LinkedHashMap;
2
import java.util.Map;
3

4
public class LinkedHashMapDemo {
5
    public static void main(String[] args) {
6
        // 1. 按插入顺序排序（默认）
7
        Map<String, Integer> insertOrderMap = new LinkedHashMap<>();
8
        insertOrderMap.put("Apple", 10);
9
        insertOrderMap.put("Banana", 20);
10
        insertOrderMap.put("Pear", 15);
11
        System.out.println("插入顺序：" + insertOrderMap); // 输出：{Apple=10, Banana=20, Pear=15}
12

13
        // 2. 按访问顺序排序（LRU策略）
14
        Map<String, Integer> accessOrderMap = new LinkedHashMap<>(16, 0.75f, true);
15
        accessOrderMap.put("Apple", 10);
16
        accessOrderMap.put("Banana", 20);
17
        accessOrderMap.put("Pear", 15);
18

19
        // 访问Banana和Apple
20
        accessOrderMap.get("Banana");
21
        accessOrderMap.get("Apple");
22
        System.out.println("访问顺序：" + accessOrderMap); // 输出：{Pear=15, Banana=20, Apple=10}
23
    }
24
}

展开收起

TreeMap实现类

认识treeMap

底层原理：基于红黑树实现，key 按自然顺序或自定义比较器排序；
核心特点：有序（key 排序后顺序）、key 唯一、查询和增删效率 O (logn)；
适用场景：需要按 key 排序的场景（如成绩排名表、字典序查询）

1
import java.util.TreeMap;
2

3
public class TreeMapDemo {
4
    public static void main(String[] args) {
5
        // 1. 自然排序（Integer按数值升序）
6
        TreeMap<Integer, String> numMap = new TreeMap<>();
7
        numMap.put(3, "C");
8
        numMap.put(1, "A");
9
        numMap.put(2, "B");
10
        System.out.println("自然排序：" + numMap); // 输出：{1=A, 2=B, 3=C}
11

12
        // 2. 自定义排序（key按字符串长度降序）
13
        TreeMap<String, Integer> strMap = new TreeMap<>((s1, s2) -> s2.length() - s1.length());
14
        strMap.put("Apple", 10);
15
        strMap.put("Banana", 20);
16
        strMap.put("Pear", 15);
17
        System.out.println("自定义排序：" + strMap); // 输出：{Banana=20, Apple=10, Pear=15}
18
    }
19
}

展开收起

ConCurrentHashMap实现类

认识ConCurrentHashMap

ConcurrentHashMap：线程安全的高效并发集合底层原理：JDK8 之前是 “分段锁”，JDK8 之后是 “CAS+ synchronized”，只锁定链表 / 红黑树的节点，不锁定整个数组，并发效率高；核心特点：线程安全、高效并发、key 唯一、无序；适用场景：多线程环境下的键值对存储（如分布式系统中的共享配置、缓存）。

1
import java.util.Map;
2
import java.util.concurrent.ConcurrentHashMap;
3

4
public class ConcurrentHashMapDemo {
5
    public static void main(String[] args) throws InterruptedException {
6
        Map<Integer, Integer> map = new ConcurrentHashMap<>();
7

8
        // 多线程并发添加元素
9
        Runnable task = () -> {
10
            for (int i = 0; i < 1000; i++) {
11
                map.put(i, i);
12
            }
13
        };
14

15
        Thread t1 = new Thread(task);
16
        Thread t2 = new Thread(task);
17
        t1.start();
18
        t2.start();
19
        t1.join();
20
        t2.join();
21

22
        System.out.println("最终元素个数：" + map.size()); // 输出：1000（无并发问题）
23
    }
24
}

展开收起

避坑指南

1.ArrayList 遍历中删除元素：使用普通 for 循环删除会导致索引错位，推荐使用迭代器（Iterator.remove()）或增强 for 循环配合标记； 2.HashMap 的 key 必须重写 equals () 和 hashCode ()：自定义对象作为 key 时，需重写这两个方法，否则无法保证去重正确性； 3.HashSet/HashMap 无序性：不要依赖遍历顺序，若需有序请使用 LinkedHashSet/LinkedHashMap； 4.线程安全问题：ArrayList、HashMap、HashSet 等都是线程不安全的，多线程环境下需ConcurrentHashMap、CopyOnWriteArrayList 等线程安全集合，或手动加锁； 5.TreeSet/TreeMap 的 key 必须可比较：自定义对象作为 key 时，需实现 Comparable 接口或传入 Comparator，否则抛出 ClassCastException。

Stream流

初识stream流

对集合（Collection）对象功能的增强，与Lambda表达式结合，可以提高编程效率、间接性和程序可读性。

特点

1、代码简洁：函数式编程写出的代码简洁且意图明确，使用stream接口让你从此告别for循环

2、多核友好：Java函数式编程使得编写并行程序如此简单，就是调用一下方法

流程

1、将集合转换为Stream流（或者创建流）

2、操作Stream流（中间操作，终端操作）

stream流在管道中经过中间操作（intermediate operation）的处理，最后由最终操作(terminal operation)得到前面处理的结果

方法引用

函数式接口和Lambda表达式

初识函数式接口

只有唯一一个抽象方法的接口

可以有默认方法、静态方法
只能有1个 abstract 抽象方法

1.作用

专门给 Lambda 表达式用不是函数式接口 → 不能用Lambda简化

2.内置常用4大函数式接口

3.Consumer 消费型：有参无返回 void accept(T t)

Supplier 供给型：无参有返回 T get()

Function 函数型：有参有返回 R apply(T t)

Predicate 判断型：有参返回布尔 boolean test(T t)
1. 一句话记
一抽象、可默认、标注解、配Lambda

5.对比
- 普通接口：多个抽象方法 → 只能匿名内部类
- 函数式接口：一个抽象方法 → 优先Lambda

初识Lambda表达式

Lambda 是匿名内部类的简化写法，只用于函数式接口（有且仅有一个抽象方法）

1
// 函数式接口
2
interface Run {
3
    void go();
4
}
5

6
// 匿名内部类
7
Run r = new Run() {
8
    @Override
9
    public void go() {
10
        System.out.println("跑起来");
11
    }
12
};
13

14
//lambda表达式写法
15
Run r = () -> System.out.println("跑起来");

展开收起

无参： () -> 代码
有参： (a,b) -> 代码
单参可省略括号： a -> 代码
多行代码用 {}

匿名内部类：生成独立.class文件 Lambda：不生成额外class，效率更高

this 含义匿名内部类：指向内部类对象 Lambda：指向外层类对象

流创建操作

Stream创建

1
List<String> list = new ArrayList<>();
2
Stream<String> stream = list.stream();  //串行流
3
Stream<String> parallelStream = list.parallelStream(); //并行流
4

5
Stream<Integer> stream1 = Stream.of(1,2,3,4,5);

Collection集合创建

1
List<Integer> integerList = new ArrayList<>();
2
        integerList.add(1);
3
        integerList.add(2);
4
        integerList.add(3);
5
        integerList.add(4);
6
        integerList.add(5);
7
        Stream<Integer> listStream = integerList.stream();

Array数组创建

1
int[] intArr = {1, 2, 3, 4, 5};
2
        IntStream arrayStream = Arrays.stream(intArr);

数值流与对象流转换

通过Arrays.stream方法生成流，并且该方法生成的流是数值流【即IntStream】而不是 Stream

注：****

使用数值流可以避免计算过程中拆箱装箱，提高性能。

Stream API提供了mapToInt、mapToDouble、mapToLong三种方式将对象流【即Stream 】转换成对应的数值流，同时提供了boxed方法将数值流转换为对象流

文件创建

1
try {
2
            Stream<String> fileStream = Files.lines(Paths.get("data.txt"), Charset.defaultCharset());
3
        } catch (IOException e) {
4
            e.printStackTrace();
5
        }
6
//通过Files.line方法得到一个流，并且得到的每个流是给定文件中的一行

函数创建

iterator

1
Stream<Integer> iterateStream = Stream.iterate(0, n -> n + 2).limit(5);
2
//iterate方法接受两个参数，第一个为初始化值，第二个为进行的函数操作，因为iterator生成的流为无限流，通过limit方法对流进行了截断 ，只生成5个偶数

generator

1
Stream<Double> generateStream = Stream.generate(Math::random).limit(5);
2
//generate方法接受一个参数，方法参数类型为Supplier ，由它为流提供值。generate生成的流也是无限流，因此通过limit对流进行了截断

Stream中的静态方法：of()、iterate()、generate()

1
Stream<Integer> stream = Stream.of(1,2,3,4,5,6);
2
stream.forEach(System.out::println);
3
// 输出：1 2 3 4 5 6
4

5
Stream<Integer> stream2 = Stream.iterate(0, (x) -> x + 2).limit(6);
6
stream2.forEach(System.out::println);
7
// 输出：0 2 4 6 8 10
8

9
Stream<Double> stream3 = Stream.generate(Math::random).limit(2);
10
stream3.forEach(System.out::println);
11
// 输出：两个随机数

BufferedReader.lines() 方法，将每行内容转成流

1
 BufferedReader reader = new BufferedReader(new FileReader("F:\\test_stream.txt"));
2
Stream<String> lineStream = reader.lines();
3
lineStream.forEach(System.out::println);

Pattern.splitAsStream() 方法，将字符串分隔成流

1
Pattern pattern = Pattern.compile(",");
2
Stream<String> stringStream = pattern.splitAsStream("a,b,c,d");
3
stringStream.forEach(System.out::println);
4
//输出：a b c d

操作符

中间操作符

1
    public static void main(String[] args) {
2
        List<User> userList = getUserList();
3
    }
4

5
    private static List<User> getUserList() {
6
        List<User> userList = new ArrayList<>();
7

8
        userList.add(new User(1,"张三",18,"上海"));
9
        userList.add(new User(2,"王五",16,"上海"));
10
        userList.add(new User(3,"李四",20,"上海"));
11
        userList.add(new User(4,"张雷",22,"北京"));
12
        userList.add(new User(5,"张超",15,"深圳"));
13
        userList.add(new User(6,"李雷",24,"北京"));
14
        userList.add(new User(7,"王爷",21,"上海"));
15
        userList.add(new User(8,"张三丰",18,"广州"));
16
        userList.add(new User(9,"赵六",16,"广州"));
17
        userList.add(new User(10,"赵无极",26,"深圳"));
18

19
        return userList;
20
    }
21
//泛型可承接javabean实体类

展开收起

filter过滤

用于通过设置的条件过滤出元素

1
//1、filter：输出ID大于6的user对象
2
List<User> filetrUserList = userList.stream().filter(user -> user.getId() > 6).collect(Collectors.toList());
3
filetrUserList.forEach(System.out::println);

根据对象属性去重

1
//set集合元素不可重复
2
List<User> list = new ArrayList<User>() {{
3
  add(new User("Tony", 20, "12"));
4
  add(new User("Pepper", 20, "123"));
5
  add(new User("Tony", 22, "1234"));
6
  add(new User("Tony", 22, "12345"));
7
}};
8

9
//只通过名字去重
10
List<User> streamByNameList = list.stream().collect(Collectors.collectingAndThen(
11
    Collectors.toCollection(() -> new TreeSet<>(Comparator.comparing(User::getName))), ArrayList::new
12
));
13
System.out.println(streamByNameList);
14
//[User{name='Pepper', age=20, Phone='123'},
15
// User{name='Tony', age=20, Phone='12'}]
16

17
//通过名字和年龄去重
18
List<User> streamByNameAndAgeList = list.stream().collect(Collectors.collectingAndThen(
19
    Collectors.toCollection(() -> new TreeSet<>(Comparator.comparing(o -> o.getName() + o.getAge()))), ArrayList::new
20
));
21
System.out.println(streamByNameAndAgeList);
22
//[User{name='Pepper', age=20, Phone='123'},
23
// User{name='Tony', age=20, Phone='12'},
24
// User{name='Tony', age=22, Phone='1234'}]
25
//collectingAndThen 这个方法的意思是: 将收集的结果转换为另一种类型。
26

27
//因此上面的方法可以理解为：把 new TreeSet<>(Comparator.comparingLong(BookInfoVo::getRecordId))这个set转换为 ArrayLis

展开收起

map:映射

映射

接受一个函数作为参数。这个函数会被应用到每个元素上，并将其映射成一个新的元素（使用映射一词，是因为它和转换类似，但其中的细微差别在于它是“创建一个新版本”而不是去“修改”）

1
//2、map
2
List<String> mapUserList = userList.stream().map(user -> user.getName() + "用户").collect(Collectors.toList());
3
mapUserList.forEach(System.out::println);
4
//张三用户
5
//王五用户
6
//李四用户//张雷用户//张超用户//李雷用户//王爷用户//张三丰用户

新值类型和原来的元素的类型相同示例

1
List<String> list = Arrays.asList("a,b,c", "1,2,3");
2

3
//将每个元素转成一个新的且不带逗号的元素
4
Stream<String> s1 = list.stream().map(s -> s.replaceAll(",", ""));
5
s1.forEach(System.out::println);
6
// abc  123
7

8
Stream<String> s2 = list.stream().flatMap(s -> {
9
    //将每个元素转换成一个stream
10
    String[] split = s.split(",");
11
    Stream<String> s3 = Arrays.stream(split);
12
    return s3;
13
});
14
s2.forEach(System.out::println);
15
// a b c 1 2 3

展开收起

distinct：去重

返回一个元素各异（根据流所生成元素的hashCode和equals方法实现）的流

1
//3、distinct：去重
2
List<String> distinctUsers =  userList.stream().map(User::getCity).distinct().collect(Collectors.toList());
3
distinctUsers.forEach(System.out::println);

sorted:排序

认识排序

自然排序（从小到大），流中元素需实现Comparable接口。例：list.stream().sorted()

定制排序。常用以下几种： list.stream().sorted(Comparator.reverseOrder()) //倒序排序（从大到小） list.stream().sorted(Comparator.comparing(Student::getAge)) //顺序排序（从小到大） list.stream().sorted(Comparator.comparing(Student::getAge).reversed()) // 倒序排序（从大到小）

对象单字段排序

1
User u1 = new User("dd", 40);
2
User u2 = new User("bb", 20);
3
User u3 = new User("aa", 20);
4
User u4 = new User("aa", 30);
5
List<User> userList = Arrays.asList(u1, u2, u3, u4);
6

7
//按年龄升序
8
userList.stream().sorted(Comparator.comparing(User::getAge))
9
        .forEach(System.out::println);
10

11
//结果
12
User(name=bb, age=20)
13
User(name=aa, age=20)
14
User(name=aa, age=30)
15
User(name=dd, age=40)

展开收起

对象多字段、全部升序排序

1
//先按年龄升序，年龄相同则按姓名升序
2
User u1 = new User("dd", 40);
3
User u2 = new User("bb", 20);
4
User u3 = new User("aa", 20);
5
User u4 = new User("aa", 30);
6
List<User> userList = Arrays.asList(u1, u2, u3, u4);
7

8
// 写法1（推荐）
9
userList.stream().sorted(Comparator
10
                .comparing(User::getAge)
11
                .thenComparing(User::getName)
12
        // 可以写多个.thenComparing
13
).forEach(System.out::println);
14

15
System.out.println("------------------------------------");
16

17
// 写法2
18
userList.stream().sorted(
19
        (o1, o2) -> {
20
            String tmp1 = o1.getAge() + o1.getName();
21
            String tmp2 = o2.getAge() + o2.getName();
22
            return tmp1.compareTo(tmp2);
23
        }
24
).forEach(System.out::println);
25

26
System.out.println("------------------------------------");
27

28
// 写法3
29
userList.stream().sorted(
30
        (o1, o2) -> {
31
            if (!o1.getAge().equals(o2.getAge())) {
32
                return o1.getAge().compareTo(o2.getAge());
33
            } else {
34
                return o1.getName().compareTo(o2.getName());
35
            }
36
        }
37
).forEach(System.out::println);
38

39
//结果
40
User(name=aa, age=20)
41
User(name=bb, age=20)
42
User(name=aa, age=30)
43
User(name=dd, age=40)

展开收起

对象多字段、升序+降序

1
//先按年龄升序，年龄相同则按姓名降序
2
User u1 = new User("dd", 40);
3
User u2 = new User("bb", 20);
4
User u3 = new User("aa", 20);
5
User u4 = new User("aa", 30);
6
List<User> userList = Arrays.asList(u1, u2, u3, u4);
7

8
userList.stream().sorted(
9
        (o1, o2) -> {
10
            if (!o1.getAge().equals(o2.getAge())) {
11
                return o1.getAge().compareTo(o2.getAge());
12
            } else {
13
                return o2.getName().compareTo(o1.getName());
14
            }
15
        }
16
).forEach(System.out::println);
17

18
//结果
19
User(name=bb, age=20)
20
User(name=aa, age=20)
21
User(name=aa, age=30)
22
User(name=dd, age=40)

展开收起

limit

1
//5、limit：取前5条数据
2
userList.stream().limit(5).collect(Collectors.toList()).forEach(System.out::println);

skip

1
//6、skip：跳过第几条取后几条
2
userList.stream().skip(7).collect(Collectors.toList()).forEach(System.out::println);

flatMap

flatmap与map的区别

使用flatMap方法的效果是，各个数组并不是分别映射成一个流，而是映射成流的内容。所有使用map(Arrays::stream)时生成的单个流都被合并起来，即扁平化为一个流

map：对流中每一个元素进行处理 flatMap：流扁平化，让你把一个流中的“每个值”都换成另一个流，然后把所有的流连接起来成为一个流本质区别：map是对一级元素进行操作，flatmap是对二级元素操作map返回一个值；flatmap返回一个流，多个值

应用场景：map对集合中每个元素加工,返回加工后结果；flatmap对集合中每个元素加工后，做扁平化处理后（拆分层级，放到同一层）然后返回

1
//7、flatMap：数据拆分一对多映射
2
userList.stream().flatMap(user -> Arrays.stream(user.getCity().split(","))).forEach(System.out::println);

peek遍历

1
//8、peek：对元素进行遍历处理，每个用户ID加1输出
2
userList.stream().peek(user -> user.setId(user.getId()+1)).forEach(System.out::println);

终端操作符

认识终端操作符

Stream流执行完终端操作之后，无法再执行其他动作，否则会报状态异常，提示该流已经被执行操作或者被关闭，想要再次执行操作必须重新创建Stream流

一个流有且只能有一个终端操作，当这个操作执行后，流就被关闭了，无法再被操作，因此一个流只能被遍历一次，若想在遍历需要通过源数据在生成流。

终端操作的执行，才会真正开始流的遍历。如 count、collect 等

collect

收集器，将流转换为其他形式

1
//1、collect：收集器，将流转换为其他形式
2
        Set set = userList.stream().collect(Collectors.toSet());
3
        set.forEach(System.out::println);
4
        System.out.println("--------------------------");
5
        List list = userList.stream().collect(Collectors.toList());
6
        list.forEach(System.out::println);

forEach

1
//2、forEach：遍历流
2
userList.stream().forEach(user -> System.out.println(user));
3
userList.stream().filter(user -> "上海".equals(user.getCity())).forEach(System.out::println);

findFirst和findAny

1
//3、findFirst：返回第一个元素
2
User firstUser = userList.stream().findFirst().get();
3
User firstUser1 = userList.stream().filter(user -> "上海".equals(user.getCity())).findFirst().get();
4
//4、findAny：将返回当前流中的任意元素
5
User findUser = userList.stream().findAny().get();
6
User findUser1 = userList.stream().filter(user -> "上海".equals(user.getCity())).findAny().get();
7

8

9
//5、count：返回流中元素总数
10
long count = userList.stream().filter(user -> user.getAge() > 20).count();
11
System.out.println(count);
12
//6、sum：求和
13
int sum = userList.stream().mapToInt(User::getId).sum();
14
//7、max：最大值
15
int max = userList.stream().max(Comparator.comparingInt(User::getId)).get().getId();
16
//8、min：最小值
17
int min = userList.stream().min(Comparator.comparingInt(User::getId)).get().getId();

展开收起

Collect收集

toList

1
//将用户ID存放到List集合中
2
List<Integer> idList = userList.stream().map(User::getId).collect(Collectors.toList()) ;

toMap

1
Map<Integer,String> userMap = userList.stream().collect(Collectors.toMap(User::getId,User::getName));

toset

1
Set<String> citySet = userList.stream().map(User::getCity).collect(Collectors.toSet());

counting

1
//符合条件的用户总数
2
long count = userList.stream().filter(user -> user.getId()>1).collect(Collectors.counting());

summingInt

对结果元素即用户ID求和

1
Integer sumInt = userList.stream().filter(user -> user.getId()>2).collect(Collectors.summingInt(User::getId)) ;

minBy

筛选元素中ID最小的用户

1
User maxId = userList.stream().collect(Collectors.minBy(Comparator.comparingInt(User::getId))).get() ;

joining

将用户所在城市，以指定分隔符链接成字符串；

1
String joinCity = userList.stream().map(User::getCity).collect(Collectors.joining("||"));

IO流

多线程

网络编程

反射

python大模型

Mon, 20 Apr 2026 18:19:03 GMT

知识库

初识python基础

1
print("我是李义非")
2
m=input("请写下你的姓名")
3
a="helllo"
4
b="world"
5
print(a,b)
6
# f-string写法
7
print(f'你好{a} ,世界{m}')
8
# ● %s：字符串占位符，用于插入字符串
9
# ● %d：整数占位符，用于插入整数
10
# ● %f：浮点数占位符，用于插入浮点数
11

12
#数据类型
13
# 不可变类型：int、float、str、tuple、bytes、bool（更改时，其实是新建了一个新的，内存地址已发送改变）
14
# 可变类型：list、dict、set（修改时是修改里面的元素，不改变内存地址）
15
# str字符串 bool判断类型 list列表arr [] tuple元组不可改变的列表()
16
# dict字典键值对组成{"name":"张三","age":30} set集合{}
17
# 用于限定输入类型
18
level = ""  # 定义空字符串
19
#循环一
20
# range(3) 代表循环 3 次，你可以改成 1、5、10 都行
21
for i in range(3):
22
    #for i in range(start,end，步长间隔)
23
    # 每次循环输入一个数字
24
    f = int(input("请输入一个数字："))
25
    # 默认输入的是字符串
26
    # 判断是否等于10
27
    if f == 10:
28
        level = "你真棒"  # 这里统一 4 个空格缩进
29

30
 while count > 0:
31
            count = (count // 2) - 2
32
            day += 1
33
        print(day)
34
# 循环结束后输出结果
35
print(level)
36
#遍历字符串
37
s="我爱中国"
38
    for i in s:
39
        print(i)
40
# break终止循环 continue跳出当前循环,继续执行下一个循环

展开收起

list列表

创建并修改元素

1
list2 = ["五菱宏光","哈弗","小米汽车","欧拉",True]
2
# 修改列表元素   语法:列表名[索引] = 值
3
print(list2)
4
list2[2] = "天狗"
5
print(list2)

遍历列表

1
list3 = ["麻辣烫", "佛跳墙", "白切鸡", "云吞"]
2
# 第一种方式:
3
for i in list3:
4
     print(i)
5
# 第二种方式: 通过索引的方式访问元素
6
for i in range(len(list3)):
7
     print(list3[i])
8

9
# 第三种方式:enumrate() 同时遍历索引和元素
10
for index,value in enumerate(list3):
11
     print(index,value)

列表操作

列表合并与重复

1
# 合并列表: 通过 + 实现
2
list = [12,34,6,8,3.13]
3
list1 = ["荔枝","龙眼","桂圆","榴莲","芒果"]
4
# 通过 + 实现列表的合并 list + list1
5
list2 = list + list1
6
print(list2)
7

8
# 重复输出列表中的元素: 通过 * 实现
9
list = [1,2,3]
10
list1 = list * 4
11
print(list1)

判断列表中的位置

1
# 判断指定元素是否在列表中, 使用成员运算符检查
2
#  in 和 not in   返回值是一个布尔类型  True和False
3
list1 = [12,34,4.12,"haha","lele","hehe"]
4
print(12 in list1)   # True
5

6
if "haha" in list1:
7
    print("字符串在列表中")
8
else:
9
    print("不在列表中")

列表截取

1
list2 = [13,45,2,35,7,9]
2
# 语法: 列表名[开始下标:结束下标]   特点: 前闭后开  包含开始下标的元素不包含结束下标的元素
3
print(list2[1,3])#左闭右开

列表的crud

添加元素

1
# append()   向列表的尾部追加元素
2
list1 = ["香妃", "妲己", "赵飞燕", "杨贵妃", "东施"]
3
list1.append("西施")
4
print(list1)
5

6
# extend 用于在列表末尾一次追加另一个列表中的多个元素
7
list1 = ["香妃","妲己","赵飞燕","杨贵妃","东施"]
8
list1.extend(["乾隆","商纣王","汉昭帝","唐玄宗"])
9
list1.extend("秦始皇")   # "秦"  "始"  "皇"
10
print(list1)
11

12
# insert()  在列表中指定的索引处前面插入元素,后面的其他的元素依次后延
13
list2 = ["秦始皇","汉武帝","曹操","刘备","孙权"]
14
list2.insert(1, "刘邦")
15
print(list2)

展开收起

删除元素

1
list2 = ["秦始皇","汉武帝","曹操","刘备","孙权"]
2

3
# pop() 传输的参数是下标  不传参数的时候,默认移除最后一个元素,返回的是原列表
4
list2.pop()  # ["秦始皇","汉武帝","曹操","刘备"]
5
list2.pop(2)   # ['秦始皇', '汉武帝', '刘备', '孙权']
6
print(list2)
7

8
# remove()  传输的参数是指定移除的元素
9
list2.remove("刘备")
10
print(list2)
11

12
# clear() 清空列表
13
list2.clear()
14
print(list2)   # []

获取元素

1
list = [12,34,2,5.23,True,False,"hello"]
2
# print(len(list))   # len 获取列表的长度
3

4
# 获取列表中的最大值  max()
5
list1 = [12,3,4,32,98,14,3,78,3,34,3]
6
print(max(list1))
7
# 获取列表中的最大值  min()
8
print(min(list1))
9

10
# 获取指定元素的索引   index(元素名称)
11
print(list1.index(98))

排序和反转

1
list = [12,42,34,16,87]
2

3
# reverse 翻转列表元素   注意:在原列表的内部进行翻转,不会生成新列表
4
list.reverse()
5
print(list)
6

7
# sort()  对原列表元素进行排序  默认是升序   不会生成一个新的列表
8
# 升序
9
list.sort()
10

11
# 降序   在sort函数中传入reverse=True 实现降序
12
list.sort(reverse=True)
13
print(list)
14

15
# sorted()  对列表元素进行排序,默认是升序, 排序的结果会生成一个新列表
16
# 升序
17
list1 = sorted(list)
18
# 降序  传入reverse=True
19
list1 = sorted(list,reverse=True)
20
print(list1)

展开收起

元组tuple

初识元组并区分列表

和列表相似，本质上是一种有序的集合

元组和列表的不同之处：

a.列表:[ ] 元组：( )

b.列表中的元素可以进行增加和删除操作，但是，元组中的元素不能修改

【元素：一旦被初始化，将不能发生改变】

创建元组

1
# 1.创建空元组
2
tuple1 = ()
3
print(type(tuple1))  # <class 'tuple'>
4

5
# 2.创建带有元素的元组
6
tuple2 = (12,34,6,87)
7
print(tuple2)
8
print(type(tuple2))  # <class 'tuple'>
9

10
# 3.元组中的元素可以是各种类型
11
tuple3 = (12,34,4.12,"hello",True)
12
print(tuple3)
13

14
# 注意:创建的元组只有一个元素时, 会在元素的后面加上一个逗号 ,
15
tuple4 = (2)
16
print(tuple4)
17
print(type(tuple4))  # <class 'int'>
18

19
tuple5 = (3,)
20
print(tuple5)
21
print(type(tuple5))  #<class 'tuple'>

展开收起

元组元素的访问

1
tuple1 = (14,32,35,7,87)
2
# 1.访问元组的元素,使用下标访问,下标默认从0开始
3
print(tuple1[1])
4
# print(tuple1[5])  #  tuple index out of range  索引越界
5

6
print(tuple1[-1])  # 87  访问元组的最后一个元素 下标是-1
7
print(tuple1[-3])  # 35
8

9
# 2. 元组的元素的值不能进行修改
10
# tuple1[2] = 99
11
# print(tuple1)  # 报错'tuple' object does not support item assignment

元组的操作

1
# 1.合并元组  +
2
tuple1 = (12,34,56)
3
tuple2 = (3.12,56,"hello")
4
print(tuple1 + tuple2)
5

6
# 2.重复元组中的元素  *
7
tuple3 = (23,45,67)
8
print(tuple3 * 4)
9

10
# 3.判断指定元素是否在元组中 使用成员运算符  in 和 not in
11
print(56 in tuple2)
12
if "hello" in tuple2:
13
     print("终于找到你")
14
else:
15
     print("你在哪里呢!")
16

17
# 4.元组的截取(切片)
18
tuple4 = (12,3,5,7,98)
19
print(tuple4[1:4])   # (3, 5, 7)
20
print(tuple4[-1:])  # (98,)
21
print(tuple4[:2])   # (12, 3)

展开收起

元组的功能

1
#获取元组的长度
2
tuple4 = (12,3,5,7,98)
3
print(len(tuple4))  # 5
4
print(max(tuple4))  # 98
5
print(min(tuple4))  # 3
6
#其他类型转换为元组
7
list1 = [12,34,57,89]
8
print(type(list1))  # <class 'list'>
9
print(type(tuple(list1))) # <class 'tuple'>
10
#遍历元组
11
# 第一种方式: for-in
12
for i in tuple4:
13
     print(i)
14

15
# 第二种方式: 通过下标访问
16
for i in range(len(tuple4)):
17
     print(tuple4[i])
18

19
# 第三种方式: enumrate() 返回索引和元素
20
for i,n in enumerate(tuple4):
21
     print(i,n)

展开收起

字典

初识字典

元组和列表的缺点

列表和元组的使用缺点：当存储的数据要动态添加、删除的时候，我们一般使用列表，但是列表有时会遇到一些麻烦

解决方案：既能存储多个数据，还能在访问元素的很方便的定位到需要的元素，采用字典

初始字典

语法： {键1: 值1, 键2: 值2, 键3: 值3, …, 键n: 值n}

说明：键值对: key-value

字典和列表类似，都可以用来存储多个数据
在列表中查找某个元素时，是根据下标进行的；字典中找某个元素时，是根据’名字’（就是冒号:前面的那个值，例如上面代码中的’name’、‘id’、‘sex’）
字典中的每个元素都由2部分组成，键:值。例如 ‘name’:‘班长’ ,‘name’为键，‘班长’为值
键可以使用数字、布尔值、元组，字符串等不可变数据类型，但是一般习惯使用字符串，切记不能使用列表等可变数据类型
每个字典里的key都是唯一的，如果出现了多个相同的key,后面的value会覆盖之前的value

习惯使用场景：

列表更适合保存相似数据，比如多个商品、多个姓名、多个时间
字典更适合保存不同数据，比如一个商品的不同信息、一个人的不同信息

创建字典并访问

1
# 1.定义空字典 {}
2
dict1 = {}
3
print(type(dict1))  # <class 'dict'>
4

5
# 2.定义非空字典
6
# 第一种定义字典的方式
7
dict2 = {"name":"小明","age":25,"sex":"男","love":"篮球"}  # 最常用
8
print(dict2)
9
print(type(dict2))
10
print(dict2["name"], dict2["love"])
11
# 访问字典 字典名[键名]键名唯一
12
# 第二种方式:通过get()方法获取
13
print(dict1.get('name'))
14
print(dict1.get('money'))  # None   访问字典中不存在的key时,返回None
15
print(dict1.get('money',10000))  # 访问字典中不存在的key时,若传递了第二个参数,则使用第二个参数的值

展开收起

字典的操作

crud

1
#增加元素size为键名
2
dict4["size"] = 6.8
3
print(dict4)
4
#删除元素
5
#列表pop()利用索引删，remove()指名道姓的删
6
#字典pop()删除键名,popitem删除最后一对键值对
7
# 第一种:pop() 删除指定的元素
8
dict4.pop("color")
9
print(dict4)
10
# 第二种:popitem()  随机返回并删除字典中的最后一对key和value
11
dict4.popitem()
12
print(dict4)
13

14
# clear() 清空字典
15
dict4.clear()
16
print(dict4)

展开收起

获取字典各组成部分信息

1
#获取字典长度
2
print(len(dict1))
3

4
#获取字典的键
5
print(dic1.keys())
6
#获取字典的值
7
print(dict1.values())
8
#获取字典的键值对
9
print(dict1.items())

遍历字典

1
#### 遍历字典第一种方式: for in
2
for key in dict1:  # 遍历字典中所有的key
3
    print(key)
4

5
# 第二种方式:遍历 字典中所有的值
6
for v in dict1.values():
7
    print(v)
8

9
# 第三种方式: items  遍历字典中所有的key和value
10
for k,v in dict1.items():
11
    print(k,'----',v)

合并字典

1
dict2 = {"name":"刘哥","money":"1999","age":23}
2
dict3 = {"sex":"男"}
3
dict2.update(dict3)
4
print(dict2)#{'name': '刘哥', 'money': '1999', 'age': 23, 'sex': '男'}

赋值深拷贝浅拷贝

1
# 赋值: 其实就是对象的引用(别名)
2
list = [12,34,57,9]
3
list1 = list
4
list[1] = 78
5
print(list,list1) #[12, 78, 57, 9] [12, 78, 57, 9]
6

7
# 浅拷贝: 拷贝父对象,不会拷贝对象内部的子对象.浅拷贝一维列表的时候,前后两个列表是独立的.
8
import copy
9
a = [12,35,98,23]  # 一维列表
10
b = a.copy()
11
a[1] = 67  #[12, 67, 98, 23] [12, 35, 98, 23]
12
print(a,b)
13

14
# 浅拷贝在拷贝二维列表的时候,只能拷贝最外层列表,不能拷贝父对象中的子对象,当修改子对象中的值的时候,新拷贝的对象也会发生变化
15
c = [14,53,25,[31,89,26],42] # 二维列表
16
d = c.copy()
17
c[3][1] = 11  #[14, 53, 25, [31, 11, 26], 42]   [14, 53, 25, [31, 11, 26], 42]
18
print(c,d)
19

20
# 若要解决浅拷贝处理二维列表时的问题,需要使用深拷贝解决
21
e = [14,53,25,[31,89,26],42] # 二维列表
22
f = copy.deepcopy(e)  #[14, 53, 25, [31, 11, 26], 42] [14, 53, 25, [31, 89, 26], 42]
23
e[3][1] = 11                         #两个列表是独立的
24
print(e,f)

展开收起

str字符串

创建字符串

1
# 字符串的定义：可以使用一对单引号或者双引号，也可以一对三个单引号或者一对三个双引号定义字符串。
2
# 创建字符串
3
str = "apple"
4
str1 = 'orange'
5
print(type(str), type(str1))
6

7
# \ 转义字符  作用:让一些符号失去原有的意义
8
str2 = "\"张三\""
9
str3 = '\'李四\''
10
print(str2, str3)
11

12
# 定义字符串的时候,单双引号可以互相嵌套
13
str4 = "张哥,'有点厉害'"
14
print(str4)
15

16
# 字符串前加 r
17
# r"" 的作用是去除转义字符.
18
# 即如果是“\n”那么表示一个反斜杠字符，一个字母n，而不是表示换行了。
19
# 以r开头的字符，常用于正则表达式，对应着re模块。
20
s = r'C:\Users\ijeff\Desktop\笔记'

展开收起

遍历字符串

1
# 第一种方式: for in
2
for i in str4:
3
    print(i)
4

5
# 第二种方式: 通过下标
6
for i in range(len(str4)):
7
    print(str4[i])
8

9
# 第三种方式:enumrate()
10
for i,v in enumerate(str4):
11
    print(i,v,end=" ")

字符串拼接重复

1
#字符串拼接
2
str5 = "welcome to "
3
str6 = " china"
4
num = 19
5
print(str5 + str6)
6
# print(str5 + num)   # 注意,+ 只能用于字符串和字符串之间进行拼接
7

8
#字符串重复
9
print(str*5)

字符串截取和判定存在

1
#字符串截取
2
ss1 = "good good study,day day up"
3
print(ss1[1:6])  # ood g
4
print(ss1[2:])   # od good study,day day up从下标2切到末尾
5
print(ss1[:9])   # good good从开头切到下标9
6
print(ss1[-1])   # p    省略 → 到末尾
7
print(ss1[1::2]) # odgo td,a a p   # 将步长设置为2
8
print(ss1[::-1])  # pu yad yad,yduts doog doog   # 将字符串实现翻转
9

10
#判断字符是否存在
11
#判断指定元素是否在字符串中  成员运算符 in 或者 not in
12
print("good" in ss1)
13
if "love" in ss1:
14
    print("终于找到了真爱")
15
else:
16
    print("继续寻觅吧!!")

展开收起

常用功能

获取长度和次数

1
str4 = "张哥,'有点厉害'"
2
# 获取字符串的长度 len()
3
print(len(str4))
4

5
# count() 在整个字符串中查找子字符串出现的次数
6
str = "电脑卡了,ss电脑呢?"
7
print(str.count("电脑"))   # 2

大小写转换

1
# 2.字符串大小写转换  upper() lower()
2
# upper()将字符串中的小写字母转换为大写
3
str1 = "i Miss you Very Much!"
4
print(str1.upper())  # I MISS YOU VERY MUCH!
5

6
# lower() 将字符串中的大写字母转化为小写
7
print(str1.lower())  # i miss you very much!
8

9
# swapcase   将字符串中的大写转换为小写,将小写转换为大写
10
print(str1.swapcase())  # I mISS YOU vERY mUCH!
11

12
# title()  将英文中每个单词的首字母转换为大写
13
str2 = "i love you forever!"
14
print(str2.title())  #   I Love You Forever!

查找

1
# find() 查找子串在字符串中第一次出现的位置, 返回的是下标,若未找到返回-1
2
ss3 = "123asdfASDCXaZ8765sahbzcd6a79"
3
print(ss3.find("a"))  # 3
4
print(ss3.find("y"))  # -1  未找到子串,返回-1
5
# 在指定区间内查找
6
print(ss3.find("a",5,20))  # 12
7

8
# rfind 查找子串在字符串中最后一次出现的位置,返回的是下标,若未找到返回-1
9
print(ss3.rfind("a"))  # 25
10
print(ss3.rfind("y"))  # -1
11

12
# index() 功能和find类似  在字符串中未找到的时候,直接报错 (了解)
13
print(ss3.index("d"))  # 5
14
# print(ss3.index("y"))  # ValueError: substring not found

替换

1
# 替换
2
# replace() 对字符串中的数据进行替换
3
ss9 = "国家主席习近平,习近平是一个伟人,我们感谢习近平主席"
4
print(ss9)
5
print(ss9.replace("习近平","***"))
6
# 控制替换的字符的次数
7
print(ss9.replace("习近平","***",2))

判断(重点)

1
# 字符串判断
2
# isupper() 检测字符串中的字母是否全部大写
3
print("ASDqwe123".isupper())  # False
4
print("ASD123".isupper())  # True
5

6
# islower() 检测字符串中的字母是否全部小写
7
print("ASDqwe123".islower())  # False
8
print("qwe123".islower())  # True
9

10
# isdigit() 检测字符串是否只由数字组成
11
print("1234".isdigit())  #True
12
print("1234asd".isdigit())  # False
13

14
#istitle()  检测字符串中的首字母是否大写
15
print("Hello World".istitle()) # True
16
print("hello everybody".istitle())  # False
17

18
# isalpha() 检测字符串是否只由字母和文字组成
19
print("你好everyone".isalpha())  # True
20
print("你好everyone123".isalpha())  # False

展开收起

数学功能

html&css

Mon, 20 Apr 2026 18:19:03 GMT

🥧前端学习之路开启

javascript

Mon, 20 Apr 2026 18:19:03 GMT

🥧前端学习之路开启

开发者工具提示信息功能添加教程

Sun, 07 Jun 2026 00:00:00 GMT

一、功能介绍

开发者工具提示信息功能是一种当用户按下快捷键打开浏览器开发者工具时，自动弹出提示信息的功能。

功能作用

作用	说明
提醒用户合法使用开发者工具	告知用户网站的使用规范
保护网站内容不被随意复制	起到一定的威慑作用
展示网站使用条款	明确网站的使用规则
提升用户体验	友好的提示而非强制阻止

功能特点

✅ 支持所有主流浏览器（Chrome、Firefox、Edge、Safari）
✅ 响应式设计，适配各种屏幕尺寸
✅ 支持暗色模式
✅ 可自定义提示信息内容
✅ 可配置显示时长
✅ 仅在首次打开开发者工具时显示
✅ 不影响正常开发工作

二、实现原理

该功能通过监听键盘事件来检测用户是否按下了打开开发者工具的快捷键，当检测到快捷键时，动态创建一个提示框并显示给用户。

监听的快捷键

快捷键	浏览器
F12	所有浏览器通用
Ctrl+Shift+I	检查元素
Ctrl+Shift+J	打开控制台
Ctrl+Shift+C	元素选择器
Cmd+Option+I	Mac 系统
Cmd+Option+J	Mac 系统
Cmd+Option+C	Mac 系统

工作流程

1
用户按下快捷键
2
    ↓
3
检测到开发者工具快捷键
4
    ↓
5
首次显示？→ 是 → 显示提示框
6
    ↓
7
显示进度条动画
8
    ↓
9
动画结束，隐藏提示框

三、完整代码实现

步骤 1：创建组件文件

在项目中创建以下文件：

1
src/components/features/DevToolsWarning.astro

完整代码：

1
---
2
import { siteConfig } from "@/config";
3

4
const devtoolsWarning = siteConfig.devtoolsWarning || false;
5
---
6

7
<script is:inline define:vars={{ devtoolsWarning }}>
8
  (function () {
9
    const style = document.createElement("style");
10
    style.textContent = `
11
    #devtools-warning {
12
      position: fixed;
13
      top: 20px;
14
      left: 50%;
15
      transform: translateX(-50%) translateY(-150px);
16
      background: var(--card-bg, #fff);
17
      color: var(--text-primary, #1f2937);
18
      padding: 0;
19
      border-radius: 12px;
20
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
21
      transition: transform 0.3s ease, opacity 0.3s ease;
22
      z-index: 999999;
23
      font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
24
      min-width: 320px;
25
      max-width: 400px;
26
      overflow: hidden;
27
      opacity: 0;
28
      pointer-events: none;
29
      border: 1px solid var(--line-divider, rgba(0,0,0,0.05));
30
    }
31

32
    :root.dark #devtools-warning {
33
      background: var(--card-bg, #1f2937);
34
      color: var(--text-primary, #f9fafb);
35
      border-color: var(--line-divider, rgba(255,255,255,0.1));
36
    }
37

38
    #devtools-warning.show {
39
      transform: translateX(-50%) translateY(0);
40
      opacity: 1;
41
    }
42

43
    #devtools-warning.hide {
44
      transform: translateX(-50%) translateY(-150px);
45
      opacity: 0;
46
    }
47

48
    #devtools-warning-content {
49
      padding: 16px 20px;
50
      display: flex;
51
      align-items: center;
52
      gap: 12px;
53
    }
54

55
    #devtools-warning-icon {
56
      width: 28px;
57
      height: 28px;
58
      flex-shrink: 0;
59
      background: #fbbf24;
60
      border-radius: 50%;
61
      display: flex;
62
      align-items: center;
63
      justify-content: center;
64
      color: #fff;
65
      font-size: 16px;
66
      font-weight: bold;
67
      line-height: 1;
68
    }
69

70
    #devtools-warning-text {
71
      flex: 1;
72
      font-size: 14px;
73
      font-weight: 500;
74
      line-height: 1.4;
75
      color: var(--text-primary, #1f2937);
76
    }
77

78
    :root.dark #devtools-warning-text {
79
      color: var(--text-primary, #f9fafb);
80
    }
81

82
    #devtools-warning-progress {
83
      height: 3px;
84
      background: var(--line-divider, rgba(0,0,0,0.05));
85
      width: 100%;
86
      position: relative;
87
      overflow: hidden;
88
    }
89

90
    :root.dark #devtools-warning-progress {
91
      background: var(--line-divider, rgba(255,255,255,0.1));
92
    }
93

94
    #devtools-warning-progress-bar {
95
      position: absolute;
96
      top: 0;
97
      left: 0;
98
      height: 100%;
99
      width: 100%;
100
      background: var(--primary, #6366f1);
101
      transform-origin: left;
102
      transform: scaleX(1);
103
    }
104

105
    #devtools-warning-progress-bar.animate {
106
      animation: shrink ${devtoolsWarning.time}s linear forwards;
107
    }
108

109
    @keyframes shrink {
110
      from { transform: scaleX(1); }
111
      to { transform: scaleX(0); }
112
    }
113
  `;
114
    document.head.appendChild(style);
115

116
    const warning = document.createElement("div");
117
    warning.id = "devtools-warning";
118
    warning.innerHTML = `
119
    <div id="devtools-warning-content">
120
      <div id="devtools-warning-icon">!</div>
121
      <div id="devtools-warning-text">${devtoolsWarning.message || "检测到开发者工具已打开"}</div>
122
    </div>
123
    <div id="devtools-warning-progress">
124
      <div id="devtools-warning-progress-bar"></div>
125
    </div>
126
  `;
127
    document.body.appendChild(warning);
128

129
    let hasShown = false;
130

131
    function showWarning() {
132
      if (hasShown) return;
133
      hasShown = true;
134
      const progressBar = warning.querySelector("#devtools-warning-progress-bar");
135
      warning.classList.add("show");
136
      progressBar.classList.add("animate");
137

138
      const onProgressComplete = () => {
139
        warning.classList.remove("show");
140
        warning.classList.add("hide");
141
        setTimeout(() => warning.remove(), 300);
142
      };
143
      progressBar.addEventListener("animationend", onProgressComplete, { once: true });
144
    }
145

146
    document.addEventListener("keydown", (e) => {
147
      if (hasShown) return;
148
      if (e.key === "F12") {
149
        showWarning();
150
        return;
151
      }
152
      if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "I") {
153
        showWarning();
154
        return;
155
      }
156
      if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "J") {
157
        showWarning();
158
        return;
159
      }
160
      if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "C") {
161
        showWarning();
162
        return;
163
      }
164
      if (e.metaKey && e.altKey && e.key.toUpperCase() === "I") {
165
        showWarning();
166
        return;
167
      }
168
      if (e.metaKey && e.altKey && e.key.toUpperCase() === "J") {
169
        showWarning();
170
        return;
171
      }
172
      if (e.metaKey && e.altKey && e.key.toUpperCase() === "C") {
173
        showWarning();
174
        return;
175
      }
176
    });
177
  })();
178
</script>

展开收起

步骤 2：修改配置类型

打开 src/types/config.ts，在 SiteConfig 类型中添加：

1
// 开发者工具提示信息配置
2
devtoolsWarning?: {
3
  enable: boolean; // 是否启用
4
  message?: string; // 提示信息内容，留空为默认
5
  time?: number; // 提示信息显示时间，单位秒
6
};

步骤 3：添加配置

打开 src/config/siteConfig.ts，在配置对象中添加：

1
// 开发者工具提示信息配置
2
devtoolsWarning: {
3
  enable: true, // 是否启用
4
  message: "请按本站规定合法使用开发者工具", // 提示信息内容
5
  time: 3, // 提示信息显示时间，单位秒
6
},

步骤 4：在布局中使用组件

打开 src/layouts/MainGridLayout.astro，添加导入和使用：

导入组件：

1
---
2
import DevToolsWarning from "@components/features/DevToolsWarning.astro";
3
// ... 其他导入
4
---

使用组件：

1
{siteConfig.devtoolsWarning?.enable && <DevToolsWarning />}

四、配置说明

配置参数

参数	类型	默认值	说明
enable	boolean	true	是否启用功能
message	string	”检测到开发者工具已打开”	提示信息内容
time	number	3	显示时间（秒）

自定义提示信息

修改 message 字段来自定义提示信息：

1
devtoolsWarning: {
2
  enable: true,
3
  message: "你的自定义提示信息",
4
  time: 3
5
}

自定义显示时长

修改 time 字段来设置显示时长（单位：秒）：

1
devtoolsWarning: {
2
  enable: true,
3
  message: "提示信息",
4
  time: 5 // 显示5秒
5
}

禁用功能

将 enable 设置为 false：

1
devtoolsWarning: {
2
  enable: false
3
}

五、使用方法

启用功能

确保 devtoolsWarning.enable 设置为 true
重新构建或重启开发服务器

测试功能

打开浏览器访问博客
按下 F12 或 Ctrl+Shift+I
观察页面顶部是否弹出提示框

查看效果

提示框从顶部滑入
显示配置的提示信息
底部有进度条动画
动画结束后自动隐藏

六、注意事项

1. 浏览器兼容性

该功能在以下浏览器中测试通过：

浏览器	支持情况
Chrome	✅ 完全支持
Firefox	✅ 完全支持
Edge	✅ 完全支持
Safari	✅ 完全支持

2. 快捷键检测限制

由于浏览器安全限制，某些快捷键可能无法被完全拦截：

Ctrl+Shift+I：部分浏览器可能先打开开发者工具再显示提示
F12：大多数浏览器都能正常检测

3. 仅首次显示

功能设计为仅在首次打开开发者工具时显示，避免重复打扰用户。

4. 不影响开发

提示框会自动消失
不阻止开发者工具打开
不影响正常的开发调试工作

5. CSS 变量兼容

组件使用了 CSS 变量，确保主题中定义了以下变量：

--card-bg：卡片背景色
--text-primary：主要文本色
--line-divider：分割线颜色
--primary：主题色

七、常见问题

Q1: 提示框不显示？

可能原因：

配置未正确添加
组件未正确导入
浏览器不支持某些快捷键检测

解决方案：

检查 siteConfig.ts 中的配置
确认组件已正确导入和使用
尝试不同的快捷键测试

Q2: 提示框样式不正确？

可能原因：

CSS 变量未定义
主题样式冲突

解决方案：

检查主题中是否定义了相关 CSS 变量
检查是否有其他样式覆盖

Q3: 每次刷新都显示？

可能原因：

代码中 hasShown 变量每次刷新都会重置

解决方案： 这是正常行为，因为提示框是动态创建的，不会持久化存储。如果需要持久化，可以使用 localStorage。

Q4: 如何修改提示框样式？

解决方案： 修改组件中的 CSS 样式即可，主要样式包括：

1
#devtools-warning {
2
  /* 提示框容器样式 */
3
}
4

5
#devtools-warning-icon {
6
  /* 图标样式 */
7
}
8

9
#devtools-warning-text {
10
  /* 文本样式 */
11
}
12

13
#devtools-warning-progress-bar {
14
  /* 进度条样式 */
15
}

展开收起

八、总结

本教程为 Firefly Astro 博客添加了开发者工具提示信息功能，通过修改 4 个文件实现：

文件	修改内容
`src/components/features/DevToolsWarning.astro`	新建组件文件
`src/types/config.ts`	添加类型定义
`src/config/siteConfig.ts`	添加配置参数
`src/layouts/MainGridLayout.astro`	导入并使用组件

功能特点：

支持所有主流浏览器
响应式设计，适配各种屏幕尺寸
支持暗色模式
可自定义提示信息内容
可配置显示时长
仅在首次打开开发者工具时显示
不影响正常开发工作

现在当用户按下快捷键打开开发者工具时，会看到一个美观的提示框！🎉

恋爱倒计时组件添加教程

Sun, 07 Jun 2026 00:00:00 GMT

一、功能介绍

恋爱倒计时组件是一个浪漫的侧边栏小组件，可以实时显示双方在一起的时间，支持双人头像和个性化问候。

功能特点

✅ 实时计时：每秒更新，显示年、月、天、时、分、秒
✅ 双人头像：显示双方头像和爱心
✅ 个性化问候：显示双方名字
✅ 响应式设计：适配桌面端和移动端
✅ 深色模式支持：自动切换主题样式
✅ Swup 兼容：页面切换时自动更新

二、效果演示

场景	效果
桌面端	显示在右侧边栏，包含双人头像、爱心和计时器
移动端	显示在页面底部，宽度自适应
深色模式	自动切换深色主题

三、涉及的文件

整个组件涉及 5 个文件：

文件	路径	说明
组件本身	`src/components/widget/RelationshipTimer.astro`	核心组件代码
配置文件	`src/config/relationshipConfig.ts`	双方信息配置
类型定义	`src/types/config.ts`	添加 `relationship` 类型
侧边栏映射	`src/components/layout/SideBar.astro`	注册组件
侧边栏配置	`src/config/sidebarConfig.ts`	启用组件

四、完整代码实现

步骤 1：创建组件文件

创建 src/components/widget/RelationshipTimer.astro：

1
<!-- 恋爱倒计时组件 -->
2
---
3
import WidgetLayout from "@/components/common/WidgetLayout.astro";
4
import { relationshipConfig } from "@/config/relationshipConfig";
5

6
const config = relationshipConfig;
7

8
interface Props {
9
  class?: string;
10
  style?: string;
11
}
12
const className = Astro.props.class;
13
const style = Astro.props.style;
14
---
15

16
<WidgetLayout
17
  name={config.title || "恋爱时光"}
18
  id="relationship"
19
  class={className}
20
  style={style}
21
>
22
  <div class="flex flex-col items-center p-2">
23
    <!-- 顶部名称栏 -->
24
    <div class="flex items-center justify-center gap-2 mb-4 text-sm font-medium text-neutral-600 dark:text-neutral-400">
25
      <span>{config.name1}</span>
26
      <span class="text-red-500 animate-pulse">❤️</span>
27
      <span>{config.name2}</span>
28
    </div>
29

30
    <!-- 头像和爱心 -->
31
    <div class="flex items-center justify-center gap-4 mb-6">
32
      <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white dark:border-neutral-800 shadow-md transition-transform hover:scale-110">
33
        <img src={config.avatar1} alt={config.name1} class="w-full h-full object-cover" />
34
      </div>
35
      <div class="text-2xl text-red-500 transform transition-all hover:scale-125 hover:rotate-12 cursor-pointer">
36
        ❤️
37
      </div>
38
      <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white dark:border-neutral-800 shadow-md transition-transform hover:scale-110">
39
        <img src={config.avatar2} alt={config.name2} class="w-full h-full object-cover" />
40
      </div>
41
    </div>
42

43
    <!-- 计时器 -->
44
    <div class="relationship-timer flex items-center justify-center gap-x-1 text-sm whitespace-nowrap overflow-x-auto">
45
      <span class="timer-num" data-timer-years>0</span><span class="timer-unit bg-red-400">年</span>
46
      <span class="timer-num" data-timer-months>0</span><span class="timer-unit bg-red-300">月</span>
47
      <span class="timer-num" data-timer-days>0</span><span class="timer-unit bg-blue-400">天</span>
48
      <span class="timer-num" data-timer-hours>0</span><span class="timer-unit bg-orange-400">时</span>
49
      <span class="timer-num" data-timer-minutes>0</span><span class="timer-unit bg-blue-500">分</span>
50
      <span class="timer-num" data-timer-seconds>00</span><span class="timer-unit bg-purple-400">秒</span>
51
    </div>
52
  </div>
53
</WidgetLayout>
54

55
<style>
56
  @reference "tailwindcss";
57

58
  .timer-num {
59
    @apply font-bold text-neutral-700 dark:text-neutral-200 min-w-[0rem] text-center;
60
    color: var(--primary);
61
  }
62
  .timer-unit {
63
    @apply px-1 py-0.5 rounded text-[10px] text-white font-medium shrink-0;
64
  }
65
</style>
66

67
<script is:inline define:vars={{ startDateStr: config.startDate }}>
68
  function updateRelationshipTimer() {
69
    const startDate = new Date(startDateStr);
70
    const now = new Date();
71

72
    let diff = now.getTime() - startDate.getTime();
73

74
    if (diff < 0) return;
75

76
    // 计算年月日时分秒的差值
77
    let years = now.getFullYear() - startDate.getFullYear();
78
    let months = now.getMonth() - startDate.getMonth();
79
    let days = now.getDate() - startDate.getDate();
80
    let hours = now.getHours() - startDate.getHours();
81
    let minutes = now.getMinutes() - startDate.getMinutes();
82
    let seconds = now.getSeconds() - startDate.getSeconds();
83

84
    // 处理借位逻辑
85
    if (seconds < 0) {
86
      seconds += 60;
87
      minutes--;
88
    }
89
    if (minutes < 0) {
90
      minutes += 60;
91
      hours--;
92
    }
93
    if (hours < 0) {
94
      hours += 24;
95
      days--;
96
    }
97
    if (days < 0) {
98
      const lastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
99
      days += lastMonth.getDate();
100
      months--;
101
    }
102
    if (months < 0) {
103
      months += 12;
104
      years--;
105
    }
106

107
    // 更新所有实例，避免移动端和电脑端 ID 冲突
108
    const update = (attr, value) => {
109
      const elements = document.querySelectorAll(`[data-timer-${attr}]`);
110
      elements.forEach(el => {
111
        el.innerText = value;
112
      });
113
    };
114

115
    update('years', years);
116
    update('months', months);
117
    update('days', days);
118
    update('hours', hours);
119
    update('minutes', minutes);
120
    update('seconds', seconds.toString().padStart(2, '0'));
121
  }
122

123
  // 立即运行并每秒更新
124
  updateRelationshipTimer();
125
  if (!window.relationshipTimerInterval) {
126
    window.relationshipTimerInterval = setInterval(updateRelationshipTimer, 1000);
127
  }
128

129
  // 监听 Swup 页面切换
130
  document.addEventListener('swup:content:replace', updateRelationshipTimer);
131
</script>

展开收起

步骤 2：创建配置文件

创建 src/config/relationshipConfig.ts：

1
import type { RelationshipConfig } from "../types/config";
2

3
export const relationshipConfig: RelationshipConfig = {
4
  // 恋爱开始日期
5
  startDate: "2026-01-06",
6
  // 双方名称
7
  name1: "---------TSH",
8
  name2: "CXY---------",
9
  // 双方头像
10
  avatar1: "https://re.tsh520.cn/zl/tsh.jpg",
11
  avatar2: "https://re.tsh520.cn/zl/cxy.jpg",
12
  // 小组件标题
13
  title: "我和宝宝在一起已经",
14
};

步骤 3：修改类型定义

打开 src/types/config.ts，添加以下内容：

添加到 WidgetComponentType：

1
// 组件配置类型定义
2
export type WidgetComponentType =
3
  | "profile"
4
  | "announcement"
5
  | "categories"
6
  | "tags"
7
  | "sidebarToc"
8
  | "advertisement"
9
  | "stats"
10
  | "calendar"
11
  | "music"
12
  | "relationship";  // 新增

添加 RelationshipConfig 类型：

1
// 恋爱倒计时配置
2
export type RelationshipConfig = {
3
  startDate: string; // 恋爱开始日期，格式：YYYY-MM-DD
4
  name1: string; // 第一个人的名字
5
  name2: string; // 第二个人的名字
6
  avatar1: string; // 第一个人的头像 URL
7
  avatar2: string; // 第二个人的头像 URL
8
  title?: string; // 小组件标题
9
};

步骤 4：修改侧边栏组件映射

打开 src/components/layout/SideBar.astro：

添加导入：

1
---
2
import RelationshipTimer from "@/components/widget/RelationshipTimer.astro";
3
// ... 其他导入
4
---

添加到组件映射表：

1
// 组件映射表
2
const componentMap = {
3
  // ... 其他组件
4
  relationship: RelationshipTimer,
5
} satisfies Record<WidgetComponentType, typeof Profile>;

步骤 5：修改侧边栏配置

打开 src/config/sidebarConfig.ts，在 rightComponents 中添加：

1
// 右侧边栏组件配置列表
2
rightComponents: [
3
  // ... 其他组件
4
  {
5
    // 组件类型：恋爱计时组件
6
    type: "relationship",
7
    // 是否启用该组件
8
    enable: true,
9
    // 组件位置
10
    position: "top",
11
    // 是否在文章详情页显示
12
    showOnPostPage: true,
13
  },
14
  // ... 其他组件
15
],

展开收起

在 mobileBottomComponents 中添加：

1
// 移动端底部组件配置列表
2
mobileBottomComponents: [
3
  // ... 其他组件
4
  {
5
    // 组件类型：恋爱计时组件
6
    type: "relationship",
7
    // 是否启用该组件
8
    enable: true,
9
    // 是否在文章详情页显示
10
    showOnPostPage: true,
11
  },
12
  // ... 其他组件
13
],

五、配置说明

配置参数

参数	类型	必填	说明
startDate	string	✅	恋爱开始日期，格式：YYYY-MM-DD
name1	string	✅	第一个人的名字
name2	string	✅	第二个人的名字
avatar1	string	✅	第一个人的头像 URL
avatar2	string	✅	第二个人的头像 URL
title	string	❌	小组件标题，默认”恋爱时光”

自定义配置

修改 src/config/relationshipConfig.ts 文件：

1
export const relationshipConfig: RelationshipConfig = {
2
  startDate: "2024-02-14",        // 修改为你的恋爱开始日期
3
  name1: "小明",                  // 修改为第一个人的名字
4
  name2: "小红",                  // 修改为第二个人的名字
5
  avatar1: "/images/avatar1.jpg", // 修改为第一个人的头像
6
  avatar2: "/images/avatar2.jpg", // 修改为第二个人的头像
7
  title: "我们在一起已经",        // 修改为自定义标题
8
};

六、使用方法

启用组件

确保 sidebarConfig.ts 中 relationship 组件的 enable 设置为 true
重新构建或重启开发服务器

查看效果

访问博客首页
查看右侧边栏（桌面端）或页面底部（移动端）
应该能看到恋爱倒计时组件

测试功能

✅ 计时器每秒更新
✅ 鼠标悬停头像有放大效果
✅ 鼠标悬停爱心有旋转效果
✅ 深色模式自动切换

七、注意事项

1. 日期格式

startDate 必须使用 YYYY-MM-DD 格式，例如：

✅ 正确："2026-01-06"
❌ 错误："2026/01/06" 或 "01-06-2026"

2. 头像图片

使用网络图片 URL（推荐）
或使用本地图片路径（放在 public 目录下）
建议使用正方形图片，效果最佳

3. 组件位置

组件可以配置在以下位置：

位置	说明
`top`	固定在顶部
`sticky`	粘性定位，跟随滚动

4. 显示页面

可以通过 showOnPostPage 和 showOnNonPostPage 控制显示页面：

showOnPostPage: true - 在文章详情页显示
showOnNonPostPage: true - 在非文章详情页显示

5. Swup 兼容

组件已适配 Swup 的 SPA 导航，页面切换时会自动更新计时器。

八、常见问题

Q1: 计时器不显示？

可能原因：

组件未正确注册
配置文件未创建
enable 设置为 false

解决方案：

检查 SideBar.astro 中是否导入了组件
检查 sidebarConfig.ts 中是否启用了组件
确认 relationshipConfig.ts 文件存在

Q2: 头像不显示？

可能原因：

图片 URL 错误
图片跨域问题
图片路径错误

解决方案：

检查图片 URL 是否正确
尝试使用网络图片 URL
检查浏览器控制台是否有错误

Q3: 计时器数字不更新？

可能原因：

JavaScript 执行错误
定时器未启动

解决方案：

检查浏览器控制台是否有错误
刷新页面重试
检查 startDate 格式是否正确

Q4: 如何修改计时器样式？

解决方案： 修改组件中的 <style> 部分：

1
.timer-num {
2
  /* 数字样式 */
3
  color: var(--primary);
4
}
5

6
.timer-unit {
7
  /* 单位标签样式 */
8
  background: #ef4444;
9
}

Q5: 如何禁用此功能？

解决方案： 在 sidebarConfig.ts 中将 enable 设置为 false：

1
{
2
  type: "relationship",
3
  enable: false,  // 禁用组件
4
  // ...
5
}

九、总结

恋爱倒计时组件是一个浪漫的侧边栏小组件，通过修改 5 个文件实现：

文件	修改内容
`src/components/widget/RelationshipTimer.astro`	新建组件文件
`src/config/relationshipConfig.ts`	新建配置文件
`src/types/config.ts`	添加类型定义
`src/components/layout/SideBar.astro`	注册组件
`src/config/sidebarConfig.ts`	启用组件

功能特点：

实时计时：每秒更新
双人头像：显示双方头像和爱心
个性化问候：显示双方名字
响应式设计：适配桌面端和移动端
深色模式支持：自动切换主题样式
Swup 兼容：页面切换时自动更新

配置简单，只需修改 relationshipConfig.ts 文件即可自定义双方信息！🎉

WelcomeToast 欢迎弹窗组件实现教程

Sun, 07 Jun 2026 00:00:00 GMT

一、功能介绍

WelcomeToast 是一个轻量级的欢迎弹窗组件，当访客第一次打开页面时，右下角会弹出一个欢迎卡片，支持 IP 地理位置的个性化问候，5 秒后自动消失。

功能特点

✅ 首次访问弹出：使用 sessionStorage 去重，每个会话只弹一次
✅ IP 地理位置问候：自动获取访客位置，显示个性化问候
✅ 自动消失：5 秒后自动关闭，不打扰用户
✅ 手动关闭：支持点击关闭按钮提前关闭
✅ 响应式设计：适配桌面端和移动端
✅ 深色模式支持：自动切换主题样式
✅ Swup 兼容：完美适配 SPA 客户端路由

二、效果演示

场景	效果
桌面端	固定在右下角，显示欢迎卡片
移动端	固定在底部居中，宽度 90%
深色模式	自动切换深色主题
首次访问	显示 IP 地理位置问候
重复访问	不再弹出（会话内）

三、涉及的文件

整个组件涉及两个文件：

文件	路径
组件本身	`src/components/WelcomeToast.astro`
在布局中引用	`src/layouts/MainGridLayout.astro`

四、组件实现原理

组件特点

组件的 frontmatter 是空的，没有任何服务端逻辑。所有事情都在浏览器端的 <script> 和 <style> 里完成。

页面结构

组件本身不输出任何 HTML，所有 DOM 都是 JS 动态生成的。结构大概是这样：

1
#welcome-toast（固定在右下角，z-50）
2
└── 一个卡片 div（白色背景、圆角、阴影）
3
    ├── 👋 表情
4
    ├── 文字区
5
    │   ├── 问候语（一开始显示"正在加载..."，后面会变成具体地址）
6
    │   └── 副标题"欢迎来到我的博客"
7
    └── 关闭按钮（一个 ×）

五、关键函数说明

整个逻辑不复杂，就是 5 个函数各管各的事：

1. 会话标识

1
// 用 sessionStorage 做会话标识，防止重复弹出
2
const VISIT_SESSION_KEY = 'blog_visit_flag';
3
let hasShownToast = false;

2. createWelcomeToast()

创建 Toast 的 DOM 结构，插入到页面上。

3. closeWelcomeToast()

关掉 Toast：先滑出去，500ms 后把节点从 DOM 里移掉。

4. fetchLocation()

请求一个免费的 IP API，拿到访客的位置信息。

5. showWelcomeToast()

整个弹出流程的”导演”：创建 → 滑入 → 拿位置 → 5秒后自动关闭。

6. initWelcome()

入口函数：判断是不是第一次访问，是的话才弹。

六、完整代码

组件文件

WelcomeToast.astro展开收起

1
---
2
// 空的 frontmatter，所有逻辑都在浏览器端
3
---
4

5
<script is:inline>
6
  const VISIT_SESSION_KEY = 'blog_visit_flag';
7
  let hasShownToast = false;
8

9
  function createWelcomeToast() {
10
    const toast = document.createElement('div');
11
    toast.id = 'welcome-toast';
12
    toast.className = 'welcome-toast';
13
    toast.innerHTML = `
14
      <div class="welcome-toast-card">
15
        <div class="welcome-toast-emoji">👋</div>
16
        <div class="welcome-toast-content">
17
          <div class="welcome-toast-greeting">正在加载...</div>
18
          <div class="welcome-toast-subtitle">欢迎来到我的博客</div>
19
        </div>
20
        <button class="welcome-toast-close" onclick="closeWelcomeToast()">×</button>
21
      </div>
22
    `;
23
    document.body.appendChild(toast);
24
    return toast;
25
  }
26

27
  function closeWelcomeToast() {
28
    const toast = document.getElementById('welcome-toast');
29
    if (toast) {
30
      toast.classList.remove('show');
31
      toast.classList.add('hide');
32
      setTimeout(() => toast.remove(), 500);
33
    }
34
  }
35

36
  async function fetchLocation() {
37
    try {
38
      const response = await fetch('https://ipapi.co/json/');
39
      const data = await response.json();
40
      return {
41
        city: data.city,
42
        region: data.region,
43
        country: data.country_name
44
      };
45
    } catch (error) {
46
      console.error('获取位置信息失败:', error);
47
      return null;
48
    }
49
  }
50

51
  async function showWelcomeToast() {
52
    if (hasShownToast) return;
53
    hasShownToast = true;
54

55
    const toast = createWelcomeToast();
56
    setTimeout(() => toast.classList.add('show'), 100);
57

58
    const location = await fetchLocation();
59
    const greeting = toast.querySelector('.welcome-toast-greeting');
60

61
    if (location) {
62
      greeting.textContent = `你好，来自${location.city || location.region || location.country}的朋友！`;
63
    } else {
64
      greeting.textContent = '你好，欢迎访问！';
65
    }
66

67
    setTimeout(closeWelcomeToast, 5000);
68
  }
69

70
  function initWelcome() {
71
    if (sessionStorage.getItem(VISIT_SESSION_KEY)) return;
72
    sessionStorage.setItem(VISIT_SESSION_KEY, '1');
73
    showWelcomeToast();
74
  }
75

76
  // 兼容 Swup 的 SPA 导航
77
  if (document.readyState === 'loading') {
78
    document.addEventListener('DOMContentLoaded', initWelcome);
79
    document.addEventListener('astro:page-load', initWelcome);
80
  } else {
81
    initWelcome();
82
  }
83

84
  // 挂载到 window 上供内联 onclick 调用
85
  window.closeWelcomeToast = closeWelcomeToast;
86
</script>
87

88
<style>
89
  .welcome-toast {
90
    position: fixed;
91
    bottom: 1rem;
92
    right: 1rem;
93
    z-index: 50;
94
    transform: translateX(120%);
95
    transition: transform 0.5s ease-out;
96
  }
97

98
  .welcome-toast.show {
99
    transform: translateX(0);
100
  }
101

102
  .welcome-toast.hide {
103
    transform: translateX(120%);
104
  }
105

106
  .welcome-toast-card {
107
    background: var(--card-bg, #fff);
108
    border: 1px solid var(--line-divider, rgba(0, 0, 0, 0.1));
109
    border-radius: 12px;
110
    padding: 1rem 1.25rem;
111
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
112
    display: flex;
113
    align-items: center;
114
    gap: 0.75rem;
115
    min-width: 280px;
116
    max-width: 360px;
117
  }
118

119
  .welcome-toast-emoji {
120
    font-size: 1.5rem;
121
    flex-shrink: 0;
122
  }
123

124
  .welcome-toast-content {
125
    flex: 1;
126
    min-width: 0;
127
  }
128

129
  .welcome-toast-greeting {
130
    font-size: 0.875rem;
131
    font-weight: 600;
132
    color: var(--text-primary, #1f2937);
133
    line-height: 1.4;
134
  }
135

136
  .welcome-toast-subtitle {
137
    font-size: 0.75rem;
138
    color: var(--text-secondary, #6b7280);
139
    margin-top: 0.25rem;
140
  }
141

142
  .welcome-toast-close {
143
    background: none;
144
    border: none;
145
    font-size: 1.25rem;
146
    color: var(--text-secondary, #6b7280);
147
    cursor: pointer;
148
    padding: 0.25rem;
149
    line-height: 1;
150
    flex-shrink: 0;
151
    transition: color 0.2s;
152
  }
153

154
  .welcome-toast-close:hover {
155
    color: var(--text-primary, #1f2937);
156
  }
157

158
  /* 深色模式 */
159
  :root.dark .welcome-toast-card {
160
    background: var(--card-bg, #1f2937);
161
    border-color: var(--line-divider, rgba(255, 255, 255, 0.1));
162
  }
163

164
  :root.dark .welcome-toast-greeting {
165
    color: var(--text-primary, #f9fafb);
166
  }
167

168
  :root.dark .welcome-toast-subtitle {
169
    color: var(--text-secondary, #9ca3af);
170
  }
171

172
  :root.dark .welcome-toast-close {
173
    color: var(--text-secondary, #9ca3af);
174
  }
175

176
  :root.dark .welcome-toast-close:hover {
177
    color: var(--text-primary, #f9fafb);
178
  }
179

180
  /* 移动端适配 */
181
  @media (max-width: 640px) {
182
    .welcome-toast {
183
      bottom: 1rem;
184
      left: 50%;
185
      right: auto;
186
      transform: translateX(-50%) translateY(120%);
187
    }
188

189
    .welcome-toast.show {
190
      transform: translateX(-50%) translateY(0);
191
    }
192

193
    .welcome-toast.hide {
194
      transform: translateX(-50%) translateY(120%);
195
    }
196

197
    .welcome-toast-card {
198
      width: 90vw;
199
      max-width: none;
200
    }
201
  }
202
</style>

展开收起

七、在布局中使用

导入组件

打开 src/layouts/MainGridLayout.astro，在文件顶部添加导入：

1
---
2
import WelcomeToast from "@components/WelcomeToast.astro";
3
// ... 其他导入
4
---

使用组件

在 <main id="swup-container"> 里面、<slot /> 后面添加：

1
<main id="swup-container" class="transition-main">
2
  <div id="content-wrapper">
3
    <slot></slot>
4
  </div>
5
  <WelcomeToast />
6
</main>

布局层级关系

1
Layout.astro
2
└── MainGridLayout.astro
3
    ├── Navbar（导航栏）
4
    ├── Wallpaper（背景壁纸）
5
    ├── <main id="swup-container">      ← Swup 的容器，导航时会替换这里面的内容
6
    │   ├── <slot>                       ← 每个页面的具体内容
7
    │   └── <WelcomeToast />             ← 放在内容后面
8
    ├── Footer（页脚）
9
    └── FloatingControls（浮动控制按钮）

八、注意事项

1. SPA 导航适配

Firefly 使用了 Swup 做客户端路由，页面切换的时候不会走完整的 DOMContentLoaded。所以组件同时绑了两个事件：

1
if (document.readyState === 'loading') {
2
  document.addEventListener('DOMContentLoaded', initWelcome);
3
  document.addEventListener('astro:page-load', initWelcome);  // Swup 专用
4
} else {
5
  initWelcome();
6
}

2. 内联 onclick 兼容

关闭按钮用的是内联 onclick，所以函数得挂到 window 上才能调用：

1
(window as any).closeWelcomeToast = closeWelcomeToast;

3. 会话去重

靠 sessionStorage 去重：每次 Swup 导航都会重建组件，但因为有 blog_visit_flag 标记，所以不会重复弹出。

4. 无 HTML 输出

构建时没有 HTML 输出：组件只有 <script> 和 <style>，不产生静态 HTML，全靠 JS 在浏览器里创建。

5. 无 Props 依赖

没传任何 props：组件完全是自包含的，不需要从外面传参数。

九、常见问题

Q1: 弹窗不显示？

可能原因：

浏览器禁用了 sessionStorage
IP API 请求失败
页面加载时序问题

解决方案：

检查浏览器设置，确保 sessionStorage 可用
检查网络连接，确保能访问 IP API
检查控制台是否有错误信息

Q2: 地理位置显示不准确？

可能原因：

IP API 返回的数据不准确
访客使用了 VPN 或代理

解决方案： 这是正常现象，IP 定位本身就有一定误差，可以显示更宽泛的地区信息。

Q3: 每次刷新都显示？

可能原因：

sessionStorage 被清空
浏览器隐私模式

解决方案： 这是正常行为，sessionStorage 在关闭浏览器后会清空。如果需要更持久的去重，可以使用 localStorage。

Q4: 如何修改样式？

解决方案： 修改组件中的 <style> 部分即可，主要样式包括：

1
.welcome-toast {
2
  /* 容器样式 */
3
}
4

5
.welcome-toast-card {
6
  /* 卡片样式 */
7
}
8

9
.welcome-toast-greeting {
10
  /* 问候语文本样式 */
11
}

Q5: 如何禁用此功能？

解决方案： 在 MainGridLayout.astro 中注释掉组件导入和使用：

1
{/* import WelcomeToast from "@components/WelcomeToast.astro"; */}
2

3
<main id="swup-container" class="transition-main">
4
  <div id="content-wrapper">
5
    <slot></slot>
6
  </div>
7
  {/* <WelcomeToast /> */}
8
</main>

十、总结

WelcomeToast 是一个轻量级的欢迎弹窗组件，主要特点：

特点	说明
首次访问弹出	使用 sessionStorage 去重
IP 地理位置问候	自动获取访客位置
自动消失	5 秒后自动关闭
手动关闭	支持点击关闭按钮
响应式设计	适配桌面端和移动端
深色模式支持	自动切换主题样式
Swup 兼容	完美适配 SPA 客户端路由

实现原理：

组件是纯客户端渲染，不输出静态 HTML
使用 sessionStorage 做会话级别的去重
通过 IP API 获取访客地理位置
支持 Swup 的 astro:page-load 事件

放在 Firefly 主题的 MainGridLayout 里，和 Swup 的 SPA 导航机制配合得很好。🎉

友链自助申请功能添加教程

Sun, 07 Jun 2026 00:00:00 GMT

一、功能介绍

本教程为 Firefly Astro 博客添加友链自助申请功能，实现两种申请入口：

入口位置	说明
右上角按钮	醒目的主题色按钮，点击直接跳转 GitHub Issue 表单
页面内文字链接	在申请流程步骤中显示，体验友好

功能特点

✅ 不破坏原有布局，不影响任何功能
✅ 适配明暗主题
✅ 支持 GitHub Issue 自动表单
✅ 访客一键提交，方便管理
✅ 全程只需修改 2 个文件 + 创建 1 个模板

二、准备工作

1. 确认 GitHub 仓库地址

你需要准备一个 GitHub Issue 申请地址，格式如下：

1
https://github.com/你的用户名/你的仓库名/issues/new?template=friend-request.yml

例如：

1
https://github.com/fqzlr/Firefly/issues/new?template=friend-request.yml

2. 确保仓库已启用 Issues

在 GitHub 仓库设置中，确保已启用 Issues 功能。

三、添加 GitHub Issue 模板

步骤 1：创建模板目录

1
.github/
2
└── ISSUE_TEMPLATE/
3
    └── friend-request.yml

步骤 2：创建模板文件

创建 .github/ISSUE_TEMPLATE/friend-request.yml 文件，内容如下：

1
name: 友链申请
2
description: 申请添加友情链接
3
title: "【友链申请】"
4
labels: ["友链"]
5
body:
6
  - type: input
7
    id: site_name
8
    attributes:
9
      label: 站点名称
10
      description: 请输入你的站点名称
11
      placeholder: 例如：我的博客
12
    validations:
13
      required: true
14

15
  - type: input
16
    id: site_url
17
    attributes:
18
      label: 站点链接
19
      description: 请输入你的站点 URL（需要 HTTPS）
20
      placeholder: https://example.com
21
    validations:
22
      required: true
23

24
  - type: input
25
    id: site_desc
26
    attributes:
27
      label: 站点描述
28
      description: 请用一句话描述你的站点
29
      placeholder: 一个关于技术分享的个人博客
30
    validations:
31
      required: true
32

33
  - type: input
34
    id: site_avatar
35
    attributes:
36
      label: 站点头像
37
      description: 请输入头像 URL（建议 640x640）
38
      placeholder: https://example.com/avatar.png
39
    validations:
40
      required: true
41

42
  - type: dropdown
43
    id: site_category
44
    attributes:
45
      label: 站点类别
46
      description: 请选择你的站点类别
47
      options:
48
        - 个人博客
49
        - 技术分享
50
        - 生活记录
51
        - 学习笔记
52
        - 作品集
53
        - 其他
54
    validations:
55
      required: true
56

57
  - type: textarea
58
    id: site_content
59
    attributes:
60
      label: 站点内容
61
      description: 请简要描述你站点的主要内容和特色
62
      placeholder: |
63
        我的博客主要分享：
64
        - 前端开发技术
65
        - 编程学习笔记
66
        - 开源项目介绍
67
    validations:
68
      required: false
69

70
  - type: checkboxes
71
    id: confirmation
72
    attributes:
73
      label: 确认事项
74
      description: 请确认以下事项
75
      options:
76
        - label: 我已将本站添加到我的友链页面
77
          required: true
78
        - label: 我的站点支持 HTTPS 访问
79
          required: true
80
        - label: 我的站点内容积极向上，无违法违规内容
81
          required: true

展开收起

四、修改 friends.astro

步骤 1：添加申请链接变量

打开 src/pages/friends.astro，在文件顶部的变量区域（第 42 行左右）添加：

1
// 友链申请链接
2
const friendApplyUrl = "https://github.com/fqzlr/Firefly/issues/new?template=friend-request.yml";

步骤 2：替换标题区域布局

找到页面标题部分（约第 51-69 行），替换为以下代码：

1
<!-- 页面标题和描述 -->
2
<div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between mb-4">
3
  <div>
4
    <div class="flex items-center gap-3 mb-3">
5
      <div class="h-8 w-8 rounded-lg bg-(--primary) flex items-center justify-center text-white dark:text-black/70">
6
        <Icon name="material-symbols:group" class="text-[1.5rem]" />
7
      </div>
8
      <div class="text-3xl font-bold text-neutral-900 dark:text-neutral-100">
9
        {title}
10
      </div>
11
    </div>
12
    {
13
      description && (
14
        <p class="text-base text-neutral-600 dark:text-neutral-400 leading-relaxed">
15
          {description}
16
        </p>
17
      )
18
    }
19
  </div>
20

21
  <!-- 自助申请友链按钮 -->
22
  <div class="flex shrink-0 flex-col items-start gap-2 md:items-end">
23
    <a
24
      href={friendApplyUrl}
25
      target="_blank"
26
      rel="noopener noreferrer"
27
      class="inline-flex items-center gap-2 rounded-lg bg-(--primary) px-4 py-2.5 text-sm font-medium text-white dark:text-black/70 transition-all hover:opacity-90 hover:scale-[1.02] active:scale-[0.98]"
28
    >
29
      <Icon name="material-symbols:add-link-rounded" class="text-lg" />
30
      <span>自助申请友链</span>
31
    </a>
32
    <p class="text-xs text-neutral-500 dark:text-neutral-400 md:text-right">
33
      通过 GitHub Issue 提交，系统会自动校验回链并同步收录
34
    </p>
35
  </div>
36
</div>

展开收起

五、修改 friends.mdx

步骤：添加文字超链接

打开 src/content/spec/friends.mdx，找到 Step 2 部分，将原来的：

1
<p class="font-semibold text-sm mb-1">评论区留言/发送申请邮件至：<code class="px-1.5 py-0.5 rounded bg-black/5 dark:bg-white/10 text-[0.7rem]">{site.email}</code></p>
2
<p class="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed">申请模板，把内容复制修改后到评论区或邮件中发送</p>

替换为：

1
<p class="font-semibold text-sm mb-1">
2
  <a href="https://github.com/fqzlr/Firefly/issues/new?template=friend-request.yml"
3
     target="_blank"
4
     class="inline-block text-(--primary) hover:underline">
5
    自助申请友链
6
  </a>
7
  或评论区留言/发送申请邮件至：<code class="px-1.5 py-0.5 rounded bg-black/5 dark:bg-white/10 text-[0.7rem]">{site.email}</code>
8
</p>
9
<p class="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed">推荐通过 GitHub Issue 提交，系统会自动校验回链；也可使用申请模板，把内容复制修改后到评论区或邮件中发送</p>

六、注意事项

1. 修改 GitHub 地址

将代码中的 https://github.com/fqzlr/Firefly/issues/new?template=friend-request.yml 替换为你自己的 GitHub 仓库地址。

2. CSS 变量问题

如果按钮文字看不见，可能是 CSS 变量问题，可以使用固定色值：

1
class="... bg-blue-500 text-white ..."

3. 跳转 404

检查以下内容：

GitHub 用户名是否正确
仓库名是否正确
yml 模板文件名是否正确（区分大小写）

4. 样式错位

只替换教程里对应的代码块，不要改动其他结构。

5. 图标问题

确保项目中已安装 astro-icon 图标库，并且以下图标可用：

material-symbols:group
material-symbols:add-link-rounded

七、使用方法

访客申请流程

访客打开友链页面
点击右上角「自助申请友链」按钮
跳转到 GitHub Issue 表单
填写站点信息并提交
博主在 GitHub Issues 中查看并审核

博主管理流程

在 GitHub 仓库的 Issues 页面查看新申请
检查申请信息是否完整
确认申请站点已添加本站友链
添加申请站点到友链列表
关闭 Issue 或添加标签

八、最终效果

你的友链页面现在拥有：

✅ 右上角申请按钮：醒目、直观，点击直接跳转
✅ 步骤中的文字链接：流程清晰、体验友好
✅ GitHub Issue 自动表单：信息完整，方便管理
✅ 适配明暗主题：深色/浅色模式都能正常显示

两者配合，访客可以非常方便地提交友链申请，博主也能高效管理友链！

九、常见问题

Q1: 按钮文字看不见？

解决方案： 使用固定色值替代 CSS 变量

1
class="... bg-blue-500 text-white ..."

Q2: 跳转 404？

解决方案： 检查 GitHub 地址是否正确

用户名
仓库名
yml 模板文件名（区分大小写）

Q3: 样式错位？

解决方案： 只替换教程里对应的代码块，不要改动其他结构

Q4: Issue 模板不显示？

解决方案： 确保文件路径正确：.github/ISSUE_TEMPLATE/friend-request.yml

Q5: 如何自定义表单字段？

解决方案： 参考 GitHub Issue 表单文档修改 yml 文件

十、总结

本教程通过修改 2 个文件，为 Firefly Astro 博客添加了友链自助申请功能：

文件	修改内容
`src/pages/friends.astro`	添加申请按钮
`src/content/spec/friends.mdx`	添加文字链接
`.github/ISSUE_TEMPLATE/friend-request.yml`	新增 Issue 模板

功能特点：

不破坏原有布局
适配明暗主题
支持 GitHub Issue 自动表单
访客一键提交，方便管理

现在你的访友链页面更加完善了！🎉

应用页与集成功能完整指南

Fri, 05 Jun 2026 00:00:00 GMT

本文档详细记录了从 Examplefuwari 项目集成到 FireflyBlog 的四大功能，包含完整的文件清单、配置方法和使用说明。

一、功能总览

本次集成共涉及以下功能，所有改动均不改变原有代码结构：

功能	类型	风险等级	说明
双 CDN 图床回退	新增插件	低	主力图床失效时自动切换备用图床
图片懒加载	新增插件	低	Markdown 图片自动添加 loading=“lazy”
IndexNow	新增 API + Action + 脚本	低	一键推送新内容至搜索引擎
文章置顶	已有功能	无	前端已完整实现，无需修改
应用中心	新增页面	低	展示个人应用、工具和服务链接

二、新增文件清单

1
FireflyBlog/
2
├── src/
3
│   ├── plugins/
4
│   │   ├── rehype-image-fallback.mjs    ← 双 CDN 图床回退插件
5
│   │   └── rehype-image-attrs.mjs       ← 图片懒加载插件
6
│   ├── pages/
7
│   │   ├── apps.astro                   ← 应用中心页面
8
│   │   └── api/
9
│   │       └── indexnow.ts              ← IndexNow API 端点
10
├── .github/
11
│   └── workflows/
12
│       └── indexnow.yml                 ← IndexNow GitHub Action
13
├── scripts/
14
│   └── submit-indexnow.mjs              ← IndexNow CLI 提交脚本

三、修改文件清单

文件	改动内容
`astro.config.mjs`	添加两个 rehype 插件导入 + 配置 + sitemap 过滤
`src/types/config.ts`	SiteConfig 添加 `apps` 数组类型 + `pages.apps` 开关
`src/config/siteConfig.ts`	添加 `pages.apps: true` 和 `apps` 示例配置
`src/config/navBarConfig.ts`	”关于”子菜单添加”应用”导航项
`package.json`	添加 `submit-indexnow` 脚本

四、功能详解与使用方法

4.1 双 CDN 图床回退

原理：通过 rehype 插件在 Markdown 渲染时为所有来自主力图床的 <img> 标签添加 onerror 属性，当图片加载失败时自动切换到备用图床。

文件：src/plugins/rehype-image-fallback.mjs

配置方法：

打开 astro.config.mjs，找到 rehypePlugins 数组末尾的 rehypeImageFallback 配置：

astro.config.mjs

1
import rehypeImageFallback from "./src/plugins/rehype-image-fallback.mjs";
2

3
// 在 rehypePlugins 数组中：
4
[
5
  rehypeImageFallback,
6
  {
7
    enable: true,  // ← 改为 true 启用
8
    originalDomain: "你的主力图床域名",  // 例如 "images.example.com"
9
    fallbackDomain: "你的备用图床域名",  // 例如 "backup.example.com"
10
  },
11
],

配置示例：

1
// 假设主力图床是 images.mysite.com，备用是 backup.r2.dev
2
[
3
  rehypeImageFallback,
4
  {
5
    enable: true,
6
    originalDomain: "images.mysite.com",
7
    fallbackDomain: "backup.r2.dev",
8
  },
9
],

工作流程：

1
文章图片: https://images.mysite.com/photo.webp
2
    ↓ 加载失败触发 onerror
3
自动切换: https://backup.r2.dev/photo.webp

注意事项：

仅对 Markdown 内容中的图片生效，不影响 Astro <Image> 组件
主力和备用图床的文件路径结构必须一致
默认关闭（enable: false），需手动开启

4.2 图片懒加载

原理：通过 rehype 插件为 Markdown 渲染输出中所有 <img> 标签自动添加 loading="lazy" 和 decoding="async" 属性，实现原生懒加载。

文件：src/plugins/rehype-image-attrs.mjs

配置方法：

打开 astro.config.mjs，在 rehypePlugins 数组中添加：

astro.config.mjs

1
import rehypeImageAttrs from "./src/plugins/rehype-image-attrs.mjs";
2

3
// 在 rehypePlugins 数组中（建议放在 rehypeImageFallback 之前）：
4
rehypeImageAttrs,

效果：

1
<!-- 渲染前 -->
2
<img src="photo.webp" alt="风景">
3

4
<!-- 渲染后（自动添加） -->
5
<img src="photo.webp" alt="风景" loading="lazy" decoding="async">

注意事项：

仅在属性未设置时才添加，不会覆盖已有属性
不设置 fetchpriority，避免影响 LCP（最大内容绘制）图片
与 ImageWrapper 组件的 loading="lazy" 互不冲突

4.3 IndexNow 集成

原理：IndexNow 是一个即时索引协议，允许网站主动通知搜索引擎（Bing、Yandex、Naver 等）内容已更新，加速搜索引擎收录。

涉及文件：

src/pages/api/indexnow.ts — API 端点
.github/workflows/indexnow.yml — GitHub Action
scripts/submit-indexnow.mjs — CLI 提交脚本
package.json — 添加 submit-indexnow 命令

步骤 1：申请 IndexNow Key

访问 indexnow.org
生成一个 Key（一串随机字符串）
在你的网站根目录放置一个 {key}.txt 文件，内容为 Key 本身
- 例如 Key 为 abc123，则创建 public/abc123.txt，内容为 abc123

步骤 2：配置 GitHub Secrets

在你的 GitHub 仓库中：

进入 Settings → Secrets and variables → Actions
点击 New repository secret
Name: INDEXNOW_KEY
Value: 你申请到的 Key

步骤 3：配置站点 URL

打开 src/pages/api/indexnow.ts，确认以下配置：

1
const baseUrl = "https://f3f3.top";  // ← 改为你的站点 URL

打开 scripts/submit-indexnow.mjs，确认：

1
const host = "f3f3.top";  // ← 改为你的站点域名

步骤 4：验证配置

Terminal window

1
# 本地测试（需要先构建）
2
pnpm build
3
pnpm submit-indexnow
4

5
# 强制提交所有 URL
6
curl -X POST https://你的域名/api/indexnow \
7
  -H "Content-Type: application/json" \
8
  -d '{"force": true}'

GitHub Action 工作流程

1
push 到 master 分支
2
    ↓
3
自动触发 indexnow.yml
4
    ↓
5
安装依赖 → 构建站点 → 恢复缓存 → 增量提交新 URL → 保存缓存

API 端点说明

端点	方法	说明
`/api/indexnow`	POST	提交 URL 到 IndexNow

请求体：

1
{
2
  "force": false  // true=强制提交所有URL，false=仅提交新增URL
3
}

响应示例：

1
{
2
  "success": true,
3
  "message": "URLs submitted to IndexNow successfully (incremental mode)",
4
  "totalUrls": 5,
5
  "newUrls": 2,
6
  "isIncremental": true
7
}

4.4 文章置顶

状态：FireflyBlog 已完整实现，无需额外操作。

使用方法：

在文章的 frontmatter 中添加 pinned: true：

1
---
2
title: 我的置顶文章
3
published: 2026-06-05
4
pinned: true    ← 添加这行
5
tags:
6
  - 博客
7
category: 博客导航
8
---

效果：

置顶文章始终显示在文章列表最前面
文章卡片和文章详情页显示 📌 置顶标记
多篇置顶文章之间按发布日期排序

配置（已预设，无需修改）：

内容 Schema：src/content.config.ts 中 pinned: z.boolean().optional().default(false)
排序逻辑：src/utils/content-utils.ts 中置顶文章优先
UI 组件：PostCard.astro 和 PostMeta.astro 显示置顶标记

4.5 应用中心页面

原理：新增 /apps/ 页面，以网格卡片形式展示个人应用、工具和服务链接。

文件：

src/pages/apps.astro — 页面组件
src/config/siteConfig.ts — 应用数据配置
src/types/config.ts — 类型定义
src/config/navBarConfig.ts — 导航栏配置

步骤 1：添加应用数据

打开 src/config/siteConfig.ts，在 apps 数组中添加你的应用：

src/config/siteConfig.ts展开收起

1
apps: [
2
  {
3
    name: "ChatGPT",
4
    description: "AI 对话助手，支持多模态交互",
5
    url: "https://chat.openai.com",
6
    image: "https://cdn.oaistatic.com/images/favicon-o.svg",
7
    external: true,
8
  },
9
  {
10
    name: "Claude",
11
    description: "Anthropic 出品的 AI 助手",
12
    url: "https://claude.ai",
13
    image: "https://claude.ai/images/branding/claude-logo.svg",
14
    external: true,
15
  },
16
  {
17
    name: "我的工具站",
18
    description: "自研在线工具集合",
19
    url: "/tools/",
20
    image: "/assets/images/tools-icon.webp",
21
    external: false,
22
  },
23
],

展开收起

字段说明

字段	类型	必填	说明
`name`	string	是	应用名称
`description`	string	否	应用简介，支持 2 行截断
`url`	string	是	应用链接地址
`image`	string	是	应用图标 URL（支持网络图片和本地图片）
`external`	boolean	否	是否外部链接（新标签页打开），默认 false

步骤 2：页面开关

在 siteConfig.ts 中控制页面是否启用：

1
pages: {
2
  // ...其他配置
3
  apps: true,  // true=显示，false=隐藏
4
},

关闭后：

访问 /apps/ 返回 404
导航栏不再显示”应用”入口
不出现在 sitemap 中

步骤 3：导航栏位置

默认在”关于”子菜单中。如需修改位置，编辑 src/config/navBarConfig.ts：

1
// 默认位置：关于 → 应用
2
links.push({
3
  name: "关于",
4
  url: "/about/",
5
  children: [
6
    LinkPreset.About,
7
    ...(siteConfig.pages.friends ? [LinkPreset.Friends] : []),
8
    ...(siteConfig.pages.sponsor ? [LinkPreset.Sponsor] : []),
9
    ...(siteConfig.pages.apps ? [{
10
      name: "应用",
11
      url: "/apps/",
12
      icon: "material-symbols:apps",
13
    }] : []),
14
  ],
15
});
16

17
// 如果想放在"动态"子菜单下，将上面的代码移到"动态"的 children 中即可

展开收起

五、配置速查表

astro.config.mjs 完整改动

1
// ===== 新增导入 =====
2
import rehypeImageAttrs from "./src/plugins/rehype-image-attrs.mjs";
3
import rehypeImageFallback from "./src/plugins/rehype-image-fallback.mjs";
4

5
// ===== rehypePlugins 数组末尾添加 =====
6
rehypeImageAttrs,
7
[
8
  rehypeImageFallback,
9
  {
10
    enable: false,           // 改为 true 启用双 CDN 回退
11
    originalDomain: "",       // 填写主力图床域名
12
    fallbackDomain: "",       // 填写备用图床域名
13
  },
14
],
15

16
// ===== sitemap filter 中添加 =====
17
if (pathname === "/apps/" && !siteConfig.pages.apps) {
18
  return false;
19
}

展开收起

siteConfig.ts 完整改动

1
// ===== pages 对象中添加 =====
2
pages: {
3
  // ...已有配置
4
  apps: true,  // 应用中心页面开关
5
},
6

7
// ===== 对象末尾添加（在 lang 之后） =====
8
apps: [
9
  {
10
    name: "应用名称",
11
    description: "应用描述",
12
    url: "https://example.com",
13
    image: "https://example.com/icon.png",
14
    external: true,
15
  },
16
],

展开收起

六、常见问题

Q: 双 CDN 回退不生效？

确认 enable 已设为 true
确认 originalDomain 和 faviconDomain 填写正确
回退仅对 Markdown 内容中的 <img> 标签生效，不适用于 Astro <Image> 组件

Q: IndexNow 提交失败？

确认 GitHub Secrets 中已配置 INDEXNOW_KEY
确认网站根目录有 {key}.txt 文件且内容正确
检查 src/pages/api/indexnow.ts 中的站点 URL 是否正确
IndexNow 支持的搜索引擎：Bing、Yandex、Naver、Seznam 等（不包括 Google）

Q: 应用页面图片显示异常？

网络图片需确保 URL 可访问
本地图片放在 public/ 目录下，以 / 开头引用
图片建议使用正方形（1:1 比例）以获得最佳显示效果

Q: 文章置顶不生效？

确认 frontmatter 中 pinned: true（注意是布尔值，不是字符串 "true"）
确认文章未设置 draft: true（草稿不会显示在列表中）

七、版本信息

集成日期：2026-06-05
参考项目：Examplefuwari (Astro 5.x)
适配版本：FireflyBlog 6.10.5 (Astro 6.3.5)
构建验证：通过 ✅

导航栏模块升级与新增功能

Fri, 29 May 2026 00:00:00 GMT

一、概述

本次对博客导航栏模块进行了五项核心改进，对标参考博客 blog.tsh520.cn 的导航栏实现，全面提升导航栏的功能性和用户体验：

改进项	说明	优先级
分类独立页面	新增 `/categories/` 页面，与归档分离	高
hoverTitle	鼠标悬停 Logo 时标题变化为趣味文字	中
点击触发下拉	桌面端下拉菜单从 hover 改为 click	中
Guestbook 统一	移除重复顶级入口，仅保留在子菜单	低
枚举扩展	LinkPreset 新增 Categories/Books 等	低

二、五层架构总览

导航栏系统由五层架构组成：

1
类型层 (config.ts)          → 定义 TypeScript 类型和枚举
2
  ↓
3
配置层 (navBarConfig.ts)    → 动态生成导航链接
4
  ↓
5
常量层 (link-presets.ts)    → 预设链接映射
6
  ↓
7
组件层 (Navbar.astro 等)    → 渲染 UI 组件
8
  ↓
9
样式层 (navbar.css / main.css) → 视觉呈现

三、改进一：分类独立页面

3.1 背景

原项目只有归档页面（/archive/），分类信息通过 CategoryBar 横向滚动条展示。新增独立分类页面，提供更直观的分类浏览体验。

3.2 新增页面 `src/pages/categories.astro`

1
---
2
import I18nKey from "@i18n/i18nKey";
3
import { i18n } from "@i18n/translation";
4
import { Icon } from "astro-icon/components";
5
import MainGridLayout from "@layouts/MainGridLayout.astro";
6
import { getCategoryList } from "@/utils/content-utils";
7

8
const categories = await getCategoryList();
9
const totalCategories = categories.length;
10
const totalPosts = categories.reduce((sum, cat) => sum + cat.count, 0);
11
---
12

13
<MainGridLayout title={i18n(I18nKey.categories)}>
14
    <div class="card-base p-6 md:p-8 onload-animation">
15
        <!-- 标题区域 -->
16
        <div class="flex items-center gap-3 mb-6">
17
            <div class="flex items-center justify-center w-12 h-12
18
                        rounded-xl bg-(--primary) text-white">
19
                <Icon name="material-symbols:folder-open" class="text-[1.5rem]" />
20
            </div>
21
            <div>
22
                <h1 class="text-2xl font-bold text-black/90 dark:text-white/90">
23
                    {i18n(I18nKey.categories)}
24
                </h1>
25
                <p class="text-sm text-black/50 dark:text-white/50">
26
                    共 {totalCategories} 个分类，{totalPosts} 篇文章
27
                </p>
28
            </div>
29
        </div>
30

31
        <!-- 分类网格 -->
32
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
33
            {categories.map((cat) => (
34
                <a
35
                    href={`/archive/?category=${encodeURIComponent(cat.name)}`}
36
                    class="group card-base p-4 transition-all duration-200
37
                           hover:translate-y-[-2px] hover:shadow-lg"
38
                >
39
                    <div class="flex items-center gap-3">
40
                        <div class="flex items-center justify-center w-10 h-10
41
                                    rounded-lg bg-(--primary)/10 text-(--primary)
42
                                    group-hover:bg-(--primary) group-hover:text-white
43
                                    transition-all duration-200">
44
                            <Icon name="material-symbols:folder" class="text-[1.25rem]" />
45
                        </div>
46
                        <div class="flex-1 min-w-0">
47
                            <h3 class="font-bold text-black/80 dark:text-white/80
48
                                       truncate group-hover:text-(--primary) transition-colors">
49
                                {cat.name}
50
                            </h3>
51
                            <p class="text-xs text-black/40 dark:text-white/40">
52
                                {cat.count} 篇文章
53
                            </p>
54
                        </div>
55
                        <Icon
56
                            name="material-symbols:chevron-right-rounded"
57
                            class="text-lg text-black/20 dark:text-white/20
58
                                   group-hover:text-(--primary) transition-all
59
                                   group-hover:translate-x-1"
60
                        />
61
                    </div>
62
                </a>
63
            ))}
64
        </div>
65
    </div>
66
</MainGridLayout>

展开收起

3.3 数据获取

分类数据通过 src/utils/content-utils.ts 中的 getCategoryList() 获取：

1
export type Category = {
2
    name: string;
3
    count: number;
4
    url: string;
5
};
6

7
export async function getCategoryList(): Promise<Category[]> {
8
    const allBlogPosts = await getCollection<"posts">("posts", ({ data }) => {
9
        return import.meta.env.PROD ? data.draft !== true : true;
10
    });
11
    // ... 按分类统计文章数量并排序
12
}

3.4 导航栏入口

在 src/config/navBarConfig.ts 中添加分类链接：

1
const links: (NavBarLink | LinkPreset)[] = [
2
    LinkPreset.Home,
3
    LinkPreset.Categories,   // ← 新增
4
    LinkPreset.Archive,
5
    // ...
6
];

四、改进二：hoverTitle 标题变化

4.1 功能说明

鼠标悬停在导航栏 Logo 区域时，标题从正常文字变为趣味文字，鼠标移开后恢复。参考博客使用此功能增加趣味交互。

4.2 类型定义

在 src/types/config.ts 的 SiteConfig.navbar 中新增 hoverTitle 字段：

1
navbar: {
2
    logo?: {
3
        type: "icon" | "image" | "url";
4
        value: string;
5
        alt?: string;
6
    };
7
    title?: string;
8
    hoverTitle?: string;  // ← 新增：鼠标悬停时显示的标题
9
    widthFull?: boolean;
10
    menuAlign?: "left" | "center";
11
    followTheme?: boolean;
12
    stickyNavbar?: boolean;
13
};

4.3 配置使用

在 src/config/siteConfig.ts 中设置：

1
navbar: {
2
    logo: {
3
        type: "image",
4
        value: "assets/images/firefly.png",
5
        alt: "🍀",
6
    },
7
    title: "lyf:Blog",
8
    hoverTitle: "👋 别走嘛，再看看！",  // ← 新增
9
    // ...
10
},

4.4 组件实现

在 src/components/layout/Navbar.astro 中：

模板部分 — 添加 data 属性：

1
<div id="navbar" class="z-50"
2
     data-hover-title={navbarHoverTitle}
3
     ...>
4
    <a href={url('/')} class="btn-plain ... navbar-logo-link"
5
       data-original-title={navbarTitle}>
6
        <!-- Logo + 标题 -->
7
    </a>
8
</div>

脚本部分 — 添加事件监听：

1
function initHoverTitle() {
2
    const navbar = document.getElementById('navbar');
3
    if (!navbar) return;
4
    const hoverTitle = navbar.getAttribute('data-hover-title');
5
    if (!hoverTitle) return;
6

7
    const logoLink = navbar.querySelector('.navbar-logo-link');
8
    if (!logoLink) return;
9

10
    const logoText = logoLink.querySelector('span, div');
11
    if (!logoText) return;
12

13
    logoLink.addEventListener('mouseenter', function() {
14
        const currentText = logoText.textContent;
15
        logoText.setAttribute('data-text', currentText || '');
16
        logoText.textContent = hoverTitle;
17
    });
18

19
    logoLink.addEventListener('mouseleave', function() {
20
        const originalText = logoText.getAttribute('data-text');
21
        if (originalText) {
22
            logoText.textContent = originalText;
23
        }
24
    });
25
}
26

27
initHoverTitle();
28
document.addEventListener('astro:page-load', initHoverTitle);
29
document.addEventListener('swup:contentReplaced', initHoverTitle);

展开收起

4.5 自定义方法

修改 hoverTitle 值即可自定义：

siteConfig.ts

1
hoverTitle: "✨ 发现更多精彩内容！",    // 趣味风格
2
hoverTitle: "w(ﾟДﾟ)w 不要走！",         // 惊讶风格
3
hoverTitle: "🎉 欢迎回来！",            // 欢迎风格

五、改进三：下拉菜单点击触发

5.1 背景

原实现使用 CSS :hover 触发下拉菜单，存在以下问题：

移动端/触屏设备无法使用
鼠标移出菜单区域时容易误关
与无障碍访问冲突

改为点击触发（.dropdown-open 类切换），与参考博客一致。

5.2 CSS 变更

src/styles/main.css — 全局样式修改：

1
/* 旧：hover 触发 */
2
.dropdown-container:hover .dropdown-menu,
3
.dropdown-container:focus-within .dropdown-menu {
4
    @apply opacity-100 visible pointer-events-auto translate-y-0;
5
}
6

7
/* 新：click 触发 */
8
.dropdown-container.dropdown-open .dropdown-menu,
9
.dropdown-container:focus-within .dropdown-menu {
10
    @apply opacity-100 visible pointer-events-auto translate-y-0;
11
}

src/components/layout/DropdownMenu.astro — 组件内样式同步修改：

1
/* 新：点击触发 */
2
.dropdown-container.dropdown-open .dropdown-menu {
3
    @apply opacity-100 visible pointer-events-auto translate-y-0;
4
}
5

6
.dropdown-container.dropdown-open .dropdown-arrow {
7
    @apply rotate-180;
8
}

5.3 JavaScript 逻辑

1
function initDropdowns() {
2
    const dropdowns = document.querySelectorAll('[data-dropdown]');
3

4
    dropdowns.forEach(dropdown => {
5
        const trigger = dropdown.querySelector('[data-dropdown-trigger]');
6
        if (!trigger) return;
7

8
        // 克隆节点清除旧事件监听器
9
        const newTrigger = trigger.cloneNode(true);
10
        trigger.parentNode?.replaceChild(newTrigger, trigger);
11

12
        // 点击触发器 → 切换 .dropdown-open 类
13
        newTrigger.addEventListener('click', function(e) {
14
            e.preventDefault();
15
            e.stopPropagation();
16
            dropdown.classList.toggle('dropdown-open');
17
            const isOpen = dropdown.classList.contains('dropdown-open');
18
            newTrigger.setAttribute('aria-expanded', String(isOpen));
19
        });
20

21
        // Escape 键关闭
22
        newTrigger.addEventListener('keydown', function(e) {
23
            if (e.key === 'Escape') {
24
                dropdown.classList.remove('dropdown-open');
25
                newTrigger.setAttribute('aria-expanded', 'false');
26
                newTrigger.focus();
27
            }
28
        });
29
    });
30
}
31

32
// 点击外部关闭所有下拉菜单
33
document.addEventListener('click', function(e) {
34
    const dropdowns = document.querySelectorAll('[data-dropdown]');
35
    dropdowns.forEach(dropdown => {
36
        if (!dropdown.contains(e.target)) {
37
            dropdown.classList.remove('dropdown-open');
38
        }
39
    });
40
});

展开收起

5.4 交互行为

操作	行为
点击有子菜单的导航项	打开下拉菜单
再次点击	关闭下拉菜单
点击页面其他区域	关闭所有下拉菜单
按 Escape 键	关闭所有下拉菜单并聚焦回触发器
点击子菜单项	跳转链接并关闭菜单

六、改进四：Guestbook 入口统一

6.1 变更说明

改前：Guestbook 同时作为顶级链接 + “动态”子菜单项出现

1
主页 | 归档 | 网站导航 | 留言板 | 动态(说说/相册/留言板) | ...

改后：仅保留在”动态”子菜单中

1
主页 | 分类 | 归档 | 网站导航 | 动态(说说/相册/留言板) | ...

6.2 代码变更

在 src/config/navBarConfig.ts 中移除顶级链接：

1
// 根据配置决定是否添加留言板
2
if (siteConfig.pages.guestbook) {
3
    links.push(LinkPreset.Guestbook);
4
}

“动态”子菜单中保持不变：

1
children: [
2
    ...(siteConfig.pages.talks ? [LinkPreset.Talk] : []),
3
    ...(siteConfig.pages.gallery ? [LinkPreset.Gallery] : []),
4
    ...(siteConfig.pages.guestbook ? [LinkPreset.Guestbook] : []),  // 保留
5
],

七、改进五：LinkPreset 枚举扩展

7.1 变更说明

为常用页面添加独立的 LinkPreset 枚举值，保持与参考博客一致：

src/types/config.ts展开收起

1
export enum LinkPreset {
2
    Home = 0,
3
    Archive = 1,
4
    About = 2,
5
    Friends = 3,
6
    Sponsor = 4,
7
    Guestbook = 5,
8
    Bangumi = 6,
9
    Gallery = 7,
10
    Talk = 8,
11
    Categories = 9,    // ← 新增
12
    Books = 10,         // ← 新增
13
    MoviesGames = 11,   // ← 新增
14
    MusicPage = 12,     // ← 新增
15
    Changelog = 13,     // ← 新增
16
}

展开收起

7.2 预设映射

在 src/constants/link-presets.ts 中添加映射：

1
[LinkPreset.Categories]: {
2
    name: i18n(I18nKey.categories),
3
    url: "/categories/",
4
    icon: "material-symbols:folder-open",
5
},
6
[LinkPreset.Books]: {
7
    name: "书架",
8
    url: "/books/",
9
    icon: "material-symbols:book-5",
10
},
11
[LinkPreset.MoviesGames]: {
12
    name: "影视与游戏",
13
    url: "/movies-games/",
14
    icon: "material-symbols:movie",
15
},
16
[LinkPreset.MusicPage]: {
17
    name: i18n(I18nKey.music),
18
    url: "/music/",
19
    icon: "material-symbols:music-note",
20
},
21
[LinkPreset.Changelog]: {
22
    name: "更新日志",
23
    url: "/changelog/",
24
    icon: "material-symbols:history",
25
},

展开收起

7.3 使用方式

扩展后的枚举可在 navBarConfig.ts 中直接引用：

1
// 使用预设（推荐）
2
links.push(LinkPreset.Books);
3

4
// 也可继续使用自定义 NavBarLink
5
links.push({
6
    name: "书架",
7
    url: "/books/",
8
    icon: "material-symbols:book-5",
9
});

八、导航栏最终结构

1
Navbar.astro                      ← 主容器
2
├── Logo 区域 (hoverTitle 支持)
3
│   ├── Icon / Picture / Image
4
│   └── 标题文字 (mouseenter 变化)
5
├── 桌面端导航链接 (.hidden.lg:flex)
6
│   ├── 主页 → /
7
│   ├── 分类 → /categories/        ← 新增
8
│   ├── 归档 → /archive/
9
│   ├── 网站导航 → /projects/
10
│   ├── 动态 (点击触发下拉)        ← 改为 click
11
│   │   ├── 说说
12
│   │   ├── 相册
13
│   │   └── 留言板
14
│   ├── 记录 (点击触发下拉)
15
│   │   ├── 书架
16
│   │   ├── 影视与游戏
17
│   │   ├── 音乐
18
│   │   ├── 更新日志
19
│   │   ├── 规划
20
│   │   └── 足迹
21
│   └── 关于 (点击触发下拉)
22
│       ├── 关于我
23
│       ├── 友链
24
│       └── 赞助
25
├── 右侧工具栏
26
│   ├── 搜索 (Search.svelte)
27
│   ├── 音乐按钮
28
│   ├── 管理后台
29
│   ├── 显示设置
30
│   ├── 亮暗切换
31
│   └── 汉堡菜单 (移动端)
32
├── 移动端侧滑菜单 (NavMenuPanel.astro)
33
└── 显示设置面板

展开收起

九、文件变更清单

文件	操作	说明
`src/types/config.ts`	修改	LinkPreset 新增 5 个枚举值 + navbar.hoverTitle 类型
`src/constants/link-presets.ts`	修改	新增 5 个预设映射
`src/config/siteConfig.ts`	修改	新增 hoverTitle 配置
`src/config/navBarConfig.ts`	修改	添加分类链接 + 移除顶级 Guestbook
`src/components/layout/Navbar.astro`	修改	hoverTitle data 属性 + 事件脚本
`src/components/layout/DropdownMenu.astro`	修改	CSS hover→click + 脚本重写
`src/styles/main.css`	修改	全局下拉菜单 CSS 改为 click 触发
`src/pages/categories.astro`	新建	分类独立页面

网站导航页面自定义指南

Fri, 29 May 2026 00:00:00 GMT

网站导航页面自定义指南

本文档详细介绍如何自定义网站导航页面，包括分类管理、网站添加、颜色配置等。

功能概述

网站导航页面支持以下功能：

分类管理：可自由添加、删除、重命名分类
网站卡片：每个网站显示图标、名称、描述和标签
分类筛选：点击分类标签可筛选显示对应分类
响应式设计：自适应手机、平板、电脑
暗色模式：支持深色/浅色主题切换
自定义颜色：每个分类和网站可独立配置颜色

配置文件位置

所有配置都在一个文件中：

1
src/config/navigationConfig.ts

只需编辑这一个文件即可完成所有自定义。

配置结构说明

1
export const navigationConfig = {
2
  // 页面标题
3
  title: "网站导航",
4
  // 页面描述
5
  description: "我常用和推荐的网站",
6

7
  // 分类配置数组
8
  categories: [
9
    {
10
      id: "分类ID",           // 唯一标识符
11
      name: "分类名称",       // 显示名称
12
      icon: "图标名称",       // Iconify 图标
13
      color: "#颜色代码",     // 主题颜色
14
      dotColor: "#颜色代码",  // 标签圆点颜色（可选）
15
      sites: [                // 网站数组
16
        // ...网站配置
17
      ],
18
    },
19
    // ...更多分类
20
  ] as NavCategory[],
21
};

展开收起

自定义分类

添加新分类

在 categories 数组中添加新的分类对象：

1
{
2
  id: "new-category",           // 唯一ID，不能与其他分类重复
3
  name: "我的新分类",           // 显示名称
4
  icon: "material-symbols:star", // 分类图标
5
  color: "#ff6b6b",             // 主题颜色
6
  dotColor: "#ff6b6b",          // 标签圆点颜色
7
  sites: [],                    // 网站列表
8
}

删除分类

直接删除对应的分类对象即可。

重命名分类

修改 name 字段的值：

1
{
2
  id: "my-sites",
3
  name: "我的网站",      // 修改这里
4
  // ...
5
}

隐藏空分类

如果分类没有网站（sites: []），页面会自动隐藏该分类的标签和内容区域。

自定义网站

添加新网站

在对应分类的 sites 数组中添加网站对象：

1
{
2
  name: "网站名称",
3
  url: "https://example.com",
4
  description: "网站描述",
5
  icon: "mdi:earth",           // 图标名称
6
  iconColor: "#4CAF50",        // 图标背景颜色（可选）
7
  tags: ["标签1", "标签2"],    // 标签数组
8
}

网站配置说明

字段	类型	必填	说明
`name`	string	✅	网站名称
`url`	string	✅	网站链接
`description`	string	✅	网站描述
`icon`	string	✅	Iconify 图标名称
`iconColor`	string	❌	图标背景颜色，默认使用分类颜色
`tags`	string[]	✅	标签数组，可为空数组 `[]`

删除网站

删除对应的网站对象即可。

修改网站信息

直接修改对应字段的值。

颜色配置

分类颜色

每个分类有两个颜色配置：

1
{
2
  color: "#3b82f6",      // 主要颜色，用于：
3
                          // - 分类图标背景
4
                          // - 分类标题
5
                          // - 分隔线渐变
6
                          // - 网站标签背景和文字（如果没有单独配置）
7

8
  dotColor: "#3b82f6",   // 标签圆点颜色（可选）
9
                          // 如果不设置，使用 color 的值
10
}

网站卡片颜色

网站卡片有左边框颜色，自动使用所属分类的颜色。

图标颜色

1
{
2
  iconColor: "#24292e",  // 图标背景颜色
3
                          // 如果不设置，使用所属分类的 color
4
}

分类	推荐颜色	色值
我的网站	蓝色	`#3b82f6`
常用网站	橙色	`#f97316`
资源网站	粉色	`#ec4899`
工具网站	绿色	`#10b981`
大佬博客	紫色	`#8b5cf6`
学习网站	青色	`#06b6d4`
文档	黄绿色	`#84cc16`
其他网站	灰色	`#6b7280`

图标使用

图标格式

使用 Iconify 图标库，格式为：

1
图标库:图标名称

常用图标示例

分类图标

1
// 人物相关
2
"material-symbols:person"      // 人物
3
"material-symbols:group"       // 群组
4
"material-symbols:people"      // 人群
5

6
// 工具相关
7
"material-symbols:build"       // 工具
8
"material-symbols:settings"    // 设置
9
"material-symbols:code"        // 代码
10

11
// 文件相关
12
"material-symbols:folder"      // 文件夹
13
"material-symbols:description" // 文档
14
"material-symbols:book"        // 书籍
15

16
// 星标相关
17
"material-symbols:star"        // 星星
18
"material-symbols:favorite"    // 喜爱
19
"material-symbols:bookmark"    // 书签
20

21
// 其他
22
"material-symbols:school"      // 学校
23
"material-symbols:language"    // 语言
24
"material-symbols:public"      // 公共

展开收起

网站图标

1
// 常用网站图标
2
"mdi:github"                   // GitHub
3
"mdi:tray-arrow-up"             // Vercel
4
"mdi:cloud"                    // Cloud
5
"mdi:email"                    // 邮箱
6
"mdi:image-multiple"           // 相册
7
"mdi:notebook"                 // 笔记本
8
"mdi:run"                      // 跑步
9
"mdi:comment-text-multiple"    // 评论
10
"mdi:emoticon-outline"         // Emoji
11
"mdi:filmstrip"                // 电影
12
"mdi:draw"                     // 绘画
13
"mdi:book-open-variant"        // 书籍
14
"mdi:rocket-launch"            // 火箭
15
"mdi:earth"                    // 地球
16
"mdi:music"                    // 音乐
17
"mdi:video"                    // 视频
18
"mdi:shopping"                 // 购物

展开收起

查找图标

访问 Iconify
搜索图标名称
复制格式为 prefix:name 的图标名称

完整示例

示例1：添加”学习资源”分类

1
{
2
  id: "learning",
3
  name: "学习资源",
4
  icon: "material-symbols:school",
5
  color: "#06b6d4",
6
  dotColor: "#06b6d4",
7
  sites: [
8
    {
9
      name: "MDN Web Docs",
10
      url: "https://developer.mozilla.org",
11
      description: "Web 开发文档与学习资源",
12
      icon: "mdi:book-open-variant",
13
      iconColor: "#06b6d4",
14
      tags: ["文档", "前端"],
15
    },
16
    {
17
      name: "W3School",
18
      url: "https://w3school.com.cn",
19
      description: "Web 技术教程",
20
      icon: "mdi:school",
21
      iconColor: "#04a604",
22
      tags: ["教程", "入门"],
23
    },
24
  ],
25
}

展开收起

示例2：添加个人项目

1
{
2
  id: "my-projects",
3
  name: "我的项目",
4
  icon: "material-symbols:code",
5
  color: "#8b5cf6",
6
  sites: [
7
    {
8
      name: "我的博客",
9
      url: "https://your-blog.com",
10
      description: "个人技术博客",
11
      icon: "mdi:web",
12
      iconColor: "#8b5cf6",
13
      tags: ["博客", "技术"],
14
    },
15
    {
16
      name: "GitHub 仓库",
17
      url: "https://github.com/your-username",
18
      description: "我的开源项目",
19
      icon: "mdi:github",
20
      iconColor: "#24292e",
21
      tags: ["开源", "代码"],
22
    },
23
  ],
24
}

展开收起

示例3：添加外部链接网站

1
{
2
  id: "external",
3
  name: "推荐网站",
4
  icon: "material-symbols:public",
5
  color: "#f59e0b",
6
  sites: [
7
    {
8
      name: "知乎",
9
      url: "https://zhihu.com",
10
      description: "中文问答社区",
11
      icon: "mdi:comment-question",
12
      iconColor: "#0066ff",
13
      tags: ["社区", "问答"],
14
    },
15
  ],
16
}

展开收起

注意事项

1. ID 唯一性

每个分类的 id 必须唯一，不能与其他分类重复：

1
// ✅ 正确
2
{ id: "my-sites", ... }
3
{ id: "frequently-used", ... }
4

5
// ❌ 错误 - ID 重复
6
{ id: "my-sites", ... }
7
{ id: "my-sites", ... }

2. 图标名称格式

图标名称必须是 prefix:name 格式：

1
// ✅ 正确
2
icon: "mdi:github"
3
icon: "material-symbols:star"
4

5
// ❌ 错误
6
icon: "github"
7
icon: "star"

3. 颜色格式

颜色必须是有效的 HEX 格式：

1
// ✅ 正确
2
color: "#3b82f6"
3
color: "#fff"
4

5
// ❌ 错误
6
color: "blue"
7
color: "rgb(59, 130, 246)"

4. URL 格式

外部链接必须包含协议：

1
// ✅ 正确
2
url: "https://github.com"
3
url: "http://example.com"
4

5
// ❌ 错误
6
url: "github.com"
7
url: "//example.com"

5. 标签数量

建议每个网站的标签数量控制在 1-3 个，过多会影响显示效果。

6. 描述长度

建议描述控制在 20 字以内，过长会被截断显示。

7. 图标库依赖

项目已配置 Iconify 图标库，支持所有主流图标库：

Material Symbols
MDI (Material Design Icons)
Lucide
Heroicons
等等…

常见问题

Q: 如何修改分类标签的颜色？

A: 修改对应分类的 dotColor 字段：

1
{
2
  id: "my-sites",
3
  name: "我的网站",
4
  color: "#3b82f6",
5
  dotColor: "#ff0000",  // 修改这里改变圆点颜色
6
  // ...
7
}

Q: 如何让某个分类不显示？

A: 将该分类的 sites 数组设为空：

1
{
2
  id: "hidden-category",
3
  name: "隐藏分类",
4
  sites: [],  // 空数组会自动隐藏
5
  // ...
6
}

Q: 如何修改页面标题？

A: 修改配置文件顶部的 title 字段：

1
export const navigationConfig = {
2
  title: "我的导航",  // 修改这里
3
  // ...
4
};

Q: 如何添加没有图标的网站？

A: 图标是必填项，但可以使用通用图标：

1
{
2
  name: "某网站",
3
  icon: "mdi:web",  // 使用通用网页图标
4
  // ...
5
}

Q: 如何修改卡片左边框颜色？

A: 卡片左边框颜色自动使用所属分类的颜色，无法单独配置。

Q: 分类标签显示不全？

A: 分类标签支持横向滚动，在移动端可以左右滑动查看。

Q: 如何预览修改效果？

A: 启动开发服务器：

Terminal window

1
pnpm dev

然后访问 http://localhost:4321/navigation/ 查看效果。

技术支持

如有问题，请查看：

Iconify 图标搜索
Astro 官方文档
博客导航系列其他文章

MDX 组件使用指南

Thu, 28 May 2026 00:00:00 GMT

本指南介绍博客中可用的自定义 MDX 组件。在 .mdx 文件中通过 import 导入后即可使用。

Timeline 时间轴

用于展示更新日志，左侧竖线 + 圆点 + 标签徽章。

参数

参数	类型	必填	说明
`date`	string	是	日期文本，如 `"2026-05-28"`
`type`	string	否	`feature` / `improvement` / `fix` / `removal`，默认 `feature`
`version`	string	否	版本号，如 `"v1.2.0"`

示例

1
import Timeline from "../../components/mdx/Timeline.astro";
2

3
<Timeline date="2026-05-28" type="feature" version="v1.2.0">
4
新增音乐页面，支持本地播放列表。
5
</Timeline>
6

7
<Timeline date="2026-05-27" type="fix">
8
修复移动端导航栏显示问题。
9
</Timeline>

MusicCard 音乐卡片

展示单首歌曲信息，包含封面、歌名、歌手和播放链接。

参数

参数	类型	必填	说明
`title`	string	是	歌曲名称
`artist`	string	是	歌手名称
`cover`	string	否	封面图片 URL
`url`	string	否	播放链接

示例

1
import MusicCard from "../../components/mdx/MusicCard.astro";
2

3
<MusicCard title="知我" artist="国风堂" />
4
<MusicCard title="女孩" artist="韦礼安" cover="/images/cover.jpg" url="https://music.163.com" />

TagBadge 标签徽章

通用类型标签，用于标记内容类别。

参数

参数	类型	必填	说明
`type`	string	是	`feature` / `improvement` / `fix` / `removal`
`text`	string	否	自定义文本，不填则使用默认中文标签

示例

1
import TagBadge from "../../components/mdx/TagBadge.astro";
2

3
<TagBadge type="feature" />
4
<TagBadge type="fix" text="Bug Fix" />

使用须知

这些组件只能在 .mdx 文件中使用，普通 .md 文件不支持 import 语法
导入路径根据组件所在位置确定，一般为 ../../components/mdx/组件名.astro
组件样式已内置，无需额外配置

音乐页面搭建指南

Thu, 28 May 2026 00:00:00 GMT

本指南详细介绍音乐页面的搭建流程和配置方法，包含自动化下载和元数据提取工具。

架构概览

音乐系统由三部分组成：

1
MusicManager (音频引擎，单例)
2
    ↓ fm:* 事件通信
3
MusicPlayer (侧边栏/导航栏小播放器)
4
MusicPage   (独立音乐页面，大播放器 + 歌曲网格)

MusicManager — 管理 <audio> 元素、播放状态、歌词解析，通过 fm:* 自定义事件广播状态
MusicPlayer — 侧边栏和导航栏的小型播放器 UI
MusicPage — 独立音乐页面，大尺寸黑胶唱片播放器 + 收藏网格 + 歌词面板

配置文件

所有音乐配置在 src/config/musicConfig.ts：

1
import type { MusicPlayerConfig } from "../types/config";
2

3
export const musicPlayerConfig: MusicPlayerConfig = {
4
    // 导航栏显示音乐入口
5
    showInNavbar: true,
6

7
    // 模式："meting" 用云端 API，"local" 用本地文件
8
    mode: "meting",
9

10
    // 默认音量
11
    volume: 0.7,
12

13
    // 播放模式：list / one / random
14
    playMode: "list",
15

16
    // 启用歌词
17
    showLyrics: true,
18

19
    // Meting API 配置
20
    meting: {
21
        api: "https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r",
22
        server: "netease",
23
        type: "playlist",
24
        id: "10046455237",
25
        auth: "",
26
        fallbackApis: [
27
            "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id",
28
            "https://api.moeyao.cn/meting/?server=:server&type=:type&id=:id",
29
        ],
30
    },
31

32
    // 本地音乐配置
33
    local: {
34
        playlist: [
35
            {
36
                name: "歌曲名",
37
                artist: "歌手名",
38
                url: "/assets/music/歌曲.mp3",
39
                cover: "/assets/music/cover/封面.webp",
40
                lrc: "",
41
            },
42
        ],
43
    },
44
};

展开收起

使用云端音乐（Meting API）

什么是 Meting API

Meting 是一个开源的音乐聚合 API，支持网易云音乐、QQ 音乐、酷狗等平台。无需服务器，使用公共 API 即可获取歌曲信息、音频链接和歌词。

配置步骤

1. 选择音乐平台

1
meting: {
2
    server: "netease",  // netease=网易云, tencent=QQ, kugou=酷狗
3
}

2. 选择获取类型

1
meting: {
2
    type: "playlist",  // song=单曲, playlist=歌单, album=专辑, artist=艺术家
3
}

3. 填入 ID

歌单 ID：打开网易云歌单页面，URL 中的数字就是 ID
专辑 ID：同理
单曲 ID：歌曲页面 URL 中的数字

示例 — 网易云歌单 https://music.163.com/#/playlist?id=10046455237，ID 为 10046455237

1
meting: {
2
    server: "netease",
3
    type: "playlist",
4
    id: "10046455237",
5
}

4. 配置备用 API（推荐）

公共 API 可能不稳定，配置多个 fallback：

1
meting: {
2
    api: "https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r",
3
    fallbackApis: [
4
        "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id",
5
        "https://api.moeyao.cn/meting/?server=:server&type=:type&id=:id",
6
    ],
7
}

工作流程：主 API 失败 → 依次尝试 fallback → 全部失败 → 自动回退到本地播放列表

常用公共 Meting API

API 地址	说明
`https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r`	主 API
`https://api.injahow.cn/meting/?server=:server&type=:type&id=:id`	备用 1
`https://api.moeyao.cn/meting/?server=:server&type=:type&id=:id`	备用 2

使用本地音乐

第一步：准备文件

在 public/assets/music/ 目录下放置音频文件：

1
public/
2
└── assets/
3
    └── music/
4
        ├── 歌曲1.mp3
5
        ├── 歌曲1.lrc
6
        ├── 歌曲2.m4a
7
        ├── cover/
8
        │   ├── 封面1.jpg
9
        │   └── 封面2.jpg

支持格式：MP3、M4A、OGG、WAV

快速获取文件： 使用 python scripts/download_music.py "歌名" 一键下载音频+歌词+封面。

第二步：修改配置

将 mode 改为 "local"，并配置播放列表：

1
export const musicPlayerConfig: MusicPlayerConfig = {
2
    mode: "local",
3

4
    local: {
5
        playlist: [
6
            {
7
                name: "知我",
8
                artist: "国风堂",
9
                url: "/assets/music/知我.mp3",
10
                cover: "/assets/music/cover/知我.webp",
11
                lrc: "/assets/music/lrc/知我.lrc",
12
            },
13
            {
14
                name: "女孩",
15
                artist: "韦礼安",
16
                url: "/assets/music/女孩.mp3",
17
                cover: "/assets/music/cover/女孩.webp",
18
                lrc: "",
19
            },
20
        ],
21
    },
22
};

展开收起

字段说明

字段	必填	说明
`name`	是	歌曲名称
`artist`	是	歌手名称
`url`	是	音频文件路径（`public/` 下的相对路径或完整 URL）
`cover`	否	封面图片路径（不填显示默认音符图标）
`lrc`	否	LRC 歌词文件路径，支持同步滚动歌词

添加更多歌曲

方式一：使用下载脚本（推荐）

Terminal window

1
python scripts/download_music.py "歌名"
2
# 脚本会输出配置信息，复制粘贴到 playlist 数组即可

方式二：手动添加

只需在 playlist 数组中追加新条目：

1
playlist: [
2
    // ... 已有歌曲
3
    {
4
        name: "新歌曲名",
5
        artist: "新歌手名",
6
        url: "/assets/music/新歌曲.mp3",
7
        cover: "/assets/music/cover/新封面.jpg",
8
        lrc: "",
9
    },
10
],

更改封面

封面图片要求：

推荐尺寸：300x300 像素
推荐格式：JPG 或 WebP
放在 public/assets/music/cover/ 目录

快速获取封面： 使用 python scripts/download_music.py "歌名" 会自动下载封面。

在配置中引用：

1
{
2
    name: "歌曲名",
3
    artist: "歌手名",
4
    url: "/assets/music/歌曲.mp3",
5
    cover: "/assets/music/cover/新封面.jpg",  // 修改这里
6
}

LRC 歌词文件格式

LRC 是标准的歌词时间轴格式：

1
[00:00.00]歌曲标题
2
[00:01.00]歌手名
3
[00:05.00]第一句歌词
4
[00:10.50]第二句歌词
5
[00:15.20]第三句歌词

格式：[分:秒.毫秒]歌词内容

获取 LRC 歌词的方式：

网易云音乐网页版 → 开发者工具 → 搜索 lrc 获取歌词接口
使用 Python 脚本批量下载（如 fetch-lrc.py）
手动编写

自动化工具

博客内置了两个 CLI 工具，帮你自动化音乐文件的下载和元数据提取。

工具一：Python 下载脚本（推荐）

scripts/download_music.py — 一条命令完成搜索、下载音频、歌词、封面。

环境要求： Python 3.6+

基本用法：

Terminal window

1
# 搜索并下载（交互式选择歌曲）
2
python scripts/download_music.py "知我"
3

4
# 指定输出目录
5
python scripts/download_music.py "海阔天空" --dir=./my-music

执行流程：

1
搜索 → 显示结果列表 → 选择歌曲 → 下载 MP3 + LRC 歌词 + 封面 JPG

输出示例：

1
  Searching: 知我
2

3
  Results:
4
  [1] 知我 - 国风堂, 哦漏
5
  [2] 知我（抒情版） - 尘ah.
6
  [3] 肘我（知我加速版） - 神白sang
7

8
  Select [1]: 1
9

10
  Selected: 知我 - 国风堂, 哦漏
11
  Downloading audio...
12
  Music: 知我.mp3
13
  Lyrics: 知我.lrc
14
  Downloading cover...
15
  Cover: cover/知我.jpg
16

17
  ─────────────────────────────────────────
18
  Done! All files saved to public/assets/music/
19

20
  Add to musicConfig.ts local.playlist:
21
  { name: "知我", artist: "国风堂, 哦漏",
22
    url: "/assets/music/知我.mp3",
23
    cover: "/assets/music/cover/知我.jpg", lrc: "" }
24
  ─────────────────────────────────────────

展开收起

工作原理：

步骤	API	说明
搜索	网易云 `/api/search/get`	免费，无需认证
歌词	网易云 `/api/song/lyric`	免费，无需认证
封面	网易云网页 `og:image` 抓取	免费，从歌曲页面提取
音频	网易云 `/api/song/enhance/player/url`	部分歌曲需要 VIP

注意事项：

封面通过抓取网易云歌曲网页的 og:image 标签获取，无需 API 认证
部分 VIP 步曲无法下载音频，脚本会提示手动下载
输出文件自动放在 public/assets/music/ 目录
文件名自动清理特殊字符（/\?%*:|" 等替换为 -）
已存在的文件不会被覆盖

工具二：M4A/MP3 元数据提取

pnpm cli lrc — 从本地 M4A 或 MP3 文件中提取内嵌的封面和歌词。

用法：

Terminal window

1
# 提取单个文件
2
pnpm cli lrc 歌曲.m4a
3

4
# 提取整个目录
5
pnpm cli lrc /path/to/music/

支持格式：

格式	封面提取	歌词提取
`.m4a`	✅ 从 `udta > ilst > covr` atom 提取	✅ 从 `©lyr` atom 提取
`.mp3`	✅ 从 ID3v2 `APIC` frame 提取	✅ 从 ID3v2 `USLT` frame 提取

输出示例：

1
  Cover: 歌曲.jpg
2
  Lyrics: 歌曲.lrc

适用场景：

从其他渠道获取了 M4A/MP3 文件，需要提取封面和歌词
音乐文件内嵌了元数据，想自动提取而不是手动下载

Fallback 机制

当配置 mode: "meting" 时，系统会按以下顺序尝试：

1
1. Meting 主 API → 成功则使用云端歌曲
2
2. Meting 备用 API 1 → 成功则使用云端歌曲
3
3. Meting 备用 API 2 → 成功则使用云端歌曲
4
4. 全部失败 → 自动切换到 local.playlist 本地歌曲

如果本地播放列表也为空，则显示”暂无歌曲”。

页面组件说明

MusicPage（独立音乐页面）

位于 src/components/pages/MusicPage.astro，是 /music/ 页面的核心组件。

布局结构：

1
┌──────────────────────┬──────────────┐
2
│                      │ 播放列表      │
3
│   黑胶唱片封面        │ ┌──┬──┬──┐  │
4
│   （旋转动画）        │ │歌│歌│歌│  │
5
│                      │ ├──┼──┼──┤  │
6
│      歌名            │ │歌│歌│歌│  │
7
│      歌手            │ └──┴──┴──┘  │
8
│  ━━━━━━━━━━━━━━━━    │              │
9
│  0:00        3:45   │ 我的音乐收藏  │
10
│                      │ ┌──┬──┬──┐  │
11
│  ⟲  ⏮  ▶  ⏭  🔊   │ │♡ │♡ │♡ │  │
12
└──────────────────────┴──┴──┴──┘──┘
13
┌──────────────────────────────────────┐
14
│ 🎵 歌词          歌名 - 歌手        │
15
│  ┃                                    │
16
│  ┃  演唱：A-Lin黄丽玲                │
17
│  ┃  作词：邬裕康                      │
18
│  ┃  ...（自动滚动高亮当前行）          │
19
└──────────────────────────────────────┘

展开收起

右侧包含两个独立区块：

播放列表：3 列网格，显示所有歌曲，点击播放
我的音乐收藏：3 列网格，显示已收藏歌曲（localStorage 存储）

下方歌词面板为独立卡片，蓝色左边框装饰，播放时自动滚动到当前歌词行。

MusicPlayer（侧边栏播放器）

位于 src/components/features/MusicPlayer.astro，用于侧边栏和导航栏浮动面板。

歌词功能

工作原理

歌词系统由 MusicManager 驱动：

加载歌曲时，MusicManager 解析 LRC 文件或内嵌歌词字符串
播放过程中，通过 fm:time 事件同步当前时间
计算当前应高亮的歌词行，通过 fm:lrc-index 事件广播
MusicPage 监听事件，高亮对应行并自动滚动居中

LRC 歌词格式

1
[00:00.00]歌曲标题
2
[00:01.00]歌手名
3
[00:05.00]第一句歌词
4
[00:10.50]第二句歌词

格式：[分:秒.毫秒]歌词内容

歌词来源

方式一：LRC 文件（推荐）

将 .lrc 文件放在 public/assets/music/lrc/ 目录，在配置中引用：

1
{
2
    name: "歌曲名",
3
    artist: "歌手名",
4
    url: "/assets/music/歌曲.mp3",
5
    lrc: "/assets/music/lrc/歌曲.lrc",  // LRC 文件路径
6
}

方式二：内嵌歌词字符串

直接在配置中写入 LRC 格式字符串：

1
{
2
    name: "歌曲名",
3
    artist: "歌手名",
4
    url: "/assets/music/歌曲.mp3",
5
    lrc: "[00:05.00]第一句歌词\n[00:10.50]第二句歌词",
6
}

方式三：云端 API 自动获取

使用 Meting API 时，API 返回的数据中已包含 lrc 字段（LRC 格式字符串），无需额外配置。

获取 LRC 歌词

自动化脚本（推荐）：使用内置 Python 脚本一键下载（详见下方「自动化工具」章节）
网易云音乐：网页版 → F12 开发者工具 → Network → 搜索 lyric → 找到歌词接口返回的内容
手动编写：用文本编辑器按 LRC 格式编写

歌词面板样式

歌词面板位于播放器下方，带有蓝色左边框：

1
<div class="lyrics-panel border-l-4 border-l-(--primary)">
2
    <div class="lyrics-header">歌词</div>
3
    <div class="lyrics-container h-64 overflow-y-auto">
4
        <!-- 歌词行 -->
5
    </div>
6
</div>

修改歌词面板高度：

1
.lyrics-container {
2
    height: 16rem;  /* 默认 h-64，可改为 h-48 或 h-80 */
3
}

歌词自动滚动行为

播放时歌词会自动滚动到当前行并居中高亮。滚动行为支持智能检测：

自动滚动：播放过程中，当前歌词行自动居中显示
手动滚动暂停：用户滚动歌词（鼠标滚轮或触摸滑动）时，累计滚动距离超过 50px 后暂停自动滚动
自动恢复：停止手动滚动 2 秒后，自动跳回当前歌词行并恢复自动滚动
点击跳转：点击任意歌词行可跳转到对应时间点播放

1
// 滚动检测核心逻辑
2
var scrollDeltaAccum = 0;
3
ui.lyricsContainer.addEventListener('wheel', function(e) {
4
    scrollDeltaAccum += Math.abs(e.deltaY);
5
    if (scrollDeltaAccum > 50) {
6
        isUserScrolling = true;  // 暂停自动滚动
7
        resetScrollTimeout();    // 2秒后恢复
8
    }
9
    // 300ms 内无新滚动则重置累积值
10
    clearTimeout(resetTimer);
11
    resetTimer = setTimeout(function() { scrollDeltaAccum = 0; }, 300);
12
});

收藏功能

工作原理

收藏功能使用 localStorage 存储，无需后端：

每首歌卡片右上角有 ♡ 收藏按钮
点击后将歌曲信息 { name, artist, pic } 存入 localStorage
右侧”我的音乐收藏”网格实时显示已收藏歌曲
点击收藏卡片可播放对应歌曲
悬停收藏卡片显示 ✕ 按钮，可取消收藏

存储结构

1
// localStorage key: "music-favorites"
2
// value: JSON 数组
3
[
4
    { name: "知我", artist: "国风堂", pic: "https://..." },
5
    { name: "女孩", artist: "韦礼安", pic: "https://..." },
6
]

自定义收藏键名

如需修改 localStorage 的 key，在 MusicPage.astro 的 <script> 中修改：

1
var FAVORITES_KEY = 'music-favorites';  // 改为你想要的 key

清空收藏

在浏览器控制台执行：

1
localStorage.removeItem('music-favorites');

搭建过程

第一步：创建 MusicPage 组件

在 src/components/pages/ 下创建 MusicPage.astro，包含：

左侧播放器区域
- 黑胶唱片封面（vinyl-ring 渐变圆环 + 内圈封面图）
- 轨道信息（歌名、歌手）
- 进度条（可点击跳转）
- 控制按钮（循环、上一首、播放/暂停、下一首、音量）
右侧收藏网格
- 3 列网格布局
- 每张卡片：封面图 + 歌名 + 歌手 + 收藏按钮
底部歌词面板
- 蓝色左边框装饰
- 歌词头部信息栏
- 可滚动歌词容器，自动高亮当前行

第二步：接入 MusicManager 事件系统

MusicPage 通过监听 fm:* 自定义事件与 MusicManager 通信：

1
// 监听事件
2
window.addEventListener('fm:init', function(e) { /* 播放列表加载完成 */ });
3
window.addEventListener('fm:track', function(e) { /* 切换歌曲 */ });
4
window.addEventListener('fm:play-state', function(e) { /* 播放/暂停 */ });
5
window.addEventListener('fm:time', function(e) { /* 进度更新 */ });
6
window.addEventListener('fm:lyrics', function(e) { /* 歌词加载 */ });
7
window.addEventListener('fm:lrc-index', function(e) { /* 歌词行高亮 */ });
8
window.addEventListener('fm:volume', function(e) { /* 音量变化 */ });
9
window.addEventListener('fm:mode', function(e) { /* 播放模式变化 */ });
10

11
// 调用 API 控制播放
12
window.__fireflyMusic.togglePlay();      // 播放/暂停
13
window.__fireflyMusic.playNext();        // 下一首
14
window.__fireflyMusic.playPrev();        // 上一首
15
window.__fireflyMusic.seek(percent);     // 跳转进度 (0-1)
16
window.__fireflyMusic.setVolume(val);    // 设置音量 (0-1)
17
window.__fireflyMusic.cyclePlayMode();   // 切换播放模式
18
window.__fireflyMusic.playTrackByIndex(i); // 播放指定歌曲

展开收起

第三步：更新 music.astro 页面

将 src/pages/music.astro 改为使用 MusicPage 组件：

1
---
2
import MainGridLayout from "@/layouts/MainGridLayout.astro";
3
import MusicPage from "@/components/pages/MusicPage.astro";
4
---
5

6
<MainGridLayout title="音乐" description="我喜欢的音乐">
7
    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32">
8
        <div class="card-base z-10 px-6 md:px-9 py-6 relative w-full">
9
            <MusicPage />
10
        </div>
11
    </div>
12
</MainGridLayout>

第四步：配置音乐源

编辑 src/config/musicConfig.ts，选择 meting 或 local 模式（详见上方配置章节）。

第五步：验证

Terminal window

1
pnpm dev

访问 /music/ 检查：

黑胶唱片封面旋转动画
播放控制功能正常
歌词自动滚动高亮
收藏/取消收藏功能
收藏数据刷新后保留

自定义样式

修改播放器颜色

播放器使用 CSS 变量 --primary 作为主题色，在 src/styles/main.css 中修改：

1
:root {
2
    --primary: oklch(0.65 0.15 250);  /* 蓝色 */
3
}

修改唱片旋转速度

在 MusicPage.astro 的 <style> 中修改：

1
@keyframes vinyl-spin {
2
    from { transform: rotate(0deg); }
3
    to { transform: rotate(360deg); }
4
}
5

6
.vinyl-ring {
7
    animation: vinyl-spin 20s linear infinite;  /* 改这里的 20s */
8
}

修改歌曲网格列数

在 MusicPage.astro 中修改 grid 类：

1
<div class="song-grid grid grid-cols-3 gap-3">

改为 grid-cols-2（2 列）或 grid-cols-4（4 列）。

常见问题

Q: 音频无法播放？

检查：

音频文件是否在 public/assets/music/ 目录下
配置中的路径是否正确（相对于 public/）
浏览器控制台是否有 CORS 错误（云端音频需要 crossOrigin = 'anonymous'）

Q: 封面不显示？

检查：

图片文件是否存在
路径是否正确
图片格式是否被浏览器支持
使用 python scripts/download_music.py 下载的封面会自动放在 cover/ 目录

Q: Python 脚本下载失败？

常见原因及解决方案：

错误	原因	解决方案
音频下载失败	VIP 步曲限制	手动下载后放到 `public/assets/music/`
封面下载失败	网页抓取被限流	稍后重试或手动下载封面图片
搜索无结果	网络问题	检查网络连接，确认能访问 music.163.com

Q: `pnpm cli lrc` 提取不到封面？

确认文件是 .m4a 或 .mp3 格式
确认文件内嵌了封面数据（部分下载的 MP3 没有内嵌封面）
使用 python scripts/download_music.py 下载的歌曲会自动获取封面

Q: Meting API 不可用？

检查网络连接
尝试切换其他备用 API
如果所有 API 都不可用，系统会自动回退到本地播放列表
也可以直接将 mode 改为 "local" 使用本地文件

Q: 如何禁用音乐播放器？

在 musicConfig.ts 中：

1
export const musicPlayerConfig: MusicPlayerConfig = {
2
    showInNavbar: false,  // 禁用导航栏入口
3
};

侧边栏播放器在 src/config/sidebarConfig.ts 中将 music 组件的 enable 设为 false。

导航栏配置完全指南

Wed, 27 May 2026 00:00:00 GMT

导航栏配置完全指南

本文档梳理 Firefly 博客导航栏的完整配置流程，涵盖目录结构、两种添加方式和常见问题排查。

目录结构总览
当前导航栏结构
方式一：使用内置预设（LinkPreset）
方式二：添加自定义导航项（NavBarLink）
完整操作流程（以”说说”为例）
快速添加自定义页面（以”书架”为例）
页面开关配置
导航栏样式配置
图标资源参考
常见问题排查
完整检查清单

目录结构总览

1
src/
2
├── content/
3
│   ├── content.config.ts              # 内容集合定义（spec 集合）
4
│   ├── spec/                          # 特殊页面的 Markdown 内容
5
│   │   ├── about.md                   # 关于我
6
│   │   ├── friends.mdx                # 友链
7
│   │   ├── talks.md                   # 说说
8
│   │   ├── books.md                   # 书架
9
│   │   ├── movies-games.md            # 影视与游戏
10
│   │   ├── music.md                   # 音乐
11
│   │   ├── changelog.md               # 更新日志
12
│   │   ├── routines.md                # 规划
13
│   │   ├── places.md                  # 足迹
14
│   │   └── projects.md                # 网站导航
15
│   └── posts/                         # 博客文章
16
├── types/
17
│   └── config.ts                      # LinkPreset 枚举 + 类型定义
18
├── constants/
19
│   └── link-presets.ts                # LinkPreset → NavBarLink 映射表
20
├── i18n/
21
│   ├── i18nKey.ts                     # 国际化键值枚举
22
│   └── languages/
23
│       ├── zh_CN.ts                   # 中文翻译
24
│       ├── en.ts                      # 英文翻译
25
│       ├── ja.ts                      # 日文翻译
26
│       ├── zh_TW.ts                   # 繁体中文翻译
27
│       └── ru.ts                      # 俄文翻译
28
├── config/
29
│   ├── siteConfig.ts                  # 站点配置（含页面开关）
30
│   └── navBarConfig.ts                # ⭐ 导航栏链接配置（核心文件）
31
├── pages/                             # 页面路由
32
│   ├── about.astro
33
│   ├── friends.astro
34
│   ├── talks.astro
35
│   ├── books.astro
36
│   ├── movies-games.astro
37
│   ├── music.astro
38
│   ├── changelog.astro
39
│   ├── projects.astro
40
│   └── life/
41
│       ├── routines.astro
42
│       └── places.astro
43
└── components/layout/
44
    └── Navbar.astro                   # 导航栏组件（通常无需修改）

展开收起

当前导航栏结构

1
主页 (/)                               ← LinkPreset.Home
2
归档 (/archive/)                       ← LinkPreset.Archive
3
网站导航 (/projects/)                   ← 自定义 NavBarLink
4
留言板 (/guestbook/)                   ← LinkPreset.Guestbook（受开关控制）
5
动态 (下拉菜单 icon:local-cafe)
6
  ├── 说说 (/talks/)                   ← LinkPreset.Talk（受开关控制）
7
  ├── 相册 (/gallery/)                 ← LinkPreset.Gallery（受开关控制）
8
  └── 留言板 (/guestbook/)             ← LinkPreset.Guestbook（受开关控制）
9
记录 (下拉菜单 icon:camera-outdoor)
10
  ├── 书架 (/books/)                   ← 自定义 NavBarLink
11
  ├── 影视与游戏 (/movies-games/)      ← 自定义 NavBarLink
12
  ├── 音乐 (/music/)                   ← 自定义 NavBarLink
13
  ├── 更新日志 (/changelog/)           ← 自定义 NavBarLink
14
  ├── 规划 (/life/routines/)           ← 自定义 NavBarLink
15
  └── 足迹 (/life/places/)             ← 自定义 NavBarLink
16
关于 (下拉菜单 icon:info)
17
  ├── 关于我 (/about/)                 ← LinkPreset.About
18
  ├── 友链 (/friends/)                 ← LinkPreset.Friends（受开关控制）
19
  └── 赞助 (/sponsor/)                ← LinkPreset.Sponsor（受开关控制）

展开收起

方式一：使用内置预设（LinkPreset）

适用于主题已提供的常用页面，只需 3 步。

可用预设列表

预设枚举	显示名称	URL	所需开关
`LinkPreset.Home`	主页	`/`	-
`LinkPreset.Archive`	归档	`/archive/`	-
`LinkPreset.About`	关于我	`/about/`	-
`LinkPreset.Friends`	友链	`/friends/`	`pages.friends`
`LinkPreset.Sponsor`	赞助	`/sponsor/`	`pages.sponsor`
`LinkPreset.Guestbook`	留言	`/guestbook/`	`pages.guestbook`
`LinkPreset.Bangumi`	番组计划	`/bangumi/`	`pages.bangumi`
`LinkPreset.Gallery`	相册	`/gallery/`	`pages.gallery`
`LinkPreset.Talk`	说说	`/talks/`	`pages.talks`

操作步骤

Step 1 — 在 src/config/navBarConfig.ts 中添加预设：

1
// 作为顶级菜单
2
links.push(LinkPreset.Gallery);
3

4
// 作为下拉子菜单（放在 children 数组中）
5
links.push({
6
    name: "动态",
7
    url: "/my/",
8
    icon: "material-symbols:local-cafe",
9
    children: [
10
        ...(siteConfig.pages.talks ? [LinkPreset.Talk] : []),
11
        ...(siteConfig.pages.gallery ? [LinkPreset.Gallery] : []),
12
    ],
13
});

Step 2 — 确保 src/config/siteConfig.ts 中对应开关为 true：

1
pages: {
2
    talks: true,
3
    gallery: true,
4
    // ...
5
}

Step 3 — 重启开发服务器生效。

注意：预设的名称和 URL 由主题控制，无法自定义。如需自定义名称或 URL，请使用方式二。

方式二：添加自定义导航项（NavBarLink）

适用于预设列表中没有的页面，需要创建页面文件和内容文件。共 2 步（精简版），如需开关控制则 4 步。

精简版（2 步）— 无需开关控制

Step 1 — 创建页面文件 src/pages/xxx.astro：

1
---
2
import MainGridLayout from "@/layouts/MainGridLayout.astro";
3
import { getEntry, render } from "astro:content";
4
import Markdown from "@components/common/Markdown.astro";
5

6
const pagePost = await getEntry("spec", "xxx");
7
if (!pagePost) {
8
    throw new Error("Page content not found");
9
}
10
const { Content } = await render(pagePost);
11
---
12

13
<MainGridLayout title="页面标题" description="页面描述">
14
    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32">
15
        <div class="card-base z-10 px-9 py-6 relative w-full">
16
            <Markdown class="mt-2">
17
                <Content />
18
            </Markdown>
19
        </div>
20
    </div>
21
</MainGridLayout>

展开收起

Step 2 — 创建内容文件 src/content/spec/xxx.md：

1
---
2
title: 页面标题
3
date: 2026-05-27
4
---
5

6
# 页面内容
7

8
在这里写 Markdown 内容...

然后在 src/config/navBarConfig.ts 中添加导航链接（见下方代码）。

完整版（4 步）— 需要开关控制

在精简版基础上，额外修改 2 个文件：

Step 3 — 在 src/types/config.ts 的 SiteConfig.pages 中添加开关字段：

1
pages: {
2
    // ...已有开关
3
    xxx: true,  // 新增
4
}

Step 4 — 在 src/config/siteConfig.ts 中设置开关值：

1
pages: {
2
    // ...已有配置
3
    xxx: true,  // 新增
4
}

在导航栏中添加链接

无论精简版还是完整版，都需要在 src/config/navBarConfig.ts 中添加：

1
// 顶级菜单
2
links.push({
3
    name: "书架",
4
    url: "/books/",
5
    icon: "material-symbols:book-5",
6
});
7

8
// 下拉子菜单
9
links.push({
10
    name: "记录",
11
    url: "/records/",
12
    icon: "material-symbols:camera-outdoor",
13
    children: [
14
        { name: "书架", url: "/books/", icon: "material-symbols:book-5" },
15
        { name: "音乐", url: "/music/", icon: "material-symbols:music-note" },
16
    ],
17
});
18

19
// 外部链接（新标签页打开）
20
links.push({
21
    name: "GitHub",
22
    url: "https://github.com/yourname",
23
    external: true,
24
    icon: "fa7-brands:github",
25
});

展开收起

完整操作流程（以”说说”为例）

演示使用 LinkPreset 方式添加”说说”功能的完整 8 步流程。

Step 1：确认内容集合

文件：src/content.config.ts

确认 spec 集合已定义（通常已存在，无需修改）：

1
const specCollection = defineCollection({
2
    loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/spec" }),
3
    schema: z.object({}),
4
});

Step 2：创建内容文件

文件：src/content/spec/talks.md

1
---
2
title: 说说
3
date: 2026-05-27
4
---
5

6
# 我的说说
7

8
- 2026-05-27：导航栏配置完成！
9
- 2026-05-25：开始搭建博客。

Step 3：添加枚举值

文件：src/types/config.ts

1
export enum LinkPreset {
2
    Home = 0,
3
    Archive = 1,
4
    About = 2,
5
    Friends = 3,
6
    Sponsor = 4,
7
    Guestbook = 5,
8
    Bangumi = 6,
9
    Gallery = 7,
10
    Talk = 8,  // ✅ 新增（数值不能重复）
11
}

Step 4：添加页面开关

文件：src/config/siteConfig.ts

1
pages: {
2
    // ...其他开关
3
    talks: true,  // ✅ 新增
4
}

Step 5：添加导航栏配置

文件：src/config/navBarConfig.ts

1
links.push({
2
    name: "动态",
3
    url: "/my/",
4
    icon: "material-symbols:local-cafe",
5
    children: [
6
        ...(siteConfig.pages.talks ? [LinkPreset.Talk] : []),  // ✅ 新增
7
        ...(siteConfig.pages.gallery ? [LinkPreset.Gallery] : []),
8
    ],
9
});

Step 6：添加预设映射

文件：src/constants/link-presets.ts

1
[LinkPreset.Talk]: {  // ✅ 新增
2
    name: i18n(I18nKey.talks),
3
    url: "/talks/",
4
    icon: "material-symbols:chat",
5
},

Step 7：添加国际化键值

文件：src/i18n/i18nKey.ts

1
export enum I18nKey {
2
    // ...其他键值
3
    talks = "talks",                    // ✅ 新增（小写 camelCase）
4
    talksDescription = "talksDescription",  // ✅ 新增
5
}

文件：src/i18n/languages/zh_CN.ts（及其他语言文件）

1
[Key.talks]: "说说",
2
[Key.talksDescription]: "我的日常动态和碎碎念",

Step 8：创建页面路由

文件：src/pages/talks.astro

1
---
2
import MainGridLayout from "@/layouts/MainGridLayout.astro";
3
import { getEntry, render } from "astro:content";
4
import Markdown from "@components/common/Markdown.astro";
5
import I18nKey from "@/i18n/i18nKey";
6
import { i18n } from "@/i18n/translation";
7

8
const talksPost = await getEntry("spec", "talks");
9
if (!talksPost) {
10
    throw new Error("Talks page content not found");
11
}
12
const { Content } = await render(talksPost);
13
---
14

15
<MainGridLayout title={i18n(I18nKey.talks)} description={i18n(I18nKey.talksDescription)}>
16
    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32">
17
        <div class="card-base z-10 px-9 py-6 relative w-full">
18
            <Markdown class="mt-2">
19
                <Content />
20
            </Markdown>
21
        </div>
22
    </div>
23
</MainGridLayout>

展开收起

快速添加自定义页面（以”书架”为例）

使用 NavBarLink 方式，只需 3 步（无需枚举、i18n、预设映射）。

Step 1：创建内容文件

文件：src/content/spec/books.md

1
---
2
title: 书架
3
date: 2026-05-27
4
---
5

6
# 我的书架
7

8
## 正在读
9
- 《深入理解 TypeScript》
10

11
## 已读完
12
- 《JavaScript 高级程序设计》

Step 2：创建页面文件

文件：src/pages/books.astro

1
---
2
import MainGridLayout from "@/layouts/MainGridLayout.astro";
3
import { getEntry, render } from "astro:content";
4
import Markdown from "@components/common/Markdown.astro";
5

6
const booksPost = await getEntry("spec", "books");
7
if (!booksPost) {
8
    throw new Error("Books page content not found");
9
}
10
const { Content } = await render(booksPost);
11
---
12

13
<MainGridLayout title="书架" description="我读过的和正在读的书籍">
14
    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32">
15
        <div class="card-base z-10 px-9 py-6 relative w-full">
16
            <Markdown class="mt-2">
17
                <Content />
18
            </Markdown>
19
        </div>
20
    </div>
21
</MainGridLayout>

展开收起

Step 3：在导航栏添加链接

文件：src/config/navBarConfig.ts

1
// 方式 A：作为顶级菜单
2
links.push({
3
    name: "书架",
4
    url: "/books/",
5
    icon: "material-symbols:book-5",
6
});
7

8
// 方式 B：作为下拉子菜单
9
links.push({
10
    name: "记录",
11
    url: "/records/",
12
    icon: "material-symbols:camera-outdoor",
13
    children: [
14
        { name: "书架", url: "/books/", icon: "material-symbols:book-5" },
15
        // ...其他子菜单
16
    ],
17
});

展开收起

如果需要嵌套目录（如 /life/routines/）

1
src/pages/life/routines.astro     ← 页面文件
2
src/content/spec/routines.md      ← 内容文件
3
url: "/life/routines/"             ← 导航栏中使用的 URL

页面开关配置

文件：src/config/siteConfig.ts → pages 对象

1
pages: {
2
    friends: true,       // 友链
3
    sponsor: true,       // 赞助
4
    guestbook: false,    // 留言板（关闭）
5
    bangumi: true,       // 番组计划
6
    gallery: true,       // 相册
7
    talks: true,         // 说说
8
}

true = 导航栏显示 + 页面可访问
false = 导航栏隐藏 + 访问返回 404

导航栏样式配置

文件：src/config/siteConfig.ts → navbar 对象

1
navbar: {
2
    logo: {
3
        type: "image",                      // icon | image | url
4
        value: "assets/images/logo.webp",   // 图标/图片路径
5
        alt: "Logo",
6
    },
7
    title: "我的博客",           // 导航栏标题
8
    widthFull: false,           // false=居中, true=全宽
9
    menuAlign: "center",        // left | center
10
    followTheme: false,         // 是否跟随主题色
11
    stickyNavbar: true,         // 是否固定顶部
12
},

文件：src/config/backgroundWallpaper.ts → 导航栏透明效果

1
common: {
2
    navbar: {
3
        transparentMode: "semi",   // semi | full | semifull
4
        enableBlur: true,          // 毛玻璃效果
5
        blur: 10,                  // 模糊度
6
    },
7
},

图标资源参考

导航栏图标使用 Iconify，格式为 图标库:图标名。

常用图标

图标名	说明
`material-symbols:home`	首页
`material-symbols:archive`	归档
`material-symbols:person`	关于
`material-symbols:group`	友链
`material-symbols:favorite`	赞助
`material-symbols:chat`	留言板
`material-symbols:chat-bubble`	说说
`material-symbols:photo-library`	相册
`material-symbols:movie`	电影/影视
`material-symbols:music-note`	音乐
`material-symbols:book-5`	书架
`material-symbols:history`	更新日志
`material-symbols:location-on`	足迹
`material-symbols:list-alt`	规划
`material-symbols:camera-outdoor`	记录
`material-symbols:local-cafe`	动态
`material-symbols:public`	网站导航
`material-symbols:info`	信息/关于
`fa7-brands:github`	GitHub

搜索更多图标

访问 https://icon-sets.iconify.design/ 搜索，复制图标名即可使用。

常见问题排查

导航栏显示空白文字

原因：i18n 枚举键名大小写不一致。

1
// ❌ 错误：枚举名大写，引用小写
2
export enum I18nKey {
3
    Talks = "talks",        // 大写 T
4
}
5
name: i18n(I18nKey.talks), // 找不到 → 空白
6

7
// ✅ 正确：统一使用小写 camelCase
8
export enum I18nKey {
9
    talks = "talks",        // 小写 t
10
}
11
name: i18n(I18nKey.talks), // 匹配成功

页面 404

可能原因	排查方法
页面文件不存在	检查 `src/pages/xxx.astro`
内容文件不存在	检查 `src/content/spec/xxx.md`
`getEntry` 参数错误	第二个参数是文件名（不含扩展名）
嵌套目录未创建	如 `/life/routines/` 需要 `src/pages/life/` 目录

导航栏不显示菜单项

可能原因	排查方法
页面开关为 `false`	检查 `siteConfig.pages.xxx`
LinkPreset 枚举值未添加	检查 `types/config.ts`
预设映射未添加	检查 `constants/link-presets.ts`
navBarConfig 中未添加	检查 `config/navBarConfig.ts`

`Cannot read properties of undefined (reading 'data')`

原因：getEntry("spec", "xxx") 返回 undefined，说明内容文件不存在或文件名拼写错误。

import 路径报错

1
// ❌ 缺少扩展名
2
import Markdown from "@components/common/Markdown";
3

4
// ✅ 加上 .astro 扩展名
5
import Markdown from "@components/common/Markdown.astro";

完整检查清单

添加 LinkPreset 预设页面（如”说说”）

src/content/spec/talks.md 已创建
src/types/config.ts 中 LinkPreset 添加了 Talk = 8
src/config/siteConfig.ts 中 pages.talks = true
src/config/navBarConfig.ts 中添加了菜单项
src/constants/link-presets.ts 中添加了预设映射
src/i18n/i18nKey.ts 中添加了 talks 和 talksDescription
src/i18n/languages/zh_CN.ts（及其他语言）添加了翻译
src/pages/talks.astro 页面文件已创建
重启开发服务器验证

添加自定义 NavBarLink 页面（如”书架”）

src/content/spec/books.md 已创建
src/pages/books.astro 已创建
src/config/navBarConfig.ts 中添加了导航链接
重启开发服务器验证

通用检查

src/content.config.ts 中 spec 集合已定义
所有 import 路径包含 .astro 扩展名
枚举值无重复
所有语言文件都添加了翻译

两种方式对比

对比项	LinkPreset 预设	NavBarLink 自定义
需要修改的文件	8 个	3 个
需要 i18n	是	否
需要枚举值	是	否
名称/URL 可自定义	否	是
适用场景	主题内置页面	自定义新页面
适合初学者	推荐	推荐

自定义导航栏

Wed, 27 May 2026 00:00:00 GMT

自定义导航栏

本文档详细介绍如何为 Firefly 博客添加自定义导航栏菜单项，以”说说 (Talks)“功能为例。

目录结构总览

1
src/
2
├── content/
3
│   ├── content.config.ts              # 内容集合定义
4
│   └── spec/
5
│       └── talks.md                   # ✅ 说说内容文件
6
├── types/
7
│   └── config.ts                      # ✅ LinkPreset 枚举定义
8
├── constants/
9
│   └── link-presets.ts                # ✅ 预设映射表
10
├── i18n/
11
│   ├── i18nKey.ts                     # ✅ 国际化键值
12
│   ├── translation.ts                 # 国际化翻译
13
│   └── languages/
14
│       ├── zh_CN.ts                   # ✅ 中文翻译
15
│       ├── en.ts                      # ✅ 英文翻译
16
│       ├── ja.ts                      # ✅ 日文翻译
17
│       ├── zh_TW.ts                   # ✅ 繁体中文翻译
18
│       └── ru.ts                      # ✅ 俄文翻译
19
├── config/
20
│   ├── siteConfig.ts                  # ✅ 页面开关
21
│   └── navBarConfig.ts                # ✅ 导航栏配置
22
├── pages/
23
│   └── talks.astro                    # ✅ 页面路由
24
└── components/
25
    └── layout/
26
        └── Navbar.astro               # 导航栏组件（无需修改）

展开收起

Step 1：创建内容集合

文件：src/content.config.ts

在文件中添加 spec 集合定义（如果还没有的话）：

1
import { defineCollection } from "astro:content";
2
import { glob } from "astro/loaders";
3
import { z } from "astro/zod";
4

5
const postsCollection = defineCollection({
6
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/posts" }),
7
  schema: z.object({
8
    title: z.string(),
9
    published: z.date(),
10
    updated: z.date().optional(),
11
    draft: z.boolean().optional().default(false),
12
    description: z.string().optional().default(""),
13
    image: z.string().optional().default(""),
14
    tags: z.array(z.string()).optional().default([]),
15
    category: z.string().optional().nullable().default(""),
16
    lang: z.string().optional().default(""),
17
    pinned: z.boolean().optional().default(false),
18
    author: z.string().optional().default(""),
19
    sourceLink: z.string().optional().default(""),
20
    licenseName: z.string().optional().default(""),
21
    licenseUrl: z.string().optional().default(""),
22
    comment: z.boolean().optional().default(true),
23
    password: z.string().optional().default(""),
24
    passwordHint: z.string().optional().default(""),
25
    abbrlink: z.string().optional().default(""),
26
    prevTitle: z.string().default(""),
27
    prevSlug: z.string().default(""),
28
    nextTitle: z.string().default(""),
29
    nextSlug: z.string().default(""),
30
  }),
31
});
32

33
// ✅ spec 集合 - 用于说说、相册等特殊页面
34
const specCollection = defineCollection({
35
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/spec" }),
36
  schema: z.object({}),  // schema 为空，灵活度高
37
});
38

39
export const collections = {
40
  posts: postsCollection,
41
  spec: specCollection,
42
};

展开收起

Step 2：创建 Markdown 文件

文件：src/content/spec/talks.md

创建说说内容文件：

1
---
2
title: 说说
3
date: 2026-05-27
4
---
5

6
# 我的说说
7

8
这里可以写你的日常动态、碎碎念，支持所有 Markdown 语法：
9

10
- 2026-05-27：终于把博客导航栏的说说菜单配置好了！
11
- 2026-05-26：相册的加密功能终于跑通了，开心~
12
- 2026-05-25：今天开始学习 Astro 博客搭建，加油！
13

14
> 以后可以在这里随时更新，内容和页面完全分离，维护超方便~

说明：

Frontmatter 字段可选（spec 集合 schema 为空）
建议保留 title 和 date 便于管理
支持标准 Markdown 语法

Step 3：添加枚举值

文件：src/types/config.ts

在 LinkPreset 枚举中添加新值：

1
export enum LinkPreset {
2
  Home = 0,
3
  Archive = 1,
4
  About = 2,
5
  Friends = 3,
6
  Sponsor = 4,
7
  Guestbook = 5,
8
  Bangumi = 6,
9
  Gallery = 7,
10
  Talk = 8,  // ✅ 添加说说枚举值
11
}

注意事项：

枚举值必须唯一（不能与其他值重复）
命名要简洁明了（Talk 而不是 Talks）
后续所有引用必须保持一致

Step 4：添加页面开关

文件：src/config/siteConfig.ts

在 pages 对象中添加开关：

1
export const siteConfig = {
2
  // ... 其他配置
3
  pages: {
4
    home: true,
5
    archive: true,
6
    about: true,
7
    friends: true,
8
    sponsor: true,
9
    guestbook: true,
10
    bangumi: true,
11
    gallery: true,
12
    talks: true,  // ✅ 添加说说开关
13
    // ...
14
  }
15
}

展开收起

说明：

true = 在导航栏显示
false = 在导航栏隐藏
开关关闭时，导航栏和页面都不会生成

Step 5：添加导航栏配置

文件：src/config/navBarConfig.ts

在 getDynamicNavBarConfig 函数中添加菜单项：

1
const getDynamicNavBarConfig = (): NavBarConfig => {
2
  const links: (NavBarLink | LinkPreset)[] = [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
  ];
6

7
  // 根据配置决定是否添加留言板
8
  if (siteConfig.pages.guestbook) {
9
    links.push(LinkPreset.Guestbook);
10
  }
11

12
  // 我的及其子菜单
13
  links.push({
14
    name: "动态",
15
    url: "/my/",
16
    icon: "material-symbols:person",
17
    children: [
18
      // 根据配置决定是否添加相册
19
      ...(siteConfig.pages.gallery ? [LinkPreset.Gallery] : []),
20
      // ✅ 根据配置决定是否添加说说
21
      ...(siteConfig.pages.talks ? [LinkPreset.Talk] : []),
22
      // 根据配置决定是否添加番组计划
23
      ...(siteConfig.pages.bangumi ? [LinkPreset.Bangumi] : []),
24
    ],
25
  });
26

27
  // 关于及其子菜单
28
  links.push({
29
    name: "关于",
30
    url: "/content/",
31
    icon: "material-symbols:info",
32
    children: [
33
      ...(siteConfig.pages.sponsor ? [LinkPreset.Sponsor] : []),
34
      ...(siteConfig.pages.friends ? [LinkPreset.Friends] : []),
35
      LinkPreset.About,
36
    ],
37
  });
38

39
  return { links } as NavBarConfig;
40
};

展开收起

说明：

使用展开运算符 ... 根据开关决定是否添加
可以放在 children 数组中作为子菜单
也可以直接放在 links 数组中作为一级菜单

Step 6：添加预设映射

文件：src/constants/link-presets.ts

在 LinkPresets 对象中添加映射：

1
import I18nKey from "@i18n/i18nKey";
2
import { i18n } from "@i18n/translation";
3
import { LinkPreset, type NavBarLink } from "@/types/config";
4

5
export const LinkPresets: { [key in LinkPreset]: NavBarLink } = {
6
  [LinkPreset.Home]: {
7
    name: i18n(I18nKey.home),
8
    url: "/",
9
    icon: "material-symbols:home",
10
  },
11
  [LinkPreset.About]: {
12
    name: i18n(I18nKey.about),
13
    url: "/about/",
14
    icon: "material-symbols:person",
15
  },
16
  [LinkPreset.Archive]: {
17
    name: i18n(I18nKey.archive),
18
    url: "/archive/",
19
    icon: "material-symbols:archive",
20
  },
21
  [LinkPreset.Friends]: {
22
    name: i18n(I18nKey.friends),
23
    url: "/friends/",
24
    icon: "material-symbols:group",
25
  },
26
  [LinkPreset.Sponsor]: {
27
    name: i18n(I18nKey.sponsor),
28
    url: "/sponsor/",
29
    icon: "material-symbols:favorite",
30
  },
31
  [LinkPreset.Guestbook]: {
32
    name: i18n(I18nKey.guestbook),
33
    url: "/guestbook/",
34
    icon: "material-symbols:chat",
35
  },
36
  [LinkPreset.Bangumi]: {
37
    name: i18n(I18nKey.bangumi),
38
    url: "/bangumi/",
39
    icon: "material-symbols:movie",
40
  },
41
  [LinkPreset.Gallery]: {
42
    name: i18n(I18nKey.gallery),
43
    url: "/gallery/",
44
    icon: "material-symbols:photo-library",
45
  },
46
  // ✅ 添加说说预设映射
47
  [LinkPreset.Talk]: {
48
    name: i18n(I18nKey.talks),
49
    url: "/talks/",
50
    icon: "material-symbols:chat",
51
  },
52
};

展开收起

字段说明：

name：显示的菜单名称（通过 i18n 国际化）
url：点击后跳转的路径
icon：菜单图标（使用 Material Symbols 图标）

Step 7：添加国际化键值

文件：src/i18n/i18nKey.ts

在枚举中添加国际化键值：

1
export enum I18nKey {
2
  // ... 其他键值
3
  home = "home",
4
  archive = "archive",
5
  about = "about",
6
  friends = "friends",
7
  sponsor = "sponsor",
8
  guestbook = "guestbook",
9
  bangumi = "bangumi",
10
  gallery = "gallery",
11
  talks = "talks",              // ✅ 说说标题
12
  talksDescription = "talksDescription",  // ✅ 说说描述
13
  // ...
14
}

注意：需要同时添加标题和描述两个键值。

Step 8：创建页面路由

文件：src/pages/talks.astro

创建说说页面：

1
---
2
import MainGridLayout from "@/layouts/MainGridLayout.astro";
3
import { getEntry, render } from "astro:content";
4
import Markdown from "@components/common/Markdown.astro";
5
import I18nKey from "@/i18n/i18nKey";
6
import { i18n } from "@/i18n/translation";
7

8
// 读取 src/content/spec/talks.md
9
const talksPost = await getEntry("spec", "talks");
10

11
// 检查页面是否可用
12
if (!talksPost) {
13
  throw new Error("Talks page content not found");
14
}
15

16
const { Content } = await render(talksPost);
17
---
18

19
<MainGridLayout
20
  title={i18n(I18nKey.talks)}
21
  description={i18n(I18nKey.talksDescription)}
22
>
23
  <div class="flex w-full rounded-(--radius-large) overflow-hidden">
24
    <div class="card-base z-10 px-9 py-6 relative w-full">
25
      <Markdown class="mt-2">
26
        <Content />
27
      </Markdown>
28
    </div>
29
  </div>
30
</MainGridLayout>

展开收起

注意事项：

import 路径必须包含 .astro 扩展名
getEntry("spec", "talks") 的第一个参数是集合名，第二个是文件名（不含扩展名）
使用 render 函数渲染 Markdown 内容

注意事项

常见错误

错误	原因	解决方案
`LinkPreset.Talks is not defined`	枚举名不一致	检查 `config.ts` 中的枚举名是否为 `Talk`
`Cannot resolve import`	缺少 `.astro` 扩展名	import 路径加上 `.astro`
`Cannot read properties of undefined`	`link-presets.ts` 缺少映射	添加 `LinkPreset.Talk` 的映射
导航栏不显示菜单	页面开关为 `false`	检查 `siteConfig.pages.talks`
页面 404	路由文件不存在	检查 `src/pages/talks.astro`
导航栏显示空白文字	i18n 枚举键名大小写不匹配	见下方 i18n 键名大小写问题

i18n 键名大小写问题

问题描述：添加新功能后，导航栏菜单或页面标题显示为空白，没有文字。

根本原因：src/i18n/i18nKey.ts 中枚举成员名与 link-presets.ts、talks.astro 等文件中的引用名大小写不一致。TypeScript 枚举区分大小写，I18nKey.Talks 和 I18nKey.talks 是不同的键，导致 i18n() 函数找不到翻译，返回空字符串。

错误示例（枚举成员是大写，引用是小写）：

1
// ❌ i18nKey.ts — 枚举成员名是大写 Talk
2
export enum I18nKey {
3
  Talks = "talks",           // 大写 T
4
  TalksDescription = "talksDescription",
5
}
6

7
// ❌ link-presets.ts — 引用的是小写 talks
8
name: i18n(I18nKey.talks),  // 未定义的键 → 返回空字符串
9

10
// ❌ talks.astro — 同样引用小写
11
title={i18n(I18nKey.talks)}

正确写法（统一使用小写 camelCase）：

1
// ✅ i18nKey.ts — 枚举成员名使用小写 camelCase（与其他键保持一致）
2
export enum I18nKey {
3
  home = "home",
4
  archive = "archive",
5
  about = "about",
6
  friends = "friends",
7
  gallery = "gallery",
8
  talks = "talks",                    // 小写 t
9
  talksDescription = "talksDescription",
10
}
11

12
// ✅ link-presets.ts — 引用匹配
13
name: i18n(I18nKey.talks),
14

15
// ✅ talks.astro — 引用匹配
16
title={i18n(I18nKey.talks)}

展开收起

同时别忘了添加翻译：

1
// ✅ src/i18n/languages/zh_CN.ts
2
[Key.talks]: "说说",
3
[Key.talksDescription]: "我的日常动态和碎碎念",
4

5
// ✅ src/i18n/languages/en.ts
6
[Key.talks]: "Talks",
7
[Key.talksDescription]: "My daily updates and thoughts",

排查技巧：如果导航栏或页面标题显示空白，打开浏览器控制台查看是否有 i18n 相关警告，并检查 i18nKey.ts 中枚举成员名是否与所有引用处大小写一致。

完整检查清单

src/content.config.ts 中定义了 spec 集合
src/content/spec/talks.md 文件已创建
src/types/config.ts 中添加了 Talk = 8
src/config/siteConfig.ts 中 talks: true
src/config/navBarConfig.ts 中添加了菜单项
src/constants/link-presets.ts 中添加了预设映射
src/i18n/i18nKey.ts 中添加了 talks 和 talksDescription
src/pages/talks.astro 页面文件已创建

运行测试

Terminal window

1
# 开发模式
2
pnpm dev
3

4
# 构建生产版本
5
pnpm build
6

7
# 预览生产版本
8
pnpm preview

快速参考模板

如果你想添加一个新功能（如”笔记”），只需按以下步骤操作：

1. 创建内容文件

文件：src/content/spec/notes.md

1
---
2
title: 笔记
3
date: 2026-05-27
4
---
5

6
# 我的笔记
7

8
这里记录学习笔记和技术心得...

2. 添加枚举值

文件：src/types/config.ts

1
export enum LinkPreset {
2
  // ...
3
  Talk = 8,
4
  Notes = 9,  // ✅ 新增
5
}

3. 添加页面开关

文件：src/config/siteConfig.ts

1
pages: {
2
  // ...
3
  talks: true,
4
  notes: true,  // ✅ 新增
5
}

4. 添加导航栏配置

文件：src/config/navBarConfig.ts

1
children: [
2
  ...(siteConfig.pages.gallery ? [LinkPreset.Gallery] : []),
3
  ...(siteConfig.pages.talks ? [LinkPreset.Talk] : []),
4
  ...(siteConfig.pages.notes ? [LinkPreset.Notes] : []),  // ✅ 新增
5
],

5. 添加预设映射

文件：src/constants/link-presets.ts

1
[LinkPreset.Notes]: {
2
  name: i18n(I18nKey.notes),
3
  url: "/notes/",
4
  icon: "material-symbols:note",
5
},

6. 添加国际化键值

文件：src/i18n/i18nKey.ts

1
notes = "notes",
2
notesDescription = "notesDescription",

7. 创建页面路由

文件：src/pages/notes.astro

1
---
2
import MainGridLayout from "@/layouts/MainGridLayout.astro";
3
import { getEntry, render } from "astro:content";
4
import Markdown from "@components/common/Markdown.astro";
5
import I18nKey from "@/i18n/i18nKey";
6
import { i18n } from "@/i18n/translation";
7

8
const notesPost = await getEntry("spec", "notes");
9
if (!notesPost) {
10
  throw new Error("Notes page content not found");
11
}
12
const { Content } = await render(notesPost);
13
---
14

15
<MainGridLayout
16
  title={i18n(I18nKey.notes)}
17
  description={i18n(I18nKey.notesDescription)}
18
>
19
  <div class="flex w-full rounded-(--radius-large) overflow-hidden">
20
    <div class="card-base z-10 px-9 py-6 relative w-full">
21
      <Markdown class="mt-2">
22
        <Content />
23
      </Markdown>
24
    </div>
25
  </div>
26
</MainGridLayout>

展开收起

总结

添加自定义导航栏菜单项需要修改 8 个文件：

序号	文件	修改内容
1	`src/content.config.ts`	定义内容集合（通常已存在）
2	`src/content/spec/xxx.md`	创建 Markdown 内容文件
3	`src/types/config.ts`	添加 `LinkPreset` 枚举值
4	`src/config/siteConfig.ts`	添加 `pages.xxx` 开关
5	`src/config/navBarConfig.ts`	添加导航栏菜单项
6	`src/constants/link-presets.ts`	添加预设映射
7	`src/i18n/i18nKey.ts`	添加国际化键值（注意小写 camelCase）
8	`src/pages/xxx.astro`	创建页面路由文件

别忘了：在 src/i18n/languages/ 下的所有语言文件中添加对应的翻译条目，否则导航栏和页面标题会显示空白。

按照以上步骤操作，即可成功添加自定义导航栏菜单项。

java学习笔记上

Tue, 09 Aug 2022 18:19:03 GMT

javase

命名规范

编写helloworld

1
public class helloworld {
2
    public static void main(String[] args) {
3
        System.out.println(hello world);
4
    }
5
}

快捷键 psvm敲出程序主入口，sout敲出打印语句

初步认识

变量

变量的概念：内存中的一个存储区域该区域的数据可以在同一类型范围内不断变化变量是程序中最基本的存储单元。包含变量类型、变量名和存储的值变量的作用：用于在内存中保存数据使用变量注意： Jaja中每个变量必须先声明，后使用使用变量名来访问这块区域的数据变量的作用域：其定义所在的一对{内变量只有在其作用域内才有效同一个作用域内，不能定义重名的变量

变量的数据类型

基本数据类型：整型：byte\short\int \lonl浮点型：float\double 字符型：char布尔型：boolean 引用数据类型：类（class）接口（interface）数组(array)

运算符

&：并且，两边都为真，结果才是真System.out.println(true & true); ||:或者，两边都为假，结果才是假

^：相同为false，不同为true ！:取反 &&:并且，两边都为真，结果才是真:或者，两边都为假，结果才是假

1
// 三元运算符示例代码
2
public class Tree {
3
public static void main(String[] args){
4
int num1 = 10;
5
int num2 = 20;
6
int max = num1 > num2 ? num1 : num2;
7
System.out.println(max);
8
System.out.println(num1 > num2 ? num1 : num2);
9
continue;
10
//结束本次循环,继续下次循环
11
//break;//结束整个循环

1
//switch语句
2
public class Swich {
3
public static void main(String[] args) {
4
Scanner sc = new Scanner(System.in);
5
System.out.print("请输入您的选择:");
6
int choose = sc.nextInt();
7
switch (choose) {
8
case 1:
9
System.out.println("机票查询");
10
break;
11
case 2:
12
System.out.println("机票预订");
13
break;
14
case 3:
15
System.out.println("机票改签");
16
break;
17
case 4:
18
System.out.println("退出服务");
19
break;
20
default:
21
System.out.println("输入有误");
22
break;

展开收起

Scanner输入包

1
import java.util.Scanner;
2
public class test2 {
3
public static void main(String[] args) {
4
Scanner sc =new Scanner(System.in);
5
System.out.println("请输入一个整数");
6
int a =sc.nextInt();
7
System.out.println(a);
8
//Scanner后按回车自动生成import java.util.Scanner输入文字
9
    //放数据数据类型+变量名
10
    //修改 变量名=
11
}

循环

循环的认识

一,循环结构的4个要素 1.初始化条件 2.循环条件----boolean类型 3.循环体 4.迭代条件二 for 循环的结构 for(1;2;4){ 3;

一些练习

1
//1到100累加
2
public class fori3 {
3
public static void main(String[] args) {
4
intsum=0;
5
for (int i = 1; i < 101; i++) {
6
if(i%2==0){
7
sum=sum+i;
8
J
9
System.out.println("1到100之间的偶数和为"+sum);
10
}
11
}

1
//提取每一位
2
public class ShuiXian {
3
public static void main(String[] args) {
4
for(int i = 100;i<1000;i++){
5
inta=i%10;//个位
6
intb=i/10%10;//十位
7
intc=i/100;//百位
8
if(i == Math.pow(a,3)+Math.pow(b,3)+Math.pow(c,3))
9
System.out.println(i);

1
///逢七必过
2
public class for7{{
3
public static void main(String[] args) {
4
//逢7必过
5
for (int i = 1; i < 100; i++) {
6
if(i % 10 == 7 || i / 10 == 7
7
i % 7 == 0){
8
System.out.println("过");
9
continue;
10
System.out.println(i);
11
//break推出整个程序continue跳过这步进入下一步
12
//fori快捷生成循环语句，5.fori   i<5  ||或者  &&并且

1
//while循环
2
public class Wile {
3
public static void main(String[] args) {
4
double paper=0.1;
5
int moutain=884430;
6
int count=0;
7
while(paper moutain){
8
paper=paper*2;
9
count++;
10
System.out.println("需要"+count+"天");
11
}
12
}

数组

特点

数组的特点

3.数组的特点: 1)数组是有序排列的 2)数组属于引用数据类型的变量。数组的元素,既可以是基本数据类型,也可以是引用数据类型 3)创建数组对象会在内存中开辟一整块连续的空间 4)数组的长度一旦确定,就不能修改。

静态初始化

1
静态初始化
2
public class arrtest1 {
3
public static void main(String[] args) {
4
int[] arr = {11, 22, 33, 44, 55};
5
int num = arr[0];
6
System.out.println(num);
7
//sout打印
8
//0为索引
9
//修改数据
10
arr[0] = 33;
11
System.out.println(arr[0]);
12
}

数组遍历

1
public class arrtest2 {
2
public static void main(String[] args) {
3
int[] arr = {11, 22, 33, 44, 55, 66, 77, 88, 999,1111,111111, 555, 666};
4
//arr.fori遍历数组
5
for (int i = 0; i < arr.length; i++) {
6
System.out.println(arr[i]);
7
}
8
//for增强循环iter快捷键
9
for (int i : arr){
10
System.out.println(i);
11
}
12
//遍历数组
13
//最大索引为长度减一
14
//.意味着调用

1
public class
2
arrtest3{
3
public static void main(String[] args) {
4
int[] arr={11,33,44};
5
int sum=0;
6
//arr.fori快速生成遍历数组
7
for (int i = 0; i < arr.length; i++) {
8
sum=arr[i]+sum;
9
}
10
System.out.println(sum);
11
儿数组遍历加累加求和
12
}

动态初始化

1
public class arrtest5 {
2
public static void main(String[] args) {
3
//创建数组不知道要储放的数据
4
//int[] arr=new int[长度];第二种
5
//数组中有int默认值为0,double默认值为0.0由虚拟机给出默认值
6
int [] arr = new int[3];
7
//修改了数组中的默认值
8
arr[0]=10;
9
arr[1]=20;
10
arr[2]=30;
11
for (int i = 0; i < arr.length; i++) {
12
System.out.println(arr[i]);

1
//未知数求和
2
import java.util.Scanner;
3
public class
4
arrtest6 {
5
public static void main(String[] args){/main方法名
6
int[]arr=new int[5];//不知道放什么
7
Scanner sc=new Scanner(System.in);
8
for (int i = 0; i < arr.length; i++) {
9
System.out.println("请输入数组中的数字");
10
int num=sc.nextInt();//每次输入
11
arr[i]=num;//把输入的数字放入数组中
12
}
13
intsum=0;//遍历求和
14
for (int i = 0; i < arr.length; i++) {sum=arr[i+sum;
15
}
16
System.out.println(sum);

展开收起

获取数组中最大值

1
public class max {public static void main(Strring[] args)
2
int[] arr = {11, 22, 33, 44, 55};
3
//获取数组中的最大值
4
//假设第一个元素是最大值
5
int max = arr[0];
6
for
7
(inti=0; i < arr.length; i++) {
8
if
9
(max < arr[i]) {
10
max = arr[i];
11
}
12
System.out.println(max);

转置数组

1
public class
2
arrtest8 {
3
public static void main(String[] args) {
4
//动态初始化,指针双变量
5
int[]arr={1,2,3,4,5};
6
for(int i =0,j=arr.length-1;i<j;i++,j--)
7
{int temp=arr[i];
8
arr[i]=arr[j];
9
arr[j]=temp;
10
}
11
for
12
(int i=0; i <arr.length;i++){
13
System.out.print(arr[i]);

二维数组

1
public static void main(String[] args) {
2
//int[][] arr = new int[3][4];//创建二维数组不知道内容
3
int[][] arr = {{1, 2, 3, 4}, {5, 6, 7, 8}, {9, 10,11,12}};//知道内容
4
//获取6
5
System.out.println(arr[1][1]);
6
//遍历二维数组
7
for (int i = 0; i < arr.length; i++) {
8
for (intj=0;j<arr[i].length;j++){
9
System.out.print(arr[i][j]+" ");
10
//迭代器循环
11
    for (int[] ints:arr){
12
for (int anInt : ints){
13
System.out.println(anInt);
14
System.out.println();//换行嵌套在循环以内
15
}
16
}
17
//不知道二维数组的内容
18
//int [][]arr=new int[3][4];
19
//3为二维数组的行数,4为二维数组的列数

展开收起

创建不重复的二维数组

1
public class arr5 {
2
public static void main(String[] args) {
3
//创建一个6的int数组 元素在1-30 是随机赋值 而且元素值各不相同
4
int[] arr = new int[6];
5
for (int i = 0;i<arr.length;i++){
6
boolean count = true;
7
int value = (int)(Math.random()*29 + 1);
8
for (int j = 0;j<=i;j++) {
9
if(value==arr[j])//如果有和前面相同的就false 不打和
10
count = false;
11
i--;//这次没有加入数据 重新来
12
break;
13
if(count){
14
arr[i] = value;
15
for (int name : arr){
16
System.out.println(name);
17
}
18
}

展开收起

数组的应用

数组反转

1
public class arr6{
2
public static void main(String[] args) {
3
String[] arr = new String[]{"JJ", "DD", "CC", "XX","YY"};
4
String[] arr1 = new String[arr.length];
5
//数组的复制(和arr1=arr不同)
6
System.arraycopy(arr, srcPos: 0, arr1, destPos: 0, arr.length);
7
for (String arr01 : arr1){
8
System.out.print(arr01 + " ");
9
System.out.println();
10
System.out.print("方法一:");
11
//数组的反转
12
//方法一
13
for (intj=0;j<arr.length/2;ji++){
14
String temp = arr[j];
15
arr[j] = arr[arr.length - j - 1];
16
arr[arr.length - j - 1] = temp;
17
for (String arr02 : arr){
18
System.out.print(arr02 + " ");
19
}
20
}
21
//方法二再把arr返一下
22
System.out.println();
23
System.out.print("方法二:");
24
for (inti= 0,j = arr.length - 1; i <j; i++,j--){
25
String temp2 = arr[i];
26
arr[i] = arr[j];
27
arr[j] = temp2;
28
for (String arr02 : arr){
29
System.out.print(arr02 + " ");

展开收起

线性查找

1
import java.util.Scanner;
2
public class arrtest01{
3
public static void main(String[] args) {
4
Scanner input = new Scanner(System.in);
5
String[] arr = new String[]{"JJ", "DD", "CC", "XX", "XX", "٧٧"};
6
//线性查找
7
System.out.print("请输入你要查找的字符:");
8
String test = input.nextline();
9
boolean count = true;
10
for (int a = 0; a < arr.length; a++) {
11
if(test.equals(arr[a])) {
12
System.out.print("找到了指定元素的位置");
13
System.out.println(a);
14
count = false;
15
break;
16
(count)
17
System.out.println("很遗憾,没找到");
18
}

展开收起

二分查找

1
public static void main(String[] args) {
2
int[] arr1 = new int[]{-89, -6, 1, 6, 7, 23, 44,77,80,82}
3
Scanner input = new Scanner(System.in);
4
System.out.print("请输入你要查找的数字:");
5
int test1 = input.nextInt();
6
int start=0;
7
int end = arr1.length - 1;
8
while (start<= end){
9
int middle = (start + end) / 2;
10
if(test1== arr1[middle]) {
11
System.out.println("找到了指定元素,位置:"+"["+middle + "]");
12
break;
13
} else if (arr1[middle] > test1) {
14
end = middle - 1;
15
}else{
16
start = middle + 1;
17
}
18
if(start>end){
19
System.out.println("未找到指定元素");
20
}
21
input.close();

展开收起

冒泡排序

1
public class ArrayTest03 {
2
public static void main(String[] args) {
3
//冒泡排序
4
int [] arr = new int[]{-5٫-9,5,1,9,7,6,5,3,4};
5
for (int i = 0;i<arr.length-1;i++){
6
for (int j = 0;j < arr.length - 1 -i;j++){
7
if (arr[j] > arr[j+1]){
8
int temp = arr[j];
9
arr[j] = arr[j+1];
10
arr[j+1] = temp;
11
}
12
for (int num : arr){
13
System.out.print(num+" ");
14
}
15
}

展开收起

数组复制

1
import java.util.Arrays;
2
import java.util.Scanner;
3
public class sum {
4
public static void main(String[] args) {
5
int [] list = new int[]{34,5,22,-98,-3,-76,0};
6
//复制 得到新数组
7
int[] list1 = new int[list.length];
8
for (int y = 0;y < list.length;y++){
9
list1[y] = list[y];
10
}
11
System.out.println(Arrays.toString(list1));
12
}

String的方法

1
import java.util.Random;
2
import java.util.Scanner;
3
public class arrtest9 {
4
public static void main(String[] args) {
5
1储存所有的大、小写字母
6
char[] letts = new char[52];
7
for (int i = 0;i<letts.length;i++){
8
if(i<=25){
9
//添加a~z
10
letts[i] = (char)(97+i);
11
}else {
12
//添加A~Z
13
letts[i] = (char)(65+i-26);
14
}
15
}
16
//A转换为ASCII的值
17
2、随机抽取数组中的索引
18
Random r = new Random();
19
String result = "";
20
for (int i = 0; i < 4; i++) { //4.fori
21
int randomData = r.nextInt(letts.length);
22
result +=
23
letts[randomData];
24
3、随机抽取一个0-9的数字
25
int num = r.nextint( bound: 10);
26
result += num;
27
System.out.println(result);
28
}

展开收起

Arrays方法

1
public class arr01 {
2
public static void main(String[] args) {
3
//1.boolean equals(int[] a,int[] b);判断两个数组是否相等
4
int [] arr1= new int[]{1,2,5,6};
5
int [] arr2= new int[]{1,8,2,6,-5};
6
boolean isEquals = Arrays.equals(arr1,arr2);
7
System.out.println(isEquals);
8
//2.String toString(int[] a)输出数组信息
9
System.out.println(Arrays.toString(arr1));
10
//3.void fill(int yal)将定值填充到数组中
11
Arrays.fill(arr1, val: 10);
12
System.out.println(Arrays.toString(arr1));
13
//4. void sort(int[] a)
14
Arrays.sort(arr2);
15
System.out.println(Arrays.toString(arr2));
16
// 5.int binarySearch(int[] a,int key)
17
int [] arr3 = new int[]{-97,24,-56,-4,2,25,46,23,9,82,11,19};
18
Arrays.sort(arr3);//先进行排序
19
int index = Arrays.binarySearch(arr3, key: 46);
20
System.out.println(index);

展开收起

{% folding 参数（可选）, 数组异常 %} //1,数组脚边越界异常ArrayIndexOutOfBoundsExceptioon int[] arr1 = new int[]{1,2,3}; //情况一 for (int i = 0;i<= arr1.length;i++){ System.out.println(arr1[i]); } //情况二 System.out.println(arr1[-1]); //2,空指针异常NullPointerException //情况一 int[] arr2 = new int[]{1,2,5,6}; arr2 = null; System.out.println(arr2[0]);//情况二 int[][] arr3 = new int[4][]; System.out.println(arr3[0][0]); //情况三 String[] arr4 = new String[]{“AA”,“BB”,“CC”}; arr4[0] = null; System.out.println(arr4[0].toString

方法

初识

1
public class MethodTest1{
2
public static void main(String[] args) { printlnfo();//调用函数 //主入口
3
//方法使独立功能实现
4
11定义格式
5
//public static void
6
//调用格式:方法名()
7
方法名()
8
//注意1.方法之间不能嵌套
9
//2、方法需要被调用例如python中的def
10
public static void printlnfo(){1个用法
11
System.out.println("姓名小丹丹");
12
System.out.println("年龄:18");
13
System.out.println("性别:女");
14
所有的方法都需要写在public class类名{}里面
15
}

展开收起

传参

1
public class MethodTest3 {
2
public static void main(String[] args) {
3
调用函数时传参
4
rectangle(len:5.5,width:3.3);//实参
5
//方法的第二种格式:传参public static void方法名(参数1,参数2){}位置传参一一对应
6
public static void rectangle(double len,double width){//形参1个用法
7
double area = len*width;
8
System.out.println(area);
9
//此代码在终端直接显示
10
}

调回

单一元素调回

1
//判断是否含某一元素
2
public class MthodTest7{}
3
public static void main(String[] args) {
4
int[] arr = {1,2,3,4,5,6,7,8,9,10};
5
boolean b = contains(arr, end: 0);
6
System.out.println(b);
7
}
8
public static boolean contains ( int[]arr, int eend){
9
for (int i = 0; i < arr.length; i++) {
10
if(arr[i]==end){return true;}
11
}
12
return false;
13
}

多个元素调回

1
//两个数据传输
2
public static int[] gerTwonumber2(){ 4个用法
3
Scanner sc = new Scanner(System.in);
4
System.out.println("请录入第一个整数");
5
int num1 = sc.nextInt(
6
System.out.println("请录入第二个整数");
7
int num2 = sc.nextInt(
8
//在java中方法只能返回一个值,多个数据返回需要数组
9
int[] arr = {num1, num2};
10
return arr;

1
//复制指定范围的元素
2
public class MethodTest8 {
3
public static void main(String[] args) {
4
int[] arr = {1,2,3,4,5,6,7,8,9,10};
5
int[]copyarr=printArray(arr, start:1, end:5);
6
for (inti=0;i<copyarr.length;i++){
7
System.out.print(copyarr[i]);
8
public static int[] printArray(int[] arr, int startt, int end){
9
//定一个新数组去放start到end的元素
10
int[]newArr = new int[end-start];
11
// 伪造新数组的索引方便复制
12
int index=0;
13
for(inti=start;i<end;i++){
14
newArr[index] = arr[i];
15
index++;
16
return newArr;

展开收起

方法重载

面向对象

认识面向对象

初识

一、Java面向对象学习的三条主线: (第4-6章) 1.Java类及类的成员:属性、方法、构造器;代码块、内部类 2.面向对象的三大特征:封装性、继承性、多态性、(抽象性) 3.其它关键字:this、super、static、final、abstract、interface、package、impo “大处着眼,小处着手” 二、类和对象的使用(面向对象思想落地的实现): 1.创建类,设计类的成员 2.创建类的对象 3.通过”对象.属性”或”对象.方法”调用对象的结构

1
class Person{
2
5个用法
3
//属性javabean
4
intage=18;4个用法
5
Stringnames;7个用法
6
booleanisMale;1个用法
7
//方法
8
public void eat(String name){
9
System.out.println(name+"要吃饭");
10
public void play(String name){1个用法
11
System.out.println(name+"喜欢玩游戏");
12
}
13
public void ages(String name,int age){1个用法
14
System.out.println(name+"今年" + age+"岁");
15
}
16
public void talk(String language){1个用法
17
System.out.println("全世界都在说"+language);
18
public class classTest {
19
public static void main(String[] args) {
20
//创建Person类的对象
21
Person p1 = new Person();
22
√调用对象的结构:属性、方法
23
调用属性:对象.属性
24
p1.names="小明";
25
p1.isMale = true;
26
System.out.println(p1.names);
27
p1.eat(p1.names);
28
p1.play(p1.names);
29
p1.ages(p1.names,p1.age);
30
p1.talk(language:"中国话");
31
System.out.println("p2
32
Person p2 = new Person();
33
System.out.println(p2.names);
34
System.out.println(p2.age);
35
System.out.println();
36
*************************************
37
System.out.println("p3 ***************
38
*****************").
39
Person p3 = p1;
40
System.out.println(p3.names);
41
//将p1 变量保存的对象地址赋给了p3导致 p1和p3指向同个堆
42
p3.age = 21;
43
System.out.println(p1.age);
44
//自己的理解就是p1和p3是同一个p3是p1的别名

展开收起

对象的内存解析

分为栈和堆栈是类中的属性堆是方法中的局部变量

局部变量和属性的异同

两者的区别

1.相同点: 1.1定义变量的格式:数据类型变量名=变量值 1.2先声明,后使用 1.3变量都有其对应的作用域 2.不同点: 2.1在类中声明的位置的不同属性:直接定义在类的一对{}内局部变量:声明在方法内、方法形参、代码块内、构造器形参、构造器内部的变量 2.2关于权限修饰符的不同属性:可以在声明属性时,指明其权限,使用权限修饰符。常用的权限修饰符:private、public、缺省、protected 目前,大家声明属性时,都使用缺省就可以了。 --->封装性局部变量:不可以使用权限修饰符。

1
属性(成员变量)vs局部变量
2
public class oop1 {
3
public static void main(String[] args) {
4
User p1 = new User();
5
System.out.println(p1.name);
6
System.out.println(p1.age);
7
System.out.println(p1.isMale);
8
p1.talk(language:"中文");
9
p1.eat();
10
class User{2个用法
11
//属性(成员变量)
12
Stringname;1个用法
13
public int age;
14
booleanisMale;1个用法
15
public void talk(String language){//Language形参 也是局部变量1个用法
16
System.out.println("我们使用"+ language+"说话")
17
public void eat(){String food="烙饼";// 局部变量
18
System.out.println("北方人喜欢吃"+ food);

展开收起

默认初始化情况

属性:类的属性,根据其类型,都有默认初始化值。整型(byte、short、int、long):0 浮点型(float、double):0.0 字符型(char):0(或’\u000’) 布尔型(boolean):false 引用数据类型(类、数组、接口):nul 局部变量:没有默认初始化值。意味着,我们在调用局部变量之前,一定要显式赋值。特别地:形参在调用时,我们赋值即可。 2.4在内存中加载的位置: 属性:加载到堆空间中(非static) 局部变量:加载到栈空间

方法声明

初识

1.举例: public void eat(){} public void sleep(int hour){} public StringgetName(){} public StringgetNation(String nation){} 2.方法的声明:权限修饰符返回值类型方法名(形参列表){ 方法体注意:static、final、abstract来修饰的方法,后面再研。说明: 3.1关于权限修饰符:默认方法的权限修饰符先都使用public Java规定的4种权限修饰符:private、public、缺省、protectted —>封装性再细 3.2返回值类型:有返回值Vs没有返回值 3.2.1如果方法有返回值,则必须在方法声明时,指定返回值的类型。同时,方法中,需要使用 return关键字来返回指定类型的变量或常量:“return数据” 如果方法没有返回值,则方法声明时,使用void来表示。通常,没有返回值的方法中,就使用return.但是,如果使用的话,只能”return;“表示结束此方法的意思

4.return关键字的使用: 1.使用范围:使用在方法体中 2.作用: 结束方法针对于有返回值类型的方法,使用”return数据”方法返回所要的数据 3.注意点:return关键字后面不可以声明执行语句。 5.方法的使用中,可以调用当前类的属性或方法特殊的:方法A中又调用了方法A:递归方法。方法中,不可以定义方法。

练习

1
import java.util.Arrays;
2
public class oop2 {
3
public static void main(String[] args) {
4
Customer p1 = new Customer
5
p1.name = "Tom";
6
p1.age = 19;
7
p1.eat();
8
p1.sleep(hour:5);
9
System.out.println(p1.getName());
10
System.out.println(p1.getNation("中国");
11
int[] arr = new int[]{1,5,9,-6,-2,4,2};
12
p1.sort(arr);|
13
System.out.println(Arrays.toString(arr));
14
}
15
J
16
class Customer{2个用法
17
//属性
18
Stringname;2个用法
19
intage;2个用法
20
//方法
21
public void eat(){
22
System.out.println("吃饭咯");
23
public void sleep(int hour){1个用法
24
System.out.println("我睡了"+ hour +"个小时");
25
//方法内方法
26
eat();
27
//sleep(2);
28
public String getName(){
29
if (age>18){
30
return name;
31
}
32
else {
33
return
34
"小学生";
35
public String getNation(String nation){1个用法
36
return"我的国籍是"+ nation;
37
public void sort(int[] arr){1个用法
38
for (int i = 0;i<arr.length-1;i++){
39
for (intj=0;j<arr.length - 1 -i;j++){
40
if (arr[j] > arr[j+1]){
41
int temp = arr[j];
42
arr[j] = arr[j+1];
43
arr[j+1] = temp;}

展开收起

递归性和封装性

递归和斐波那契数列

1
public static void main(String[] args) {
2
//计算1-100的自然数的和
3
//方式一
4
int sum = 0;
5
for(int i =1;i<=100;i++){
6
sum += i;
7
}
8
System.out.println(sum);
9
//方式
10
digui test = new digui(
11
System.out.println(test.getSum(
12
//例二
13
num:100));
14
System.out.println(test.f( num: 10));
15
//斐波那契
16
System.out.println(test.fibonacci( num: 10));
17
 public int getSum(int num){2个用法
18
if(num== 1){
19
return 1;
20
return num + getsum(num: num-1);
21
//例题有一个数列f(0)=1,f(1)=4,f(n+2)=2*f(n+1)+f(n)
22
//求f(10)
23
public int f(int num){ 3个用法
24
if(num=== 0){
25
return 1;
26
else if (num == 1){
27
return 4;
28
return f( num: num-2) + (2*f( num-1));
29
}

展开收起

1
//斐波那契数列
2
//1 1 2 3 5 8 13 21 34 55
3
public int fibonacci(int num){3个用法
4
if(num== 1|num==2){
5
return 1;
6
return fibonacci(num: num-1)+fibonacci(num:num-2);
7
}

封装性

封装和隐藏

我们程序设计追求”高内聚,低耦合”。高内聚:类的内部数据操作细节自己完成,不允许外部干涉步; 低耦合:仅对外暴露少量的方法用于使用。隐藏对象内部的复杂性,只对外公开简单的接口。便于外界调用,从而提高系统的可扩展性、可维护性。通俗的说,把该隐藏的隐藏起来,该暴露的暴露出来。这就是封装性的设计思想。

private关键字

(1)private关键字: 是一个权限修饰符,用于修饰成员变量和成员方法. 私有是针对类,而不是针对对象,也就是说,同一个类的所有的不同的不同的的对象之间,可以互相访问别的对象的的私有的成员. 被私有化的成员只在本类中有效. (2)javabean/常用于: 将成员变量私有化,对外提供对应的set(),get()方法。提高对数据访问的安全性。

1
public class AnimalTest {
2
public static void main(String[] args)
3
Animal animal = new Animal
4
animal.name="大黄";
5
animal.age = 5;
6
animal.setLegs(4);
7
System.out.println(animal.getlegs
8
animal.show();
9
animal.eat
10
class Animal{2个用法
11
Stringname;2个用法
12
intage;2个用法
13
private int legs;
14
//属性的设置
15
//private 4个用法
16
// 快捷键alt+insert
17
//ptg一秒生成javaBean类
18
public void setlegs(int 1){1个用法
19
if(1>0 0 & 1 % 2 == 0){
20
legs = l;
21
else {
22
legs = 0;
23
//属性的获取
24
public int getlegs(){ 1个用法
25
return legs;
26
public void eat(){
27
System.out.println("吃东西");

展开收起

封装性体现

二、封装性的体现: 我们将类的属性xxx私有化(private),同时,提供公共的(public)法来获取(getxxx)和设置 set) 拓展:封装性的体现: 如上不对外暴露的私有的方法单例模式 . 三、封装性的体现,需要权限修饰符来配合 1.Java规定的4种权限(从小到大排列) brivate、缺省、protected 、public

构造器

初识构造器

类的结构之三:构造器(或构造方法、constructor)的使通 construct:建设、建造。construction:CCB constructor:建设者一、构造器的作用: 1.创建对象 2.初始化对象的属性二、说明: 1.如果没有显式的定义类的构造器的话,则系统默认提供一个空参的构造器 2.定义构造器的格式:权限修饰符类名(形参列表){}

3.一个类中定义的多个构造器,彼此构成重载 4.一旦我们显式的定义了类的构造器之后,系统就不再提供默认人的空参构造器 5.一个类中,至少会有一个构造器。

作用与特征

构造器的特征

它具有与类相同的名称它不声明返回值类型。(与声明为void不同) 不能被static、final、synchronized、abstract、native修饰,不能有return语句返回值构造器的作用:创建对象;给对象进行初始化如:Ordero=new Order(); Person p = new Person(“Peter”,15); 如同我们规定每个”人”一出生就必须先洗澡,我们就可以在”人”的构造器中加入完成”洗澡”的程序代码,于是每个”人” 出生就会自动完成”洗澡”,程序就不必再在每个人刚出生时一个一个地告诉他们要”洗澡”了。

1
public class constructor1 {
2
public static void main(String[] args) {
3
//创建类的对象:new+构造器
4
Perso p = new Perso();
5
p.eat();
6
Perso p1 = new Perso( n: "Tom", a: 18);
7
p1.show();
8
class Perso{ 4个用法
9
Stringname;2个用法
10
intage;2个用法
11
public Perso(){1个用法
12
System.out.println("Person().....");
13
public Perso(Stringn,inta){1个用法
14
name = n;
15
age = a;}

展开收起

赋值的过程

1
package oop;
2
public class constructor2 {
3
public static void main(String[] args) {
4
User user = new User();
5
System.out.println(user.age);
6
User user1 = new User( a: 2);
7
user1.setAge(4);
8
System.out.println(user1.age);
9
}
10
}
11
class User{
12
String name;|
13
1个用法
14
int age=1;
15
public User(){
16
1个用法
17
//空参构造
18
}
19
public User(inta){ 1个用法
20
age = a;
21
//赋值 构造器中括号中参数
22
}
23
public void setAge(int a){
24
age = a;

展开收起

关键字

static关键字

初识static关键字

static关键字的使用 1.static:静态的 2.static可以用来修饰:属性、方法、代码块、内部类

3.使用static修饰属性:静态变量(或类变量) 3.1属性,按是否使用static修饰,又分为:静态属性Vs非静态属性(实例变量) 实例变量:我们创建了类的多个对象,每个对象都独立的拥有一套类中的非静态属性。当修改其中一个对象中的非静态属性时,不会导致其他对象中同样的属性值的修改。我们创建了类的多个对象,多个对象共享同一个静态变量。当通过某一个对象修改静态变量时,会导致其他对象调用此静态变量时,是修改过了的。 3.2static修饰属性的其他说明: 静态变量: 静态变量随着类的加载而加载。可以通过”类·静态变量”的方式进行调用静态变量的加载要早于对象的创建。由于类只会加载一次,则静态变量在内存中也只会存在一份:存在方法区的静态域中。

1
class Chinese{
2
String name;
3
int age;
4
static String nation;
5

6
public void eat(){
7
System.out.println("我要吃饭");
8

9
public static void show(){
10
System.out.println("我是一个中国人!");
11
//不能调用非静态结构 eat() name:= "Tom"方法和属性
12
System.out.println(Chinese.nation);
13
walk();//静态方法
14
System.out.println("nation : "+ nation);
15
public static void walk(){
16
System.out.println("走路");
17

18
public void info(){
19
System.out.println("name = " + name + " age = " + age)
20

21
public class StaticTest {
22
public static void main(String[] args) {
23
Chinese.nation="中国人";
24
Chinese chinese1 = new Chinese();
25
chinese1.name="汪大东";
26
chinese1.age = 28;
27
Chinese chinese2 = new Chinese
28
chinese2.name="金宝三";
29
chinese2.age = 34;
30
Chinese chinese3 = new Chinese
31
chinese3.name="林丹";
32
chinese3.age = 32;
33
Chinese.show() ;

展开收起

注意事项

与this,super不共用，静态调静态。非静态都能调

static关键字的应用

修改静态变量

静态变量

静态变量属于类的本身，而非类的实例对象，所有实例共享同一份静态变量

生命周期与类一致，在类加载时初始化，程序结束时销毁，不依赖于对象的创建

静态变量在内存中只有一份拷贝，在JVM加载类的时候，只为静态分配一次内存

访问方式可以直接通过类名.变量名访问，无需创建对象

static的应用场景

开发中,如何确定一个属性是否要声明为static的?

属性是可以被多个对象所共享的,不会随着对象的不同而不同的

开发中,如何确定一个方法是否要声明为static的? 操作静态属性的方法,通常设置为static的工具类中的方法,习惯上声明为static的。比如:Math、Arrays、Collections

1
class Counter {
2
    static int count = 0; // 静态变量，所有实例共享
3
    int id; // 实例变量，每个对象独有
4

5
    public Counter() {
6
        count++; // 每次创建对象，静态变量自增
7
        id = count;
8
    }
9
}

修饰内部类(静态内部类)

静态内部类

静态内部类不依赖外部类的实例，可以直接创建或者通过外部类.内部类访问

静态内部类中不能直接访问外部类的非静态成员

1
class Outer {
2
    static class Inner { // 静态内部类
3
        void print() {
4
            System.out.println("静态内部类");
5
        }
6
    }
7
}
8

9
// 使用方式
10
Outer.Inner inner = new Outer.Inner();
11
inner.print();

静态代码块

静态代码块用static{}定义，在类加载的时候执行，只会执行一次，常用于初始化静态变量

静态导入（Java）：通过import static直接导入类的静态成员，简化调用比如（import static Java.lang.Math.PI）

核心特点总结:static成员属于类，而非对象，节省内存（单份拷贝）生命周期与类绑定，独立于对象的创建/销毁

访问无需实例化，适合定义工具方法、共享状态等场景

static内存分析

类加载的时候，静态变量/方法会被分配到方法区（JDK8后为元空间），而实例变量存储到堆内存中

方法区是线程共享的内存区域，因此静态成员本质上是全局共享资源，所有对象操作的都是同一份数据

1
class Test {
2
    static int a = 10; // 方法区
3
    int b = 20;       // 堆内存（每个对象独立）
4
}

初始化顺序

静态成员——静态代码块——实例成员——构造代码块——构造方法

静态代码块仅在类第一次加载时执行，按定义的顺序执行

1
class InitOrder {
2
    static int x = 1;
3
    static { x = 2; } // 静态代码块，类加载时执行
4
    static { x = 3; } // 后执行，覆盖前值
5

6
    public static void main(String[] args) {
7
        System.out.println(x); // 输出 3
8
    }
9
}

特殊作用

设计模式

静态内部类是独立的类，仅在语法上嵌套在外部类中，不持有外部类的引用

非静态内部类会隐式持有外部类实例的引用，可能导致内存泄漏（内部类生命周期长于外部类）

1
class User {
2
    private String name;
3

4
    private User(Builder builder) {
5
        this.name = builder.name;
6
    }
7

8
    // 静态内部类作为建造者
9
    static class Builder {
10
        private String name;
11

12
        Builder name(String name) {
13
            this.name = name;
14
            return this;
15
        }
16
        User build() {
17
            return new User(this);
18
        }
19
    }
20
}
21

22
// 使用：User user = new User.Builder().name("Alice").build();

展开收起

线程安全

静态成员是线程共享的，多线程修改时需注意同步：

1
class Counter {
2
    static int count = 0;//共享数据
3

4
    // 线程不安全的自增
5
    static void increment() {
6
        count++; // 实际包含读取、修改、写入三步，可能被中断
7
    }
8

9
    // 线程安全版本（加锁）
10
    static synchronized void safeIncrement() {
11
        count++;
12
    }
13
}

静态方法的限制

为什么这样设计

静态方法在类加载时存在，而实例成员依赖对象创建，此时可能还未初始化，因此编译器禁止直接访问

用于实现工具类（如Java.util.Arrays）：无需维护状态，仅提供功能

用于单例模式：通过静态方法控制对象创建（如getInstance())

为什么没有this关键字

.没有 this 指针\n\nthis代表当前对象实例，而静态方法属于类，不依赖对象，所以内部不能够使用this和super关键字

finally关键字

this关键字

初识 this调用构造器

this调用构造器我们在类的构造器中,可以显式的使用”this(形参列表)“方式,调用本类中指定的其他构造器构造器中不能通过”this(形参列表)“方式调用自己如果一个类中有n个构造器,则最多有n-1构造器中使用了”this(形参列表)” 规定:“this(形参列表)“必须声明在当前构造器

赋值的三种方式

1
public class this2 {
2
public static void main(String[] args) {
3
System.out.println("方式一");
4
customer cc = new customer( id: 184564, name: "CC");
5
CC.show(
6
System.out.println("方式二");
7
customer dd = new customer
8
dd.setId(1545);
9
dd.setName("DD");
10
dd.show();
11
System.out.println();
12
System.out.println("方式三");
13
customer CC = new customer( id: 18, name: "CC");
14
System.out.println(CC.getId())

this调用构造器

1
class Person{
2
privateStringname;
3
privateintage;
4
//无参
5
public Person
6
this.name="张三";
7
this.age = 20;
8
有参
9
public Person(String name){
10
this.name = name;
11
调用有参构造方法。设置默认值。和第一种方法功能一样
12
public Person(){0个用法
13
this(name:"张三",age:20);
14
//*public Person(String name, int age) {
15
this.name = name;
16
this.age = age;
17
@Override
18
public String toString() {
19
return "Person{" +
20
"name="" + name + '\
21
", age=" + age +
22
}
23
//程序的入口
24
public class thisDemo01
25
public static void main(String[] args){
26
我们创建了一个简单的Person对象,调用的是Person类无参的构造器
27
在构造器内完成了对成员变量的赋值
28
Person p = new Person
29
//输出的结果是 Person{name='张三',age=20}
30
System.out.println(p);
31
this()代表调用本类的无参构造（）里有形参为调用有参方法
32
（）里有具体值调用本类其他方法

展开收起

1
public class Boy{1个用法
2
privateStringname;2个用法
3
privateintage;3个用法
4
public Boy(String name,int age){0个用法
5
this.name = name;
6
this.age = age;
7
public String getName(
8
return name;
9
public int getAge(){
10
return age;
11
public void marry(Girl){1个用法
12
System.out.println("我想娶"+girl.getName());
13
public void shout(){0个用法
14
if(this.age>=22){
15
System.out.println("你可以合法结婚了");

展开收起

1
public class Girl{  2个用法
2
privateStringname;2个用法
3
privateintage;2个用法
4
public Girl(String name, int age) {
5
this.name = name;
6
this.age = age;
7
public String getName
8
return name;
9
public int getAge(
10
return age;}
11
public void marry(Boy boy){0个用法
12
System.out.println("我想嫁给"+ boy.getName
13
//this指结构器
14
boy.marry(girl:this);
15
public int compare(Girl girl){0个用法
16
return this.getAge() - girl.getAge( )

展开收起

1
public class BoyGirlTest {
2
public static void main(String[] args) {
3
//创建Boy对象属性
4
Boy boy=newBoy(name:"罗密欧",age:22);
5
boy.shout();//调用方法
6
//创建Girl对象属性
7
Girlgirl=newGirl(name:"朱丽叶",age:16);
8
//调用方法
9
girl.marry(boy);
10
//再创造一个Girl对象
11
Girlgirl1=newGirl(name:"祝英台",age:17);
12
//使用compare方法比较
13
int compare = girl.compare(girl1);
14
if(compare<0){
15
System.out.println(girl.getName()+ "大"+Math.abs(compare)+"岁");
16
}else if (compare > 0){
17
System.out.println(girl1.getName()+ "大"+Math.abs(ceompare)+"岁");
18
}else {
19
System.out.println(girl.getName()+"利"+girl1.getNam1e()+"一样大");

展开收起

super关键字

初识super

1.super理解为:父类的 2.super可以用来调用:属性、方法、构造器 3.super的使用 3.1我们可以在子类的方法或构造器中。通过使用”super.属性”或”super.方法”的方式,显式的调用父类中声明的属性或方法。但是,通常情况下,我们习惯省略”super. 3.2特殊情况:当子类和父类中定义了同名的属性时,我们要想在子类中调用父类中声明的属性,则必须显式的使用”super.属性”的方式,表明调用的是父类中声明的属性。 3.3特殊情况: 使用”super.方法”的方式,表明调用的是父类中被重写的方法 super调用构造器 4.1我们可以在子类的构造器中显式的使用”super(形参列表)“的方式,调用父类中声明的指定的构造器 4.2 “super(形参列表)“的使用,必须声明在子类构造器的首行! 4.3我们在类的构造器中,针对于”this(形参列表)“或”super(形参列表)“只能二选一,不能同时出现 4.4在构造器的首行,没有显式的声明”this(形参列表)“或”super(参列表)“,则默认调用的是父类中空参的构造

1
public class Person {
2
String name;
3
int age;
4
intid=411024;//身份证
5
public Person(){
6
System.out.println("Person我还是在的");
7
public Person(String name) {
8
this.name=name;
9
public Person(String name, int age) {
10
this.name=name;
11
this.age=age;}
12
public void eat(){
13
System.out.println("人要吃饭");
14
public void walk(){
15
System.out.println("人走路");
16

17
public class Student extends Person {
18
String major;
19
intid=1002;//学号
20
//默认调用了父类空参的构造器
21
public Student(){}
22
public Student(String major) {this.major=major;}
23
public Student(String name, int age, String major, int id) {
24
super(name, age);
25
this.major=major;
26
this.id=id;
27
@Override
28
public void eat() {
29
System.out.println("学生要吃营养餐");
30
public void study(){
31
super.eat();
32
System.out.println("学生学习知识");
33
public void show(){
34
System.out.println("name="+this.name+age= = "+age+"id= "+super.id);
35
System.out.println("name= "+ this.name +"age="+age+"id= " id = + id);
36
System.out.println("name="+ this.name+ "age=" age=" id=" id="+this.id)
37

38
public class super Test {
39
public static void main(Stringħ args) {
40
Student student=new Student("物联网");
41
student.name="汪大东";
42
student.show();
43
student.study();
44
student.eat();
45
System.out.println(
46
Student student1=new Student("汪大东",28,"终极一班",3);
47
student1.show()
48
:

展开收起

1
Person我还是在的
2
name汪大东age=0id=411024
3
name汪大东age=0id=1002
4
name汪大东age=0id=1002
5
***
6
*****
7
人要吃饭
8
兴牛当习知识
9
学生学习知识
10
学生要吃营养餐
11
*********
12
*************************
13
name= 汪大东 age = 28 id = 411024
14
name=汪大东 age=28 id = 3
15
name= 汪大东 age = 28 id = 3
16
super(name,age)是对父类属性的初始化  利用方法重载和方法的重写
17
默认调用父类空参构造，

展开收起

继承

方法重写

重写和重载的区别

面试时,问:重载(Overload)和重写(Override)的区别? 答:方法的重载和重写都是实现多态的方式,区别在于前者实现现的是编译时的多态性,而后者实现的是运行时的多态性。重载发生在一个类中,同名的方法如果有不同的参数列表(参数类型不同、参数个数不同或者二者都不同)则视为重载;重写发生在子类与父类之间,重写要求子类被重写方法与父类被重写方法有相同的参数列表,有兼容的返回类型,比父类被重写方法更好访问,不能比父类被重写方法声明更多的异常(里氏代换原则)。重载对返回类型没有特殊的要求,不能根据返回类型进行区分。

{%folding red 初识继承%}

面向对象的特征之二:继承性 why? 一、继承性的好处: 减少了代码的冗余,提高了代码的复用性便于功能的扩展为之后多态性的使用,提供了前提二、继承性的格式:classAextends A:子类、派生类、subclass B:父类、超类、基类、superclass 体现:一旦子类A继承父类B以后,子类A中就获取了父类B中声月的结构:属性、方法

Java中关于继承性的规定: 1.一个类可以被多个子类继承。 2.Java中类的单继承性:一个类只能有一个父类 3.子父类是相对的概念。 4.子类直接继承的父类,称为:直接父类。间接继承的父类称为:间接父类 5.子类继承父类以后,就获取了直接父类以及所有间接父类中声明的属性和方法 1.如果我们没有显式的声明一个类的父类的话,则此类继承于java.lang.Object类 2.所有的java类(除java.lang.Object类之外)都直接或间接的维承于java.lang.Object类 3.意味着,所有的java类具有java.lang.Object类声明的力能

1
public class A01{
2
private double radius;
3
public A01(){this.radius = 1.0;}
4
public double getRadius()
5
return radius;
6
public void setRadius(double radius) {
7
this.radius = radius;
8
public double findArea(){ 0个用法
9
return Math.PI * radius*radius;
10

11
public class A02 extends A01{ 2个用法
12
privatedoublelength;4个用法
13
public A02(){1个用法
14
this.length =1.0;
15
public double getlength()
16
return length;
17
public void setlength(double length) {
18
this.length = length;
19
public double findVolume(){
20
//调用 父类的方法return findArea*1ength;
21

22
public class A03 {
23
public static void main(String[] args) {
24
A02 cylinder = new A02();
25
cylinder.setRadius(2.1);
26
cylinder.setLength(3.4);
27
double volume = cylinder.findVolume();
28
System.out.println("半径是:"+cylinder.getRadius())
29
System.out.println("圆柱的体积是:"+String.format("%.2f",volume));
30
double area = cylinder.findArea();
31
System.out.println("圆柱的底面积是:"+String.format(("%.2f",area));

展开收起

初识方法重写

返回值是父类的子类子类的权限要大于父类重写就是将父类的方法,同名同参数的修改

1.重写:子类继承父类以后,可以对父类中同名同参数的方法,进行覆盖操作 2.应用:重写以后,当创建子类对象以后,通过子类对象调用子父类中的同名同参数的方法时,实际执行的是子类重写父类的方法 3.重写的规定; 方法的声明:权限修饰符返回值类型方法名(形参列表) throws 异常的类型{ //方法体约定俗称:子类中的叫重写的方法,父类中的叫被重写的方法子类重写的方法的方法名和形参列表与父类被重写的方法的方法名和形参列表相同子类重写的方法的权限修饰符不小于父类被重写的方法的权限修饰符

特殊情况:子类不能重写父类中声明为private权限的方法返回值类型: 父类被重写的方法的返回值类型是void,则子类重写的方法的返回值类型只能是void 父类被重写的方法的返回值类型是A类型,则子类重写的方法的返回值类型可以是A类或A类的子类父类被重写的方法的返回值类型是基本数据类型(比如:double),则子类重写的方法的返回值类型必须是相同子类重写的方法抛出的异常类型不大于父类被重写的方法抛出的异常类型

子类和父类中的同名同参数的方法要么都声明为非static的(考)虑重写),要么都声明为static的(不是重写)

1
public class Person
2
String name;
3
private int age;
4
public Person(
5
}
6
public Person(String name, int age) {
7
this.name = name;
8
this.age = age;
9
}
10
public void eat()
11
System.out.println("要吃饭");
12
public void walk(int distance){System.out.println("走路走了"+distance+"公里");}
13
public void setAge(int age) {this.age = age;}
14
public int getAge(){return age;}

1
public class Student extends Person {
2
String major;
3
public Student(){}
4
public Student(String major) {
5
this.major = major;
6
public void majors(){
7
System.out.println("专业是"+ major);
8
public void eat(){
9
System.out.println("学生吃饭10分钟");
10
}
11
}

1
public class KidsTest {
2
public static void main(String[] args) {
3
Kids someKid = new Kids(13);
4
someKid.printAge();
5
//设置属性
6
someKid.setSalary(0);
7
someKid.setSex(1);
8
someKid.employed();
9
someKid.manOrWoman();

方法重载

多态

初识多态

1.理解多态性:可以理解为一个事物的多种形态。 2.何为多态性: 对象的多态性:父类的引用指向子类的对象(或子类的对象赋给父类的引用 3.多态的使用:虚拟方法调用有了对象的多态性以后,我们在编译期,只能调用父类中声明的方法,但在运行期,我们实际执行的是子类重写父类的方法。总结:编译,看左边;运行,看右边。 4.多态性的使用前提: 类的继承关系方法的重写 5.对象的多态性,只适用于方法,不适用于属性(编译和运行都看左边)

1
public class Perso{
2
String name;
3
int age;
4
public void eat(){}
5
System.out.println("人吃饭");
6
public void walk(){System.out.println("人走路");
7

8
public class Man extends Perso{
9
boolean isSmoking;0个用法
10
public void earnMoney(){ System.out.println("男人负责养家");
11
public void eat(){System.out.println("男人吃得多");//重写父类的方法}
12
public void walk(){System.out.println("人走路霸气侧漏");
13

14
public class Women extendsPerso
15
booleanisBeauty;
16
public void goshopping(){System.out.println("女人喜欢购物");
17
public void eat () {System.out.println("女人吃得少减肥");
18
public void walk(){System.out.println("女人走路拽");

展开收起

1
public static void main(String[] args) {
2
Perso p1 = new Perso();
3
p1.eat();
4
Man man = new Man(
5
man.eat()
6
man.age = 25;
7
man.earnMoney();
8
//****************************
9
11对象的多态性:父类的引用指向子类的对象
10
System.out.println("******************);
11
Perso p2 = new Man();
12
//多态的使用:当调用子父类同名同参数的方法时,实际执行的是子类重写的方法--虚拟方法调用
13
p2.eat();
14
p2.walk();
15
//p2.earnMoney();子类和父类的方法都有才可以调用
16
Perso p3=new Women();
17
p3.eat();
18
//人吃饭
19
//男人吃得多
20
//男人负责养家
21

22
 //男人吃得多
23
//人走路霸气侧漏
24
//女人吃得少减肥

展开收起

向下转型

初识

//使用强转时,可能出现ClassCastException的异常。 Woman w1 = (Woman)p2; w1.goShopping(); instanceof关键字的使用 a instanceof A:判断对象a是否是类A的实例。如果是,返回true;如果不是,返回false。使用情境:为了避免在向下转型时出现ClassCastException的异常,我们在向下转型之前,先进行instanceof的判断,一旦避回true,就进行向下转型,如果返回false,不进行向下转型、如果ainstanceof A返回true,则a instanceofB也返回Itrue. 其中,类B是类A的父类。

调用方法和属性

编译规则深入

1.若子类重写了父类方法,就意味着子类里定义的方法彻底覆盖了父类里的同名方法, 系统将不可能把父类里的方法转移到子类中:编译看左边,运行看右边 2.对于实例变量则不存在这样的现象,即使子类里定义了与父类完全相同的实例变量, 这个实例变量依然不可能覆盖父类中定义的实例变量:编译运行都看左边

1
class Sub extends Base {
2
int count = 20;
3
public void display(){
4
System.out.println(this.count);
5
public class FieldMethodTest {
6
public static void main(String[] args) {
7
Subs=newSub();
8
System.out.println(s.count);//20
9
s.display();//20
10
Baseb=s;//多态性
11
//==:对于引用数据类型来讲,比较的是两个引用数据类型变量的地址值是否相同
12
System.out.println(b == s);//true
13
System.out.println(b.count);//10
14
b.display();//20
15
   // b.count是成员变量仅隐藏无多态则是直接调用父类

展开收起

Object类下重写方法

equals方法

equals方法和==的区别

==:运算符的使用: 1.可以使用在基本数据类型变量和引用数据类型变量中 2.如果比较的是基本数据类型变量:比较两个变量保存的数据是否相等。(不一定类型要相同) 如果比较的是引用数据类型变量:比较两个对象的地址值是否相同。即两个引用是否指向同一个对象实体

初识 equals 方法

二、equals()方法的使用: 1.是一个方法,而非运算符 2.只能适用于引用数据类型 3.Object类中equals()的定义: public boolean equals(Object obj) { return (this == obj); 说明:Object类中定义的equals()和==的作用是相同的;比较两个双才家的地址值是否相同.即两个引用是否 4.像String、Date、File、包装类等都重写了Object类中的equals()方法。重写以后,比较的不是两个引用的地址是否相同,而是比较两个对象的”实体内容”是否相同。通常情况下,我们自定义的类如果使用equals()的话,也通常是比较两个对象的”实体内容”是否相同。那么, 就需要对Object类中的equals()进行重写. 重写的原则:比较两个对象的实体内容是否相同。

1
class MyDate{7个用法
2
private int day;
3
private int month;
4
private int year
5
public MyDate(){}
6
public MyDate(int day, int month, int year){
7
this.day = day;
8
this.month = month;
9
this.year = year;}
10
public boolean equals(Object o){
11
if(this== 0){
12
return true;
13
//mydate继承于object类 equls父类独有的方法
14
//向下转型
15
if(o instanceof MyDate){
16
MyDate myDate = (MyDate) o;
17
return this.day == myDate.day && this.month == myəDate.month && this.year myDate.year;
18
else{return false;}
19

20

21

22
public static void main(String[] args) {
23
MyDate myDate1 = new MyDate( day: 14, month: 3, year1976);
24
MyDate myDate2 = new MyDate( day: 14, month: 3, year: 19766);
25
if(myDate1.equals(myDate2)){
26
System.out.println("myDatel is equal to myDate2")}
27
else{System.out.println("myDatel is not equal to myDate2");
28
if(myDate1==myDate2){System.out.println("myDatel == myDate2");
29
else{System.out.println("myDate1 != myDate2");}

展开收起

Tostring 方法

初识tostring方法

1.当我们输出一个对象的引用时,实际上就是调用当前对象的toString(( 2.Object类中toString()的定义: public String toString(){return getClass().getName() + ”@” + Integer.toHexSString(hashCode)} 3.像String、Date、File、包装类等都重写了Object类中的tosttring()方法使得在调用对象的tostring()时,返回”实体内容”信息 4.自定义类也可以重写tosTring()方法,当调用此方法时,返回对时象的”实体内容”

1
public class Tostring{
2
protected String color;
3
protected double weight;
4
protected Tostring(){
5
this.color = "white";
6
this.weight = 1.0;
7
public Tostring(String color, double weight) {
8
this.color = color;
9
this.weight = weight;
10
public String getColor(){return color;}
11
public void setColor(String color) {this.color = color;}
12
public double getWeight(){return weight;}
13
public void setWeight(double weight) {this.weight = weight;}

1
public class Tostring1 extends Tostring{
2
private double radius;
3
public Tostring1(){
4
super();
5
this.radius = 1.0;}
6
public Tostring1(double radius){
7
this.radius = radius;
8
public Tostring1(double radius,String color,dlouble weight){
9
super(color, weight);
10
this.radius = radius;
11
public double getRadius(){return radius;}
12
public void setRadius(double radius){
13
this.radius = radius;
14
public double findArea(){
15
return Math.PI * radius *radius;}
16
//多态向下转型
17
 public boolean equals(Object obj){
18
if(obj== this){return true;}
19

20
if (obj instanceof Tostring1){
21
Tostring1 circle = (Tostring1) obj;
22
return circle.findArea() = this.findArea();
23
return false;
24
@Override
25
public String toString() {
26
return"圆的面积:"+findArea
27
}

展开收起

1
public class TostringTest {
2
public static void main(String[] args) {
3
Tostring1 circle1 = new Tostring1( radius:2.3);/父类空参中已定义
4
Tostring1 circle2 = new Tostring1( radius: 2.3, color: *"white", weight: 2.0)
5
System.out.println("颜色是否相等:"+circle1.getColor().equals(circle2.getColor()))
6
System.out.println("面积是否相等:"+circle1.equals(circle2));
7
System.out.println(circle1);
8
System.out.println(circle2.toString());
9
//未传参时默认super()调用父类的空参，传参时默认调用父类的属性，实现初始化

String

初识数据类型

1
//int a =10;基本数据类型
2
//引用数据类型String a="hello"//串池中的地址值
3
//string s1=new String("hello")输入的内容 //堆中的地址值
4
//==基本数据类型  数值内容 引用数据类型 地址值
5
//equals()方法完全相等equals IgnoreCase(比较对象)忽略大小写
6
public static void main(String[] args) {
7
String rightusername = "liyifei";
8
String rightpassword="123456";//串池中的地址值
9
Scanner sc = new Scanner(System.in);
10
for(int i=0;i<3;i++){
11
System.out.println("请输入用户名");
12
String username =sc.next();
13
System.out.println("请输入密码");
14
String password =sc.next();
15
if(username.equals(rightusername) && password.equals(rightpassword))
16
System.out.println("登录成功");
17
break;
18
} else {
19
if(i== 2){
20
System.out.println("下次账号被锁定");
21
} else{
22
System.out.println("用户名或密码错误,请重新输入你还剩"+(2-i)+"次机会");

展开收起

遍历字符串

1
import java.util.Scanner;
2
public class s2 {
3
public static void main(String[] args) {
4
Scanner sc = new Scanner(System.in);
5
System.out.println("请输入一个字符串");
6
String a = sc.next();
7
//遍历字符串
8
//字符串遍历快捷键str.length().for
9
for (int i = 0; i < a.length(); i++) {
10
char c=a.charAt(i);//ctrl+alt+v自动生成变量
11
System.out.println(c);

统计个数

1
public class s3{
2
public static void main(String[] args) {
3
//统计大小写次数
4
Scanner sc = new Scanner(System.in);
5
System.out.println("请输入一个字符串");
6
String a = sc.next();
7
int bigCount = 0;
8
int smallCount = 0;
9
int numberCount = 0;
10
//遍历字符串str.length().for
11
for (int i = 0; i < a.length(); i++) {
12
char c = a.charAt(i);//取出对应索引的字符
13
if(c>='a' &&c<= 'z'){
14
//char类型的变量在参与计算时会自动转换成int查询ascll码表
15
bigCount++;
16
}elseif(c>='A' 'A' && c <= 'Z') {
17
small Count++;
18
}elseif(C >= '0' && C<= '9'){numberCount+;}
19
}
20
System.out.println("大写字母的个数是:"+bigCount);
21
System.out.println("小写字母的个数是:"+smallCount);
22
System.out.println("数字的个数是:"+numberCount);}

展开收起

拼接数组

1
public static void main(String[]args){
2
int[] arr = {1,2,3,4,5};
3
String s = arrToString(arr);
4
System.out.println(s);
5
public static String arrToString(int[] arr){
6
if(arr == null){
7
return"";
8
if(arr.length == 0){
9
return"[]";
10
String result="[";
11
for (int i = 0; i < arr.length; i++) {
12
if(i == arr.length-1){
13
result = result+arr[i];
14
}else{
15
result = .
16
result +arr[i]
17
//拼接右括号
18
result= result + "]";
19
return result;

展开收起

反转字符串

1
public static void main(String[] args) {
2
//反转字符串("abcdefg");
3
String result=reverse( str: "abcdefg");
4
System.out.println(result);
5
public static String reverse(String str){/shift+f6批量修改
6
//str.length().forr反转遍历
7
String result = "";
8
for (int I = str.length()-1; I >= 0; I--) {
9
char c=str.charAt(I); //ctrl+alt+v自动生成变量
10
result = result + C;
11
}
12
return result;

substring

1
public class |s7 {
2
public static void main(String[] args) {
3
//获取一个手机号
4
String phonNunber="13112349468";
5
//截取手机号
6
String start=phonNunber.substring(0,3);//左闭右开
7
String end=phonNunber.substring(beginlndex: 7);
8
//sub string有返回值需要变量去接受
9
String result=start+********+end;
10
System.out.println(result);
11
//定义一个身份证号
12
String idNumber="321281202001011234";
13
String year=idNumber.substring(6,10);
14
String month=idNumber.substring(10,12);
15
String day=idNumber.substring(12,14);
16
//获取性别
17
char c=idNumber.charAt(16);//字符如何转为数字
18
//利用ACSII码表
19
System.out.println('0'+0);//两者相差48
20
int num=c-48;
21
if(num%2==1){System.out.println("男");}
22
else{System.out.println("女");}

展开收起

替换字符

1
public class s8 {
2
public static void main(String[] args) {
3
//获取获取所说的话
4
String talk="你玩的真好以后别玩了,TMD,CNM,SB,MLGB";
5
//构建敏感词汇库
6
String[] arr={"TMD", "CNM", "SB", "MLGB"};
7
for (int i = 0; i < arr.length; i++) {
8
//获取敏感词汇
9
String badWord = arr[i];
10
//替换敏感词汇
11
talk = talk.replace(badWord, replacement: "******");//replace()结果有返回值需要有变量接受
12
System.out.println(talk);

Stringbuilder

1
public class s9 {
2
public static void main(String[] args) {
3
//1.创建对象
4
StringBuilder sb=new StringBuilder("abc");
5
//2.添加数据
6
sb.append("hello");
7
sb.append("world");
8
sb.append("java");
9
//3.将StringBulider转换成String
10
String s=sb.toString();
11
System.out.println(s);
12
//反转
13
sb.reverse();
14
System.out.println(sb);
15
int len =sb.length();
16
System.out.println(len);
17
//因为StringBulider是java的写好类  //Stringbuilder就是个容器
18
//java在底层对他做了一些特殊的处理
19
//打印对象不是地址值而是属性值

展开收起

回文字符串

1
public class s10 {
2
public static void main(String[] args) {
3
//键盘获取一个字符串
4
Scanner sc = new Scanner(System.in);
5
System.out.println("请输入一个字符串");
6
Stringstr=sc.next(
7
//反转字符串 //空参构造
8
String result=new StringBuilder().append( str).reverse().toString();
9
if(str.equals(result)){
10
System.out.println("是回文");
11
}
12
else{
13
System.out.println("不是回文");
14
}

1
public class s11 {
2
public static void main(String[] args) {
3
//定义数组
4
int[]arr={1,2,3,4,5,6,7,8,9,10};
5
String s=arrToString(arr);
6
System.out.println(s);
7
public static String arrToString(int[] arr){
8
1个用法
9
StringBuilder sb=new StringBuilder();
10
sb.append("["]
11
for (int i = 0; i < arr.length; i++) {
12
if(i== arr.length-1){
13
sb.append(arr[i]);
14
}else{sb.append(arr[i]+",");
15
}
16
sb.append("] ) ز ("] ؟
17
return sb.toString();
18
}
19
//Stringjoiner sj=new   Stringjoiner(",");必须有间隔符不能空参
20
//sj.add("1").add("2").add("3");
21
//String s=sj.toString();
22
//StringJoiner sj=new StringJoiner(","开始字符","结束字符");

展开收起

抽象类abstract

原文链接：https://blog.csdn.net/tyra9/article/details/129137305

初识抽象类

abstract关键字的使用 1.abstract:抽象的 2.abstract可以用来修饰的结构:类、方法 3.abstract修饰类:抽象类此类不能实例化，创建对象

抽象类中一定有构造器,便于子类实例化时调用(涉及:子类对象实例化的全过程) 开发中,都会提供抽象类的子类,让子类对象实例化,完成相关的操作 4.abstract修饰方法:抽象方法抽象方法只有方法的声明,没有方法体 包含抽象方法的类,一定是一个抽象类。反之,抽象类中可以没有抽象方法的 若子类重写了父类中的所有的抽象方法后,此子类方可实例化若子类没有重写父类中的所有的抽象方法,则此子类也是一个抽象类,需需要使用abstract修饰

应用抽象类的场景

1.当父类需要定义一个方法，却不能明确该方法的具体实现细节时，可以将该方法定义为abstract，具体实现细节延迟到子类

1
abstract class Creature{ public abstract void breath();}
2

3
abstract class Person extends Creature{
4
String name;
5
int age;
6
public Person(){
7
public Person(String name, int age) {
8
this.name = name;
9
this.age = age;
10
public void eat(){ System.out.println("吃饭");}
11
public void walk(){System.out.println("走路");}
12
public abstract void hello();
13

14
class Student extends Person{
15
public Student(){}
16
public Student(String name,int age){
17
super(name,age);
18
public void eat(){
19
System.out.println("学生要吃有营养的");
20

21
@Override
22
public void hello() {
23
System.out.println("你好啊");//不同人的打招呼方式不同
24
@Override
25
public void breath() {
26
System.out.println("学生应该呼吸新鲜空气");
27
//public abstract void work();//alt+enter添加方法体因为每个子类方法体内容不同,所以不能写方法体
28

29
public class objectqw {
30
public static void main(String[] args) {
31
Student student1 = new Student();
32
Student student2=new Student(name:"王小明",age28);
33
System.out.println("学生1:"+student1.name+","+student1.age+"岁");
34
System.out.println("学生2:"+student2.name+","+student2.age+"岁");
35
student1.eat();
36
student1.hello();
37
student1.breath();
38
student2.eat();

展开收起

特点

1.若父类中定义了一个抽象方法，要求其所有非抽象子类都必须重写该抽象方法

2.抽象方法不能再使用private，final 或者static关键字来修饰，即abstract不能与private，final或static共同出现，这是因为定义抽象方法的目的就是想将方法的具体实现延迟到子类，最终是要被子类重写的，而private，final，static这几个关键字都和“方法重写”的目的背道而驰。

3.访问权限修饰符 abstract class 类名{ // }

访问权限修饰符 abstract 返回值类型方法名(形参列表)

4.我们不能创建抽象类对象（这里的对象指的是堆空间中真正的对象，即不能“new 抽象类”

如果抽象类的子类没有用abstract关键字修饰，那么我们可以创建其子类对象

1
package knowledge.polymorphism.about_abstract.about_members;
2

3
public abstract class Fruit {        //Fruit类是抽象类
4
//抽象类中可定义的成员：
5
    //1.非静态变量和静态变量
6
    private String name = "水果名儿是有长有短";
7
    private static String size = "水果的大小是有大有小";
8

9
    //2.非静态常量和静态常量
10
    public final String COLOR = "水果的颜色是五光十色";
11
    public static final String FORM = "水果的形态是千奇百怪";
12

13
    //3.抽象方法和非抽象方法
14
    public abstract void nutrition();
15
    private final static void suitCrowds() {
16
        System.out.println("人人都适合吃水果！");
17
    }
18
    public void invokeSuitCrowds() {
19
        Fruit.suitCrowds();
20
    }
21

22
    //4.构造器可以重载
23
    public Fruit() {
24
        System.out.println("Fruit's name = " + name);
25
    }
26
    public Fruit(String name) {
27
        this.name = name;
28
    }
29
}

展开收起

接口

初识

初识接口

**接口（Interface）**是一种引用数据类型，类似于类，然而它只能包含常量、方法签名和嵌套类型。接口不能包含实例变量或方法的实现（在Java 8及之后的版本，可以在接口中定义默认方法和静态方法）。接口主要用于定义类的外部行为，并允许类实现这些行为。

1
public interface Animal {
2
    // 常量
3
    int LEGS = 4; // 默认有修饰符 public static final
4
    // 抽象方法
5
    void makeSound();// 默认有修饰符 public abstract
6
    void eat();// 默认有修饰符 public abstract
7
}
8
//接口实现
9
public class Dog implements Animal {
10
    @Override
11
    public void makeSound() {
12
        System.out.println("Woof!");
13
    }
14

15
    @Override
16
    public void eat() {
17
        System.out.println("Dog is eating.");
18
    }
19
}
20
//抽象类的使用  通过接口引用实现类对象，可以实现多态性（类似于父类引用指向子类对象）编译左边运行右边
21
public class Main {
22
    public static void main(String[] args) {
23
        Animal myDog = new Dog();
24
        myDog.makeSound(); // 输出: Woof!
25
        myDog.eat();       // 输出: Dog is eating.
26
    }
27
}

展开收起

特点

接口的特点

1.方法公有性和抽象性 ,接口中的方法都默认是 public 的，而且必须是 public 的，因为 private 和 protected 修饰符都不能在接口中使用，public abstract

2.变量默认为公有静态常量,接口中定义的变量默认是 public static final 修饰的，即静态常量，所有实现该接口的类都可以访问这些常量。因为接口中不能使用 private 和 protected 修饰符，所以接口中的属性也都是公有的int a = 0;// 默认有修饰符 public static final调用接口名.变量名

3、不能被实例化

4.默认方法（default）：默认方法可以有方法体。默认方法不需要实现接口的类去实现，但是它们仍然是 public 的

静态方法（static）：静态方法也有方法体，不需要实现接口的类实现，这些方法也是 public 的，并且可以在接口本身上调用对于默认方法，实现这个接口的类可以重写它

5,一个普通类实现接口，则需要将接口中的所有抽象方法实现。如果是一个抽象类实现接口，则是否实现抽象方法都行。

1
interface Interface {
2
  void foo();
3
}
4

5
abstract class AbstractClass implements Interface{
6
  // 抽象类实现接口，可以不实现接口的抽象方法
7
}

因为抽象类中是允许有抽象方法的，但是普通类中不允许有抽象方法。

6、接口之间的继承

接口不能继承某个类，但是接口可以继承接口Java接口支持多重继承，一个接口可以继承多个其他接口。这与类的继承不同，类在Java中只能单继承（即一个类只能继承一个父类）。

接口多态的实现

初识

java中的类不能多重继承（一个子类继承多个基类），但一个类可以实现多个接口，这样就实现了多重继承的效果。这种特性称为多重接口实现。

1、语法与要求

一个类实现多个接口时，接口名之间用逗号分隔

1
abstract class Animal {
2
  private String name;

1
public Animal(String name) {
2
  this.name = name;
3
}
4

5
public abstract void cry();

1
interface ShakeHands {
2
  void shakeHands();
3
}
4

5
interface SpinningAround {
6
  void spinningAround();
7
}
8

9
class Dog extends Animal implements ShakeHands, SpinningAround {
10
  public Dog(String name) {
11
    super(name);
12
  }

1
@Override
2
public void cry() {
3
  System.out.println("汪汪~");
4
}
5

6
@Override
7
public void shakeHands() {
8
  System.out.println("握手~");
9
}
10

11
@Override
12
public void spinningAround() {
13
  System.out.println("转圈圈~");
14
}

接口解耦

1
// 定义支付接口
2
interface Payment {
3
    void pay(double amount);
4
}
5

6
// 实现信用卡支付
7
class CreditCardPayment implements Payment {
8
    @Override
9
    public void pay(double amount) {
10
        System.out.println("Paid " + amount + " using Credit Card.");
11
    }
12
}
13

14
// 实现支付宝支付
15
class AlipayPayment implements Payment {
16
    @Override
17
    public void pay(double amount) {
18
        System.out.println("Paid " + amount + " using Alipay.");
19
    }
20
}
21

22
// 使用支付接口的用户类
23
class ShoppingCart {
24
    private Payment payment;
25

26
    public ShoppingCart(Payment payment) {
27
        this.payment = payment;
28
    }
29

30
    public void checkout(double amount) {
31
        payment.pay(amount);
32
    }
33
}
34
//ShoppingCart 类与具体的支付方式（如CreditCardPayment或AlipayPayment）没有直接的依赖关系。你可以轻松地在不修改 ShoppingCart 类的情况下，添加新的支付方式，只需实现 Payment 接口即可。
35

36
// 测试代码
37
public class Main {
38
    public static void main(String[] args) {
39
        Payment creditCardPayment = new CreditCardPayment();
40
        ShoppingCart cart1 = new ShoppingCart(creditCardPayment);
41
        cart1.checkout(100.0); // 使用信用卡支付
42
        Payment alipayPayment = new AlipayPayment();
43
        ShoppingCart cart2 = new ShoppingCart(alipayPayment);
44
        cart2.checkout(150.0); // 使用支付宝支付
45
    }
46
}

展开收起

数组多态

1
package com.study.episode10.Interface.Example3;
2

3
public class Example {
4
  public static void main(String[] args) {
5
    InterfaceCry[] ic = new InterfaceCry[2];
6
    ic[0] = new Dog();
7
    ic[1] = new Cat();
8
    for(InterfaceCry i : ic) {
9
      i.cry();
10
    }
11
  }
12
}
13

14
interface InterfaceCry {
15
  void cry();
16
}
17

18
class Dog implements InterfaceCry {
19
  @Override
20
  public void cry() {
21
    System.out.println("Woof~");
22
  }
23
}
24

25
class Cat implements InterfaceCry {
26
  @Override
27
  public void cry() {
28
    System.out.println("Meow~");
29
  }
30
}

展开收起

多态参数

1
package com.study.episode10.Interface.Example3;
2

3
public class Example {
4
  public static void animalCry(InterfaceCry ic) {
5
    ic.cry();
6
  }
7

8
  public static void main(String[] args) {
9
    Dog dog = new Dog();
10
    Cat cat = new Cat();
11
    animalCry(dog);
12
    animalCry(cat);
13
  }
14
}
15

16
interface InterfaceCry {
17
  void cry();
18
}
19

20
class Dog implements InterfaceCry {
21
  @Override
22
  public void cry() {
23
    System.out.println("Woof~");
24
  }
25
}
26

27
class Cat implements InterfaceCry {
28
  @Override
29
  public void cry() {
30
    System.out.println("Meow~");
31
  }
32
}

展开收起

接口的上下转型

初识

在进行过向上转型后，也就是接口类型的引用指向实现类的对象，这时，只能通过引用变量访问接口中有的成员，不能访问实现类的特有成员，如果想要访问实现类的特有成员，则需要进行向下转型：

1
public class Example {
2
  public static void main(String[] args) {
3
    Interface i = new ImplementingClass();
4
    System.out.println(i.specificField);// 接口特有字段，接口中有的成员，所以能访问
5
    i.commonMethod();// 共有成员，接口中也有，所以能调用
6

7
    // i.specificMethod; // 这里就会报错，因为接口中没有这个成员，
8
    // 这是实现类的特有成员，如果要访问，则需要向下转型
9

10
    ((ImplementingClass)i).specificMethod();// 向下转型后访问实现类的特有成员
11
  }
12
}
13

14
interface Interface {
15
  String specificField = "Interface specific field~";
16
  void commonMethod();
17
}
18

19
class ImplementingClass implements Interface {
20
  @Override
21
  public void commonMethod() {
22
    System.out.println("common method~");
23
  }
24

25
  public void specificMethod() {
26
    System.out.println("implementing class specific method~");
27
  }
28
}

展开收起

创建对象的方式

1
//1.创建了非匿名实现类的非匿名对象
2
Flash flash = new Flash();
3
computer.transferData(flash);
4
System.out.println();
5
//相当于new Flash()
6
System.out.println("*********************
7
//2.创建了非匿名实现类的匿名对象
8
computer.transferData(new Flash());//Usb传参对象
9
computer.transferData(new Printer());
10
System.out.println();
11
System.out.println("********************1
12
//3.创建了匿名实现类的非匿名对象
13
USB phone = new USB()//匿名对象
14
{@override
15
public void start(){
16
System.out.println("手机工作");
17
@override 1个用法
18
public void stop() {
19
System.out.println("手机结束工作");}
20
//4.创建了匿名实现类的匿名对象
21
new USB(){@override 1个用法
22
public void start(){
23
System.out.println("mp3工作");
24
}
25
@override 1个用法
26
public void stop() {
27
System.out.println("mp3结束工作");}

展开收起

圆的练习

1
//关于圆的javabean类
2
public classCircle{
3
private double radius;
4
public Circle(){}
5
public Circle(double radius){
6
this.radius = radius;
7
public double getRadius(){return radius;}
8
public void setRadius(double radius) {this.radius = radius;}
9

10
public interface CompareObject {
11
int compareTo(Objecto);//若返回值是0代表相等 若正数 代表当前对象大负数代表当前对象小}
12

13
public class comparableCircle extends Circle implements CompareObject{
14
public comparableCircle(){0个用法
15
}
16
public comparableCircle(double radius){3个用法
17
super(radius);//调用父类的构造方法
18
}
19
@override 2个用法
20
public int compareTo(Object o) {
21
if(this == 0){return 0;}
22
//向下转型使用子类的特有方法Circle里是属性在对象里调用子类特有的get方法
23
if (o instanceof comparableCircle){
24
comparableCircle obj = (comparableCircle) o;
25
return Double.compare(this.getRadius(), obj.getRaddius())
26
}else {return 12138;}
27

28
public static void main(String[] args) {
29
comparableCircle comparableCircle1 = new
30
comparableCircle(radius: 1.9);
31
comparableCircle comparableCircle2 = new comparableCircle( radius: 8.2)
32
comparableCircle comparableCircle3 = new comparableCircle( radius: 8.2)
33
int num = comparableCircle1.compareTo(comparableCircle2)
34
if(num=== 0){
35
System.out.println("一样大");
36
}else if (num > 0){
37
System.out.println("前面大");
38
}else
39
System.out.println("后面大");
40
*********************************
41
int num1 = comparableCircle3.compareTo(comparableCircle2)
42
if(num1== 0){
43
System.out.println("一样大");
44
}else if (num1 > 0){
45
System.out.println("前面大");
46
}else
47
System.out.println("后面大");

展开收起

abstract不与其他关键字共存的原因

注意事项:abstract关键字不可以与final、private 、static关键健字共存,因为被final修饰的方法不可以被重写,意味着子类不可以重写该方法,如果abstract和fina共同修饰父类中的方法,子类要实现抽象方法(abstract的作用),而final又不让该方法重写,这相互矛盾。如果private和abstract共同修饰父类中的方法,private修饰则该方法不可以被子类访问,但是abstract修饰需要子类去实现,两者产生矛盾。

如果static和abstract共同修饰父类中的方法,stattic表示是静态的方法,随着类的加载而加载,则该方法不需要在子类中去实现,这与abstract关键字矛盾。

关键字三者应用场景

一、static 、final、abstract 三者的使用场景与注意事项 static关键字可用于修饰成员变量和成员函数,想要实现对象中的共性数据的对象共享,可以将这个数据进行静态修饰,被静态修饰的成员可以直接被类名调用用,静态随着类的加载而加载,而且优先于对象存在。

静态方法只能访问静态成员(静态方法和静态变量),不可以访问非静态成员,这是因为静态方法加载时,优先于对象存在,所以没有办法访问对象中的/成员。

静态方法中不能使用this和super关键字,因为this代表本类对象,super代表父类对象,而静态内容执行时,有可能因为对象内容不存在(如对象还未创建),所以thiis和super无法使用。

final关键字可用于修饰类,方法,变量(成员变量内,局部变量,静态变量),被final 修饰的类是一个最终类,不可以被继承。被final修饰的方法是一个最终终方法,不可以被覆盖,但是可以被继承。被final修饰的变量只能是一个常量,只能赋值一次。内部都类被定义在类中的局部位置上时,只能访问局部被final修饰的局部变量。 abstract关键字只能用于修饰类和方法,不能修饰变量。抽象方法只只能定义在抽象类中,抽象方法和抽象类必须由abstract修饰,抽象方法只定义方法声明,不不定义方法实现。

抽象类不可以被实例化(创建对象),只有通过子类继承抽象类并覆盖抽象类中的所有抽象方法后,该子类才可以被实例化,否则该子类还是一个抽象类。抽象类中有构造函数用于给子类对象进行初始化,同时抽象类中可

内部类

初识

内部类（Inner Class）是定义在另一个类也就是外部类（Outer Class）内部的类。

内部类又称为嵌套类（Nested Class），外部类又称为封闭类（Enclosing Class）。

2、内部类的分类 Java 中有四种内部类：成员内部类（Member Inner Class）定义在外部类的成员位置上，与成员变量和方法平级。静态内部类（Static Nested Class）使用static关键字修饰。局部内部类（Local Inner Class）定义在一个类的局部位置上，例如成员方法和代码块内。匿名内部类（Anonymous Inner Class）没有名字的内部类，常用于简化代码。

成员内部类

特点

1.在成员内部类中能访问外部类的所有成员，包括私有的

2.在外部类中可以访问成员内部类的所有成员，包括私有的

3.成员内部类可以添加任何访问修饰符，因为它也是外部类的成员。

直接访问

1
class OuterClass {
2
  private String outerClassField = "outer class's field~";
3

4
  class MemberInnerClass { // 成员内部类
5
    public void foo() {
6
      System.out.println(outerClassField); // 直接使成员名访问
7
    }
8
  }
9
}

使用外部类的this引用访问

1
class OuterClass {
2
  private int a;
3
  class MemberInnerClass { // 成员内部类
4
    private int a;
5
    public void foo() {
6
      System.out.println("member inner class's field: " + a);
7
      System.out.println("outer class's field: " + OuterClass.this.a);
8
    }
9
  }
10
}
11
//这个方法可以在外部类的成员与成员内部类的成员重名时使用。因为如果外部类成员与成员内部类成员重名，在成员内部类中直接使用这个成员的名字访问的成员是成员内部类的成员（遵循就近原则），如果想要访问外部类的这个成员，就要使用上面提到的方法。

1
class OuterClass {
2
  class MemberInnerClass { // 成员内部类
3
    private String privateField = "member inner class's private field~";
4

5
    private void privateMethod() {
6
      System.out.println("member inner class's private method~");
7
    }
8
  }
9

10
  public void fun() {
11
    MemberInnerClass mic = new MemberInnerClass();
12

13
    mic.privateMethod(); // 外部类访问成员内部类的私有方法
14

15
    System.out.println(mic.privateField); // 外部类访问成员内部类的私有属性
16
  }
17
}

展开收起

在其他类中创建成员内部类的实例

1
public class Example {
2
  public static void main(String[] args) {
3
    // 方法三
4
    OuterClass.MemberInnerClass mic = new OuterClass().getMemberInnerClassInstance();
5
  }
6
}
7
class OuterClass {
8
  class MemberInnerClass {
9
  }
10
  public MemberInnerClass getMemberInnerClassInstance() {
11
    return new MemberInnerClass();
12
  }
13
}

补充

外部类的作用范围

成员内部类的作用域为整个外部类类体，因为成员内部类的地位是外部类的实例成员。
由于成员内部类是外部类的实例成员，所以成员内部类的实例是需要基于外部类的实例来创建的，如果外部类没有创建实例，成员内部类是不能创建实例的。也就是说，如果你尝试在一个静态的块中创建一个成员内部类

1
class OuterClass {
2
  class MemberInnerClass {
3

4
  }
5

6
  public static void fun() {
7
    MemberInnerClass mic = new MemberInnerClass();
8
    // 这里会报错，因为静态函数是属于类的，
9
    // 而不是对象的，所以没有外部类的对象这个函数也能调用，
10
    // 又由于成员内部类要基于外部类的实例来创建，
11
    // 所以这里无法创建内部类实例
12
  }
13
}

静态内部类

初识

静态内部类是定义在一个外部类的成员位置的的类，有 static 修饰

它的地位就相当于外部类的一个静态成员

直接访问

1
class OuterClass {
2
  private static String outerClassField = "outer class's private field~";
3

4
  static class StaticNestedClass { // 静态内部类
5
    public void fun() {
6
      System.out.println(outerClassField); // 直接使用外部类的静态成员名访问这个成员
7
    }
8
  }
9
}

使用外部类访问

1
class OuterClass {
2
  private static String outerClassField = "outer class's private field~";
3

4
  static class StaticNestedClass { // 静态内部类
5
    public void fun() {
6
      System.out.println(OuterClass.outerClassField);
7
      // 通过外部类名加静态成员名访问这个静态成员
8
    }
9
  }
10
}
11
//这里因为是静态内部类，所以这个静态内部类是属于这个外部类整个类的，而不是属于某个外部类的实例的，所以这个静态内部类中没有外部类当前实例的 this 引用。同时，静态内部类也只能访问外部类的静态成员。
12

13
//所以这里使用的是外部类名加静态成员名来访问。

1
class OuterClass {
2
  static class StaticNestedClass {
3
    private String staticNestedClassField = "static nested class's field";
4
  }
5

6
  public void fun() {
7
    StaticNestedClass snc = new StaticNestedClass();
8

9
    System.out.println(snc.staticNestedClassField);
10
  }
11
}
12
//

1
//在其他类中创建静态内部类的实例
2
//在其他类中创建静态内部类的实例需要保证静态内部类的对外可见性在这个其他类中是可见的
3
public class Example {
4
  public static void main(String[] args) {
5
    OuterClass.StaticNestedClass snc = OuterClass.getStaticNestedClassInstance();
6

7
  }
8
}
9

10
class OuterClass {
11
  static class StaticNestedClass {
12

13
  }
14

15
  public static StaticNestedClass getStaticNestedClassInstance() {
16
    return new StaticNestedClass();
17
  }
18
}

展开收起

总结

由于静态内部类相当于外部类的一个静态成员，所以它是属于外部类整个类的，而不是属于某个外部类实例的，

所以它不需要基于外部类的实例来进行实例化，直接使用外部类的类名就可以调用它的构造器来进行实例化。同时，由于它不是实例成员，它的内部也不在内嵌有外部类当前实例的 this 引用。它也无法访问外部类的非静态成员。静态内部类的作用域是外部类整个类体，因为它的地位是外部类的静态成员。

局部内部类

初识

局部内部类定义在方法、构造器或代码块内部，类似于方法的局部变量。它的作用域仅限于定义它的块中。

1
class OuterClass {
2
  private int a = 100;
3

4
  public void fun() {
5
    class LocalInnerClass {
6
      private int a = 200;
7

8
      public void foo() {
9
        System.out.println("LocalInnerClass's field: " + a);
10
        System.out.println("outerClass's field: " + OuterClass.this.a);
11
      }
12
    }
13

14
  }
15
}
16
//如果局部内部类定义在一个静态的局部中（例如静态代码块和静态方法）中，则在局部内部类中就不能访问到外部类的所有非静态成员。

展开收起

外部访问内部

1
class OuterClass {
2
  public void fun() {
3
    class LocalInnerClass {
4
      private String innerfield = "Hello";
5
    }
6

7
    LocalInnerClass lic = new LocalInnerClass();
8
    System.out.println(lic.innerfield);// 通过局部内部类的实例来访问其成员
9

10
  }
11
}

总结

由于局部内部类的地位就相当于局部变量，所以它不能添加访问修饰符，但能用 final 修饰。局部内部类的作用域只在定义它的块中。在局部内部类中可以访问外部类的所有成员（包括私有的），同时在外部类定义了局部内部类的块中也可以访问局部内部类的所有成员（包括私有的）。局部内部类不能包含静态成员（静态属性、静态方法、静态代码块和静态内部类），因为静态内部类的作用域仅限于方法内部，而静态成员通常是与类本身关联的。在 JDK 16 时，加了一个局部内部类中可以有的静态成员，就是静态属性，同时有一个限制，这个静态属性必须是 final 修饰的（这里有一个细节，static 和 final 同时使用，编译器有优化，这样这个属性就是编译时常量，不是在类加载时初始化，而是在编译时初始化。其他的静态成员依然不能在局部内部类中出现。

匿名内部类

初识

匿名内部类是一种特殊的内部类，它没有显式的类名。匿名内部类通常用于创建一个类的实例，而这个类只需要使用一次。匿名内部类可以继承一个类或实现一个接口，并且可以在定义类的内容的同时创建对象。

匿名内部类类型

匿名内部类实现接口

1
interface Interface {
2
  void cry();
3
}
4

5
class OuterClass {
6
  public void method() {
7
    Interface cat = new Interface() {
8
      @Override
9
      public void cry() {
10
        System.out.println("Meow~");
11
      }
12
    };// 这里就是一个匿名内部类，
13
      // 这个匿名内部类实现了Interface接口，
14
      // 定义了类的结构后就被实例化了
15

16
    cat.cry();
17
  }
18
}

展开收起

匿名内部类继承抽象类

1
abstract class Animal {
2
  private String name;
3

4
  public Animal(String name) {
5
    this.name = name;
6
  }
7

8
  abstract void cry();
9
}
10

11
class OuterClass {
12
  public void method() {
13
    Animal cat = new Animal("cat") {
14
      @Override
15
      public void cry() {
16
        System.out.println("Meow~");
17
      }
18
    };// 这里就是一个匿名内部类，
19
      // 这个匿名内部类继承了抽象类Animal，然后实现了抽象类的抽象方法，
20
      // 定义了类的结构后就被实例化了
21

22
    cat.cry();
23
  }
24
}

展开收起

特点

匿名内部类的类名

匿名内部类只是没有显式的类名，但实际上有隐式的名字，一般命名规则是 外部类名$1 ，这里的 1 是指在这个外部类内定义的第一个匿名内部类，我们可以通过 getClass() 方法获取类名：

1
public class Example {
2
  public static void main(String[] args) {
3
    new OuterClass().method();
4
  }
5
}
6

7
interface Interface {
8

9
}
10

11
class OuterClass$1 {
12

13
}
14

15
class OuterClass {
16
  public void method() {
17
    Interface i = new Interface() {
18
      // 匿名内部类
19
    };
20

21
    System.out.println(i.getClass());
22
  }
23
}

展开收起

内部访问外部

直接访问

1
abstract class Animal {
2
    abstract void foo();
3
}
4

5
class OuterClass {
6
  private String outerField = "outer class private field~";
7

8
  public void fun() {
9
    Animal cat = new Animal() {
10
            @Override
11
      public void foo() {
12
        System.out.println(outerField);// 直接访问
13
      }
14
    };
15

16
  }
17
}

展开收起

通过外部this引用访问

1
abstract class Animal {
2
    abstract void foo();
3
}
4

5
class OuterClass {
6
  private String outerField = "outer class private field~";
7

8
  public void fun() {
9
    Animal cat = new Animal() {
10
            @Override
11
      public void foo() {
12
        System.out.println(OuterClass.this.outerField);// 通过外部类的this引用访问
13
      }
14
    };
15

16
  }
17
}
18
//如果匿名内部类定义在一个静态的局部中（例如静态代码块和静态方法）中，则在匿名内部类中就不能访问到外部类的所有非静态成员

展开收起

在外部类定义匿名内部类的块中访问匿名内部类的成员

初识

由于匿名内部类的类名不是显式的，所以我们只能使用匿名内部类的父类或者其实现接口类型的引用来指向匿名内部类的对象，这就导致我们只能访问到匿名内部类的父类或者其实现接口中有的成员。对于匿名内部类中的所有特有成员，外界都是不能直接访问到的，因为我们没法将这个匿名内部类的引用向下转型，所以就没有办法访问子类（匿名内部类）的特有成员。

所以我们实际上不能直接访问到匿名内部类的成员，只有匿名内部类重写了父类或者接口的默认方法，或者匿名内部类实现了接口的抽象方法，这样就可以通过动态绑定实现调用匿名内部类的方法。但也仅限于调用方法，因为对于属性是静态绑定的，

所以匿名内部类中的所有属性外界都是不能直接访问的（这与上面说的匿名内部类的所有特有成员外界都不能访问一致）

1
interface Interface {
2
  int interfaceField = 100;
3
  void cry();
4
}
5

6
class OuterClass {
7
  public void fun() {
8
    Interface cat = new Interface() {
9
      @Override
10
      public void cry() {
11
        System.out.println("Meow~");
12
      }
13

14
      public String anonymousClassField = "anonymous class's specific field~";
15
      public void anonymousClassMethod() {
16
        System.out.println("anonymous class's specific method~");
17
      }
18
    };
19

20
    cat.cry(); // 可以直接访问匿名内部类重写的方法，通过动态绑定机制
21

22
    System.out.println(cat.interfaceField); // 可以访问接口中的字段，因为引用是接口类型的
23

24
    // cat.anonymousClassMethod(); // 没法访问匿名内部类的特有方法
25

26
    // System.out.println(cat.anonymousClassField); // 没法访问匿名内部类的特有属性
27
  }
28
}

展开收起

使用匿名内部类的实例访问其成员的语法

1
abstract class Animal {
2
  abstract void cry();
3
}
4
 //这种方式只能访问一次匿名内部类的实例的成员，然后这个实例就不能访问到了，也就被垃圾回收机制回收了。
5
class OuterClass {
6
  public void fun() {
7
    new Animal() {
8
      @Override
9
      void cry() {
10
        System.out.println("Meow~");
11
      }
12
    }.cry();// 创建对象之后立马调用，
13
        // 这种方式适用于创建实例后只使用一次这个实例的情形
14
        // 这中情况，前面不能使用Animal类型的引用来接受了，
15
        // 因为这样就是相当于调用了一个cry方法
16
        // 返回值是void
17
  }
18
}

展开收起

匿名内部类访问定义它的块中的局部变量

1
interface Interface {
2
  void cry();
3
}
4

5
class OuterClass {
6
  public void fun() {
7
    final int finalLocalVar = 0;
8
    int neverChangedVar = 0;
9
    // neverChangedVar = 1;
10
    // 这里如果有这一个语句的话，后面就会报错，因为这样这个局部变量就不是隐式final的了
11
    Interface cat = new Interface() {
12
      @Override
13
      public void cry() {
14
        System.out.println(finalLocalVar);
15
        System.out.println(neverChangedVar);
16
      }
17
    };
18

19
  }
20
}

展开收起

1
interface Interface {
2
  void cry();
3
}
4

5
class OuterClass {
6
  public void fun(final int finalParameter, int neverChangedParameter) {
7
    // neverChangedParameter = 0;
8
    // 这里如果有这一句的话，也会报错，因为这样这个参数就不是隐式final的了
9
    Interface cat = new Interface() {
10
      @Override
11
      public void cry() {
12
        System.out.println(finalParameter);
13
        System.out.println(neverChangedParameter);
14
      }
15
    };
16

17
  }
18
}

展开收起

最佳实践

1
public class Example {
2
  public static void animalCry(Cry c) {
3
    c.cry();
4
  }
5

6
  public static void main(String[] args) {
7
    animalCry(new Cry() { // 直接创建一个匿名内部类的实例，同时作为参数传给这个方法
8
      @Override
9
      public void cry() {
10
        System.out.println("Meow~");
11
      }
12
    });
13
  }
14
}
15

16
interface Cry {
17
  void cry();
18
}

展开收起

1
public abstract class Animal{
2
public abstract void eat();
3
}//抽象类
4

5
public interface swim{
6
public abstractvoid swim(); }
7

8
public static void main(String[] args) {
9
// 匿名内部类实现 接口整体看为对象 接口多态
10
swim s=new swim(){//父类swim接口=子类匿名内部类
11
@override 2个用法
12
public void swim()};//去接收对象
13
S.swim
14
{System.out.println("匿名内部类");}
15
//调用方法
16
//编译看左边,运行看右边的原则
17
new swim(
18
@override 2个用法
19
public void swim(){System.out.println("匿名内部类");}
20
}.swim()
21
匿名内部类继承抽象类
22
method(new Animal(){
23
@Override
24
public void eat() {
25
System.out.println("动物吃东西");

展开收起