需要 Markdown / HTML 内容块插件

• 使用

details

默认

<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow">
  <summary>Blink 内核：Chrome / Edge / Opera</summary>
  <p>无问题</p>
</details>

添加 open 就是默认打开

<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow" open>
  <summary>Blink 内核：Chrome / Edge / Opera</summary>
  <p>无问题</p>
</details>

展示

图片

根据 class 里的 columns-1 is-cropped 来改变样式

columns-default，columns-1，columns-4 is-cropped

单图

<figure class="wp-block-image fade-before">
    <img fetchpriority="high" decoding="async" width="3680" height="2047"
        src="https://api.minio.yyds.pink/moony/files/2024/08/123161646.webp" alt="" class="wp-image-1"
        data-fancybox="gallery">
    <figcaption class="wp-element-caption">全局菜单 UI 设计图</figcaption>
</figure>

展示

样式1

代码

<figure class="wp-block-gallery has-nested-images columns-1 is-cropped">
    <figure class="wp-block-image size-large">
        <img src="https://api.minio.yyds.pink/moony/webp/2024/05/6634b3eb4bf78.webp" class="wp-image-1">
        <figcaption class="wp-element-caption">日间模式</figcaption>
    </figure>
    <figure class="wp-block-image size-large">
        <img src="https://api.minio.yyds.pink/moony/webp/2024/05/6634b3eb42510.webp" class="wp-image-2">
        <figcaption class="wp-element-caption">夜间模式</figcaption>
    </figure>
    <figcaption class="blocks-gallery-caption wp-element-caption">THYUU/星度首页夏季限定主题</figcaption>
</figure>

展示

样式2

代码

<figure class="wp-block-gallery has-nested-images columns-4">
    <figure class="wp-block-image size-large">
        <img src="https://api.minio.yyds.pink/moony/files/2024/10/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241015231541.jpg"
            class="wp-image-1">
    </figure>
    <figure class="wp-block-image size-large">
        <img src="https://api.minio.yyds.pink/moony/files/2024/10/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241015231551.jpg"
            class="wp-image-2">
    </figure>
    <figcaption class="blocks-gallery-caption wp-element-caption">爱情邮局</figcaption>
</figure>

展示

样式3

代码

添加 alignwide 可以图片全屏

<figure class="wp-block-gallery alignwide has-nested-images columns-default is-cropped">
    <figure class="wp-block-image size-large">
        <img src="https://api.minio.yyds.pink/halo-docs/2024/06/Farallon-%E9%A6%96%E9%A1%B5.png">
        <figcaption class="wp-element-caption">首页</figcaption>
    </figure>
    <figure class="wp-block-image size-large">
        <img src="https://api.minio.yyds.pink/halo-docs/2024/06/Farallon-%E5%BD%92%E6%A1%A3.png">
        <figcaption class="wp-element-caption">文章归档页面</figcaption>
    </figure>
</figure>

展示