使用动画 GIF 在 GitHub README 中演示你的应用程序
我的简历上有我的 GitHub 链接,如果幸运的话,潜在的雇主可能会在 GitHub 上查看我的应用程序。但是,我知道他们很忙,没有太多时间,所以我想让他们和其他访问我代码库的人更容易地访问,并README.md
在你访问代码库时显示的文件中展示应用程序的运行情况。
在 GitHub README 中嵌入视频简直是梦想成真,但我发现这根本不可能——你得直接给视频加上链接。不过,你可以在 README 文件中放一个 GIF 动图,我在很多项目中都是这么做的。
这是我的“农贸市场查找器”应用程序的一个示例:
不幸的是,动画 GIF 通常不能像视频那么长,但您可以使用它们快速展示应用程序的一些核心功能。
如何创建动画 GIF?
这里有几个可用于创建动画 GIF 屏幕录像的应用程序。
视窗
我喜欢使用ScreenToGif,这是一款适用于 Windows 7 及更高版本的免费开源应用。该软件使用起来非常直观,只需在屏幕上选定区域即可创建 GIF 动图,并且还提供了用户指南。
苹果
我在 Mac 上创建屏幕动态 GIF 时使用Gifox 。它位于我的菜单栏中,使用起来很方便。我使用付费版本,因为免费版本创建的 GIF 时长限制为 10 秒,并且带有水印。
其他
我知道我漏掉了其他操作系统和设备的选项,但我只想推荐一些我自己尝试过的应用。如果您能推荐其他可以录制 GIF 动画屏幕的应用,请在下方评论。
将动画 GIF 添加到 README
创建动画 GIF 后,您可以README.md
像嵌入常规图像一样将其嵌入到文件中。
我通常在应用程序描述的 README 中创建一个“演示”标题,并将动画 GIF 放在演示标题下,并附上网站在线演示的链接。
如果您没有一个好的地方来托管图像,您可以按照我所做的那样,demo
在您的 GitHub 存储库中创建一个(或更好的命名)文件夹并将 GIF 上传到那里,然后在 README 中链接到它。
例子:

注意:方括号中是 alt 文本,圆括号中是 GIF 动图的 URL。如果图片在你的 GitHub 仓库中,你可以像我在示例中那样使用相对链接。
感谢您阅读我的第一篇文章!
文章来源:https://dev.to/kelli/demo-your-app-in-your-github-readme-with-an-animated-gif-2o3c