HiJoe•7mo ago

Fresh - Page title to Layout

Hi, I have been browsing around the docs and also being new to JSX,I'm not sure what I look for. What I want todo is have a variable in the title tag of my _layout. So I can pass that var via the page.

7 Replies

marvinh.•7mo ago

To set the document title from a route use the <Head> component. Example:

export default function MyPage() {
  const world = "World!"

  return <>
    <Head>
      <title>hello {world}</title>
    </Head>
    <h1>this is my page</h1>
  </>
}

export default function MyPage() {
  const world = "World!"

  return <>
    <Head>
      <title>hello {world}</title>
    </Head>
    <h1>this is my page</h1>
  </>
}

See https://fresh.deno.dev/docs/examples/modifying-the-head

HiJoe•7mo ago

Right, I gave this as like recognizable example. I should have been more clear but it applies to non-head things

marvinh.•7mo ago

In that case, what do you mean with "title tag" instead?

HiJoe•7mo ago

This was a example. So it could also be a other part of the layout that expects per route values

marvinh.•7mo ago

Right, I'm admittedly having trouble understanding what you're trying to do. Maybe you can rephrase what you're looking for?

HiJoe•7mo ago

I have a section in my layout that depends on per route data. So like a head tag, I have a section within the layout that expects data from the Page (route). This is not a real example but Ill try to illustrate it. Layout

<head>
  <title>{from_page: title} - John Doe Company</title>
</head>
<body>
  <navbar />
  <welcome />
  <main>
    <sidebar />
    <section>
      // Page content (<Component />)
    </section>
    <aside>
      <p>Info 1: {from_page: info_a}</p>
    </aside>
  </main>
</body>

<head>
  <title>{from_page: title} - John Doe Company</title>
</head>
<body>
  <navbar />
  <welcome />
  <main>
    <sidebar />
    <section>
      // Page content (<Component />)
    </section>
    <aside>
      <p>Info 1: {from_page: info_a}</p>
    </aside>
  </main>
</body>

Page:

// title = 'Page'
// info_a = 'Something page related'
export default function Home() {
  return (
    <>
      Page Content
    </>
  );
}

// title = 'Page'
// info_a = 'Something page related'
export default function Home() {
  return (
    <>
      Page Content
    </>
  );
}

So title and info_a are defined within the page and should be rendered within the layout Hopefully that explains what I'm trying todo In "tradional" like tempalting engine it is often called blocks or sections and sometimes slots

MaDsEn•7mo ago

It looks like you're trying to dynamically populate certain elements in your layout based on route-specific data??. You might be able to achieve this using props