这里是这个模版的一些常用 mdx 元素,写在这里方便复制使用。

引入组件

import { Image } from "astro:assets";
import WorkImage from "../../../assets/images/work.jpg";
import TestVideo from "../../../assets/video/test_video.mp4";

B 站视频

<iframe
  src="//player.bilibili.com/player.html?isOutside=true&aid=1355658592&bvid=BV1Xz421b7FU&cid=1574676110&p=1&autoplay=0&muted=0"
  style="width:100%;height:344px;"
  autoPlay="0"
  muted="0"
  scrolling="no"
  border="0"
  frameborder="no"
  framespacing="0"
  allowfullscreen
></iframe>

markdown 图片

![测试图片](../../../assets/images/work.jpg))

测试图片

mdx 图片(宽)

<div class="flex flex-row justify-center bg-zinc-100  rounded md:-mx-28">
  <Image
    alt="GitHub test"
    loading="lazy"
    width="2000"
    height="1000"
    decoding="async"
    data-nimg="1"
    class="my-0 rounded"
    srcSet=""
    src={WorkImage}
  />
</div>
GitHub test

mdx 视频(普通)

<div class="flex flex-row justify-center bg-zinc-100 rounded-sm ">
    <video autoPlay loop preload="auto" playsInline class="my-0 rounded">
        <source src={TestVideo} type="video/mp4">
    </video>
</div>

mdx 视频(宽)

<div class="flex flex-row justify-center bg-zinc-100 rounded-sm md:-mx-28">
  <video autoPlay loop preload="auto" playsInline class="my-0 rounded">
    <source src={TestVideo} type="video/mp4" />
  </video>
</div>

链接

<a href="https://google.com" target="blank"></a>

布局

两列布局(宽)

<div class="grid gap-6 md:grid-cols-2 md:-mx-24"></div>
Github Test

Github Test Github Test Github Test Github Test Github Test Github Test

Github Test

Github Test Github Test Github Test Github Test Github Test Github Test

两列布局(窄)

<div class="flex flex-col gap-6 md:grid md:grid-cols-2"></div>
Github Test

Github Test Github Test Github Test Github Test Github Test Github Test Github Test

Github Test

Github Test Github Test Github Test Github Test Github Test Github Test Github Test

item 单列

<div class="flex flex-col gap-2">
  <video autoPlay loop preload="auto" playsInline class="my-0 rounded-md md:max-h-[540px]">
    <source src={TestVideo} type="video/mp4" />
  </video>
  <div class="flex flex-col px-2 pt-2">
    <div>Github Test</div>
    <div class="imgDesc text-zinc-400">
      Github Test Github Test Github Test Github Test Github Test Github Test Github Test
    </div>
  </div>
</div>

item 双列

<div class="col-span-2">
  <div class="flex flex-col gap-2">
    <a href="https://google.com" target="blank">
      <video autoPlay loop preload="auto" playsInline class="my-0 rounded-md md:max-h-[540px]">
        <source src={TestVideo} type="video/mp4" />
      </video>
    </a>
    <div class="flex flex-col px-2 pt-2">
      <div>Github Test</div>
      <div class="imgDesc text-zinc-400">
        Github Test Github Test Github Test Github Test Github Test Github Test
      </div>
    </div>
  </div>
</div>