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

feat: add sidebar-categories & sidebar-tagcloud

This commit is contained in:
XPoet 2020-04-29 16:08:43 +08:00
parent a7762a3aef
commit 000e167e90
18 changed files with 169 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_config.yml
View File

@ -74,29 +74,27 @@ codeblock:
enable: true enable: true
# Table of Contents in the Sidebar # Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc: toc:
enable: true enable: true
# Automatically add list number to toc. # Automatically add list number to toc.
number: true number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it. # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false expand_all: true
# Maximum heading depth of generated toc.
max_depth: 6
# magic theme style # magic theme style
magic: magic:
enable: true enable: true
sidebar: sidebar:
enable: false enable: true
fixed: true
position: right position: right
# sidebar tools
side-tools: side-tools:
enable: true enable: true
position: right position: right
# back to top
back2top: back2top:
enable: true enable: true
position: right position: right

8
layout/_partial/sidebar-categories.ejs Normal file
View File

@ -0,0 +1,8 @@
<div class="sidebar-category">
<div class="category-label">文章分类</div>
<%- list_categories(site.categories, {
class: 'post-category'
}) %>
</div>

25
layout/_partial/sidebar-category.ejs
View File

@ -1,25 +0,0 @@
<div class="sidebar-category">
<div class="category-label">分类</div>
<ul class="category-list">
<li class="category-list-item">
数据库1
<span class="number">8</span>
</li>
<li class="category-list-item">
数据库2
<span class="number">12</span>
</li>
<li class="category-list-item">
数据库3
<span class="number">22</span>
</li>
<li class="category-list-item">
数据库3
<span class="number">22</span>
</li>
<li class="category-list-item">
数据库3
<span class="number">22</span>
</li>
</ul>
</div>

0
layout/_partial/site-info.ejs → layout/_partial/sidebar-site-info.ejs
View File

11
layout/_partial/sidebar-tagcloud.ejs Normal file
View File

@ -0,0 +1,11 @@
<div class="sidebar-tagcloud">
<div class="tagcloud-label">标签云</div>
<div class="tagcloud-container">
<%- tagcloud(site.tags, {
min_font: 1,
max_font: 1.5,
unit: 'em',
amount: 100
}) %>
</div>
</div>

6
layout/_partial/sidebar-tags.ejs Normal file
View File

@ -0,0 +1,6 @@
<div class="sidebar-tags">
<div class="tag-label">文章标签</div>
<%- list_tags(site.tags, {
class: 'post-tag'
}) %>
</div>

3
layout/_partial/sidebar-toc.ejs
View File

@ -4,8 +4,7 @@
page.content, page.content,
{ {
class: 'nav', class: 'nav',
list_number: theme.toc.number, list_number: theme.toc.number
max_depth: theme.toc.max_depth
} }
) %> ) %>
</div> </div>

33
layout/_partial/sidebar.ejs
View File

@ -1,23 +1,16 @@
<div class="sidebar fade-in-down-animation"> <% if (is_post()) { %>
<% if (is_home()) { %> <div class="sidebar sidebar-post fade-in-down-animation">
<div class="home-sidebar-container"> <%- partial('sidebar-toc') %>
<div class="home-sidebar-item"> </div>
<%- partial('site-info') %> <% } else { %>
<div class="sidebar sidebar-other fade-in-down-animation">
<div class="sidebar-container">
<div class="sidebar-item">
<%- partial('sidebar-tagcloud') %>
</div> </div>
<div class="home-sidebar-item"> <div class="sidebar-item">
<%- partial('sidebar-category') %> <%- partial('sidebar-categories') %>
</div> </div>
</div> </div>
<% } else if (is_archive()) { %> </div>
<%- partial('site-info') %> <% } %>
<% } else if (is_post() && theme.toc.enable ) { %>
<%- partial('sidebar-toc') %>
<% } else if (is_category()) { %>
<%- partial('site-info') %>
<% } else if (is_tag()) { %>
<%- partial('site-info') %>
<% } else if (page.title == 'about') { %>
<%- partial('site-info') %>
<% } %>
</div>

5
layout/page.ejs
View File

@ -3,11 +3,11 @@
<%- partial('_partial/header') %> <%- partial('_partial/header') %>
</div> </div>
<div class="page-middle"> <div class="page-middle ">
<main class="main-content normal-code-theme"> <main class="main-content normal-code-theme">
<div class="main-content-left"> <div class="main-content-left fade-in-down-animation">
<% if (is_home()) { %> <% if (is_home()) { %>
<%- partial('home-content') %> <%- partial('home-content') %>
@ -33,6 +33,7 @@
<%- partial('_partial/sidebar') %> <%- partial('_partial/sidebar') %>
</div> </div>
<% } %> <% } %>
</main> </main>
<div class="sidebar-tools"> <div class="sidebar-tools">

33
source/css/layout/_partial/sidebar-category.styl → source/css/layout/_partial/sidebar-categories.styl
View File

@ -5,15 +5,17 @@
position relative position relative
background: var(--background-color); background: var(--background-color);
magic-container(1.02, 30px); magic-container(1.02, 20px);
.category-label { .category-label {
margin-bottom: 10px; margin-bottom: 12px;
padding-left: 10px; padding-bottom: 12px;
//padding-left: 10px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
border-bottom: 1px solid var(--border-color);
&::after { /*&::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -23,9 +25,10 @@
background: #333; background: #333;
} }
*/
} }
.category-list { .category-list {
li.category-list-item { li.category-list-item {
@ -61,4 +64,24 @@
} }
} }
} }
.post-category-list {
.post-category-list-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
.post-category-list-link {
}
.post-category-list-count {
}
}
}
} }

27
source/css/layout/_partial/sidebar-tagcloud.styl Normal file
View File

@ -0,0 +1,27 @@
@require "../common/magic-theme.styl"
.sidebar-tagcloud {
position relative
background: var(--background-color);
magic-container(1.02, 20px);
.tagcloud-label {
margin-bottom: 12px;
padding-bottom: 12px;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid var(--border-color);
}
.tagcloud-container {
text-align: justify;
a {
padding: 0 2px;
line-height: 1.8em;
//text-transform: uppercase;
}
}
}

38
source/css/layout/_partial/sidebar-tags.styl Normal file
View File

@ -0,0 +1,38 @@
@require "../common/magic-theme.styl"
.sidebar-tags {
position relative
background: var(--background-color);
magic-container(1.02, 20px);
.tag-label {
margin-bottom: 12px;
padding-bottom: 12px;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid var(--border-color);
}
.post-tag-list {
.post-tag-list-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
.post-tag-list-link {
}
.post-tag-list-count {
}
}
}
}

16
source/css/layout/_partial/sidebar-toc.styl
View File

@ -5,12 +5,12 @@
.post-toc-wrap { .post-toc-wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 0.88em; font-size: 0.92em;
box-sizing: border-box; box-sizing: border-box;
background: var(--background-color); background: var(--background-color);
if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) { if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
magic-container(1.02, 30px); magic-container(1.02, 20px);
} }
.post-toc { .post-toc {
@ -31,7 +31,7 @@
a { a {
transition-property: all; transition-property: all;
//transition(); transition();
} }
} }
@ -39,10 +39,7 @@
line-height: 1.8; line-height: 1.8;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
if (!hexo-config('toc.wrap')) {
white-space: nowrap;
}
} }
.nav { .nav {
@ -63,16 +60,11 @@
} }
.active > a { .active > a {
border-bottom-color: var(--primary-color);
color: var(--primary-color); color: var(--primary-color);
} }
.active-current > a { .active-current > a {
color: var(--primary-color); color: var(--primary-color);
&:hover {
color: var(--primary-color);
}
} }
} }
} }

21
source/css/layout/_partial/sidebar.styl
View File

@ -1,13 +1,14 @@
@require "../common/variables.styl" @require "../common/variables.styl"
@require "../common/magic-theme.styl" @require "../common/magic-theme.styl"
.sidebar { .sidebar {
position: fixed;
width: $sidebar-width; width: $sidebar-width;
box-sizing: border-box; box-sizing: border-box;
.home-sidebar-container { .sidebar-container {
.home-sidebar-item { .sidebar-item {
margin-bottom: $component-interspace; margin-bottom: $component-interspace;
&:last-child { &:last-child {
@ -17,3 +18,17 @@
} }
} }
.sidebar-post {
position: fixed;
}
.sidebar-other {
if (!hexo-config('magic.sidebar.fixed')) {
position: absolute;
} else {
position: fixed;
}
}

2
source/css/layout/_partial/site-info.styl
View File

@ -6,7 +6,7 @@
box-sizing: border-box; box-sizing: border-box;
background: var(--background-color); background: var(--background-color);
magic-container(1.02, 30px); magic-container(1.02, 20px);
.justify-center { .justify-center {
display: flex; display: flex;

4
source/css/layout/common/animated.styl
View File

@ -31,9 +31,7 @@ the-transition-ease-out() {
@keyframes fade-in-down { @keyframes fade-in-down {
0% { 0% {
opacity: 0; opacity: 0;
//transform: translateY(-20px); transform: translateY(-20px);
//transform: translateX(-20px);
transform: translateX(20px);
} }
100% { 100% {

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

@ -15,6 +15,7 @@
transition(); transition();
} }
.page-middle { .page-middle {
width: 100%; width: 100%;
display: flex; display: flex;
@ -51,6 +52,7 @@
} }
.sidebar-tools { .sidebar-tools {
position: fixed; position: fixed;
top: $header-height + $component-interspace; top: $header-height + $component-interspace;
@ -107,9 +109,7 @@
} }
.page-top-shrink { .page-top-shrink {
transition(); transition();
padding-top: $header-shrink-height; padding-top: $header-shrink-height;
.page-top { .page-top {

4
source/css/style.styl
View File

@ -21,4 +21,6 @@
@import "layout/common/codeblock/copy-code.styl" @import "layout/common/codeblock/copy-code.styl"
@import "layout/_partial/sidebar.styl" @import "layout/_partial/sidebar.styl"
@import "layout/_partial/site-info.styl" @import "layout/_partial/site-info.styl"
@import "layout/_partial/sidebar-category.styl" @import "layout/_partial/sidebar-categories.styl"
@import "layout/_partial/sidebar-tags.styl"
@import "layout/_partial/sidebar-tagcloud.styl"