diff --git a/layouts/offline/single.html b/layouts/offline/single.html
index 758071fe..f3337f8d 100644
--- a/layouts/offline/single.html
+++ b/layouts/offline/single.html
@@ -1,3 +1,6 @@
+{{- /* TODO remove this template */ -}}
+{{- warnf "The `type:offline` in front matter is deprecated. Use `layout:offline` instead.\n" -}}
+{{- warnf "Front matter 参数 `type:offline` 已弃用。请改用 `layout:offline`。" -}}
 {{- define "title" -}}
   {{- T "offlineTitle" }} - {{ .Site.Title -}}
 {{- end -}}
diff --git a/layouts/page/offline.html b/layouts/page/offline.html
new file mode 100644
index 00000000..758071fe
--- /dev/null
+++ b/layouts/page/offline.html
@@ -0,0 +1,19 @@
+{{- define "title" -}}
+  {{- T "offlineTitle" }} - {{ .Site.Title -}}
+{{- end -}}
+
+{{- define "content" -}}
+  <article class="page" id="content-offline">
+    <div class="header">
+      <h1 class="offline-title animate__animated animate__pulse animate__faster">{{- T "offlineTitle" -}}</h1>
+      <p class="offline-subtitle animate__animated animate__headShake">
+        <i class="fa-stack fa-xs" aria-hidden="true">
+          <i class="fa-solid fa-wifi fa-stack-1x" aria-hidden="true"></i>
+          <i class="fa-solid fa-ban fa-stack-2x" aria-hidden="true"></i>
+        </i>
+        <span>ERROR_INTERNET_DISCONNECTED</span>
+      </p>
+    </div>
+    <p class="error-text">{{- T "offlineText" -}}</p>
+  </article>
+{{- end -}}