testpage0

本文档全部import：

import { Highlight, Keyword, Light, B1, B2, B3, BH3, B3W, Button, MyColor, Card, QuickNoteCard, NoteSectionTitle } from '@site/src/components/ForMDX';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CardImg from '@site/src/components/CardImg';

🔗 按钮链接

📖 STM32 教程 🌸 回想空间 🌽 还不错的玉米 📱 测试群链接

代码：（无需import）

<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
  <a href="https://www.bilibili.com/video/BV12v4y1y7uV" class="source_card_button" target="_blank">📖 STM32 教程</a>
  <a href="/docs/reflection-space" class="source_card_button" target="_blank">🌸 回想空间</a>
  <a href="https://e.tb.cn/h.hTZaa83WZiz2Wfr" class="source_card_button" target="_blank">🌽 还不错的玉米</a>
  <a href="https://qun.qq.com/universal-share/share?ac=1&authKey=BvgzFVJKMU0dbLEz%2BkWm8tydUKa%2F%2BTpBiaW9Ner6BemqNZfLQyN3xGlo%2BjLzhTL5&busi_data=eyJncm91cENvZGUiOiI5MzgyMTk4NjMiLCJ0b2tlbiI6IkUzNFhjVzJuUE9FY3IxSm14SmFza2J1RWhTcHJWMElMTkxITkNHcjBwcXhmMVN5Y21JUVljZ25ieldaRUFCUjEiLCJ1aW4iOiIyNTYwMjkxMjQxIn0%3D&data=lHupxGd_sZuAjGp9DpXZH7KnauiAdCCqC_JIFVTwLE5-rOMCTKgggw9oo9XpURlTsaCKXlUUDCeolPJ87PqKZA&svctype=4&tempid=h5_group_info" class="source_card_button" target="_blank">📱 测试群链接</a>
</div>

按钮下载（外链）

立即下载

代码：（无需import）

<a href="https://pan.baud-dance.com/d/STM32CubeIDE/st-stm32cubeide_1.18.0_24413_20250227_1633_x86_64.exe" class="source_download_button" target="_blank">立即下载</a>

自定义按钮

📘默认按钮 📘绿色按钮 📘蓝色大按钮

📘默认按钮 📘按钮1 📘GitHub 仓库

代码：(需 import {Button} from '@site/src/components/ForMDX';)

<div style={{
  display: 'flex',
  flexDirection: 'column',
  rowGap: '1rem'
}}>
  {/* 第一行按钮 */}
  <div style={{ display: 'flex', gap: '1rem' }}>
    <Button icon="📘" href="https://example.com">默认按钮</Button>
    <Button icon="📘" href="https://example.com" color="#2D8E0A">绿色按钮</Button>
	<Button icon="📘" href="https://example.com" color="#1877F2" size="large">蓝色大按钮</Button>
  </div>

  {/* 第二行按钮 */}
  <div style={{ display: 'flex', gap: '1rem' }}>
    <Button icon="📘" href="https://example.com">默认按钮</Button>
    <Button icon="📘" href="#">按钮1</Button>
	<Button icon="📘" href="https://github.com/your-repo" color="#333"textColor="white" size="medium">GitHub 仓库</Button>
  </div>

  {/* 第三行按钮 */}
  <div style={{ display: 'flex', gap: '1rem' }}>
	<Button icon="⚙️" onClick={() => alert('点击了')}>打开设置</Button>
	<Button loading>加载中...</Button>
	<Button disabled>不可点击</Button>
  </div> 
  
</div>

高亮/关键词

Docusaurus greenandPinkare my favorite colors.

这是一个高亮段落这是一个高亮段落

这是一个关键词哈哈哈哈

哈哈哈

代码：（需 import {Highlight,Keyword} from '@site/src/components/ForMDX'; ）

<p><Highlight bgColor={MyColor.docusaurusGreen} fontColor={MyColor.white}>Docusaurus green</Highlight>and<Highlight bgColor={MyColor.Pink} fontColor={MyColor.white}>Pink</Highlight>are my favorite colors.</p>
<Highlight>这是一个高亮段落</Highlight>
<Highlight bgColor={MyColor.Blue} fontColor={MyColor.black}>这是一个高亮段落</Highlight> 
<p>这是一个<Keyword>关键词</Keyword>哈哈哈哈</p>哈哈哈

🔁卡片链接

以下是一些页面跳转的卡片式按钮示例，可用于快速导航测试或构建索引页。

1️⃣ 跳转至：测试页5🔗

5️⃣ 跳转至：测试页1🔗

代码：（无需 import ）

<div style={{ display: 'grid', gap: '1rem' }}>
    <Card>
      <a href="/docs/mydoc/testpage5" target="_blank"><strong>1️⃣ 跳转至：</strong>测试页5🔗</a>
    </Card>
	
    <Card>
      <a href="/docs/mydoc/testpage1" target="_blank"><strong>5️⃣ 跳转至：</strong>测试页1🔗</a>
    </Card>
</div>

显示代码行号

int main(){
    Timer_Init();
    OLED_Init();
    while(1){
        Task();
    }
}

代码：

\```c showLineNumbers
int main(){
    Timer_Init();
    OLED_Init();
    while(1){
        Task();
    }
}
\```

显示代码文件名

main.c
int main(){
    Timer_Init();
    OLED_Init();
    while(1){
        Task();
    }
}

代码：

\```c title="main.c"
int main(){
    Timer_Init();
    OLED_Init();
    while(1){
        Task();
    }
}
\```

高亮代码行

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    
    int x = 10;
    int y = 20;
    int sum = x + y;
    
    return 0;
}

代码：

\```c
#include <stdio.h>

int main() {
    \// highlight-next-line
    printf("Hello, World!\n");
    
    \// highlight-start
    int x = 10;
    int y = 20;
    int sum = x + y;
    \// highlight-end
    
    return 0;
}
\```

新增代码标记

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    
    int x = 10;
    int y = 20;
    int sum = x + y;
    
    return 0;
}

代码：

\```c
#include <stdio.h>

int main() {
    \// highlight-add-line
    printf("Hello, World!\n");
    
    \// highlight-add-start
    int x = 10;
    int y = 20;
    int sum = x + y;
    \// highlight-add-end
    
    return 0;
}
\```

更新代码标记

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    
    int x = 10;
    int y = 20;
    int sum = x + y;
    
    return 0;
}

代码：

\```c
#include <stdio.h>

int main() {
    \// highlight-update-line
    printf("Hello, World!\n");
    
    \// highlight-update-start
    int x = 10;
    int y = 20;
    int sum = x + y;
    \// highlight-update-end
    
    return 0;
}
\```

错误代码标记

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    
    int x = 10;
    int y = 20;
    int sum = x + y;
    
    return 0;
}

代码：

\```c
#include <stdio.h>

int main() {
    \// highlight-error-line
    printf("Hello, World!\n");
    
    \// highlight-error-start
    int x = 10;
    int y = 20;
    int sum = x + y;
    \// highlight-error-end
    
    return 0;
}
\```

多语言

JavaScript
Python
Java
C

function helloWorld() {
	console.log('Hello, world!');
}

def hello_world():
	print("Hello, world!")

class HelloWorld {
  public static void main(String args[]) {
  System.out.println("Hello, World");
 }
}

int main() {
	printf("Hello, World!\n");   
	return 0;
}

代码：（需 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';）

<Tabs>

  <TabItem value="js" label="JavaScript">
\```js
function helloWorld() {
	console.log('Hello, world!');
}
\```
  </TabItem>

  <TabItem value="py" label="Python">
\```py
def hello_world():
	print("Hello, world!")
\```
  </TabItem>

  <TabItem value="java" label="Java">
\```java
class HelloWorld {
  public static void main(String args[]) {
  System.out.println("Hello, World");
 }
}
\```
  </TabItem>
  
  <TabItem value="c" label="C">
\```c
int main() {
	printf("Hello, World!\n");   
	return 0;
}
\```
  </TabItem>  
  
</Tabs>

补充说明

在上面的多语言中，value 是唯一且可自定义的，但最好和后面的 label对应。不可出现下面这种情况：

<Tabs>

<TabItem value="bash" label="有密钥">

\```bash
ffmpeg -allowed_extensions ALL -i "index.m3u8" -c copy -bsf:a aac_adtstoasc -hls_key_info_file "index/0.key" "output.mp4"
\```

</TabItem>  
  
<TabItem value="bash" label="无密钥">

\```bash
ffmpeg -i "index.m3u8" -c copy -bsf:a aac_adtstoasc "output.mp4"
\```

</TabItem>   
  
</Tabs>

会报错：

Docusaurus error: Duplicate values "bash" found in <Tabs>. Every value needs to be unique.

少量演示代码可以直接使用上面的多语言模块，但难以维护。使用这个方法基于 CodeBlock 实现 FileBlock 可以解决这个问题，但我还没实现，因为需要用到插件，暂时就先到这儿吧，日后如有需要再研究。

折叠详情组件

Test

example:

int main(){
    while(1){
        
    }
}

代码：

<details>
<summary>Test</summary>

example:
\```c
int main(){
    while(1){
        
    }
}
\```

</details>

插入音频

代码：

<audio controls>
  <source src="/audio/王铮亮-不凡.mp3" type="audio/mpeg" />
  您的浏览器不支持音频播放，请升级或使用其他浏览器。
</audio>

插入视频外链

代码：

<iframe 
  width="100%" 
  height="500" 
  src="https://www.bilibili.com/bangumi/play/ep733316" 
  frameborder="0" 
  allowfullscreen>
</iframe>

小贴士

My Tip

绿色小贴士，用于推荐用法、技巧等场景

Take care

红色危险，用于指示高风险操作、错误操作等场景

My Info

蓝色信息提示，用于补充说明、背景知识等场景

My note

浅灰备注，需要特别注意的内容

My warning

黄色，指示可能有风险的操作

绿色

:::tip[My Tip]

绿色小贴士，用于推荐用法、技巧等场景

:::

红色

:::danger[Take care]

红色危险，用于指示高风险操作、错误操作等场景

:::

蓝色

:::info[My Info]

蓝色信息提示，用于补充说明、背景知识等场景

:::

灰色

:::note[My note]

浅灰备注，需要特别注意的内容

:::

黄色

:::warning[My warning]

黄色，指示可能有风险的操作

:::

同目录跳转

testpage2

[testpage2](./testpage2.md)

不同目录跳转

回想空间

[回想空间](/docs/reflection-space)

插入图片

markdown

This is Sherry

![](./img/Eureka.png "This is Sherry")

jsx

使用jsx：

<img
  src="/img/Eureka.jpg"
  alt="示例图片"
  style={{
    width: '100%',
    maxWidth: '300px',
    height: 'auto',
    display: 'block',
    margin: '0 auto'
  }}
/>

组件（无卡片装饰）

代码：（需import CardImg from '@site/src/components/CardImg';）

<p><CardImg src="/img/example.jpg" alt="示例图1" isCenter={true} /></p>

组件（卡片装饰）

代码：（需import CardImg from '@site/src/components/CardImg';）

<p><CardImg src="/img/example.jpg" alt="示例图2" isCenter={true} isBoxed={true} /></p>

自定义标题

一级标题

二级标题

无序三级标题

1.有序三级标题

绿色字体三级标题

使用方法：（需import { B1, B2, B3, BH3, B3W} from '@site/src/components/ForMDX';）

# <B1>一级标题</B1>
## <B2>二级标题</B2>
### <B3>无序三级标题</B3>
### <BH3>1.</BH3>有序三级标题
### <B3W>绿色字体三级标题</B3W>

上面关于B1、B2等自定义标题的样式可在.src/css/custom.css中修改

技术速记组件

标题内置（无右侧导航栏）

default

[UART] 串口接收数据丢失

现象

高速率（115200）下接收数据偶尔丢失，缓冲区出现空洞

根因

未启用 NVIC 中断优先级抢占，导致高优先级任务阻塞 UART 中断响应

解法

将 UART 中断优先级设为最高（NVIC_SetPriority(USART1_IRQn, 0)），并启用中断嵌套

#串口通信#中断丢失#NVIC#STM32

代码：（需 import { QuickNoteCard } from '@site/src/components/ForMDX';）

<QuickNoteCard 
  title="[UART] 串口接收数据丢失"
  phenomenon="高速率（115200）下接收数据偶尔丢失，缓冲区出现空洞"
  cause="未启用 NVIC 中断优先级抢占，导致高优先级任务阻塞 UART 中断响应"
  solution="将 UART 中断优先级设为最高（NVIC_SetPriority(USART1_IRQn, 0)），并启用中断嵌套"
  tags={['#串口通信', '#中断丢失', '#NVIC', '#STM32']}
/>

warning

警告变体示例

现象

Flash 擦写操作后系统偶发死机

根因

在 Flash 扇区擦除期间触发了中断，中断服务程序试图从 Flash 取指令导致总线冲突

解法

执行 Flash 操作前关闭全局中断（__disable_irq()），操作完成后恢复（__enable_irq()）

#Flash#死机#中断冲突

代码：（需 import { QuickNoteCard } from '@site/src/components/ForMDX';）

<QuickNoteCard 
  variant="warning"
  title="警告变体示例"
  phenomenon="Flash 擦写操作后系统偶发死机"
  cause="在 Flash 扇区擦除期间触发了中断，中断服务程序试图从 Flash 取指令导致总线冲突"
  solution="执行 Flash 操作前关闭全局中断（__disable_irq()），操作完成后恢复（__enable_irq()）"
  tags={['#Flash', '#死机', '#中断冲突']}
/>

error

错误变体示例

现象

系统运行中随机复位，无规律可循

根因

看门狗未及时喂狗，原因是主循环中存在长时间阻塞（如 I2C 超时等待）

解法

1. 将耗时操作移至独立线程或状态机
2. 使用独立看门狗（IWDG）替代窗口看门狗（WWDG）
3. 增加喂狗监控线程，检测主线程心跳

#看门狗#随机复位#IWDG

代码：（需 import { QuickNoteCard } from '@site/src/components/ForMDX';）

<QuickNoteCard 
  variant="error"
  title="错误变体示例"
  phenomenon="系统运行中随机复位，无规律可循"
  cause="看门狗未及时喂狗，原因是主循环中存在长时间阻塞（如 I2C 超时等待）"
  solution={<>1. 将耗时操作移至独立线程或状态机<br/>2. 使用独立看门狗（IWDG）替代窗口看门狗（WWDG）<br/>3. 增加喂狗监控线程，检测主线程心跳</>}
  tags={['#看门狗', '#随机复位', '#IWDG']}
/>

tip

提示变体示例

现象

需要一种轻量级的调试日志方案

根因

printf 重定向过于繁琐，且 Newlib-Nano 不支持浮点格式化

解法

使用 ITM_SendChar() 配合 SWO 输出，无需重定向，支持 Segger SystemView 实时查看

#调试技巧#ITM#SWO#SystemView

代码：（需 import { QuickNoteCard } from '@site/src/components/ForMDX';）

<QuickNoteCard 
  variant="tip"
  title="提示变体示例"
  phenomenon="需要一种轻量级的调试日志方案"
  cause="printf 重定向过于繁琐，且 Newlib-Nano 不支持浮点格式化"
  solution="使用 ITM_SendChar() 配合 SWO 输出，无需重定向，支持 Segger SystemView 实时查看"
  tags={['#调试技巧', '#ITM', '#SWO', '#SystemView']}
/>

标题外置

[PID 调参] 速度环高频震荡

现象

小车直线行驶时电机输出高频波动，伴随明显啸叫声

根因

1. 速度反馈量化噪声过大（M 法测速周期过短）
2. 微分项 D 系数过大，放大高频噪声
3. 编码器信号线未屏蔽，引入电磁干扰

解法

1. 增加速度低通滤波（一阶滞后：v_filtered = 0.8 * v_raw + 0.2 * v_prev）
2. 减小 Kd 或改用增量式 PID
3. 编码器线换用双绞屏蔽线，单端接地

#PID 震荡#速度环#编码器干扰#滤波

代码：（需 import { QuickNoteCard, NoteSectionTitle } from '@site/src/components/ForMDX';）

#### <NoteSectionTitle variant="default">[PID 调参] 速度环高频震荡</NoteSectionTitle>

<QuickNoteCard 
  phenomenon="小车直线行驶时电机输出高频波动，伴随明显啸叫声"
  cause={<>1. 速度反馈量化噪声过大（M 法测速周期过短）<br/>2. 微分项 D 系数过大，放大高频噪声<br/>3. 编码器信号线未屏蔽，引入电磁干扰</>}
  solution={<>1. 增加速度低通滤波（一阶滞后：v_filtered = 0.8 * v_raw + 0.2 * v_prev）<br/>2. 减小 Kd 或改用增量式 PID<br/>3. 编码器线换用双绞屏蔽线，单端接地</>}
  tags={['#PID 震荡', '#速度环', '#编码器干扰', '#滤波']}
/>

卡片组件说明

属性说明

属性	类型	必填	默认值	说明
`title`	string	否	-	卡片标题（为空时不渲染标题区域）
`phenomenon`	string \| ReactNode	是	-	问题现象描述
`cause`	string \| ReactNode	是	-	根因分析
`solution`	string \| ReactNode	是	-	解决方案
`tags`	Array<string>	否	[]	标签列表
`variant`	`'default' \| 'warning' \| 'error' \| 'tip'`	否	`'default'`	卡片/标题变体

注意事项：

phenomenon、cause、solution 均支持 MDX 语法（可嵌套 JSX，如 <>...</> 包裹的 HTML）
使用标题外置模式时，title 留空或不传即可
变体颜色会自动适配深色模式（粉色系主题）

📚 参考资料

[1]. 波特律动

[2]. Zhang的学习笔记

[3]. Joseph Gan's Blog

[4]. roc的技术笔记

[5]. AlanWang's Blog

加载评论中...

本文档全部import：​

🔗 按钮链接​

按钮下载（外链）​

自定义按钮​

高亮/关键词​

🔁卡片链接​

显示代码行号​

显示代码文件名​

高亮代码行​

新增代码标记​

更新代码标记​

错误代码标记​

多语言​

折叠详情组件​

插入音频​

插入视频外链​

小贴士​

绿色​

红色​

蓝色​

灰色​

黄色​

同目录跳转​

不同目录跳转​

插入图片​

markdown​

jsx​

组件（无卡片装饰）​

组件（卡片装饰）​

自定义标题​

一级标题

二级标题​

无序三级标题​

1.有序三级标题​

绿色字体三级标题​

技术速记组件​

标题内置（无右侧导航栏）​

default​

warning​

error​

tip​

标题外置​

[PID 调参] 速度环高频震荡​

属性说明​

📚 参考资料​

本文档全部import：

🔗 按钮链接

按钮下载（外链）

自定义按钮

高亮/关键词

🔁卡片链接

显示代码行号

显示代码文件名

高亮代码行

新增代码标记

更新代码标记

错误代码标记

多语言

折叠详情组件

插入音频

插入视频外链

小贴士

绿色

红色

蓝色

灰色

黄色

同目录跳转

不同目录跳转

插入图片

markdown

jsx

组件（无卡片装饰）

组件（卡片装饰）

自定义标题

二级标题

无序三级标题

1.有序三级标题

绿色字体三级标题

技术速记组件

标题内置（无右侧导航栏）

default

warning

error

tip

标题外置

[PID 调参] 速度环高频震荡

属性说明

📚 参考资料