diff --git a/layouts/friends/single.html b/layouts/friends/single.html
index ebb71bbb..a4be08c1 100644
--- a/layouts/friends/single.html
+++ b/layouts/friends/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" }}{{ .Title }} - {{ .Site.Title }}{{ end -}}
 
 {{- define "content" -}}
diff --git a/layouts/page/friends.html b/layouts/page/friends.html
new file mode 100644
index 00000000..ebb71bbb
--- /dev/null
+++ b/layouts/page/friends.html
@@ -0,0 +1,38 @@
+{{- define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end -}}
+
+{{- define "content" -}}
+{{- $params := .Scratch.Get "params" -}}
+  <article class="page single special friends">
+    <div class="header">
+      {{- /* Title */ -}}
+      <h1 class="single-title animate__animated animate__pulse animate__faster">{{- .Title -}}</h1>
+      {{- /* Subtitle */ -}}
+      {{- with $params.subtitle -}}<p class="single-subtitle animate__animated animate__fadeIn">{{ . }}</p>{{- end -}}
+    </div>
+
+    {{- /* Friend links */ -}}
+    <script src="//at.alicdn.com/t/font_578712_g26jo2kbzd5qm2t9.js" async defer></script>
+    <div class="friend-links">
+      {{ range $index, $friend := .Site.Data.friends }}
+        <a class="friend-link" title="{{ $friend.description }}" href="{{ $friend.url | safeURL }}" rel="external noopener noreferrer" target="_blank">
+          {{ if $friend.avatar }}
+            {{- dict "Src" $friend.avatar "Alt" $friend.nickname "Class" "friend-avatar" "Resources" $.Resources "Params" $.Params | partial "plugin/image.html" -}}
+          {{ else }}
+            <svg class="friend-avatar" aria-hidden="true">
+              <use xlink:href="#icon-{{ add 1 $index }}"></use>
+            </svg>
+          {{ end }}
+          <span class="friend-nickname" title="{{ $friend.nickname }}">@{{ $friend.nickname }}</span>
+        </a>
+      {{ end }}
+    </div>
+
+    {{- /* Content */ -}}
+    <div class="content" id="content">
+      {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
+    </div>
+
+    {{- /* Comment */ -}}
+    {{- partial "single/comment.html" . -}}
+  </article>
+{{- end -}}