GitHub 自述文件：响应式？🤔 动画？🤯 明暗模式？😱 没错！💪🏼

很棒的自述文件

是的，你没听错，我的 GitHub readme 有明暗模式，甚至还支持响应式布局。在本文中，我将简要介绍一下我实现此功能的一些技巧（以及一些让它变得困难的事情！）。

但首先，让我们看看我的个人资料在不同屏幕尺寸和颜色偏好下是什么样子（或者亲自去GitHub 上尝试一下 GrahamTheDevRel 的个人资料！

黑暗模式

移动的

请注意以下各部分的不同按钮设计和布局。

创建这些按钮比您想象的要困难得多！

灯光模式

我忍不住要在英雄部分发表一些不同的信息，当然我只是在开玩笑！🤣💗

哦...我有没有提到它是动画的？

记住，前5个按钮都是独立的图片！稍微调整了一下才弄好！

使用了一些技巧！

好吧，原来你来这里不只是为了看我的个人资料啊！（如果你真的来看，我也爱你！🤣💗）

不，你来学习一些技巧，这样你就可以自己做了，对吗？

好吧，有一个“技巧”，然后只需要一个 HTML 功能，您就可以自己做到这一点。

让我们从最有趣的一个开始：

制作响应式按钮和图像的技巧！

网站上的按钮和英雄形象是有趣的部分。

为了使它们发挥作用，我们使用了一个很多人可能没有听说过的 SVG 功能<foreignObject>。

<foreignObject>并赢得 SVG 胜利！

这是让事物响应的最大技巧。

你看，在 markdown 文件中我们能做的事情非常有限（这就是为什么我们看到人们使用<table>等进行布局...ewww）。

但 SVG 有一个独特的功能，<foreignObject>。

这使您可以在 SVG 中包含许多内容，包括 HTML 和 CSS。

有了它，我们就拥有了更大的力量！

您可以在此演示 CodePen 中看到（单击按钮可更改外部容器的大小，该容器表示页面上可用于图像的空间）：

CodePen 上 SVG 中 CSS 的演示

请务必查看 html 面板，所有技巧都在那里！

其中的关键部分如下：

 <svg xmlns="http://www.w3.org/2000/svg" fill="none">
        <foreignObject width="100%" height="100%"> 
            <div xmlns="http://www.w3.org/1999/xhtml">
                <!--we can include <style> elements, html elements etc. here now, with a few restrictions! Note it must be in xHTML style (so <img src="" /> not <img src="" > to be valid -->
            </div>
       </foreignObject>
</svg>

从那里我们可以使用内联<style>元素和标准 HTML 元素来构建响应式图像。

但是您可能会注意到该演示中使用的标记还有一件事。

图片抓住你了！

我将图像（SVG 气泡和我的图像）作为dataURL是有原因的。

这是因为所谓的内容安全策略 (CSP)以及它在 GitHub 上的实施方式。

现在我不会解释 CSP，但本质上它们有一条规则，即“嘿，除了当前上下文之外的任何地方都不能加载图像”。

对于普通图像来说这不是问题，但这是图像中的图像，并且该图像的“上下文”就是其本身。

因此，如果我们尝试在 SVG 中包含另一个图像，它将来自不同的地方并破坏我们的 SVG。

幸运的是，dataURI 被视为相同的上下文/来源。

这就是为什么在我们的示例中使用它们的原因，如果您想自己实现这一点，则还需要考虑另一件事！

最后一个技巧，<picture>元素没有空格。

我的意思是，这甚至不是一个诡计！

我的自述文件中的最后 4 个框是响应式的（并且尊重颜色偏好），但它们使用标准媒体查询来工作。

这里唯一考虑的是尝试找到一个有效的断点，恰好是 GitHub 上的 768px。

然后我创建了4组图像：

• 黑暗模式和桌面
• 黑暗模式和移动端
• 灯光模式和桌面
• 灯光模式和移动设备。

大图像或小图像

为了获得正确的图像，我们在元素中放置的每个源上都使用media="(min-width: 769px)桌面（大）图像或移动（小）图像。media="max-width: 768px)<picture>

明暗模式

为了获取亮模式或暗模式，我们使用prefers-color-scheme媒体查询。

结合我们的查询和来源

然后我们只需设置我们的<picture>元素来选择我们想要的源，使用以下组合(** width query **) and ( colour preference)：

<picture>
  <source media="(min-width: 769px) and (prefers-color-scheme: light)" srcset="readme/light-tl@2x-100.jpg">

  <source media="(max-width: 768px) and (prefers-color-scheme: light)" srcset="readme/light-tlm@2x-100.jpg">

  <source media="(max-width: 768px) and (prefers-color-scheme: dark)" srcset="readme/dark-tlm@2x-100.jpg">

  <img src="readme/dark-tl@2x-100.jpg" alt="You will find me writing about tech, web dev, accessibility, breaking the internet and more over on DEV! Purple and neon pink design with Graham pointing at the next section" width="50%" title="My writing on DEV">
</picture>

虽然本身并不困难，但创建 4 种图像变体需要花费时间。

没有空白

我还有最后一个问题。

底部实际上由 4 张不同的图像组成（是的，我必须为它创建 16 张不同的图像……）。

原因是每个部分都是一个可点击的链接。

并不复杂，但有一个小问题需要注意。

如果您希望两幅图像直接并排接触（因此两幅图像的宽度均为 50%），则必须删除锚点、图片元素甚至图片元素内的源之间的所有空白。

否则，GitHub 会为您的元素添加一些边距，并且它们将不在同一行上。

此外，尽管我删除了所有空白，但仍然遇到了另一个限制，第一行和第二行之间仍然存在 8px 的间隙，遗憾的是您无法删除这个间隙（因此两者之间有一条界线！）。

总结！

我可能会对内容安全策略、元素技巧等进行更深入的解释<picture>，当然<foreignObject>在未来也是如此。

这更多的是对这些概念的介绍，以便您可以自己玩它们，而不是教程。

但是现在您知道了我使用的技巧，我希望看到您构建一个比我的更漂亮的 GitHub readme！

如果你喜欢，请在评论中分享！💪🏼🙏🏼💗

祝大家编码愉快！💗