如何修复来自 github 页面的响应式设计和损坏的图像？答案

【问题标题】：How to fix the responsive design from github page and broken images?如何修复来自 github 页面的响应式设计和损坏的图像？
【发布时间】：2019-10-29 02:03:03
【问题描述】：

我在 github pages 上部署了一个投资组合站点，我使用 jekyll 创建它。我遇到的问题：1）移动端的响应式设计不正确，我也看不到页脚，2）我损坏了无法加载的图像我已经更改了几次路径但仍然无法正常工作猜我没有选择？有解决这些问题的建议吗？ 我的网站 : https://lazospap.github.io/LazPap/ 和我的仓库 : https://github.com/LazosPap/LazPap .

【问题讨论】：

标签： responsive-design jekyll github-pages

【解决方案1】：

为了确保找到图片的 url，你可以使用 link 标签告诉 Jekyll 图片在 处理之前在哪里。 Jekyll 将在处理前后跟踪图像的链接，因此您可以依赖 repo 的当前结构而不是处理后的结构。

<img src="{% link images/CSS_3.png %}" class="background-image-right"/>

Docs on link tag

另一个技巧是创建一个.gitignore，将以下文件添加到.gitignore，然后将它们从git跟踪中删除。您的源代码管理中不需要它们。

// .gitignore

.jekyll-cache
_site/

当我在本地运行您的存储库并使浏览器响应移动时，图像并没有缩小。但是，我可以看到你的页脚。不过，我不熟悉您使用的框架。

【讨论】：

gitignore 的工作原理以前从未使用过。我已经更改了您向我展示的 img src 并等待缓存清除，以便我可以看到更改
.gitignore 是一个文件，它告诉 git 忽略并且不跟踪版本控制中的特定文件或文件夹。这对于缓存等临时或生成的东西很有用。 Jekyll 创建了一个不需要跟踪的_site 文件夹。这是.gitignore 上的 git 文档：git-scm.com/docs/gitignore
这是来自 GitHub 的 Jekyll 示例 .gitignore：github.com/github/gitignore/blob/master/Jekyll.gitignore
我遵循了 JoostS 的回答，它奏效了，我的 baseurl 有一个错误，这就是我损坏图像的原因。但是我仍然遇到的问题是移动设备的响应式设计我有一个问题你可以检查它。我将如何解决这个问题？

【解决方案2】：

除了使用link，您还可以这样做：

<img src="{{ '/images/CSS_3.png' | prepend: site.baseurl }}" class="background-image-right"/>

【讨论】：

如何修复手机的响应式设计，因为我的引导主题没有得到最佳响应？