css 和某些图像在 github 页面中不起作用答案

【问题标题】：css and certain images not working in github pagescss 和某些图像在 github 页面中不起作用
【发布时间】：2021-11-24 00:27:50
【问题描述】：

我正在编写一个报纸网站，我想为文章制作一个目录

我已将文章中的代码复制到文章目录中，并将文章从代码中清除，以便在其位置放置一个故事。

当您加载文章时，css 会加载：
https://reedycreektimes.com/articles
但是当你通过文章加载它时它不会：
https://reedycreektimes.com/article/templte.html

请帮助我：这里是 repo
https://github.com/reedycreektimes/reedycreektimes.github.io

【问题讨论】：

所有路径都相对于当前文件夹（例如href="css/style.css"）。它们应该是绝对的（例如 href="/css/style.css" 或 href="https://reedycreektimes.com/css/style.css"）

标签： html css github

【解决方案1】：

你应该为你的 css 设置绝对路径。

/css/media.css
# not
css/media.css

后者可以从站点的根路径正常工作，而不是从子路径/子文件夹。

使用来自Benney Au的“Understanding Why Relative Links Are Broken”查看更多信息

当您部署到 GitHub Pages 时，您网站的基本 URL 具有以下结构：
https://{org}.github.io/{repo}. 
为您的 GitHub 组织创建一个子域，并且您的存储库名称作为固定路径附加。

这意味着如果您的 GitHub 组织名称是“公司”并且您的存储库名称是“my-static-website”，那么您的网站将托管在
https://company.github.io/my-static-website.

【讨论】：

【解决方案2】：

源代码中任何文件的正确路径是：-
对于 CSS - 如果在主项目文件夹中 ./style.css
如果在样式 css 文件夹中 - ./css/style.css

对于 Js - ./main.js
如果在文件夹中 - ./js/main.js

对于图片 - ./man.svg
如果在文件夹中 - ./images/man.svg

对于 Github 页面：-
为 repo 选择主题时可能会出现问题。但经过适当的配置后，它可能不是问题。在页面部分中选择 main branch 选择 root。

等待 15 到 20 分钟（也可能需要很短的时间），页面将重新加载，更改将发生。
[![Github 页面][1]][1]

【讨论】：