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
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
enable: true
# Automatically add list number to toc.
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.
expand_all: false
# Maximum heading depth of generated toc.
max_depth: 6
expand_all: true
# magic theme style
magic:
enable: true
sidebar:
enable: false
enable: true
fixed: true
position: right
# sidebar tools
side-tools:
enable: true
position: right
# back to top
back2top:
enable: true
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,
{
class: 'nav',
list_number: theme.toc.number,
max_depth: theme.toc.max_depth
list_number: theme.toc.number
}
) %>
</div>

35
layout/_partial/sidebar.ejs
View File

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

3
layout/page.ejs
View File

@ -7,7 +7,7 @@
<main class="main-content normal-code-theme">
<div class="main-content-left">
<div class="main-content-left fade-in-down-animation">
<% if (is_home()) { %>
<%- partial('home-content') %>
@ -33,6 +33,7 @@
<%- partial('_partial/sidebar') %>
</div>
<% } %>
</main>
<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
background: var(--background-color);
magic-container(1.02, 30px);
magic-container(1.02, 20px);
.category-label {
margin-bottom: 10px;
padding-left: 10px;
margin-bottom: 12px;
padding-bottom: 12px;
//padding-left: 10px;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid var(--border-color);
&::after {
/*&::after {
content: '';
position: absolute;
top: 20px;
@ -23,9 +25,10 @@
background: #333;
}
*/
}
.category-list {
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 {
}
}
}
}

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

@ -5,12 +5,12 @@
.post-toc-wrap {
width: 100%;
height: 100%;
font-size: 0.88em;
font-size: 0.92em;
box-sizing: border-box;
background: var(--background-color);
if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
magic-container(1.02, 30px);
magic-container(1.02, 20px);
}
.post-toc {
@ -31,7 +31,7 @@
a {
transition-property: all;
//transition();
transition();
}
}
@ -39,11 +39,8 @@
line-height: 1.8;
overflow: hidden;
text-overflow: ellipsis;
if (!hexo-config('toc.wrap')) {
white-space: nowrap;
}
}
.nav {
.nav-child {
@ -63,16 +60,11 @@
}
.active > a {
border-bottom-color: var(--primary-color);
color: var(--primary-color);
}
.active-current > a {
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/magic-theme.styl"
.sidebar {
position: fixed;
width: $sidebar-width;
box-sizing: border-box;
.home-sidebar-container {
.sidebar-container {
.home-sidebar-item {
.sidebar-item {
margin-bottom: $component-interspace;
&: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;
background: var(--background-color);
magic-container(1.02, 30px);
magic-container(1.02, 20px);
.justify-center {
display: flex;

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

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

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

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

4
source/css/style.styl
View File

@ -21,4 +21,6 @@
@import "layout/common/codeblock/copy-code.styl"
@import "layout/_partial/sidebar.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"