diff --git a/quartz.layout.ts b/quartz.layout.ts index 6ab8d2e..59f709e 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -1,4 +1,4 @@ -import {PageLayout, SharedLayout} from "./quartz/cfg" +import { PageLayout, SharedLayout } from "./quartz/cfg" import * as Component from "./quartz/components" // components shared across all pages @@ -36,26 +36,19 @@ export const defaultContentPageLayout: PageLayout = { Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta(), - Component.TagList() + // Component.TagList() ], left: [ Component.PageTitle(), Component.MobileOnly(Component.Spacer()), Component.Search(), Component.DesktopOnly(Component.SidebarNav()), - // Component.DesktopOnly(Component.RecentNotes({ - // showTags: false, - // linkToMore: "/Archive", - // limit: 5, - // filter: (f) => !f.filePath?.includes("/Archive") - // })), Component.DesktopOnly(Component.Explorer({ folderClickBehavior: 'collapse', })), Component.DesktopOnly(Component.FloatingButtons({ position: 'right', })), - // Component.TagList(), ], right: [ Component.DesktopOnly(Component.Graph({ diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx index 1d352dd..cf22354 100644 --- a/quartz/components/ContentMeta.tsx +++ b/quartz/components/ContentMeta.tsx @@ -1,7 +1,8 @@ -import {QuartzComponentConstructor, QuartzComponentProps} from "./types" +import { QuartzComponentConstructor, QuartzComponentProps } from "./types" import readingTime from "reading-time" -import {classNames} from "../util/lang" +import { classNames } from "../util/lang" import style from "./styles/contentMeta.scss" +import { pathToRoot, slugTag } from "../util/path" const TimeMeta = ({ value }: { value: Date }) => { const year = value.getFullYear() @@ -91,23 +92,23 @@ function ContentMetadataComponent({ cfg, fileData, displayClass }: QuartzCompone - {/*{fileData.frontmatter?.tags && fileData.frontmatter.tags.length > 0 && (*/} - {/*
*/} - {/*
Tags
*/} - {/* */} - {/*
*/} - {/*)}*/} + {fileData.frontmatter?.tags && fileData.frontmatter.tags.length > 0 && ( +
+
Tags
+ +
+ )} ) diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx index 3e29d6d..f4ffa28 100644 --- a/quartz/components/Head.tsx +++ b/quartz/components/Head.tsx @@ -70,6 +70,16 @@ export default (() => { + {cfg.baseUrl && ( + <> + + + )} { const content = htmlToJsx(fileData.filePath!, tree) const classes: string[] = fileData.frontmatter?.cssclasses ?? [] - const classString = ["popover-hint page-transition", ...classes].join(" ") + const classString = ["popover-hint", ...classes].join(" ") return
{content}
} diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 8f2c828..f9a3e76 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -234,7 +234,7 @@ export function renderPage( {LeftComponent}
-
+
{header.map((HeaderComponent) => ( diff --git a/quartz/components/scripts/svg-pan-zoom.inline.ts b/quartz/components/scripts/svg-pan-zoom.inline.ts index 113b9c6..da4ed21 100644 --- a/quartz/components/scripts/svg-pan-zoom.inline.ts +++ b/quartz/components/scripts/svg-pan-zoom.inline.ts @@ -134,7 +134,7 @@ function createCopyButton(): HTMLButtonElement { // 定义 processSvg 函数 function processSvg(svg: Element) { if (!(svg instanceof SVGElement)) return - + try { const configStr = svg.getAttribute('data-svg-pan-zoom') const config = configStr ? JSON.parse(configStr) : {} diff --git a/quartz/components/styles/contentMeta.scss b/quartz/components/styles/contentMeta.scss index fdd626a..0c21931 100644 --- a/quartz/components/styles/contentMeta.scss +++ b/quartz/components/styles/contentMeta.scss @@ -63,7 +63,12 @@ border: 1px solid var(--secondary); border-radius: var(--border-radius); padding: 1.5rem; - transition: all 0.15s ease-out; + + .meta-tags { + margin-top: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid var(--secondary); + } } .meta-description { @@ -100,7 +105,7 @@ padding: 1.2rem; border-radius: var(--border-radius); position: relative; - + &::before { content: '"'; position: absolute; @@ -153,7 +158,7 @@ align-items: flex-start; gap: 0.2rem; - > div:last-child { + >div:last-child { color: var(--gray); font-size: 0.9rem; } @@ -191,9 +196,37 @@ .stat-item { min-width: unset; - + .stat-value { font-size: 0.95rem; } } } + +//集成了tag-list之后, 把样式也复制过来 +.tags { + list-style: none; + display: flex; + padding-left: 0; + gap: 0.4rem; + margin: 1rem 0; + flex-wrap: wrap; +} + +.section-li>.section>.tags { + justify-content: flex-end; +} + +.tags>li { + display: inline-block; + white-space: nowrap; + margin: 0; + overflow-wrap: normal; +} + +a.internal.tag-link { + border-radius: 8px; + background-color: var(--highlight); + padding: 0.2rem 0.4rem; + margin: 0 0.1rem; +} \ No newline at end of file diff --git a/quartz/components/styles/footer.scss b/quartz/components/styles/footer.scss index 38615d7..3d0f6f7 100644 --- a/quartz/components/styles/footer.scss +++ b/quartz/components/styles/footer.scss @@ -1,13 +1,18 @@ footer { a { - text-decoration: none; /* 去除链接默认的下划线 */ - border-bottom: 1px dashed ; /* 设置底部边框为 1 像素宽的虚线，颜色为黑色 */ + text-decoration: none; + /* 去除链接默认的下划线 */ + border-bottom: 1px dashed; + /* 设置底部边框为 1 像素宽的虚线，颜色为黑色 */ } p { text-align: center; opacity: 0.7; - //position: relative; - //z-index: var(--z-content) + 1; + + //404页面问题 + position: relative; + z-index: var(--z-bottom); + isolation: isolate; } -} +} \ No newline at end of file diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss index f74b2fe..8a9e7e4 100644 --- a/quartz/components/styles/graph.scss +++ b/quartz/components/styles/graph.scss @@ -1,12 +1,12 @@ @use "../../styles/variables.scss" as *; .graph { - & > h3 { + &>h3 { font-size: 1rem; margin: 0; } - & > .graph-outer { + &>.graph-outer { border-radius: 5px; border: 1px solid var(--lightgray); box-sizing: border-box; @@ -15,7 +15,7 @@ position: relative; overflow: hidden; - & > #global-graph-icon { + &>#global-graph-icon { color: var(--dark); opacity: 0.5; width: 18px; @@ -29,19 +29,19 @@ background-color: transparent; transition: background-color 0.5s ease; cursor: pointer; + &:hover { background-color: var(--lightgray); } } - & > #graph-container { - + &>#graph-container { background: var(--light); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } } - & > #global-graph-outer { + &>#global-graph-outer { position: fixed; // z-index: 9999; z-index: var(--z-overlay); @@ -57,7 +57,7 @@ display: inline-block; } - & > #global-graph-container { + &>#global-graph-container { border: 1px solid var(--lightgray); background-color: var(--light); border-radius: 5px; @@ -67,11 +67,11 @@ left: 50%; transform: translate(-50%, -50%); height: 60vh; - width: 50vw; + width: 80vw; @media all and (max-width: $fullPageWidth) { width: 90%; } } } -} +} \ No newline at end of file diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss index 728de8b..e01531b 100644 --- a/quartz/components/styles/popover.scss +++ b/quartz/components/styles/popover.scss @@ -5,9 +5,11 @@ opacity: 0; visibility: hidden; } + 1% { opacity: 0; } + 100% { opacity: 1; visibility: visible; @@ -20,7 +22,7 @@ overflow: visible; padding: 1rem; - & > .popover-inner { + &>.popover-inner { position: relative; width: 30rem; max-height: 20rem; @@ -38,7 +40,8 @@ white-space: normal; } - & > .popover-inner[data-content-type] { + &>.popover-inner[data-content-type] { + &[data-content-type*="pdf"], &[data-content-type*="image"] { padding: 0; @@ -66,9 +69,8 @@ visibility: hidden; opacity: 0; - transition: - opacity 0.3s ease, - visibility 0.3s ease; + transition: opacity 0.3s ease, + visibility 0.3s ease; @media all and (max-width: $mobileBreakpoint) { display: none !important; @@ -82,18 +84,9 @@ a:hover .popover, animation-delay: 0.2s; } -// 在页眉、侧边中禁用 popover -.page-header, -.recent-notes{ +//popover还是会被遮挡, 索性禁用 +.recent-notes { .popover { display: none !important; } -} - -// 在特定页面（tags页面和非index页面）的文章中启用 popover -body[data-slug^="tags/"] article, -body:not([data-slug$="/index"]) article { - .popover { - display: block !important; - } } \ No newline at end of file diff --git a/quartz/i18n/locales/zh-CN.ts b/quartz/i18n/locales/zh-CN.ts index 7a5896c..4b0e46c 100644 --- a/quartz/i18n/locales/zh-CN.ts +++ b/quartz/i18n/locales/zh-CN.ts @@ -1,4 +1,4 @@ -import {Translation} from "./definition" +import { Translation } from "./definition" export default { propertyDefaults: { @@ -22,7 +22,7 @@ export default { quote: "引用", }, backlinks: { - title: "📎 反向链接", + title: "📎 提到当前文章的链接", noBacklinksFound: "未发现反向链接", }, themeToggle: { diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 2021c1a..632bc72 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -2,16 +2,14 @@ @use "./syntax.scss"; @use "./callouts.scss"; -:root{ - --z-bottom: -1; // 改为负值 - --z-content: 10; // 正文里的内容 - --z-sidebar: 50; // 侧边栏 - --z-nav: 100; // 导航 - --z-graph: 500; // 图谱 - --z-popover: 1000; // 弹出层 - --z-overlay: 2000; // 遮罩层 - --z-modal: 3000; // 模态框 - --z-404: 9999; // 404页面 +:root { + --z-bottom: -1; // 脚本创建的元素，手动设置index改为负值 + --z-content: 10; // 正文里的内容 + --z-graph: 500; // 图谱 + --z-popover: 1000; // 弹出层 + --z-overlay: 2000; // 遮罩层 + --z-modal: 3000; // 模态框 + --z-404: 9999; // 404页面 } html { diff --git a/quartz/styles/code-block.scss b/quartz/styles/code-block.scss index 0e907e0..8543cf9 100644 --- a/quartz/styles/code-block.scss +++ b/quartz/styles/code-block.scss @@ -78,23 +78,25 @@ //移除 collapse 插件的marker伪元素 .expressive-code .ec-section summary { - display: flex; - align-items: center; - list-style: none; /* 移除默认的 marker */ + display: flex; + align-items: center; + list-style: none; + /* 移除默认的 marker */ } .expressive-code .ec-section summary::marker { - display: none; /* 完全移除默认 marker */ + display: none; + /* 完全移除默认 marker */ } .expressive-code .ec-section summary .ec-line { - display: flex; - align-items: center; - width: 100%; + display: flex; + align-items: center; + width: 100%; } .expressive-code .ec-section summary svg { - margin-right: 0.5em; + margin-right: 0.5em; } //标题栏底部边框 @@ -110,19 +112,18 @@ //terminal类型的左上角三个点图标 .expressive-code .frame.is-terminal .header::before { - background: linear-gradient( - to right, - #ff6666 0%, // 红色 - #ff6666 26%, // 红色结束 - transparent 26%, - transparent 37%, - #ffdb4d 37%, // 黄色 - #ffdb4d 63%, // 黄色结束 - transparent 63%, - transparent 74%, - #84a59d 74%, // 绿色 - #84a59d 100% // 绿色结束 - ); + background: linear-gradient(to right, + #ff6666 0%, // 红色 + #ff6666 26%, // 红色结束 + transparent 26%, + transparent 37%, + #ffdb4d 37%, // 黄色 + #ffdb4d 63%, // 黄色结束 + transparent 63%, + transparent 74%, + #84a59d 74%, // 绿色 + #84a59d 100% // 绿色结束 + ); opacity: 1 !important; // expressive-code 官网三个灰色点 diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index 1c0dd9d..b4d9207 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -34,7 +34,7 @@ --code-language-text: #3b4c68; --border-radius: 4px; - + } @@ -192,21 +192,21 @@ article:has(p:not(:empty)) { & tbody { td { - position: relative; + // position: relative; &:hover { background-color: var(--highlight); - &::before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: -9999px; - bottom: -9999px; - background-color: var(--lightgray); - z-index: -1; - } + // &::before { + // content: ""; + // position: absolute; + // left: 0; + // right: 0; + // top: -9999px; + // bottom: -9999px; + // background-color: var(--lightgray); + // z-index: -1; + // } } } } @@ -214,17 +214,16 @@ article:has(p:not(:empty)) { // 表格内的链接 popover 样式 table { - position: relative; + // position: relative; - td { - position: static; // 让 popover 相对于表格定位 - } + // position: static; // 让 popover 相对于表格定位 .internal { - position: relative; + // position: relative; .popover { position: fixed; // 改用固定定位 + isolation: isolate; z-index: var(--z-content) + 1; // 确保显示在最上层 } } @@ -302,20 +301,8 @@ blockquote:not(.callout) { // 2px 2px 0 #ffe066, // 4px 4px 0 #ffd43b, // 6px 6px 0 #fcc419; - position: relative; } -//代码块底部说明文字样式 -figcaption { - display: flex; - align-items: center; - justify-content: center; - //padding: 0.75rem; - color: var(--gray); - font-size: .8rem; - //font-style: italic; - gap: 0.5rem; -} //最近更新样式 .recent-notes>ul.recent-ul>li { @@ -349,7 +336,7 @@ code { //关系图谱 .graph>#global-graph-outer>#global-graph-container { - width: 70vw; + // width: 70vw; z-index: var(--z-graph) !important; } @@ -371,39 +358,6 @@ code { } } -.banner-separator { - position: relative; - margin: 2rem 0; - height: 1px; - background: linear-gradient(90deg, - transparent 0%, - var(--lightgray) 15%, - var(--lightgray) 85%, - transparent 100%); - display: flex; - align-items: center; - justify-content: center; - - .banner-reading-trigger { - position: absolute; - top: 50%; - transform: translateY(-50%); - background: var(--light); - padding: 0.25rem 0.5rem; - border: none; - border-radius: var(--border-radius); - font-size: 1.2rem; - line-height: 1; - cursor: pointer; - color: var(--dark); - transition: all 0.2s ease; - - &:hover { - background: var(--highlight); - } - } -} - // 优化代码块样式 pre { background-color: var(--lightgray) !important; @@ -484,183 +438,140 @@ a.internal.broken-link { // 左侧边栏组件布局 .left.sidebar { - gap: 0 !important; + gap: 0 !important; - > * { - margin-bottom: 1rem; - padding: 0; - } + >* { + margin-bottom: 1rem; + padding: 0; + } } // 导航按钮特定样式 .nav-button { - .kbd-container { - margin-left: auto; - } + .kbd-container { + margin-left: auto; + } } // 导航组件样式 .sidebar-nav { - margin: 1rem 0; - - .nav-buttons { - display: flex; - flex-direction: column; - gap: 0.4rem; - width: 100%; + margin: 1rem 0; - // 所有导航按钮的基础样式 - .nav-button { + .nav-buttons { display: flex; - align-items: center; - gap: 0.6rem; - padding: 0.5rem 0.8rem; - border-radius: 6px; - color: var(--dark); - text-decoration: none; - transition: transform 0.2s ease; - background: var(--light); - border: 1px solid var(--secondary); - position: relative; - cursor: pointer; - font-size: 0.9rem; - font-style: normal; - font-family: var(--bodyFont); + flex-direction: column; + gap: 0.4rem; width: 100%; - box-sizing: border-box; - - // 图标样式 - .nav-icon { - font-size: 1.1rem; - flex-shrink: 0; - font-style: normal; - width: 1.5rem; // 固定图标宽度 - text-align: center; // 图标居中 - } - // 文字样式 - .nav-text { - font-weight: 500; - transition: color 0.2s ease; - font-style: normal; - flex: 1; - text-align: left; - color: var(--secondary); - } + // 所有导航按钮的基础样式 + .nav-button { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.5rem 0.8rem; + border-radius: 6px; + color: var(--dark); + text-decoration: none; + transition: transform 0.2s ease; + background: var(--light); + border: 1px solid var(--secondary); + position: relative; + cursor: pointer; + font-size: 0.9rem; + font-style: normal; + font-family: var(--bodyFont); + width: 100%; + box-sizing: border-box; + + // 图标样式 + .nav-icon { + font-size: 1.1rem; + flex-shrink: 0; + font-style: normal; + width: 1.5rem; // 固定图标宽度 + text-align: center; // 图标居中 + } - // hover效果 - &:hover { - transform: none; - background: var(--lightgray); - border-color: var(--gray); + // 文字样式 + .nav-text { + font-weight: 500; + transition: color 0.2s ease; + font-style: normal; + flex: 1; + text-align: left; + color: var(--secondary); + } - .nav-text { - color: var(--dark); - } - } + // hover效果 + &:hover { + transform: none; + background: var(--lightgray); + border-color: var(--gray); - // 阅读模式按钮特殊样式 - &.reading-mode-toggle { - .nav-text { - text-align: left; - color: var(--secondary); + .nav-text { + color: var(--dark); + } + } + + // 阅读模式按钮特殊样式 + &.reading-mode-toggle { + .nav-text { + text-align: left; + color: var(--secondary); - &:hover { - color: var(--dark); - } - } + &:hover { + color: var(--dark); + } + } + } } - } - } + } } // 复古键盘按键样式 .retro-key { - border: 1px solid var(--gray); - border-radius: 4px; - padding: 2px 6px; - font-family: var(--codeFont); - color: var(--dark); - box-shadow: 0 2px 0 var(--gray); - min-width: 20px; - text-align: center; - display: inline-block; - - &:active { - transform: translateY(1px); - box-shadow: 0 1px 0 var(--gray); - } + border: 1px solid var(--gray); + border-radius: 4px; + padding: 2px 6px; + font-family: var(--codeFont); + color: var(--dark); + box-shadow: 0 2px 0 var(--gray); + min-width: 20px; + text-align: center; + display: inline-block; + + &:active { + transform: translateY(1px); + box-shadow: 0 1px 0 var(--gray); + } } // 键盘快捷键容器 .kbd-container { - display: inline-flex; - align-items: center; - gap: 4px; -} - - -// 统一的页面切换动画基础样式 -.page-transition { - animation-fill-mode: both; - will-change: opacity, transform; - backface-visibility: hidden; // 防止闪烁 - perspective: 1000px; // 提高性能 -} - -// Header 区域动画（包括 banner） -.page-header.page-transition, -.banner-wrapper.page-transition { - animation: fadeInDown 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -// 内容区域动画 -article.page-transition { - animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); -} - -// 从上方滑入（用于 header） -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-10px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} - -// 淡入（用于内容） -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } + display: inline-flex; + align-items: center; + gap: 4px; } - // 图谱样式 .graph { - #global-graph-container { - position: absolute; - width: 70vw; - z-index: var(--z-overlay) !important; - background: var(--light); - box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); - } + #global-graph-container { + position: absolute; + width: 70vw; + z-index: var(--z-overlay) !important; + background: var(--light); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + } } -.popover { - position: absolute; - z-index: var(--z-popover) !important; -} +// .popover { +// position: absolute; +// z-index: var(--z-popover) !important; +// } // 404 页面 .not-found-wrapper { - position: fixed; - z-index: var(--z-404) !important; + position: fixed; + z-index: var(--z-404) !important; } \ No newline at end of file diff --git a/quartz/styles/mermaid.scss b/quartz/styles/mermaid.scss index 99d6b05..4c05015 100644 --- a/quartz/styles/mermaid.scss +++ b/quartz/styles/mermaid.scss @@ -1,5 +1,5 @@ -:root{ - --mermaid-background: #fffaf3; +:root { + --mermaid-background: #fffaf3; } div.svg-pan-zoom-container { @@ -11,7 +11,7 @@ div.svg-pan-zoom-container { margin: 1rem 0; padding: 0 !important; height: 300px; - border: 3px solid var(--code-border); + border: 1px solid var(--code-border); border-radius: 4px; cursor: move; @@ -176,7 +176,7 @@ div.svg-pan-zoom-container { margin: 0; border: none; - + // 使用与正文相同的提示标签样式 &::after { content: attr(data-svg-src);