From 064773e9337f28972802c20c07acf86f4782afcf Mon Sep 17 00:00:00 2001
From: Jiang Jiang <572332739@qq.com>
Date: Wed, 27 Nov 2024 16:22:19 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=96=B0=E5=A2=9E=E5=9C=86=E5=BD=A2?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E5=92=8C=E5=9C=86=E5=BD=A2=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E6=97=8B=E8=BD=AC=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                     |  4 +++-
 layout/_partial/post-header.ejs | 32 ++++++++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/_config.yml b/_config.yml
index 075a362..41446bf 100755
--- a/_config.yml
+++ b/_config.yml
@@ -45,7 +45,9 @@ post:
   titlePosition: center # left ｜ center 文章标题的位置
   
 # 相对于source目录下的头像url
-favicon: /img/favicon.webp
+favicon: /img/favicon.webp # 默认方形头像
+isRoundedAvatar: false # 是否圆形头像
+isAvatarRotating: false # 圆形头像是否开启悬浮旋转
 
 # 是否启用一些特色工具 false | true
 tool:
diff --git a/layout/_partial/post-header.ejs b/layout/_partial/post-header.ejs
index 76ffd5d..7c3de34 100755
--- a/layout/_partial/post-header.ejs
+++ b/layout/_partial/post-header.ejs
@@ -14,14 +14,38 @@
 
 <div class="header">
     <div class="header-container">
-        <img style="
-        width: 56px;
-        height: auto;" alt="^-^" cache-control="max-age=86400" class="header-img" src="<%- url_for(theme.favicon) %>" width="10%"></img>
+        <style>
+            .header-img {
+                width: 56px;
+                height: auto;
+                object-fit: cover; /* 保持图片比例 */
+                transition: transform 0.3s ease-in-out; 
+                border-radius: <%= theme.isRoundedAvatar ? '50%' : '0' %>; 
+            }
+            <% if (theme.isAvatarRotating && theme.isRoundedAvatar) { %>
+            .header-img:hover {
+                animation: rotateAnimation 2s linear infinite; /* 悬停旋转动画 */
+            }
+            @keyframes rotateAnimation {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+            <% } %>
+        </style>
+        <img 
+            alt="^-^" 
+            cache-control="max-age=86400" 
+            class="header-img" 
+            src="<%- url_for(theme.favicon) %>" 
+        />
         <div class="header-content">
             <a class="logo" href="<%- url_for() %>"><%= config.title %></a> 
             <span class="description"><%= config.description %></span> 
         </div>
-        
     </div>