xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化 wiki 侧边栏

This commit is contained in:
xaoxuu 2021-06-26 15:02:32 +08:00
parent dc36d7eaf5
commit 107be3d642
11 changed files with 161 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
languages/en.yml
View File

@ -3,7 +3,7 @@ btn:
blog: Blog
wiki: Wiki
recent_publish: Recent
all_wiki: All
all_wiki: All Products
category: Category
categories: Categories
tag: Tag

27
layout/_partial/sidebar/header.ejs
View File

@ -1,6 +1,7 @@
<%
function layoutMainMenu() {
var el = '';
el += partial('logo');
el += '<nav class="menu dis-select">'
for (let id of Object.keys(theme.sidebar.menu)) {
let item = theme.sidebar.menu[id];
@ -18,8 +19,26 @@ function layoutMainMenu() {
el += '</nav>';
return el;
}
function layoutWikiMenu() {
var el = '';
el += partial('logo');
return el;
}
function layoutDiv() {
var el = '';
el += '<header class="header';
if (where == 'main') {
el += ' mobile-only';
}
el += '">';
if (page.layout === 'wiki') {
el += layoutWikiMenu();
} else {
el += layoutMainMenu();
}
el += '</header>';
return el;
}
%>
<header class='header<%- where == "main" ? " mobile-only" : "" %>'>
<%- partial('logo') %>
<%- layoutMainMenu() %>
</header>
<%- layoutDiv() %>

66
layout/_partial/sidebar/logo.ejs
View File

@ -1,15 +1,51 @@
<div class='logo-wrap'>
<% if (md_text(theme.sidebar.logo.avatar)) { %>
<a class='avatar' href='<%- url_for(md_link(theme.sidebar.logo.avatar) || "/") %>'>
<% if (theme.style.animated_avatar.animate) { %>
<div class='bg' style='opacity:0;background-image:url("<%- theme.style.animated_avatar.background %>");'></div>
<% } %>
<img no-lazy class='avatar' src='<%- md_text(theme.sidebar.logo.avatar) %>'/>
</a>
<% } %>
<% if (md_text(theme.sidebar.logo.title)) { %>
<a class='title' href='<%- url_for(md_link(theme.sidebar.logo.title) || "/") %>'>
<%- md_text(theme.sidebar.logo.title) %>
</a>
<% } %>
</div>
<%
var wiki;
if (page.layout === 'wiki') {
site.pages.filter(function (p) {
return p.layout == 'wiki' && p.wiki == page.wiki && p.description
}).limit(1).each(function(p) {
wiki = p;
});
}
function layoutDiv() {
var el = '';
if (page.layout === 'wiki') {
el += '<div class="logo-wrap wiki">';
// all products
el += '<a style="filter: grayscale(100%)" class="wiki-home cap" href="' + url_for(config.wiki_dir) + '">';
el += '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/arrow/f049bbd4e88ec.svg"/>';
el += __('btn.all_wiki');
el += '</a>';
// this product
if (wiki === undefined) {
if (page.menu_id && theme.sidebar.menu[page.menu_id] && md_link(theme.sidebar.menu[page.menu_id])) {
wiki = new Object();
wiki.path = md_link(theme.sidebar.menu[page.menu_id]);
wiki.wiki = __(md_text(theme.sidebar.menu[page.menu_id]));
}
}
if (wiki !== undefined) {
el += '<a class="title" href="' + url_for(wiki.path) + '">';
el += wiki.wiki;
el += '</a>';
}
} else {
el += '<div class="logo-wrap">';
if (md_text(theme.sidebar.logo.avatar)) {
el += '<a class="avatar" href="' + url_for(md_link(theme.sidebar.logo.avatar) || "/") + '">';
el += '<img no-lazy class="avatar" src="' + md_text(theme.sidebar.logo.avatar) + '">';
el += '</a>';
}
if (md_text(theme.sidebar.logo.title)) {
el += '<a class="title" href="' + url_for(md_link(theme.sidebar.logo.title) || "/") + '">';
el += md_text(theme.sidebar.logo.title);
el += '</a>';
}
}
el += '</div>';
return el;
}
%>
<%- layoutDiv() %>

16
layout/_partial/sidebar/widgets/toc.ejs
View File

@ -25,15 +25,13 @@ function layoutDiv(fallback) {
if (t.length > 0) {
el += '<div class="widget-wrap" id="toc">';
el += '<div class="widget-header h4 dis-select">';
el += '<span class="name">';
if (page.toc_title) {
el += page.toc_title;
} else if (t == 'wiki') {
el += page.wiki || item.wiki;
} else {
el += __("meta.toc");
}
el += '</span>';
if (page.toc_title) {
el += '<span class="name">' + page.toc_title + '</span>';
} else if (t == 'wiki') {
el += '';
} else {
el += '<span class="name">' + __("meta.toc") + '</span>';
}
el += '</div>';
el += '<div class="widget-body fs14 ' + t + '">';
if (page.layout == "wiki" && page.wiki) {

69
layout/_partial/sidebar/widgets/wiki_more.ejs
View File

@ -1,28 +1,41 @@
<% if (page.layout == 'wiki') { %>
<% site.pages.filter(function (p) { %>
<% return p.layout == 'index' && p.title && p.wiki && p.wiki.includes(page.wiki) %>
<% }).limit(1).each(function(current_group) { %>
<% if (current_group.wiki.length > 1) { %>
<div class='widget-wrap' id='related'>
<div class='widget-header h4 dis-select'>
<span class='name'>更多<%- current_group.title %></span>
</div>
<div class='widget-body fs14'>
<% current_group.wiki.forEach((wiki, i) => { %>
<% site.pages.filter(function (p) { %>
<% return p.wiki == wiki && p.wiki != page.wiki && p.description %>
<% }).each(function(post) { %>
<% if (post.wiki || post.title) { %>
<div class='post-title'>
<a href="<%= url_for(post.link || post.path) %>">
<%- post.wiki || post.title %>
</a>
</div>
<% } %>
<% }); %>
<% }); %>
</div>
</div>
<% } %>
<% }); %>
<% } %>
<%
function layoutDiv() {
if (page.layout !== "wiki") {
return '';
}
var current_group;
site.pages.filter(function (p) {
return p.layout == "index" && p.title && p.wiki && p.wiki.includes(page.wiki)
}).limit(1).each(function(p) {
current_group = p;
});
if (current_group === undefined || current_group.wiki.length < 1) {
return '';
}
var el = '';
el += '<div class="widget-wrap" id="related">';
el += '<div class="widget-header h4 dis-select">';
el += '<span class="name">更多' + current_group.title + '</span>';
el += '</div>';
el += '<div class="widget-body fs14">';
current_group.wiki.forEach((wiki, i) => {
site.pages.filter(function (p) {
return p.wiki == wiki && p.wiki != page.wiki && p.description
}).each(function(post) {
if (post.wiki || post.title) {
el += '<div class="line"></div>'
el += '<a class="reveal wiki" href="' + url_for(post.link || post.path) + '">';
el += post.wiki || post.title;
el += '<div class="excerpt">';
el += post.description;
el += '</div>';
el += '</a>';
}
});
});
el += '</div>';
el += '</div>';
return el;
}
%>
<%- layoutDiv() %>

2
source/css/_layout/md.styl
View File

@ -78,7 +78,7 @@ article.md code
font-size: 85%
background: var(--block)
padding: .2em .4em
border-radius: 2px
border-radius: 4px
article.md pre
-webkit-font-smoothing: auto
-moz-osx-font-smoothing: auto

1
source/css/_layout/partial/navbar.styl
View File

@ -23,7 +23,6 @@ nav.cap
&.active, &:hover
background: var(--block-hover)
color: var(--text-p1)
box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1)
@media screen and (max-width: $device-tablet)

5
source/css/_layout/partial/paginator.styl
View File

@ -18,9 +18,9 @@
color: var(--text-p3)
padding: 1rem
line-height: 0
filter: grayscale(100%)
img
height: 1rem
filter: grayscale(100%)
&.disable
pointer-events: none
opacity: 0.25
@ -30,5 +30,4 @@
border-left: 1px solid var(--block-border)
a.paginator:hover
background: var(--card)
img
filter: grayscale(0%)
filter: unset

2
source/css/_layout/sidebar/footer.styl
View File

@ -20,7 +20,7 @@
&:hover
color: $color-hover
z-index: 1
filter: grayscale(0%)
filter: unset
transform: translateY(-1px)
background: linear-gradient(145deg, #ddd, #fff)
box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff

36
source/css/_layout/sidebar/sidebar.styl
View File

@ -9,7 +9,7 @@
height: "calc(100% - 2 * %s)" % var(--gap-l)
.logo-wrap
margin: 1rem 0
margin: 1rem 0 .5rem
display: flex
align-items: center
color: var(--text-p0)
@ -59,8 +59,6 @@
animation: spin infinite 1s
animation-timing-function: linear
.title
font-size: 1.75rem
font-weight: 900
@ -68,8 +66,23 @@
line-height: 1;
font-family: $ff-logo
.logo-wrap.wiki
flex-direction: column
align-items: flex-start
a.wiki-home
margin-bottom: .5rem
color: var(--text-p2)
img
height: .9em
margin-right: .5rem
&:hover
color: $color-hover
filter: unset !important
nav.menu
margin-top: 0
margin: 1rem 0 .5rem
background: var(--block)
border-radius: 6px
display: flex
@ -120,6 +133,8 @@ nav.menu
background: var(--site-bg)
padding: 2px 0
z-index 1
&:empty
display: none
.cap-action
hover-block 4px 4px
line-height: 0
@ -140,7 +155,7 @@ nav.menu
margin-bottom: 0.5em
>a:hover
text-decoration: underline
.widget-wrap#recent .widget-body
.widget-wrap#recent .widget-body, .widget-wrap#related .widget-body
border: 1px solid var(--block-border)
border-radius: $border-block
background: var(--block)
@ -163,4 +178,15 @@ nav.menu
&:hover
color: $color-hover
background: var(--card)
&.wiki
font-weight: 700
div.excerpt
margin-top: .5rem
color: var(--text-p3)
font-size: $fs-12
font-weight: 400
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 3

2
source/css/_layout/sidebar/toc.styl
View File

@ -65,6 +65,8 @@
border-bottom-right-radius: 4px
font-size: $fs-12
font-weight: 500
position sticky
top: 0
&.active
color: var(--text-p2)
font-size: $fs-14