devrazn/easynav

使Laravel中的导航管理变得简单。

v1.0.4 2017-10-16 16:14 UTC

This package is auto-updated.

Last update: 2024-09-27 20:55:55 UTC


README

这个惊人的包的所有荣誉都属于DevMarketer (https://github.com/DevMarketer/LaravelEasyNav)。我只是修改/更新了代码的一小部分,使我的生活以及像我一样的其他开发者的生活变得更加简单。本readme的大部分内容也是从他的仓库克隆的。"我"、"我自己"等词在此后的文档中均指DevMarketer,即此包的原始作者。

每次我构建另一个Laravel应用程序时,我都会发现自己正在重复使用我多年来一直在完善的相同自定义导航助手。这些工具允许您根据当前页面准确地简洁地更改导航元素的类。这样的工具允许您的导航自我管理,加快开发进度,同时保持长期生产使用的效率。

安装

安装简单,设置与任何其他Laravel包类似。

1. 使用Composer安装

首先,通过Composer引入包

composer require devrazn/easynav

2. 定义服务提供者和别名

接下来,我们需要引入别名和服务提供者。

注意: 此包支持Laravel 5.5的新自动发现功能,因此如果您正在使用Laravel 5.5项目,则安装已完成,您可以跳到步骤3。

如果您正在使用Laravel 5.0 - 5.4,则需要添加提供者和别名。在您的config/app.php中定义一个新的服务提供者

'providers' => [
	//  other providers

	DevMarketer\EasyNav\EasyNavServiceProvider::class,
];

然后,我们想要在相同的config/app.php文件中定义一个别名。

'aliases' => [
	// other aliases

	'Nav' => DevMarketer\EasyNav\EasyNavFacade::class,
];

3. 发布配置文件(可选)

配置文件允许您覆盖此包的默认设置以满足您的特定需求。它是可选的,并允许您设置输出到活动导航元素的默认活动类名。您可以在每个函数中覆盖此值,但设置默认值可以使您的代码更干净。它默认为"active",这是许多开发者和许多开发者常用的类名,并且支持Bootstrap。如果您正在使用如Bulma之类的框架,则希望将此值更改为"is-active"。许多CSS BLM框架需要"--active"。设置一次,无需再次设置。

要生成配置文件,请将以下命令输入到您的终端中

php artisan vendor:publish --tag=easynav

这将在config/easynav.php生成一个配置文件。

使用方法

此包易于使用。它提供了一些有用的导航函数。将每个这些方法视为定义导航元素规则的“工具”。一旦为该导航元素设置了“规则”,您就无需担心了。如果用户访问该页面(基于规则),则它将输出您定义的CSS类(通常类似于"active""is-active"),到HTML元素,这将显示导航上的活动状态。

[重要] 此包不做什么

此包不生成导航HTML。它仅根据您定义的规则将“活动”CSS类添加到您的HTML元素中。您可以在CSS中自定义活动菜单/导航链接的外观。

这些导航规则是如何工作的

对于每个导航元素,您将在HTML元素的class=" "字段中添加以下“规则”之一。您仍负责在CSS中样式化元素。许多CSS框架已经为您完成了这项工作。

示例
Current Url - https://domain.com/posts/laravel-is-awesome
---

<nav>
	<ul class="navigation">
		<li class="{{ Nav::isRoute('home') }}">Home</li>
		<li class="{{ Nav::isResource('posts') }}">Posts</li> 				// This one will render a class of "active" to the <li></li>
		<li class="{{ Nav::hasSegment('about')}}">About</li>
		<li class="{{ Nav::urlContains('contact') }}">Contact</li>
	</ul>
</nav>

本示例演示了如何将4个不同的“规则”相互连接,以定义某个导航元素何时应该接收“激活”类。

请记住:元素的样式设计仍然由您负责!此插件仅根据您定义的规则动态地为元素添加激活类。

现在您已经看到了这个功能在实际中的应用,让我们逐个查看每个规则,以了解如何定义它。

isRoute() - 匹配命名路由(自定义功能)

此规则将标记一个元素为激活状态,如果当前页面与指定的命名路由(以“|”分隔的字符串或数组)匹配。

Nav::isRoute($routeNames='', $activeClass = "active")
Nav::isRoute($routeNames=[], $activeClass = "active")

参数

  • $routeName - 必需的字符串或数组。这是或这些是要匹配的命名路由。它必须与您运行 php artisan route:list 时在“名称”列中注册的值匹配。
  • $activeClass - 可选的字符串
    默认值为在您的配置文件下定义的 default_class 的值,如果没有生成配置,则为 "active"

示例

Current Url - https://domain.com/contact
---

Routes File:
	Route::get('contact', 'BaseController@contact')->name('contact');
---

{{ Nav::isRoute('contact') }} 						// returns "active" [1]
{{ Nav::isRoute('contact', 'is-open') }}	// returns "is-open" [2]
{{ Nav::isRoute('contact|home', 'is-open') }}	// returns "is-open" [3]
{{ Nav::isRoute(['home', 'about'], 'is-open') }}	// returns "" [4]
{{ Nav::isRoute('about') }}								// returns "" [5]

(1) 字符串 "contact" 与也是 "contact" 的命名路由匹配,因此返回默认的激活类
(2) "contact" 与我们目前所在的命名路由匹配,因此返回第二个参数中提供的激活类,即 "is-open" (3) "contact" 与我们目前所在的命名路由匹配,因此返回 "" (4) "home" 或 "about" 都与我们目前所在的命名路由 "contact" 不匹配,因此返回 "" (5) "about" 与我们目前所在的命名路由 "contact" 不匹配,因此返回 ""

hasSegment() - 匹配定义的段

此规则将标记一个元素为激活状态,如果提供的字符串与提供的段匹配。这对于定义当其子元素中的任何一个激活时也应标记为激活的父元素非常有用。

Nav::hasSegment($slugs, $segments = 1, $activeClass = "active")

参数

  • $slug - 必需的 | 字符串或字符串数组
    这是我们要尝试匹配的值。如果您想匹配多个字符串,请传递字符串数组。注意,这类似于 OR|| 子句。如果其中任何一个匹配,则返回 true。
  • $segments - 可选的 | 整数或整数数组
    这定义了要匹配的 $slug 的段。如果没有给出,则默认为第一个段。使用整数(从1开始)来定义段。段的值如下所示:https://domainDoesntCount.com/1/2/3/4。由于Laravel的Request的限制,您只能定义到第4个段的段。如果您想检查多个段,请传递一个整数数组以检查任何这些段(类似于 OR|| 子句)。
  • $activeClass - 可选的 | 字符串
    默认值为在您的配置文件下定义的 default_class 的值,如果没有生成配置,则为 "active"

示例

Current Url - https://domain.com/posts/created-by/devmarketer
---

{{ Nav::hasSegment('posts') }} 																// returns "active" [1]
{{ Nav::hasSegment('posts', 2) }} 														// returns "" [2]
{{ Nav::hasSegment('devmarketer', [2,3], 'is-active') }} 			// returns "active" [3]
{{ Nav::hasSegment(['devmarketer', 'jacurtis'], [2,3]) }} 		// returns "active" [4]
{{ Nav::hasSegment('posts', [2,3]) }} 												// returns "" [5]

(1) "posts" 在第一个段(默认段)中,因此返回默认的激活类
(2) "posts" 不在第二个段中,因此返回空值
(3) 检查 "devmarketer" 是否在第二个或第三个段中。它在第三个段中,因此返回提供的激活类,即 "is-active"
(4) 检查 "devmarketer" 或 "jacurtis" 是否在第二个或第三个段中。 "devmarketer" 在第三个段中,因此返回默认的激活类
(5) 检查 "posts" 是否在第二个或第三个段中,返回空值。

示例 2

它仅匹配整个段。

Current Url - https://domain.com/example/text/segments
---

{{ Nav::hasSegment('example') }}		// returns "active"
{{ Nav::hasSegment('exam') }}				// returns ""

在第一个示例中,它有效,因为 "example" 是一个完整的段。但第二个示例不工作,因为即使 "exam" 包含在第一个段 "example" 中,它也不匹配整个段。

如果您想匹配段的某个部分,请查看 urlDoesContain 规则,该规则会在第二个示例中返回 true,尽管它是一个部分匹配。

isResource()

如果URL属于指定的资源,则匹配。
此规则将标记一个元素为活动状态,如果它是给定资源之一。传入资源名称和前缀(如果适用)。这允许您使用一条规则匹配 https://domain.com/posts/createhttps://domain.com/posts/1https://domain.com/posts/19/edit

Nav::isResource($resource, $prefix, $activeClass = "active", $strict)

参数

  • $resource - 必选 | 字符串
    您想匹配的资源。必须等于您在 Route::resource() 中提供的值(但使用此辅助函数不是必需的,也不会影响功能)。在类似 /posts/create 的 URL 中,资源为 "posts",而不是 "post"。
  • $prefix - 可选 | 字符串
    如果适用,这是前缀。例如 /admin/posts/create,则 "admin" 是前缀。对于深层前缀,如 /admin/manage/posts/create,您可以提交 "admin.manage""admin/manage" 作为前缀。
  • $activeClass - 可选的 | 字符串
    默认值为在您的配置文件下定义的 default_class 的值,如果没有生成配置,则为 "active"
  • $strict - 可选 | 布尔值
    如果设置为 TRUE,则将启用严格模式,要求对资源的搜索必须位于路径的开始处。(参见示例以获得更多说明)

示例 1

Current Url - https://domain.com/posts/1/edit
---

{{ Nav::isResource('posts') }} 									// returns "active" [1]
{{ Nav::isResource('posts', NULL, 'is-open') }}	// returns "is-open" [2]
{{ Nav::isResource('users') }}									// returns "" [3]

(1) 当前 URL 是 "posts" 资源,因此返回默认活动类
(2) 当前 URL 是 "posts" 资源,因此返回第三个参数指定的活动类。第二个参数为 NULL 告诉它该资源没有前缀。
(3) 搜索 "users" 资源,但活动 URL 是 "posts" 资源。因此返回 ""。

示例 2

使用前缀

Current Url - https://domain.com/admin/posts/1/edit
---

{{ Nav::isResource('posts') }} 												// returns "active", !IMPORTANT read notes [1]
{{ Nav::isResource('posts', 'admin', 'is-active') }}	// returns "is-active" [2]
{{ Nav::isResource('posts', 'admin.manage') }}				// returns "" [3]

(1) 重要提示:与没有前缀一样,这仍然返回默认活动类。它仍然确定这是一个 "post" 资源。但是,这也会在正常 domain.com/postsdomain.com/user/posts 上返回 true。因此,如果您想所有这些都返回为活动状态,那么请不要使用前缀,如本例所示。但是,如果您只想那些带有 "admin" 前缀或 "users" 前缀的返回为活动状态,那么请确保在第二个参数中给出前缀,以避免这些错误。
(2) 当前 URL 与具有 "admin" 前缀的 "posts" 资源匹配,因此返回第三个参数提供的活动类,"is-active"。
(3) 即使此 URL 有 "admin" 前缀,它也会返回 "",因为需要 "admin.manage" 或 "admin/manage"。您使用斜杠或点表示层没有关系。但是,提供的 URL 不包含 "manage" 层,因此此规则将返回为非活动状态。

示例 3

使用严格模式可能很棘手且令人困惑,但如果理解和正确使用,则非常强大。

Current Url - https://domain.com/admin/manage/posts/1/edit
---

{{ Nav::isResource('posts', NULL, NULL, TRUE) }} 		  			// returns "" [1]
{{ Nav::isResource('posts', 'manage', 'is-active', TRUE) }}	// returns "" [2]
{{ Nav::isResource('posts', 'manage', NULL, FALSE) }}				// returns "active" [3]
{{ Nav::isResource('posts', 'admin.manage', NULL, TRUE) }}	// returns "active" [4]

(1) 返回为非活动状态,因为虽然是 "posts" 资源,但严格模式已启用。这意味着前缀必须匹配,并且必须从路径的开始处(.com/之后的部分)开始。要启用严格模式,请确保它是第四个参数。您可能需要添加 NULL 值或填写其他值以到达第四个参数。
(2) 返回为非活动状态,因为 严格模式 指示前缀与 URL 路径的开始部分不完美匹配。(admin/manage 是严格前缀)。
(3) 与 (2) 完全相同,只是 严格模式 已禁用,这意味着它可以返回为活动状态。默认情况下禁用严格模式,因此将 FALSE 标记为不必要的,但它达到了相同的结果。
(4) 返回为活动状态,因为资源 AND 前缀与 完全 匹配,且启用了严格模式。

urlDoesContain()

此规则将匹配路径中任何字符串的存在。请务必小心使用此方法,因为它如果使用不当可能会导致错误。

Nav::urlDoesContain($search, $activeClass = "active", $strict = FALSE)

参数

  • $search - 必选 | 字符串
    在 URL 中搜索的值,表示为字符串。
  • $activeClass - 可选的 | 字符串
    默认值为在您的配置文件下定义的 default_class 的值,如果没有生成配置,则为 "active"
  • $strict - 必选 | 布尔值
    如果设置为 TRUE,将启用严格模式,需要从路径的起始位置进行搜索。(请参阅示例以获取更多说明)

示例

Current Url - https://domain.com/about/devmarketer/edit
---

{{ Nav::hasSegment('about') }}																// returns "active" [1]
{{ Nav::hasSegment('devm', 'open') }}													// returns "open" [2]
{{ Nav::hasSegment('devmarketer', 'active', TRUE) }} 					// returns "" [3]
{{ Nav::hasSegment('about/devmarketer', NULL, TRUE) }} 				// returns "active" [4]
{{ Nav::hasSegment('about', NULL, TRUE) }}										// returns "" [5]

(1) "about" 包含在 URL 中,因此返回为活动状态
(2) "devm" 包含在 URL 中(即使它不是一个完整的段)。请注意,如果不小心,它可能导致误报。提供的活动类为 "open",因此返回该类。
(3) "devmarketer" 在 URL 中,但 严格模式 也处于活动状态,因为搜索词没有从路径的起始位置开始,因此返回为非活动状态。
(4) 返回为活动状态,因为 严格模式 为 true,且 "about/devmarketer" 位于路径的起始位置,即使 URL 超过了搜索词。
(5) 返回为活动状态,因为 "about" 包含在 URL 中,并且启用 严格模式 后,它仍然有效,因为 "about" 被发现在 URL 的起始位置。

辅助函数

除了我们所学到的 Nav::method() 外观之外,还有一些辅助函数可供您使用,如果您更喜欢使用辅助函数。

如果您不想加载它们,可以通过将 config/easynav.php 文件中的 enable_helper_functions 设置更改为 FALSE 来禁用辅助函数。

navHasSegment($slugs, $segments, $activeClass)

这与 Nav::hasSegment() 完全相同。请参阅上面的文档了解如何使用它。

navIsRoute($routeName, $activeClass)

这与 Nav::isRoute() 完全相同。请参阅上面的文档了解如何使用它。

navIsResource($resource, $prefix, $activeClass, $strictMode)

这与 Nav::isResource() 完全相同。请参阅上面的文档了解如何使用它。

注意:没有为 Nav::urlDoesContain() 方法提供辅助函数。此方法太危险,不适合与辅助函数一起使用。

贡献

我鼓励您为此包做出贡献,以改进它并使其变得更好。即使您不擅长编码或提交拉取请求(PR),您也可以通过提交有关错误的报告或请求新功能来支持它,或者简单地帮助讨论现有问题,以提供您的意见并塑造此包的进展。

阅读完整的贡献指南

联系

我很乐意听到您的意见。我运营着 YouTube 上的 DevMarketer 频道,我们在那里讨论如何 "构建和扩展您的下一个伟大想法",请订阅并查看视频。

我总是在 Twitter 上,这是一种与我和我互动或关注我的好方法。 在 Twitter 上关注我

您也可以通过 hello@jacurtis.com 发送电子邮件,提出其他请求。