部署在 GitHub Pages 上的 Jekyll 网站缺少样式（可能是缓存问题）

问题描述 投票：0回答：1

我正在尝试为我的 Github 项目部署 Jekyll 网站。该网站的代码可以在 

gh-pages
分支中找到。

在 

localhost
上部署时，页面看起来符合预期，但在 Github Pages 上它缺少很多样式（可能还缺少其他资源）。已部署网站的控制台充满了404错误。

这是本地主机上网站的屏幕截图：

这是部署的网站的屏幕截图：

控制台错误如下：

GET https://faeq-f.github.io/styles/Plugins.css net::ERR_ABORTED 404 (Not Found)
Quokka/:56 
        
        
       GET https://faeq-f.github.io/styles/FAQ.css net::ERR_ABORTED 404 (Not Found)
Quokka/:59 
        
        
       GET https://faeq-f.github.io/styles/Documentation.css net::ERR_ABORTED 404 (Not Found)
Quokka/:398 
        
        
       GET https://faeq-f.github.io/scripts/Gallery.js net::ERR_ABORTED 404 (Not Found)
Quokka/:402 
        
        
       GET https://faeq-f.github.io/scripts/Docs.js net::ERR_ABORTED 404 (Not Found)
header.js:51 Uncaught TypeError: Cannot read properties of null (reading 'getContext')
    at header.js:51:20

我之前在 Github Pages 上部署了一个类似的网站here，没有任何问题，所以这个问题看起来很随机。

在网上搜索时，我发现缓存可能是罪魁祸首。但是，清除浏览器缓存并没有帮助。我发现的一个答案表明这是由于 GitHub 的 DNS 缓存造成的，因此我开始使用如下链接：

<link rel="stylesheet" href="../styles/DarkTheme.css?{{site.time | date: '%s%N'}}" />

这也没有帮助。我尝试过其他解决方案，例如更改 GitHub-pages 分支和取消发布网站，但没有任何效果。

编辑（2023 年 1 月 5 日）：

我尝试过使用 

_includes
文件，该文件具有指向 
raw.githubusercontent.com
上样式的绝对链接，但这也不起作用。

预先感谢您的帮助。

caching jekyll github-pages
1个回答
1
投票

您的问题主要是文件路径问题。当你的 jekyll 网站被捆绑时，文件目录结构与你当前的结构不一样。看一下生成的 

_site
文件夹，看看最终的结构是什么样的：

_layouts/home.html
变成 
_sites/index.html
。

在 

_layouts/home.html
中，引用样式表：

 <link rel="stylesheet" href="../styles/About.css" /> <!--WRONG-->

 <link rel="stylesheet" href="styles/About.css" /> <!--Correct-->

因此正确的

home.html
文件是：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
<html lang="en">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Quokka</title>
    <meta
      name="description"
      content="A customizable keystroke launcher with plugins"
    />
    <link rel="icon" type="image/x-icon" href="Resources/SearchIcon.png" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!--Scroll library-->
    <script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.min.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="styles/Main.css" />
    <link rel="stylesheet" href="styles/About.css" />
    <link rel="stylesheet" href="styles/Plugins.css" />
    <link rel="stylesheet" href="styles/header.css" />
    <link rel="stylesheet" href="styles/home.css" />
    <link rel="stylesheet" href="styles/gradButtons.css" />
    <link rel="stylesheet" href="styles/DarkTheme.css" />
    <link rel="stylesheet" href="styles/FAQ.css" />
    <link rel="stylesheet" href="styles/Documentation.css" />
    <!--Used to fix github pages dns cache issues-->
  </head>
  <body>
    <div id="top">
      <p style="color: transparent">.</p>
    </div>

    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
      </p>
    <![endif]-->

    <header id="header" class="hidemee">
      <nav>
        <ul class="navbar">
          <li class="headerLink">
            <a href="#top" onclick="lenis.scrollTo('#top')">
              <span class="headerText">Home</span>
            </a>
          </li>
          <li class="headerLink">
            <a href="#About" onclick="lenis.scrollTo('#About')">
              <span class="headerText">About</span>
            </a>
          </li>
          <li class="headerLink">
            <a href="#Plugins" onclick="lenis.scrollTo('#Plugins')">
              <span class="headerText">Plugins</span>
            </a>
          </li>
          <li class="headerLink">
            <a href="#FAQ" onclick="lenis.scrollTo('#FAQ')">
              <span class="headerText">FAQ</span>
            </a>
          </li>
          <li class="headerLink right-li connectButton">
            <a href="#Documentation" onclick="lenis.scrollTo('#Documentation')">
              <span class="headerText">Documentation</span>
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <div id="HomeView" class="hidemee">
      <p id="title">
        <strong>Quokka</strong
        ><br style="display: block; content: ''; margin-top: -4%" />
        <span style="font-size: medium; font-weight: bold"
          >A customizable keystroke launcher with plugins<br
        /></span>
        <span style="display: inline-block">
          <a href="https://github.com/Faeq-F/Quokka/releases/latest">
            <button class="button-64" role="button">
              <span class="text">Download Latest Release</span>
            </button>
          </a>
        </span>
        <span style="display: inline-block">
          <a href="https://github.com/Faeq-F/Quokka">
            <button class="button-64" role="button">
              <span class="text">View Repository</span>
            </button>
          </a> </span
        ><br />
        <span style="position: inherit">
          <input
            id="themeSlider"
            class="slider__input"
            type="range"
            role="slider"
            value="288"
            min="0"
            max="360"
            id="hue"
          />
          <input
            id="themeSwitch"
            class="switch__input"
            type="checkbox"
            role="switch"
          />
        </span>
      </p>
    </div>
    <img
      src="Resources/scrollDown.gif"
      id="HomeScrollImg"
    />
    <div id="About">
      <div class="ag-timeline_title-box" data-aos="fade-down">
        <div class="ag-timeline_tagline">What is this?</div>
        <div class="ag-timeline_title">About Quokka</div>
      </div>
      <div class="card aboutCard" data-aos="fade-down">
        <p>
          Quokka is an extremely customizable keystroke launcher for Windows.
          <br />
          <br />
          Quokka has a plugin-architecture, open to third parties. Through this,
          Quokka will have a large number of features, like color conversion,
          translation, web search, Unicode character search, and much more!
          Please see the
          <a href="#Documentation" onclick="lenis.scrollTo('#Documentation')"
            >Documentation</a
          >
          for all (official) planned plugins. If you do not see a plugin you
          wish to have, maybe start a discussion over
          <a href="https://github.com/Faeq-F/Quokka/discussions">here</a>, or
          create it yourself.
          <br />
          <br />
          Quokka was designed to replace the need for your ugly start menu, task
          bar and any other clunky applications you currently use to add
          functionality to your system. For example, it can replace your start
          menu by allowing you to launch all of your desired applications and
          shortcuts, and replace windows search through plugins like Everything,
          calculator, wikipedia, etc.
          <br />
        </p>
        <br />
        <hr />
        <br />
        <div>
          <a href="https://github.com">
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&amp;message=GitHub&amp;color=181717&amp;logo=GitHub&amp;logoColor=FFFFFF"
              alt="Github"
            />
          </a>
          <a href="https://en.wikipedia.org/wiki/Unified_Modeling_Language">
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&message=UML&color=FABD14&logo=uml&logoColor=FFFFFF"
              alt="UML"
            />
          </a>

          <a href="https://dotnet.microsoft.com/en-us/">
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&message=.NET&color=512BD4&logo=dotnet&logoColor=FFFFFF"
              alt="dotnet"
            />
          </a>
          <a
            href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/overview/?view=netdesktop-7.0"
          >
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&message=WPF&color=0078D4&logo=windows&logoColor=FFFFFF"
              alt="WPF"
            />
          </a>
          <a href="https://learn.microsoft.com/en-us/dotnet/csharp/">
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&message=C%23&color=512BD4&logo=csharp&logoColor=FFFFFF"
              alt="C&#35;"
            />
          </a>
          <a
            href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/?view=netdesktop-7.0"
          >
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&message=xaml&color=0C54C2&logo=xaml&logoColor=FFFFFF"
              alt="xaml"
            />
          </a>

          <a href="https://docs.microsoft.com/en-gb/powershell/">
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&amp;message=PowerShell&amp;color=5391FE&amp;logo=PowerShell&amp;logoColor=FFFFFF"
              alt="Powershell"
            />
          </a>
          <a href="https://www.json.org/json-en.html">
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&amp;message=JSON&amp;color=000000&amp;logo=JSON&amp;logoColor=FFFFFF"
              alt="JSON"
            />
          </a>

          <a href="https://code.visualstudio.com/">
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&amp;message=Visual Studio Code&amp;color=007ACC&amp;logo=Visual Studio Code&amp;logoColor=FFFFFF"
              alt="visual studio code"
            />
          </a>
          <a href="https://visualstudio.microsoft.com">
            <img
              align="center"
              margin="10px auto"
              src="https://img.shields.io/static/v1?label=&message=Visual%20Studio&color=5C2D91&logo=visualstudio&logoColor=FFFFFF"
              alt="visualstudio"
            />
          </a>
        </div>
      </div>
    </div>

    <div id="Plugins">
      <section>
        <aside>
          <div class="ag-timeline_title-box" data-aos="fade-up-right">
            <div class="ag-timeline_tagline">What features?</div>
            <div class="ag-timeline_title">Plugins</div>
          </div>
          <div class="card" data-aos="fade-up-right">
            <p class="PortfolioWorkHeader" style="font-size: 1.17em">
              Screenshots for selected plugin:
            </p>
            <div id="PluginScreenshotsGrid" data-lenis-prevent></div>
            <img
              src="Resources/scrollDown.gif"
              id="PortfolioScrollImg"
            />
          </div>
        </aside>

        <div class="content" data-aos="fade-up-left">
          <p class="PortfolioWorkHeader">Recognized plugins:</p>
          <div style="text-align: center">
            <div class="ProjectCard">
              <p class="PluginName">Installed Apps</p>
              <p class="PluginDesc">
                Allows the launching of apps installed on the system
              </p>
              <div class="PluginButtonGroup">
                <a
                  class="SiteButton"
                  title="Visit site"
                  href="https://github.com/Faeq-F/Quokka"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="16"
                    width="20"
                    viewBox="0 0 640 512"
                  >
                    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
                    <path
                      fill="var(--primary)"
                      d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
                    />
                  </svg>
                </a>
                <p class="DeveloperName">Developed by Faeq</p>
              </div>
            </div>
            <div class="ProjectCard">
              <p class="PluginName">Portable Apps</p>
              <p class="PluginDesc">
                Allows the launching of portable apps<br />(apps not installed
                on the system)
              </p>
              <div class="PluginButtonGroup">
                <a
                  class="SiteButton"
                  title="Visit site"
                  href="https://github.com/Faeq-F/Quokka"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="16"
                    width="20"
                    viewBox="0 0 640 512"
                  >
                    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
                    <path
                      fill="var(--primary)"
                      d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
                    />
                  </svg>
                </a>
                <p class="DeveloperName">Developed by Faeq</p>
              </div>
            </div>
            <div class="ProjectCard">
              <p class="PluginName">Everything</p>
              <p class="PluginDesc">
                Allows searching through files and folders on the computer -
                requires the
                <a
                  href="https://www.voidtools.com/"
                  style="font-style: oblique"
                >
                  Everything
                </a>
                service to be running
              </p>
              <div class="PluginButtonGroup">
                <a
                  class="SiteButton"
                  title="Visit site"
                  href="https://github.com/Faeq-F/Quokka"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="16"
                    width="20"
                    viewBox="0 0 640 512"
                  >
                    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
                    <path
                      fill="var(--primary)"
                      d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
                    />
                  </svg>
                </a>
                <p class="DeveloperName">Developed by Faeq</p>
              </div>
            </div>
            <div class="ProjectCard">
              <p class="PluginName">Power Commands</p>
              <p class="PluginDesc">
                Allows the execution of power settings like logout, lock, sleep,
                shutdown, etc.
              </p>
              <div class="PluginButtonGroup">
                <a
                  class="SiteButton"
                  title="Visit site"
                  href="https://github.com/Faeq-F/Quokka"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="16"
                    width="20"
                    viewBox="0 0 640 512"
                  >
                    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
                    <path
                      fill="var(--primary)"
                      d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
                    />
                  </svg>
                </a>
                <p class="DeveloperName">Developed by Faeq</p>
              </div>
            </div>
            <div class="ProjectCard">
              <p class="PluginName">Calculator</p>
              <p class="PluginDesc">
                Allows the calculation of mathematical expressions
              </p>
              <div class="PluginButtonGroup">
                <a
                  class="SiteButton"
                  title="Visit site"
                  href="https://github.com/Faeq-F/Quokka"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="16"
                    width="20"
                    viewBox="0 0 640 512"
                  >
                    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
                    <path
                      fill="var(--primary)"
                      d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
                    />
                  </svg>
                </a>
                <p class="DeveloperName">Developed by Faeq</p>
              </div>
            </div>
            <div class="ProjectCard">
              <p class="PluginName">English Dictionary</p>
              <p class="PluginDesc">
                Allows the viewing of denotations for words in the English (US)
                language
              </p>
              <div class="PluginButtonGroup">
                <a
                  class="SiteButton"
                  title="Visit site"
                  href="https://github.com/Faeq-F/Quokka"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="16"
                    width="20"
                    viewBox="0 0 640 512"
                  >
                    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
                    <path
                      fill="var(--primary)"
                      d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
                    />
                  </svg>
                </a>
                <p class="DeveloperName">Developed by Faeq</p>
              </div>
            </div>

            <p style="color: var(--primary)">Please support all developers!</p>
          </div>

          <h2 style="color: transparent">Title 1</h2>
          <h4 style="color: transparent">Subheading</h4>
          <p style="color: transparent">Text</p>
          <h4 style="color: transparent">Subheading</h4>
          <p style="color: transparent">Text</p>
          <h4 style="color: transparent">Subheading</h4>
          <p style="color: transparent">Text</p>
        </div>
      </section>
    </div>

    <div id="FAQ">
      <div class="ag-timeline_title-box" data-aos="fade-down">
        <div class="ag-timeline_tagline">I have a question!</div>
        <div class="ag-timeline_title">Frequently asked Questions</div>
      </div>
      <div class="card aboutCard" data-aos="fade-down">
        <p>
          Quokka is an extremely customizable keystroke launcher for Windows. It
          has a plugin-architecture, open to third parties.
        </p>
      </div>
    </div>

    <footer id="Documentation">
      <div id="DocumentationCard" class="ContactCard" data-aos="fade-down">
        <div id="container-stars" style="top: 0; left: 0">
          <div id="stars"></div>
        </div>
        <div class="ag-timeline_title-box ConnectTitleBox">
          <div
            class="ag-timeline_tagline ConnectTagline"
            style="font-weight: bold; font-size: x-large !important"
          >
            <div id="DocsHeader">
              <button id="FillPageButton" title="Fill Page"></button>
              <button id="FullscreenButton" title="Fullscreen"></button>
              <button id="DocsHeaderButton">Documentation</button>
            </div>
            <div id="DocsNav" data-lenis-prevent>
              <ul>
                <li><button>Installation</button></li>
                <li><button>How to use</button></li>
                <ul>
                  <li><button>Tray task</button></li>
                  <li><button>Plugins</button></li>
                  <li><button>Special commands</button></li>
                </ul>
                <li><button>Settings</button></li>
                <ul>
                  <li><button>Themes</button></li>
                  <li><button>Defaults</button></li>
                </ul>
                <li><button>Building the app</button></li>
                <li><button>Writing a plugin</button></li>
                <ul>
                  <li><button>Creating a new item type</button></li>
                  <li><button>Creating a context pane</button></li>
                  <li><button>Creating the plugin</button></li>
                </ul>
                <li><button>FAQ by Developers</button></li>
              </ul>
            </div>
          </div>
          <div id="DocsContent" data-lenis-prevent></div>
        </div>
      </div>
    </footer>

    <div id="bottom">
      <p style="color: transparent">.</p>
    </div>

    <div class="cursor"></div>
    <div class="cursor2"></div>

    <script src="scripts/cursor.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
    <script>
      AOS.init();
    </script>
    <script src="scripts/Gallery.js"></script>
    <script src="scripts/header.js"></script>
    <script src="scripts/ScrollFade.js"></script>
    <script src="scripts/HueRotate.js"></script>
    <script src="scripts/Docs.js"></script>
    <script>
      function themeChangeHandler() {
        var queryString = "?reload=" + new Date().getTime();
        $('link[rel="stylesheet"]').each(function () {
          this.href = this.href.replace(/\?.*|$/, queryString);
        });
      }
      document
        .querySelector("#themeSwitch")
        .addEventListener("change", themeChangeHandler);
    </script>
  </body>
</html>

您还有一个丢失的文件和一个错误命名的文件。仔细检查您的文件名（注意大小写）。

解决这些问题后，您的网站将在本地主机和 Github Pages 上正常运行。

这是我设置的一个存储库，用于显示您的网站正常运行。对应的网站在：https://creme332.github.io/quokka-test/:

仍然有一些样式问题需要修复，但控制台中没有 404 错误。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.