.gitattributes

@@ -1,4 +1,5 @@
 *.png filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
 *.avif filter=lfs diff=lfs merge=lfs -text
 *.webp filter=lfs diff=lfs merge=lfs -text

YaeBlog/Components/AppreciationCode.razor

@@ -0,0 +1,33 @@
+<div class="flex flex-wrap justify-center gap-6 max-w-md md:max-w-lg">
+    <div class="relative w-40 h-40 md:w-48 md:h-48 overflow-hidden
+        transition-all duration-300 ease-out hover:scale-110 group">
+        <img
+            src="./images/alipay-code.jpeg"
+            alt="支付宝赞赏码"
+            class="w-full h-full object-cover"
+        />
+        <div class="absolute -bottom-8 left-0 right-0 text-center
+            text-white bg-black opacity-60 text-sm font-medium
+            backdrop-blur-sm group-hover:bottom-2 transition-all duration-300">
+            请我喝奶茶<br/>
+        </div>
+    </div>
+
+    <div class="relative w-40 h-40 md:w-48 md:h-48 overflow-hidden
+        transition-all duration-300 ease-out hover:scale-110 group">
+        <img
+            src="./images/wechat-code.jpeg"
+            alt="微信赞赏码"
+            class="w-full h-full object-cover"
+        />
+        <div class="absolute -bottom-8 left-0 right-0 text-center
+            text-white bg-black opacity-60 text-sm font-medium
+            backdrop-blur-sm group-hover:bottom-2 transition-all duration-300">
+            请我喝奶茶<br/>
+        </div>
+    </div>
+</div>
+
+@code {
+
+}

YaeBlog/Pages/Essays.razor

@@ -46,6 +46,10 @@
                 @((MarkupString)_essay!.HtmlContent)
             </div>
 
+            <div>
+                <AppreciationCode/>
+            </div>
+
             <div>
                 <LicenseDisclaimer EssayFilename="@BlogKey"/>
             </div>