使用主题的 Github 页面上的 Gif

Posted 2023-03-28

【中文标题】使用主题的 Github 页面上的 Gif

【英文标题】：Gif on Github pages using a theme

【发布时间】：2021-08-16 08:38:05

【问题描述】：

我正在尝试在我的 github 页面上呈现 gif。该页面使用 Jekyll 主题，目前正在呈现我的 README.md 文件。出于某种原因，我可以在自述文件页面上呈现我的 gif：https://github.com/JpBongiovanni/PythonFunctionLibrary/blob/main/README.md

但不是我的 jekyll 页面：https://jpbongiovanni.github.io/PythonFunctionLibrary/

下面的代码为自述文件提供了正确的礼物，但不是 Jekyll。

![zigzag](/PythonFunctionLibrary/movies/zigzag.gif)

我错过了什么？

谢谢！

【参考方案1】：

要编辑的两件事

问题是，您没有在 _config.yml 文件中设置任何内容，这就是为什么不完整的 URL 会进行一些故障排除的原因。你需要做两件事！

网址设置 图片标签设置

网址设置

在_config.yml 中只需添加 2 行：

#_config.yml

url: 'https://jpbongiovanni.github.io/' # your main domain
baseurl: 'PythonFunctionLibrary/' # if you're using custom domain keep this blank example: baseurl: ''

theme: jekyll-theme-hacker

现在我们已经完成了 URL 设置，现在在 README.md 文件中编辑锚标记或链接标记。

图片标签设置

让我们深入了解您的图像标签，它是降价格式，例如：

![zigzag](./movies/zigzag.gif)

编辑成这个：

<img src="site.baseurl | prepend: site.urlmovies/zigzag.gif"  />

<!-- OR -->

<img src=" "movies/zigzag.gif" | prepend: site.baseurl | prepend: site.url"  />

这里：

...

是 Liquid 过滤器语法

site.url

正在从 _config.yml 文件中收集

URL

site.baseurl

正在收集

baseurl

以将其添加到 GitHub Pages 的 url 之后 **| prepend: ** 是一个过滤器，这意味着

site.url

将被添加到

site.baseurl

之前。 这个标签将呈现这个：

<img src="https://jpbongiovanni.github.io/PythonFunctionLibrary/movies/zigzag.gif"  />

就是这样。我想这将有助于您完美地完成工作......

杰基林快乐

【讨论】：

太棒了！感谢您的帮助！完美运行。