Netlify github 部署的网站上有多个页面？

Question

我最近使用我复制的演示 GitHub 存储库从 Netlify 部署了一个网站。 虽然一开始看起来很简单，但我对 JS、HTML 和 CSS 知之甚少，无法继续。 我只希望托管三个仅包含文本和超链接的页面，但我一生都无法弄清楚如何使用我开始使用的这个特定代码库来实现多个页面。 这是 index.js 脚本：

import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'

export default function Home() {
  return (
    <div className="container">
    <div className="container-1">
    
      
      <Head>
        <title>Cool Page Title</title>
        <link rel="icon" href="/coolicon.ico" />
      </Head>

    
      <div className="box-1">
        <h3>Links</h3>
        <p>
          Current page <br /> 
          Page 2 <br /> 
          Another Page
        </p>
      </div>
    
    
      <div className="box-2">
        <h3>My cool page</h3>
        <p>
          Site under construction. <br />
          For all inquiries, please call 555-5555
        </p>
      </div>
   
    </div>
    
    <div className="container-2">
      <Footer />
    </div>
    </div>
  )
}

语法对我来说是非常棘手的部分。 Home() function 似乎返回 html 作为主页，那么我将如何实现第二页并让链接将它们更改？ switch/case 语句可以在这里工作吗？

Answer 1

好的，所以我想出了我以前不明白的东西。 原来我（不知不觉地）在使用 Next.JS。 为了处理多个页面，我只创建了单独的文件，与 index.js 文件相同，但使用不同的文件和 function 名称，然后使用以下方法链接到它们：

<Link href="/">Home</Link> <br /> 
<Link href="/newpage">New Page</Link> <br />

第一个链接将您定向到索引页面，第二个链接将您带到标题为“newpage”的页面。 猜猜它真的就这么简单。

哦，我还必须在每个使用链接的文件的开头包含这个导入语句：

import Link from 'next/link';

Netlify github 部署的网站上有多个页面？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-08-18 13:28:45

Netlify github 部署的网站上有多个页面？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-08-18 13:28:45

解决方案1
0 已采纳 2022-08-18 13:28:45