[opt] layout
This commit is contained in:
xaoxuu
parent
7d74cbdafe
commit
e04a7887f0
|
|
@ -63,13 +63,13 @@ site_tree:
|
|||
# 主页配置
|
||||
home:
|
||||
leftbar: welcome, recent
|
||||
rightbar: timeline
|
||||
rightbar: # timeline
|
||||
# 博客列表页配置
|
||||
index_blog:
|
||||
base_dir: blog # 只影响自动生成的页面路径
|
||||
menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
|
||||
leftbar: welcome, recent # for categories/tags/archives
|
||||
rightbar: timeline
|
||||
rightbar:
|
||||
nav_tabs: # 近期发布 分类 标签 专栏 归档 and ...
|
||||
# '朋友文章': /friends/rss/
|
||||
# 博客专栏列表页配置
|
||||
|
|
@ -81,7 +81,7 @@ site_tree:
|
|||
base_dir: wiki # 只影响自动生成的页面路径
|
||||
menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
|
||||
leftbar: ghissues, related, recent # for wiki
|
||||
rightbar: timeline
|
||||
rightbar:
|
||||
nav_tabs:
|
||||
# 'more': https://github.com/xaoxuu
|
||||
# -- 内容类页面 -- #
|
||||
|
|
@ -113,7 +113,7 @@ site_tree:
|
|||
# 其它自定义页面配置 layout: page
|
||||
page:
|
||||
leftbar: recent
|
||||
rightbar: toc, timeline
|
||||
rightbar: toc
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@ default:category: <svg style="margin-bottom:1px" xmlns="http://www.w3.org/2000/s
|
|||
|
||||
# 编辑本文
|
||||
default:edit: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M11.943 1.25H13.5a.75.75 0 0 1 0 1.5H12c-2.378 0-4.086.002-5.386.176c-1.279.172-2.05.5-2.62 1.069c-.569.57-.896 1.34-1.068 2.619c-.174 1.3-.176 3.008-.176 5.386s.002 4.086.176 5.386c.172 1.279.5 2.05 1.069 2.62c.57.569 1.34.896 2.619 1.068c1.3.174 3.008.176 5.386.176s4.086-.002 5.386-.176c1.279-.172 2.05-.5 2.62-1.069c.569-.57.896-1.34 1.068-2.619c.174-1.3.176-3.008.176-5.386v-1.5a.75.75 0 0 1 1.5 0v1.557c0 2.309 0 4.118-.19 5.53c-.194 1.444-.6 2.584-1.494 3.479c-.895.895-2.035 1.3-3.48 1.494c-1.411.19-3.22.19-5.529.19h-.114c-2.309 0-4.118 0-5.53-.19c-1.444-.194-2.584-.6-3.479-1.494c-.895-.895-1.3-2.035-1.494-3.48c-.19-1.411-.19-3.22-.19-5.529v-.114c0-2.309 0-4.118.19-5.53c.194-1.444.6-2.584 1.494-3.479c.895-.895 2.035-1.3 3.48-1.494c1.411-.19 3.22-.19 5.529-.19m4.827 1.026a3.503 3.503 0 0 1 4.954 4.953l-6.648 6.649c-.371.37-.604.604-.863.806a5.34 5.34 0 0 1-.987.61c-.297.141-.61.245-1.107.411l-2.905.968a1.492 1.492 0 0 1-1.887-1.887l.968-2.905c.166-.498.27-.81.411-1.107c.167-.35.372-.68.61-.987c.202-.26.435-.492.806-.863zm3.893 1.06a2.003 2.003 0 0 0-2.832 0l-.376.377c.022.096.054.21.098.338c.143.413.415.957.927 1.469a3.875 3.875 0 0 0 1.807 1.025l.376-.376a2.003 2.003 0 0 0 0-2.832m-1.558 4.391a5.397 5.397 0 0 1-1.686-1.146a5.395 5.395 0 0 1-1.146-1.686L11.218 9.95c-.417.417-.58.582-.72.76a3.84 3.84 0 0 0-.437.71c-.098.203-.172.423-.359.982l-.431 1.295l1.032 1.033l1.295-.432c.56-.187.779-.261.983-.358c.251-.12.49-.267.71-.439c.177-.139.342-.302.759-.718z" clip-rule="evenodd"/></svg>
|
||||
default:upup: <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 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m9 15.5l3-3l3 3m-6-4l3-3l3 3"/></g></svg>
|
||||
|
||||
|
||||
github:logo: <svg aria-hidden="true" role="img" class="color-icon-primary" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
github:repo: <svg aria-hidden="true" role="img" class="color-icon-primary" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" style="user-select:none;overflow:visible"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ btn:
|
|||
all_posts: All Posts
|
||||
getting_started: Getting Started
|
||||
edit: Edit This Page
|
||||
top: Scroll to Top
|
||||
|
||||
meta:
|
||||
recent_update: Recent Update
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ btn:
|
|||
all_posts: 所有文章
|
||||
getting_started: 开始使用
|
||||
edit: 编辑本文
|
||||
top: 回到顶部
|
||||
|
||||
meta:
|
||||
recent_update: 最近更新
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ btn:
|
|||
all_posts: 所有網誌
|
||||
getting_started: 開始使用
|
||||
edit: 編輯本文
|
||||
top: 回到頂部
|
||||
|
||||
meta:
|
||||
recent_update: 最近更新
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ function layoutToc(fallback) {
|
|||
function layoutDiv(fallback) {
|
||||
const editBtn = partial('components/edit', {map: item.edit_this_page})
|
||||
const tocBody = layoutTocBody()
|
||||
if (tocBody.length == 0 && editBtn.length == 0) {
|
||||
if (tocBody.trim().length == 0 && editBtn.trim().length == 0) {
|
||||
return ''
|
||||
}
|
||||
var el = ''
|
||||
|
|
@ -49,11 +49,13 @@ function layoutDiv(fallback) {
|
|||
el += tocBody
|
||||
el += `</div>`
|
||||
}
|
||||
if (editBtn.trim().length > 0) {
|
||||
el += `<div class="widget-footer">`
|
||||
el += editBtn
|
||||
el += `<a class="top" onclick="util.scrollTop()">`
|
||||
el += icon('default:upup')
|
||||
el += `<span>${__('btn.top')}</span>`
|
||||
el += `</a>`
|
||||
el += `</div>`
|
||||
}
|
||||
el += `</widget>`
|
||||
return el
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
// 侧边栏弹出后
|
||||
.l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
|
||||
box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -12px $color-theme
|
||||
box-shadow: 0 0 4px -2px $color-theme, 0 0 16px -8px $color-theme, 0 0 32px -16px $color-theme
|
||||
.l_body[leftbar] .float-panel button
|
||||
background: var(--card)
|
||||
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
flex-shrink: 0
|
||||
position: sticky
|
||||
position: -webkit-sticky
|
||||
top: 8px
|
||||
|
||||
.l_body .l_left
|
||||
top: 8px
|
||||
.l_body .l_right
|
||||
height: 100%
|
||||
.widgets
|
||||
height: 100%
|
||||
overflow visible
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
display: block !important
|
||||
.l_body
|
||||
.l_right
|
||||
top: 8px
|
||||
position: fixed
|
||||
height: calc(100% - 8px * 2)
|
||||
transform: translateX(320px)
|
||||
|
|
@ -35,6 +36,7 @@
|
|||
z-index: 10
|
||||
background: var(--site-bg)
|
||||
overflow: auto
|
||||
scrollbar(0, 0)
|
||||
.l_body[rightbar]
|
||||
.l_right
|
||||
transform: translateX(0px)
|
||||
|
|
|
|||
|
|
@ -5,22 +5,19 @@
|
|||
overflow: hidden
|
||||
.header
|
||||
margin: var(--gap-max) var(--gap-margin) 0
|
||||
@media screen and (min-width: 1400px)
|
||||
margin-left: auto
|
||||
margin-right: var(--gap-max)
|
||||
@media screen and (min-width: $device-mobile-max)
|
||||
>.widgets:first-child>.widget-wrapper:first-child
|
||||
margin-top: "calc(2 * %s)" % var(--gap-max)
|
||||
// @media screen and (min-width: $device-mobile-max)
|
||||
// >.widgets:first-child>.widget-wrapper:first-child
|
||||
// margin-top: calc(2 * var(--gap-max))
|
||||
|
||||
.l_right
|
||||
margin: 0 8px 0 0
|
||||
margin: 8px 8px 8px 0
|
||||
border-radius: $border-card-l
|
||||
@media screen and (min-width: 1400px)
|
||||
.l_left
|
||||
margin-left: auto
|
||||
margin-right: var(--gap-max)
|
||||
margin-right: calc(2 * var(--gap-max))
|
||||
.l_right
|
||||
margin-left: var(--gap-margin)
|
||||
margin-left: var(--gap-max)
|
||||
margin-right: auto
|
||||
|
||||
.l_left
|
||||
|
|
|
|||
|
|
@ -191,10 +191,13 @@
|
|||
padding: 0 0.5rem
|
||||
display: flex
|
||||
align-items: center
|
||||
border-color: var(--block-border)
|
||||
&:first-child
|
||||
margin-left: 0
|
||||
&:last-child
|
||||
margin-right: 0
|
||||
a:hover
|
||||
border-color: $color-hover
|
||||
.reaction
|
||||
border-color: var(--block)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
|
||||
.widget-wrapper.post-card .widget-body
|
||||
max-width: 100%
|
||||
margin: 1rem 0
|
||||
.item+.item
|
||||
margin-top: 8px
|
||||
.item
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.widget-wrapper.timeline
|
||||
.widget-body
|
||||
margin-top: 0.5rem
|
||||
overflow hidden
|
||||
.body
|
||||
a
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
.widget-wrapper.toc
|
||||
background: var(--site-bg)
|
||||
z-index 1
|
||||
|
||||
.l_right .widgets .widget-wrapper.toc .widget-header
|
||||
padding-left: var(--gap-max)
|
||||
padding-right: var(--gap-max)
|
||||
|
||||
// 目录基本样式
|
||||
.widget-wrapper.toc .toc
|
||||
--fsp: $fsp2
|
||||
|
|
@ -15,7 +20,7 @@
|
|||
list-style: none
|
||||
a
|
||||
padding: 4px var(--gap-max)
|
||||
color: var(--text-p2)
|
||||
color: var(--text-p3)
|
||||
display: block
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
|
@ -49,10 +54,11 @@
|
|||
margin-top: 0
|
||||
padding: 16px 0
|
||||
.widget-body .toc
|
||||
max-height: 75vh
|
||||
max-height: 70vh
|
||||
@media screen and (max-width: $device-laptop)
|
||||
max-height: unset
|
||||
overflow: auto
|
||||
scrollbar(0, 0)
|
||||
|
||||
|
||||
|
||||
|
|
@ -66,14 +72,14 @@
|
|||
--fsp: $fsp2
|
||||
|
||||
// 高亮样式
|
||||
.widget-wrapper.toc .toc a.toc-link.active
|
||||
color: var(--text-p0)
|
||||
&:before,&:after
|
||||
content: ''
|
||||
|
||||
.widget-wrapper.toc .toc a.toc-link:hover
|
||||
color: $color-theme
|
||||
|
||||
.widget-wrapper.toc .toc a.toc-link.active
|
||||
color: var(--text)
|
||||
&:before,&:after
|
||||
content: ''
|
||||
|
||||
// 始终折叠
|
||||
.widget-wrapper.toc[collapse='true']
|
||||
.toc-item a.toc-link+ol
|
||||
|
|
@ -115,12 +121,7 @@
|
|||
grid-template-rows: 0fr
|
||||
|
||||
// 编辑本文按钮
|
||||
.widget-wrapper.toc .widget-footer
|
||||
margin-top: 8px
|
||||
color: var(--text-p2)
|
||||
position relative
|
||||
padding-top: 8px
|
||||
&:before
|
||||
.widget-wrapper.toc .widget-body+.widget-footer:before
|
||||
content: ''
|
||||
position absolute
|
||||
background: var(--block-border)
|
||||
|
|
@ -128,6 +129,11 @@
|
|||
height: 1px
|
||||
left: var(--gap-max)
|
||||
right: var(--gap-max)
|
||||
.widget-wrapper.toc .widget-footer
|
||||
margin-top: 8px
|
||||
color: var(--text-p2)
|
||||
position relative
|
||||
padding-top: 8px
|
||||
a
|
||||
display: flex
|
||||
align-items: center
|
||||
|
|
@ -142,3 +148,23 @@
|
|||
margin-right: 8px
|
||||
a:hover
|
||||
background: var(--block-hover)
|
||||
color: var(--text)
|
||||
|
||||
.widget-wrapper.toc+.widget-wrapper
|
||||
padding-top: 32px
|
||||
|
||||
@media screen and (max-width: $device-laptop)
|
||||
.l_right
|
||||
blur-effect()
|
||||
.widgets
|
||||
padding: 8px
|
||||
.widget-wrapper.toc
|
||||
background: var(--alpha100)
|
||||
.widget-wrapper.toc .toc
|
||||
a
|
||||
color: var(--text-p2)
|
||||
.widget-wrapper.toc .widget-footer
|
||||
a
|
||||
background: var(--block)
|
||||
a+a
|
||||
margin-top: 4px
|
||||
|
|
@ -58,19 +58,21 @@
|
|||
|
||||
.widget-wrapper
|
||||
display: block
|
||||
padding-bottom: 32px
|
||||
|
||||
.l_left .widgets
|
||||
margin: 0 var(--gap-margin)
|
||||
.widget-wrapper
|
||||
margin: 32px 0
|
||||
&:first-child
|
||||
margin-top: 32px
|
||||
|
||||
.l_right
|
||||
--gap-margin: 0
|
||||
.l_right .widgets
|
||||
.widget-wrapper
|
||||
margin-top: 8px
|
||||
margin-bottom: 32px
|
||||
.widget-header
|
||||
padding-left: var(--gap-max)
|
||||
padding-right: var(--gap-max)
|
||||
padding-left: var(--gap-padding)
|
||||
padding-right: var(--gap-padding)
|
||||
&:not(.toc)
|
||||
margin-left: var(--gap-margin)
|
||||
margin-right: var(--gap-margin)
|
||||
|
|
|
|||
|
|
@ -54,6 +54,10 @@ const util = {
|
|||
el.classList.toggle("display");
|
||||
}
|
||||
},
|
||||
|
||||
scrollTop: () => {
|
||||
window.scrollTo({top: 0, behavior: "smooth"});
|
||||
},
|
||||
}
|
||||
|
||||
const hud = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue