README

league/commonmark 的扩展，用于向 Markdown 中渲染的链接添加 wire:navigate 属性并启用 Livewire 的 SPA 模式。

支持我们

我们投入了大量资源来创建 最好的开源包。您可以通过 购买我们的付费产品之一 来支持我们。

我们非常感激您从家乡给我们寄来明信片，说明您正在使用我们的哪个包。您可以在 我们的联系页面 找到我们的地址。我们将所有收到的明信片发布在我们的 虚拟明信片墙 上。

安装

您可以通过 composer 安装此包

composer require spatie/commonmark-wire-navigate

用法

将 CommonMarkWireNavigate 注册为 CommonMark 扩展。

use League\CommonMark\Environment\Environment;
use League\CommonMark\CommonMarkConverter;
use Spatie\CommonMarkWireNavigate\WireNavigateExtension;

$converter = new CommonMarkConverter($environment);
$converter->getEnvironment()->addExtension(new WireNavigateExtension());

echo $converter->convert('[About](/about)');
// <p><a href="/about" wire:navigate>About</a></p>

有关 CommonMark 扩展和环境的更多信息，请参阅 CommonMark 文档。

Laravel-markdown

当使用 Laravel-markdown 包时，您可以在 config/markdown.php 中注册该扩展

/*
 * These extensions should be added to the markdown environment. A valid
 * extension implements League\CommonMark\Extension\ExtensionInterface
 *
 * More info: https://commonmark.thephpleague.com/2.4/extensions/overview/
 */
'extensions' => [
    Spatie\CommonMarkWireNavigate\WireNavigateExtension::class,
],

选择要增强的链接

默认情况下，该扩展将向所有内部链接添加 wire:navigate，除非是当前页面的片段。要了解哪个链接是内部的，您必须指定应用程序的基本 URL。

$converter = new CommonMarkConverter($environment);
$converter->getEnvironment()->addExtension(new WireNavigateExtension(
    baseUrl: 'https://example.app',
));


echo $converter->convert('[About](/about)');
// <p><a href="/about" wire:navigate>About</a>

echo $converter->convert('[About](https://example.app/about)');
// <p><a href="https://example.app/about" wire:navigate>About</a>

echo $converter->convert('[Twitter](https://twitter.com/spatie_be)');
// <a href="https://twitter.com/spatie_be">Twitter</a></p>

此外，您还可以通过模式数组或回调配置是否添加该属性。

使用数组指定应用程序的根路径

$converter = new CommonMarkConverter($environment);
$converter->getEnvironment()->addExtension(new WireNavigateExtension(
    baseUrl: 'https://example.app',
    enabled: ['docs', 'guide'],
));

echo $converter->convert('[Installation](/docs/installation)');
// <p><a href="/docs/installation" wire:navigate>Installation</a>

echo $converter->convert('[Guide](/guide)');
// <p><a href="/guide" wire:navigate>Guide</a>

echo $converter->convert('[About](/about)');
// <p><a href="/about">About</a>

使用回调

$converter = new CommonMarkConverter($environment);
$converter->getEnvironment()->addExtension(new WireNavigateExtension(
    baseUrl: 'https://example.app',
    enabled: fn (string $url) => preg_match('/\/docs\//', $url),
    hover: true, 
));

在当前页面的片段上启用

$converter = new CommonMarkConverter($environment);
$converter->getEnvironment()->addExtension(new WireNavigateExtension(
    fragment: true, 
));

悬停时预取页面

如果您想在悬停时让 Livewire 预取页面，请启用 hover 选项。

$converter = new CommonMarkConverter($environment);
$converter->getEnvironment()->addExtension(new WireNavigateExtension(
    baseUrl: 'https://example.app',
    hover: true, 
));

现在扩展将向链接添加 wire:navigate.hover。

echo $converter->convert('[About](/about)');
// <p><a href="/about" wire:navigate.hover>About</a></p>

测试

composer test

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

请查看 我们的安全策略 了解如何报告安全漏洞。

鸣谢

• Sebastian De Deyne
• 所有贡献者

许可

MIT 许可证 (MIT)。请参阅 许可文件 了解更多信息。