HiJoe
HiJoe•12mo 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.
marvinh.•12mo 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
HiJoeOP•12mo ago
Right, I gave this as like recognizable example. I should have been more clear but it applies to non-head things
marvinh.
marvinh.•12mo ago
In that case, what do you mean with "title tag" instead?
HiJoe
HiJoeOP•12mo ago
This was a example. So it could also be a other part of the layout that expects per route values
marvinh.
marvinh.•12mo ago
Right, I'm admittedly having trouble understanding what you're trying to do. Maybe you can rephrase what you're looking for?
HiJoe
HiJoeOP•12mo 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
MaDsEn•12mo 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

Did you find this page helpful?