[feat] layout refactoring
This commit is contained in:
xaoxuu
parent
830ee9fd3b
commit
c459d0b7e9
|
|
@ -89,7 +89,7 @@ site_tree:
|
|||
post:
|
||||
menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
|
||||
leftbar: related, ghrepo, ghissues, recent # for pages using 'layout:post'
|
||||
rightbar: toc
|
||||
rightbar: ghrepo, toc
|
||||
# 博客专栏文章内页配置
|
||||
topic:
|
||||
menu_id: post
|
||||
|
|
@ -97,19 +97,19 @@ site_tree:
|
|||
wiki:
|
||||
menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
|
||||
leftbar: tree, ghissues, related, recent # for wiki
|
||||
rightbar: toc
|
||||
rightbar: ghrepo, toc
|
||||
# 作者信息配置
|
||||
author:
|
||||
base_dir: author # 只影响自动生成的页面路径
|
||||
menu_id: post
|
||||
leftbar: recent, timeline
|
||||
rightbar:
|
||||
rightbar: timeline
|
||||
# 错误页配置
|
||||
error_page:
|
||||
menu_id: post
|
||||
'404': '/404.html'
|
||||
leftbar: recent, timeline
|
||||
rightbar:
|
||||
rightbar: timeline
|
||||
# 其它自定义页面配置 layout: page
|
||||
page:
|
||||
leftbar: recent
|
||||
|
|
|
|||
|
|
@ -22,10 +22,15 @@ default:bookmark.active: <svg class="active-icon" xmlns="http://www.w3.org/2000/
|
|||
|
||||
# 侧边栏弹出按钮
|
||||
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:rightbar: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6h11m-11 6h11m-11 6h11M4 6h1v4m-1 0h2m0 8H4c0-1 2-2 2-3s-1-1.5-2-1"/></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>
|
||||
|
||||
# 编辑本文
|
||||
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>
|
||||
|
||||
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>
|
||||
github:star: <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="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
|
||||
|
|
|
|||
|
|
@ -21,24 +21,34 @@ recent:
|
|||
rss: # /atom.xml # npm i hexo-generator-feed
|
||||
limit: 10 # Count of posts
|
||||
|
||||
# 页面树（与当前页面强关联的上下篇文章列表）
|
||||
tree:
|
||||
layout: tree
|
||||
|
||||
# TOC (valid only in rightbar)
|
||||
# 本文目录（当前页面内各级标题列表）
|
||||
toc:
|
||||
layout: toc
|
||||
list_number: true
|
||||
list_number: false
|
||||
min_depth: 1
|
||||
max_depth: 6
|
||||
collapse: false # true / false / auto
|
||||
# 编辑本文按钮
|
||||
edit_this_page: # 从开头开始匹配替换
|
||||
'_posts/': https://github.com/xaoxuu/xaoxuu.com/blob/main/source/_posts/
|
||||
'wiki/stellar/': https://github.com/xaoxuu/hexo-theme-stellar-docs/blob/main/
|
||||
|
||||
# github user info
|
||||
# GitHub 用户信息
|
||||
ghuser:
|
||||
layout: ghuser
|
||||
username: github # your github login username
|
||||
username: # your github login username
|
||||
avatar: true # show avatar or not
|
||||
menu: true # show menu or not
|
||||
|
||||
# 本文作者组件，需要先配置作者信息: authors.yml
|
||||
author:
|
||||
layout: author
|
||||
avatar: true
|
||||
|
||||
# 标签云组件
|
||||
tagcloud:
|
||||
layout: tagcloud
|
||||
title: 标签云
|
||||
|
|
|
|||
|
|
@ -10,11 +10,13 @@ btn:
|
|||
tag: Tag
|
||||
tags: Tags
|
||||
archives: Archives
|
||||
all_posts: All Posts
|
||||
getting_started: Getting Started
|
||||
edit: Edit This Page
|
||||
|
||||
meta:
|
||||
recent_update: Recent Update
|
||||
toc: TOC
|
||||
toc: On This Page
|
||||
read_next: READ NEXT
|
||||
prev: Prev
|
||||
next: Next
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ btn:
|
|||
tag: 标签
|
||||
tags: 标签
|
||||
archives: 归档
|
||||
all_posts: 所有文章
|
||||
getting_started: 开始使用
|
||||
edit: 编辑本文
|
||||
|
||||
meta:
|
||||
recent_update: 最近更新
|
||||
|
|
|
|||
|
|
@ -4,13 +4,15 @@ btn:
|
|||
wiki: 文檔
|
||||
topic: 專欄
|
||||
recent_publish: 近期發布
|
||||
all_wiki: 所有 Wiki
|
||||
all_wiki: 所有文檔
|
||||
category: 分類
|
||||
categories: 分類
|
||||
tag: 標籤
|
||||
tags: 標籤
|
||||
archives: 封存
|
||||
all_posts: 所有網誌
|
||||
getting_started: 開始使用
|
||||
edit: 編輯本文
|
||||
|
||||
meta:
|
||||
recent_update: 最近更新
|
||||
|
|
|
|||
|
|
@ -25,8 +25,6 @@ function layoutDiv() {
|
|||
el += partial('dateinfo')
|
||||
// end 2.left
|
||||
el += `</div>`
|
||||
// 2.right
|
||||
el += partial('ghinfo')
|
||||
// end 1.main
|
||||
el += `</div>`
|
||||
return el
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<div class='float-panel mobile-only blur' style='display:none'>
|
||||
<button type='button' class='leftbar-toggle mobile' onclick='leftbar.toggle()'>
|
||||
<div class='float-panel blur'>
|
||||
<button type='button' style='display:none' class='laptop-only rightbar-toggle mobile' onclick='sidebar.rightbar()'>
|
||||
<%- icon('default:rightbar') %>
|
||||
</button>
|
||||
<button type='button' style='display:none' class='mobile-only leftbar-toggle mobile' onclick='sidebar.leftbar()'>
|
||||
<%- icon('default:leftbar') %>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
});
|
||||
}
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
console.log('DOM fully loaded and parsed');
|
||||
load_comment();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
<%
|
||||
|
||||
var author = null
|
||||
if (theme.authors) {
|
||||
if (page.author?.length > 0 && theme.authors[page.author] != null) {
|
||||
author = theme.authors[page.author]
|
||||
} else {
|
||||
author = theme.default_author
|
||||
}
|
||||
}
|
||||
|
||||
function layoutDiv() {
|
||||
if (author == null) {
|
||||
return ''
|
||||
}
|
||||
var el = ''
|
||||
el += `<widget class="widget-wrapper${scrollreveal(' ')} user-card author">`
|
||||
// body
|
||||
el += `<div class="widget-body">`
|
||||
if (item.avatar) {
|
||||
el += `<div class="avatar"><img type="img" id="avatar_url" src="${author.avatar}"></div>`
|
||||
}
|
||||
// username
|
||||
el += `<p class="username" ff="title" type="text" id="name">${author.name}</p>`
|
||||
el += `<p class="bio" type="text" id="bio">${author.desc || author.description}</p>`
|
||||
|
||||
// homepage
|
||||
el += `<a class="follow" href="${url_for(author.path)}">`
|
||||
el += icon('solar:documents-bold-duotone')
|
||||
el += __('btn.all_posts')
|
||||
el += `</a>`
|
||||
el += `</div>`
|
||||
el += `</widget>`
|
||||
return el
|
||||
}
|
||||
%>
|
||||
<%- layoutDiv() %>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<%
|
||||
function parseURL() {
|
||||
const source = page.source || ''
|
||||
var url
|
||||
for (let id of Object.keys(map)) {
|
||||
if (source.startsWith(id)) {
|
||||
return source.replace(id, map[id])
|
||||
}
|
||||
}
|
||||
}
|
||||
function layoutDiv() {
|
||||
const url = parseURL()
|
||||
if (url == null) {
|
||||
return ''
|
||||
}
|
||||
var el = ''
|
||||
el += `<a class="edit" href="${url_for(url)}">`
|
||||
el += icon('default:edit')
|
||||
el += `<span>${__('btn.edit')}</span>`
|
||||
el += `</a>`
|
||||
return el
|
||||
}
|
||||
%>
|
||||
<%- layoutDiv() %>
|
||||
|
|
@ -22,7 +22,7 @@ function layoutDiv() {
|
|||
return el;
|
||||
}
|
||||
|
||||
el += `<widget class="widget-wrapper${scrollreveal(' ')} ghuser">`
|
||||
el += `<widget class="widget-wrapper${scrollreveal(' ')} user-card ghuser">`
|
||||
// body
|
||||
el += '<div class="widget-body stellar-ghinfo-api" api="' + theme.api_host.ghapi + '/users/' + item.username + '">';
|
||||
if (item.avatar) {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ function relatedWiki() {
|
|||
if (thisItemObject == null) {
|
||||
return ''
|
||||
}
|
||||
const relatedItems = thisItemObject.relatedItems
|
||||
const relatedItems = thisItemObject.relatedItems || []
|
||||
var el = ''
|
||||
for (let relatedItem of relatedItems) {
|
||||
el += `<widget class="widget-wrapper${scrollreveal(' ')} post-card">`
|
||||
|
|
|
|||
|
|
@ -15,11 +15,12 @@ function layoutTocHeader(title) {
|
|||
var el = ''
|
||||
el += `<div class="widget-header dis-select">`
|
||||
el += `<span class="name">${title || __("meta.toc")}</span>`
|
||||
el += `<a class="cap-action" onclick="sidebar.toggleTOC()" >${icon('default:rightbar')}</a>`
|
||||
el += `</div>`
|
||||
return el
|
||||
}
|
||||
|
||||
function layoutDiv(fallback) {
|
||||
function layoutToc(fallback) {
|
||||
const tocBody = layoutTocBody()
|
||||
if (tocBody.length == 0) {
|
||||
return ''
|
||||
|
|
@ -34,6 +35,29 @@ function layoutDiv(fallback) {
|
|||
return el
|
||||
}
|
||||
|
||||
function layoutDiv(fallback) {
|
||||
const editBtn = partial('components/edit', {map: item.edit_this_page})
|
||||
const tocBody = layoutTocBody()
|
||||
if (tocBody.length == 0 && editBtn.length == 0) {
|
||||
return ''
|
||||
}
|
||||
var el = ''
|
||||
el += `<widget class="widget-wrapper${scrollreveal(' ')} toc" id="data-toc" collapse="${item.collapse}">`
|
||||
if (tocBody.length > 0) {
|
||||
el += layoutTocHeader()
|
||||
el += `<div class="widget-body">`
|
||||
el += tocBody
|
||||
el += `</div>`
|
||||
}
|
||||
if (editBtn.trim().length > 0) {
|
||||
el += `<div class="widget-footer">`
|
||||
el += editBtn
|
||||
el += `</div>`
|
||||
}
|
||||
el += `</widget>`
|
||||
return el
|
||||
}
|
||||
|
||||
%>
|
||||
|
||||
<%- layoutDiv() %>
|
||||
|
|
|
|||
|
|
@ -52,12 +52,12 @@ html += `<html lang="${page.lang}">`
|
|||
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 class="main-mask" onclick="sidebar.dismiss()"></div>`
|
||||
html += `</div>`
|
||||
html += `<aside class="l_right">`
|
||||
html += partial('_partial/sidebar/index_rightbar')
|
||||
html += `</aside>`
|
||||
html += partial('_partial/menubtn')
|
||||
html += `</div>`
|
||||
html += `<div class="scripts">`
|
||||
html += partial('_partial/scripts/index')
|
||||
|
|
|
|||
|
|
@ -9,12 +9,15 @@
|
|||
|
||||
.float-panel
|
||||
position: sticky
|
||||
grid-column-end: span 3
|
||||
right: 0
|
||||
bottom: 2rem
|
||||
float: right
|
||||
z-index: 10
|
||||
display: flex
|
||||
border-radius: 2rem
|
||||
flex-direction: column
|
||||
border-radius: 0.5rem
|
||||
margin-left: auto
|
||||
margin-right: 1rem
|
||||
overflow: hidden
|
||||
--blur-px: 16px
|
||||
|
|
@ -27,7 +30,7 @@
|
|||
--blur-bg: alpha(#000, .4)
|
||||
|
||||
// 侧边栏弹出按钮
|
||||
.leftbar-toggle.mobile
|
||||
.float-panel button
|
||||
cursor: pointer
|
||||
color: var(--text)
|
||||
background: none
|
||||
|
|
@ -41,8 +44,16 @@
|
|||
trans1 transform
|
||||
width: auto
|
||||
height: 28px
|
||||
|
||||
// 侧边栏弹出后
|
||||
.l_body.mobile.leftbar .leftbar-toggle.mobile
|
||||
.l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
|
||||
box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -12px $color-theme
|
||||
.l_body[leftbar] .float-panel button
|
||||
background: var(--card)
|
||||
|
||||
.l_body[leftbar] .float-panel button.leftbar-toggle
|
||||
color: $color-theme
|
||||
border-color: var(--block-border)
|
||||
svg g
|
||||
fill: currentColor
|
||||
fill-opacity: 0.3
|
||||
|
|
@ -50,8 +61,15 @@
|
|||
transform: translateX(2px)
|
||||
|
||||
|
||||
.l_body.mobile.leftbar
|
||||
.leftbar-toggle.mobile
|
||||
background: var(--card)
|
||||
color: $color-hover
|
||||
border-color: var(--block-border)
|
||||
.l_body[rightbar] .float-panel button
|
||||
background: var(--card)
|
||||
|
||||
.l_body[rightbar] .float-panel button.rightbar-toggle
|
||||
color: $color-theme
|
||||
border-color: var(--block-border)
|
||||
svg g
|
||||
fill: currentColor
|
||||
fill-opacity: 0.3
|
||||
path#sep
|
||||
transform: translateX(2px)
|
||||
|
||||
|
|
|
|||
|
|
@ -67,30 +67,32 @@ $border-button = 4px
|
|||
|
||||
// 可以动态变化的属性
|
||||
:root
|
||||
--width-left: 288px
|
||||
--width-sidebar: 288px
|
||||
--width-main: 720px
|
||||
--fsp: $fs-body
|
||||
--fsh2: 'calc(%s + 11px)' % var(--fsp)
|
||||
--fsh3: 'calc(%s + 7px)' % var(--fsp)
|
||||
--fsh4: 'calc(%s + 4px)' % var(--fsp)
|
||||
|
||||
--gap-l: 16px
|
||||
--gap-margin: 16px
|
||||
--gap-padding: 16px
|
||||
--gap-max: calc(var(--gap-margin) + var(--gap-padding))
|
||||
|
||||
--gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
|
||||
--gap-p-compact: 'calc(%s * 0.75)' % $fs-body
|
||||
// desktop 2k or larger
|
||||
@media screen and (min-width: $device-2k)
|
||||
--gap-l: 32px
|
||||
--width-left: 352px
|
||||
--width-sidebar: 352px
|
||||
--width-main: 780px
|
||||
// desktop 4k or larger
|
||||
@media screen and (min-width: $device-4k)
|
||||
--width-main: 860px
|
||||
// iPad 竖屏
|
||||
@media screen and (max-width: $device-tablet)
|
||||
--width-left: 252px
|
||||
--width-sidebar: 252px
|
||||
// iPad 竖屏
|
||||
@media screen and (max-width: $device-mobile-max)
|
||||
--width-left: 288px
|
||||
--width-sidebar: 288px
|
||||
|
||||
// 文章布局风格
|
||||
.l_body.story
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.l_body
|
||||
display: grid
|
||||
grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
|
||||
grid-gap: var(--gap-l)
|
||||
grid-gap: var(--gap-margin)
|
||||
margin: auto
|
||||
font-size: var(--fsp)
|
||||
|
||||
.l_body aside
|
||||
z-index: 8
|
||||
width: var(--width-left)
|
||||
width: var(--width-sidebar)
|
||||
flex-shrink: 0
|
||||
position: sticky
|
||||
position: -webkit-sticky
|
||||
|
|
@ -19,6 +19,29 @@
|
|||
height: 100%
|
||||
overflow visible
|
||||
|
||||
// 平板布局
|
||||
@media screen and (max-width: $device-laptop)
|
||||
.laptop-only
|
||||
display: block !important
|
||||
.l_body
|
||||
.l_right
|
||||
position: fixed
|
||||
height: calc(100% - 8px * 2)
|
||||
transform: translateX(320px)
|
||||
transition: transform .38s ease-out
|
||||
margin: 0
|
||||
right: 8px
|
||||
box-shadow: $boxshadow-card-float
|
||||
z-index: 10
|
||||
background: var(--site-bg)
|
||||
overflow: scroll
|
||||
.l_body[rightbar]
|
||||
.l_right
|
||||
transform: translateX(0px)
|
||||
.main-mask
|
||||
opacity 1
|
||||
pointer-events: inherit
|
||||
|
||||
// 手机布局
|
||||
@media screen and (max-width: $device-mobile-max)
|
||||
.mobile-only
|
||||
|
|
@ -29,16 +52,14 @@
|
|||
.l_left
|
||||
position: fixed
|
||||
transform: translateX(-320px)
|
||||
transition: transform .38s ease-out
|
||||
margin: 0
|
||||
left: 8px
|
||||
box-shadow: $boxshadow-card-float
|
||||
z-index: 10
|
||||
.l_main
|
||||
max-width: 100%
|
||||
.l_body.mobile
|
||||
.l_left
|
||||
transition: transform .38s ease-out
|
||||
.l_body.mobile.leftbar
|
||||
.l_body[leftbar]
|
||||
.l_left
|
||||
transform: translateX(0px)
|
||||
.main-mask
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.l_main
|
||||
position: relative
|
||||
padding-bottom: "calc(1 * %s)" % var(--gap-l)
|
||||
padding-bottom: var(--gap-max)
|
||||
@media screen and (min-width: $device-mobile-max)
|
||||
padding-top: 8px
|
||||
header
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.l_left footer.footer
|
||||
margin: 0.5rem var(--gap-l) 1rem
|
||||
margin: 0.5rem var(--gap-max) 1rem
|
||||
|
||||
.social-wrap
|
||||
display: grid
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
.nav-area
|
||||
margin: 32px var(--gap-l) 0
|
||||
margin: 32px var(--gap-margin) 0
|
||||
|
|
@ -4,15 +4,25 @@
|
|||
border-radius: $border-card-l
|
||||
overflow: hidden
|
||||
.header
|
||||
margin: var(--gap-l) var(--gap-l) 0
|
||||
margin-top: "calc(2 * %s)" % var(--gap-l)
|
||||
margin: var(--gap-max) var(--gap-margin) 0
|
||||
@media screen and (min-width: 1400px)
|
||||
margin-left: auto
|
||||
margin-right: "calc(2 * %s)" % var(--gap-l)
|
||||
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-l)
|
||||
|
||||
margin-top: "calc(2 * %s)" % var(--gap-max)
|
||||
|
||||
.l_right
|
||||
margin: 0 8px 0 0
|
||||
border-radius: $border-card-l
|
||||
@media screen and (min-width: 1400px)
|
||||
.l_left
|
||||
margin-left: auto
|
||||
margin-right: var(--gap-max)
|
||||
.l_right
|
||||
margin-left: var(--gap-margin)
|
||||
margin-right: auto
|
||||
|
||||
.l_left
|
||||
background-size: cover
|
||||
if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
|
||||
|
|
|
|||
|
|
@ -129,8 +129,8 @@
|
|||
|
||||
@media screen and (min-width: $device-mobile-max)
|
||||
.banner.author.top
|
||||
margin-left: var(--gap-l)
|
||||
margin-right: var(--gap-l)
|
||||
margin-left: var(--gap-max)
|
||||
margin-right: var(--gap-max)
|
||||
|
||||
@media screen and (max-width: $device-mobile-max)
|
||||
.banner.top
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
color: var(--text-p2)
|
||||
background: var(--card)
|
||||
border-radius: $border-card
|
||||
box-shadow: $boxshadow-card
|
||||
hoverable-card()
|
||||
>div+div
|
||||
margin-top: 0.5rem
|
||||
span
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
.widget-wrapper.ghuser
|
||||
.widget-wrapper.user-card
|
||||
.widget-header+.widget-body
|
||||
margin: 0.75rem 0
|
||||
.widget-wrapper.ghuser .widget-body
|
||||
.widget-wrapper.user-card .widget-body
|
||||
text-align: center
|
||||
background: var(--card)
|
||||
border-radius: $border-card
|
||||
padding: 1rem
|
||||
box-shadow: $boxshadow-card
|
||||
hoverable-card()
|
||||
|
||||
.widgets .widget-wrapper.ghuser
|
||||
.widgets .widget-wrapper.user-card
|
||||
.avatar
|
||||
display: block
|
||||
border-radius: 100%
|
||||
margin: 1rem auto 1.25rem auto
|
||||
max-width: 75%
|
||||
max-width: 128px
|
||||
overflow: hidden
|
||||
img
|
||||
img
|
||||
display: block
|
||||
@media screen and (max-width: $device-tablet)
|
||||
max-width: 50%
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
.follow
|
||||
font-weight: 500
|
||||
border-radius: 64px
|
||||
margin: 1rem 0 0
|
||||
padding: 0.5rem 1rem
|
||||
background: $color-theme
|
||||
color: var(--card)
|
||||
|
|
@ -45,6 +46,8 @@
|
|||
trans1: background
|
||||
svg
|
||||
margin-right: 6px
|
||||
height: 1.5em
|
||||
width: auto
|
||||
&:hover
|
||||
background: $color-hover
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.widget-wrapper.timeline
|
||||
.widget-wrapper.timeline
|
||||
.widget-body
|
||||
margin-top: 0.5rem
|
||||
.body
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
border-bottom: 1px solid $color-hover
|
||||
.tag-plugin.timeline .timenode
|
||||
.header
|
||||
margin: 0.5rem 16px
|
||||
margin: 0.5rem var(--gap-padding)
|
||||
txt-ellipsis()
|
||||
.user-info
|
||||
background: var(--alpha50)
|
||||
|
|
@ -27,8 +27,6 @@
|
|||
color: var(--text-p2)
|
||||
.body
|
||||
border-radius: $border-card
|
||||
background: var(--alpha50)
|
||||
box-shadow: none
|
||||
p,li
|
||||
--fsp: $fsp3
|
||||
code
|
||||
|
|
@ -40,4 +38,9 @@
|
|||
|
||||
|
||||
.tag-plugin.timeline[api] .body .footer
|
||||
background: none
|
||||
background: none
|
||||
|
||||
|
||||
.l_left .widget-wrapper.timeline .body
|
||||
box-shadow: none
|
||||
background: var(--alpha50)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
.widget-wrapper.toc
|
||||
background: var(--site-bg)
|
||||
z-index 1
|
||||
// 目录基本样式
|
||||
.widget-wrapper.toc .toc
|
||||
--fsp: $fsp2
|
||||
|
|
@ -11,7 +14,7 @@
|
|||
margin: 2px 0
|
||||
list-style: none
|
||||
a
|
||||
padding: 4px var(--gap-l)
|
||||
padding: 4px var(--gap-max)
|
||||
color: var(--text-p2)
|
||||
display: block
|
||||
overflow: hidden
|
||||
|
|
@ -20,7 +23,7 @@
|
|||
position relative
|
||||
&:before,&:after
|
||||
position: absolute
|
||||
left: 4px
|
||||
left: 'calc(%s * 0.5)' % var(--gap-max)
|
||||
width: 8px
|
||||
height: 8px
|
||||
top: 'calc(%s - 4px)' % 50%
|
||||
|
|
@ -39,12 +42,19 @@
|
|||
opacity 0
|
||||
|
||||
// 固定位置
|
||||
.l_right .widget-wrapper.toc
|
||||
.l_right .widgets .widget-wrapper.toc
|
||||
position: sticky
|
||||
position: -webkit-sticky
|
||||
top: 32px
|
||||
max-height: 'calc(90vh - 2 * %s)' % @top
|
||||
overflow: scroll
|
||||
top: 0
|
||||
margin-top: 0
|
||||
padding: 16px 0
|
||||
.widget-body .toc
|
||||
max-height: 75vh
|
||||
@media screen and (max-width: $device-laptop)
|
||||
max-height: unset
|
||||
overflow: scroll
|
||||
|
||||
|
||||
|
||||
// 各级缩进样式
|
||||
.widget-wrapper.toc .toc
|
||||
|
|
@ -87,4 +97,48 @@
|
|||
.widget-wrapper.toc[collapse='true'] ol:has(> .toc-item a.active)
|
||||
display: block
|
||||
.widget-wrapper.toc[collapse='auto'] ol:has(> .toc-item a.active)
|
||||
display: block
|
||||
display: block
|
||||
|
||||
// 手动折叠
|
||||
.widget-wrapper.toc
|
||||
.widget-body
|
||||
display: grid
|
||||
grid-template-rows: 1fr
|
||||
trans1 all
|
||||
overflow hidden
|
||||
.l_right .widgets .widget-wrapper.toc .widget-header .cap-action:hover
|
||||
background: var(--block-border)
|
||||
.l_right .widgets .widget-wrapper.toc.collapse
|
||||
.widget-header .cap-action
|
||||
background: var(--block-border)
|
||||
.widget-body
|
||||
grid-template-rows: 0fr
|
||||
|
||||
// 编辑本文按钮
|
||||
.widget-wrapper.toc .widget-footer
|
||||
margin-top: 8px
|
||||
color: var(--text-p2)
|
||||
position relative
|
||||
padding-top: 8px
|
||||
&:before
|
||||
content: ''
|
||||
position absolute
|
||||
background: var(--block-border)
|
||||
top: 0
|
||||
height: 1px
|
||||
left: var(--gap-max)
|
||||
right: var(--gap-max)
|
||||
a
|
||||
display: flex
|
||||
align-items: center
|
||||
color: inherit
|
||||
font-size: $fs-14
|
||||
padding: 8px 16px
|
||||
margin: 0 calc(var(--gap-max) - 16px)
|
||||
border-radius: 4px
|
||||
svg,img
|
||||
height: 16px
|
||||
width: auto
|
||||
margin-right: 8px
|
||||
a:hover
|
||||
background: var(--block-hover)
|
||||
|
|
@ -10,11 +10,10 @@
|
|||
scrollbar(0, 0)
|
||||
z-index: 1
|
||||
line-height: 1.2
|
||||
margin: 0 var(--gap-l)
|
||||
.widget-wrapper
|
||||
.widget-header
|
||||
padding-left: var(--gap-l)
|
||||
padding-right: var(--gap-l)
|
||||
padding-left: var(--gap-padding)
|
||||
padding-right: var(--gap-padding)
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: baseline
|
||||
|
|
@ -50,16 +49,33 @@
|
|||
fill: $color-hover
|
||||
|
||||
.widget-body
|
||||
margin: 0.5rem 0
|
||||
color: var(--text-p1)
|
||||
p
|
||||
margin-top: .5em
|
||||
margin-bottom: .5em
|
||||
line-height: 1.5
|
||||
.widget-header+.widget-body
|
||||
margin-top: 0
|
||||
|
||||
|
||||
.widget-wrapper
|
||||
display: block
|
||||
margin: 32px 0
|
||||
|
||||
.l_left .widgets
|
||||
margin: 0 var(--gap-margin)
|
||||
.widget-wrapper
|
||||
margin: 32px 0
|
||||
|
||||
.l_right .widgets
|
||||
.widget-wrapper
|
||||
margin-top: 8px
|
||||
.widget-header
|
||||
padding-left: var(--gap-max)
|
||||
padding-right: var(--gap-max)
|
||||
&:not(.toc)
|
||||
margin-left: var(--gap-margin)
|
||||
margin-right: var(--gap-margin)
|
||||
.widget-wrapper+.widget-wrapper
|
||||
margin-top: 32px
|
||||
@media screen and (max-width: $device-laptop)
|
||||
.widget-wrapper
|
||||
margin-top: var(--gap-margin)
|
||||
border-radius: $border-card
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
console.log('\n' + '%c Stellar v' + stellar.version + ' %c\n' + stellar.github + '\n', 'color:#e8fafe;background:#03c7fa;padding:8px;border-radius:4px', 'margin-top:8px');
|
||||
// utils
|
||||
const util = {
|
||||
|
||||
|
|
@ -76,12 +75,27 @@ const hud = {
|
|||
|
||||
const l_body = document.querySelector('.l_body');
|
||||
|
||||
const leftbar = {
|
||||
toggle: () => {
|
||||
const sidebar = {
|
||||
leftbar: () => {
|
||||
if (l_body) {
|
||||
l_body.classList.add('mobile');
|
||||
l_body.classList.toggle("leftbar");
|
||||
l_body.toggleAttribute('leftbar');
|
||||
l_body.removeAttribute('rightbar');
|
||||
}
|
||||
},
|
||||
rightbar: () => {
|
||||
if (l_body) {
|
||||
l_body.toggleAttribute('rightbar');
|
||||
l_body.removeAttribute('leftbar');
|
||||
}
|
||||
},
|
||||
dismiss: () => {
|
||||
if (l_body) {
|
||||
l_body.removeAttribute('leftbar');
|
||||
l_body.removeAttribute('rightbar');
|
||||
}
|
||||
},
|
||||
toggleTOC: () => {
|
||||
document.querySelector('#data-toc').classList.toggle('collapse');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -91,53 +105,58 @@ const init = {
|
|||
const scrollOffset = 32;
|
||||
var segs = [];
|
||||
$("article.md-text :header").each(function (idx, node) {
|
||||
segs.push(node)
|
||||
segs.push(node);
|
||||
});
|
||||
// 定位到激活的目录树（不如pjax体验好）
|
||||
// const widgets = document.querySelector('.widgets')
|
||||
// const e1 = document.querySelector('.doc-tree-link.active')
|
||||
// const offsetTop = e1.getBoundingClientRect().top - widgets.getBoundingClientRect().top - 100
|
||||
// if (offsetTop > 0) {
|
||||
// widgets.scrollBy({top: offsetTop, behavior: 'smooth'})
|
||||
// }
|
||||
// 滚动
|
||||
$(document, window).scroll(function (e) {
|
||||
function activeTOC() {
|
||||
var scrollTop = $(this).scrollTop();
|
||||
var topSeg = null
|
||||
var topSeg = null;
|
||||
for (var idx in segs) {
|
||||
var seg = $(segs[idx])
|
||||
var seg = $(segs[idx]);
|
||||
if (seg.offset().top > scrollTop + scrollOffset) {
|
||||
continue
|
||||
continue;
|
||||
}
|
||||
if (!topSeg) {
|
||||
topSeg = seg
|
||||
topSeg = seg;
|
||||
} else if (seg.offset().top >= topSeg.offset().top) {
|
||||
topSeg = seg
|
||||
topSeg = seg;
|
||||
}
|
||||
}
|
||||
if (topSeg) {
|
||||
$("#data-toc a.toc-link").removeClass("active")
|
||||
var link = "#" + topSeg.attr("id")
|
||||
$("#data-toc a.toc-link").removeClass("active");
|
||||
var link = "#" + topSeg.attr("id");
|
||||
if (link != '#undefined') {
|
||||
const highlightItem = $('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
|
||||
const highlightItem = $('#data-toc a.toc-link[href="' + encodeURI(link) + '"]');
|
||||
if (highlightItem.length > 0) {
|
||||
highlightItem.addClass("active")
|
||||
const e0 = document.querySelector('#data-toc')
|
||||
console.log('e0', e0);
|
||||
const e1 = document.querySelector('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
|
||||
const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 200
|
||||
const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64
|
||||
if (offsetTop < 0) {
|
||||
e0.scrollBy(0, offsetTop)
|
||||
} else if (offsetBottom > 0) {
|
||||
e0.scrollBy(0, offsetBottom)
|
||||
}
|
||||
highlightItem.addClass("active");
|
||||
}
|
||||
} else {
|
||||
$('#data-toc a.toc-link:first').addClass("active")
|
||||
$('#data-toc a.toc-link:first').addClass("active");
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
function scrollTOC() {
|
||||
const e0 = document.querySelector('#data-toc .toc');
|
||||
const e1 = document.querySelector('#data-toc .toc a.toc-link.active');
|
||||
if (e0 == null || e1 == null) {
|
||||
return;
|
||||
}
|
||||
const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 100;
|
||||
const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64;
|
||||
if (offsetTop < 0) {
|
||||
e0.scrollBy({top: offsetTop, behavior: "smooth"});
|
||||
} else if (offsetBottom > 0) {
|
||||
e0.scrollBy({top: offsetBottom, behavior: "smooth"});
|
||||
}
|
||||
}
|
||||
|
||||
var timeout = null;
|
||||
window.addEventListener('scroll', function() {
|
||||
activeTOC();
|
||||
if(timeout !== null) clearTimeout(timeout);
|
||||
timeout = setTimeout(function() {
|
||||
scrollTOC();
|
||||
}.bind(this), 300);
|
||||
});
|
||||
})
|
||||
},
|
||||
leftbar: () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue