是否有特定的方法可以路由到 GitHub Pages 站點上的不同頁面？

Question

我在這里托管了一個 GitHub Pages 站點。 要打開的啟動頁面顯示得很好，但是一旦您單擊圓圈以轉換到下一個頁面landing.html ，您就會遇到 404 錯誤。 我已經嘗試了我能想到的所有可能的方法來解決這個問題； 絕對引用，本地引用，完全重新排列我的整個文件組織系統，但沒有任何效果。

這是我的index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" type="text/css" href="./css/title.css"></link>
</head>
<body>
    <div class="container">
        <div class="x-shape" id="x-left"></div>
        <div class="x-shape" id="x-right"></div>
        <div class="ripple" hidden="true"></div>
        <div class="white-line" id="line-ver"></div>
        <div class="white-line" id="line-hor"></div>
    </div>
    <div class="title">AVRIE LATTA</div>
    <script src="jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/title.js"></script>
</body>
</html>

這是我的title.js文件：

const openLanding = () => {
    window.location.href = "/html/landing.html";
};

const closeTitle = () => {
    $(".container").animate({
        width: `${$(".container").width() * 0.1}`,
        height: `${$(".container").height() * 0.1}`
    }, 750, () => {
        $(".container").animate({
            width: `${$(".container").width() * 1000}`,
            height: `${$(".container").height() * 1000}`
        }, 1000, () => {
            $(".container").animate({
                opacity: "-=1"
            }, 1000, () => {
                $(".title").animate({
                    opacity: "-=1"
                }, 1000, () => {
                    $(".title").animate({
                        width: '5%'
                    }, 1000, openLanding());
                });
            });
        });
    });
};

$('.container').click(() => {
    closeTitle();
});

我的文件組織如下：

地點
- 索引.html
- html
  - 登陸.html
- js
  - 標題.js

Answer 1

請參閱： https : //docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites

在您的情況下，您正在托管來自存儲庫webdevportfolio的頁面。 這將是一個“項目”站點。 這意味着該存儲庫中的文件從根頁面https://avrielatta.github.io/webdevportfolio/ 開始

在您的js/title.js文件中，您有以下行：

window.location.href = "/html/landing.html";

這導航到https://avrielatta.github.io/html/landing.html

因此，GitHub的頁面是試圖找到一個landing.html的html庫，或html/landing.html你的“用戶”網站庫avrielatta.github.io 。

要從您的webdevportfolio存儲庫訪問正確的文件/頁面，您可以執行以下操作：

// relative location
window.location.href = "html/landing.html";

// direct location
window.location.href = "/webdevportfolio/html/landing.html";

是否有特定的方法可以路由到 GitHub Pages 站點上的不同頁面？

問題描述

1 個解決方案

解決方案1
0 2021-10-29 02:00:42

是否有特定的方法可以路由到 GitHub Pages 站點上的不同頁面？

問題描述

1 個解決方案

解決方案1 0 2021-10-29 02:00:42

解決方案1
0 2021-10-29 02:00:42