布局中的 Symfony 6 搜索表单 (base.html.twig)

Question

我一直面临一个搜索表单的问题，我想将其包含在布局/模板 base.html.twig 中，以便它在我的网站上除主页之外的任何地方都可用。当我尝试使用以下代码将组件包含在表单中时：

{% include "components/search.html.twig" with {'form': form, 'formClass': 'search-form-homepage'} only %}

我遇到错误：“变量‘形式’不存在。”

我使用相同的代码将该组件包含在另一个视图（home/index.html.twig）中，并且它在那里完美运行，但在 base.html.twig 中则不行。

我怀疑控制器没有正确地将

$form

变量发送到 base.html.twig。

我想要实现的是，当搜索表单已经以稍大的格式出现在主页上时，从主页（home/index.html.twig）中排除搜索表单，类似于网站 monster.fr 上的布局，但该表单存在于所有其他页面中，因为它将位于大多数网站的导航栏/标题中。

如何解决这个问题？

我的HomeController.php

class HomeController extends AbstractController
{
    // Renvoyer les informations de la page d'accueil
    #[Route('/', name: 'app_home')]
    public function searchForm(Request $request,string $formClass = null, PaginatorInterface $paginator, EntityManagerInterface $entityManager,CategorieRepository $categorieRepository, EmploiRepository $emploiRepository): Response
    {
        $data = new SearchData();

        // Créez le formulaire avec les données de la session
        $form = $this->createForm(SearchEmploiType::class, $data);

        $form->handleRequest($request);

        // Récupérez l'utilisateur connecté
        $user = $this->getUser();

        $searchInfo = '';

        // Récupérez les emplois sauvegardés par l'utilisateur connecté
        if ($user) {
            $savedEmplois = $user->getEmploiSauvegarder();
        } else {
            $savedEmplois = [];
        }

        if ($form->isSubmitted() && $form->isValid()) {

            $data->page = $request->query->getInt('page', 1);

            $results = $emploiRepository->findBySearch($data);

            $searchInfo = $data->poste . ' ' . $data->ville;

            return $this->render('emploi/emploi_results.html.twig', [
                'results' => $results,
                'searchInfo' => $searchInfo,
                'form' => $form->createView(), // Passez le formulaire à la vue
                'data' => $data, // Passez les données pré-remplies à la vue
                'savedEmplois' => $savedEmplois, // Passez la variable alreadySaved à la vue
                'search' => true,
            ]);
        }

        // Récupérez les catégories populaires
        $categories = $categorieRepository->findCategoriesPopulaires();

        return $this->render('home/index.html.twig', [
            'form' => $form->createView(),
            'categories' => $categories,
            'data' => $data,
        ]);
    }
}

我的家/index.html.twig：

{% extends 'base.html.twig' %}

{% block title %}TalentBlend - Accueil{% endblock %}

{% block body %}
<div class="bg">
    <h1>Talentueux ? Rencontrez l'<span>Opportunité</span>.</h1>
    {% include "components/search.html.twig" with {'form': form, 'formClass': 'search-form-homepage'} only %}

    {% if is_granted('ROLE_RECRUTEUR') or is_granted('ROLE_ADMIN') %}
        <a href="{{ path('app_search_candidat') }}"><i class="fa-solid fa-arrow-right-long"></i> Rechercher un candidat</a>
    {% endif %}
</div>

componenets/search.html.twig：

{{ form_start(form, {'action': path('app_home'), 'attr': {'class': formClass}}) }}

    <div class="form-group-search">
        <div class="input-group">
            {{ form_widget(form.poste, {'attr': {'class': 'form-control-search', 'placeholder': 'Rechercher emplois', 'id': 'search_emploi_poste'}}) }}
            <i class="fa-solid fa-magnifying-glass"></i>
        </div>
    </div>
    <div class="form-group-search">
        <div class="input-group">
            {{ form_widget(form.ville, {'attr': {'class': 'form-control-search', 'placeholder': 'Saisir un lieu', 'id': 'search_emploi_ville'}}) }}
            <i class="fa-solid fa-location-dot"></i>
        </div>
    </div>
    <div class="form-group-search" style="display: none;">
        <div class="input-group">
            {{ form_row(form.typeEmplois) }}
        </div>
    </div>
    <div class="form-group-search" style="display: none;">
        <div class="input-group">
            {{ form_row(form.contrats) }}
        </div>
    </div>
    
    <div class="form-group-search">
        <button class="submit-search" type="submit">Rechercher</button>
    </div>
    
{{ form_end(form) }}

布局base.html.twig：

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

{% if not isHomePage %}
{% include "components/search.html.twig" with {'form': form, 'formClass': 'search-form-homepage'} only %}
{% endif %}

我尝试制作另一个控制器，如 FormController.php，我将用它来呈现表单：

class FormController extends AbstractController
{
    #[Route('/search-form', name: 'app_search_form', methods: ['GET'])]
    public function searchFormPartial(Request $request, string $formClass): Response
    {
        $data = new SearchData();

        $form = $this->createForm(SearchEmploiType::class, $data);

        return $this->render('components/search.html.twig', [
            'form' => $form->createView(),
            'formClass' => $formClass,
            'data' => $data,
        ]);
    }
}

然后在布局base.html.twig中：

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

{% if not isHomePage %}
{{ render(controller('App\\Controller\\HomeController::searchForm', {'formClass': 'search-form-modal'})) }}
{% endif %}

它确实有效，但这样它就不再以正确的方式工作，比如将输入数据保存到下一个视图等......

Answer 1

extends

无法访问模板变量。这样重写base.html.twig和index.html.twig...

base.html.twig：

...
{% block search %}{% endblock %}
...

index.html.twig：

{% extends 'base.html.twig' %}

{% block title %}TalentBlend - Accueil{% endblock %}



{% block body %}
<div class="bg">
    <h1>Talentueux ? Rencontrez l'<span>Opportunité</span>.</h1>

{% block search %}
{% include "components/search.html.twig" with {'form': form, 'formClass': 'search-form-homepage'} only %}
{% endblock %}

    {% if is_granted('ROLE_RECRUTEUR') or is_granted('ROLE_ADMIN') %}
        <a href="{{ path('app_search_candidat') }}"><i class="fa-solid fa-arrow-right-long"></i> Rechercher un candidat</a>
    {% endif %}
</div>