更新

assets/css/joe.global.min.scss

@@ -2221,6 +2221,58 @@
 			}
 		}
 	}
+	&__related {
+		padding-top: 15px;
+		&-title {
+			position: relative;
+			font-size: 18px;
+			font-weight: 500;
+			color: var(--main);
+			padding-left: 15px;
+			margin-bottom: 15px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				width: 4px;
+				border-radius: 2px;
+				background: var(--theme);
+			}
+		}
+		&-content {
+			display: grid;
+			gap: 15px;
+			grid-template-columns: repeat(4, 1fr);
+			.item {
+				overflow: hidden;
+				border-radius: var(--radius-inner);
+				transition: transform 0.25s, box-shadow 0.25s;
+				&:hover {
+					transform: translateY(-5px);
+					box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
+				}
+				img {
+					width: 100%;
+					height: 120px;
+					object-fit: cover;
+				}
+				h6 {
+					height: 32px;
+					line-height: 32px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					background: var(--classD);
+					text-align: center;
+					font-size: 13px;
+					color: var(--minor);
+					padding: 0 12px;
+				}
+			}
+		}
+	}
 	&__friends {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);

assets/css/joe.responsive.min.scss

@@ -61,6 +61,15 @@ html {
 						height: 450px;
 					}
 				}
+				&__related {
+					&-content {
+						.item {
+							img {
+								height: 100px;
+							}
+						}
+					}
+				}
 			}
 			&_owo {
 				&__contain {
@@ -110,6 +119,15 @@ html {
 						height: 400px;
 					}
 				}
+				&__related {
+					&-content {
+						.item {
+							img {
+								height: 90px;
+							}
+						}
+					}
+				}
 			}
 			&_video {
 				&__list {
@@ -261,6 +279,15 @@ html {
 						height: 350px;
 					}
 				}
+				&__related {
+					&-content {
+						.item {
+							img {
+								height: 90px;
+							}
+						}
+					}
+				}
 			}
 			&_index {
 				&__hot {
@@ -592,6 +619,20 @@ html {
 						}
 					}
 				}
+				&__related {
+					&-content {
+						grid-template-columns: repeat(2, 1fr);
+						gap: 10px;
+						.item {
+							img {
+								height: 80px;
+							}
+							h6 {
+								font-size: 12px;
+							}
+						}
+					}
+				}
 			}
 			&_video {
 				&__list {

core/function.php

@@ -2,7 +2,7 @@
 /* 获取主题当前版本号 */
 function _getVersion()
 {
-	return "6.3.2";
+	return "6.3.3";
 };
 
 /* 判断是否是手机 */

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "typecho-joe-next",
-	"version": "6.3.2",
+	"version": "6.3.3",
 	"description": "A Theme Of Typecho",
 	"main": "index.php",
 	"keywords": [

post.php

@@ -55,6 +55,7 @@
                     <?php $this->need('public/article.php'); ?>
                     <?php $this->need('public/handle.php'); ?>
                     <?php $this->need('public/copyright.php'); ?>
+                    <?php $this->need('public/related.php'); ?>
                 </div>
                 <ul class="joe_post__pagination">
                     <?php $this->theNext('<li class="joe_post__pagination-item prev">%s</li>', '', ['title' => '上一篇']); ?>

public/related.php

@@ -0,0 +1,14 @@
+<?php $this->related(4)->to($relatedPosts); ?>
+<?php if ($relatedPosts->have()) : ?>
+    <div class="joe_detail__related">
+        <div class="joe_detail__related-title">相关推荐</div>
+        <div class="joe_detail__related-content">
+            <?php while ($relatedPosts->next()) : ?>
+                <a class="item" href="<?php $relatedPosts->permalink(); ?>" title="<?php $relatedPosts->title(); ?>">
+                    <img class="lazyload" src="<?php _getLazyload(); ?>" data-src="<?php echo _getThumbnails($relatedPosts)[0]; ?>" alt="<?php $relatedPosts->title(); ?>" />
+                    <h6><?php $relatedPosts->title(); ?></h6>
+                </a>
+            <?php endwhile; ?>
+        </div>
+    </div>
+<?php endif; ?>