[opt] sidebar -> leftbar

This commit is contained in:
xaoxuu 2024-02-04 21:09:44 +08:00
parent fa5f4537ba
commit e1d1d8451d
11 changed files with 62 additions and 65 deletions

View File

@ -62,12 +62,12 @@ site_tree:
# -- 列表类页面 -- #
# 主页配置
home:
sidebar: welcome, recent, timeline
leftbar: welcome, recent, timeline
# 博客列表页配置
index_blog:
base_dir: blog # 只影响自动生成的页面路径
menu_id: post # 未在 front-matter 中指定 menu_id 时layout 为 post 的页面默认使用这里配置的 menu_id
sidebar: welcome, recent, timeline # for categories/tags/archives
leftbar: welcome, recent, timeline # for categories/tags/archives
nav_tabs: # 近期发布 分类 标签 专栏 归档 and ...
# '朋友文章': /friends/rss/
# 博客专栏列表页配置
@ -78,34 +78,34 @@ site_tree:
index_wiki:
base_dir: wiki # 只影响自动生成的页面路径
menu_id: wiki # 未在 front-matter 中指定 menu_id 时layout 为 wiki 的页面默认使用这里配置的 menu_id
sidebar: toc, ghissues, related, recent # for wiki
leftbar: toc, ghissues, related, recent # for wiki
nav_tabs:
# 'more': https://github.com/xaoxuu
# -- 内容类页面 -- #
# 博客文章内页配置
post:
menu_id: post # 未在 front-matter 中指定 menu_id 时layout 为 post 的页面默认使用这里配置的 menu_id
sidebar: toc, related, ghrepo, ghissues, recent # for pages using 'layout:post'
leftbar: toc, related, ghrepo, ghissues, recent # for pages using 'layout:post'
# 博客专栏文章内页配置
topic:
menu_id: post
# 文档内页配置
wiki:
menu_id: wiki # 未在 front-matter 中指定 menu_id 时layout 为 wiki 的页面默认使用这里配置的 menu_id
sidebar: toc, ghissues, related, recent # for wiki
leftbar: toc, ghissues, related, recent # for wiki
# 作者信息配置
author:
base_dir: author # 只影响自动生成的页面路径
menu_id: post
sidebar: recent, timeline
leftbar: recent, timeline
# 错误页配置
error_page:
menu_id: post
'404': '/404.html'
sidebar: recent, timeline
leftbar: recent, timeline
# 其它自定义页面配置 layout: page
page:
sidebar: toc, recent, timeline
leftbar: toc, recent, timeline
@ -521,11 +521,9 @@ style:
gradient: # https://webgradients.com/
start: 'linear-gradient(to right, hsl(215, 95%, 64%), hsl(195, 95%, 60%), hsl(165, 95%, 56%), hsl(165, 95%, 56%), hsl(195 95% 60%), hsl(215, 95%, 64%))'
search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
sidebar:
sticky: false # true/false 屏幕足够宽时,侧边栏是否吸附在正文区域旁边
leftbar:
# 可以设置:纯色/渐变色/图片作为背景
# background: var(--sidebar-bg)
# background-image: 'linear-gradient(to bottom, var(--sidebar-bg), var(--sidebar-bg))'
# background: var(--leftbar-bg)
background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)
blur-px: 100px
blur-bg: var(--alpha60)

View File

@ -21,7 +21,7 @@ default:rss: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" view
default:bookmark.active: <svg class="active-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M21 11.098v4.993c0 3.096 0 4.645-.734 5.321c-.35.323-.792.526-1.263.58c-.987.113-2.14-.907-4.445-2.946c-1.02-.901-1.529-1.352-2.118-1.47a2.225 2.225 0 0 0-.88 0c-.59.118-1.099.569-2.118 1.47c-2.305 2.039-3.458 3.059-4.445 2.945a2.238 2.238 0 0 1-1.263-.579C3 20.736 3 19.188 3 16.091v-4.994C3 6.81 3 4.666 4.318 3.333C5.636 2 7.758 2 12 2c4.243 0 6.364 0 7.682 1.332C21 4.665 21 6.81 21 11.098" opacity=".5"/><path fill="currentColor" d="M9 5.25a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5z"/></svg>
# 侧边栏弹出按钮
default:sidebar: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 11c0-3.771 0-5.657 1.172-6.828C4.343 3 6.229 3 10 3h4c3.771 0 5.657 0 6.828 1.172C22 5.343 22 7.229 22 11v2c0 3.771 0 5.657-1.172 6.828C19.657 21 17.771 21 14 21h-4c-3.771 0-5.657 0-6.828-1.172C2 18.657 2 16.771 2 13z"/><path id="sep" stroke-linecap="round" d="M5.5 10h6m-5 4h4m4.5 7V3"/></g></svg>
default:leftbar: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 11c0-3.771 0-5.657 1.172-6.828C4.343 3 6.229 3 10 3h4c3.771 0 5.657 0 6.828 1.172C22 5.343 22 7.229 22 11v2c0 3.771 0 5.657-1.172 6.828C19.657 21 17.771 21 14 21h-4c-3.771 0-5.657 0-6.828-1.172C2 18.657 2 16.771 2 13z"/><path id="sep" stroke-linecap="round" d="M5.5 10h6m-5 4h4m4.5 7V3"/></g></svg>
default:pin: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.068l-3.771 3.905c-.54.559-.81.839-1.04.935c-.52.22-1.099.032-1.373-.448c-.12-.21-.158-.59-.232-1.35c-.043-.43-.064-.644-.128-.824a1.433 1.433 0 0 0-.835-.864c-.173-.067-.38-.089-.795-.133c-.734-.077-1.101-.116-1.305-.24c-.463-.284-.646-.883-.433-1.422c.094-.237.364-.517.904-1.076L5.456 12l1.238-1.238zl5.306-5.306L18.544 12l2.464 2.55c.54.56.81.84.904 1.076c.213.54.03 1.139-.433 1.423c-.204.124-.57.163-1.305.24c-.414.044-.622.066-.795.133c-.389.149-.69.462-.835.864c-.064.18-.085.394-.128.823c-.075.76-.112 1.14-.232 1.351c-.274.48-.853.669-1.374.448c-.228-.096-.498-.376-1.038-.935z" opacity=".5"/><path fill="currentColor" fill-rule="evenodd" d="M12 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m0-10c-.284 0-.474.34-.854 1.023l-.098.176c-.108.194-.162.29-.246.354c-.085.064-.19.088-.4.135l-.19.044c-.738.167-1.107.25-1.195.532c-.088.283.164.577.667 1.165l.13.152c.143.167.215.25.247.354c.032.104.021.215 0 .438l-.02.203c-.076.785-.114 1.178.115 1.352c.23.174.576.015 1.267-.303l.178-.082c.197-.09.295-.135.399-.135c.104 0 .202.045.399.135l.178.082c.691.319 1.037.477 1.267.303c.23-.174.191-.567.115-1.352l-.02-.203c-.021-.223-.032-.334 0-.438c.032-.103.104-.187.247-.354l.13-.152c.503-.588.755-.882.667-1.165c-.088-.282-.457-.365-1.195-.532l-.19-.044c-.21-.047-.315-.07-.4-.135c-.084-.064-.138-.16-.246-.354l-.098-.176C12.474 6.34 12.284 6 12 6" clip-rule="evenodd"/></svg>
default:calendar: <svg style="margin-bottom:2px" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M6.94 2c.416 0 .753.324.753.724v1.46c.668-.012 1.417-.012 2.26-.012h4.015c.842 0 1.591 0 2.259.013v-1.46c0-.4.337-.725.753-.725s.753.324.753.724V4.25c1.445.111 2.394.384 3.09 1.055c.698.67.982 1.582 1.097 2.972L22 9H2v-.724c.116-1.39.4-2.302 1.097-2.972c.697-.67 1.645-.944 3.09-1.055V2.724c0-.4.337-.724.753-.724"/><path fill="currentColor" d="M22 14v-2c0-.839-.004-2.335-.017-3H2.01c-.013.665-.01 2.161-.01 3v2c0 3.771 0 5.657 1.172 6.828C4.343 22 6.228 22 10 22h4c3.77 0 5.656 0 6.828-1.172C22 19.658 22 17.772 22 14" opacity=".5"/><path fill="currentColor" d="M18 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0"/></svg>
default:category: <svg style="margin-bottom:1px" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77c.079.07.154.145.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14z" opacity=".5"/><path fill="currentColor" d="M20 6.238c0-.298-.005-.475-.025-.63a3 3 0 0 0-2.583-2.582C17.197 3 16.965 3 16.5 3H9.988c.116.104.247.234.462.45L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .849.352C14.098 6 14.675 6 15.829 6h.373c1.78 0 2.957 0 3.798.238"/><path fill="currentColor" fill-rule="evenodd" d="M12.25 10a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg>

View File

@ -1,5 +1,5 @@
<div class='float-panel mobile-only blur' style='display:none'>
<button type='button' class='sidebar-toggle mobile' onclick='sidebar.toggle()'>
<%- icon('default:sidebar') %>
<button type='button' class='leftbar-toggle mobile' onclick='sidebar.toggle()'>
<%- icon('default:leftbar') %>
</button>
</div>

View File

@ -3,49 +3,49 @@
const wiki = theme.wiki.tree[page.wiki]
const topic = theme.topic.tree[page.topic]
if (page.sidebar == null) {
if (page.leftbar == null) {
const { site_tree } = theme
var sidebar
if (is_home()) {
sidebar = site_tree.home.sidebar
sidebar = site_tree.home.leftbar
} else if (is_category() || is_tag() || is_archive() || ['categories', 'tags', 'archives'].includes(page.layout)) {
sidebar = site_tree.index_blog.sidebar
sidebar = site_tree.index_blog.leftbar
} else if (page.layout === 'index_topic') {
// 专栏列表页等同于博客列表页
sidebar = site_tree.index_blog.sidebar
sidebar = site_tree.index_blog.leftbar
} else if (page.topic?.length > 0) {
// 专栏文章内页等同于普通文章内页
sidebar = site_tree.post.sidebar
sidebar = site_tree.post.leftbar
} else if (page.layout === 'index_wiki') {
sidebar = site_tree.index_wiki.sidebar
sidebar = site_tree.index_wiki.leftbar
} else if (page.wiki?.length > 0) {
sidebar = site_tree.wiki.sidebar
sidebar = site_tree.wiki.leftbar
} else if (page.layout === '404') {
sidebar = site_tree.error_page.sidebar
sidebar = site_tree.error_page.leftbar
} else if (page.layout === 'page') {
sidebar = site_tree.page.sidebar
sidebar = site_tree.page.leftbar
} else if (page.layout === 'post') {
sidebar = site_tree.post.sidebar
sidebar = site_tree.post.leftbar
} else if (page.layout == null) {
sidebar = site_tree.page.sidebar
sidebar = site_tree.page.leftbar
} else {
sidebar = []
}
if (topic?.sidebar) {
sidebar = topic.sidebar
if (topic?.leftbar) {
sidebar = topic.leftbar
}
if (wiki?.sidebar) {
sidebar = wiki.sidebar
if (wiki?.leftbar) {
sidebar = wiki.leftbar
}
page.sidebar = sidebar
page.leftbar = sidebar
}
// parse array string
if (typeof page.sidebar == 'string') {
page.sidebar = page.sidebar.replace(/ /g, '').split(',');
if (typeof page.leftbar == 'string') {
page.leftbar = page.leftbar.replace(/ /g, '').split(',');
}
function layoutTitle(main, url, sub) {
var el = '';
@ -66,8 +66,8 @@ function layoutTitle(main, url, sub) {
function layoutWidgets() {
var el = '';
el += '<div class="widgets">';
if (page.sidebar) {
page.sidebar.forEach((w, i) => {
if (page.leftbar) {
page.leftbar.forEach((w, i) => {
let name = ''
let widget = {}
if (typeof w == 'string') {

View File

@ -44,7 +44,7 @@ html += `<html lang="${page.lang}">`
html += partial('_partial/cover/index')
html += `<div class="l_body ${page_type} ${article_type}" id="start" layout="${page.layout}" ${indent ? 'text-indent' : ''}>`
html += `<aside class="l_left">`
html += `<div class="sidebar-container${theme.style.sidebar?.blur ? ' sidebar-blur' : ''}">`
html += `<div class="leftbar-container${theme.style.leftbar?.blur ? ' leftbar-blur' : ''}">`
html += partial('_partial/sidebar/index')
html += `</div>`
html += `</aside>`

View File

@ -16,7 +16,7 @@ hexo.extend.generator.register('author', function (locals) {
layout: ['archive'],
data: {
author: author,
sidebar: site_tree.author.sidebar,
leftbar: site_tree.author.leftbar,
menu_id: site_tree.author.menu_id
}
})

View File

@ -27,7 +27,7 @@
--blur-bg: alpha(#000, .4)
//
.sidebar-toggle.mobile
.leftbar-toggle.mobile
cursor: pointer
color: var(--text)
background: none
@ -42,7 +42,7 @@
width: auto
height: 28px
//
.l_body.mobile.sidebar .sidebar-toggle.mobile
.l_body.mobile.leftbar .leftbar-toggle.mobile
svg g
fill: currentColor
fill-opacity: 0.3
@ -50,8 +50,8 @@
transform: translateX(2px)
.l_body.mobile.sidebar
.sidebar-toggle.mobile
.l_body.mobile.leftbar
.leftbar-toggle.mobile
background: var(--card)
color: $color-hover
border-color: var(--block-border)

View File

@ -40,7 +40,7 @@ set_text_light()
--alpha60: rgba(white, 0.6)
--alpha75: rgba(white, 0.75)
--alpha100: white
--sidebar-bg: hsl($color-block-h, $color-block-s, 90)
--leftbar-bg: hsl($color-block-h, $color-block-s, 90)
--block: hsl($color-block-h, $color-block-s, 95)
--block-border: hsl($color-block-h, $color-block-s, 90)
--block-hover: hsl($color-block-h, $color-block-s, 92)
@ -60,7 +60,7 @@ set_darkmode()
--alpha60: rgba(black, 0.6)
--alpha75: rgba(black, 0.75)
--alpha100: black
--sidebar-bg: hsl($color-block-h, $color-block-s, 24)
--leftbar-bg: hsl($color-block-h, $color-block-s, 24)
set_text_light()
@media screen and (max-width: $device-mobile-max)
--site-bg: black

View File

@ -1,8 +1,8 @@
.l_body
display: grid
grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
grid-gap: var(--gap-l)
margin: auto
padding: 0 var(--gap-l)
font-size: var(--fsp)
.l_body .l_left
@ -19,7 +19,7 @@
display: block !important
.l_body
padding: 0
grid-template-columns: 1fr
display: block
.l_left
position: fixed
transform: translateX(-320px)
@ -32,7 +32,7 @@
.l_body.mobile
.l_left
transition: transform .38s ease-out
.l_body.mobile.sidebar
.l_body.mobile.leftbar
.l_left
transform: translateX(0px)
.main-mask

View File

@ -1,36 +1,35 @@
.l_left
margin: 8px 8px 8px 0
margin: 8px 0 8px 8px
height: 'calc(%s - 16px)' % 100vh
border-radius: $border-card-l
overflow: hidden
.header
margin: var(--gap-l) var(--gap-l) 0
margin-top: "calc(2 * %s)" % var(--gap-l)
if hexo-config('style.sidebar') && hexo-config('style.sidebar.sticky')
@media screen and (min-width: 1400px)
margin-left: auto
margin-right: "calc(2 * %s)" % var(--gap-l)
@media screen and (min-width: 1400px)
margin-left: auto
margin-right: "calc(2 * %s)" % var(--gap-l)
@media screen and (min-width: $device-mobile-max)
>.widgets:first-child>.widget-wrapper:first-child
margin-top: "calc(2 * %s)" % var(--gap-l)
.l_left
background-size: cover
if hexo-config('style.sidebar') && hexo-config('style.sidebar.background-image')
background-image: convert(hexo-config('style.sidebar.background-image'))
else if hexo-config('style.sidebar') && hexo-config('style.sidebar.background')
background: convert(hexo-config('style.sidebar.background'))
.sidebar-container
if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
background-image: convert(hexo-config('style.leftbar.background-image'))
else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background')
background: convert(hexo-config('style.leftbar.background'))
.leftbar-container
height: 100%
display: flex
flex-direction: column
word-break: break-all
text-align: justify
if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-px')
--blur-px: convert(hexo-config('style.sidebar.blur-px'))
if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-px')
--blur-px: convert(hexo-config('style.leftbar.blur-px'))
@supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
background: var(--blur-bg)
backdrop-filter: saturate(240%) blur(var(--blur-px))
-webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))
if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-bg')
--blur-bg: convert(hexo-config('style.sidebar.blur-bg'))
if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-bg')
--blur-bg: convert(hexo-config('style.leftbar.blur-bg'))

View File

@ -76,11 +76,11 @@ const hud = {
const l_body = document.querySelector('.l_body');
const sidebar = {
const leftbar = {
toggle: () => {
if (l_body) {
l_body.classList.add('mobile');
l_body.classList.toggle("sidebar");
l_body.classList.toggle("leftbar");
}
}
}
@ -139,10 +139,10 @@ const init = {
})
})
},
sidebar: () => {
leftbar: () => {
stellar.jQuery(() => {
$("#data-toc a.toc-link").click(function (e) {
l_body.classList.remove("sidebar");
l_body.classList.remove("leftbar");
});
})
},
@ -190,7 +190,7 @@ const init = {
// init
init.toc()
init.sidebar()
init.leftbar()
init.relativeDate(document.querySelectorAll('#post-meta time'))
init.registerTabsTag()