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 @@
+ <% if (theme.base_info.hasOwnProperty('logo_img') && theme.base_info.logo_img) { %> + + <%- image_tag(theme.base_info.logo_img) %> + + <% } %> - <%= theme.base_info.title || config.title || 'Keep theme' %> + <%= theme.base_info.title || config.title || 'Keep Theme' %>
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; } } + }