ByteCraft

Vibe Coding 实践：用 AI 30 分钟搭建个人博客

Sun, 22 Mar 2026 00:00:00 GMT

什么是 Vibe Coding？

Vibe Coding 是一种全新的编程范式：你描述意图，AI 来实现代码。

与传统编程不同，Vibe Coding 强调：

🎯 意图驱动：用自然语言描述需求
🤖 AI 协作：让 AI 处理实现细节
⚡ 快速迭代：通过对话快速调整
🔄 持续优化：逐步完善结果

实践过程

Step 1：描述需求（5 分钟）

我想创建一个个人博客，使用 Astro 框架 + Fuwari 主题。
需要以下功能：
1. 博客文章列表
2. 标签和分类系统
3. 深浅色主题切换
4. 代码高亮
5. 数学公式支持

Step 2：项目初始化（5 分钟）

AI 帮我完成了：

克隆 Fuwari 主题
修改配置文件
设置中文语言

Step 3：内容定制（10 分钟）

通过与 AI 对话，逐步完善：

导航栏结构
首页布局
分类体系设计

Step 4：内容创建（10 分钟）

AI 辅助生成了：

示例文章
About 页面
使用说明

Prompt 技巧

在 Vibe Coding 中，好的 Prompt 是关键：

✅ 好的 Prompt

请帮我创建一个教学专区页面，需求如下：
- 展示 category 为 "teaching" 的文章
- 支持按难度（入门/基础/进阶/高级）筛选
- 页面顶部有简介区域
- 保持 Fuwari 主题的设计风格

❌ 不好的 Prompt

帮我做一个页面

关键原则

具体化：明确说明要什么
上下文：提供必要的背景信息
约束：说明限制条件
示例：给出参考案例

工具推荐

工具	用途	推荐度
GitHub Copilot	代码补全 & Agent	⭐⭐⭐⭐⭐
Cursor	AI IDE	⭐⭐⭐⭐⭐
ChatGPT	需求分析 & 设计	⭐⭐⭐⭐
Claude	长文档处理	⭐⭐⭐⭐
v0.dev	UI 设计	⭐⭐⭐⭐

总结

Vibe Coding 不是要取代编程能力，而是要放大你的生产力。了解基础编程知识 + 掌握与 AI 对话的技巧 = 10x 效率。

[!IMPORTANT] Vibe Coding 的核心不是 "不学编程"，而是 "学会和 AI 协作"。

使用 Astro 搭建个人博客

Fri, 20 Mar 2026 00:00:00 GMT

为什么选择 Astro？

Astro 是一个现代化的静态网站生成器，具有以下优势：

零 JS 默认 —— 只在需要时加载 JavaScript
框架无关 —— 支持 React、Vue、Svelte 等
内容优先 —— 原生 Markdown 和 MDX 支持
极快的构建 —— 基于 Vite 构建

安装与配置

# 克隆 Fuwari 主题
git clone https://github.com/saicaca/fuwari.git my-blog
cd my-blog

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

项目结构

src/
├── config.ts          # 站点配置
├── content/
│   └── posts/         # 博客文章
├── pages/             # 页面路由
├── components/        # UI 组件
└── styles/            # 样式文件

数学公式支持

本站支持 $\LaTeX$ 数学公式，例如：

行内公式：$E = mc^2$

块级公式：

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

代码高亮

支持多种语言的代码高亮：

def fibonacci(n: int) -> int:
    """计算斐波那契数列第 n 项"""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# 动态规划优化
def fibonacci_dp(n: int) -> int:
    dp = [0, 1]
    for i in range(2, n + 1):
        dp.append(dp[-1] + dp[-2])
    return dp[n]

下一步计划

[x] 基础主题搭建
[x] 自定义导航
[x] 内容分类系统
[ ] 评论系统接入
[ ] 图片优化
[ ] SEO 优化

[!TIP] Fuwari 主题支持 GitHub 风格的 Admonition 语法！

动态规划入门：从零开始理解 DP

Wed, 18 Mar 2026 00:00:00 GMT

什么是动态规划？

动态规划（Dynamic Programming，简称 DP）是一种通过把原问题分解为相对简单的子问题来求解复杂问题的方法。

核心思想

最优子结构：问题的最优解包含子问题的最优解
重叠子问题：不同的子问题有相同的子子问题
状态转移：从已知状态推导未知状态

经典例题：爬楼梯

你需要爬 $n$ 阶楼梯，每次可以爬 1 阶或 2 阶。问有多少种不同的方法？

分析

设 $f(n)$ 表示爬到第 $n$ 阶的方法数：

$$ f(n) = \begin{cases} 1 & n = 1 \ 2 & n = 2 \ f(n-1) + f(n-2) & n > 2 \end{cases} $$

C++ 实现

#include <iostream>
using namespace std;

int main() {
    int n;
    cin >> n;

    // dp[i] 表示爬到第 i 阶的方法数
    int dp[n + 1];
    dp[1] = 1;
    dp[2] = 2;

    for (int i = 3; i <= n; i++) {
        dp[i] = dp[i - 1] + dp[i - 2];
    }

    cout << dp[n] << endl;
    return 0;
}

经典例题：01 背包问题

有 $n$ 个物品，第 $i$ 个物品重量为 $w_i$，价值为 $v_i$。背包容量为 $W$。求在不超过背包容量的前提下，能获得的最大价值。

状态定义

$dp[i][j]$ 表示考虑前 $i$ 个物品、背包容量为 $j$ 时的最大价值。

状态转移方程

$$ dp[i][j] = \max(dp[i-1][j], ; dp[i-1][j-w_i] + v_i) $$

C++ 实现

#include <iostream>
#include <algorithm>
using namespace std;

const int MAXN = 1005;
int dp[MAXN];
int w[MAXN], v[MAXN];

int main() {
    int n, W;
    cin >> n >> W;

    for (int i = 1; i <= n; i++) {
        cin >> w[i] >> v[i];
    }

    // 一维优化
    for (int i = 1; i <= n; i++) {
        for (int j = W; j >= w[i]; j--) {
            dp[j] = max(dp[j], dp[j - w[i]] + v[i]);
        }
    }

    cout << dp[W] << endl;
    return 0;
}

[!NOTE] 注意一维优化时，内层循环需要倒序遍历，以保证每个物品只被选一次。

练习题

洛谷 P1048 采药 - 01 背包模板
洛谷 P1616 疯狂的采药 - 完全背包
洛谷 P1049 装箱问题 - 01 背包变形

总结

问题类型	状态定义	转移方程	时间复杂度
爬楼梯	$f(n)$：方法数	$f(n) = f(n-1) + f(n-2)$	$O(n)$
01 背包	$dp[i][j]$：前 $i$ 件、容量 $j$ 的最大价值	$dp[i][j] = \max(dp[i-1][j], dp[i-1][j-w_i]+v_i)$	$O(nW)$

[!TIP] DP 学习建议：先理解状态定义，再推导转移方程，最后考虑优化。

Canvas 粒子动画效果

Mon, 16 Mar 2026 00:00:00 GMT

效果说明

本 Demo 实现了一个交谈粒子动画效果：

🎨 随机颜色粒子在画布上运动
🔗 距离较近的粒子之间自动连线
🖱️ 鼠标移动时粒子会被吸引
📱 自适应屏幕尺寸

核心代码

HTML 结构

<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; background: #0a0a2e; }
    </style>
</head>
<body>
    <canvas id="particles"></canvas>
    <script src="particles.js"></script>
</body>
</html>

JavaScript 实现

const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Particle {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.vx = (Math.random() - 0.5) * 2;
        this.vy = (Math.random() - 0.5) * 2;
        this.radius = Math.random() * 3 + 1;
    }

    update() {
        this.x += this.vx;
        this.y += this.vy;

        // 边界反弹
        if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
        if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
        ctx.fill();
    }
}

// 创建粒子
const particles = Array.from({ length: 100 }, () => new Particle());

function connectParticles() {
    for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
            const dx = particles[i].x - particles[j].x;
            const dy = particles[i].y - particles[j].y;
            const dist = Math.sqrt(dx * dx + dy * dy);

            if (dist < 150) {
                ctx.beginPath();
                ctx.strokeStyle = `rgba(255,255,255,${1 - dist / 150})`;
                ctx.lineWidth = 0.5;
                ctx.moveTo(particles[i].x, particles[i].y);
                ctx.lineTo(particles[j].x, particles[j].y);
                ctx.stroke();
            }
        }
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => {
        p.update();
        p.draw();
    });
    connectParticles();
    requestAnimationFrame(animate);
}

animate();

技术要点

Canvas 2D 绑定 —— 使用 getContext('2d') 获取绑定上下文
粒子系统 —— 面向对象管理每个粒子的位置和速度
连线算法 —— 双重循环计算距离，距离阈值内绘制连线
动画循环 —— requestAnimationFrame 实现 60fps 动画

[!NOTE] 粒子数量和连线距离可以根据设备性能调整，移动端建议减少粒子数量。

2026 年学习计划与技术展望

Sun, 15 Mar 2026 00:00:00 GMT

回顾 2025

过去一年，我在以下几个方面有了显著的成长：

完成了信息学竞赛入门课程的系统化整理
深入实践了 AI Coding 工作流
搭建了这个个人网站

2026 年规划

📚 教学方向

完善信息学竞赛教学体系，覆盖 NOIP 考纲
开发面向初学者的 Python 入门课程
录制算法讲解视频

🤖 AI & Coding

深入研究 Agent 工作流
探索 AI 辅助教学的应用场景
实践更多 Vibe Coding 项目

💻 技术学习

系统学习 TypeScript
深入 Astro 生态
了解 Rust 基础

时间分配

方向	每周时间	优先级
竞赛教学	10h	⭐⭐⭐
AI Coding	8h	⭐⭐⭐
Web 开发	5h	⭐⭐
阅读 & 写作	3h	⭐⭐

保持好奇心，持续学习，做最好的自己。

Prompt Engineering 基础指南

Thu, 12 Mar 2026 00:00:00 GMT

为什么需要学习 Prompt Engineering？

随着 AI 编程工具的普及，如何与 AI 高效交流已经成为一项核心技能。

好的 Prompt 可以让你：

获得更准确的代码输出
减少来回修改的次数
解决更复杂的问题

核心原则

1. 清晰具体（Be Specific）

❌ "帮我写一个排序"
✅ "用 C++ 实现快速排序，输入一个整数数组，输出排序后的结果，要求原地排序"

2. 提供上下文（Give Context）

❌ "这段代码有 bug，帮我修"
✅ "这段 C++ 代码在处理空数组时会段错误，请帮我添加边界检查：
[粘贴代码]"

3. 分步骤思考（Chain of Thought）

请帮我实现一个 LRU Cache，按照以下步骤：
1. 先定义数据结构
2. 实现 get 操作
3. 实现 put 操作
4. 分析时间复杂度

4. 给出示例（Few-shot）

请按照以下格式生成题解：

## 题目
[题目描述]

## 思路
[分析过程]

## 代码
[C++ 代码]

## 复杂度
- 时间：O(?)
- 空间：O(?)

实用 Prompt 模板

代码生成

请用 [语言] 实现 [功能]。
要求：
- [约束1]
- [约束2]
请附带注释和使用示例。

代码审查

请审查以下代码：
[代码]

关注以下方面：
1. 正确性
2. 性能
3. 可读性
4. 边界情况

Bug 修复

以下代码在 [场景] 下会出现 [问题]。
预期行为：[描述]
实际行为：[描述]
[代码]
请找出问题并修复。

进阶技巧

角色设定：让 AI 扮演特定角色（"你是一位资深的竞赛教练"）
思维链：要求 AI 展示推理过程
自我检查：让 AI 审查自己的输出
迭代优化：逐步完善，而不是一步到位

[!TIP] 记住：Prompt Engineering 是一门实践技能，多练多总结！

C++ STL 常用容器速查

Tue, 10 Mar 2026 00:00:00 GMT

什么是 STL？

STL（Standard Template Library）是 C++ 标准模板库，提供了丰富的数据结构和算法。

在信息学竞赛中，熟练使用 STL 可以大幅提高编码效率。

常用容器

1. vector —— 动态数组

#include <vector>
using namespace std;

vector<int> v;           // 声明
v.push_back(1);          // 尾部插入
v.pop_back();            // 尾部删除
v.size();                // 元素个数
v[0];                    // 随机访问
v.clear();               // 清空

// 遍历
for (int x : v) {
    cout << x << " ";
}

2. map —— 有序映射

#include <map>
using namespace std;

map<string, int> mp;
mp["hello"] = 1;        // 插入/修改
mp.count("hello");      // 查询是否存在
mp.erase("hello");      // 删除

// 遍历
for (auto& [key, val] : mp) {
    cout << key << ": " << val << endl;
}

3. set —— 有序集合

#include <set>
using namespace std;

set<int> s;
s.insert(3);             // 插入
s.erase(3);              // 删除
s.count(3);              // 是否存在（0 或 1）
s.lower_bound(3);        // >= 3 的第一个元素

4. queue —— 队列（BFS 必备）

#include <queue>
using namespace std;

queue<int> q;
q.push(1);               // 入队
q.front();               // 队首
q.pop();                 // 出队
q.empty();               // 是否为空

5. priority_queue —— 优先队列

#include <queue>
using namespace std;

// 大根堆（默认）
priority_queue<int> pq;

// 小根堆
priority_queue<int, vector<int>, greater<int>> pq_min;

pq.push(3);
pq.top();                // 堆顶
pq.pop();                // 弹出堆顶

6. stack —— 栈

#include <stack>
using namespace std;

stack<int> st;
st.push(1);              // 入栈
st.top();                // 栈顶
st.pop();                // 出栈

速查表

容器	头文件	插入	查询	删除	特点
`vector`	`<vector>`	$O(1)$ 均摊	$O(1)$	$O(n)$	动态数组
`map`	`<map>`	$O(\log n)$	$O(\log n)$	$O(\log n)$	有序键值对
`unordered_map`	`<unordered_map>`	$O(1)$ 均摊	$O(1)$ 均摊	$O(1)$ 均摊	哈希映射
`set`	`<set>`	$O(\log n)$	$O(\log n)$	$O(\log n)$	有序集合
`queue`	`<queue>`	$O(1)$	$O(1)$	$O(1)$	FIFO
`stack`	`<stack>`	$O(1)$	$O(1)$	$O(1)$	LIFO
`priority_queue`	`<queue>`	$O(\log n)$	$O(1)$	$O(\log n)$	堆

[!TIP] 竞赛中如果不需要有序性，优先使用 unordered_map 和 unordered_set，时间复杂度更优。

CSS 文字打字机效果

Sun, 08 Mar 2026 00:00:00 GMT

效果说明

使用纯 CSS 实现的打字机效果：

⌨️ 模拟逐字打出的动画
✏️ 闪烁的光标效果
🎨 可自定义颜色和速度

完整代码

<!DOCTYPE html>
<html>
<head>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1a1a2e;
    font-family: 'Courier New', monospace;
}

.typewriter h1 {
    color: #e2e8f0;
    font-size: 2rem;
    overflow: hidden;
    border-right: 3px solid #63b3ed;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0.1em;
    animation:
        typing 3.5s steps(30, end),
        blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #63b3ed }
}
</style>
</head>
<body>
    <div class="typewriter">
        <h1>Hello, I'm a developer.</h1>
    </div>
</body>
</html>

原理解析

overflow: hidden + white-space: nowrap 让文字不换行且超出隐藏
typing 动画通过改变 width 从 0 到 100%
steps(30, end) 让动画分步进行，模拟打字效果
blink-caret 让右边框闪烁，模拟光标

信息学竞赛入门讲义 - 第一章

Thu, 05 Mar 2026 00:00:00 GMT

讲义概要

本讲义为信息学竞赛入门系列第一章，主要内容包括：

适用对象

零基础高中学生
对编程感兴趣的初中生

配套资源

练习题（20 道）
参考代码
课后作业

[!NOTE] 本讲义持续更新中，建议配合 C++ STL 速查一起学习。

算法竞赛常用代码模板

Sun, 01 Mar 2026 00:00:00 GMT

模板列表

本代码模板集包含以下内容：

基础算法

快速排序
归并排序
二分查找

搜索

DFS 模板
BFS 模板
回溯法

图论

Dijkstra 最短路
Floyd 全源最短路
Kruskal 最小生成树
拓扑排序

数据结构

并查集
线段树
树状数组

数学

快速幂
GCD / LCM
素数筛

使用示例

快速幂模板

long long quickpow(long long base, long long exp, long long mod) {
    long long result = 1;
    base %= mod;
    while (exp > 0) {
        if (exp & 1) result = result * base % mod;
        base = base * base % mod;
        exp >>= 1;
    }
    return result;
}

并查集模板

int fa[MAXN];

void init(int n) {
    for (int i = 1; i <= n; i++) fa[i] = i;
}

int find(int x) {
    return fa[x] == x ? x : fa[x] = find(fa[x]);
}

void unite(int x, int y) {
    fa[find(x)] = find(y);
}

[!TIP] 建议根据自己的使用习惯修改模板，形成自己的代码库。

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="Fabrizz/MMM-OnSpotify"}

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized.

:::note[MY CUSTOM TITLE] This is a note with a custom title. :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

The content :spoiler[is hidden **ayyy**]!

Expressive Code Example

Wed, 10 Apr 2024 00:00:00 GMT

Here, we'll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Expressive Code

Syntax Highlighting

Regular syntax highlighting

console.log('This code is syntax highlighted!')

Rendering ANSI escape sequences

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

Editor & Terminal Frames

Code editor frames

console.log('Title attribute example')

<!-- src/content/index.html -->
<div>File name comment example</div>

Terminal frames

echo "This terminal frame has no title"

Write-Output "This one has a title!"

Overriding frame types

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Text & Line Markers

Marking full lines & line ranges

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

Adding labels to line markers

// 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>

Adding long labels on their own lines

// 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>

Using diff-like syntax

+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line

--- 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

Combining syntax highlighting with diff-like syntax

  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }

Marking individual text inside lines

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Regular expressions

console.log('The words yes and yep will be marked.')

Escaping forward slashes

echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

Word Wrap

Configuring word wrap per block

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Configuring indentation of wrapped lines

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Collapsible Sections

// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

Line Numbers

Displaying line numbers per block

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Changing the starting line number

console.log('Greetings from line 5!')
console.log('I am on line 6')

Simple Guides for Fuwari

Mon, 01 Apr 2024 00:00:00 GMT

Cover image source: Source

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Include Video in the Posts

Tue, 01 Aug 2023 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
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

Bilibili

ByteCraft

Vibe Coding 实践：用 AI 30 分钟搭建个人博客

什么是 Vibe Coding？

实践过程

Step 1：描述需求（5 分钟）

Step 2：项目初始化（5 分钟）

Step 3：内容定制（10 分钟）

Step 4：内容创建（10 分钟）

Prompt 技巧

✅ 好的 Prompt

❌ 不好的 Prompt

关键原则

工具推荐

总结

使用 Astro 搭建个人博客

为什么选择 Astro？

安装与配置

项目结构

数学公式支持

代码高亮

下一步计划

动态规划入门：从零开始理解 DP

什么是动态规划？

核心思想

经典例题：爬楼梯

分析

C++ 实现

经典例题：01 背包问题

状态定义

状态转移方程

C++ 实现

练习题

总结

Canvas 粒子动画效果

效果说明

核心代码

HTML 结构

JavaScript 实现

技术要点

2026 年学习计划与技术展望

回顾 2025

2026 年规划

📚 教学方向

🤖 AI & Coding

💻 技术学习

时间分配

Prompt Engineering 基础指南

为什么需要学习 Prompt Engineering？

核心原则

1. 清晰具体（Be Specific）

2. 提供上下文（Give Context）

3. 分步骤思考（Chain of Thought）

4. 给出示例（Few-shot）

实用 Prompt 模板

代码生成

代码审查

Bug 修复

进阶技巧

C++ STL 常用容器速查

什么是 STL？

常用容器

1. vector —— 动态数组

2. map —— 有序映射

3. set —— 有序集合

4. queue —— 队列（BFS 必备）

5. priority_queue —— 优先队列

6. stack —— 栈

速查表

CSS 文字打字机效果

效果说明

完整代码

原理解析

信息学竞赛入门讲义 - 第一章

讲义概要

目录

适用对象

配套资源

算法竞赛常用代码模板

模板列表

基础算法