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

first commit

Browse Source
This commit is contained in:
bluish
2026-01-07 16:24:34 +00:00
commit 5c1399bb96
362 changed files with 59794 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
src/content/posts/agent.md Normal file
View File

@@ -0,0 +1,228 @@
---
title: Agent应用框架
published: 2025-01-11
pinned: false
description: Agent应用框架
tags: [Agent]
category: 学习日志
draft: true
---
# 一、Agent应用架构深度解析
下面有两个Agent的方案，请对比一下，哪个方案更好？
方案一：
```mermaid
graph LR
规划--> 行动1 --> 行动2 --> 结束
```
方案二：
```mermaid
graph LR
思考1--> 行动1 --> 思考2 --> 行动2 --> 结束
```
方案二比方案一好，因为思考2可以判断行动1的执行效果是否达成目的，达成目的时继续下一个行动，否则需要修改行动1并重新执行。
## Agent应用架构
```mermaid
graph LR
规划--> 思考;
行动 --> 思考;
思考-->行动;
思考-->结束;
```
运行机制：
```mermaid
graph LR
Thought--> Observation;
Observation-->Action;
Action-->Thought;
```
Though：决定下一步要做的动作并给出理由
Action：执行下一步动作
Observation：观察执行动作结果的观察，用于反馈思考
> React：智能体感知环境变化做出相应调整的机制
```mermaid
graph LR
subgraph Tools
Calendar
Calculator
CodeInterpreter
Search
...more
end
A[Tools] -->Calendar;
A -->Calculator;
A -->CodeInterpreter;
A -->Search;
A -->...more;
subgraph Memory
C[Short-term memory]
D[Long-term memory]
end
E[大模型]-->A
E --> B[Memory]
E --> F[Action];
B-->C
B-->D
E --> G[Planning];
G --> H[Reflection];
G --> I[Self-critics];
G --> J[Chain of thoughts];
G --> K[Subgoal decomposition];
A-.->F
B-.->G
B-.->H
```
### Tools:工具库
Memory:记忆
Action:行动
### Planning：规划
- 理解任务，给出完成任务的具体步骤
- 反思和优化，下一步行动的一个推理
规划阶段的关键技术：
- Chain-of-Thought Prompting(COT)
通过Prompt激发大模型的潜能，引导LLM做出更好的规划。
例子：
Q:我有5个羽毛球。我买了2罐羽毛球，一罐3个。我现在有多少个羽毛球？
GPT-4o:你原本有 5 个羽毛球，买了 2 瓶，每瓶 3 个。所以，你现在总共有：
5 + 2 × 3 = 5 + 6 = 11 个羽毛球。
- 反思和细化
- 记忆增强
记忆增强通常有两种方法，RAG和微调。目的是注入背景知识，让模型能更好地完成任务。
<aside>
💡
什么时候用RAG，什么时候用微调？
当数据更新快、数据量较少时，使用RAG更好。
</aside>
1. RAG的核心技术有：
- 数据工程：收集数据，需要确保数据高质量
- 数据切分：切分数据，切分的每个chunk尽量高质量
- 一阶段检索：语义检索，尽可能多的找知识
- 二阶段精排：重排序，返回高质量的数据
- 用户意图识别：理解用户意图
- 效果评估
### Action：行动
- 语言模型通过推理触发
- 执行器调用工具执行
```mermaid
graph LR
工具库-->|注册| LLM --> |触发|执行器
```
函数调用执行全过程：
[![agent.png](https://tuchuang.bluishhao.top/i/2024/12/24/676ac9cfbe407.png)](https://tuchuang.bluishhao.top/i/2024/12/24/676ac9cfbe407.png)
#### 1.定义函数
编写函数，在注释说明该函数的功能、需要的参数、返回的数据。
```python
def add(num1,num2):
"""
该函数计算两个数字的和
:param num1: 必要参数，表示需要计算的第一个数字
:param num2: 必要参数，表示需要计算的第二个数字
:return: add函数计算后的结果，返回结果为float对象
"""
return float(num1+num2)
```
注册函数
```python
add_tool={
"type":"function",
"function":{
"name":"add",
"description":"用于执行add算法函数，定义了一种将两个数字加起来的计算过程",
"parameters":{"type":"object","parameters":{"num1":{"type":"float","description":"需要计算的第一个数字"},"num2":{"type":"float","description":"需要计算的第二个数字"}},"required":["num1","num2"]}
}
}
tools=[add_tool]
```
#### 2.函数描述和模型调用（第一次）
模型去匹配对应的函数并调用。
```python
response = client.chat.completions.create(
model="gpt-3.5-turbo",
messages=messages,
tools=tools,
tool_choice="auto",
)
response.choices[0].message
```
回复的内容如下：
```python
ChatCompletionMessage(content=None, role='assistant', function_call=None, tool_calls=[ChatCompletionMessageToolCall(id='call_OqKaG4mk8Z5oEVKCYsd5rSCO', function=Function(arguments='{"num1":"1","num2":"2"}', name='add_tool'), type='function')])
```
这里的id是唯一的，用于匹配询问与回复。
#### 3.解析模型返回数据并完成函数调用
```python
tool_calls = response.choices[0].message.tool_calls
for tool_call in tool_calls:
function_name = tool_call.function.name
function_to_call = available_tools[function_name]
function_args = json.loads(tool_call.function.arguments)
function_response = function_to_call(**function_args)
print(function_name)
print(function_args)
print(function_response)
```
输出为：
```python
add_tool
{'num1':'1','num2':'2'}
"3"
```
#### 4.结果增强模型生成（第二次）
将函数调用的结果添加到消息中，增强模型生成。
```python
messages.append(
{
"tool_call_id": tool_call.id,
"role": "tool",
"name": function_name,
"content": function_response,
}
)
```
### Observation

313
src/content/posts/code-examples.md Normal file
View File

@@ -0,0 +1,313 @@
---
title: Firefly 代码块示例
published: 1970-01-03
pinned: false
description: 在Firefly中使用表达性代码的代码块在 Markdown 中的外观。
tags: [Markdown, Firefly]
category: 文章示例
draft: false
image: ./images/firefly3.webp
---
在这里，我们将探索如何使用 [Expressive Code](https://expressive-code.com/) 展示代码块。提供的示例基于官方文档，您可以参考以获取更多详细信息。
## 表达性代码
### 语法高亮
[语法高亮](https://expressive-code.com/key-features/syntax-highlighting/)
#### 常规语法高亮
```js
console.log('此代码有语法高亮!')
```
#### 渲染 ANSI 转义序列
```ansi
ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold: Red Green Yellow Blue Magenta Cyan
- Dimmed: Red Green Yellow Blue Magenta Cyan
256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177
Full RGB colors:
ForestGreen - RGB(34, 139, 34)
Text formatting: Bold Dimmed Italic Underline
```
### 编辑器和终端框架
[编辑器和终端框架](https://expressive-code.com/key-features/frames/)
#### 代码编辑器框架
```js title="my-test-file.js"
console.log('标题属性示例')
```
---
```html
<!-- src/content/index.html -->
<div>文件名注释示例</div>
```
#### 终端框架
```bash
echo "此终端框架没有标题"
```
---
```powershell title="PowerShell 终端示例"
Write-Output "这个有标题!"
```
#### 覆盖框架类型
```sh frame="none"
echo "看，没有框架!"
```
---
```ps frame="code" title="PowerShell Profile.ps1"
# 如果不覆盖，这将是一个终端框架
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail
```
### 文本和行标记
[文本和行标记](https://expressive-code.com/key-features/text-markers/)
#### 标记整行和行范围
```js {1, 4, 7-8}
// 第1行 - 通过行号定位
// 第2行
// 第3行
// 第4行 - 通过行号定位
// 第5行
// 第6行
// 第7行 - 通过范围 "7-8" 定位
// 第8行 - 通过范围 "7-8" 定位
```
#### 选择行标记类型 (mark, ins, del)
```js title="line-markers.js" del={2} ins={3-4} {6}
function demo() {
console.log('此行标记为已删除')
// 此行和下一行标记为已插入
console.log('这是第二个插入行')
return '此行使用中性默认标记类型'
}
```
#### 为行标记添加标签
```jsx {"1":5} del={"2":7-8} ins={"3":10-12}
// labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>
```
#### 在单独行上添加长标签
```jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15}
// labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>
```
#### 使用类似 diff 的语法
```diff
+此行将标记为已插入
-此行将标记为已删除
这是常规行
```
---
```diff
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
no whitespace will be removed either
```
#### 结合语法高亮和类似 diff 的语法
```diff lang="js"
function thisIsJavaScript() {
// 整个块都会以 JavaScript 高亮显示，
// 并且我们仍然可以为其添加 diff 标记！
- console.log('要删除的旧代码')
+ console.log('新的闪亮代码！')
}
```
#### 标记行内的单独文本
```js "given text"
function demo() {
// 标记行内的任何给定文本
return '支持给定文本的多个匹配项';
}
```
#### 正则表达式
```ts /ye[sp]/
console.log('单词 yes 和 yep 将被标记。')
```
#### 转义正斜杠
```sh /\/ho.*\//
echo "Test" > /home/test.txt
```
#### 选择内联标记类型 (mark, ins, del)
```js "return true;" ins="inserted" del="deleted"
function demo() {
console.log('这些是插入和删除的标记类型');
// return 语句使用默认标记类型
return true;
}
```
### 自动换行
[自动换行](https://expressive-code.com/key-features/word-wrap/)
#### 为每个块配置自动换行
```js wrap
// 启用换行的示例
function getLongString() {
return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}
```
---
```js wrap=false
// wrap=false 的示例
function getLongString() {
return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}
```
#### 配置换行的缩进
```js wrap preserveIndent
// preserveIndent 示例（默认启用）
function getLongString() {
return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}
```
---
```js wrap preserveIndent=false
// preserveIndent=false 的示例
function getLongString() {
return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}
```
## 可折叠部分
[可折叠部分](https://expressive-code.com/plugins/collapsible-sections/)
```js collapse={1-5, 12-14, 21-24}
// 所有这些样板设置代码将被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// 这部分代码默认可见
engine.doSomething(1, 2, 3, calcFn)
function calcFn() {
// 您可以有多个折叠部分
const a = 1
const b = 2
const c = a + b
// 这将保持可见
console.log(`计算结果: ${a} + ${b} = ${c}`)
return c
}
// 直到块末尾的所有代码将再次被折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: '示例样板代码结束' })
```
## 行号
[行号](https://expressive-code.com/plugins/line-numbers/)
### 为每个块显示行号
```js showLineNumbers
// 此代码块将显示行号
console.log('来自第2行的问候!')
console.log('我在第3行')
```
---
```js showLineNumbers=false
// 此块禁用行号
console.log('你好?')
console.log('抱歉，你知道我在第几行吗?')
```
### 更改起始行号
```js showLineNumbers startLineNumber=5
console.log('来自第5行的问候!')
console.log('我在第6行')
```

150
src/content/posts/docker.md Normal file
View File

@@ -0,0 +1,150 @@
---
title: Docker安装教程（Ubuntu）
published: 2025-01-02
pinned: false
description: Docker安装教程（Ubuntu）。
tags: [Docker]
category: 教程系列
draft: false
---
# 一、前期准备
## 1、防火墙设置
1.如果您使用 ufw 或 firewalld 来管理防火墙设置，请注意，当您使用 Docker 公开容器端口时，这些端口会绕过您的防火墙规则。当您使用 Docker 发布容器的端口时，该容器的进出流量在通过 ufw 防火墙设置之前就会被重定向。Docker 在 `nat` 表中路由容器流量，这意味着数据包在到达 ufw 使用的 `INPUT` 和 `OUTPUT` 链之前就会被重定向。数据包在防火墙规则生效之前就被路由，实际上忽略了您的防火墙配置。
2.Docker 仅兼容 `iptables-nft` 和 `iptables-legacy` 。使用 `nft` 创建的防火墙规则在安装了 Docker 的系统上不受支持。请确保您使用的任何防火墙规则集都是使用 `iptables` 或 `ip6tables` 创建的，并将它们添加到 `DOCKER-USER` 链中，参见数据包过滤和防火墙。
具体点击下面链接查看：
[Packet filtering and firewalls](https://docs.docker.com/engine/network/packet-filtering-firewalls/)
## 2、操作系统要求
要安装 Docker 引擎，您需要以下 Ubuntu 版本之一的 64 位版本：
- Ubuntu Oracular 24.10
- Ubuntu Noble 24.04 (LTS)
- Ubuntu Jammy 22.04 (LTS)
- Ubuntu Focal 20.04 (LTS)
Docker 引擎适用于 Ubuntu，兼容 x86_64（或 amd64）、armhf、arm64、s390x 和 ppc64le（ppc64el）架构。
# 二、安装方法
[Docker安装官方教程](https://docs.docker.com/engine/install/ubuntu/#installation-methods)
# 三、非root用户运行Docker
Docker 守护进程绑定到 Unix 套接字，而不是 TCP 端口。默认情况下，Unix 套接字属于 `root` 用户，其他用户只能使用 `sudo` 访问它。Docker 守护进程始终以 `root` 用户身份运行。
如果您不想在 `docker` 命令前加上 `sudo` ，请创建一个名为 `docker` 的 Unix 组并将用户添加到其中。当 Docker 守护进程启动时，它会创建一个 Unix 套接字，该套接字可供 `docker` 组的成员访问。在某些 Linux 发行版中，使用软件包管理器安装 Docker Engine 时，系统会自动创建此组。在这种情况下，您无需手动创建组。
1、创建 `docker` 群组并添加您的用户：
```bash
sudo groupadd docker
```
2、添加您的用户到 `docker` 组。
```bash
sudo usermod -aG docker $USER
```
3、退出并重新登录，或者运行下面命令。
```bash
newgrp docker
```
4、在不使用 `sudo` 的情况下运行 `docker` 命令。
```bash
docker run hello-world
```
> 如果出现以下错误：
>
>
> WARNING: Error loading config file: /home/user/.docker/config.json -
> stat /home/user/.docker/config.json: permission denied
>
> 此错误表示由于之前使用了 `sudo` 命令， `~/.docker/` 目录的权限设置不正确。
> 要解决这个问题，要么删除 `~/.docker/` 目录（它将自动重新创建，但任何自定义设置都将丢失），要么使用以下命令更改其所有权和权限：
>
> ```bash
> sudo chown "$USER":"$USER" /home/"$USER"/.docker -R
> sudo chmod g+rwx "$HOME/.docker" -R
> ```
>
# 四、Docker配置
## 1、修改镜像源
创建或修改/etc/docker/daemon.json文件
```bash
vim /etc/docker/daemon.json
```
或：
```bash
nano /etc/docker/daemon.json
```
添加下面内容：
```json
{
"registry-mirrors": [
"https://registry-1.docker.io"
]
}
```
> 请修改地址为可用的镜像源
>
重启docker
```bash
service docker restart
```
查看是否更换成功
```bash
docker info
```
## 2、配置默认日志驱动程序
Docker 为主机上运行的所有容器提供日志驱动程序，用于收集和查看日志数据。默认的日志驱动程序 `json-file` 将日志数据写入主机文件系统中的 JSON 格式文件。随着时间的推移，这些日志文件会不断增大，可能导致磁盘资源耗尽。
为避免因过度使用磁盘存储日志数据而产生问题，请考虑以下选项之一：
- 配置 `json-file` 日志驱动程序以启用[日志轮转](https://docs.docker.com/engine/logging/drivers/json-file/)。
- 使用默认执行日志轮转的[替代日志驱动程序](https://docs.docker.com/engine/logging/configure/#configure-the-default-logging-driver)，例如[“local”日志驱动程序](https://docs.docker.com/engine/logging/drivers/local/)。
- 使用将日志发送到远程日志聚合器的日志驱动程序。
# Docker卸载
1.卸载 Docker Engine、CLI、containerd 和 Docker Compose 软件包：
```bash
sudo apt-get purge docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin docker-ce-rootless-extras
```
2.镜像、容器、卷或自定义配置文件在您的宿主机上不会被自动删除。要删除所有镜像、容器和卷：
```bash
sudo rm -rf /var/lib/docker
sudo rm -rf /var/lib/containerd
```
3.删除源列表和密钥环
```bash
sudo rm /etc/apt/sources.list.d/docker.list
sudo rm /etc/apt/keyrings/docker.asc
```

22
src/content/posts/draft.md Normal file
View File

@@ -0,0 +1,22 @@
---
title: 草稿示例
published: 1970-01-01
tags: [Markdown, 博客, 演示]
category: 文章示例
draft: true
---
# 这篇文章是草稿
这篇文章目前处于草稿状态，尚未发布。因此，它不会对普通读者可见。内容仍在进行中，可能需要进一步编辑和审查。
当文章准备发布时，您可以在 Frontmatter 中将 "draft" 字段更新为 "false"：
```markdown
---
title: 草稿示例
published: 2024-01-11T04:40:26.381Z
tags: [Markdown, 博客, 演示]
category: 示例
draft: false
---

272
src/content/posts/firefly-layout-system.md Normal file
View File

@@ -0,0 +1,272 @@
---
title: Firefly 布局系统详解
published: 1970-01-03
description: 深入了解 Firefly 的布局系统，包括侧边栏布局（左侧/双侧）和文章列表布局（列表/网格），以及全新的三列网格模式。
image: ./images/firefly1.webp
tags: [Firefly, 布局, 博客, 使用指南]
category: 博客指南
draft: false
---
## 📖 概述
Firefly 提供了灵活的布局系统，允许您根据内容需求和个人喜好自定义博客的视觉呈现方式。布局系统主要包括**侧边栏布局**和**文章列表布局**两个维度，它们相互配合，共同决定了页面的整体结构。
本文将详细介绍 Firefly 的各种布局模式、它们的特点、使用场景，以及不同布局组合的效果。
---
## 一、侧边栏布局系统
侧边栏是博客页面的重要组成部分，用于展示导航、分类、标签、统计信息等辅助内容。Firefly 支持两种侧边栏布局模式。
### 1.1 左侧边栏模式 (position: "left")
#### 特点
- 侧边栏固定在页面左侧
- 主内容区域位于右侧
- 符合从左到右的阅读习惯
- 适合展示导航和分类等重要信息
#### 布局结构
![左侧边栏布局](./images/left-list.webp)
#### 适用场景
- 传统博客风格
- 强调导航和分类的博客
- 需要突出用户资料的个人博客
- 内容为主，辅助信息次之的场景
:::tip
开启左侧单侧边栏后，位于文章详情页右侧边栏的文章目录导航将失效
会改用浮动目录导航替代，需要手动点击弹出目录导航
但可以通过showRightSidebarOnPostPage配置是否在文章详情页显示右侧边栏
当position为left时开启此项后，文章详情页将显示双侧边栏，主页等其他页面保持左侧单侧边栏
适用在只想用左侧单侧栏，但在文章详情页想用右侧栏的目录等组件的场景
:::
#### 配置示例
```typescript
// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
enable: true,
position: "left", // 左侧边栏
showRightSidebarOnPostPage: true, // 是否在文章详情页显示右侧边栏
};
```
---
### 1.2 双侧边栏模式 (position: "both")
#### 特点
- 左右两侧同时存在侧边栏
- 主内容区域位于中间
- 最大化利用屏幕空间
- 可以展示更多辅助信息
- 适合宽屏显示器
#### 布局结构
![双侧边栏布局](./images/both-list.webp)
#### 适用场景
- 宽屏桌面端浏览
- 信息密集型博客
- 需要展示大量辅助内容
- 专业性强的技术博客
#### 配置示例
```typescript
// src/config/sidebarConfig.ts
export const sidebarLayoutConfig: SidebarLayoutConfig = {
enable: true,
position: "both", // 双侧边栏
```
---
## 二、文章列表布局系统
文章列表是博客首页和归档页的核心内容，Firefly 提供两种展示方式，并支持多种网格配置。
### 2.1 列表模式 (defaultMode: "list")
#### 特点
- 单列纵向排列
- 显示文章封面图
- 展示更多文章摘要
- 适合深度阅读
#### 列表布局结构
![列表模式布局](./images/left-list.webp)
#### 优点
- ✅ 视觉冲击力强，封面图吸引眼球
- ✅ 可以展示更多文章信息（摘要、标签等）
- ✅ 适合图片内容丰富的博客
- ✅ 移动端友好，单列更易阅读
- ✅ 兼容所有侧边栏配置（单侧、双侧）
#### 配置示例
```typescript
// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
postListLayout: {
defaultMode: "list", // 列表模式
allowSwitch: true, // 允许用户切换
},
};
```
---
### 2.2 网格模式 (defaultMode: "grid")
#### 特点
- 多列横向排列（支持 2 列或 3 列）
- 紧凑布局，信息密度高
- 适合快速浏览
#### 2.2.1 双列网格 (Columns: 2)
这是网格模式的默认配置，适合大多数场景。
![双列网格布局](./images/left-grid2.webp)
#### 2.2.2 三列网格 (Columns: 3) ✨ New
在宽屏设备上，您可以开启三列网格模式，进一步提高信息密度。
![三列网格布局](./images/left-grid3.webp)
**⚠️ 注意**：三列网格模式仅在**左侧边栏模式**（或无侧边栏）下生效。如果您启用了双侧边栏，系统将自动回退到双列网格，以保证文章卡片有足够的展示宽度。
#### 配置示例
```typescript
// src/config/siteConfig.ts
export const siteConfig: SiteConfig = {
postListLayout: {
defaultMode: "grid",
allowSwitch: true,
grid: {
masonry: true, // 开启瀑布流
columns: 3, // 设置为 3 列模式（仅单侧边栏生效）
},
},
};
```
---
### 2.3 瀑布流布局 (Masonry)
Firefly 的网格模式内置了智能瀑布流布局支持，解决了网格布局中因图文混合文章导致的卡片高度不一致导致的空白问题。
![瀑布流布局](./images/masonry.webp)
- **智能排版**：采用 Z 字形分布（左右交替），严格保持文章的时间顺序。
- **消除空白**：通过绝对定位精确计算每个卡片的位置，让卡片紧贴上一行的卡片，消除垂直方向的空白间隙。
- **配置灵活**：您可以在 `siteConfig.ts` 中通过 `postListLayout.grid.masonry` 选项自由开启或关闭此功能。
---
## 三、布局组合指南
Firefly 允许您自由组合侧边栏和文章列表布局。以下是各种组合的效果说明。
### 3.1 左侧边栏 + 网格模式
这是最灵活的组合。您可以选择 2 列或 3 列网格。
- **2 列模式**：经典的网格布局，卡片宽度适中，阅读舒适。
- **3 列模式**：适合宽屏（≥1024px），单屏展示更多内容，视觉效果震撼。
### 3.2 双侧边栏 + 网格模式
在旧版本中，此组合被禁用。但在最新版 Firefly 中，我们解除了限制，允许双侧边栏与网格模式共存。
![双侧边栏+网格布局](./images/both-grid.webp)
**特点与限制**：
- **强制双列**：即使您配置了 `columns: 3`，在此模式下也会强制显示为 2 列。
- **空间紧凑**：由于左右都有侧边栏，中间的主内容区域相对较窄。
- **信息密度极高**：这是信息密度最高的布局方式，适合需要同时展示大量导航信息和文章列表的站点。
### 3.3 布局选择建议
| 侧边栏模式 | 文章列表模式 | 推荐度 | 适用场景 |
|-----------|------------|--------|---------|
| 左侧边栏 | 列表模式 | ⭐⭐⭐⭐⭐ | 摄影、设计、生活类博客，强调图片和沉浸感 |
| 左侧边栏 | 2列网格 | ⭐⭐⭐⭐⭐ | 技术、笔记类博客，平衡阅读与检索效率 |
| 左侧边栏 | 3列网格 | ⭐⭐⭐⭐⭐ | 内容量大的站点，宽屏体验极佳 |
| 双侧边栏 | 列表模式 | ⭐⭐⭐⭐⭐ | 需要展示大量侧边栏信息的站点 |
| 双侧边栏 | 2列网格 | ⭐⭐⭐⭐⭐ | 极客风格，追求最高信息密度 |
---
## 四、响应式布局行为
Firefly 的布局系统具有智能的响应式设计，会根据屏幕尺寸自动调整。
### 4.1 智能降级规则
为了保证最佳阅读体验，系统会在屏幕变窄时自动调整布局：
1. **3 列网格 -> 2 列网格**：当屏幕宽度不足以容纳 3 列时（或开启双侧边栏时），自动降级为单列表模式。
2. **网格模式 -> 列表模式**：当屏幕宽度小于 1200px（平板和手机）时，网格模式会自动切换为单列列表模式，以保证卡片内容的可读性。
3. **双侧边栏 -> 左侧边栏**：当屏幕宽度小于 1200px 时，右侧边栏会自动隐藏，文章目录导航会切换成浮动目录导航。
---
## 五、常见问题
### Q1: 为什么我配置了 3 列网格，但只显示 2 列？
**A**: 请检查以下情况：
1. 是否开启了双侧边栏（`position: "both"`）？双侧边栏模式下强制 2 列。
2. 屏幕宽度是否足够？3 列模式通常需要 ≥1024px 的宽度。
### Q2: 为什么在手机上看不到网格效果？
**A**: 为了保证阅读体验，Firefly 在屏幕宽度小于 1200px 时会自动强制切换为列表模式。手机屏幕太窄，不适合展示多列网格。
### Q3: 布局切换按钮在哪里？
**A**: 布局切换按钮位于导航栏右侧。它仅在屏幕宽度 ≥ 1200px 时显示，因为在小屏幕上系统强制使用列表模式，无需切换。
---
## 六、总结
Firefly 的新版布局系统给予了您更大的自由度。无论是追求视觉冲击力的**三列网格**，还是追求信息密度的**双侧边栏网格**，您都可以通过简单的配置实现。
我们建议您根据自己的内容类型和目标读者的设备偏好，尝试不同的组合，找到最适合您的博客形态。
---
## 相关链接
- 📚 [侧边栏配置文档](https://docs-firefly.cuteleaf.cn/config/sidebarConfig-usage/)
- 📚 [站点配置文档](https://docs-firefly.cuteleaf.cn/config/siteConfig-usage/)
- 🏠 [Firefly 官方文档](https://docs-firefly.cuteleaf.cn/)
- ⭐ [Firefly GitHub](https://github.com/CuteLeaf/Firefly)

44
src/content/posts/firefly.md Normal file
View File

@@ -0,0 +1,44 @@
---
title: Firefly 一款清新美观的 Astro 博客主题模板
published: 1970-01-02
pinned: true
description: Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。
tags: [Markdown, Firefly, 博客, 主题, 模板]
category: 文章示例
draft: false
image: ./images/firefly2.webp
---
## 🌟 项目概述
**Firefly** 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。
**🖥️在线预览： [Firefly - Demo site](https://firefly.cuteleaf.cn/)**
**🏠我的博客： [https://blog.cuteleaf.cn](https://blog.cuteleaf.cn/)**
**📝Firefly使用文档： [https://docs-firefly.cuteleaf.cn](https://docs-firefly.cuteleaf.cn/)**
**⭐Firefly开源地址：[https://github.com/CuteLeaf/Firefly](https://github.com/CuteLeaf/Firefly)**
**⭐Fuwari开源地址：[https://github.com/saicaca/fuwari](https://github.com/saicaca/fuwari)**
::github{repo="CuteLeaf/Firefly"}
::github{repo="saicaca/fuwari"}
![Firefly](./images/1.webp)
## 🚀 技术架构
- **静态站点生成**: 基于 Astro ，提供极快的加载速度和优秀的 SEO 优化
- **TypeScript 支持**: 完整的类型安全，提升开发体验和代码质量
- **响应式设计**: 使用 Tailwind CSS 构建，完美适配桌面端和移动端
- **组件化开发**: 支持 Astro、Svelte 组件，灵活可扩展
## 📖 配置说明
> 📚 **详细配置文档**: 查看 [Firefly使用文档](https://docs-firefly.cuteleaf.cn/) 获取完整的配置指南

BIN
src/content/posts/guide/cover.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 414 KiB

112
src/content/posts/guide/index.md Normal file
View File

@@ -0,0 +1,112 @@
---
title: Firefly 简单使用指南
published: 1970-01-02
pinned: true
description: "如何使用 Firefly 博客模板。"
image: "./cover.webp"
tags: ["Firefly", "博客", "Markdown", "使用指南"]
category: 博客指南
draft: false
---
这个博客模板是基于 [Astro](https://astro.build/) 构建的。对于本指南中未提及的内容，您可以在 [Astro 文档](https://docs.astro.build/) 中找到答案。
## 文章的 Front-matter
```yaml
---
title: 我的第一篇博客文章
published: 2023-09-09
description: 这是我新 Astro 博客的第一篇文章。
image: ./cover.jpg
tags: [前端, 开发]
category: 前端开发
draft: false
---
```
| 属性 | 描述 |
|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `title` | 文章标题。 |
| `published` | 文章发布日期。 |
| `pinned` | 是否将此文章置顶在文章列表顶部。 |
| `description` | 文章的简短描述。显示在首页上。 |
| `image` | 文章封面图片路径。<br/>1. 以 `http://` 或 `https://` 开头：使用网络图片<br/>2. 以 `/` 开头：`public` 目录中的图片<br/>3. 不带任何前缀：相对于 markdown 文件的路径 |
| `tags` | 文章标签。 |
| `category` | 文章分类。 |
| `licenseName` | 文章内容的许可证名称。 |
| `author` | 文章作者。 |
| `sourceLink` | 文章内容的来源链接或参考。 |
| `draft` | 如果这篇文章仍是草稿，则不会显示。 |
| `slug` | 自定义文章 URL 路径。如果不设置，将使用文件名作为 URL。 |
## 文章文件的放置位置
您的文章文件应放置在 `src/content/posts/` 目录中。您也可以创建子目录来更好地组织您的文章和资源。
```
src/content/posts/
├── post-1.md
└── post-2/
├── cover.png
└── index.md
```
## 自定义文章 URL (Slug)
### 什么是 Slug？
Slug 是文章 URL 路径的自定义部分。如果不设置 slug，系统将使用文件名作为 URL。
### Slug 使用示例
#### 示例 1：使用文件名作为 URL
```yaml
---
title: 我的第一篇博客文章
published: 2023-09-09
---
```
文件：`src/content/posts/my-first-blog-post.md`
URL：`/posts/my-first-blog-post`
#### 示例 2：自定义 Slug
```yaml
---
title: 我的第一篇博客文章
published: 2023-09-09
slug: hello-world
---
```
文件：`src/content/posts/my-first-blog-post.md`
URL：`/posts/hello-world`
#### 示例 3：中文标题使用英文 Slug
```yaml
---
title: 如何使用 Firefly 博客主题
published: 2023-09-09
slug: how-to-use-firefly-blog-theme
---
```
文件：`src/content/posts/firefly-guide.md`
URL：`/posts/how-to-use-firefly-blog-theme`
### Slug 使用建议
1. **使用英文和连字符**：`my-awesome-post` 而不是 `my awesome post`
2. **保持简洁**：避免过长的 slug
3. **具有描述性**：让 URL 能够反映文章内容
4. **避免特殊字符**：只使用字母、数字和连字符
5. **保持一致性**：在整个博客中使用相似的命名模式
### 注意事项
- Slug 一旦设置并发布，建议不要随意更改，以免影响 SEO 和已存在的链接
- 如果多个文章使用相同的 slug，后面的文章会覆盖前面的
- Slug 会自动转换为小写

BIN
src/content/posts/images/1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
src/content/posts/images/both-grid.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
src/content/posts/images/both-list.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
src/content/posts/images/firefly1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
src/content/posts/images/firefly2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
src/content/posts/images/firefly3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB

BIN
src/content/posts/images/left-grid2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
src/content/posts/images/left-grid3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 KiB

BIN
src/content/posts/images/left-list.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
src/content/posts/images/masonry.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 191 KiB

91
src/content/posts/katex-math-example.md Normal file
View File

@@ -0,0 +1,91 @@
---
title: KaTeX 数学公式示例
published: 1970-01-02
description: 展示 Firefly 主题对 KaTeX 数学公式的支持，包括行内公式、块级公式和复杂数学符号。
tags: [KaTeX, Math, 示例]
category: 文章示例
draft: false
image: api
---
本文展示了 [Firefly](https://github.com/CuteLeaf/Firefly) 主题对 KaTeX 数学公式的渲染支持。
## 行内公式 (Inline)
行内公式使用单个 `$` 符号包裹。
例如：欧拉公式 $e^{i\pi} + 1 = 0$ 是数学中最优美的公式之一。
质能方程 $E = mc^2$ 也是家喻户晓。
## 块级公式 (Block)
块级公式使用两个 `$$` 符号包裹，会居中显示。
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
## 复杂示例
### 矩阵 (Matrices)
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\begin{pmatrix}
\alpha & \beta \\
\gamma & \delta
\end{pmatrix} =
\begin{pmatrix}
a\alpha + b\gamma & a\beta + b\delta \\
c\alpha + d\gamma & c\beta + d\delta
\end{pmatrix}
$$
### 极限与求和 (Limits and Sums)
$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$
$$
\lim_{x \to 0} \frac{\sin x}{x} = 1
$$
### 麦克斯韦方程组 (Maxwell's Equations)
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t}
\end{aligned}
$$
### 化学方程式 (Chemical Equations)
$$
\ce{CH4 + 2O2 -> CO2 + 2H2O}
$$
## 更多符号
| 符号 | 代码 | 渲染结果 |
| :--- | :--- | :--- |
| Alpha | `\alpha` | $\alpha$ |
| Beta | `\beta` | $\beta$ |
| Gamma | `\Gamma` | $\Gamma$ |
| Pi | `\pi` | $\pi$ |
| Infinity | `\infty` | $\infty$ |
| Right Arrow | `\rightarrow` | $\rightarrow$ |
| Partial | `\partial` | $\partial$ |
更多 KaTeX 语法请参考 [KaTeX Supported Functions](https://katex.org/docs/supported.html)。

93
src/content/posts/markdown-extended.md Normal file
View File

@@ -0,0 +1,93 @@
---
title: Markdown 扩展功能
published: 1970-01-01
updated: 1970-01-01
description: '了解 Firefly 中的 Markdown 功能'
image: ''
tags: [演示, 示例, Markdown, Firefly]
category: '文章示例'
draft: false
---
## GitHub 仓库卡片
您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。
::github{repo="CuteLeaf/Firefly"}
使用代码 `::github{repo="CuteLeaf/Firefly"}` 创建 GitHub 仓库卡片。
```markdown
::github{repo="CuteLeaf/Firefly"}
```
## 提醒框
支持以下类型的提醒框：`note` `tip` `important` `warning` `caution`
:::note
突出显示用户应该考虑的信息，即使在快速浏览时也是如此。
:::
:::tip
可选信息，帮助用户更成功。
:::
:::important
用户成功所必需的关键信息。
:::
:::warning
由于潜在风险需要用户立即注意的关键内容。
:::
:::caution
行动的负面潜在后果。
:::
### 基本语法
```markdown
:::note
突出显示用户应该考虑的信息，即使在快速浏览时也是如此。
:::
:::tip
可选信息，帮助用户更成功。
:::
```
### 自定义标题
可以自定义提醒框的标题。
:::note[我的自定义标题]
这是一个带有自定义标题的注释。
:::
```markdown
:::note[我的自定义标题]
这是一个带有自定义标题的注释。
:::
```
### GitHub 语法
> [!TIP]
> 也支持 [GitHub 语法](https://github.com/orgs/community/discussions/16925)。
```
> [!NOTE]
> 也支持 GitHub 语法。
> [!TIP]
> 也支持 GitHub 语法。
```
### 剧透
您可以为文本添加剧透。文本也支持 **Markdown** 语法。
内容 :spoiler[被隐藏了 **哈哈**]！
```markdown
内容 :spoiler[被隐藏了 **哈哈**]！

192
src/content/posts/markdown-mermaid.md Normal file
View File

@@ -0,0 +1,192 @@
---
title: Markdown Mermaid 图表
published: 1970-01-01
pinned: false
description: 一个包含 Mermaid 的 Markdown 博客文章简单示例。
tags: [Markdown, 博客, Mermaid, Firefly]
category: 文章示例
draft: false
---
# Markdown 中 Mermaid 图表完整指南
本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、甘特图、类图和状态图。
## 流程图示例
流程图非常适合表示流程或算法步骤。
```mermaid
graph TD
A[开始] --> B{条件检查}
B -->|是| C[处理步骤 1]
B -->|否| D[处理步骤 2]
C --> E[子过程]
D --> E
subgraph E [子过程详情]
E1[子步骤 1] --> E2[子步骤 2]
E2 --> E3[子步骤 3]
end
E --> F{另一个决策}
F -->|选项 1| G[结果 1]
F -->|选项 2| H[结果 2]
F -->|选项 3| I[结果 3]
G --> J[结束]
H --> J
I --> J
```
## 时序图示例
时序图显示对象之间随时间的交互。
```mermaid
sequenceDiagram
participant User as 用户
participant WebApp as 网页应用
participant Server as 服务器
participant Database as 数据库
User->>WebApp: 提交登录请求
WebApp->>Server: 发送认证请求
Server->>Database: 查询用户凭据
Database-->>Server: 返回用户数据
Server-->>WebApp: 返回认证结果
alt 认证成功
WebApp->>User: 显示欢迎页面
WebApp->>Server: 请求用户数据
Server->>Database: 获取用户偏好
Database-->>Server: 返回偏好设置
Server-->>WebApp: 返回用户数据
WebApp->>User: 加载个性化界面
else 认证失败
WebApp->>User: 显示错误消息
WebApp->>User: 提示重新输入
end
```
## 甘特图示例
甘特图非常适合显示项目进度和时间线。
```mermaid
gantt
title 网站开发项目时间线
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 设计阶段
需求分析 :a1, 2023-10-01, 7d
UI设计 :a2, after a1, 10d
原型创建 :a3, after a2, 5d
section 开发阶段
前端开发 :b1, 2023-10-20, 15d
后端开发 :b2, after a2, 18d
数据库设计 :b3, after a1, 12d
section 测试阶段
单元测试 :c1, after b1, 8d
集成测试 :c2, after b2, 10d
用户验收测试 :c3, after c2, 7d
section 部署
生产环境部署 :d1, after c3, 3d
发布 :milestone, after d1, 0d
```
## 类图示例
类图显示系统的静态结构，包括类、属性、方法及其关系。
```mermaid
classDiagram
class User {
+String username
+String password
+String email
+Boolean active
+login()
+logout()
+updateProfile()
}
class Article {
+String title
+String content
+Date publishDate
+Boolean published
+publish()
+edit()
+delete()
}
class Comment {
+String content
+Date commentDate
+addComment()
+deleteComment()
}
class Category {
+String name
+String description
+addArticle()
+removeArticle()
}
User "1" -- "*" Article : 写作
User "1" -- "*" Comment : 发表
Article "1" -- "*" Comment : 拥有
Article "1" -- "*" Category : 属于
```
## 状态图示例
状态图显示对象在其生命周期中经历的状态序列。
```mermaid
stateDiagram-v2
[*] --> 草稿
草稿 --> 审核中 : 提交
审核中 --> 草稿 : 拒绝
审核中 --> 已批准 : 批准
已批准 --> 已发布 : 发布
已发布 --> 已归档 : 归档
已发布 --> 草稿 : 撤回
state 已发布 {
[*] --> 活跃
活跃 --> 隐藏 : 临时隐藏
隐藏 --> 活跃 : 恢复
活跃 --> [*]
隐藏 --> [*]
}
已归档 --> [*]
```
## 饼图示例
饼图非常适合显示比例和百分比数据。
```mermaid
pie title 网站流量来源分析
"搜索引擎" : 45.6
"直接访问" : 30.1
"社交媒体" : 15.3
"推荐链接" : 6.4
"其他来源" : 2.6
```
## 总结
Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。
要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。
尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解！

1003
src/content/posts/markdown-tutorial.md Normal file
View File

File diff suppressed because it is too large Load Diff

69
src/content/posts/mdx-example.mdx Normal file
View File

@@ -0,0 +1,69 @@
---
title: MDX 格式文章示例
published: 1970-01-02
description: 这是一个 MDX 格式的示例文章，展示了如何在 Markdown 中使用 JSX。
tags: [MDX, 文章示例]
category: 文章示例
draft: false
image: api
---
import { Icon } from 'astro-icon/components'
:::tip
[Firefly](https://github.com/CuteLeaf/Firefly) 支持 `MDX` 和 `Markdown` 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。
:::
## Markdown 和 MDX 的区别
- Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。
- MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。
| 特性 | Markdown | MDX |
| :--- | :--- | :--- |
| 基础语法 | 支持 (CommonMark) | 支持 (CommonMark) |
| HTML 标签 | 支持 | 支持 (作为 JSX) |
| 组件导入 | 不支持 | 支持 (import) |
| 动态数据 | 不支持 | 支持 (JS 表达式) |
| 样式定制 | 有限 (class/style) | 灵活 (className/CSS-in-JS) |
## 使用组件
这是一个图标组件：
```
import { Icon } from 'astro-icon/components'
<div class="flex items-center gap-2 my-4">
<Icon name="fa6-solid:rocket" class="text-4xl text-red-500" />
<span>火箭发射！</span>
</div>
```
<div class="flex items-center gap-2 my-4">
<Icon name="fa6-solid:rocket" class="text-4xl text-red-500" />
<span>火箭发射！</span>
</div>
## 使用 JSX
你也可以直接写 HTML/JSX：
```
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
</div>
```
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
</div>
## 简单的变量导出
```
export const year = new Date().getFullYear()
今年是 {year} 年。
```
export const year = new Date().getFullYear()
今年是 {year} 年。
更多信息，请查看 [MDX 文档](https://mdxjs.com/)

133
src/content/posts/opendevin.md Normal file
View File

@@ -0,0 +1,133 @@
---
title: 部署Opendevin在WSL2 on Win11
published: 2025-01-02
pinned: false
description: 部署Opendevin在WSL2 on Win11的教程。
tags: [Opendevin, windows, wsl]
category: 教程系列
draft: false
---
# 一、 WSL2下载和设置
## 1.勾选WSL2所需的Windows功能
打开**控制面板**，选择**程序**，进入**启用或关闭windows功能**，勾选**Hyper-V及其内部**两个选项，向下滑动找到并勾选**适用于Linux的Windows子系统**和**虚拟机平台**，点击**确定**，然后**重启**Windows电脑。
> 若没有该选项则表示你的windows版本不是专业版及以上，要对Windows进行更新
## 2.下载WSL2
设置wsl版本：wsl --set-default-version 2
**win+R**，cmd进入命令行，设置WSL版本
```bash
wsl --set-default-version 2
```
查看可以安装的发行版：
```bash
wsl --list --online
```
安装ununtu 22.04：
```bash
wsl --install -d Ubuntu-22.04
```
> 注意安装完成后，需要你输入用户名和密码，密码是不显示的，安装完自动进入Linux系统(由于我已经下载安装过，这里就不附加图片了)
>
# 二、 Docker 下载和设置
## 1、Docke下载安装
进入docker官网下载docker desktop
[Docker Desktop: The #1 Containerization Tool for Developers | Docker](https://www.docker.com/products/docker-desktop/)
下载完成后，点击Docker Desktop Installer.exe进行安装，安装时两个选项都进行勾选，等待安装成功。
## 2.Docker设置
打开刚刚安装好的Docker desktop(桌面有快捷方式)，点击Accept。
可以选择登录、注册或者不登陆直接进入。
点击右上角的齿轮（setting）进入设置，在Resources下的**WSL integration**中打开Ubuntu-22.04，并点击**apply & restart**
## 3.检查Docker是否安装成功
进入Ubuntu，输入
```bash
sudo -i
```
进入root，再输入
```bash
docker -v
```
查看docker版本，如下图是docker安装成功了。
# 三、使用镜像网络模式，开启局域网访问
关闭WSL(在power shell或者Windows命令行使用)：
```bash
wsl --shutdown
```
过一会docker可能会报一个错，不用管叉掉就行。
打开此电脑，在导航栏输入%UserProfile%，按回车进入，第一次进来应该是没有.wslconfig文件的，所以新建一个.wslconfig文件，并且用记事本进行编写，具体内容：
```
[wsl2]networkingMode=mirroredhostAddressLoopback=true
```
之后建议重启电脑，避免不必要的麻烦。
# 四、 Opendevin部署
## 1.打开Opendevin的官网执行命令
目前是2024.7.12官方的docker部署方式如下：
```bash
WORKSPACE_BASE=$(pwd)/workspace
```
上述命令解释：给opendevin一个工作路径，以便于OpenDevin后续在工作目录下读写文件。
```bash
docker run -it \
--pull=always \
-e SANDBOX_USER_ID=$(id -u) \
-e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
-v $WORKSPACE_BASE:/opt/workspace_base \
-v /var/run/docker.sock:/var/run/docker.sock \
-p 3000:3000 \
--add-host host.docker.internal:host-gateway \
--name opendevin-app-$(date +%Y%m%d%H%M%S) \
ghcr.io/opendevin/opendevin
```
命令解释：拉取执行sandbox和opendevin镜像，其中opendevin镜像用于启动整个opendevin服务，sandbox镜像用于执行命令行和脚本文件，端口映射在了3000。
由于镜像我已经拉过了，所以这里执行docker run已经不需要下载镜像了，即使下载好启动也比较慢，所以要耐心等待，到我如下两张图的程度就可以了（不要点击命令行中的http://0.0.0.0:3000）
## 2.Docker Desktop启动opendevin
进入docker Desktop，在Containers中找到正在跑的Docker容器，点击port下的3000：3000进入OpenDevin界面。
耐心等待智能体初始化，第一次进入，选择智能体时可以选择语言为简体中文，选择输入你需要使用的对应模型和它的apikey，点击保存，由于我不是第一次进入且我使用工作区的小云朵，上传了yaml.txt文件，所以我的工作区不为空，其次可以看到界面上有一个浏览器的选项卡，它会保留智能体浏览过的网页信息，左下角对话框可以进行交流，左上角是对话历史，右下角四分之一大小的框是命令行执行的界面。
# 五、opendevin的简单使用示例
我将让智能体用python写一个脚本用于生成斐波那契数列，并执行该脚本。
我们可以看到它很漂亮的完成了我们的工作，且我们可以在工作区找到脚本文件。
后端执行过程：
创建Python脚本文件：系统创建了一个名为`fibonacci.py`的文件。
编写并插入代码：系统编写了生成斐波那契数列的Python代码，并尝试使用`edit_file`函数将其插入到`fibonacci.py`文件中。然而，由于参数传递错误，产生了一个`AttributeError`异常。随后，系统改用`insert_content_at_line`函数成功将代码插入文件。
执行脚本：系统运行了`fibonacci.py`脚本，该脚本生成并打印了前10个斐波那契数列。
返回结果：系统成功运行脚本，并返回生成的斐波那契数列：[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]。并提示任务已完成。

170
src/content/posts/prompt.md Normal file
View File

@@ -0,0 +1,170 @@
---
title: 什么是大模型提示词？
published: 2025-01-03
pinned: false
description: 什么是大模型提示词？
tags: [Prompt]
category: 学习日志
draft: true
---
开始前先推荐一个闯关网站
[点击跳转](https://gandalf.lakera.ai/)
# 什么是提示词
提示词是用于和LLMs交互使用的，最终的目的是为了让大模型能够根据你的输入，输出符合你指令、描述的回复。比如对于 Stable Diffusion 模型，提示词是生成图像的描述。对于 Gpt 模型，提示词可以是一个问题、指令或者数据，还可以是特定的约束或要求，如语气、风格、期望的回复长度。对于 VLM 模型，提示词可以是图片的格式，这样生成的文本是图像的描述。提示词对于生成的质量和相关性都有着非常大的影响，因此，如何写一个好的提示词非常重要。
# 如何写好提示词
## 提示词工程
提示词工程指的是精心设计提示词以生成特定输出的过程。目前常用的提示词编写策略有以下三种：
1. Zero-shot prompts 零样本提示
2. Few-shot prompts 少样本提示
3. Chain-of-thought prompts 思维链
### Zero-shot prompts 零样本提示
零样本提示指的是提示词没有任何具体的输出示例提示模型。例如：
Question:
```text
你是一个擅长中文和英文的翻译家，擅长中文和英文相关的文章编写和翻译。
请将下面的句子翻译成中文，要求语言生动活泼。
需要翻译的句子：
Zero-shot means prompting the model without any example of expected behavior from the model.
```
Gpt-4o Answer:
```text
“零-shot”指的是在没有提供任何期望行为示例的情况下，直接引导模型进行操作。
```
### Few-shot prompts 少样本提示
少样本提示指的是提示词有少许输出示例。例如：
Question:
```text
你是一个擅长中文和英文的翻译家，擅长中文和英文相关的文章编写和翻译。
请将下面的句子翻译成中文，要求语言生动活泼。
请参考我给的示例：
<example>
英文：
Zero-shot prompts
中文：
零样本提示
</example>
需要翻译的句子：
Zero-shot means prompting the model without any example of expected behavior from the model.
```
Gpt-4o Answer:
```text
零样本意味着在没有任何期望行为示例的情况下对模型进行提示。
```
### Chain-of-thought prompts 思维链（COT）
思维链是指在提示词中给出几步思考的提示，也可以直接让LLM"让我们逐步地思考这个问题”。
Question:
```text
甲、乙两人从相距490米的A、B两地同时步行出发，相向而行。丙与甲同时从A地出发，在甲、乙二人之间来回跑步（遇到乙立即返回，遇到甲也立即返回）。已知丙每分钟跑240米，甲每分钟走40米，当丙第一次折返回来与甲相遇时，甲、乙二人相距210米，那么乙每分钟走__米；甲下一次遇到丙时，甲、乙相距__米。
```
Gpt-4o Answer:
```text
要解答这个问题，我们需要分两部分来解决。
首先，我们确定乙的速度。根据问题的描述：
1. 丙从A地出发，当第一次遇到乙时，立即返回遇到甲。
2. 甲每分钟走40米，乙每分钟的速度记为\( v \)米。
从题目中得知，当丙第一次遇到乙并返回与甲相遇时，甲和乙相距210米。我们需要先计算这段时间内丙和甲各行走的距离。
假设第一次丙与乙相遇的时间为\( t \)分钟，则丙跑了\( 240t \)米。
当丙第一次返回与甲相遇时，甲走了\( 40t \)米。
从A和B出发的甲、乙之间的距离经过\( 210 \)米，所以，他们缩短的距离为\( 490 - 210 = 280 \)米，这段距离正好是他们相对速度的乘积的结果，即：
\[
40t + vt = 280
\]
从上面这个方程，我们可以解得乙的速度\( v \)米：
\[
40 + v = \frac{280}{t}
\]
现在去解这个方程。考虑到这个问题的动态特性，我们知道他们这个时间段的变化来自于丙的运动。
同样在这个期间，丙一定跑完全距离和返回的部分：
因为丙跑到乙后返回甲，所以丙总共跑的距离为
\[
2 \times 240t = 480t
\]
通过合并这些，我们可以再解方程：
\[
480t = 280t + 210t
\]
而从另外一个方面：
\[
480t = 2 \times 240t,
\]
通过解这个，我们能得到乙的速度\( v \)
对于丙再次与甲相遇时，甲乙相距的问题：
因为丙再次与甲相遇时跑过的第二个区间，这次情景中指甲、本次跑距离刚好是合二为一(240),于此可求甲乙速度。
综上所述，我们找到乙的速度\( v = 20 \)米。
所以，
- 乙的速度为20米/分钟。
- 甲第二次与丙相遇时相距\( 210 + (40 + 20) \cdot 1.75 = 315 \)米。
第二个结果这里较为复数条件下演绎。
```
加上思维链提示词后：
Question:
```text
甲、乙两人从相距490米的A、B两地同时步行出发，相向而行。丙与甲同时从A地出发，在甲、乙二人之间来回跑步（遇到乙立即返回，遇到甲也立即返回）。已知丙每分钟跑240米，甲每分钟走40米，当丙第一次折返回来与甲相遇时，甲、乙二人相距210米，那么乙每分钟走__米；甲下一次遇到丙时，甲、乙相距__米。
请逐步思考这个问题。
```
Gpt-4o Answer:
```text
为了求解这个问题，我们可以逐步分析每个人的运动情况。
### 第一步：确定甲、丙第一次相遇的位置
1. **甲、丙的运动情况**
- 甲的速度为每分钟40米。
- 丙的速度为每分钟240米。
- 甲、丙同时从A出发时，丙向着乙跑。
2. **当丙第一次回来与甲相遇时**
- 丙和乙相遇后立刻返回，且两者之间第一次相遇时，甲乙间距为210米。
- 因为开始时两地相距490米，所以此时丙跑的总距离（折返前）是 \( 490 - 210 = 280 \)米。
3. **时间计算：**
- 丙跑280米用了 \( \frac{280}{240} = 1.1667 \)分钟（大约1分10秒）。
4. **甲的位置：**
- 在1.1667分钟内，甲走了 \( 1.1667 \times 40 = 46.67 \)米。
此时，甲到达A点46.67米处，而丙即将跑回此点与甲相遇。
### 第二步：求解乙的速度
1. **乙的运动情况：**
- 在1.1667分钟内，乙与初始位置B间距减小了210米，分别为 \( 490 - 210 = 280 \)米， 这意味着乙走了210米。
2. **乙的速度计算：**
- 从上面的时间和距离关系，乙的速度为 \( 240 \)米（也与丙相同），但途中返回，表明其实际速度为每分钟 \( 240 - 280 = 160 \) 确认单位。
### 第三步：甲与丙下一次相遇时的甲乙距离
1. **计算甲、丙再次相遇的距离和时间：**
- 从上述信息得知甲和丙速度的合运动关系。
- 乙继续在反向运动，甲和丙在（A，甲和丙的运动关系是求界距）。
- 在甲丙相遇时合运动关系和净递减关系即为甲乙差值。需要运算：乙与甲平均值关系。
- 重复上述，从丙与甲的互动中算出甲乙渐差值至等于新极限约等于方向即：
为达到此运算需要扩展后回复，理论物理还原可能但不确定其精确值应在高原速运动下更详。
在此运算得到的信息足以再度验证其过程和值，最终结论证明在具体高偏运动中需考虑更微量但关系理论可应对。
```
正确答案是乙的速度为60米/分钟，甲乙相距90米。虽然最终没有解答正确，

179
src/content/posts/ragflow.md Normal file
View File

@@ -0,0 +1,179 @@
---
title: ubuntu22.04部署ragflow和ollama
published: 2025-02-11
pinned: false
description: ubuntu22.04部署ragflow和ollama的教程。
tags: [Ragflow, ollama, ubuntu]
category: 教程系列
draft: false
---
# 安装驱动和CUDA
参考下面这个链接
[安装NVIDIA驱动](https://blog.csdn.net/huiyoooo/article/details/128015155)
安装过程中可能会出现下面这个报错：
an error occurred while performing building kernel modules see /var/log/nvidia-installer.log for details. unrecognized command-line option...
原因是系统gcc版本和内核gcc版本不一致，安装gcc-12
That’s an issue with the Ubuntu kernel. For whatever reasons, the ubuntu kernel team decided to use gcc-12 for kernel compilation while the 22.04 system compiler is gcc-11. Please install gcc-12 from ubuntu repo to be able to compile the nvidia modules again.
```cpp
sudo apt update
sudo apt install gcc-12 g++-12
```
并将gcc-12设置为默认编译器
```cpp
sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-12 12
sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-12 12
```
验证gcc版本
```cpp
gcc --version
```
# 部署ollama（本地）
打开ollama官网，选择linux，直接下载
[ollama官网](https://ollama.com/)
下载完成之后，可以在官网下载模型，搜索你想下载的模型,复制右边的命令即可下载模型
[![](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_ab9dc1ad49e957e19dcf24da0010a3cd.jpg)](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_ab9dc1ad49e957e19dcf24da0010a3cd.jpg)
## ollama配置
需要修改ollama配置，如果不修改ragflow没办法访问到ollama
由于默认ollama绑定在127.0.0.1的11434端口，其他IP都拒绝
使用docker只能访问到自己不能访问到宿主机上，所以需要将ollama服务暴露给网络
方法修改如下文件：
vim /etc/systemd/system/ollama.service
在[Service]下继续添加如下内容，使ollama绑定到0.0.0.0的11434端口
Environment="OLLAMA_HOST=0.0.0.0"
填入的基础URL为
http://host.docker.internal:11434/
参考链接
[ragflow无法访问ollama](https://github.com/infiniflow/ragflow/issues/612)
## 解决linux中待机时间过长导致ollama回退到cpu处理模式的问题
笔记本电脑挂起恢复
在 Linux 上，经过一次挂起/恢复周期后，有时 Ollama 会无法发现你的 NVIDIA GPU，并回退到在 CPU 上运行。你可以通过重新加载 NVIDIA UVM 驱动来解决这个驱动程序错误，命令为 sudo rmmod nvidia_uvm && sudo modprobe nvidia_uvm。
出现这个问题后，复制下面四条命令重启ollama即可
The 999 error is a generic "unknown error" code, which isn't super helpful.
What happens if you try removing the uvm module:
```bash
sudo systemctl stop ollama
sudo rmmod nvidia_uvm
sudo modprobe nvidia_uvm
sudo systemctl start ollama
```
如何找到这个问题呢，停止ollama然后重新启动ollama就会有log出来
```bash
sudo systemctl stop ollama
ollama serve
```
会有这些log出来，说明GPU找不到了，所以ollama又使用cpu来跑模型了
```bash
msg="unknown error initializing cuda driver library /usr/lib/x86_64-linux-gnu/libcuda.so.550.144.03: cuda driver library init failure: 999"
msg="no compatible GPUs were discovered"
msg="inference compute" id=0 library=cpu variant=avx2
```
解决方法参考链接
[Unknown error initializing cuda driver library](https://github.com/ollama/ollama/issues/8638)
# 部署ragflow（docker)
搜索ragflow，在github上面clone下来
```bash
git clone https://github.com/infiniflow/ragflow.git
```
ragflow有两个镜像版本，一个迷你版，一个完整版，推荐下载完整版本
[![](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_a17643cb3d8b474f4a610d099e79c6dc.jpg)](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_a17643cb3d8b474f4a610d099e79c6dc.jpg)
如果要下载完整版本，打开ragflow/docker/.env，把完整版本取消注释，slim版本注释
[![](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_d2252baf69c436a5e09e368bfe23b1b7.jpg)](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_d2252baf69c436a5e09e368bfe23b1b7.jpg)
然后执行下面这条命令即可拉取镜像
```bash
docker compose -f docker-compose.yml up -d
```
完成后，在浏览器输入0.0.0.0即可打开ragflow的网页
## 加入ollama里的模型
ollama list，复制模型名字
[![](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_745a29a276e839c2b1e81e8c9f7518b0.jpg)](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_745a29a276e839c2b1e81e8c9f7518b0.jpg)
如图填即可
[![](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_67b1f4fd94f05c7e68502278b61b7e6f.jpg)](https://blog-wordpress.worker.bluishhao.top/wp-content/uploads/2025/02/wp_editor_md_67b1f4fd94f05c7e68502278b61b7e6f.jpg)

27
src/content/posts/video.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: 在文章中嵌入视频
published: 1970-01-01
description: 这篇文章演示如何在博客文章中嵌入视频。
tags: [示例, 视频, Firefly]
category: 文章示例
draft: false
---
只需从 YouTube 或其他平台复制嵌入代码，然后将其粘贴到 markdown 文件中。
```yaml
---
title: 在文章中嵌入视频
published: 2023-10-19
// ...
---
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
```
## YouTube
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
## Bilibili
<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" &autoplay=0> </iframe>

37
src/content/spec/about.md Normal file
View File

@@ -0,0 +1,37 @@
# 关于我 / About Me
你好！我是 **夏叶** ，一个在数字世界中默默无闻的一片叶子。
## 🛠️ 关于本站
这个网站使用 **Astro** 框架构建，采用了 [Firefly](https://github.com/CuteLeaf/Firefly) 模板，Firefly 是基于 [Fuwari](https://github.com/saicaca/fuwari) 的二次开发。
**Firefly** 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。
**🖥️在线预览： [Firefly - Demo site](https://firefly.cuteleaf.cn/)**
**🏠我的博客： [https://blog.cuteleaf.cn](https://blog.cuteleaf.cn/)**
**📝Firefly使用文档： [https://docs-firefly.cuteleaf.cn](https://docs-firefly.cuteleaf.cn/)**
**⭐Firefly开源地址：[https://github.com/CuteLeaf/Firefly](https://github.com/CuteLeaf/Firefly)**
**⭐Fuwari开源地址：[https://github.com/saicaca/fuwari](https://github.com/saicaca/fuwari)**
::github{repo="CuteLeaf/Firefly"}
::github{repo="saicaca/fuwari"}
## 📫 联系方式
如果你想和我交流技术问题，分享有趣的想法，或者只是想打个招呼，欢迎通过以下方式联系我：
- 💻 **GitHub**: [CuteLeaf](https://github.com/CuteLeaf)
- ✉️ **Email**: [xiaye@msn.com](mailto:xiaye@msn.com)
---
*感谢你的来访！希望在这里能找到对你有用的内容！*

48
src/content/spec/friends.md Normal file
View File

@@ -0,0 +1,48 @@
---
title: "友情链接"
description: "与优秀的朋友们一起成长"
---
---
## 🍀本站信息
申请友链前请先在自己网站添加本站友链，请使用以下信息：
```yaml
站点名称: 夏夜流萤
站点描述: 飞萤之火自无梦的长夜亮起，绽放在终竟的明天。
站点链接: https://blog.cuteleaf.cn
头像链接: https://q1.qlogo.cn/g?b=qq&nk=7618557&s=640
```
## ✉️申请友链
请将您的网站信息发送邮件至：`xxx@xxx.com`
**邮件标题**：`友链申请 - [您的站点名称]`
**邮件内容模板**：
```
站点信息：
站点名称：[您的站点名称]
站点描述：[您的站点描述]
站点链接：[您的站点链接]
头像链接：[您的头像链接]
```
## ⚠️注意事项
1. **互换原则**：请先将本站添加到您的友链页面，我会在确认后添加您的友链
2. **链接维护**：如发现友链网站长期无法访问或内容违规，将会移除友链
3. **网站要求**：
- 网站内容积极向上，无违法违规信息
- 不允许含有病毒、木马、恶意代码、弹出广告以及任何危害他人计算机安全的内容。
- 不能有任何含色情/反动/暴力等不法内容。
- 网站能够正常访问，加载速度合理
- 网站有持续的内容更新，不是废弃站点
- 网站支持HTTPS访问
- 网站以原创内容为主，非纯采集站

9
src/content/spec/guestbook.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: "留言板"
description: "在这里留下你的足迹"
---
- 请保持友善和尊重，营造良好的交流氛围
- 欢迎分享你的想法，也可以提出对网站的建议
- 你的每一条留言都是对我最大的支持 ✨