Opensophy Hub 3.4：CodeBlock 选项卡和首页

Opensophy Hub 3.4：CodeBlock 新增标签页支持、自定义首页以及 UI 改进

Opensophy Hub 3.4 在 CodeBlock 组件中引入了标签页支持。现在，您可以指定一个数组 tabs: CodeTab[]，包含命名标签页，每个标签页拥有独立的语法高亮语言和代码内容。docUtils.mjs 中的解析器会将 Markdown 块如 :::tabs 和 :::tab[Name] 转换为相应的结构。

Markdown 编辑器现新增插入 Tabs 块的按钮。这简化了处理多变体代码的工作，例如比较不同语言的实现。

我们之前放弃了 Mermaid，转而采用自定义图表以实现更好的集成。详情请参阅格式指南。

自定义首页

新增选项允许您用完整的 landing page 替换标准的 welcome.md。GeneralPage.tsx 组件包含主视觉区，使用 SingularityShaders WebGL 着色器，还包括安全性和生态系统模块。

配置存储在 public/data/site-config.json 中，在开发模式下无需重建即可应用。在 landing 模式下，为 SEO 添加了 SSR 存根——一个隐藏的 <div id="seo-landing-content">，兼容 SPA。

主要修复和导航改进

• 从管理面板中移除 SEO/GEO 管理（未来版本将以扩展选项回归）。
• 修复了 devpanel 中的问题。
• 视觉优化。

导航

重构了 SectionDropdown：章节文本不再被截断。为导航树元素添加了 wordBreak: 'break-word' 和 lineHeight: 1.3。

DocHoverPreview 显示元数据：作者、类型、日期、标签。通过同步断点初始化消除了移动端导航闪烁。

管理面板

完全支持键盘调整大小。从标题栏任意点拖拽。键盘面板移动（方向键 ±20px）。新增 SitePanel 标签，用于在 welcome.md 和首页之间切换。

表格和 CodeBlock 改进

表格 (tableStyles.ts)

• width: 100%; min-width: max-content，实现正确拉伸。
• .prose .not-prose table 使用 display: table，支持嵌套表格。
• 拖拽滚动，5px 阈值（阈值前——文本选择）。
• 触摸：水平滑动不阻挡垂直滚动。

CodeBlock

• 超过 7 行的块显示“展开”按钮。
• 通过 Overlay 全屏。
• 移动端菜单 ⋯（复制/展开）滚动时关闭。
• highlight.js 语言懒加载。

SEO、搜索和迁移

SEO/布局

统一控制点——src/app/layouts/Layout.astro 中的 SITE 对象。支持 JSON-LD（WebSite、Article）、Open Graph、Twitter Card、canonical、article:published_time / modified_time。通过 props 配置：title、description、keywords、robots、lang、author、date。

搜索

• 按 navSlug 过滤，带徽章和重置。
• 日期过滤：过去 30 天内的新增/更新。
• 排序：最新/最早/更新。
• 分页“显示更多 N 个”，无需重绘。
• 键盘导航：↑↓ 浏览结果，Enter 打开。

迁移：hub.opensophy.com 的内容已迁移至 opensophy.com，连同 UI 库（ui.opensophy.com）。该库正在填充开源组件——无需注册，如免费解决方案的归档。

要点：

• CodeBlock 中的标签页，支持多语言代码及 :::tabs 解析。
• 自定义首页，带 WebGL 主视觉区和 SEO 的 SSR 存根。
• UI 增强：悬停预览、管理面板拖拽调整大小、表格拖拽滚动。
• Layout.astro 中集中 SEO，支持 JSON-LD 和 OG 元标签。
• 迁移至主域名，连同 UI 库。

— Editorial Team