README

此 CommonMark 扩展允许您在 CommonMark 渲染的 Markdown 中为图片添加媒体查询。

安装

您可以通过 Composer 安装此扩展

composer require sven/commonmark-image-media-queries

使用方法

要启用此扩展，请首先确保与 CommonMark 一起提供的 Attributes 扩展已启用。然后，将其添加到 CommonMark 环境中

use Sven\CommonMark\ImageMediaQueries\ImageMediaQueriesExtension;

$environment->addExtension(new ImageMediaQueriesExtension());

现在，您可以为您的图片添加 media 属性

![from 800px wide](/assets/800.jpg){media="(min-width: 800px)"}
![from 1200px wide](/assets/1200.jpg){media="(min-width: 1200px)"}
![An image](/assets/default.jpg)

这将渲染以下 HTML

<picture class="media-query-picture">
    <source srcset="/assets/800.jpg" media="(min-width: 800px)" />
    <source srcset="/assets/1200.jpg" media="(min-width: 1200px)" />
    <img src="/assets/default.jpg" alt="An image" />
</picture>

重要

至少有一个其他带有 media 属性的图片之后的最后一个图片将始终用作“默认”图片，因此将作为 <picture> 元素中的 <img> 标签渲染。如果此最后一个图片本身也有 media 属性，则该属性将不会使用并被删除。

简写

此扩展还包含并允许您编写自己的，用于常用媒体查询的简写。您可以在注册扩展时启用简写

use Sven\CommonMark\ImageMediaQueries\ImageMediaQueriesExtension;
use Sven\CommonMark\ImageMediaQueries\Shorthands\ColorScheme;

$extension = new ImageMediaQueriesExtension();
$extension->addShorthand(new ColorScheme());

$environment->addExtension($extension);

配色方案

\Sven\CommonMark\ImageMediaQueries\Shorthands\ColorScheme 简写允许您在图片上使用 {scheme=dark}，并扩展为 (prefers-color-scheme: dark)

![dark](/assets/dark-settings.jpg){scheme=dark}
![A settings dialog](/assets/settings.jpg)

这将渲染以下 HTML

<picture class="media-query-picture">
    <source srcset="/assets/dark-settings.jpg" media="(prefers-color-scheme: dark)" />
    <img src="/assets/settings.jpg" alt="An image" />
</picture>

宽度

\Sven\CommonMark\ImageMediaQueries\Shorthands\Width 简写为您提供了添加到图片中的 minw 和 maxw 属性。上面的示例可以缩短为以下内容

![from 800px wide](/assets/800.jpg){minw=800px}
![from 1200px wide](/assets/1200.jpg){minw=1200px}
![An image](/assets/default.jpg)

当然，这也适用于 {maxw=[value]}。

编写自己的

要编写自己的简写，实现 \Sven\CommonMark\ImageMediaQueries\Shorthands\Shorthand 接口，并从 mediaQueries 方法返回以简写为键的查询数组。查询中的任何 {} 实例都将替换为 HTML 属性的值。

use Sven\CommonMark\ImageMediaQueries\Shorthands\Shorthand;

final class AspectRatio implements Shorthand
{
    public function mediaQueries(): iterable
    {
        return [
            'min-aspect' => '(min-aspect-ratio: {})',
            'max-aspect' => '(max-aspect-ratio: {})',
        ];
    }
}

如果您将简写添加到扩展中，则可以在 Markdown 中的图片上使用类似 {min-aspect=8/5} 和 {max-aspect=3/2} 的属性。

注意

如果您想访问 CommonMark 配置对象，可以实拟 \Sven\CommonMark\ImageMediaQueries\Shorthands\ConfigurationAwareShorthand 接口 而不是 正规的 Shorthand 接口。

配置

默认情况下，此扩展将其渲染的 <picture> 元素添加到 media-query-picture 类。您可以在配置中更改此类

use League\CommonMark\Environment\Environment;
use Sven\CommonMark\ImageMediaQueries\ImageMediaQueriesExtension;

$environment = new Environment([
    'image_media_queries' => [
        'picture_class' => 'your-class', // Default: 'media-query-picture'.
    ],
]);

$environment->addExtension(new ImageMediaQueriesExtension());

注意：请记住，<picture> 元素无法被样式化，因为它实际上在浏览器中不会被渲染。您应该使用 <img> 元素进行样式化。有关更多信息，请参阅 MDN 页面。

贡献

欢迎所有贡献（pull 请求、问题和技术请求）。不过，请首先阅读 CONTRIBUTING.md。有关所有贡献者的信息，请参阅贡献者页面。

许可证

sven/commonmark-image-media-queries 采用 MIT 许可协议（MIT）。请参阅许可文件以获取更多信息。

sven / commonmark-image-media-queries

维护者

详细信息

README

安装

使用方法

简写

配色方案

宽度

编写自己的

配置

贡献

许可证