英文:
Astro reference error when I follow the tutorial
问题
I have the following index.astro:
import Navigation from '../components/Navigation.astro';
<html lang="de">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator}>
<title>Pagetitle</title>
</head>
<body>
<Navigation />
</body>
</html>
and following Navigation.astro:
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
but I keep getting the error that Navigation is an unknown element pre-compile warning and a reference error when npm run dev.
Can someone please elaborate?
I tried running the above code and expected the Navigation to be rendered on the index page. But instead, I get a reference error telling me Navigation is undefined.
英文:
I have the following index.astro:
import Navigation from '../components/Navigation.astro';
<html lang="de">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator}>
<title>Pagetitle</title>
</head>
<body>
<Navigation />
</body>
</html>
and following Navigation.astro
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
but I keep getting the error that Navigation is an unknown element pre coimpile warning and a reference error when npm run dev.
Can some1 pls ellaborate?
I tried running the above code and expected the Navigation to be rendered in the index page. But instead I get a reference error telling me Navigation is undefined.
答案1
得分: 0
Navigation.astro必须包含在正文中的HTML部分，而不是在frontmatter部分。
正确写法：
---
---
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
错误写法，缺少了2行---：
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
这里有一个参考教程，可以再次查看：https://docs.astro.build/en/tutorial/3-components/1/#create-a-navigation-component
关于代码围栏（frontmatter）部分的更多细节，请参阅此处：https://docs.astro.build/en/core-concepts/astro-components/#component-structure
基本上，这是将代码与HTML Astro语法分开的方法。
英文:
Navigation.astro must include the HTML section in the body not in the frontmatter section
right :
---
---
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
wrong missing x2 lines with ---
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
here is a reference to the tutorial to check again https://docs.astro.build/en/tutorial/3-components/1/#create-a-navigation-component
see more details about the code fence (frontmatter) section here https://docs.astro.build/en/core-concepts/astro-components/#component-structure
It is basically a separation of code from html astro syntax.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论