英文:
Dynamic social sharing cards populated in <svelte:head>
问题
你建立了一个博客网站，试图为每个独立的博客实现动态社交分享卡。在开发者工具中检查头部元素时，一切似乎都正常运行，但当我进行实时测试或在社交分享预览工具（如OpenGraph）中运行链接时，我的动态存储变量未定义。
我正在从Supabase获取数据并将其保存到存储中。以下是我在svelte:head标记中使用的代码：
<svelte:head>
{#await $blogBeingViewed then blog}
<title>Website - {blog.title}</title>
<meta name="title" content="{blog.title}">
<meta name="description" content="{blog.subtitle}">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.website.com/article/{blog.id}">
<meta property="og:title" content="{blog.title}">
<meta property="og:description" content="{blog.subtitle}">
<meta property="og:image" content="{blog.image_url}">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://www.website.com/article/{blog.id}">
<meta name="twitter:title" content="{blog.title}">
<meta name="twitter:description" content="{blog.subtitle}">
<meta name="twitter:image" content="{blog.image_url}">
{/await}
</svelte:head>
你在社交媒体上分享时，任何想法为什么会出现无法正确填充元标签的问题？
我希望我使用了正确的术语（我只是个业余爱好者）。随时提问任何后续问题，以帮助我澄清我的问题。
谢谢你的时间和帮助。
我尝试过上面显示的代码块的多个变体，例如没有“#await”，使用“#if”等。
英文:
I've built a blog website and am trying to implement dynamic social share cards for each individual blog. While everything appears to be working properly when I inspect the head element in developer tools, when I do a live test or run the link through social sharing preview tools (such as OpenGraph) my dynamic store variables are undefined.
I'm pulling the data from Supabase and saving it to a store. Here's the code that I'm using in my svelte:head tag:
<svelte:head>
{#await $blogBeingViewed then blog}
<title>Website - {blog.title}</title>
<meta name="title" content="{blog.title}">
<meta name="description" content="{blog.subtitle}">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.website.com/article/{blog.id}">
<meta property="og:title" content="{blog.title}">
<meta property="og:description" content="{blog.subtitle}">
<meta property="og:image" content="{blog.image_url}">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://www.website.com/article/{blog.id}">
<meta name="twitter:title" content="{blog.title}">
<meta name="twitter:description" content="{blog.subtitle}">
<meta name="twitter:image" content="{blog.image_url}">
{/await}
</svelte:head>
Any ideas why I'm experiencing this failure to properly populate my meta tags when attempting to share on social media?
I hope that I'm using the proper terminology (I'm just a hobbyist). Feel free to ask any follow-up questions that would help me to clarify my question.
Thank you for your time and assistance.
I've tried multiple variations on the code block shown above, i.e. without "#await," using "#if," etc.
答案1
得分: 1
在经过一晚的思考后，我意识到我需要将数据库逻辑从 onMount 移动到一个 +page.ts 文件中。在 onMount 函数中进行的数据获取在服务器端不会呈现。通过将这个逻辑移到 +page.ts 中，数据会在服务器上获取，并在页面在浏览器中呈现时可用。
英文:
After sleeping on it, I realized that I needed to move my database logic from onMount to a +page.ts file. Data fetching done in an onMount function is not rendered on the server. By moving this logic to +page.ts, the data is fetched on the server and available when the page renders in the browser.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论