feat: added LOGO image configuration item

_config.yml

@@ -5,6 +5,8 @@ base_info:
   title: Keep Theme
   author: Keep Team
   url: https://keep.xpoet.cn/
+  # Logo image (You can use local image, image external link or don’t fill)
+  logo_img:
 
 
 # ---------------------------------------------------------------------------------------

layout/_partial/header.ejs

@@ -2,8 +2,13 @@
 
     <div class="header-content<%- (theme.style.first_screen.enable === true && is_home() && !page.prev) ? ' has-first-screen' : '' %>">
         <div class="left">
+            <% if (theme.base_info.hasOwnProperty('logo_img') && theme.base_info.logo_img) { %>
+                <a class="logo-image" href="/">
+                    <%- image_tag(theme.base_info.logo_img) %>
+                </a>
+            <% } %>
             <a class="logo-title" href="/">
-                <%= theme.base_info.title || config.title || 'Keep theme' %>
+                <%= theme.base_info.title || config.title || 'Keep Theme' %>
             </a>
         </div>
 

source/css/common/variables.styl

@@ -7,7 +7,7 @@
 // layout
 // ========================================================================================
 $header-height = 70px;                                           // header height
-$header-shrink-height = $header-height * 0.7;                   // header shrink height
+$header-shrink-height = $header-height * 0.72;                   // header shrink height
 $scroll-progress-bar-height = 2px;                               // scroll progress bar height
 $main-content-width = 80%;                                       // main content width (PC)
 $main-content-width-tablet = 86%;                                // main content width (tablet)

source/css/layout/_partial/header.styl

@@ -1,6 +1,7 @@
 $logo-title-font-size = 2rem;
 $pc-search-icon-font-size = 1.5rem;
 $menu-bar-line-height = 2.5px;
+$logo-image-box-width = 46px;
 
 .header-wrapper {
   width: 100%;
@@ -44,8 +45,33 @@ $menu-bar-line-height = 2.5px;
       transition-t("transform", "0", "0.2", "linear");
 
       .header-shrink & {
-        transform: scale(0.8);
+        transform: scale(0.72);
         transform-origin: left;
+      }
+
+
+      if (hexo-config('base_info.logo_img') && hexo-config('base_info.logo_img') != '') {
+        .logo-image {
+          width: $logo-image-box-width;
+          height: $logo-image-box-width;
+          margin-right: 8px;
+
+
+          +keep-tablet() {
+            width: $logo-image-box-width * 0.9;
+            height: $logo-image-box-width * 0.9;
+          }
+
+          +keep-mobile() {
+            width: $logo-image-box-width * 0.8;
+            height: $logo-image-box-width * 0.8;
+          }
+
+          img {
+            border-radius: 6px;
+            width: 100%;
+          }
+        }
 
       }
 
@@ -64,6 +90,7 @@ $menu-bar-line-height = 2.5px;
           font-size: $logo-title-font-size * 0.8;
         }
       }
+
     }