Merge pull request #166 from jiangjiang1116/dev

feature: 新增圆形头像和圆形头像旋转选项
HiNinoJay · Nov 28, 2024 · e963224 · e963224
2 parents fbc3678 + 064773e
commit e963224
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git 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
@@ -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>