教程 on 老徐数学博客

教程：网页插入GeoGebra 动画的三种方法

Sun, 19 Jul 2026 13:30:00 +0800

这是一篇示例文章，用来测试 GeoGebra 嵌入网页的三种方法。

把这个本地的 “勾股定理.ggb” 嵌入到 Hugo 博客里，有两条完整的可执行方案：插入网上的GGB文件，和插入本地的的GGB文件。

📦 方案一：最省事→ 上传到 GeoGebra 在线库 + 嵌入（推荐）

这是最稳定的方式。

1.在线保存你的作品

点击「文件」→「在线保存」，用你的 GeoGebra 账号登录并保存 “勾股定理.ggb”，设置为「公开」。

2.获取嵌入代码

保存成功后，会跳转到作品的在线页面。点击右上角「分享」→「嵌入」，就能得到标准的 iframe 代码，类似：

<iframe src="https://www.geogebra.org/classic/你的作品ID?embed" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
本例中 `id` 为`wbhb7sdm`

3.嵌入到 Hugo 文章

从代码中获得 id ，只需要替换GeoGebra官方网站在线动画文件的 id 即可：

 {{< geogebra id="wbhb7sdm" width="100%" height="520" >}}

下面是演示效果

直接把这段代码粘贴到你的 Markdown 文章里即可。

这种方式插入不会显示工具栏，无法拖动画布。

优点：稳定省心，GeoGebra 官方托管，不会有跨域和加载问题。

缺点：需要注册 GeoGebra 账号，且作品必须公开。

📦 方案二：本地导出 + 自托管（不依赖 GeoGebra 账号）

如果你不想上传到 GeoGebra 官网，可以直接从当前界面导出并嵌入。

教程：网页插入本地GGB动画的方法

Sun, 19 Jul 2026 11:30:00 +0800

1.创建短代码文件（一次性创建即可，以后所有 GGB 都能用）

在你的博客根目录下，新建文件 layouts/shortcodes/ggb.html（如果文件夹不存在就手动创建）：

<iframe 
    src="{{ .Get "src" }}"
    width="100%"
    height="{{ .Get "height" | default "550" }}"
    frameborder="0"
    allowfullscreen
    sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
</iframe>

2.修改你的 Markdown 文章

把原来的 iframe 代码，换成调用短代码的方式：

我们来发布本地的“圆柱展开的GGB”

<!-- 使用默认高度 550 -->
{{< ggb src="/ggb/yuanzhuzhankai.html?embed" >}}

<!-- 单独设置高度 300 -->
{{< ggb src="/ggb/yuanzhuzhankai.html?embed" height="300" >}}

下面是显示效果：

– 使用默认高度 550 –

– 单独设置高度 300 –

3.重启 Hugo 服务

cd /d D:=SYSFLODERS=\Desktop\xucg.github.io hugo server -D –gc

教程：网页里写公式的方法-以勾股定理为例

Sun, 19 Jul 2026 10:30:00 +0800

这是一篇示例文章，用来测试数学公式。

行内公式示例：直角三角形满足 \(a^2 + b^2 = c^2\)。

行内公式示例：直角三角形满足 \(a^2 + b^2 = c^2\)。

块级公式示例：

\[c = \sqrt{a^2 + b^2}\]

\[c = \sqrt{a^2 + b^2}\]

\[c = \sqrt{a^2 + b^2},a^2 + b^2 = c^2\]

\[c = \sqrt{a^2 + b^2},a^2 + b^2 = c^2\]

\begin{aligned}
a^2 + b^2 = c^2 ,c = \sqrt{a^2 + b^2}
\end{aligned}

\begin{aligned} a^2 + b^2 = c^2,c = \sqrt{a^2 + b^2} \end{aligned}

也可以写多行公式：

\[
\begin{aligned}
a^2 + b^2 = c^2 \\
c = \sqrt{a^2 + b^2}
\end{aligned}
\]
 在公式中直接使用 \\ 即可换行

\[ \begin{aligned} a^2 + b^2 = c^2 \\ c = \sqrt{a^2 + b^2} \end{aligned} \]

\[
\begin{aligned}
a^2 + b^2 &= c^2 \\
c &= \sqrt{a^2 + b^2}
\end{aligned}
\]
 在公式中直接使用 \\ 即可换行，两个&使得2公式在=处对齐。

\[ \begin{aligned} a^2 + b^2 &= c^2 \\ c &= \sqrt{a^2 + b^2} \end{aligned} \]

\[c = \sqrt{a^2 + b^2},\\ a^2 + b^2 = c^2\]  在公式中直接使用 \\ 即可换行

\[c = \sqrt{a^2 + b^2},\\ a^2 + b^2 = c^2\]

align：默认自动加行号