代码块折叠示例

# 代码块折叠示例

vdoing主题内置了 details 容器功能，可以用来实现代码块的折叠效果。

# 基本使用方法

# 1. 简单折叠代码块

使用 ::: details 容器包裹代码块即可实现折叠：

::: details 点击查看代码
```javascript
console.log("Hello, World!");
function add(a, b) {
  return a + b;
}

1
2
3
4
5
6

:::


效果：

::: details 点击查看代码
```javascript
console.log("Hello, World!");
function add(a, b) {
  return a + b;
}

1
2
3
4
5
6
7
8
9

:::

# 2. 自定义折叠标题

可以在 details 后面添加自定义标题：

::: details 查看Hardhat测试脚本代码
```javascript
const { loadFixture } = require("@nomicfoundation/hardhat-network-helpers");
const { expect } = require("chai");
const { ethers } = require("hardhat");

describe("MiniERC20 智能合约测试", function () {
  // 使用fixture设置测试环境
  async function deployMiniERC20Fixture() {
    // 获取测试账户
    const [owner, addr1, addr2] = await ethers.getSigners();
    
    // 部署合约
    const MiniERC20 = await ethers.getContractFactory("MiniERC20");
    const miniERC20 = await MiniERC20.deploy("Mini Token", "MINI", ethers.utils.parseEther("10000"));
    
    // 返回合约实例和测试账户
    return { miniERC20, owner, addr1, addr2 };
  }
  
  // 测试合约部署
  describe("部署", function () {
    it("应该正确设置名称、符号和总供应量", async function () {
      const { miniERC20, owner } = await loadFixture(deployMiniERC20Fixture);
      
      expect(await miniERC20.name()).to.equal("Mini Token");
      expect(await miniERC20.symbol()).to.equal("MINI");
      expect(await miniERC20.totalSupply()).to.equal(ethers.utils.parseEther("10000"));
      expect(await miniERC20.balanceOf(owner.address)).to.equal(ethers.utils.parseEther("10000"));
    });
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

:::


效果：

::: details 查看Hardhat测试脚本代码
```javascript
const { loadFixture } = require("@nomicfoundation/hardhat-network-helpers");
const { expect } = require("chai");
const { ethers } = require("hardhat");

describe("MiniERC20 智能合约测试", function () {
  // 使用fixture设置测试环境
  async function deployMiniERC20Fixture() {
    // 获取测试账户
    const [owner, addr1, addr2] = await ethers.getSigners();
    
    // 部署合约
    const MiniERC20 = await ethers.getContractFactory("MiniERC20");
    const miniERC20 = await MiniERC20.deploy("Mini Token", "MINI", ethers.utils.parseEther("10000"));
    
    // 返回合约实例和测试账户
    return { miniERC20, owner, addr1, addr2 };
  }
  
  // 测试合约部署
  describe("部署", function () {
    it("应该正确设置名称、符号和总供应量", async function () {
      const { miniERC20, owner } = await loadFixture(deployMiniERC20Fixture);
      
      expect(await miniERC20.name()).to.equal("Mini Token");
      expect(await miniERC20.symbol()).to.equal("MINI");
      expect(await miniERC20.totalSupply()).to.equal(ethers.utils.parseEther("10000"));
      expect(await miniERC20.balanceOf(owner.address)).to.equal(ethers.utils.parseEther("10000"));
    });
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

:::

# 在现有文章中使用

您可以将这种方法应用到您的区块链学习文章中，例如：

在 /docs/01.工作经历/50.区块链学习/00.Hardhat+chai测试脚本.md 文件中，您可以将长代码块包裹在 details 容器中，使页面更加整洁。

# 示例：

::: details 查看完整测试脚本
```javascript
// 完整的测试脚本代码...

1
2
3

:::


这样，读者可以根据需要展开或折叠代码块，提高阅读体验。

上次更新: 2025/12/05, 14:57:23