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

效果如下：

视频 on 老徐数学博客

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

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

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

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

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