MDX embed test page

by acdzh · 2020-04-24 14:52:11

Responsive iframe

指定宽高比的 iframe. 如果 iframe 里是同源页面，支持主题同步。

<IFrame2 src="/post/about" width="32" height="9" />

/post/about

Section

html 包裹用元素.

参数	类型	默认值	说明
`onLoad`	`() => void`	() =>	`默认执行函数, 不推荐使用`

<Section2
  onLoad={() => {
    const span = document.getElementById('section_debug_span');
    span.innerText = new Date().toString();
  }}
>
  This is a <b>section</b>. Now time: <span id="section_debug_span"></span>.
</Section2>

This is a section. Now time: .

网易云音乐

参数	类型	默认值	说明
`id`	`string`
`type?`	`1 \| 2 \| 3`	`2`	普通歌曲为 `2`, 电台节目为 `3`
`autoPlay?`	`boolean`	false	自动播放
`showInfo?`	`boolean`	true	显示版权信息

<NetEase id="5264842" showInfo={false} />
<NetEase id="1914914650"/>
<NetEase id="2495029972" autoPlay={true} type={3} />

如因版权问题无法加载, 请跳转至网易云播放.

YouTube

参数	类型	默认值	说明
`id`	`string`		eg. `"Ap0huJwyT7g"`
`width?`	`number`	`16`	视频宽度(比例)
`height?`	`number`	`9`	视频高度(比例)
`start?`	`number`	`0`	开始秒数
`showControls?`	`boolean`	`true`	显示控件

<Youtube id="Ap0huJwyT7g" width={560} height={315} start={64} />

哔哩哔哩

参数	类型	默认值	说明
`aid?`	`string`		eg. `"av205014682"`
`bid?`	`string`		`aid` 与 `bid` 必须传其中一个
`page?`	`number`	`1`	视频分P
`width?`	`number`	`16`	视频宽度(比例)
`height?`	`number`	`9`	视频高度(比例)

<BiliBili aid="205014682" />

CodePen

参数	类型	默认值
`id`	`string`
`height`	`number`	`600`
`editable`	`boolean`	`false`
`defaultTab?`	`string`	`"html,result"`

<CodePen id="jOZWLdE" />

ShaderToy

参数	类型	默认值	说明
`id?`	`string`		eg. `"fstyD4"`
`gui?`	`boolean`	`true`	是否展示控制栏
`t?`	`number`	`0`	开始的秒数
`paused?`	`boolean`	`isMobile ? false : true`	是否自动播放
`muted?`	`boolean`	`true`	是否静音
`width?`	`number`	`16`	视频宽度(比例)
`height?`	`number`	`9`	视频高度(比例)
`src?`	`string`		此项与 `id` 必须传其中一个. 这里需要传 base64 编码后的 shader 代码

<ShaderToy id="XcXXzS" />

PDF

type propsType = {
  src?: string;
  href?: string;
  children?: React.ReactNode;
  width?: number;
  height?: number;
  needDownload?: boolean;
};

pdf 组件的使用比较复杂, 下面是一些注意事项:

src 与 href 作用完全相同, 且两者是互斥关系, 同时只会有一个参数生效, src 优先级更高;
width 与 height 和视频类似, 仍是控制纵横比, 默认值分别是 16 和 9;
一个 pdf 组件允许两种提供参数的方式, 即 src/href 参数和 children 参数, 如下所示的调用会渲染三份 pdf:

<Pdf href="https://example.com/1.pdf">
  <a href="https://example.com/2.pdf"></a>
  <a href="../assest/3.pdf"></a>
</Pdf>

组件支持相对位置调用(如上面的 ../assest/3.pdf), 但是相对位置来源的 pdf 必须写在 children 的 a 标签中, 否则无法转换为正确的地址.
重要: 对于部分来源的 pdf, response header 的参数 content-disposition 可能为 attachment 而不是 inline(例如 onedrive 的分享链接, Github 的下载链接), 此时大部分浏览器的行为为直接下载而不是进行预览, 因此如果想让此类来源正常预览的话, 需要每个来源带上 needDownload={true} 参数(正确预览需要保证 CORS 没有问题), 例如:

<Pdf href="https://example.com/1.pdf" needDownload={true}>
  <a href="https://example.com/2.pdf" needDownload={true}></a>
  <a href="../assest/3.pdf"></a>
</Pdf>

下面是两个具体渲染的例子:

<Pdf src="https://raw.githubusercontent.com/NVIDIA/DLSS/main/doc/DLSS_Programming_Guide_Release.pdf" needDownload={true} />
 
<Pdf src="https://on-demand.gputechconf.com/gtc-cn/2018/pdf/CH8804.pdf" />

Loading PDF...