feat: added LOGO image configuration item

This commit is contained in:
XPoet 2021-04-29 11:41:20 +08:00
parent 68df908550
commit 48177df3fb
4 changed files with 37 additions and 3 deletions

View File

@ -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 dont fill)
logo_img:
# ---------------------------------------------------------------------------------------

View File

@ -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>

View File

@ -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)

View File

@ -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;
}
}
}