diff --git a/assets/css/_page/_friends.scss b/assets/css/_page/_friends.scss
new file mode 100644
index 00000000..f9acfe73
--- /dev/null
+++ b/assets/css/_page/_friends.scss
@@ -0,0 +1,63 @@
+/**
+ * @Description: Style of layout named 'Friend links'.
+ * @Author: lruihao.cn
+ * @Updated:  2021/9/20 19:26
+ */
+ 
+.friend-links {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+@media (max-width: 576px) {
+  .friend-links {
+    justify-content: space-around;
+  }
+}
+.friend-link {
+  width: 150px;
+  height: 200px;
+  font-size: 1rem;
+  text-align: center;
+  background: rgba(255,255,255,0.3);
+  box-sizing: border-box; 
+  box-shadow: 3px 3px 5px #aaa;
+  border-radius: 5px;
+  border:none;
+  transition-duration: 0.3s;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.friend-link:hover {
+  background: #fff;
+  transform: scale(1.03);
+  box-shadow: 0 0 3px #aaa;
+}
+.friend-avatar {
+  object-fit: cover;
+  object-position: center;
+  width: 100%!important;
+  height: 150px!important;
+  border-radius: 5px;
+  margin: 0;
+  padding: 0;
+}
+.friend-nickname{
+  display: block;
+  position: relative;
+  color: #2bbc8a;
+  font-weight: bold;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 18px;
+  margin-bottom: 1rem;
+}
+.friend-nickname:hover {
+  color: #d480aa;
+}
\ No newline at end of file
diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
index 0cd511fc..579c85d9 100644
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@@ -20,3 +20,4 @@
 @import "_archive";
 @import "_home";
 @import "_404";
+@import "_friends";
diff --git a/layouts/friends/single.html b/layouts/friends/single.html
new file mode 100644
index 00000000..83c5b5af
--- /dev/null
+++ b/layouts/friends/single.html
@@ -0,0 +1,42 @@
+{{- define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end -}}
+
+{{- define "content" -}}
+{{- $params := .Scratch.Get "params" -}}
+  <div class="page single special friends">
+    {{- /* Title */ -}}
+    <h1 class="single-title animated pulse faster">
+      {{- .Title -}}
+    </h1>
+
+    {{- /* Subtitle */ -}}
+    {{- with $params.subtitle -}}
+      <h2 class="single-subtitle">{{ . }}</h2>
+    {{- end -}}
+
+    {{- /* Friend links */ -}}
+    {{- $loading := resources.Get "svg/loading.svg" | minify -}}
+    <script src="//at.alicdn.com/t/font_578712_g26jo2kbzd5qm2t9.js"></script>
+    <div class="friend-links">
+      {{ range $index, $friend := .Site.Data.friends }}
+        <a class="friend-link" title="{{ $friend.discription }}" href="{{ $friend.url | safeURL }}" rel="external nofollow noopener noreferrer" target="_blank">
+          {{ if $friend.avatar }}
+            <img class="friend-avatar lazyload" src="{{ $loading.RelPermalink }}" data-src="{{ $friend.avatar }}" alt="{{ $friend.nickname }}" />
+          {{ 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 "comment.html" . -}}
+  </div>
+{{- end -}}
\ No newline at end of file