部署后网站页脚未呈现 更新： 我尝试使用 vercel 来查看是否是 git page 错误，但仍然存在相同的问题，这让我相信我错过了代码中的某些内容
这是
footer.svelte<footer class="py-20 sm:py-32 bg-black border-t border-solid border-violet-950 flex flex-col gap-4 sm:gap-8 justify-center items-center">
<p class="px-4 py-2 bg-white text-slate-950 font-medium">Connect with me ↓</p>
<div class="flex flex-col gap-4 items-center justify-center">
<p><b class="pr-2">Email</b> [email protected]</p>
<p>
<b class="pr-2">GitHub</b>
<a href="https://github.com/Oluwaferanmi-Dev" target="_blank" class="text-violet-400">
Oluwaferanmi-Dev
<sup class=""><span class="text-xs scale-75 pl-0.5"><i class="fa-solid fa-arrow-up-right-from-square text-xs scale-[75%]"></i></span></sup>
</a>
</p>
<p>
<b class="pr-2">LinkedIn</b>
<a href="https://www.linkedin.com/in/your-linkedin-profile" target="_blank" class="text-violet-400">
your-linkedin-profile
<sup class=""><span class="text-xs scale-75 pl-0.5"><i class="fa-solid fa-arrow-up-right-from-square text-xs scale-[75%]"></i></span></sup>
</a>
</p>
</div>
</footer>
这是
header.svelte<script>
export let y;
export let tabs = [
{ name: "Projects ", link: "#projects" },
{ name: "About me", link: "#about" },
{ name: "Blog", link: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" },
];
</script>
<header
class={"sticky z-[10] top-0 duration-200 px-6 flex items-center justify-between border-b border-solid " +
(y > 0
? " py-4 bg-slate-950 border-violet-950"
: " py-6 bg-transparent border-transparent")}
>
<h1 class="font-medium">
<b class="font-bold poppins">Caleb </b> <span class="">Oyelowo</span>
</h1>
<div class="sm:flex ml-auto pr-4 items-center gap-4 hidden">
{#each tabs as tab, index}
<a
href={tab.link}
class="duration-200 hover:text-violet-400"
target={index === 2 ? "_blank" : ""}
>
<p>{tab.name}</p>
</a>
{/each}
<button
class="blueShadow relative overflow-hidden px-5 py-2 group rounded-full bg-white text-slate-950"
>
<div
class="absolute top-0 right-full w-full h-full bg-violet-400 opacity-20 group-hover:translate-x-full z-0 duration-200"
/>
<h4 class="relative z-9">Get in touch</h4>
</button>
</div>
</header>
这将我引向 main.svelte
<script>
import Step from "./Step.svelte";
let steps = [
{
name: "Otakumart NG",
icon: "fa-solid fa-cart-shopping",
},
{
name: "Weather App",
icon: "fa-solid fa-cloud",
},
{
name: "The Gadget Hub",
icon: "fa-solid fa-rocket",
},
];
let benefits = [
{
metric: "10x",
name: "a self taught developer",
description:
"I taught myself to code using free online resources and absolutely fell in love with the creativity and problem solving that is involved in developing and engineering innovative new online experiences. Starting of with JavaScript, HTML & CSS and evolving my knowledge base to include JavaScript frameworks, backend programming, design, cloud services and much much more.",
},
{
name: "a product design & UX finatic",
description:
"Carefully crafting and designing amazing user experiences allows me to express and experiment with every morsel of creativity I have. I love the challenge of learning new design concepts and enabling users with amazing online experiences.",
},
{
name: "an excellent communicator",
description:
"Communication is key and it's a paramount value of mine. I believe in transparency and constructive communication above all else. This helps me develop deep relationships and ensures my effectiveness and productivity in any work space with any team.",
},
];
</script>
<main class="flex flex-col flex-1 p-4">
<section
id="introPage"
class="grid grid-cols-1 lg:grid-cols-2 gap-10 py-8 sm:py-14"
>
<div
class="flex flex-col lg:justify-center text-center lg:text-left gap-6 md:gap-8 lg:gap-10"
>
<h2 class="font-semibold text-4xl sm:text-5xl md:text-6xl">
Hi! I'm <span class="poppins text-violet-400">Caleb</span> Oyelowo
<br />Full Stack
<span class="poppins text-violet-400">Developer</span>
</h2>
<p class="text-base sm:text-lg md:text-xl">
My <span class="text-violet-400"> favorite tech</span> includes JavaScript
(NEXT.JS or SvelteKit), TailwindCSS, Node.js + Express.js & PostgreSQL
or Firebase/Firestore!
</p>
<button
class="blueShadow mx-auto lg:mr-auto lg:ml-0 text-base sm:text-lg md:text-xl poppins relative overflow-hidden px-6 py-3 group rounded-full bg-white text-slate-950"
>
<div
class="absolute top-0 right-full w-full h-full bg-violet-400 opacity-20 group-hover:translate-x-full z-0 duration-200"
/>
<h4 class="relative z-9">Get in touch →</h4>
</button>
</div>
<div class="relative shadow-2xl grid place-items-center">
<img
src={"images/profile.png"}
alt="Zetane Engine"
class="object-cover z-[2] max-h-[70vh]"
/>
</div>
</section>
<section class="py-20 lg:py-32 flex flex-col gap-24" id="projects">
<div class="flex flex-col gap-2 text-center">
<h6 class="text-large sm:text-xl md:text-2xl">
A few of my creative endeavors.
</h6>
<h3 class="font-semibold text-3xl sm:text-4xl md:text-5xl">
Curious to <span class="poppins text-violet-400">see</span> my work?
</h3>
</div>
<a
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
target="_blank"
class="mx-auto px-4 py-2 rounded-md border border-solid border-white flex items-center gap-2 -mb-4 sm:-mb-0 -mt-10 hover:border-violet-700 duration-200"
>
<i class="fa-regular fa-circle-play" />
<p>Watch the video</p>
</a>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-10">
<Step step={steps[0]}>
<p>
Otakumart NG is merchandising store created with
<strong class="text-violet-400">Next.js, App Router, TypeScript, TailwindCSS, Prisma, DaisyUI </strong>, for otaku's
nationwide to shop from a catalougue of anime themed merchandise</p>
</Step>
<Step step={steps[1]}>
<p>
Weather App is a mobile application made with <strong
class="text-violet-400">Native Wind, JavaScript</strong
>,
<strong class="text-violet-400">React Native</strong
>
& <strong class="text-violet-400">Expo</strong>, It provides users with real-time weather updates, forecasts, and weather alerts.
</Step>
<Step step={steps[2]}>
<p>
Chat Me is a <strong class="text-violet-400"
>React & Node.js</strong
>
web application that facilitates efficient communication and collaboration within companies.
It enables real-time messaging, helping teams coordinate tasks and share updates seamlessly with the help of
<strong class="text-violet-400">Firebase</strong>
</p>
</Step>
</div>
</section>
<section
id="about"
class="py-20 pt-10 lg:pt-16 lg:py-32 flex flex-col gap-16 sm:gap-20 md:gap-24 relative"
>
<div
class="flex flex-col gap-2 text-center relative before:absolute before:top-0 before:left-0 before:w-2/3 before:h-1.5 before:bg-violet-700 after:absolute after:bottom-0 after:right-0 after:w-2/3 after:h-1.5 after:bg-violet-700 py-4"
>
<h6 class="text-large sm:text-xl md:text-2xl">
Want to know more?
</h6>
<h3 class="font-semibold text-3xl sm:text-4xl md:text-5xl">
A bit <span class="poppins text-violet-400">about</span> me.
</h3>
</div>
<p class="mx-auto poppins font-semibold text-lg sm:text-xl md:text-2xl">
I am . . .
</p>
<div class="flex flex-col gap-20 w-full mx-auto max-w-[800px]">
{#each benefits as benefit, index}
<div class="flex gap-6 sm:gap-8">
<p
class="poppins text-4xl sm:text-5xl md:text-6xl text-slate-500 font-semibold"
>
0{index + 1}
</p>
<div class="flex flex-col gap-6 sm:gap-8">
<h3 class="text-2xl sm:text-3xl md:text-5xl">
{benefit.name}
</h3>
<p>{benefit.description}</p>
</div>
</div>
{/each}
</div>
<h5 class={" text-2xl sm:text-3xl font-semibold text-center poppins "}>
The <span class="text-violet-400">Complete</span> Package
</h5>
<div
class="flex flex-col overflow-x-scroll gap-10 max-w-[800px] mx-auto w-full"
>
<table class="bg-white text-slate-700 rounded text-center">
<thead class={"border-b border-solid border-slate-200 "}>
<tr class="">
<th />
<th class="whitespace-nowrap p-2 px-4">Candidate #1</th>
<th class="whitespace-nowrap p-2 px-4">Candidate #2</th>
<th class="whitespace-nowrap p-2 px-4">Candidate #3</th>
<th
class="bg-violet-700 text-white whitespace-nowrap p-4 px-8"
>Me</th
>
</tr>
</thead>
<tbody>
<tr class="border-b border-solid border-slate-200">
<td
class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm"
>Dedication</td
>
<td><i class="fa-solid fa-xmark text-slate-500" /></td>
<td><i class="fa-solid fa-check text-slate-500" /></td>
<td><i class="fa-solid fa-xmark text-slate-500" /></td>
<td><i class="fa-solid fa-check text-green-500" /></td>
</tr>
<tr class="border-b border-solid border-slate-200">
<td
class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm"
>Critical Thought</td
>
<td><i class="fa-solid fa-xmark text-slate-500" /></td>
<td><i class="fa-solid fa-check text-slate-500" /></td>
<td><i class="fa-solid fa-check text-slate-500" /></td>
<td><i class="fa-solid fa-check text-green-500" /></td>
</tr>
<tr>
<td
class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm"
>Interpersonal Skills</td
>
<td><i class="fa-solid fa-check text-slate-500" /></td>
<td><i class="fa-solid fa-check text-slate-500" /></td>
<td><i class="fa-solid fa-xmark text-slate-500" /></td>
<td><i class="fa-solid fa-check text-green-500" /></td>
</tr>
<tr class="border-t border-solid border-slate-200">
<td
class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm"
>Progamming Ability</td
>
<td><i class="fa-solid fa-check text-slate-500" /></td>
<td><i class="fa-solid fa-xmark text-slate-500" /></td>
<td><i class="fa-solid fa-check text-slate-500" /></td>
<td><i class="fa-solid fa-check text-green-500" /></td>
</tr>
</tbody>
</table>
</div>
<div class="mx-auto -mt-12 italic sm:hidden opacity-50">
<p>Scroll to see more →</p>
</div>
<p class="mx-auto">So why not invest?</p>
</section>
</main>
我已尽我所知尝试调试，但仍然无法找到根本原因，这可能是因为这是我第一次使用 svelte 而不是正常的 html 格式，其中页脚在 main 内部呈现，而不是在普通 html 格式中呈现一个单独的页脚.svelte
按照惯例，Svelte 中的组件应该是驼峰式（footer.svelte -> Footer.svelte）。
另外，你似乎没有在 main.svelte 中导入你的组件。
例如，您已正确导入Step.svelte。
import Step from "./Step.svelte";然后您可以使用它：
<Step></Step>