使用主题的 Github 页面上的 Gif

编程问答 2022-04-29

问题描述

我正在尝试获取 gif 以在我的 github 页面上呈现。该页面使用 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)

我错过了什么？

谢谢！

解决方法

要编辑的 2 件事

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

  1. 网址设置
  2. 图片标签设置

网址设置

在 _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 文件中编辑锚标记或链接标记。

图片标签设置

让我们深入了解您的图片标签，它采用 Markdown 格式，例如：

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

编辑成这个：

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

<!-- OR -->

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

这里：

  • {{...}} 是 Liquid 过滤器语法
  • site.url 正在从 _config.yml 文件中收集 URL
  • site.baseurl 正在收集 baseurl 以将其添加到 GitHub 页面的 url 之后
  • **| prepend: ** 是一个过滤器，这意味着 site.url 将被添加到 site.baseurl 之前。 此标签将呈现：
<img src="https://jpbongiovanni.github.io/PythonFunctionLibrary/movies/zigzag.gif" alt="zigzag" />

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

JEKYLLING 快乐

gifgifgithubjekyll