标签

个人经历家庭西瓜童年时光生活感悟冰淇淋感冒鼻炎博客搭建树莓派除夕夜公众号个人网站运维七年坚持选择比努力重要龟苓膏使用体验零食我的世界皮肤AI 生成皮肤豆包 AILUMEN游戏皮肤生成AI 机器人DeepSeek前端脚本大语言模型技术折腾AstrBotShell命令权限管理1PanelBrave 浏览器macOS系统错误覆盖安装Butterfly暗色模式Hexo粉丝统计友链关注按钮CSS 阴影毛玻璃效果随机跳转CSS 美化CloudflareAI 防护自定义提示条Vercel编程工具Dotfiles备份脚本FrontmatterHexo 教程Giscus网站默哀图片占位Markdown 语法Markdown 教程常用语法OpenClawToken 消耗梦QQ 空间RSSHubB 站QQ社交反思微信对比数字记忆我的世界VulkanMod游戏优化帧率提升Beryl 光影Waline邮箱提醒SMTP 配置评论系统环境变量WorkersPagesLinux鼠须管星空邮箱混淆论坛Ubuntu 壁纸下载脚本清华镜像暴太郎特摄剧超级战队剧情讨论角色分析头像解析GravatarGitHub Pages文件分类Linux 脚本华莱士儿童套餐快餐体验宠物深夜故事部署平台Cloudflare Pages网络速度空岛生存游戏攻略生存模式末影龙元气骑士游戏回忆友谊地牢游戏校园回忆儿童节城市漫步午后时光情感回忆梦境对话AI检测文章识别写作风格技术讨论硫磺史莱姆游戏装饰我的世界攻略游戏趣味玩法博客活动广州出行技术聚会小红书中美对账跨文化交流暴雨高考气候变化神奇数字马戏团动画B 站小站爬虫技术Python 脚本Playwright垃圾邮件网络安全误判Mac 游戏游戏体验拔刀剑小学回忆外星人抄袭争议材质包夏日小区故事情绪管理奶茶蛋糕购物体验空岛数据包游戏探索Node.js插件推荐流浪猫图片压缩WebPMacBookUbuntu恋爱观AI 编辑器保存的快捷栏明日方舟崩坏三光纤问题泰拉瑞亚游戏回坑Steam 客户端太空旅行泡面挂面魔法学校QQ 群退群良师益友电脑买卖数据包Clash Verge代理软件DNS 配置网络故障PJAX活动行订票取消旅行计划DMARC洗鼻医院经历Tahoe洗牙牙龈炎口腔健康数据泄露天文比赛研学废弃房屋Steam 骗局二手回收MkDocs路径纠错SMTP配置
avatar
梁栋烨
人总要向前看，对吧？
文章
150
标签
213
分类
6
订阅我
公告
任何问题，详见本站公告。
最新文章
大夏天走路去明湖：夏日明湖商场吃花甲粉，路过小学回忆童年
大夏天走路去明湖：夏日明湖商场吃花甲粉，路过小学回忆童年
年初那几个网站：从建站折腾到写作，反思我的博客成长之路
年初那几个网站：从建站折腾到写作，反思我的博客成长之路
暂时搁置：AI 生成手绘图困难，让我魔改博客主题的计划泡汤了
暂时搁置：AI 生成手绘图困难，让我魔改博客主题的计划泡汤了
被 Clash 坑惨了：macOS 关闭后网络瘫痪？修改 DNS 轻松修复
被 Clash 坑惨了：macOS 关闭后网络瘫痪？修改 DNS 轻松修复
记一次系统更新：从 macOS 15 升级到 macOS 26，步骤与感受
记一次系统更新：从 macOS 15 升级到 macOS 26，步骤与感受
分类
标签
个人经历家庭西瓜童年时光生活感悟冰淇淋感冒鼻炎博客搭建树莓派除夕夜公众号个人网站运维七年坚持选择比努力重要龟苓膏使用体验零食我的世界皮肤AI 生成皮肤豆包 AILUMEN游戏皮肤生成AI 机器人DeepSeek前端脚本大语言模型技术折腾AstrBotShell命令权限管理1PanelBrave 浏览器macOS系统错误覆盖安装Butterfly暗色模式Hexo
归档
网站信息
文章数目 :
150
运行时间 :
本站总字数 :
241.3k
本站访客数 :
本站总浏览量 :
` const blob = new Blob([htmlSource], { type: 'text/html;charset=utf-8' }) const url = URL.createObjectURL(blob) window.open(url, '_blank', 'noopener') setTimeout(() => URL.revokeObjectURL(url), 30000) } const attachMermaidViewerButton = wrap => { let btn = wrap.querySelector('.mermaid-open-btn') if (!btn) { btn = document.createElement('button') btn.type = 'button' btn.className = 'mermaid-open-btn' wrap.appendChild(btn) } btn.innerHTML = '' if (!btn.__mermaidViewerBound) { btn.addEventListener('click', e => { e.preventDefault() e.stopPropagation() const svg = wrap.__mermaidOriginalSvg || wrap.querySelector('svg') if (!svg) return const initViewBox = wrap.__mermaidInitViewBox if (typeof svg === 'string') { openSvgInNewTab({ source: svg, initViewBox }) return } openSvgInNewTab({ source: svg, initViewBox }) }) btn.__mermaidViewerBound = true } } // Zoom around a point (px, py) in the SVG viewport (in viewBox coordinates) const zoomAtPoint = (vb, factor, px, py) => { const w = vb[2] * factor const h = vb[3] * factor const nx = px - (px - vb[0]) * factor const ny = py - (py - vb[1]) * factor return [nx, ny, w, h] } const initMermaidGestures = wrap => { const svg = wrap.querySelector('svg') if (!svg) return // Ensure viewBox exists so gestures always work const initVb = getSvgViewBox(svg) wrap.__mermaidInitViewBox = initVb wrap.__mermaidCurViewBox = initVb.slice() setSvgViewBox(svg, initVb) // Avoid binding multiple times on themeChange/pjax if (wrap.__mermaidGestureBound) return wrap.__mermaidGestureBound = true // Helper: map client (viewport) coordinate -> viewBox coordinate const clientToViewBox = (clientX, clientY) => { const rect = svg.getBoundingClientRect() const vb = wrap.__mermaidCurViewBox || getSvgViewBox(svg) const x = vb[0] + (clientX - rect.left) * (vb[2] / rect.width) const y = vb[1] + (clientY - rect.top) * (vb[3] / rect.height) return { x, y, rect, vb } } const state = { pointers: new Map(), startVb: null, startDist: 0, startCenter: null } const clampVb = vb => { const init = wrap.__mermaidInitViewBox || vb const minW = init[2] * 0.1 const maxW = init[2] * 10 const minH = init[3] * 0.1 const maxH = init[3] * 10 vb[2] = clamp(vb[2], minW, maxW) vb[3] = clamp(vb[3], minH, maxH) return vb } const setCurVb = vb => { vb = clampVb(vb) wrap.__mermaidCurViewBox = vb setSvgViewBox(svg, vb) } const onPointerDown = e => { // Allow only primary button for mouse if (e.pointerType === 'mouse' && e.button !== 0) return svg.setPointerCapture(e.pointerId) state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }) if (state.pointers.size === 1) { state.startVb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice() } else if (state.pointers.size === 2) { const pts = [...state.pointers.values()] const dx = pts[0].x - pts[1].x const dy = pts[0].y - pts[1].y state.startDist = Math.hypot(dx, dy) state.startVb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice() state.startCenter = { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 } } } const onPointerMove = e => { if (!state.pointers.has(e.pointerId)) return state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }) // Pan with 1 pointer if (state.pointers.size === 1 && state.startVb) { const p = [...state.pointers.values()][0] const prev = { x: e.clientX - e.movementX, y: e.clientY - e.movementY } // movementX/Y unreliable on touch, compute from stored last position const last = wrap.__mermaidLastSinglePointer || p const dxClient = p.x - last.x const dyClient = p.y - last.y wrap.__mermaidLastSinglePointer = p const { rect } = clientToViewBox(p.x, p.y) const vb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice() const dx = dxClient * (vb[2] / rect.width) const dy = dyClient * (vb[3] / rect.height) setCurVb([vb[0] - dx, vb[1] - dy, vb[2], vb[3]]) return } // Pinch zoom with 2 pointers if (state.pointers.size === 2 && state.startVb && state.startDist > 0) { const pts = [...state.pointers.values()] const dx = pts[0].x - pts[1].x const dy = pts[0].y - pts[1].y const dist = Math.hypot(dx, dy) if (!dist) return const factor = state.startDist / dist // dist bigger => zoom in (viewBox smaller) const cx = (pts[0].x + pts[1].x) / 2 const cy = (pts[0].y + pts[1].y) / 2 const centerClient = { x: cx, y: cy } const pxy = clientToViewBox(centerClient.x, centerClient.y) const cpx = pxy.x const cpy = pxy.y const vb = zoomAtPoint(state.startVb, factor, cpx, cpy) setCurVb(vb) } } const onPointerUpOrCancel = e => { state.pointers.delete(e.pointerId) if (state.pointers.size === 0) { state.startVb = null state.startDist = 0 state.startCenter = null wrap.__mermaidLastSinglePointer = null } else if (state.pointers.size === 1) { // reset single pointer baseline to avoid jump wrap.__mermaidLastSinglePointer = [...state.pointers.values()][0] } } // Wheel zoom (mouse/trackpad) const onWheel = e => { // ctrlKey on mac trackpad pinch; we treat both as zoom e.preventDefault() const delta = e.deltaY const zoomFactor = delta > 0 ? 1.1 : 0.9 const { x, y } = clientToViewBox(e.clientX, e.clientY) const vb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice() setCurVb(zoomAtPoint(vb, zoomFactor, x, y)) } const onDblClick = () => { const init = wrap.__mermaidInitViewBox if (!init) return wrap.__mermaidCurViewBox = init.slice() setSvgViewBox(svg, init) } svg.addEventListener('pointerdown', onPointerDown) svg.addEventListener('pointermove', onPointerMove) svg.addEventListener('pointerup', onPointerUpOrCancel) svg.addEventListener('pointercancel', onPointerUpOrCancel) svg.addEventListener('wheel', onWheel, { passive: false }) svg.addEventListener('dblclick', onDblClick) } const runMermaid = ele => { window.loadMermaid = true const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default' ele.forEach((item, index) => { const mermaidSrc = item.firstElementChild // Clear old render (themeChange/pjax will rerun) const oldSvg = item.querySelector('svg') if (oldSvg) oldSvg.remove() item.__mermaidGestureBound = false const config = mermaidSrc.dataset.config ? JSON.parse(mermaidSrc.dataset.config) : {} if (!config.theme) { config.theme = theme } const mermaidThemeConfig = `%%{init: ${JSON.stringify(config)}}%%\n` const mermaidID = `mermaid-${index}` const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent const renderFn = mermaid.render(mermaidID, mermaidDefinition) const renderMermaid = svg => { mermaidSrc.insertAdjacentHTML('afterend', svg) if (false) initMermaidGestures(item) item.__mermaidOriginalSvg = svg if (true) attachMermaidViewerButton(item) } // mermaid v9 and v10 compatibility typeof renderFn === 'string' ? renderMermaid(renderFn) : renderFn.then(({ svg }) => renderMermaid(svg)) }) } const codeToMermaid = () => { const codeMermaidEle = document.querySelectorAll('pre > code.mermaid') if (codeMermaidEle.length === 0) return codeMermaidEle.forEach(ele => { const preEle = document.createElement('pre') preEle.className = 'mermaid-src' preEle.hidden = true preEle.textContent = ele.textContent const newEle = document.createElement('div') newEle.className = 'mermaid-wrap' newEle.appendChild(preEle) ele.parentNode.replaceWith(newEle) }) } const loadMermaid = () => { if (true) codeToMermaid() const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap') if ($mermaid.length === 0) return const runMermaidFn = () => runMermaid($mermaid) btf.addGlobalFn('themeChange', runMermaidFn, 'mermaid') window.loadMermaid ? runMermaidFn() : btf.getScript('https://cdn.jsdelivr.net/npm/mermaid@11.15.0/dist/mermaid.min.js').then(runMermaidFn) } btf.addGlobalFn('encrypt', loadMermaid, 'mermaid') window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid) })()