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

[opt] style & menu

This commit is contained in:
xaoxuu 2024-01-17 14:07:30 +08:00
parent 016d75f1ba
commit 36a27d7572
17 changed files with 120 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@ -448,7 +448,7 @@ style:
border-radius:
card: 12px
block: 12px
bar: 8px
bar: 12px
image: 6px
color:
# 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）

2
layout/404.ejs
View File

@ -1,6 +1,6 @@
<%
page.comment_title = '';
page.header = 'auto';
page.header = false;
page.robots = 'none';
%>
<article class='md-text error-page'>

3
layout/_partial/main/header/index.ejs
View File

@ -1,3 +0,0 @@
<% if (page.header != 'auto' && page.header != false) { %>
<%- partial('../../sidebar/logo', {logo: theme.logo, where: 'main'}) %>
<% } %>

6
layout/_partial/main/navbar/breadcrumb.ejs
View File

@ -95,10 +95,10 @@ function layoutDiv() {
nodes.push('/');
// menu_id
el += '<span class="sep"></span>';
if (page.menu_id && theme.menu[page.menu_id] && md_link(theme.menu[page.menu_id])) {
let url = url_for(md_link(theme.menu[page.menu_id]));
if (page.menu_id && theme.menu[page.menu_id]?.url) {
let url = url_for(theme.menu[page.menu_id]?.url);
nodes.push(url);
el += '<a class="cap breadcrumb" id="menu" href="' + url + '">' + __(md_text(theme.menu[page.menu_id])) + '</a>';
el += '<a class="cap breadcrumb" id="menu" href="' + url + '">' + __(theme.menu[page.menu_id]?.title) + '</a>';
} else {
let url = url_for(theme.site_tree.wiki.base_dir);
nodes.push(url);

36
layout/_partial/sidebar/index.ejs
View File

@ -6,7 +6,10 @@ if (page.sidebar == null) {
sidebar = site_tree.home.sidebar
} else if (is_category() || is_tag() || is_archive() || ['categories', 'tags', 'archives'].includes(page.layout)) {
sidebar = site_tree.blog.sidebar
} else if (page.layout === 'index_topic' || page.layout === 'topic') {
} else if (page.layout === 'index_topic') {
// 专栏列表页等同于博客列表页
sidebar = site_tree.blog.sidebar
} else if (page.layout === 'topic') {
sidebar = site_tree.topic.sidebar
} else if (page.layout === 'index_wiki' || page.layout === 'wiki') {
sidebar = site_tree.wiki.sidebar
@ -32,7 +35,6 @@ if (page.sidebar == null) {
page.sidebar = sidebar
}
console.log('s', sidebar);
// parse array string
if (typeof page.sidebar == 'string') {
page.sidebar = page.sidebar.replace(/ /g, '').split(',');
@ -119,35 +121,7 @@ function layoutFooterDiv() {
}
function layoutLogo() {
var logo = theme.logo
if (page.logo) {
logo = page.logo
} else if (page.wiki && page.layout == 'wiki' && theme.wiki.tree[page.wiki]) {
const proj = theme.wiki.tree[page.wiki]
var l = proj.logo
if (l) {
logo = l
} else if (proj.name || proj.icon) {
logo = {
icon: proj.icon || theme.default.project,
title: `[${proj.name || proj.title}](${url_for(proj.homepage?.path || '')})`,
subtitle: proj.subtitle
}
}
} else if (page.topic && page.layout == 'topic' && theme.topic.tree[page.topic]) {
const topic = theme.topic.tree[page.topic]
var l = topic.logo
if (l) {
logo = l
} else if (topic.name || topic.icon) {
logo = {
icon: topic.icon || theme.default.topic,
title: `[${topic.name || topic.title}](${url_for(topic.homepage?.path || '')})`,
subtitle: topic.subtitle
}
}
}
return partial('logo', {logo: logo, where: 'sidebar'})
return partial('logo', {where: 'sidebar'})
}
function layoutNavArea() {

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

@ -1,4 +1,33 @@
<%
var logo = theme.logo
if (page.logo) {
logo = Object.assign({}, logo, page.logo)
} else if (page.wiki && page.layout == 'wiki' && theme.wiki.tree[page.wiki]) {
const proj = theme.wiki.tree[page.wiki]
var l = proj.logo
if (l) {
logo = l
} else if (proj.name || proj.icon) {
logo = {
icon: proj.icon || theme.default.project,
title: `[${proj.name || proj.title}](${url_for(proj.homepage?.path || '')})`,
subtitle: proj.subtitle
}
}
} else if (page.topic && page.layout == 'topic' && theme.topic.tree[page.topic]) {
const topic = theme.topic.tree[page.topic]
var l = topic.logo
if (l) {
logo = l
} else if (topic.name || topic.icon) {
logo = {
icon: topic.icon || theme.default.topic,
title: `[${topic.name || topic.title}](${url_for(topic.homepage?.path || '')})`,
subtitle: topic.subtitle
}
}
}
// logo.icon, logo.title, logo.subtitle, logo.url
function layoutTitle(main, url, sub) {
var el = ''
@ -18,6 +47,14 @@ function layoutTitle(main, url, sub) {
}
function layoutDiv() {
if (where == 'main') {
if (page.layout == 'wiki' && page.menu_id == 'wiki') {
return ''
}
if (page.header == false) {
return
}
}
var el = ''
el += `<header class="header${where == 'main' ? ' mobile-only' : ''}">`
el += `<div class="logo-wrap">`

12
layout/_partial/sidebar/menu.ejs
View File

@ -7,8 +7,16 @@ function layoutDiv() {
if (item == undefined || item.length == 0) {
continue
}
el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" href="${url_for(md_link(item))}">`
el += __(md_text(item))
el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" title="${item.title}" href="${url_for(item.url)}">`
if (item.icon?.length > 0) {
if (item.icon.startsWith('<img')) {
el += item.icon
} else {
el += `<img no-lazy src="${item.icon}">`
}
} else {
el += `<span>${__(item.title)}</span>`
}
el += `</a>`
}
el += `</nav>`

2
layout/archive.ejs
View File

@ -4,7 +4,7 @@ if (page.menu_id == undefined) {
page.menu_id = 'post';
}
if (page.author) {
page.header = 'auto';
page.header = false;
}
function layoutArchiveList() {
var el = ''

60
layout/layout.ejs
View File

@ -1,25 +1,35 @@
<!DOCTYPE html>
<html lang='<%- page.lang %>'>
<%- partial('_partial/head') %>
<body>
<%- partial('_partial/cover/index') %>
<div class='l_body' id='start'>
<aside class='l_left' layout='<%- page.layout %>'>
<img no-lazy class="sidebar-bg" src="<%- theme.default.sidebar %>">
<div class="sidebar-container blur">
<%- partial('_partial/sidebar/index') %>
</div>
</aside>
<div class='l_main<%- page.content ? "" : " list" %>' id="main">
<%- partial('_partial/main/header/index') %>
<%- body %>
<%- partial('_partial/main/footer') %>
<%- partial('_partial/menubtn') %>
<div class="main-mask" onclick="sidebar.toggle()"></div>
</div>
</div>
<div class='scripts'>
<%- partial('_partial/scripts/index') %>
</div>
</body>
</html>
<%
var page_type = 'index'
if (['post', 'page', 'wiki', 'topic', null].includes(page.layout)) {
if (!page.nav_tabs) {
page_type = 'content'
}
}
var html = `<!DOCTYPE html>`
html += `<html lang="${page.lang}">`
html += partial('_partial/head')
html += `<body>`
html += partial('_partial/cover/index')
html += `<div class="l_body ${page_type}" id="start" layout="page.layout">`
html += `<aside class="l_left">`
html += `<img no-lazy class="sidebar-bg" src="${theme.default.sidebar}">`
html += `<div class="sidebar-container blur">`
html += partial('_partial/sidebar/index')
html += `</div>`
html += `</aside>`
html += `<div class="l_main" id="main">`
html += partial('_partial/sidebar/logo', {where: 'main'})
html += body
html += partial('_partial/main/footer')
html += partial('_partial/menubtn')
html += `<div class="main-mask" onclick="sidebar.toggle()"></div>`
html += `</div>`
html += `</div>`
html += `<div class="scripts">`
html += partial('_partial/scripts/index')
html += `</div>`
html += `</body>`
html += `</html>`
%>
<%- html %>

2
layout/post.ejs
View File

@ -3,7 +3,7 @@ if (page.menu_id == undefined) {
page.menu_id = 'post';
}
if (page.header == undefined) {
page.header = 'auto';
page.header = false;
}
function layoutTitle() {
const title = page.h1 != null ? page.h1 : page.title;

7
source/css/_layout/main.styl
View File

@ -13,6 +13,7 @@
.logo-wrap
margin: 0
.l_main.list
@media screen and (max-width: $device-mobile-max)
padding-top: 0
.l_body.index
.l_main
@media screen and (max-width: $device-mobile-max)
padding-top: 0

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

@ -2,7 +2,7 @@
display: flex
align-items: center
overflow: hidden
height: 48px
min-height: 48px
img
object-fit: cover
.icon

20
source/css/_layout/sidebar/menu.styl
View File

@ -13,10 +13,8 @@
.nav-item
box-sizing: border-box
text-overflow: ellipsis
word-break: keep-all
width: 100%
line-height: 40px
min-height: 40px
border-radius: $border-bar
font-size: $fs-15
font-weight: 500
@ -28,9 +26,25 @@
-webkit-backdrop-filter: saturate(200%) blur(var(--blur-px))
trans1 background
position: relative
display: flex
flex-direction: column
align-items: center
justify-content: center
img
height: 32px
object-fit: contain
opacity 0.5
filter: grayscale(100%) brightness(0.4)
trans1 all
span
text-overflow: ellipsis
word-break: keep-all
&.active, &:hover
color: var(--text-p1)
background: var(--alpha100)
img
opacity: 1
filter: unset
&.active:after
content: ''
position absolute

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

@ -9,8 +9,6 @@
@media screen and (min-width: $device-mobile-max)
>.widgets:first-child>.widget-wrapper:first-child
margin-top: "calc(2 * %s)" % var(--gap-l)
@media screen and (max-width: $device-mobile-max)
height: 100vh
.l_left
.sidebar-bg

9
source/css/_layout/tag-plugins/banner.styl
View File

@ -111,14 +111,5 @@
img.bg
transform: scale(1.01)
.l_main.list .tag-plugin.banner
background: var(--block-hover)
.content .top
margin-top: 1.5rem
margin: 0 1rem
@media screen and (max-width: $device-mobile)
margin: 0
border-radius: 0
.tag-plugin.banner .navbar a.active
blur-effect()

2
source/css/_layout/tag-plugins/toc.styl
View File

@ -1,7 +1,7 @@
details.toc
background: var(--block)
border: 1px solid var(--block-border)
border-radius: $border-bar
border-radius: $border-card
overflow: hidden
color: var(--text-p2)
summary

6
source/css/_layout/widgets/toc_wiki.styl
View File

@ -3,7 +3,7 @@
// 其它分页链接
.widget-wrapper.toc.multi .doc-tree
border-radius: $border-bar
border-radius: $border-card
overflow: hidden
a.doc-tree-link
color: var(--text-p1)
@ -40,8 +40,8 @@
padding: 4px 10px
border: 1px solid var(--alpha50)
background: var(--alpha20)
border-bottom-left-radius: $border-bar
border-bottom-right-radius: $border-bar
border-bottom-left-radius: $border-card
border-bottom-right-radius: $border-card
a.toc-link:before
left: -2px
width: 4px