Quartz 的链接悬停 Popover 预览怎么用和怎么自定义

Quartz 的链接悬停 Popover 预览怎么用和怎么自定义【免费下载链接】quartz a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites项目地址: https://gitcode.com/GitHub_Trending/qua/quartzQuartz 生成的站点支持类似 Wikipedia 的链接悬停预览鼠标停在页面上的链接上时会弹出一个可滚动查看目标页面内容的预览弹窗。这个功能默认开启但如果你想关闭它、调整弹窗外观或控制哪些内容出现在预览里需要改quartz.config.yaml和对应的样式、脚本文件。本文基于 popover previews 文档和 Quartz 源码中的实际实现说明它默认如何工作、如何验证效果以及三个自定义入口分别改什么。默认行为悬停链接时预览里显示什么在浏览器中把鼠标移到 Quartz 站点内部的链接上就会触发预览弹窗。脚本 popover.inline.ts 会监听所有a.internal链接的mouseenter/mouseleave事件进入时请求目标页面并生成弹窗移开时清除。弹窗里放什么取决于目标页面 HTML 中带popover-hintclass 的元素。脚本会取回目标页面后选中所有.popover-hint元素并放入弹窗。对大多数页面来说页面框架如 DefaultFrame.tsx 中把beforeBody组件包在div classpopover-hint里已经提供了这些元素所以预览通常包含页面标题页面元数据如词数、预计阅读时间标签tags页面正文内容。弹窗本身支持滚动以查看完整内容。如果链接带锚点指向某个标题弹窗会自动滚动到该标题所在位置方便先确认目标再跳转。此外类似 Obsidian 的行为是用 wikilink 引用的图片链接悬停时也会以弹窗形式直接显示图片PDF 链接则会以 iframe 形式在弹窗内展示这两种情况由脚本根据响应的Content-Type区分。如何运行并验证效果预览是随构建产物一起注入的componentResources.ts 在enablePopovers为true时把 popover 的脚本和样式附加到每个页面。默认模板quartz.config.default.yaml中该值为true所以无需任何配置。在项目中执行构建命令会同时提供开发服务器见 CLI 文档npx quartz build然后在浏览器中打开站点页面将鼠标悬停在一个指向站内其他页面的链接上。出现弹窗、内容可滚动即表示预览已生效悬停带锚点的链接时弹窗应滚动到对应标题。自定义预览行为开启或关闭预览在quartz.config.yaml的configuration段中设置enablePopovers字段说明见 configuration 文档configuration: enablePopovers: false # 设为 false 后站点不再注入预览脚本和样式设为false后重新构建站点将不再出现悬停弹窗。如果你用 VSCode 等支持 YAML 的编辑器修改该文件配置写错时会有提示可以避免改错字段名。调整弹窗外观弹窗的样式集中在 popover.scss可以按需求修改例如.popover-inner的width: 30rem、max-height: 20rem决定弹窗的宽度和最大高度边框border: 1px solid var(--lightgray)、圆角、背景色和阴影box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25)控制观感dropin关键帧和transition0.3s 淡入延迟 0.2s控制出现动画。修改后重新执行npx quartz build生效。控制哪些内容进入预览预览只收popover-hintclass 的元素。如果你按照 creating components 指南创建了自己的组件给其中的 HTML 元素加上popover-hintclass该组件的内容就会出现在悬停预览中。反过来框架层的popover-hint包裹如 FullWidthFrame.tsx 和 DefaultFrame.tsx 中的结构决定了默认情况下标题区进入预览。针对单个链接禁用预览popover.inline.ts 的mouseEnterHandler开头会检查链接是否带有data-no-popovertrue属性如果有则直接返回、不弹预览。因此给某个不想触发预览的链接加上这个属性即可单独跳过它a classinternal contenteditable="false">【免费下载链接】quartz a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites项目地址: https://gitcode.com/GitHub_Trending/qua/quartz创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考