3 files changed, 83 insertions, 19 deletions
diff --git a/content/links/index.md b/content/links/index.md
index 6c12cccd..612060bb 100644
--- a/content/links/index.md
+++ b/content/links/index.md
@@ -4,25 +4,18 @@ updated: 2024-08-24T09:31
 title: 链接
 ---
 
-## 常看的博客
-
-- [白洛嘉](https://brocalife.com/)
-	- 认识了大概五年的网友
-- [莫比乌斯 – 写作，一场自我悖驳的旅程](https://onojyun.com/)
-	- 引发思考的文字
-- [Velas电波站 · 非正常信号发射与搜寻装置](https://www.velasx.com/)
-	- 喜欢 Zeee 的文字风格
-- [云游君的小站](https://www.yunyoujun.cn/)
-	- 技术力和创意都很让人佩服的大佬
-- [LCZBlog](https://blog.licaoz.com/)
-	- 和我同一个中学毕业的学弟，很奇妙的相识
-- [Bottle小站](https://bottle.moe/)
-- [Sukka's Blog](https://blog.skk.moe/)
-- [白熊阿丸的小屋](https://blog.bxaw.name/)
-- [dyron503's](https://career.dyron503.top/)
-- [一派胡言](https://yipai.me/)
-
-……
+<div class="blog-links">
+	{{< bloglink link="https://www.velasx.com/" title="Velas电波站" description="喜欢 Zeee 的文字风格" image="https://image.guhub.cn/picgo/velas-icon" >}}
+	{{< bloglink link="https://onojyun.com/" title="莫比乌斯" description="引发思考的文字" image="https://image.guhub.cn/picgo/ono-icon" >}}
+	{{< bloglink link="https://brocalife.com/" title="白洛嘉" description="认识了大概五年的网友" image="https://image.guhub.cn/picgo/broca-icon" >}}
+	{{< bloglink link="https://blog.bxaw.name/" title="白熊阿丸的小屋" description="真实的文字" image="https://cravatar.cn/avatar/21531185e8296f70da566b68d3fc9785" >}}
+	{{< bloglink link="https://rolen.wiki/" title="Rolen" description="有深度的文字" image="https://rolen.wiki/wp-content/uploads/2024/09/cropped-rolen-logo-black-2-180x180.png" >}}
+	{{< bloglink link="https://career.dyron503.top/" title="dyron503's" description="有关电子游戏的文字" >}}
+	{{< bloglink link="https://yipai.me" title="一派胡言" description="禁止纵容的文字" >}}
+	{{< bloglink link="https://blog.licaoz.com/" title="LCZBlog" description="和我同一个中学的学弟" image="https://image.guhub.cn/picgo/licaoz-icon" >}}
+	{{< bloglink link="https://blog.skk.moe/" title="Sukka's Blog" image="https://cdn.skk.moe/avatar/96x96.png" >}}
+	{{< bloglink link="https://www.yunyoujun.cn/" title="云游君的小站" description="技术力和创意都很让人佩服的大佬" image="https://www.yunyoujun.cn/images/avatar.jpg" >}}
+</div>
 
 > 网站不交换友情链接，我会在 [链接](./links) 页面放上自己喜欢的、常看的博客和网站。如果你在网站下留言，而我恰巧喜欢你的内容，我会在这个页面上放上你网站的链接；当然，至于你是否也在贵站加上「极客死亡计划」的链接，这与我无关。
 >
diff --git a/themes/yinyang/assets/css/index.css b/themes/yinyang/assets/css/index.css
index 2f2aa8bf..8db19108 100644
--- a/themes/yinyang/assets/css/index.css
+++ b/themes/yinyang/assets/css/index.css
@@ -502,3 +502,63 @@ a:hover {
     margin: 3rem 1rem;
   }
 }
+
+/* blog links */
+
+div.blog-links {
+  display: flex; 
+  flex-wrap: wrap; 
+  gap: 1rem;
+}
+
+a.blog-link {
+  position: relative;
+  background-color: var(--block-background-color);
+  text-decoration: none;
+  color: var(--text-color);
+  padding: 1rem 2rem;
+  padding-right: 4rem;
+  border-radius: 1rem;
+  width: calc(50% - 2rem);
+  box-sizing: border-box;
+  overflow: hidden
+}
+
+@media screen and (max-width: 768px) {
+  a.blog-link {
+    font-size: 1.2rem;
+    padding: 0.5rem 1rem;
+    padding-right: 2rem;
+    width: 100%;
+  }
+}
+
+a.blog-link h4,
+a.blog-link p {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+a.blog-link p {
+  line-height: 1.5;
+}
+
+a.blog-link .blog-link-content {
+  z-index: 10;
+}
+
+a.blog-link-image {
+  z-index: 0;
+}
+
+a.blog-link img {
+  --size: 5rem;
+  display: block;
+  position: absolute;
+  right: -1rem;
+  bottom: -1rem;
+  width: var(--size);
+  height: var(--size);
+  border-radius: 100%;
+  z-index: 0;
+}
+\ No newline at end of file
diff --git a/themes/yinyang/layouts/shortcodes/bloglink.html b/themes/yinyang/layouts/shortcodes/bloglink.html
new file mode 100644
index 00000000..4cdec219
--- /dev/null
+++ b/themes/yinyang/layouts/shortcodes/bloglink.html
@@ -0,0 +1,11 @@
+<a href="{{.Get "link" }}" class="blog-link" target="_blank">
+    {{ if and (isset .Params "image") .Params.image }}
+    <div class="blog-link-image">
+        <img src="{{ .Params.image }}" alt="{{ .Params.title }}" />
+    </div>
+    {{ end }}
+    <div class="blog-link-content">
+        <h4>{{.Get "title" }}</h4>
+        <p>{{.Get "description" }}</p>
+    </div>
+</a>
+\ No newline at end of file