lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

pref: perfect configuration & optimize style

This commit is contained in:
XPoet 2020-09-11 15:06:38 +08:00
parent 5f272b4bf6
commit 145272ff15
12 changed files with 143 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
_config.yml
View File

@ -1,17 +1,30 @@
# theme basic info
# ------------------------------------------------------------
# Theme basic info (please don't change)
# ------------------------------------------------------------
theme_info:
name: ILS
version: 2.0.1
author: XPoet
repository: https://github.com/XPoet/hexo-theme-ils
# favicon
favicon: images/favicon.png
# avatar
avatar: images/avatar.png
# ------------------------------------------------------------
# Theme style settings
# ------------------------------------------------------------
style:
# Theme color
theme_color: "#0066CC"
# navigation menu
# favicon
favicon: images/favicon.png
# avatar
avatar: images/avatar.png
# ------------------------------------------------------------
# Navigation menu
# ------------------------------------------------------------
menu:
Home: /
Archives: /archives
@ -21,13 +34,22 @@ menu:
# About: /about
# ...
# RSS
rss:
enable: true
# comment plugin
# ------------------------------------------------------------
# RSS
# Dependencies: hexo-generator-feed
# See: https://github.com/hexojs/hexo-generator-feed
# ------------------------------------------------------------
rss:
enable: false
# ------------------------------------------------------------
# Comment plugin
# ------------------------------------------------------------
comments:
# Valine https://github.com/xCss/Valine
# Valine
# See: https://github.com/xCss/Valine
valine:
enable: false
appid: # your leancloud application appid
@ -35,25 +57,34 @@ comments:
meta: # comment input meta, type: Array, values: ['nick','mail','link']
placeholder: # your placeholder
# Gitalk https://github.com/gitalk/gitalk
# Gitalk
# See: https://github.com/gitalk/gitalk
gitalk:
enable: false
github_id: # GitHub repo owner
repository: # Repository name to store issues
repository: # Repository name to store issues
client_id: # GitHub Application Client ID
client_secret: # GitHub Application Client Secret
# website count
# ------------------------------------------------------------
# Website count
# ------------------------------------------------------------
website_count:
# busuanzi http://ibruce.info/2015/04/04/busuanzi/
# busuanzi
# See: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
enable: false
site_uv: false
site_pv: false
page_pv: false
# ------------------------------------------------------------
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
# Dependencies: hexo-generator-searchdb
# See: https://github.com/theme-next/hexo-generator-searchdb
# ------------------------------------------------------------
local_search:
enable: true
@ -67,36 +98,57 @@ local_search:
# Preload the search data when the page loads.
preload: false
# ------------------------------------------------------------
# Post word count
# Dependencies: https://github.com/willin/hexo-wordcount
# Dependencies: hexo-wordcount
# See: https://github.com/willin/hexo-wordcount
# ------------------------------------------------------------
post_wordcount:
enable: false
wordcount: false # word count, one article
min2read: false # time to read, one article
# Home page article block display settings
home_article:
category: true # show category in article block
tag: true # show tags in article block
tag_limit: 5 # max number of tags shown in article block
# Code Copy
# ------------------------------------------------------------
# Home page article block display settings
# ------------------------------------------------------------
home_article:
category:
enable: false # show category in home page article block
limit: 3 # max number of categories shown in home page article block
tag:
enable: false # show tags in home page article block
limit: 5 # max number of tags shown in home page article block
# ------------------------------------------------------------
# Code copy
# ------------------------------------------------------------
code_copy:
enable: true
style: flat # values: default | flat | mac
style: flat # values: default | flat | mac
# sidebar tools
# ------------------------------------------------------------
# Sidebar tools
# ------------------------------------------------------------
side_tools:
enable: true
position: right # values: left | right
enable: false
# back to top
# ------------------------------------------------------------
# Back to top
# ------------------------------------------------------------
back2top:
enable: true
position: right # values: left | right
enable: false
# ------------------------------------------------------------
# Table of Contents in the Sidebar
# ------------------------------------------------------------
toc:
enable: true
enable: false
# Automatically add list number to toc.
number: true
@ -104,8 +156,11 @@ toc:
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: true
# magic theme
# ------------------------------------------------------------
# Magic
# ------------------------------------------------------------
magic:
enable: true
scale: false
shadow: true
scale: false # scale effect when the mouse hover
shadow: false # shadow effect when the mouse hover

4
layout/_partial/article-meta-info.ejs
View File

@ -31,12 +31,12 @@
<i class="fa fa-eye"></i> <span id="busuanzi_value_page_pv"></span>
</span>
<% } %>
<% if(theme.post_wordcount.wordcount && is_post()){ %>
<% if(is_post() && theme.post_wordcount.enable && theme.post_wordcount.wordcount){ %>
<span class="article-wordcount article-meta-item">
<i class="fa fa-book"></i> <span><%= wordcount(page.content) %> <%- __('wordcount') %></span>
</span>
<% } %>
<% if(theme.post_wordcount.min2read && is_post()){ %>
<% if(is_post() && theme.post_wordcount.enable && theme.post_wordcount.min2read){ %>
<span class="article-min2read article-meta-item">
<i class="fa fa-clock-o"></i> <span><%= min2read(page.content) %> <%- __('min2read') %></span>
</span>

8
layout/_partial/footer.ejs
View File

@ -3,10 +3,6 @@
<div class="copyright-info info-item">
&copy; <%= date(new Date(), 'YYYY') %> <i class="fa fa-heart-o"></i> <a href="/"><%= config.author %></a>
</div>
<div class="theme-info info-item">
<%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %> | <%- __('theme') %> <a
href="https://github.com/XPoet/hexo-theme-ils" target="_blank"><%= theme.theme_info.name %> v<%= theme.theme_info.version %></a>
</div>
<% if (theme.website_count.busuanzi_count.enable) { %>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="website-count info-item">
@ -22,5 +18,9 @@
<% } %>
</div>
<% } %>
<div class="theme-info info-item">
<%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %> | <%- __('theme') %> <a
href="https://github.com/XPoet/hexo-theme-ils" target="_blank"><%= theme.theme_info.name %> v<%= theme.theme_info.version %></a>
</div>
</div>
</footer>

4
layout/_partial/head.ejs
View File

@ -21,8 +21,8 @@
<% if (title){ %><%= title %> | <% } %><%= config.title %>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<% if (theme.favicon){ %>
<%- favicon_tag(theme.favicon) %>
<% if (theme.style.favicon){ %>
<%- favicon_tag(theme.style.favicon) %>
<% } %>
<%- css('css/style') %>
<%- export_config() %>

4
layout/_partial/scripts.ejs
View File

@ -15,9 +15,7 @@
<% } %>
<% if (theme.toc.enable) { %>
<%- js(['lib/anime.min.js', 'js/toc.js']) %>
<%- js(['lib/anime.min.js', 'js/toc.js', 'js/post-toc.js']) %>
<% } %>
<%- js('js/post.js') %>
<% } %>

15
layout/home-content.ejs
View File

@ -24,23 +24,26 @@
<div class="article-date">
<span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span>
<% if (theme.magic.enable === true) { %>
<% if (theme.home_article.category === true) { %>
<% if (theme.home_article.category.enable === true) { %>
<span>
<i class="fa fa-folder"></i>
<ul>
<% post.categories.forEach((category, i) => { %>
<li><%= i === 0 ? '' : '> ' %><a
href="<%- url_for(category.path) %>"><%= category.name %></a></li>
<% post.categories.forEach((category, i) => {
if (theme.home_article.category.limit === 0 || i + 1 <= theme.home_article.category.limit) { %>
<li>
<%= i === 0 ? '' : '> ' %><a href="<%- url_for(category.path) %>"><%= category.name %></a>
</li>
<% } %>
<% }); %>
</ul>
</span>
<% } %>
<% if (theme.home_article.tag === true) { %>
<% if (theme.home_article.tag.enable === true) { %>
<span>
<i class="fa fa-tags"></i>
<ul>
<% post.tags.forEach((tag, i) => {
if (theme.home_article.tag_limit === 0 | i + 1 <= theme.home_article.tag_limit) { %>
if (theme.home_article.tag.limit === 0 || i + 1 <= theme.home_article.tag.limit) { %>
<li>
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"><%= tag.name %></a>
</li>

3
layout/page.ejs
View File

@ -59,8 +59,6 @@
<%- partial('_partial/tools') %>
</div>
<!-- page aside -->
<aside class="page-aside">
<% if (is_post()) { %>
@ -71,7 +69,6 @@
</div>
<% if (theme.local_search.enable) { %>
<%- partial('_partial/local-search') %>
<% } %>

3
source/css/layout/_partial/tools.styl
View File

@ -57,6 +57,9 @@ $li-margin-bottom = 12px;
&.scroll-to-top {
display: none;
position: fixed;
right: $component-interspace;
bottom: $component-interspace;
}
&.page-aside-toggle {

20
source/css/layout/common/variables.styl
View File

@ -51,16 +51,16 @@ $z-index-8 = 1008;
// color
// ===================================
// normal mode color
$primary-color = rgba(30, 88, 217, 0.96); // 主题颜色
$background-color = #fff; // normal 风格 背景颜色
$magic-background-color = #fafafa; // magic 风格 背景颜色
$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色）
$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色
$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色
$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
$fourth-text-color = #eee; // 第四文本颜色
$border-color = darken($background-color, 30%); // 边框颜色
$selection-color = lighten($primary-color, 20%); // 文字选中的颜色
$primary-color = convert(hexo-config("style.theme_color")) || #0066CC;
$background-color = #fff; // normal 风格 背景颜色
$magic-background-color = #fafafa; // magic 风格 背景颜色
$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色）
$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色
$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色
$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
$fourth-text-color = #eee; // 第四文本颜色
$border-color = darken($background-color, 30%); // 边框颜色
$selection-color = lighten($primary-color, 10%); // 文字选中的颜色
// dark mode color
$dark-primary-color = $primary-color;

7
source/css/layout/page.styl
View File

@ -137,6 +137,7 @@ $page-aside-width = 248px;
the-transition-ease-out();
}
.sidebar-tools {
position: fixed;
top: $header-height + $component-interspace;
@ -155,4 +156,10 @@ $page-aside-width = 248px;
transform-origin: right top;
}
}
.sidebar-tools-shrink {
transition();
top: $header-shrink-height + $component-interspace;
}
}

37
source/js/header-shrink.js
View File

@ -1,41 +1,36 @@
const pageTemplateDom = document.querySelector('.page-main-content');
const articleTocContainerDom = document.querySelector('.article-toc-container');
const sidebarToolsDom = document.querySelector('.sidebar-tools');
const headerDom = document.querySelector('.header-wrapper');
const menuBarDom = document.querySelector('.menu-bar');
const windowMaskDom = document.querySelector('.window-mask');
const scrollPercentDom = document.querySelector('.scroll-percent');
let isHeaderShrink = false;
const headerHeight = headerDom.getBoundingClientRect().height;
window.addEventListener('scroll', function (_e) {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (!isHeaderShrink && scrollTop > headerHeight) {
isHeaderShrink = true;
headerDom.classList.add('header-wrapper-shrink');
pageTemplateDom.classList.add('page-main-content-top-shrink');
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (!isHeaderShrink && scrollTop > headerHeight) {
isHeaderShrink = true;
headerDom.classList.add('header-wrapper-shrink');
pageTemplateDom.classList.add('page-main-content-top-shrink');
sidebarToolsDom.classList.add('sidebar-tools-shrink');
if (articleTocContainerDom) {
articleTocContainerDom.classList.add('article-toc-container-shrink');
}
} else if (isHeaderShrink && scrollTop <= headerHeight) {
isHeaderShrink = false;
headerDom.classList.remove('header-wrapper-shrink');
pageTemplateDom.classList.remove('page-main-content-top-shrink');
if (articleTocContainerDom) {
articleTocContainerDom.classList.remove('article-toc-container-shrink');
}
}
} else if (isHeaderShrink && scrollTop <= headerHeight) {
isHeaderShrink = false;
headerDom.classList.remove('header-wrapper-shrink');
pageTemplateDom.classList.remove('page-main-content-top-shrink');
sidebarToolsDom.classList.remove('sidebar-tools-shrink');
}
});
menuBarDom.addEventListener('click', function (_e) {
headerDom.classList.toggle('header-drawer-show');
headerDom.classList.toggle('header-drawer-show');
});
windowMaskDom.addEventListener('click', function (_e) {
headerDom.classList.toggle('header-drawer-show');
headerDom.classList.toggle('header-drawer-show');
});

0
source/js/post.js → source/js/post-toc.js
View File