[英]For Astro.js, how do I inject page content (seo meta tags) into <head> section of an Astro layout?
I've got an Astro.js layout file with a header, footer, and all the other things I want to appear on every page on my site.我有一个 Astro.js 布局文件,其中包含页眉、页脚以及我希望在我网站的每个页面上显示的所有其他内容。 There are two areas (names slots) that I want to put page content into.
我想将页面内容放入两个区域(名称槽)。 One area in the and one in the (between the header and footer)
一个区域和一个区域(在页眉和页脚之间)
Roughly, this is my layout.astro:粗略地说,这是我的 layout.astro:
---
import '../styles/global.styl'
import '../styles/page.styl'
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<slot name='head' />
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/images/favicon.ico">
</head>
<body>
<header>
<a href="/">Company Name</a>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<slot name='body' />
<footer>
<p id="copyright">© {new Date().getFullYear()} Company Name</p>
</footer>
</body>
<html>
Those two slots (head and body) will receive content from my page.这两个插槽(头部和主体)将从我的页面接收内容。 My page currently looks like this:
我的页面目前看起来像这样:
---
import Layout from '../layouts/page.astro'
import PageSeo from '../components/PageSeo.astro'
var { info = {} } = Astro.props
info.title = '404 - Not Found'
info.description = 'The page you requested could not be found. Please check the spelling of the URL.'
info.image = 'image link'
info.url = 'page url'
---
<Layout title={info.title}>
<head slot='head'>
<PageSeo page={info} />
</head>
<main slot='body'>
<h1>404 - Not Found</h1>
<p>Hm... You’ve arrived at a page that does not exist. Computers are a bit literal, try checking the spelling of the link you typed.</p>
</main>
</Layout>
The body content slides in just fine, but the SEO content (or anything I try to inject in the head) does not.正文内容滑动得很好,但 SEO 内容(或我尝试在头部注入的任何内容)却没有。 I can't think of a wrapper element in HTML that's acceptable in the head of the document.
我想不出在文档头部可接受的 HTML 包装器元素。
Ideas?想法?
Ah... figured it out:啊...想通了:
<PageSeo slot='head' page={info} />
While the wrapper cannot receive a slot name, embedded components can.虽然包装器无法接收插槽名称,但嵌入式组件可以。 Cool.
凉爽的。
saw your post on the Discord.在 Discord 上看到了您的帖子。
You just need to put the slot attribute on the component, instead of creating another <head>
element.您只需要将 slot 属性放在组件上,而不是创建另一个
<head>
元素。 Like so:像这样:
<Layout title={info.title}>
<PageSeo slot='head' page={info} />
<main slot='body'>
<h1>404 - Not Found</h1>
<p>Hm... You’ve arrived at a page that does not exist. Computers are a bit literal, try checking the spelling of the link you typed.</p>
</main>
</Layout>
I believe the way you were doing it created another head element.我相信你这样做的方式创造了另一个 head 元素。
Also there are a good few integrations for SEO in Astro which may save you some time. Astro 中也有一些 SEO 集成,可以为您节省一些时间。 They do very similar things (and more): Check them out here: https://astro.build/integrations/performance+seo/
他们做的事情非常相似(甚至更多):在这里查看: https ://astro.build/integrations/performance+seo/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.