Web Explorer
• 技术

富媒体内容展示示例 (Rich Media Demo)

#demo #markdown #media

欢迎阅读富媒体演示

这篇文章旨在全面展示 微波探索 (Web Explorer) 博客系统对各种媒体类型的支持能力。你将看到文本排版、图片、视频、音频以及代码块的实际渲染效果。

1. 文本排版 (Typography)

我们支持标准的 Markdown 语法，包括 加粗 (Bold)、斜体 (Italic)、删除线 (Strikethrough) 以及 行内代码 (Inline Code)。

引用块 (Blockquotes)

“技术不仅仅是代码，更是连接世界的微波。”

—— 微波探索

列表 (Lists)

无序列表：

  • Astro (SSG 框架)
  • React (组件库)
  • Tailwind CSS (样式引擎)

有序列表：

  1. 编写 Markdown 内容
  2. 构建静态站点
  3. 部署到阿里云 OSS

任务列表：

  • 完成博客搭建
  • 配置 Google AdSense
  • 发布第一篇正式文章

2. 图片展示 (Images)

图片是博客中最常用的元素。我们支持本地图片和网络图片。

本地图片

这是放在 public/favicon.svg 的网站图标：

Web Explorer Logo

网络图片

这是一张来自 Unsplash 的随机科技风格图片：

Technology 图注：Photo by Unsplash

3. 视频播放 (Videos)

在线视频 (Bilibili 嵌入)

我们通过 iframe 嵌入了一个 Bilibili 视频。使用了自适应容器，确保在移动端也能完美显示。

(注：以上视频为 Bilibili 随机示例，仅作演示用途)

HTML5 视频标签

如果你有本地视频文件 (例如 public/videos/demo.mp4)，可以使用原生标签：

<video controls width="100%">
  <source src="/videos/demo.mp4" type="video/mp4" />
  您的浏览器不支持 Video 标签。
</video>

4. 音频播放 (Audio)

支持插入背景音乐或播客。这里使用 HTML5 <audio> 标签演示。

🎵

演示音频

5. 代码高亮 (Code Highlighting)

基于 Shiki 的语法高亮，支持多种语言。

// JavaScript 示例
function waveExplorer() {
  const energy = "High Frequency";
  const style = "Lightweight";

  console.log(`Microwave Exploration: ${energy} & ${style}`);

  return {
    transmit: () => "Energy Transmitted!",
    explore: () => "Unknown Territory Found.",
  };
}
# Python 示例
def fibonacci(n):
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)

print([fibonacci(i) for i in range(10)])

6. 表格 (Tables)

功能模块技术栈状态
前端框架Astro + React + Vue✅
样式系统Tailwind CSS✅
部署方式SSG + Aliyun OSS✅
评论系统Giscus (待接入)🚧

总结

通过这篇文章，我们验证了博客系统对富媒体内容的强大支持。无论是图文混排，还是音视频嵌入，都能轻松实现。

Happy Coding & Exploring! 🚀

返回首页