From 48177df3fba713109152785d8e477f79700077d3 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Thu, 29 Apr 2021 11:41:20 +0800
Subject: [PATCH] feat: added LOGO image configuration item

---
 _config.yml                            |  2 ++
 layout/_partial/header.ejs             |  7 ++++++-
 source/css/common/variables.styl       |  2 +-
 source/css/layout/_partial/header.styl | 29 +++++++++++++++++++++++++-
 4 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/_config.yml b/_config.yml
index 31b0e0a..a71e436 100644
--- a/_config.yml
+++ b/_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:
 
 
 # ---------------------------------------------------------------------------------------
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 52e43d8..93c5b75 100644
--- a/layout/_partial/header.ejs
+++ b/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>
 
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index fd7a018..e437da9 100644
--- a/source/css/common/variables.styl
+++ b/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)
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index bb06f16..444bf6b 100644
--- a/source/css/layout/_partial/header.styl
+++ b/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;
         }
       }
+
     }