How to query title by slug?

I use the subpages of the homepage to create categories.
my product page blueprint:
Note that text and value are different.

fields:
  category:
    label: category
    type: select
    options: query
    query:
      fetch: site.find('home').children
      text: "{{ page.title }}"
      value: "{{ page.slug }}"

Now in my product template, I can get category’s slug by $page->category(), But I want to show this page’s category title.

<a href="<?= $page->parent()->url(['params' => ['category' => $page->category()]]) ?>"><?= how to show category's title ?></a>

One way would be to store the category like this:

fields:
  category:
    label: category
    type: select
    options: query
    query:
      fetch: site.find('home').children
      text: "{{ page.title }}"
      value: "{{ page.id }}" # Use the id instead of the slug

Then you can fetch the category page with $page->category()->toPage(). So your link could look something like this:

<a href="<?= $page->parent()->url(['params' => ['category' => ($cat = $page->category()->toPage())->slug()]]) ?>"><?= $cat->title() ?></a>

Great!
And need to change controllers.