Twig를 이용한 실제 경로 및 UX

TWIG를 사용하여 링크의 탐색 모음에서 현재 경로를 디자인하는 방법은 무엇입니까? 이것이 바로 우리가 보게 될 것입니다 😀

우리의 탐색 모음 및 경로

사진과 비디오를 표시하는 블로그가 있다고 가정해 보겠습니다. 우리의 navbar에는 4개의 링크가 있습니다:

홈

사진

비디오

문의

라우트에 대해 우리는 단지 주어진 이름을 원하므로 다음과 같습니다.

홈 => "app_home"

사진 => "app_picture"

비디오 => "app_video"

연락처 => "app_contact"

자, 모든 정보가 있습니다. 이제 나뭇가지 템플릿을 살펴보세요.

<nav>
 <ul>
   <li>
     <a href="{{ path('app_home') }}">Home</a>
   </li>
   <li>
     <a href="{{ path('app_picture') }}">Pictures</a>
   </li>
   <li>
     <a href="{{ path('app_video') }}">Videos</a>
   </li>
   <li>
     <a href="{{ path('app_contact') }}">Contact</a>
   </li>
 </ul>
<nav>

여기에서 링크를 클릭하면 경로로 리디렉션되지만 URL을 제외한 어떤 것도 올바른 경로에 있음을 나타내지 않습니다. 그럼 UX를 좀 해보자.

나뭇가지 기능

우리는 twig의 기능을 바로잡을 것입니다. 패키지를 설치해야 합니다.composer require twig/extensions
원하는대로 이름을 지정하고 파일로 이동하십시오. 필터에 대한 모든 것을 지우고(더 나아가 일부를 시도하려는 경우 제외) 공개 함수 getFunctions로 이동합니다.
여기에서 현재 함수 'getActualRoute'에서 "actual_route"라는 나뭇가지에 대한 함수를 만들 것입니다.

    public function getFunctions(): array
    {
        return [
            new TwigFunction('actual_route', [$this, 'getActualRoute']),
        ];
    }

getActualRoute는 2개의 문자열 매개변수를 사용하고 현재 경로가 실제 경로와 같으면 활성을 반환합니다.

    public function getActualRoute(string $value, string $route): string
    {
        return $value === $route ? 'active' : '';
    }

탐색 모음으로 돌아가기

마지막 단계에서 템플릿을 수정합니다. 현재 경로에 '활성' 클래스를 추가하려고 합니다. 먼저 실제 경로의 이름을 포함할 경로 변수를 설정합니다. 나뭇 가지에서 이것을 덤프하려고 시도하십시오 : app.request.attributes.get('_route') . 보시다시피 문자열에 실제 경로가 있습니다. 이제 해보자:

{% set route = app.request.attributes.get('_route') %}

<nav>
 <ul>
   <li>
     <a href="{{ path('app_home') }}">Home</a>
   </li>
   <li>
     <a href="{{ path('app_picture') }}">Pictures</a>
   </li>
   <li>
     <a href="{{ path('app_video') }}">Videos</a>
   </li>
   <li>
     <a href="{{ path('app_contact') }}">Contact</a>
   </li>
 </ul>
<nav>

그런 다음 각 링크에 대해 다음 기능을 사용하여 클래스를 작성하십시오.<a href="{{ path('app_home') }}" class="{{ actual_route('app_home',route) }}">Home</a>
따라서 'app_home' === 경로(방금 설정한 것)이면 활성 클래스가 됩니다.
그것을 시도하고 요소를 검사하십시오. 이제 이것을 사용자 정의하기 위해 몇 가지 CSS를 작성하기만 하면 됩니다. 예를 들어 SCSS의 경우:

a{
 color: black;
 transition:0.3s ease-in-out;
 &.active{
  color:red;
 }
}

결론

도움이 되셨길 바라며 질문이나 개선 사항이 있으면 적어주세요 😊

건배 !