这篇文章用于本地联调展示效果：长内容、目录、分类/标签、代码块、表格、引用、以及内嵌视频。

目录效果

目录应该在右侧显示，并且能跟随滚动高亮当前位置。

一段较长的正文

很多时候，我们需要一篇“够长”的文章来观察：

  • 顶部封面是否会遮挡
  • 内嵌页面是否出现多余滚动条
  • 右侧卡片是否固定/可读
  • 代码块与表格在不同宽度下是否挤压变形

下面开始堆一些内容（用于测试滚动与排版）。

小节 A

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

小节 B

这是一段引用，用于测试引用块样式与行高。

第二段引用，用于测试间距。

代码块（带语言）

1
2
3
4
5
export function greet(name: string) {
  return `Hello, ${name}!`;
}

console.log(greet("Byu"));

表格

模块 目的 备注
Hexo 生成静态博客 GitHub Pages
byu 个人站壳子 Wujie/iframe 嵌入
R2 图片与素材 自定义域名

列表/任务

  • 未完成任务
  • 已完成任务
  1. 有序列表 1
  2. 有序列表 2
    1. 子项 2.1
    2. 子项 2.2

内嵌哔哩哔哩

下面是一个 iframe（用于测试嵌套 iframe 的展示和尺寸）：

结尾

如果你能看到：

  • 封面完整显示（不裁切）
  • 页面只有一根外层滚动条
  • 目录/分类/标签在右侧正常显示

那就说明整体联调完成。