发文教程 on 老徐数学博客

教程：网页插入B站视频的方法

Sat, 01 Aug 2026 11:30:00 +0800

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

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

提醒：本文的MD代码中的 /* 代码 */ 是为了以文本的方式显示出次代码，实际使用时应该删除。

{{- $bvid := .Get "bvid" | default (.Get 0) -}}
{{- $page := .Get "page" | default "1" -}}
{{- $title := .Get "title" | default "" -}}

{{- if not $bvid -}}
  {{ errorf "bilibili shortcode 需要提供 bvid，例如：{{< bilibili BV1xx411c7mD >}} 或 {{< bilibili bvid=\"BV1xx411c7mD\" page=\"2\" >}}" }}
{{- end -}}

<figure style="margin:1.5rem 0;">
  <div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;">
    <iframe
      style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
      src="https://player.bilibili.com/player.html?bvid={{ $bvid }}&page={{ $page }}&autoplay=0"
      scrolling="no"
      frameborder="no"
      framespacing="0"
      loading="lazy"
      allowfullscreen>
    </iframe>
  </div>
  {{- if $title }}<figcaption style="margin-top:.5rem;text-align:center;font-size:.9em;color:#888;">{{ $title }}</figcaption>{{- end }}
</figure>

2.调用方式：文章 .md 里写一行调用短代码就行。
#

最简：{{< bilibili BV11Z4y1W77e >}}

效果如下：

教程：网页插入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 即可：

教程：网页插入本地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" >}}

下面是显示效果：

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

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：默认自动加行号

发文教程 on 老徐数学博客

教程：网页插入B站视频的方法

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

2.调用方式：文章 .md 里写一行调用短代码就行。 #

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

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

1.在线保存你的作品 #

2.获取嵌入代码 #

3.嵌入到 Hugo 文章 #