README

Navsmith 是一个轻量级、无侵入的Laravel包，可以轻松地将您定义的路由转换为导航链接。它特别适用于类似SPA的网站。

为什么我要构建这个？

用法

只需使用 navsmith 方法定义您的路由，并为它们提供您希望在显示中使用的路由名称...

Route::navsmith(function () {
    Route::get('/', Welcome::class)->name('home');
    Route::get('/about', About::class)->name('about');
    Route::get('/contact', Contact::class)->name('contact');
});

包含 x-navsmith Blade组件...

<ul>
    <x-navsmith/>
</ul>

然后您就得到了可以显示的HTML链接。

<ul>
    <li><a href="https://mysite.com">Home</a>
    </li>
    <li><a href="https://mysite.com/about">About</a>
    </li>
    <li><a href="https://mysite.com/contact">Contact</a>
    </li>
</ul>

使用组件上的 current 属性，您可以根据链接是否是当前访问的页面（CSS样式或基于类的样式）来给予不同的样式，并获得类似SPA的体验

基于类的样式（例如 TailwindCSS）

<!-- This... -->
<x-navsmith class="text-black" current="font-bold"/>

<!-- Will render the link corresponding to the current page, like this... -->
<a href="https://mysite.com" class="text-black font-bold">Home</a>

CSS样式

<!-- This... -->
<x-navsmith style="color: rgb(0 0 0);" current="font-weight: 700;"/>

<!-- Will render the link corresponding to the current page, like this... -->
<a href="https://mysite.com" style="color: rgb(0 0 0); font-weight: 700;">Home</a>

您还可以传递任何属性到您的链接。如果您使用 Livewire 并想利用其类似SPA的导航功能，通过使用 wire:navigate，这尤其有用。

<!-- This... -->
<x-navsmith wire:navigate/>

<!-- Will render each of your links with the same attribute... -->
<a href="https://mysite.com" wire:navigate>Home</a>

此外，还提供了一个 navsmith_route 辅助函数，这样您就可以在代码的其他地方引用Navsmith路由，而无需记住特定的前缀名称。

给定如下路由定义

Route::navsmith(function () {
    Route::get('/a-cumbersome-url', Contact::class)->name('contact');
});

并调用 navsmith_route 如下

<p>Please visit the <a href="{{ navsmith_route('contact') }}">contact page</a> to send us an e-mail.</p>

HTML将渲染如下

<p>Please visit the <a href="https://mysite.com/a-cumbersome-url">contact page</a> to send us an e-mail.</p>

要求

Navsmith 需要 Laravel 10 或 11 和 PHP 8.2+。

安装

您可以通过composer安装此包

composer require codelinde/navsmith

自定义

您可以通过运行以下命令发布视图，以进行任何所需的更改。

php artisan vendor:publish --tag="navsmith-views"

测试

composer test

变更日志

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

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

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

鸣谢

• Ryan Linde
• 所有贡献者

许可

MIT许可（MIT）。请参阅 许可文件 了解更多信息。