[feat] sidebar refactoring
This commit is contained in:
xaoxuu
parent
662f59274b
commit
016d75f1ba
25
_config.yml
25
_config.yml
|
|
@ -20,8 +20,8 @@ open_graph:
|
|||
######## Sidebar ########
|
||||
# 左上角显示的 logo 区域，包含图标、大标题、副标题
|
||||
logo:
|
||||
avatar: '[config.avatar](/about/)' # you can set avatar link in _config.yml or '[https://xxx.png](/about/)'
|
||||
title: '[config.title](/)' # you can set html tag like: '[<img no-lazy height="32px" src="xxx"/>](/)'
|
||||
avatar: '[${config.avatar}](/about/)' # you can set avatar link in _config.yml or '[https://xxx.png](/about/)'
|
||||
title: '[${config.title}](/)' # you can set html tag like: '[<img no-lazy height="32px" src="xxx"/>](/)'
|
||||
subtitle: '' # '文字1 | 文字2' (鼠标放上去会切换到文字2)
|
||||
|
||||
# 侧边栏主功能导航菜单
|
||||
|
|
@ -40,41 +40,41 @@ menu:
|
|||
site_tree:
|
||||
# 主页配置
|
||||
home:
|
||||
sidebar: search, recent, timeline
|
||||
# 博客配置
|
||||
sidebar: recent, timeline
|
||||
# 博客列表配置
|
||||
blog:
|
||||
base_dir: blog # 只影响自动生成的页面路径
|
||||
menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
|
||||
sidebar: search_blog, recent, timeline # for categories/tags/archives
|
||||
sidebar: recent, timeline # for categories/tags/archives
|
||||
nav_tabs: # 近期发布 分类 标签 专栏 归档 and ...
|
||||
# '朋友文章': /friends/rss/
|
||||
# 博客文章配置
|
||||
post:
|
||||
menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
|
||||
sidebar: search_blog, toc, related, ghrepo, ghissues # for pages using 'layout:post'
|
||||
sidebar: toc, related, ghrepo, ghissues, recent # for pages using 'layout:post'
|
||||
# 博客专栏配置
|
||||
topic:
|
||||
base_dir: topic # 只影响自动生成的页面路径
|
||||
menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 topic 的页面默认使用这里配置的 menu_id
|
||||
sidebar: search_blog, toc, related # for topic
|
||||
sidebar: toc, related # for topic
|
||||
# wiki配置
|
||||
wiki:
|
||||
base_dir: wiki # 只影响自动生成的页面路径
|
||||
menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
|
||||
sidebar: search_docs, toc, ghissues, related # for wiki
|
||||
sidebar: toc, ghissues, related, recent # for wiki
|
||||
# 作者信息配置
|
||||
author:
|
||||
base_dir: author # 只影响自动生成的页面路径
|
||||
menu_id: post
|
||||
sidebar: search_blog, recent, timeline
|
||||
sidebar: recent, timeline
|
||||
# 错误页配置
|
||||
error_page:
|
||||
menu_id: post
|
||||
'404': '/404.html'
|
||||
sidebar: search, recent, timeline
|
||||
sidebar: recent, timeline
|
||||
# 其它自定义页面配置 layout: page
|
||||
page:
|
||||
sidebar: toc, search
|
||||
sidebar: toc, timeline
|
||||
|
||||
|
||||
|
||||
|
|
@ -448,7 +448,7 @@ style:
|
|||
border-radius:
|
||||
card: 12px
|
||||
block: 12px
|
||||
bar: 6px
|
||||
bar: 8px
|
||||
image: 6px
|
||||
color:
|
||||
# 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
|
||||
|
|
@ -485,6 +485,7 @@ default:
|
|||
project: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/image/2779789.png
|
||||
banner: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/banner/books.jpg
|
||||
topic: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/image/10433048.png
|
||||
sidebar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg
|
||||
|
||||
api_host:
|
||||
ghapi: https://api.github.com
|
||||
|
|
|
|||
|
|
@ -2,21 +2,7 @@
|
|||
# layout即组件布局，支持自定义的有：
|
||||
# - markdown: 渲染 md 文本
|
||||
#
|
||||
search:
|
||||
layout: search
|
||||
filter: auto # auto or 'path'
|
||||
|
||||
|
||||
search_blog:
|
||||
layout: search
|
||||
filter: /blog/ # auto or 'path'
|
||||
placeholder: 文章搜索
|
||||
|
||||
search_docs:
|
||||
layout: search
|
||||
filter: /wiki/ # auto or 'path'
|
||||
placeholder: 文档搜索
|
||||
|
||||
ghrepo:
|
||||
layout: ghrepo
|
||||
related:
|
||||
|
|
@ -33,7 +19,7 @@ ghissues:
|
|||
recent:
|
||||
layout: recent
|
||||
rss: # /atom.xml # npm i hexo-generator-feed
|
||||
limit: 5 # Count of posts
|
||||
limit: 10 # Count of posts
|
||||
|
||||
# TOC (valid only in layout:post/wiki)
|
||||
toc:
|
||||
|
|
@ -41,7 +27,7 @@ toc:
|
|||
list_number: false
|
||||
min_depth: 2
|
||||
max_depth: 5
|
||||
fallback: recent # Use a backup widget when toc does not exist.
|
||||
fallback: # recent # Use a backup widget when toc does not exist.
|
||||
collapse: false # true / false / auto
|
||||
|
||||
# github user info
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<% if (page.header != 'auto' && page.header != false) { %>
|
||||
<%- partial('../../sidebar/header', {where: 'main'}) %>
|
||||
<%- partial('../../sidebar/logo', {logo: theme.logo, where: 'main'}) %>
|
||||
<% } %>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class='float-panel mobile-only blur' style='display:none'>
|
||||
<button type='button' class='sidebar-toggle mobile' onclick='sidebar.toggle()'>
|
||||
<svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15301"><path d="M566.407 808.3c26.9-0.1 49.3-20.8 51.6-47.6-1.9-27.7-23.9-49.7-51.6-51.6h-412.6c-28.2-1.4-52.6 19.5-55.5 47.6 2.3 26.8 24.6 47.5 51.6 47.6h416.5v4z m309.3-249.9c26.9-0.1 49.3-20.8 51.6-47.6-2.2-26.8-24.6-47.5-51.6-47.6h-721.9c-27.7-2.8-52.5 17.4-55.3 45.1-0.1 0.8-0.1 1.7-0.2 2.5 0.9 27.2 23.6 48.5 50.7 47.6H875.707z m-103.1-245.9c26.9-0.1 49.3-20.8 51.6-47.6-0.4-28.3-23.2-51.1-51.5-51.6h-618.9c-29.5-1.1-54.3 21.9-55.5 51.4v0.2c1.4 27.8 25.2 49.2 53 47.8 0.8 0 1.7-0.1 2.5-0.2h618.8z" p-id="15302"></path><path d="M566.407 808.3c26.9-0.1 49.3-20.8 51.6-47.6-1.9-27.7-23.9-49.7-51.6-51.6h-412.6c-28.2-1.4-52.6 19.5-55.5 47.6 1.9 27.7 23.9 49.7 51.6 51.6h416.5z m309.3-249.9c26.9-0.1 49.3-20.8 51.6-47.6-2.2-26.8-24.6-47.5-51.6-47.6h-721.9c-27.7-2.8-52.5 17.4-55.3 45.1-0.1 0.8-0.1 1.7-0.2 2.5 0.9 27.2 23.6 48.5 50.7 47.6H875.707z m-103.1-245.9c26.9-0.1 49.3-20.8 51.6-47.6-0.4-28.3-23.2-51.1-51.5-51.6h-618.9c-29.5-1.1-54.3 21.9-55.5 51.4v0.2c1.4 27.8 25.2 49.2 53 47.8 0.8 0 1.7-0.1 2.5-0.2h618.8z" p-id="15303"></path></svg>
|
||||
<svg t="1705412886951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8331" width="200" height="200"><path d="M638.72 970.666667h-256c-118.186667 0-198.272-25.002667-251.946667-78.72S52.053333 758.186667 52.053333 640V384c0-118.186667 25.002667-198.272 78.72-251.946667S264.533333 53.333333 382.72 53.333333h256c118.186667 0 198.272 25.002667 251.946667 78.72S969.386667 265.813333 969.386667 384v256c0 118.186667-25.002667 198.272-78.72 251.946667S756.906667 970.666667 638.72 970.666667z m-256-853.333334c-100.096 0-165.802667 19.2-206.72 59.946667S116.053333 283.904 116.053333 384v256c0 100.096 19.072 165.802667 59.946667 206.72S282.624 906.666667 382.72 906.666667h256c100.096 0 165.802667-19.072 206.72-59.946667S905.386667 740.096 905.386667 640V384c0-100.096-19.072-165.802667-59.946667-206.72S738.816 117.333333 638.72 117.333333z" p-id="8332"></path><path d="M638.72 970.666667a32 32 0 0 1-32-32V85.333333a32 32 0 0 1 32-32 32 32 0 0 1 32 32v853.333334a32 32 0 0 1-32 32zM340.053333 653.226667a31.914667 31.914667 0 0 1-22.613333-9.386667 32 32 0 0 1 0-45.269333L404.053333 512 317.44 425.386667a32 32 0 0 1 0-45.226667 32 32 0 0 1 45.226667 0l109.226666 109.226667a32 32 0 0 1 0 45.269333L362.666667 643.84a31.914667 31.914667 0 0 1-22.613334 9.386667z" p-id="8333"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<%
|
||||
var proj;
|
||||
if (page.layout === 'wiki' && page.wiki) {
|
||||
proj = theme.wiki.tree[page.wiki];
|
||||
}
|
||||
function layoutTitle(main, url, sub) {
|
||||
var el = '';
|
||||
el += '<a class="title" href="' + url_for(url || "/") + '">';
|
||||
el += '<div class="main" ff="title">' + main + '</div>';
|
||||
if (sub) {
|
||||
let arr = sub.split('|');
|
||||
if (arr.length > 1) {
|
||||
el += '<div class="sub normal cap">' + arr.shift().trim() + '</div>';
|
||||
el += '<div class="sub hover cap" style="opacity:0">' + arr.join('|') + '</div>';
|
||||
} else {
|
||||
el += '<div class="sub cap">' + sub + '</div>';
|
||||
}
|
||||
}
|
||||
el += '</a>';
|
||||
return el;
|
||||
}
|
||||
|
||||
function layoutDiv() {
|
||||
var el = '';
|
||||
if (page.layout == 'wiki' && page.menu_id == 'wiki') {
|
||||
return el;
|
||||
}
|
||||
el += '<header class="header';
|
||||
if (where == 'main') {
|
||||
el += ' mobile-only';
|
||||
}
|
||||
el += '">';
|
||||
|
||||
el += '<div class="logo-wrap">';
|
||||
if (md_text(theme.logo.avatar)) {
|
||||
el += '<a class="avatar" href="' + url_for(md_link(theme.logo.avatar) || "/") + '">';
|
||||
if (theme.style.animated_avatar.animate) {
|
||||
el += '<div class="bg" style="opacity:0;background-image:url(' + theme.style.animated_avatar.background + ');"></div>';
|
||||
}
|
||||
el += '<img no-lazy class="avatar" src="' + md_text(theme.logo.avatar) + '">';
|
||||
el += '</a>';
|
||||
}
|
||||
let main = md_text(theme.logo.title);
|
||||
if (main) {
|
||||
let url = md_link(theme.logo.title);
|
||||
el += layoutTitle(main, url, theme.logo.subtitle);
|
||||
}
|
||||
el += '</div>';
|
||||
|
||||
if (where != 'main') {
|
||||
el += partial('menu', {where: where});
|
||||
}
|
||||
el += '</header>';
|
||||
return el;
|
||||
}
|
||||
%>
|
||||
|
||||
<%- layoutDiv() %>
|
||||
|
|
@ -28,10 +28,11 @@ if (page.sidebar == null) {
|
|||
if (page.layout == 'wiki' && page.wiki && theme.wiki?.tree[page.wiki]?.sidebar) {
|
||||
sidebar = theme.wiki.tree[page.wiki].sidebar
|
||||
}
|
||||
|
||||
|
||||
page.sidebar = sidebar
|
||||
}
|
||||
|
||||
console.log('s', sidebar);
|
||||
// parse array string
|
||||
if (typeof page.sidebar == 'string') {
|
||||
page.sidebar = page.sidebar.replace(/ /g, '').split(',');
|
||||
|
|
@ -59,31 +60,6 @@ function layoutWidgets() {
|
|||
proj = theme.wiki.tree[page.wiki];
|
||||
}
|
||||
el += '<div class="widgets">';
|
||||
if (page.layout == 'wiki' && proj && page.menu_id == 'wiki') {
|
||||
el += '<widget class="widget-wrapper logo-wrap wiki"><div class="widget-body">';
|
||||
// all products
|
||||
el += '<a style="filter: grayscale(100%)" class="wiki-home cap" href="' + url_for(theme.site_tree.wiki.base_dir) + '">';
|
||||
el += '<svg aria-hidden="true" viewBox="0 0 16 16" width="1.2em" height="1.2em" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>';
|
||||
el += __('btn.all_wiki');
|
||||
el += '</a>';
|
||||
// this product
|
||||
if (proj == undefined) {
|
||||
// 如果没有项目名，则使用menu中显示的名字
|
||||
if (page.menu_id && theme.menu[page.menu_id] && md_link(theme.menu[page.menu_id])) {
|
||||
proj = {
|
||||
path: md_link(theme.menu[page.menu_id]),
|
||||
wiki: __(md_text(theme.menu[page.menu_id]))
|
||||
};
|
||||
}
|
||||
}
|
||||
if (proj != undefined) {
|
||||
let main = proj.name || proj.title || page.wiki || page.title;
|
||||
let url = proj.homepage.path;
|
||||
let sub = proj.subtitle;
|
||||
el += layoutTitle(main, url, sub);
|
||||
}
|
||||
el += '</div></widget>';
|
||||
}
|
||||
if (page.sidebar) {
|
||||
page.sidebar.forEach((w, i) => {
|
||||
let name = ''
|
||||
|
|
@ -142,9 +118,62 @@ 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'})
|
||||
}
|
||||
|
||||
function layoutNavArea() {
|
||||
var search = {}
|
||||
if (page.search) {
|
||||
search = page.search
|
||||
} else if (page.wiki && page.layout == 'wiki' && theme.wiki.tree[page.wiki]) {
|
||||
const proj = theme.wiki.tree[page.wiki]
|
||||
if (proj.search) {
|
||||
search = proj.search
|
||||
}
|
||||
} else if (page.topic && page.layout == 'topic' && theme.topic.tree[page.topic]) {
|
||||
const topic = theme.topic.tree[page.topic]
|
||||
if (topic.search) {
|
||||
search = topic.search
|
||||
}
|
||||
}
|
||||
var el = ''
|
||||
el += `<div class="nav-area">`
|
||||
el += partial('search', {item: search})
|
||||
el += partial('menu', {where: 'sidebar'})
|
||||
el += `</div>`
|
||||
return el
|
||||
}
|
||||
%>
|
||||
<% if (page.header == undefined || page.header == 'left' || page.header == 'auto') { %>
|
||||
<%- partial('header', {where: 'sidebar'}) %>
|
||||
<% } %>
|
||||
<%- layoutLogo() %>
|
||||
<%- layoutNavArea() %>
|
||||
<%- layoutWidgets() %>
|
||||
<%- layoutFooterDiv() %>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<%
|
||||
// logo.icon, logo.title, logo.subtitle, logo.url
|
||||
function layoutTitle(main, url, sub) {
|
||||
var el = ''
|
||||
el += `<a class="title" href="${url_for(url || "/")}">`
|
||||
el += `<div class="main" ff="title">${main}</div>`
|
||||
if (sub) {
|
||||
const arr = sub.split('|')
|
||||
if (arr.length > 1) {
|
||||
el += `<div class="sub normal cap">${arr.shift().trim()}</div>`
|
||||
el += `<div class="sub hover cap" style="opacity:0">${arr.join('|')}</div>`
|
||||
} else {
|
||||
el += `<div class="sub cap">${sub}</div>`
|
||||
}
|
||||
}
|
||||
el += `</a>`
|
||||
return el
|
||||
}
|
||||
|
||||
function layoutDiv() {
|
||||
var el = ''
|
||||
el += `<header class="header${where == 'main' ? ' mobile-only' : ''}">`
|
||||
el += `<div class="logo-wrap">`
|
||||
if (logo.icon) {
|
||||
el += `<div class="icon"><img no-lazy class="icon" src="${md_text(logo.icon)}"></div>`
|
||||
} else if (md_text(logo.avatar)) {
|
||||
el += `<a class="avatar" href="${url_for(md_link(logo.avatar) || '/')}">`
|
||||
if (theme.style.animated_avatar.animate) {
|
||||
el += `<div class="bg" style="opacity:0;background-image:url(${theme.style.animated_avatar.background});"></div>`
|
||||
}
|
||||
el += `<img no-lazy class="avatar" src="${md_text(logo.avatar)}">`
|
||||
el += `</a>`
|
||||
}
|
||||
const main = md_text(logo.title)
|
||||
if (main) {
|
||||
let url = md_link(logo.title)
|
||||
el += layoutTitle(main, url, logo.subtitle)
|
||||
}
|
||||
el += `</div>`
|
||||
el += '</header>'
|
||||
return el
|
||||
}
|
||||
%>
|
||||
|
||||
<%- layoutDiv() %>
|
||||
|
|
@ -1,26 +1,18 @@
|
|||
<%
|
||||
function layoutDiv() {
|
||||
var el = '';
|
||||
el += '<nav class="menu dis-select';
|
||||
if (where == 'main') {
|
||||
el += ' mobile-hidden';
|
||||
}
|
||||
el += '">';
|
||||
var el = ''
|
||||
el += `<nav class="menu dis-select${where == 'main' ? ' mobile-hidden' : ''}">`
|
||||
for (let id of Object.keys(theme.menu)) {
|
||||
let item = theme.menu[id];
|
||||
let item = theme.menu[id]
|
||||
if (item == undefined || item.length == 0) {
|
||||
continue;
|
||||
continue
|
||||
}
|
||||
el += '<a class="nav-item';
|
||||
if (id == page.menu_id) {
|
||||
el += ' active';
|
||||
}
|
||||
el += '" href="' + url_for(md_link(item)) + '">';
|
||||
el += __(md_text(item));
|
||||
el += '</a>';
|
||||
el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" href="${url_for(md_link(item))}">`
|
||||
el += __(md_text(item))
|
||||
el += `</a>`
|
||||
}
|
||||
el += '</nav>';
|
||||
return el;
|
||||
el += `</nav>`
|
||||
return el
|
||||
}
|
||||
%>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<%
|
||||
if (item.filter == null) {
|
||||
item.filter = 'auto'
|
||||
}
|
||||
function layoutDiv() {
|
||||
var el = ''
|
||||
el += `<div class="search-wrapper" id="search-wrapper">`
|
||||
el += `<form class="search-form">`
|
||||
var filter = ''
|
||||
if (item.filter == 'auto') {
|
||||
if (page.layout == 'wiki') {
|
||||
let matches = page.path.match(/(.*?)\/(.*?)\//i)
|
||||
if (matches?.length > 0) {
|
||||
filter = matches[0]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (item.filter?.length > 0) {
|
||||
filter = item.filter
|
||||
}
|
||||
}
|
||||
el += `<a class="search-button" onclick="document.getElementById("search-input").focus();">`
|
||||
el += `<svg t="1705074644177" class="icon search-icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="200" height="200"><path d="M1008.839137 935.96571L792.364903 719.491476a56.783488 56.783488 0 0 0-80.152866 0 358.53545 358.53545 0 1 1 100.857314-335.166073 362.840335 362.840335 0 0 1-3.689902 170.145468 51.248635 51.248635 0 1 0 99.217358 26.444296 462.057693 462.057693 0 1 0-158.255785 242.303546l185.930047 185.725053a51.248635 51.248635 0 0 0 72.568068 0 51.248635 51.248635 0 0 0 0-72.978056z" p-id="1561"></path><path d="M616.479587 615.969233a50.428657 50.428657 0 0 0-61.498362-5.534852 174.655348 174.655348 0 0 1-177.525271 3.484907 49.403684 49.403684 0 0 0-58.833433 6.76482l-3.074918 2.869923a49.403684 49.403684 0 0 0 8.609771 78.10292 277.767601 277.767601 0 0 0 286.992355-5.739847 49.403684 49.403684 0 0 0 8.404776-76.667958z" p-id="1562"></path></svg>`
|
||||
el += `</a>`
|
||||
el += `<input type="text" class="search-input" id="search-input"`
|
||||
if (filter.length > 0) {
|
||||
if (!filter.startsWith('/')) {
|
||||
filter = '/' + filter
|
||||
}
|
||||
el += ` data-filter="${filter}"`
|
||||
el += ` placeholder="${item.placeholder || __('search.search_in', filter)}">`
|
||||
} else {
|
||||
el += ` placeholder="${item.placeholder || __('search.search')}">`
|
||||
}
|
||||
el += `</form>`
|
||||
el += `<div id="search-result"></div>`
|
||||
el += `<div class="search-no-result">${__('search.no_results')}</div>`
|
||||
el += `</div>`
|
||||
return el
|
||||
}
|
||||
%>
|
||||
<%- layoutDiv() %>
|
||||
|
|
@ -23,7 +23,7 @@ function layoutDiv() {
|
|||
}
|
||||
el += '<widget class="widget-wrapper timeline">';
|
||||
if (item.title) {
|
||||
el += '<div class="widget-header cap theme dis-select">';
|
||||
el += '<div class="widget-header cap dis-select">';
|
||||
el += '<span class="name">' + item.title + '</span>';
|
||||
el += '</div>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,10 +45,6 @@ function layoutDiv() {
|
|||
el += '<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>';
|
||||
el += 'Follow';
|
||||
el += '</a>';
|
||||
// menu
|
||||
if (item.menu) {
|
||||
el += partial('../sidebar/menu', {where: 'sidebar'});
|
||||
}
|
||||
el += '</div>';
|
||||
el += '</widget>';
|
||||
return el;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ function layoutDiv() {
|
|||
var el = '';
|
||||
el += '<widget class="widget-wrapper markdown">';
|
||||
if (item.title?.length > 0) {
|
||||
el += '<div class="widget-header cap theme dis-select">';
|
||||
el += '<div class="widget-header cap dis-select">';
|
||||
el += '<span class="name">' + item.title + '</span>';
|
||||
el += '</div>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<%
|
||||
function layoutDiv() {
|
||||
var el = '<widget class="widget-wrapper recent">';
|
||||
var el = '<widget class="widget-wrapper post-list">';
|
||||
// header
|
||||
el += '<div class="widget-header cap theme dis-select">';
|
||||
el += '<div class="widget-header cap dis-select">';
|
||||
el += '<span class="name">' + __("meta.recent_update") + '</span>';
|
||||
if (item.rss) {
|
||||
el += '<a class="cap-action" id="rss" title="Subscribe" href="' + item.rss + '">';
|
||||
|
|
@ -25,11 +25,12 @@ function layoutDiv() {
|
|||
arr = site.posts.filter( p => p.title && p.title.length > 0)
|
||||
arr = arr.sort("updated", -1)
|
||||
}
|
||||
el += '<div class="widget-body related-posts fs14">';
|
||||
el += '<div class="widget-body fs14">';
|
||||
arr.length = item.limit
|
||||
arr.forEach(post => {
|
||||
if (!post) { return }
|
||||
el += '<a class="item title" href="' + url_for(post.link || post.path) + '">';
|
||||
const isActive = post.path == page.path
|
||||
el += `<a class="item title${post.path == page.path ? ' active' : ''}" href="${url_for(post.link || post.path)}">`
|
||||
el += '<span class="title">'
|
||||
if (post.layout == 'wiki') {
|
||||
let proj = theme.wiki.tree[post.wiki];
|
||||
|
|
@ -39,6 +40,9 @@ function layoutDiv() {
|
|||
}
|
||||
}
|
||||
el += (post.title || post.seo_title || post.wiki) + '</span>';
|
||||
if (isActive) {
|
||||
el += `<svg t="1705415018387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14793" width="200" height="200"><path d="M256 896a42.666667 42.666667 0 0 1-20.906667-5.546667A42.666667 42.666667 0 0 1 213.333333 853.333333V227.413333A97.28 97.28 0 0 1 307.2 128h409.6A97.28 97.28 0 0 1 810.666667 227.413333V853.333333a42.666667 42.666667 0 0 1-21.333334 36.693334 42.666667 42.666667 0 0 1-42.666666 0l-241.92-136.96-227.413334 136.533333A42.666667 42.666667 0 0 1 256 896z" p-id="14794"></path></svg>`
|
||||
}
|
||||
el += '</a>';
|
||||
el += '';
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,14 +8,18 @@ function relatedPostsInTopic() {
|
|||
return ''
|
||||
}
|
||||
var el = ''
|
||||
el += `<widget class="widget-wrapper recent">`
|
||||
el += `<div class="widget-header cap theme dis-select">`
|
||||
el += `<widget class="widget-wrapper post-list">`
|
||||
el += `<div class="widget-header cap dis-select">`
|
||||
el += `<span class="name">${__('btn.topic') + __('symbol.colon') + topic.name}</span>`
|
||||
el += `</div>`
|
||||
el += `<div class="widget-body related-posts">`
|
||||
el += `<div class="widget-body">`
|
||||
for (let post of topic.pages) {
|
||||
el += `<a class="item${post.path == page.path ? ' active' : ''}" href="${url_for(post.path)}">`
|
||||
const isActive = post.path == page.path
|
||||
el += `<a class="item${isActive ? ' active' : ''}" href="${url_for(post.path)}">`
|
||||
el += `<span class="title">${post.title}</span>`
|
||||
if (isActive) {
|
||||
el += `<svg t="1705415018387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14793" width="200" height="200"><path d="M256 896a42.666667 42.666667 0 0 1-20.906667-5.546667A42.666667 42.666667 0 0 1 213.333333 853.333333V227.413333A97.28 97.28 0 0 1 307.2 128h409.6A97.28 97.28 0 0 1 810.666667 227.413333V853.333333a42.666667 42.666667 0 0 1-21.333334 36.693334 42.666667 42.666667 0 0 1-42.666666 0l-241.92-136.96-227.413334 136.533333A42.666667 42.666667 0 0 1 256 896z" p-id="14794"></path></svg>`
|
||||
}
|
||||
el += `</a>`
|
||||
}
|
||||
el += `</div>`
|
||||
|
|
@ -30,11 +34,11 @@ function relatedWiki() {
|
|||
const relatedItems = thisItemObject.relatedItems
|
||||
var el = ''
|
||||
for (let relatedItem of relatedItems) {
|
||||
el += `<widget class="widget-wrapper related">`
|
||||
el += `<div class="widget-header cap theme dis-select">`
|
||||
el += `<widget class="widget-wrapper post-card">`
|
||||
el += `<div class="widget-header cap dis-select">`
|
||||
el += `<span class="name">${__('meta.more') + __('symbol.colon') + relatedItem.name}</span>`
|
||||
el += `</div>`
|
||||
el += `<div class="widget-body related-posts">`
|
||||
el += `<div class="widget-body">`
|
||||
for (let id of relatedItem.items) {
|
||||
// 同一个分组中的其它项目
|
||||
let item = theme.wiki.tree[id]
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
<%
|
||||
function layoutDiv() {
|
||||
var el = '<widget class="widget-wrapper search">'
|
||||
el += '<div class="widget-body">'
|
||||
el += '<div class="search-wrapper" id="search-wrapper">'
|
||||
el += '<form class="search-form">'
|
||||
var filter = ''
|
||||
if (item.filter == 'auto') {
|
||||
if (page.layout == 'wiki') {
|
||||
let matches = page.path.match(/(.*?)\/(.*?)\//i)
|
||||
if (matches?.length > 0) {
|
||||
filter = matches[0]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (item.filter?.length > 0) {
|
||||
filter = item.filter
|
||||
}
|
||||
}
|
||||
el += '<input type="text" class="search-input" id="search-input"'
|
||||
if (filter.length > 0) {
|
||||
if (!filter.startsWith('/')) {
|
||||
filter = '/' + filter
|
||||
}
|
||||
el += ' data-filter="' + filter + '"'
|
||||
el += ' placeholder="' + (item.placeholder || __('search.search_in', filter)) + '">'
|
||||
} else {
|
||||
el += ' placeholder="' + (item.placeholder || __('search.search')) + '">'
|
||||
}
|
||||
el += '<svg t="1705074644177" class="icon search-icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="200" height="200"><path d="M1008.839137 935.96571L792.364903 719.491476a56.783488 56.783488 0 0 0-80.152866 0 358.53545 358.53545 0 1 1 100.857314-335.166073 362.840335 362.840335 0 0 1-3.689902 170.145468 51.248635 51.248635 0 1 0 99.217358 26.444296 462.057693 462.057693 0 1 0-158.255785 242.303546l185.930047 185.725053a51.248635 51.248635 0 0 0 72.568068 0 51.248635 51.248635 0 0 0 0-72.978056z" p-id="1561"></path><path d="M616.479587 615.969233a50.428657 50.428657 0 0 0-61.498362-5.534852 174.655348 174.655348 0 0 1-177.525271 3.484907 49.403684 49.403684 0 0 0-58.833433 6.76482l-3.074918 2.869923a49.403684 49.403684 0 0 0 8.609771 78.10292 277.767601 277.767601 0 0 0 286.992355-5.739847 49.403684 49.403684 0 0 0 8.404776-76.667958z" p-id="1562"></path></svg>'
|
||||
el += '</form>'
|
||||
el += '<div id="search-result"></div>'
|
||||
el += '<div class="search-no-result">' + __('search.no_results') + '</div>'
|
||||
el += '</div>'
|
||||
el += '</div>'
|
||||
el += '</widget>'
|
||||
return el
|
||||
}
|
||||
%>
|
||||
<%- layoutDiv() %>
|
||||
|
|
@ -10,7 +10,7 @@ function layoutDiv() {
|
|||
opts.class = 'tag ';
|
||||
el += '<widget class="widget-wrapper tagcloud">';
|
||||
if (item.title) {
|
||||
el += '<div class="widget-header cap theme dis-select">';
|
||||
el += '<div class="widget-header cap dis-select">';
|
||||
el += '<span class="name">' + item.title + '</span>';
|
||||
el += '</div>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ function layoutDiv() {
|
|||
}
|
||||
el += '<widget class="widget-wrapper timeline">';
|
||||
if (item.title) {
|
||||
el += '<div class="widget-header cap theme dis-select">';
|
||||
el += '<div class="widget-header cap dis-select">';
|
||||
el += '<span class="name">' + item.title + '</span>';
|
||||
el += '</div>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,6 +40,9 @@ function layoutDocTree(pages) {
|
|||
}
|
||||
el += `<a class="doc-tree-link${isActive}" href="${href}">`
|
||||
el += `<span class="toc-text">${p.title}</span>`
|
||||
if (isActive.length > 0) {
|
||||
el += `<svg t="1705415018387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14793" width="200" height="200"><path d="M256 896a42.666667 42.666667 0 0 1-20.906667-5.546667A42.666667 42.666667 0 0 1 213.333333 853.333333V227.413333A97.28 97.28 0 0 1 307.2 128h409.6A97.28 97.28 0 0 1 810.666667 227.413333V853.333333a42.666667 42.666667 0 0 1-21.333334 36.693334 42.666667 42.666667 0 0 1-42.666666 0l-241.92-136.96-227.413334 136.533333A42.666667 42.666667 0 0 1 256 896z" p-id="14794"></path></svg>`
|
||||
}
|
||||
el += `</a>`
|
||||
}
|
||||
if (p.path === page.path) {
|
||||
|
|
@ -108,7 +111,8 @@ function layoutDiv(fallback) {
|
|||
}
|
||||
el += `</widget>`
|
||||
} else if (item.fallback) {
|
||||
el += partial(item.fallback, {item: theme.data.widgets[item.fallback]})
|
||||
const fallback = theme.data.widgets[item.fallback]
|
||||
el += partial(fallback.layout, {item: fallback})
|
||||
}
|
||||
return el
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,17 @@
|
|||
<%- partial('_partial/cover/index') %>
|
||||
<div class='l_body' id='start'>
|
||||
<aside class='l_left' layout='<%- page.layout %>'>
|
||||
<%- partial('_partial/sidebar/index') %>
|
||||
<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" %>'>
|
||||
<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'>
|
||||
|
|
|
|||
|
|
@ -7,33 +7,35 @@
|
|||
|
||||
hexo.extend.helper.register('md_text', function(args) {
|
||||
if (args == undefined) {
|
||||
return '';
|
||||
return ''
|
||||
}
|
||||
let tmp = args.split('](');
|
||||
let tmp = args.split('](')
|
||||
if (tmp.length > 1) {
|
||||
tmp = tmp[0];
|
||||
tmp = tmp[0]
|
||||
if (tmp.length > 1) {
|
||||
tmp = tmp.substring(1, tmp.length);
|
||||
tmp = tmp.substring(1, tmp.length)
|
||||
}
|
||||
}
|
||||
if (tmp == 'config.title') {
|
||||
tmp = hexo.config.title;
|
||||
} else if (tmp == 'config.avatar') {
|
||||
tmp = hexo.config.avatar;
|
||||
if (tmp == 'config.title' || tmp == '${config.title}') {
|
||||
tmp = hexo.config.title
|
||||
} else if (tmp == 'config.avatar' || tmp == '${config.avatar}') {
|
||||
tmp = hexo.config.avatar
|
||||
}
|
||||
return tmp;
|
||||
});
|
||||
return tmp
|
||||
})
|
||||
|
||||
hexo.extend.helper.register('md_link', function(args) {
|
||||
if (args == undefined) {
|
||||
return '';
|
||||
return ''
|
||||
}
|
||||
let tmp = args.split('](');
|
||||
let tmp = args.split('](')
|
||||
if (tmp.length > 1) {
|
||||
tmp = tmp[1];
|
||||
tmp = tmp[1]
|
||||
if (tmp.length > 1) {
|
||||
tmp = tmp.substring(0, tmp.length-1);
|
||||
tmp = tmp.substring(0, tmp.length-1)
|
||||
}
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
return tmp;
|
||||
});
|
||||
return tmp
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
:root
|
||||
--blur-px: 12px
|
||||
--blur-bg: alpha(white, .5)
|
||||
if hexo-config('style.darkmode') == 'auto'
|
||||
@media (prefers-color-scheme: dark)
|
||||
:root
|
||||
--blur-bg: alpha(black, .5)
|
||||
if hexo-config('style.darkmode') == 'always'
|
||||
:root
|
||||
--blur-bg: alpha(black, .5)
|
||||
--blur-bg: var(--alpha50)
|
||||
|
||||
blur-effect()
|
||||
background: var(--blur-bg)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
font-weight: 500
|
||||
font-size: $fs-12
|
||||
scrollbar-width: none
|
||||
color: var(--text-p3)
|
||||
color: var(--text-p2)
|
||||
&.blue
|
||||
color: darken($color-md-blue, 6)
|
||||
&.cyan
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@
|
|||
cursor: pointer
|
||||
color: var(--text-p0)
|
||||
background: none
|
||||
padding: 0.5rem
|
||||
padding: 8px
|
||||
line-height: 0
|
||||
font-size: 20px
|
||||
font-size: 24px
|
||||
margin: 0
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,10 @@ set_text_light()
|
|||
:root
|
||||
--site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
|
||||
--card: hsl($color-block-h, $color-block-s, 100)
|
||||
--alpha20: rgba(white, 0.2)
|
||||
--alpha50: rgba(white, 0.5)
|
||||
--alpha75: rgba(white, 0.75)
|
||||
--alpha100: white
|
||||
--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)
|
||||
|
|
@ -48,6 +52,10 @@ set_darkmode()
|
|||
--block: hsl($color-block-h, $color-block-s, 16)
|
||||
--block-border: hsl($color-block-h, $color-block-s, 24)
|
||||
--block-hover: hsl($color-block-h, $color-block-s, 20)
|
||||
--alpha20: rgba(black, 0.2)
|
||||
--alpha50: rgba(black, 0.5)
|
||||
--alpha75: rgba(black, 0.75)
|
||||
--alpha100: black
|
||||
set_text_light()
|
||||
@media screen and (max-width: $device-mobile-max)
|
||||
--site-bg: black
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
flex-shrink: 0
|
||||
position: sticky
|
||||
position: -webkit-sticky
|
||||
top: 0
|
||||
top: 8px
|
||||
|
||||
.l_body .l_main
|
||||
flex-shrink: 1
|
||||
|
|
@ -20,6 +20,17 @@
|
|||
|
||||
|
||||
// 手机布局
|
||||
.main-mask
|
||||
position: fixed
|
||||
pointer-events: none
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
background: rgba(black, 0.5)
|
||||
z-index: 9
|
||||
opacity 0
|
||||
trans1 opacity
|
||||
@media screen and (max-width: $device-mobile-max)
|
||||
.mobile-only
|
||||
display: block !important
|
||||
|
|
@ -29,10 +40,10 @@
|
|||
position: fixed
|
||||
transform: translateX(-320px)
|
||||
margin: 0
|
||||
left: 0
|
||||
left: 8px
|
||||
background: var(--site-bg)
|
||||
box-shadow: $boxshadow-card-float
|
||||
z-index: 9
|
||||
z-index: 10
|
||||
.l_main
|
||||
max-width: 100%
|
||||
.l_body.mobile
|
||||
|
|
@ -41,3 +52,6 @@
|
|||
.l_body.mobile.sidebar
|
||||
.l_left
|
||||
transform: translateX(0px)
|
||||
.main-mask
|
||||
opacity 1
|
||||
pointer-events: inherit
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
// list
|
||||
.post-list
|
||||
.l_main .post-list
|
||||
margin: 1rem
|
||||
.post-title:first-child
|
||||
margin-top: .5rem
|
||||
|
||||
.post-list
|
||||
.l_main .post-list
|
||||
.post-title
|
||||
font-weight: 500
|
||||
margin: 1.25rem 0 .75rem 0
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
margin-left: "calc(2 * %s)" % var(--gap-l)
|
||||
margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
|
||||
@media screen and (min-width: $device-mobile-max)
|
||||
padding-top: "calc(2 * %s)" % var(--gap-l)
|
||||
padding-top: 8px
|
||||
@media screen and (max-width: $device-mobile-max)
|
||||
padding-top: 1rem
|
||||
header
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.l_left>.footer
|
||||
.l_left footer.footer
|
||||
margin: 0.5rem var(--gap-l) 1rem
|
||||
|
||||
.social-wrap
|
||||
|
|
@ -9,23 +9,15 @@
|
|||
line-height: 0
|
||||
display: inline-block
|
||||
padding: 6px
|
||||
border-radius: 4px
|
||||
border-radius: 32px
|
||||
filter: grayscale(100%)
|
||||
overflow: hidden
|
||||
background: transparent
|
||||
trans3: box-shadow background transform
|
||||
&:hover
|
||||
color: $color-hover
|
||||
z-index: 1
|
||||
filter: unset
|
||||
transform: translateY(-1px)
|
||||
background: linear-gradient(145deg, #ddd, #fff)
|
||||
box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff
|
||||
if hexo-config('style.darkmode') == 'auto'
|
||||
@media (prefers-color-scheme: dark)
|
||||
box-shadow: none
|
||||
if hexo-config('style.darkmode') == 'always'
|
||||
box-shadow: none
|
||||
background: var(--alpha100)
|
||||
|
||||
.proj-wrap
|
||||
display: grid
|
||||
|
|
|
|||
|
|
@ -1,44 +1,15 @@
|
|||
.l_left
|
||||
nav.menu
|
||||
margin-bottom: 0
|
||||
|
||||
nav.menu
|
||||
margin: 1rem 0
|
||||
background: var(--block)
|
||||
border: 1px solid var(--block-border)
|
||||
border-radius: 6px
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
&::-webkit-scrollbar-track-piece
|
||||
background: transparent
|
||||
&::-webkit-scrollbar-thumb
|
||||
display: none
|
||||
a.nav-item
|
||||
text-overflow: ellipsis
|
||||
word-break: keep-all
|
||||
margin: 1px
|
||||
border-radius: 4px
|
||||
font-size: $fs-14
|
||||
font-weight: 500
|
||||
overflow: hidden
|
||||
padding: 0.375rem 0.5rem
|
||||
color: var(--text-p3)
|
||||
text-align: center
|
||||
&.active, &:hover
|
||||
color: var(--text-p1)
|
||||
background: var(--card)
|
||||
box-shadow: $boxshadow-button
|
||||
|
||||
.l_left .menu a.nav-item
|
||||
flex-grow: 1
|
||||
|
||||
|
||||
.logo-wrap
|
||||
display: flex
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
height: 48px
|
||||
img
|
||||
object-fit: cover
|
||||
.icon
|
||||
width: 48px
|
||||
height: 48px
|
||||
margin-right: 1rem
|
||||
border-radius: 4px
|
||||
a
|
||||
color: inherit
|
||||
display: flex
|
||||
|
|
@ -46,10 +17,10 @@ nav.menu
|
|||
a.avatar
|
||||
display: block
|
||||
position: relative
|
||||
width: 50px
|
||||
height: 50px
|
||||
width: 48px
|
||||
height: 48px
|
||||
flex-shrink: 0
|
||||
border-radius: 50px
|
||||
border-radius: 48px
|
||||
overflow: hidden
|
||||
margin-right: 1rem
|
||||
div.bg
|
||||
|
|
@ -58,7 +29,6 @@ nav.menu
|
|||
background-size: cover
|
||||
img.avatar
|
||||
margin: 2px
|
||||
object-fit: cover
|
||||
width: "calc(100% - 2 * %s)" % @margin
|
||||
height: "calc(100% - 2 * %s)" % @margin
|
||||
border-radius: @width
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
.nav-area .menu
|
||||
width: 100%
|
||||
display: grid
|
||||
margin: 8px 0
|
||||
grid-template-columns: repeat(4, 1fr)
|
||||
grid-gap: 8px
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
&::-webkit-scrollbar-track-piece
|
||||
background: transparent
|
||||
&::-webkit-scrollbar-thumb
|
||||
display: none
|
||||
|
||||
.nav-item
|
||||
box-sizing: border-box
|
||||
text-overflow: ellipsis
|
||||
word-break: keep-all
|
||||
width: 100%
|
||||
line-height: 40px
|
||||
border-radius: $border-bar
|
||||
font-size: $fs-15
|
||||
font-weight: 500
|
||||
color: var(--text-p3)
|
||||
text-align: center
|
||||
background: var(--alpha50)
|
||||
@supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
|
||||
backdrop-filter: saturate(200%) blur(var(--blur-px))
|
||||
-webkit-backdrop-filter: saturate(200%) blur(var(--blur-px))
|
||||
trans1 background
|
||||
position: relative
|
||||
&.active, &:hover
|
||||
color: var(--text-p1)
|
||||
background: var(--alpha100)
|
||||
&.active:after
|
||||
content: ''
|
||||
position absolute
|
||||
width: 16px
|
||||
height: 2px
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
border-radius: 2px
|
||||
bottom: 2px
|
||||
background: var(--text-p1)
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
.nav-area
|
||||
margin: 32px var(--gap-l) 8px
|
||||
|
|
@ -1,57 +1,80 @@
|
|||
.widgets .widget-wrapper.search
|
||||
margin-bottom: 0
|
||||
|
||||
.search-wrapper
|
||||
width: 100%
|
||||
>.search-form
|
||||
position: sticky
|
||||
margin-bottom: 8px
|
||||
top: 1rem
|
||||
height: 40px
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
transition: 0.38s ease-out
|
||||
z-index: 0
|
||||
border-radius: $border-bar
|
||||
color: var(--text-p0)
|
||||
background: var(--alpha50)
|
||||
&:has(input:focus)
|
||||
background: var(--alpha100)
|
||||
.search-input
|
||||
width: 100%
|
||||
padding: 0.5rem 0
|
||||
line-height: 1.5
|
||||
line-height: 16px
|
||||
box-sizing: border-box
|
||||
font-family: $ff-body
|
||||
font-size: $fs-13
|
||||
padding: 12px 0
|
||||
color: var(--text-p0)
|
||||
.search-button
|
||||
border-radius: $border-bar
|
||||
line-height: 40px
|
||||
.search-icon
|
||||
width: 44px
|
||||
margin-left: 4px
|
||||
color: var(--text-p2)
|
||||
margin-bottom: 2px
|
||||
path[p-id="1562"]
|
||||
color: $color-theme
|
||||
|
||||
|
||||
&.noresult[searching='true']
|
||||
.search-icon
|
||||
path[p-id="1562"]
|
||||
color: $c-red
|
||||
.search-form
|
||||
border: 1px solid $c-red
|
||||
|
||||
.search-no-result
|
||||
display: none
|
||||
margin: 1em auto
|
||||
color: var(--text-p1)
|
||||
text-align: center
|
||||
font-size: $fs-14
|
||||
padding: 2rem
|
||||
background: var(--block)
|
||||
border-radius: $border-bar
|
||||
background: var(--alpha20)
|
||||
border-radius: $border-card
|
||||
|
||||
|
||||
#search-result
|
||||
ul.search-result-list
|
||||
max-height: 60vh
|
||||
overflow: scroll
|
||||
border-radius: $border-card
|
||||
&:empty
|
||||
display: none
|
||||
.search-result-list
|
||||
padding: 0
|
||||
margin: 0
|
||||
list-style-type: none
|
||||
li
|
||||
margin: 1em auto
|
||||
&:hover
|
||||
.search-result-title
|
||||
color: $color-hover
|
||||
li a
|
||||
display: block
|
||||
background: var(--alpha20)
|
||||
line-height: 1.2
|
||||
padding: 0.75rem 1rem
|
||||
border-radius: $border-card
|
||||
trans1 background
|
||||
&:hover
|
||||
background: var(--alpha100)
|
||||
li+li
|
||||
margin-top: 8px
|
||||
.search-result-title
|
||||
color: var(--text-p1)
|
||||
font-weight: 700
|
||||
line-height: 1.2
|
||||
|
||||
.search-result-content
|
||||
overflow: hidden
|
||||
|
|
@ -60,46 +83,18 @@
|
|||
max-height: 13em
|
||||
text-align: justify
|
||||
font-size: $fs-12
|
||||
line-height: 1.2
|
||||
display: -webkit-box
|
||||
-webkit-box-orient: vertical
|
||||
overflow: hidden
|
||||
-webkit-line-clamp: 3
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
.search-keyword
|
||||
border-bottom: 1px dashed $color-hover
|
||||
color: $color-hover
|
||||
color: var(--text-p1)
|
||||
border-bottom: 1px dashed var(--text-p1)
|
||||
font-weight: bold
|
||||
|
||||
|
||||
|
||||
.search-wrapper.noresult[searching='true']
|
||||
.search-no-result
|
||||
display: block
|
||||
|
||||
.widget-wrapper
|
||||
.search-form
|
||||
top: 0
|
||||
background: var(--card)
|
||||
border: 1px solid var(--block-border)
|
||||
border-radius: $border-bar
|
||||
.search-input
|
||||
text-indent: 0.75rem
|
||||
padding-right: 2rem
|
||||
.search-icon
|
||||
margin: 2px
|
||||
position absolute
|
||||
right: 0
|
||||
pointer-events: none
|
||||
color: var(--text-p2)
|
||||
padding: 0.5rem
|
||||
border-radius: 'calc(%s - 2px)' % $border-bar
|
||||
path[p-id="1562"]
|
||||
color: $color-theme
|
||||
|
||||
#search-result,.search-no-result
|
||||
margin-top: 1rem
|
||||
|
||||
.widget-wrapper:not(:first-child)
|
||||
.search-wrapper
|
||||
margin-top: -1rem
|
||||
margin-bottom: 8px
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
.l_left
|
||||
display: flex
|
||||
flex-direction: column
|
||||
word-break: break-all
|
||||
text-align: justify
|
||||
height: 100vh
|
||||
margin: 8px
|
||||
height: 'calc(%s - 16px)' % 100vh
|
||||
border-radius: $border-card
|
||||
overflow: hidden
|
||||
.header
|
||||
margin: var(--gap-l) var(--gap-l) 0
|
||||
margin-top: "calc(2 * %s)" % var(--gap-l)
|
||||
|
|
@ -13,15 +12,20 @@
|
|||
@media screen and (max-width: $device-mobile-max)
|
||||
height: 100vh
|
||||
|
||||
|
||||
.l_left[layout=wiki]
|
||||
padding-bottom: 0
|
||||
height: 100vh
|
||||
@media screen and (max-width: $device-mobile-max)
|
||||
height: 100vh
|
||||
.widgets >:last-child
|
||||
margin-bottom: 6rem
|
||||
|
||||
.l_left
|
||||
.sidebar-bg
|
||||
position absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
background: var(--text-meta)
|
||||
.sidebar-container
|
||||
height: 100%
|
||||
--blur-px: 50px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
word-break: break-all
|
||||
text-align: justify
|
||||
|
||||
.l_left .widgets .widget-wrapper.logo-wrap.wiki .widget-body
|
||||
display: flex
|
||||
|
|
|
|||
|
|
@ -48,29 +48,6 @@
|
|||
&:hover
|
||||
background: $color-hover
|
||||
|
||||
.menu
|
||||
margin-bottom: 0
|
||||
background: none
|
||||
border: 0
|
||||
a
|
||||
margin: 0
|
||||
&.active
|
||||
box-shadow: none
|
||||
position: relative
|
||||
background: none
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
height: 3px
|
||||
bottom: 0
|
||||
width: 32px
|
||||
left: 'calc(50% - 0.5 * %s)' % @width
|
||||
border-radius: 4px
|
||||
background: $color-theme
|
||||
&:hover
|
||||
box-shadow: none
|
||||
background: var(--block)
|
||||
|
||||
.buttons
|
||||
margin: 1rem 0
|
||||
align-self: stretch
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
.widget-wrapper.post-list .widget-body
|
||||
margin-top: 0.25rem
|
||||
a
|
||||
line-height: 1
|
||||
font-size: $fs-14
|
||||
padding: 8px 16px
|
||||
display: block
|
||||
border-radius: $border-bar
|
||||
color: var(--text-p1)
|
||||
trans1 background
|
||||
&.active
|
||||
background: var(--alpha50)
|
||||
&:hover
|
||||
background: var(--alpha100)
|
||||
a+a
|
||||
margin-top: 2px
|
||||
a
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
.title
|
||||
txt-ellipsis()
|
||||
.icon
|
||||
flex-shrink: 0
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.widget-wrapper.markdown
|
||||
.widget-body
|
||||
border-radius: $border-card
|
||||
padding: 4px 16px
|
||||
background: var(--alpha50)
|
||||
|
||||
a
|
||||
trans1 all
|
||||
border-bottom: 1px solid var(--text-p0)
|
||||
color: var(--text-p0)
|
||||
&:hover
|
||||
color: $color-hover
|
||||
border-bottom: 1px solid $color-hover
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
.widget-wrapper.recent .widget-body
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: flex-start
|
||||
margin-top: 0.25rem
|
||||
a
|
||||
line-height: 1.2
|
||||
font-size: $fs-13
|
||||
margin: 0.25rem 0
|
||||
.title
|
||||
font-size: $fs-13
|
||||
color: var(--text-p2)
|
||||
&:hover
|
||||
color: $color-hover
|
||||
|
||||
|
|
@ -1,8 +1,39 @@
|
|||
.widget-wrapper.related .widget-body a
|
||||
margin-top: 0.5rem
|
||||
margin-bottom: 1rem
|
||||
.title
|
||||
|
||||
.widget-wrapper.post-card .widget-body
|
||||
max-width: 100%
|
||||
margin: 1rem 0
|
||||
.item+.item
|
||||
margin-top: 8px
|
||||
.item
|
||||
line-height: 1.2
|
||||
background: var(--alpha50)
|
||||
padding: 10px 16px
|
||||
border-radius: $border-card
|
||||
display: block
|
||||
border-left: 0
|
||||
box-sizing: border-box
|
||||
.title
|
||||
color: var(--text-p1)
|
||||
font-weight: 500
|
||||
font-size: 1rem
|
||||
display: -webkit-box
|
||||
-webkit-box-orient: vertical
|
||||
overflow: hidden
|
||||
-webkit-line-clamp: 1
|
||||
font-weight: 700
|
||||
font-size: $fs-14
|
||||
.excerpt
|
||||
-webkit-line-clamp: 3
|
||||
color: var(--text-p3)
|
||||
font-size: $fs-12
|
||||
margin-top: 0.5rem
|
||||
display: -webkit-box
|
||||
-webkit-box-orient: vertical
|
||||
overflow: hidden
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
.item
|
||||
trans1 background
|
||||
.item.active
|
||||
background: var(--card)
|
||||
.item:hover
|
||||
background: var(--card)
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
margin-top: 0.5rem
|
||||
.tag-plugin.timeline .timenode
|
||||
.header
|
||||
margin-bottom: 0.5rem
|
||||
margin: 0.5rem 16px
|
||||
txt-ellipsis()
|
||||
.user-info
|
||||
background: var(--block)
|
||||
background: var(--alpha50)
|
||||
&:hover
|
||||
background: $color-hover
|
||||
color: var(--card)
|
||||
|
|
@ -14,4 +14,19 @@
|
|||
display: none
|
||||
&+.timenode
|
||||
margin-top: 0.75rem
|
||||
.header p
|
||||
color: var(--text-p2)
|
||||
.body
|
||||
border-radius: $border-card
|
||||
background: var(--alpha50)
|
||||
box-shadow: none
|
||||
|
||||
a
|
||||
trans1 all
|
||||
border-bottom: 1px solid var(--text-p0)
|
||||
color: var(--text-p0)
|
||||
&:hover
|
||||
color: $color-hover
|
||||
border-bottom: 1px solid $color-hover
|
||||
|
||||
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
.widget-wrapper.toc.single .doc-tree
|
||||
&.active>.toc
|
||||
border-left: 2px solid var(--block-hover)
|
||||
border-left: 2px solid var(--alpha50)
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
.widget-wrapper.toc .widget-header
|
||||
margin-top: 1rem
|
||||
|
||||
.widget-wrapper.toc.single .widget-header
|
||||
font-weight: 500
|
||||
font-size: $fs-12
|
||||
>span
|
||||
margin: 0.5rem 0
|
||||
|
||||
.toc-item
|
||||
margin-top: 2px
|
||||
.toc-child
|
||||
margin-top: 2px
|
||||
.widget-wrapper.toc .widget-body
|
||||
margin-top: 0
|
||||
ul ul, ul ol
|
||||
|
|
@ -14,8 +14,6 @@
|
|||
ol ul, ol ol
|
||||
padding-left: 0
|
||||
|
||||
.doc-tree
|
||||
margin: 4px 0
|
||||
.toc
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
|
@ -43,7 +41,7 @@
|
|||
padding: 0
|
||||
list-style: none
|
||||
&.active
|
||||
color: $color-theme
|
||||
background: var(--alpha50)
|
||||
border-left-color: @color
|
||||
.toc-child .toc-item
|
||||
padding: 0
|
||||
|
|
@ -51,8 +49,9 @@
|
|||
color: inherit
|
||||
display: block
|
||||
line-height: 1.2
|
||||
border-radius: 4px
|
||||
border-radius: $border-bar
|
||||
position: relative
|
||||
trans1 background
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
|
|
@ -61,14 +60,15 @@
|
|||
bottom: 'calc(50% - %s)' % 6px
|
||||
width: 2px
|
||||
border-radius: 2px
|
||||
background: $color-theme
|
||||
background: var(--text-p0)
|
||||
visibility: hidden
|
||||
&:hover
|
||||
background: var(--block-hover)
|
||||
&.active
|
||||
color: $color-theme !important
|
||||
background: var(--alpha50)
|
||||
&:before
|
||||
visibility: visible
|
||||
&:hover
|
||||
background: var(--alpha100)
|
||||
|
||||
|
||||
// 始终折叠
|
||||
.widget-wrapper.toc[collapse='true']
|
||||
|
|
|
|||
|
|
@ -1,48 +1,49 @@
|
|||
.widget-wrapper.toc.multi .widget-header
|
||||
color: var(--text-p1)
|
||||
font-size: $fs-14
|
||||
|
||||
.doc-tree+.doc-tree
|
||||
margin-top: 2px
|
||||
|
||||
// 其它分页链接
|
||||
.widget-wrapper.toc.multi .doc-tree
|
||||
border-radius: $border-bar
|
||||
background: var(--block)
|
||||
overflow: hidden
|
||||
border: 1px solid var(--block-border)
|
||||
a.doc-tree-link
|
||||
color: var(--text-p2)
|
||||
padding: 0.5rem
|
||||
display: block
|
||||
font-size: $fs-12
|
||||
color: var(--text-p1)
|
||||
padding: 0.5rem 16px
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
font-size: $fs-14
|
||||
font-weight: 500
|
||||
position: relative
|
||||
trans1 background
|
||||
.toc-text
|
||||
txt-ellipsis()
|
||||
.icon
|
||||
flex-shrink: 0
|
||||
&:after
|
||||
position: absolute
|
||||
right: .5rem
|
||||
&.active
|
||||
color: var(--text-p1)
|
||||
&:only-child
|
||||
background: var(--card)
|
||||
background: var(--alpha100)
|
||||
&:hover
|
||||
background: var(--block-hover)
|
||||
&:after
|
||||
content: '+'
|
||||
background: var(--alpha50)
|
||||
|
||||
|
||||
// 当前分页链接
|
||||
.widget-wrapper.toc.multi .doc-tree.active
|
||||
a.doc-tree-link
|
||||
background: var(--block)
|
||||
font-weight: 700
|
||||
&:not(:only-child)
|
||||
border-bottom: 1px solid var(--block-border)
|
||||
background: var(--alpha100)
|
||||
font-weight: 500
|
||||
&:hover:after
|
||||
content: none
|
||||
>.toc
|
||||
padding: 4px
|
||||
background: var(--card)
|
||||
padding: 4px 10px
|
||||
border: 1px solid var(--alpha50)
|
||||
background: var(--alpha20)
|
||||
border-bottom-left-radius: $border-bar
|
||||
border-bottom-right-radius: $border-bar
|
||||
a.toc-link:before
|
||||
left: -2px
|
||||
width: 4px
|
||||
a.toc-link:hover
|
||||
background: var(--block)
|
||||
background: var(--alpha100)
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
scrollbar(0, 0)
|
||||
z-index: 1
|
||||
line-height: 1.2
|
||||
margin: 0 var(--gap-l)
|
||||
.widget-wrapper
|
||||
.widget-header
|
||||
padding-left: var(--gap-l)
|
||||
|
|
@ -17,32 +18,30 @@
|
|||
justify-content: space-between
|
||||
align-items: center
|
||||
font-weight: 500
|
||||
position: sticky
|
||||
top: -2px
|
||||
background: var(--site-bg)
|
||||
padding-top: 2px
|
||||
z-index 1
|
||||
line-height: 28px
|
||||
.item
|
||||
display: block
|
||||
>span
|
||||
margin: 0.25rem 0
|
||||
>span
|
||||
text-align: left
|
||||
&:empty
|
||||
display: none
|
||||
.cap-action
|
||||
hover-block 4px 4px
|
||||
line-height: 0
|
||||
color: var(--text-meta)
|
||||
color: var(--text-p2)
|
||||
trans2: color background
|
||||
border-radius: 4px
|
||||
padding: 6px
|
||||
margin-right: -4px
|
||||
.icon
|
||||
fill: var(--text-meta)
|
||||
fill: var(--text-p2)
|
||||
&:hover
|
||||
color: $color-hover
|
||||
background: var(--alpha100)
|
||||
.icon
|
||||
fill: $color-hover
|
||||
|
||||
.widget-body
|
||||
margin: 0.5rem var(--gap-l)
|
||||
margin: 0.5rem 0
|
||||
color: var(--text-p1)
|
||||
p
|
||||
margin-top: .5em
|
||||
|
|
@ -50,11 +49,8 @@
|
|||
line-height: 1.5
|
||||
.widget-header+.widget-body
|
||||
margin-top: 0
|
||||
.widget-wrapper+.widget-wrapper .widget-header
|
||||
margin-top: 3rem
|
||||
.widget-wrapper+.widget-wrapper.toc .widget-header
|
||||
margin-top: 1rem
|
||||
|
||||
|
||||
.widget-wrapper
|
||||
display: block
|
||||
margin: 2rem 0
|
||||
display: block
|
||||
margin: 32px 0
|
||||
Loading…
Reference in New Issue