关于李瑞豪

一名前端開發工程師，hugo-fixit 的創建者，經常在菠菜眾長 1 和 FixIt2 上撰寫文章和文檔。

请复制 RSS 到你的阅读器，或快速订阅到 :

李瑞豪 RSS 预览

现代 CSS 解决方案：CSS 四舍五入数值单位

2024-07-29 20:32:39

本文将介绍另外一个非常实用的 CSS 数学函数 - <code>round()</code> 及其实际应用场景。 <h2 id="何为-css-round-函数" class="heading-element">1 何为 CSS round 函数 <a href="#%e4%bd%95%e4%b8%ba-css-round-%e5%87%bd%e6%95%b0" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><blockquote>这是一个比较新的 CSS 函数，在 <a href="https://drafts.csswg.org/css-values/#funcdef-round"target="_blank" rel="external nofollow noopener noreferrer">CSS Values and Units Module Level 4</a> 规范中提出，自 2024 年 5 月起，此功能适用于最新设备和浏览器版本。此功能可能无法在较旧的设备或浏览器中使用。 </blockquote>CSS <code>round()</code> 函数根据选定的舍入策略返回舍入数。 作者应使用自定义 CSS 属性（例如 <code>--my-property</code>）作为舍入值、间隔或两者兼而有之；如果这些函数具有已知值，使用 <code>round()</code> 函数显然不太必要。 <h3 id="语法规则" class="heading-element">1.1 语法规则 <a href="#%e8%af%ad%e6%b3%95%e8%a7%84%e5%88%99" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h3><code>round()</code> 的完整语法规则还是比较复杂的。完整的介绍可以看 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/round"target="_blank" rel="external nofollow noopener noreferrer">MDN - round()</a>。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><round()> = round( <rounding-strategy>?, <valueToRound> , <roundingInterval> )</code></pre></td></tr></table> </div> </div><code>round(<rounding-strategy>, valueToRound, roundingInterval)</code> 函数指定可选的舍入策略、要舍入的值（或数学表达式）和舍入间隔（或数学表达式）。根据舍入策略，<code>valueToRound</code> 四舍五入到 <code>roundingInterval</code> 的最接近整数倍。 <ul> <li><code><rounding-strategy></code>: 可选参数，表示舍入策略。这可能是以下值之一： <ul> <li><code>up</code>: 相当于 JavaScript Math.ceil() 方法，将 valueToRound 向上舍入到 roundingInterval 最接近的整数倍。这相当于 JavaScript Math.ceil() 方法。</li> <li><code>down</code>: 将 valueToRound 向下舍入为 roundingInterval 最接近的整数倍。这相当于 JavaScript Math.floor() 方法。</li> <li><code>nearest</code>: 将 valueToRound 舍入为 roundingInterval 的最接近的整数倍，该倍数可以高于或低于该值。如果 valueToRound 是上方和下方舍入目标之间的一半，则会向上舍入。相当于 JavaScript Math.round()。</li> <li><code>to-zero</code>: 将 valueToRound 舍入为 roundingInterval 接近/接近零的最接近整数倍。这相当于 JavaScript Math.trunc() 方法。</li> </ul> </li> <li><code><valueToRound></code>: 需要被四舍五入的值。必须是 <code><number></code>、<code><dimension></code> 或 <code><percentage></code>，或者解析为这些值之一的数学表达式。</li> <li><code><roundingInterval></code>: 舍入的间隔规则。这是一个 <code><number></code>、<code><dimension></code> 或 <code><percentage></code>，或者解析为这些值之一的数学表达式。</li> </ul> <h3 id="示例" class="heading-element">1.2 示例 <a href="#%e7%a4%ba%e4%be%8b" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">width: round(var(--width), 50px); width: round(up, 101px, var(--interval)); width: round(down, var(--height), var(--interval)); margin: round(to-zero, -105px, 10px);</code></pre></td></tr></table> </div> </div>MDN 官方写了一个完整的例子，可以看 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/round"target="_blank" rel="external nofollow noopener noreferrer">Playground | MDN</a>。 <h2 id="有什么用" class="heading-element">2 有什么用 <a href="#%e6%9c%89%e4%bb%80%e4%b9%88%e7%94%a8" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>上面讲了一大堆概念，那这玩意到底有什么用勒？ 好好好，那就再回想一下在此之前我们开发中遇到的痛点吧： <ul> <li>解决基于 transform 的模糊问题</li> <li>使用 <code>round()</code> 模拟步骤缓动动画</li> <li>解决百分比或者 <code>rem</code> 单位的四舍五入问题</li> </ul> 前两点可以看 ChokCoco 的文章 <a href="https://www.cnblogs.com/coco1s/p/17676226.html"target="_blank" rel="external nofollow noopener noreferrer">现代 CSS 解决方案：数学函数 Round</a>，里面有详细的讲解。 而我遇到的主要问题就是第三点，也就是由于浏览器渲染机制，导致有时百分比或者 <code>rem</code> 的单位实际计算值为小数的情况引起的系列问题。 造成这个现象的主要原因有： <ul> <li>像素单位和设备像素比（DPR）</li> <li>浏览器的子像素渲染偏差</li> </ul> 举个例子吧： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.container { width: 100px; } .child { width: 33.33%; }</code></pre></td></tr></table> </div> </div>如果容器 <code>.container</code> 中有三个 <code>.child</code> 元素，那么每个 <code>.child</code> 的理论宽度应该是 <code>33.33px</code>。然而，由于不能将像素拆分，浏览器采取四舍五入方式处理，从而得到了 <code>33px</code> 或 <code>34px</code> 的结果。然而，为了保持布局的精确性，浏览器实际上以子像素的方式保存了这些值，并且在渲染时考虑了这部分差异。 但是！！！坑爹的是，不同浏览器的处理方式也会不同，还有就是子孙节点继承宽度时可能会有四舍五入导致子孙节点宽度大于父节点宽度的问题。 <h2 id="实际场景应用" class="heading-element">3 实际场景应用 <a href="#%e5%ae%9e%e9%99%85%e5%9c%ba%e6%99%af%e5%ba%94%e7%94%a8" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>在 FixIt 主题中，页面内容分为左、中、右三栏： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">.wrapper main.container { display: flex; align-items: flex-start; justify-content: center; padding-inline: 1rem; gap: 0.5rem; .page { width: 56%; #comments { width: 100%; // 评论区域 iframe iframe { width: 100%; } } } }</code></pre></td></tr></table> </div> </div>例如在 <code>1440px</code> 的屏幕上，中间内容宽度应该为 <code>(1440 - 2 * 16) * 0.56 = 788.48px</code>，实际渲染结果却是 <code>788.48px</code>。 问题来了，在内容的最后加上一个 giscus 评论区域，评论区域容器 <code>iframe</code> 和 <code>iframe</code> 里面的内容按理说应该都是 <code>788.48px</code>，但是实际渲染结果却是： <ul> <li>评论容器 <code>iframe</code>：<code>788.48px</code></li> <li><code>iframe</code> 内评论内容 HTML：<code>789px</code></li> </ul> 怎么说？无奈不，四舍五入，你舍掉其实这个场景我也就不纠结了，恰好它是符合五入的规则，向上 <code>1px</code> 取整了，导致的视觉上的影响就是 giscus 评论区域右侧的边框恰巧不见了。—T_T— 那怎么搞勒，治标不治本的做法就是，把评论区 <code>#comments</code> 的宽度缩小一些，但是我不想这样做。 我想既然问题是小数点造成的，避免产生小数点不就好了，然后就用到了 <code>round()</code> 函数： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">.page { width: round(56%, 2px); }</code></pre></td></tr></table> </div> </div>我希望页面中间永远是偶数，这样可以同时避免左、中、右三个部分出现小数，所以这里的 <code>roundingInterval</code> 设置为 <code>2px</code>，表示四舍五入到 <code>2px</code> 的整数倍，这样就避免了小数点的问题。 好了，问题就这样愉快地解决了……吗？ 好吧，并没有。—T_T— <h2 id="兼容性" class="heading-element">4 兼容性 <a href="#%e5%85%bc%e5%ae%b9%e6%80%a7" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>开头说了这是一个比较新的 CSS 函数，所以兼容性肯定是个问题。尽管截至 2024 年 7 月 29 日，<code>round()</code> 函数覆盖了 67.63% 的浏览器，并且在各类浏览器中的最新几个版本都得到了完全支持（忽略 IE），但是在一些老版本的浏览器中还是不支持的，如下图。 那又怎么搞勒？要崩溃了，最讨厌兼容性了，也讨厌 Polyfill，但是毕竟 FixIt 主题不是我一个人在用，还是加一下 Polyfill 吧。 好家伙！没有 Polyfill 可用。真要崩溃了，前面都白折腾了？—T_T— 也不是没有办法，自己写一个，利用 <code>@supports</code> 写一些兼容性代码吧，不支持的就不用 <code>round()</code> 函数了。 上面简化后的例子兼容性可以这样写： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">// 顺便提一下，大写 ROUND 是为了避免和 Sass 的 round 函数冲突，CSS 中对函数关键词大小写不敏感。 .wrapper main.container { display: flex; align-items: flex-start; justify-content: center; padding-inline: 1rem; gap: 0.5rem; .page { width: ROUND(56%, 2px); #comments { width: 100%; // 评论区域 iframe iframe { width: 100%; } } } // 如果不支持 round() 函数，回退到设定固定值 56% @supports not (width: ROUND(56%, 2px)) { .page { width: 56%; } } /* ... */ }</code></pre></td></tr></table> </div> </div>好了，跌跌撞撞就这样了，等过两年 <code>round()</code> 函数覆盖率更高了我第一件事就是把上面的兼容性代码删掉。😂

Git 统计代码量

2024-07-17 16:06:08

使用 Git 命令统计在某段时间内项目中的代码量。 <h2 id="统计-commit-数" class="heading-element">1 统计 commit 数 <a href="#%e7%bb%9f%e8%ae%a1-commit-%e6%95%b0" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">git log --author="[email protected]" --since="2023-01-01" --until="2023-12-31" --oneline | wc -l</code></pre></td></tr></table> </div> </div><h2 id="统计行数" class="heading-element">2 统计行数 <a href="#%e7%bb%9f%e8%ae%a1%e8%a1%8c%e6%95%b0" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">git log --author="[email protected]" --pretty=tformat: --since="2023-01-01" --until="2023-12-31" --numstat -- . ":(exclude)build" ":(exclude)dist" ":(exclude)node_modules" ":(exclude)test" ":(exclude)static" -numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }'</code></pre></td></tr></table> </div> </div><h2 id="整合成一个脚本" class="heading-element">3 整合成一个脚本 <a href="#%e6%95%b4%e5%90%88%e6%88%90%e4%b8%80%e4%b8%aa%e8%84%9a%e6%9c%ac" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>统计所有作者移除 <code>--author="$author_email"</code> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">#!/bin/bash project_name=$(basename "$(pwd)") author_email="[email protected]" # since_date="1 year ago" since_date="2023-01-01" until_date="2023-12-31" # 统计 commit 数量 commit_count=$(git log --author="$author_email" --since="$since_date" --until="$until_date" --oneline | wc -l) # 统计代码行数（排除目录 build、dist、node_modules、test、static） line_stats=$(git log --author="$author_email" --pretty=tformat: --since="$since_date" --until="$until_date" --numstat -- . ":(exclude)build" ":(exclude)dist" ":(exclude)node_modules" ":(exclude)test" ":(exclude)static" | awk '{ add += $1; subs += $2; } END { printf "%s ++\t%s --\n", add, subs }') echo "$project_name:\t$commit_count commits\t$line_stats"</code></pre></td></tr></table> </div> </div>例如在 FixIt 项目中截至 2024-07-17 为止我的代码统计如下： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-plain" data-lang="plain">FixIt: 1022 commits 82040 ++ 103942 --</code></pre></td></tr></table> </div> </div>

现代 CSS 解决方案之异形元素怎么设置阴影？

2024-07-15 10:40:12

今天记录一个 CSS 小知识点，如何给异形元素设置阴影。 <h2 id="遇到的问题" class="heading-element">1 遇到的问题 <a href="#%e9%81%87%e5%88%b0%e7%9a%84%e9%97%ae%e9%a2%98" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>之前给博客头部设置了一个 <a href="https://lruihao.cn/images/drop.responsive.svg">异形元素</a>，当时给它父元素设置了如下 <code>box-shadow</code>： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">header { box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1); }</code></pre></td></tr></table> </div> </div>发现只有矩形部分有阴影，异形部分没有阴影。是因为 <code>box-shadow</code> 只能给盒子模型设置阴影，异形元素无法设置阴影的。 那怎么给异形元素设置阴影呢？ <h2 id="解决方法" class="heading-element">2 解决方法 <a href="#%e8%a7%a3%e5%86%b3%e6%96%b9%e6%b3%95" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>可以使用 <code>filter</code> 属性的 <code>drop-shadow</code> 函数来给异形元素设置阴影。 <code>drop-shadow</code> 绘制的投影实际上是输入图像的 alpha 蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。 <div class="details admonition note open"> <div class="details-summary admonition-title"> 备注 </div> <div class="details-content"> <div class="admonition-content">这个函数有点类似于 <code>box-shadow</code> 属性。<code>box-shadow</code> 属性在元素的整个框后面创建一个矩形阴影，而 <code>drop-shadow()</code> 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。</div> </div> </div> 语法如下： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">drop-shadow(offset-x offset-y standard-deviation color)</code></pre></td></tr></table> </div> </div>可以看出，<code>drop-shadow</code> 比 <code>box-shadow</code> 少了一个阴影的扩展半径 <code>spread-radius</code> 参数（或者说尚未实现）。 回到我的问题，给异形元素设置阴影的代码如下： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">header { filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.1)); }</code></pre></td></tr></table> </div> </div><h2 id="浏览器支持" class="heading-element">3 浏览器支持 <a href="#%e6%b5%8f%e8%a7%88%e5%99%a8%e6%94%af%e6%8c%81" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2> <h2 id="参考链接" class="heading-element">4 参考链接 <a href="#%e5%8f%82%e8%80%83%e9%93%be%e6%8e%a5" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow"target="_blank" rel="external nofollow noopener noreferrer">drop-shadow() - CSS: Cascading Style Sheets | MDN</a></li> </ul>

CSS 实现时间轴、背景图 loading 和渐变边框

2024-07-14 13:03:31

<img src="https://lruihao.cn/posts/fixit-docs-bookmark/images/featured-image.webp" alt="featured image" referrerpolicy="no-referrer">本文将通过一个实际应用场景，展示如何使用现代 CSS 实现时间轴、背景图 loading 效果、渐变边框等效果。 <h2 id="背景" class="heading-element">1 背景 <a href="#%e8%83%8c%e6%99%af" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>最近在调整 FixIt 主题的官方文档，调整过程中总觉得首页空荡荡的少了些内容，然后就在脑海里构思了如本文封面图所示的效果，希望引导用户阅读文档。 需求分析： <ol> <li>整体布局：左右两栏，左侧为主题文档大纲，右侧为网站预览图</li> <li>左侧需要显示时间轴，时间轴带有跑马灯动画效果（暗指文档阅读顺序）</li> <li>右侧加载网站预览图时，需要有 loading 效果</li> <li>整体边框需要渐变效果</li> </ol> 第一点很简单，一个 <code>flex</code> 布局就能搞定了，这里不再展开。 接下来我们重点看看如何实现时间轴、背景图 loading 效果和渐变边框。 <h2 id="时间轴" class="heading-element">2 时间轴 <a href="#%e6%97%b6%e9%97%b4%e8%bd%b4" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>先睹为快，效果如下： <figure><a class="lightgallery" href="https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-outline.gif?size=large" data-thumbnail="/posts/fixit-docs-bookmark/images/demo-outline.gif?size=small" data-sub-html="<h2>时间轴动画</h2>从上到下依次点亮时间轴"><img loading="lazy" src="https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-outline.gif" alt="时间轴动画" srcset="https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-outline.gif?size=small, https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-outline.gif?size=medium 1.5x, https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-outline.gif?size=large 2x" data-title="从上到下依次点亮时间轴" style="--width: 264px;--aspect-ratio: 264 / 192;background: url(/images/loading.min.svg) no-repeat center;" onload="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}this.dataset.lazyloaded='';" onerror="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}"/></a><figcaption class="image-caption">时间轴动画</figcaption> </figure> 我不希望时间轴的实现和其他 UI 框架一样拥有复杂的 DOM 结构，所以使用最简单的 <code>ul</code> 和 <code>li</code> 即可，关键代码如下： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><ul class="docs-outline"> <li><a href="{{ $page1.Permalink }}">{{ $page1.LinkTitle }}</a></li> <li><a href="{{ $page2.Permalink }}">{{ $page2.LinkTitle }}</a></li> <li><a href="{{ $page3.Permalink }}">{{ $page3.LinkTitle }}</a></li> <li><a href="{{ $page4.Permalink }}">{{ $page4.LinkTitle }}</a></li> </ul></code></pre></td></tr></table> </div> </div>DOM 结构就这么简单，重点在于 CSS 的实现，实现思路如下： <ul> <li>先把 <code>ul</code> 设置 <code>list-style: none</code>，去掉默认的 <code>li</code> 样式</li> <li>利用 <code>::before</code> 和 <code>::after</code> 伪元素实现时间轴的小圆点和连接线</li> <li>动画效果：四个小圆点默认和连接线一样灰色，然后依次点亮，可以使用 <code>animation-delay</code> 属性实现</li> </ul> 动画效果关键帧代码如下： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">li::before { border: var(--timeline-width) solid var(--timeline-color); animation-name: border-color-fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: calc(var(--timeline-index) * 0.3s); @keyframes border-color-fade { 0% { border-color: var(--timeline-color); } 50% { border-color: var(--timeline-circle-color); } 100% { border-color: var(--timeline-color); } } }</code></pre></td></tr></table> </div> </div>通过 <code>nth-child</code> 选择器来设置 <code>--timeline-index</code> 来线性增加每个小圆点的动画延迟时间，从而在视觉上出现依次点亮的效果。 如果使用 SCSS 可以简化代码，如下： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">@for $i from 1 through 4 { li:nth-child(#{$i}) { --timeline-index: #{$i}; &::before { content: '#{$i}'; } } }</code></pre></td></tr></table> </div> </div>如果需要在小圆点的内部显示序号，可以像设置 <code>--timeline-index</code> 一样依次设置 <code>content</code>。 然后在小圆点点亮动画过程中同时转变 <code>color: transparent</code> 到具体的颜色即可。 <h2 id="背景图-loading-效果" class="heading-element">3 背景图 loading 效果 <a href="#%e8%83%8c%e6%99%af%e5%9b%be-loading-%e6%95%88%e6%9e%9c" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><figure><a class="lightgallery" href="https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-loading.gif?size=large" data-thumbnail="/posts/fixit-docs-bookmark/images/demo-loading.gif?size=small" data-sub-html="<h2>背景图 loading 效果</h2>先加载 loading 图再加重预览图"><img loading="lazy" src="https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-loading.gif" alt="背景图 loading 效果" srcset="https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-loading.gif?size=small, https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-loading.gif?size=medium 1.5x, https://lruihao.cn/posts/fixit-docs-bookmark/images/demo-loading.gif?size=large 2x" data-title="先加载 loading 图再加重预览图" style="--width: 815px;--aspect-ratio: 815 / 300;background: url(/images/loading.min.svg) no-repeat center;" onload="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}this.dataset.lazyloaded='';" onerror="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}"/></a><figcaption class="image-caption">背景图 loading 效果</figcaption> </figure> 如果只是想实现图片的 loading 效果其实很简单，之前在「<a href="https://lruihao.cn/posts/native-img-loading-lazy/">浏览器 IMG 图片原生懒加载 Loading=“lazy”</a>」中有介绍过，但是这次我是把图片当作背景图片使用的，那问题来了，不通过 JS 背景图片的 loading 效果怎么实现呢？ 还是可以利用 <code>::before</code> 和 <code>::after</code> 伪元素，一个伪元素用来显示 loading 图，另一个伪元素用来显示背景图片。 原理：利用两张图片加载的时间差，由于 loading 图片很小，所以加载很快，而背景图片加载较慢，然后默认不设置 <code>z-index</code> 的情况下，后面的元素会在上层，所以在背景图片加载完成前，loading 图片会一直显示。 关键代码如下： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">.docs-preview { &::before, &::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; } &::before { background-color: rgba(204, 204, 204, 0.1); background-image: url(/images/loading.min.svg); background-size: 60px; [data-theme='dark'] & { background-color: rgba(0, 0, 0, 0.1); } } &::after { background-image: url(/images/apple-devices-preview.webp); background-size: 130%; } }</code></pre></td></tr></table> </div> </div><h2 id="全尺寸带圆角渐变边框" class="heading-element">4 全尺寸带圆角渐变边框 <a href="#%e5%85%a8%e5%b0%ba%e5%af%b8%e5%b8%a6%e5%9c%86%e8%a7%92%e6%b8%90%e5%8f%98%e8%be%b9%e6%a1%86" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>最后实现一个全尺寸带圆角渐变边框效果，一句话概括为利用线性渐变 <code>linear-gradient</code> 分别设置 <code>padding-box</code> 和 <code>border-box</code> 的背景，然后 <code>border</code> 颜色设置为透明即可实现。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">.docs-navigation { border-radius: 2.5px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, #42d392, #FF7359) border-box; border: 0.25rem solid transparent; }</code></pre></td></tr></table> </div> </div>值得一提的是，这里面利用到的一个核心概念是 <code>background-clip</code> 属性，详见 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip"target="_blank" rel="external nofollow noopener noreferrer">background-clip - CSS: Cascading Style Sheets | MDN</a>： <ul> <li><code>padding-box</code> 表示背景延伸到内边距边界</li> <li><code>border-box</code> 表示背景延伸到边框边界。</li> </ul> 另外，如果想实现渐变边框的动画效果，用 SCSS 可以这样做（虽然我不认为这是一个好的做法）： <div class="highlight" data-open="false"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">.docs-navigation { border-radius: 2.5px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--gradient-angle), #42d392, #FF7359) border-box; border: 0.25rem solid transparent; transition: background-color 0.5s, border-color 0.5s; --gradient-angle: 45deg; animation: gradient-angle-change 10s infinite linear; // 分的越细，动画效果越平滑 @keyframes gradient-angle-change { @for $i from 0 through 100 { #{$i * 1%} { --gradient-angle: #{45 + $i * 4}deg; } } } }</code></pre></td></tr></table> </div> </div><h2 id="最后的效果" class="heading-element">5 最后的效果 <a href="#%e6%9c%80%e5%90%8e%e7%9a%84%e6%95%88%e6%9e%9c" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>为了方便使用 FixIt 主题的用户在自己的笔记内插入 FixIt 官方文档的书签，我把这个效果封装成了一个独立的组件，你可以在 <a href="https://github.com/hugo-fixit/shortcode-docs-bookmark"target="_blank" rel="external nofollow noopener noreferrer">hugo-fixit/shortcode-docs-bookmark</a> 中找到完整代码及食用方法。 <div class="fixit-docs-navigation"><ul class="fixit-docs-outline"><li><a href="https://fixit.lruihao.cn/zh-cn/documentation/installation/" title="只需几个步骤即可为你的 Hugo 站点安装 FixIt 主题。">安装篇</a></li><li><a href="https://fixit.lruihao.cn/zh-cn/documentation/getting-started/" title="安装和使用 FixIt 主题的快速入门和指南。">入门篇</a></li><li><a href="https://fixit.lruihao.cn/zh-cn/documentation/content-management/" title="了解如何在 FixIt 主题中快速，直观地创建和组织内容。">内容管理</a></li><li><a href="https://fixit.lruihao.cn/zh-cn/documentation/advanced/" title="探索 Hugo - FixIt 主题的的进阶使用。">进阶篇</a></li></ul><div class="fixit-docs-preview"></div></div> <h2 id="总结" class="heading-element">6 总结 <a href="#%e6%80%bb%e7%bb%93" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>很多时候都感觉写 CSS 就像在写诗，相同的效果 CSS 实现往往会比 JS 更加优雅。

标准滚动条控制规范

2024-06-28 22:29:03

使用 <code>scrollbar-width</code> 和 <code>scrollbar-color</code> 属性设置滚动条的样式。 <h2 id="简介" class="heading-element">1 简介 <a href="#%e7%ae%80%e4%bb%8b" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>从 Chrome 版本 2 开始，可以使用 <code>::-webkit-scrollbar-*</code> 伪元素设置滚动条的样式。此方法在 Chrome 和 Safari 中都很有效，但 CSS 工作组从未标准化。 <blockquote>MDN - ::-webkit-scrollbar Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. </blockquote>实现标准化的是 <code>scrollbar-width</code> 和 <code>scrollbar-color</code> 属性，它们是 <a href="https://drafts.csswg.org/css-scrollbars/#scrollbar-width"target="_blank" rel="external nofollow noopener noreferrer">CSS Scrollbars Styling Module Level 1</a> 的一部分。从 Chrome 121 开始，这些属性受支持。 <h2 id="滚动条入门指南" class="heading-element">2 滚动条入门指南 <a href="#%e6%bb%9a%e5%8a%a8%e6%9d%a1%e5%85%a5%e9%97%a8%e6%8c%87%e5%8d%97" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><h3 id="滚动条剖析" class="heading-element">2.1 滚动条剖析 <a href="#%e6%bb%9a%e5%8a%a8%e6%9d%a1%e5%89%96%e6%9e%90" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h3>滚动条至少由一个轨迹和一个滑块组成。滑道是拇指可以移动的区域。轨迹表示整个滚动距离。滑块表示可滚动区域内的当前位置。滚动时，它会在轨道内移动。拇指通常也是可拖动的。 不过，滚动条可以有多个部分，而不仅仅是滑块和滑道。例如，滚动条可以包含一个或多个用于递增或递减滚动偏移的按钮。滚动条的组成部分由底层操作系统决定。 <figure><a class="lightgallery" href="https://lruihao.cn/posts/scrollbar-styling/images/24_1719585398.png?size=large" data-thumbnail="/posts/scrollbar-styling/images/24_1719585398.png?size=small" data-sub-html="<h2>组成滚动条的各个部分的图示</h2>左侧插图是一个最小的滚动条，其中只有轨迹和拇指。右边的按钮也有一些按钮。"><img loading="lazy" src="https://lruihao.cn/posts/scrollbar-styling/images/24_1719585398.png" alt="组成滚动条的各个部分的图示" srcset="https://lruihao.cn/posts/scrollbar-styling/images/24_1719585398.png?size=small, https://lruihao.cn/posts/scrollbar-styling/images/24_1719585398.png?size=medium 1.5x, https://lruihao.cn/posts/scrollbar-styling/images/24_1719585398.png?size=large 2x" data-title="左侧插图是一个最小的滚动条，其中只有轨迹和拇指。右边的按钮也有一些按钮。" style="--width: 4000px;--aspect-ratio: 4000 / 2250;background: url(/images/loading.min.svg) no-repeat center;" onload="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}this.dataset.lazyloaded='';" onerror="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}"/></a><figcaption class="image-caption">组成滚动条的各个部分的图示</figcaption> </figure> <h3 id="传统滚动条和重叠式滚动条" class="heading-element">2.2 传统滚动条和重叠式滚动条 <a href="#%e4%bc%a0%e7%bb%9f%e6%bb%9a%e5%8a%a8%e6%9d%a1%e5%92%8c%e9%87%8d%e5%8f%a0%e5%bc%8f%e6%bb%9a%e5%8a%a8%e6%9d%a1" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h3>在介绍如何设置滚动条的样式之前，请务必先了解两种滚动条之间的区别。 <table> <thead> <tr> <th style="text-align: left">操作系统</th> <th style="text-align: left">默认滚动条</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">Mac</td> <td style="text-align: left">叠加滚动条（Overlay scrollbars）</td> </tr> <tr> <td style="text-align: left">Windows</td> <td style="text-align: left">经典滚动条（Classic scrollbars）</td> </tr> </tbody> </table> <h4 id="叠加滚动条" class="heading-element">2.2.1 叠加滚动条 <a href="#%e5%8f%a0%e5%8a%a0%e6%bb%9a%e5%8a%a8%e6%9d%a1" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h4>叠加层滚动条是在下方内容之上的浮动滚动条。默认情况下，这些按钮不会显示，只有当主动滚动时才会显示。为了让内容保持可见状态，它们通常采用半透明形式，但这由操作系统来决定。在与它们互动时，它们的大小也可能有所变化。 <figure><a class="lightgallery" href="https://lruihao.cn/posts/scrollbar-styling/images/24_1719585770.png?size=large" data-thumbnail="/posts/scrollbar-styling/images/24_1719585770.png?size=small" data-sub-html="<h2>带有叠加滚动条的浏览器</h2>滚动条会叠加在内容上；滑块是部分透明的。"><img loading="lazy" src="https://lruihao.cn/posts/scrollbar-styling/images/24_1719585770.png" alt="带有叠加滚动条的浏览器" srcset="https://lruihao.cn/posts/scrollbar-styling/images/24_1719585770.png?size=small, https://lruihao.cn/posts/scrollbar-styling/images/24_1719585770.png?size=medium 1.5x, https://lruihao.cn/posts/scrollbar-styling/images/24_1719585770.png?size=large 2x" data-title="滚动条会叠加在内容上；滑块是部分透明的。" style="--width: 4000px;--aspect-ratio: 4000 / 2250;background: url(/images/loading.min.svg) no-repeat center;" onload="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}this.dataset.lazyloaded='';" onerror="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}"/></a><figcaption class="image-caption">带有叠加滚动条的浏览器</figcaption> </figure> <h4 id="经典滚动条" class="heading-element">2.2.2 经典滚动条 <a href="#%e7%bb%8f%e5%85%b8%e6%bb%9a%e5%8a%a8%e6%9d%a1" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h4>传统滚动条是放置在专用_滚动条边线_中的滚动条。滚动条边线是内边框边缘与外内边距边缘之间的空间。这些滚动条通常是不透明的（不透明），并会占用相邻内容的某些空间。 <figure><a class="lightgallery" href="https://lruihao.cn/posts/scrollbar-styling/images/24_1719585901.png?size=large" data-thumbnail="/posts/scrollbar-styling/images/24_1719585901.png?size=small" data-sub-html="<h2>包含传统滚动条的浏览器图示</h2>滚动条位于内容旁边的专用区域中；内容的可用宽度会缩小（相对于使用叠加层滚动条时的可用宽度）。"><img loading="lazy" src="https://lruihao.cn/posts/scrollbar-styling/images/24_1719585901.png" alt="包含传统滚动条的浏览器图示" srcset="https://lruihao.cn/posts/scrollbar-styling/images/24_1719585901.png?size=small, https://lruihao.cn/posts/scrollbar-styling/images/24_1719585901.png?size=medium 1.5x, https://lruihao.cn/posts/scrollbar-styling/images/24_1719585901.png?size=large 2x" data-title="滚动条位于内容旁边的专用区域中；内容的可用宽度会缩小（相对于使用叠加层滚动条时的可用宽度）。" style="--width: 4000px;--aspect-ratio: 4000 / 2250;background: url(/images/loading.min.svg) no-repeat center;" onload="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}this.dataset.lazyloaded='';" onerror="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}"/></a><figcaption class="image-caption">包含传统滚动条的浏览器图示</figcaption> </figure> <h2 id="scrollbar-color-和-scrollbar-width-属性" class="heading-element">3 scrollbar-color 和 scrollbar-width 属性 <a href="#scrollbar-color-%e5%92%8c-scrollbar-width-%e5%b1%9e%e6%80%a7" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><h3 id="scrollbar-color-设置滚动条颜色" class="heading-element">3.1 scrollbar-color 设置滚动条颜色 <a href="#scrollbar-color-%e8%ae%be%e7%bd%ae%e6%bb%9a%e5%8a%a8%e6%9d%a1%e9%a2%9c%e8%89%b2" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h3><blockquote>参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-color"target="_blank" rel="external nofollow noopener noreferrer">https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-color</a> </blockquote>借助 <code>scrollbar-color</code> 属性，可以更改滚动条的配色方案。该属性接受两个 <code><color></code> 值。 <ul> <li>第一个值用于确定滑块（thumb）的颜色</li> <li>第二个值用于确定要用于轨道（track）的颜色</li> </ul> 如需使用操作系统提供的默认呈现方式，请使用 <code>auto</code> 作为其值。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">/* 关键字值 */ scrollbar-color: auto; /* <color> 值 */ scrollbar-color: rebeccapurple green; /* 两个有效的颜色。 第一个应用于滚动条的滑块，第二个应用于轨道。 */ /* 全局值 */ scrollbar-color: inherit; scrollbar-color: initial; scrollbar-color: revert; scrollbar-color: revert-layer; scrollbar-color: unset;</code></pre></td></tr></table> </div> </div>默认情况下，使用叠加滚动条时，轨迹的颜色不起作用。不过，将鼠标悬停在滚动条上时，系统会显示航迹。 <h3 id="scrollbar-width-设置滚动条粗细" class="heading-element">3.2 scrollbar-width 设置滚动条粗细 <a href="#scrollbar-width-%e8%ae%be%e7%bd%ae%e6%bb%9a%e5%8a%a8%e6%9d%a1%e7%b2%97%e7%bb%86" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h3><blockquote>参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width"target="_blank" rel="external nofollow noopener noreferrer">https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width</a> </blockquote>借助 <code>scrollbar-width</code> 属性，可以选择较窄的滚动条，甚至可以完全隐藏滚动条而不影响可滚动性。 接受的值包括 <code>auto</code>、<code>thin</code> 和 <code>none</code>。 <ul> <li><code>auto</code>：平台提供的默认滚动条宽度。</li> <li><code>thin</code>：平台提供的滚动条的细变体，或比默认平台滚动条更细的自定义滚动条。</li> <li><code>none</code>：有效隐藏滚动条。不过，此元素仍然可滚动。</li> </ul> 无法使用 <code><length></code>（例如 <code>16px</code>）作为 <code>scrollbar-width</code> 的值。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">/* 关键字值 */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; /* 全局值 */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: revert; scrollbar-width: revert-layer; scrollbar-width: unset;</code></pre></td></tr></table> </div> </div>使用叠加滚动条时，仅当你主动滚动可滚动区域时，才会显示滚动条滑块。 <h2 id="支持旧版浏览器" class="heading-element">4 支持旧版浏览器 <a href="#%e6%94%af%e6%8c%81%e6%97%a7%e7%89%88%e6%b5%8f%e8%a7%88%e5%99%a8" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>为了满足不支持 <code>scrollbar-color</code> 和 <code>scrollbar-width</code> 的浏览器版本，可以同时使用新的 <code>scrollbar-*</code> 和 <code>::-webkit-scrollbar-*</code> 属性。 <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">/* Modern browsers with `scrollbar-*` support (high priority) */ @supports (scrollbar-width: auto) { * { scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);; scrollbar-width: var(--scrollbar-width); } } /* Legacy browsers with `::-webkit-scrollbar-*` support */ ::-webkit-scrollbar { height: var(--scrollbar-width-legacy); width: var(--scrollbar-width-legacy); overflow: visible; } ::-webkit-scrollbar-button { height: 0; width: 0; } ::-webkit-scrollbar-corner { background-color: var(--scrollbar-track-color); } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); } ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-color); } ::-webkit-scrollbar-track { background-color: var(--scrollbar-track-color); } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { background-clip: padding-box; border: 3px solid transparent; border-radius: 100px; }</code></pre></td></tr></table> </div> </div>请注意，当设置 <code>::-webkit-scrollbar</code> 的 <code>width</code> 或 <code>height</code> 时，系统始终会显示叠加层滚动条，实际上会变为经典滚动条。 <h2 id="总结一下" class="heading-element">5 总结一下 <a href="#%e6%80%bb%e7%bb%93%e4%b8%80%e4%b8%8b" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>可以看到，其实就目前 <code>scrollbar-width</code> 而言，其能力还是属于比较鸡肋的。相对正常的样式，仅仅多了一种瘦版样式选择以及提供了无滚动条模式。 当然，整个 <code>scrollbar-color</code> 和 <code>scrollbar-width</code> 相较于非标准的 <code>::-webkit-scrollbar</code> 规范已经是非常大的一步跨越。只是其功能的丰富性和全面性还需要等待。

如何实现 VSCode 编辑器窗口边界拖拽类似功能

2024-06-13 21:03:12

边界拖拽调整窗口大小功能是一个很常见的功能，比如浏览器、编辑器等很多场景都有应用，这种功能不仅提高了用户体验，也增强了应用的灵活性。 <h2 id="效果演示" class="heading-element">1 效果演示 <a href="#%e6%95%88%e6%9e%9c%e6%bc%94%e7%a4%ba" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><a href="https://lruihao.github.io/vue-el-demo/#/aside-toggle-drag"target="_blank" rel="external nofollow noopener noreferrer">vue-el-demo/#/aside-toggle-drag</a> <h2 id="实现代码" class="heading-element">2 实现代码 <a href="#%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><a href="https://github.com/Lruihao/vue-el-demo/blob/main/src/components/AsideToggler/index.vue"target="_blank" rel="external nofollow noopener noreferrer">@/components/AsideToggler</a> <h2 id="实现思路" class="heading-element">3 实现思路 <a href="#%e5%ae%9e%e7%8e%b0%e6%80%9d%e8%b7%af" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>怎么说呢，写这篇文章就是想记录一下思路，本来想画个图说明一下的，但是懒得画了，随便说几句吧。 实现边界拖拽调整窗口大小功能，主要是通过鼠标按下、移动、松开事件来实现的，主要思路如下： <ol> <li>在 <code>mousedown</code> 事件中，我们记录下鼠标的初始位置和元素的初始宽度。</li> <li>在 <code>mousemove</code> 事件中，我们根据鼠标的新位置计算出新的宽度，并使用 <code>clamp()</code> 函数将其限制在最小宽度和最大宽度之间。</li> <li>同时，我们还需要根据鼠标位置的变化，动态更新鼠标样式，以提示用户当前的拖拽状态。</li> <li>在 <code>mouseup</code> 事件中，我们清除之前设置的事件监听器，并恢复鼠标样式。</li> </ol> 实现过程中，有两个比较巧妙的点： <ul> <li>计算宽度的时候，没有使用 JS 计算，而是直接使用了 CSS 的 <code>clamp()</code> 函数，一目了然。</li> <li>为了鼠标移动到可拖拽边界时显示一条蓝色的线，但是又不想改变元素的宽度，所以 <code>resize-bar</code> 元素的使用了 <code>position: absolute</code>，并且设置了 <code>translateX(-50%)</code> 来让其居中显示。当鼠标移入时，通过线性渐变的背景色巧妙地来实现蓝色线条的效果。</li> </ul> 正是因为第二点的实现方式，使得在边界线左右两侧都能拖拽，这一点是优于 VSCode 的，因为 VSCode 只能在左侧拖拽 😂。

架构之基：从根儿上了解设计原则

2024-06-09 02:24:31

本文节选自 奔波儿灞取经 的《<a href="https://juejin.cn/book/7196580339181944872"target="_blank" rel="external nofollow noopener noreferrer">程序员的必修课</a>》，文中的“我”指原作者奔波儿灞取经。 <hr> <blockquote>设计模式不是必须的，但是如果你的代码是“非一次性的”，那么它就是必须的。 </blockquote>对于大多数开发者来说，代码都是需要维护的，而不是写一遍就放起来不管了。既然需要维护，就要不断地读读改改，那就不是一次性的，那么怎么让他“读读改改”起来方便些呢？嗯，设计模式！ 设计模式切记不要死记硬背，不要生搬硬套，否则不如不学。而且不要一上来就说：要用 xxx 模式！需求还没出，你猴急个锤子，难不成是你刚学会这个模式，想拿来练练手，就想把它硬塞到需求里去吗？ 那么，如果需求已经出了呢？也别急，先想想，想好了怎么写，选择哪种设计模式；如果没有合适的，套不进去，那就别套了，只要方便维护，就是好的设计，不一定非要去套现有的设计模式。 当然，要想正确地使用设计模式，还是先得透彻地了解了它们。因此，接下来我们就先来了解下设计模式的“祖宗”：六大设计原则。 <h2 id="单一职责原则srp" class="heading-element">1 单一职责原则（SRP） <a href="#%e5%8d%95%e4%b8%80%e8%81%8c%e8%b4%a3%e5%8e%9f%e5%88%99srp" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><blockquote>单一职责原则（Single Responsibility Principle，简称 SRP）：一个类只干一件事。 </blockquote>可以看到，单一职责的核心就是：只做一件事。不过，关键点就是这个“事”的范围不好定义。 比如，写一个音乐播放器，一个类负责播放，一个类负责停止，这也满足单一职责。但是，这个职责太小了。那么，如果把播放、停止、甚至下载歌曲，都塞进一个类里面呢，那就太大了。所以，职责的范围很重要，只要确定好了这个范围，那这个原则就已经实现了 90%。 那么，这个范围怎么确定呢？我们可以这么理解：一些相关的、关联性比较强的，就把它们当作同一种职责，放到一个单独的类（文件）里。 那么，怎么确定是否相关呢？看需求！这个只能看需求，没有别的方法。如果需求没有明确，那么我们就要联系现实来决定，毕竟程序的本质就是模拟现实。 比如，我在 2015 年实习的时候，IBM 公司有个考勤系统，需要添加一个指纹打卡功能。需求是这样的：<code>部门主管以下的员工可以用指纹来打卡</code>。 那么，这个“打卡功能”是属于员工的，是属于打卡器的？换句话说，这个打卡的函数，是写在员工类里面呢，还是写在打卡器类里面呢？需求没说啊。 那么，我们就联系现实来决定。 在现实生活中，应该是一个打卡器放在门口，员工向打卡器录入指纹，来进行打卡，说白了就是：“员工使用打卡器来打卡”，也就是：“员工使用打卡器”“打卡器打卡”，所以，打卡功能是打卡器的，员工只是使用它的这个功能。所以，这个函数应该定义在打卡器里面，员工调用打卡器的这个函数来进行打卡。 如果有人不爽，非要定义在员工类里面呢？你可以这么干。不过，后来需求改变成：非员工，比如保洁人员，也需要每天打卡签到。这时候，那位非常有个性有特色的人，估计脑瓜子嗡嗡的了吧。 单一职责不仅可以用在类（文件）里面，也可以用在函数里面。 比如，现在需要写一个校验函数，校验用户的性别和年龄，必须是 18 岁及以上的男性才有资格，很简单的我们可以这么写： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">public static boolean checkSexAndAge(boolean isMan, int age){ return isMan && age >= 18; }</code></pre></td></tr></table> </div> </div>使用： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">private void login(){ if(checkSexAndAge(false, 17)) { tips("不是 18 岁以上的男性") return; } }</code></pre></td></tr></table> </div> </div>这里有人有意见了，说这样写不太好，因为每个校验的地方都要自己弹出提示，这样就是很多重复的代码，所以提示这个逻辑应该放在<code>checkSexAndAge()</code>这个函数里面去，也就是下面这样： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">public static boolean checkSexAndAge(boolean isMan, int age){ if(isMan && age >= 18) return true; tips("不是 18 岁以上的男性"); return false; }</code></pre></td></tr></table> </div> </div>这样简直美滋滋，任何时候只要直接调<code>checkSexAndAge()</code>就行，判断了还自带提示。这在目前当然是完美的，虽然方法名不太合适。 如果有一天，我们的需求变成了：年龄不满足就开启未成年人保护模式，不需要弹出提示。我们直接删除<code>tips()</code>这个调用吗？这样不太好，如果别的地方也调用了这个方法，并且需要提示，就完了。所以我们应该有两个方法：方法 A 只检测，方法 B 使用 A 的检测结果并弹出提示。代码如下所示： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">// 判断加提示 public static boolean checkAndTips(boolean isMan, int age) { if(!checkSexAndAge(isMan, age)) { tips("不是 18 岁以上的男性"); return false; } return true; } // 新方法，只做逻辑判断 public static boolean checkSexAndAge(boolean isMan, int age){ return isMan && age >= 18; }</code></pre></td></tr></table> </div> </div>这里我们只抽离了一个方法，但是却反映出了单一职责的好处：职责越单一，因为修改而引起的问题就越少。换句话说就是：需求的粒度跟单一职责的优势成正比，需求越详细，越能看出单一职责的好处。所以我们要尽量避免大方法、大类、大模块，因为一个类越大，涉及的东西就越多，用到它的地方就越多，那么这个类就不能轻易修改，因为一旦修改，涉及的地方就越多，就越危险，所以我们一定要尽量避免。其实 MVC 就是一个宏观的、大的单一职责思想。 <blockquote>单一职责不仅适用于类和文件，还适用于函数、模块等，这是一种思想，一定要掌握。 </blockquote><h2 id="里氏置换原则lsp" class="heading-element">2 里氏置换原则（LSP） <a href="#%e9%87%8c%e6%b0%8f%e7%bd%ae%e6%8d%a2%e5%8e%9f%e5%88%99lsp" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><blockquote>里氏置换原则（Liskov Substitution Principle，简称 LSP）：凡是使用基类的地方都必须能透明地使用子类。 </blockquote>用人话说就是：用子类替换父类不会改变原有逻辑。众所周知，面向对象有三大基本原则：封装、继承和多态。子类本来就继承了父类，用到父类的地方替换成子类肯定没问题啊，这个原则不是废话吗，不一定！因为子类有自己的特色，也就是多态，如果这个特色太特色的话，就不适合了。 比如，“我用电脑工作和游戏”，改成“我用苹果电脑工作，用联想电脑打游戏”，没问题！ 但是如果“我开车上班，坐车下班”，改成“我开玩具车上班，坐遥控车下班”，这个可能吗？ 但是，玩具车和遥控车也是“车”的子类啊，它俩也是车啊。 那么这个问题出在哪里呢？明明所有的定义都是 OK 的。这是因为子类太特色了。 我们定义的车，其出发点是“能跑”，也就是说，只要能跑的都是“车”，都是它的子类，所以，玩具车和遥控车都能跑，也都是车的子类。但是，车都能载人吗？猛一看，都能！仔细一想，玩具车不能！所以，我们上述 Demo 中用到的是车的“载人”功能，而不是车的“能跑”功能，所以，玩具车就不合适了。 那么，怎么改呢？有如下两种方法： <ul> <li>提取一个可载人的接口 <code>interface IManned</code>，明确表示哪些车可以载人；</li> <li>提取一个二级父类 <code>class MannedCar</code>，表示该类车可以载人。</li> </ul> 公共点就是：把“可载人”这个点明确出来。 所以，里氏置换更简洁的说法就是：子类可以有自己的特色，但是不能太反常，如果子类的特色跟父类差太多，那么就应该细化父类或者剥离接口。 <blockquote>可以看到，里氏置换原则就是对继承的校验，不恰当的继承关系就不满足里氏置换原则，所以，如果我们无法确定某两个类之间是否应该用继承关系时，就可以套用里氏置换原则来校验下。 </blockquote><h2 id="依赖倒置原则dip" class="heading-element">3 依赖倒置原则（DIP） <a href="#%e4%be%9d%e8%b5%96%e5%80%92%e7%bd%ae%e5%8e%9f%e5%88%99dip" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><blockquote>依赖倒置原则（Dipendence Inversion Principle，简称 DIP）：面向接口编程或面向抽象编程。 </blockquote>依赖倒置的官方定义：高层不应该依赖底层，两者都应该依赖抽象；抽象不应该依赖细节，细节应该依赖抽象。其实狭义的说就是：面向接口编程，广义的说就是：面向抽象编程。也就是说，我们在使用类的时候，优先考虑使用抽象类或接口。具体一点就是：成员变量、函数参数和返回值都尽量定义成接口。 为什么要这么干呢？这么干有什么好处呢？ 我们知道，接口都是抽象的，抽象的就是不确定的，不确定的就是可变的。而我们的大部分代码都是“非一次性的”，也都是需要改变的，所以，接口正合适。 换句话说，接口就是具有某种功能的某种东西，是什么我不管，只要具有这种功能就行，而我们需要的，也就是具有这种功能的东西。 比如，我需要给手机充个电，我需要的是一个“能充电的东西”，而你却对外说：“我需要个充电宝！”如果有人没有充电宝，只有电源呢，他就不认你了。在这里，你把我需要的东西具象化了，也就是把范围缩小了，范围越小越精确，就越不容易改变，这明显是不对的。 再比如，现在我要提供一个音乐播放器，我直接使用移动端的 <code>MediaPlayer</code>，很容易就写出了如下代码： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">class MediaPlayer { public void play(String path) {} public void stop(){} public void pause(){} public void resume(){} }</code></pre></td></tr></table> </div> </div>三分钟就写完了，使用方直接调用： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">class User { private MediaPlayer mediaPlayer; public void play(){ mediaplayer.play("xxx"); } }</code></pre></td></tr></table> </div> </div>完事之后某一天，主管又问：“咱们的播放器不好用，能用那个开源的吗？” 当然可以，于是就去改，但是发现，要改的地方太多了，我不但要改<code>MedidPlayer</code>这个类，甚至调用我播放器的人也需要改他的<code>User</code>类，我在别人眼里的段位又低了！ 这时候就应该反思了，其实<code>User</code>这个类，不在乎你的播放器是怎么写的，它只关心能不能播放、停止、暂停、恢复，说白了，它要的是一个具有这种功能的某种东西，而不是具有这种功能的这种东西。 好，上接口！ <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">interface IPlayer { void play(String path); void stop(); void pause(); void resume(); }</code></pre></td></tr></table> </div> </div><code>User</code>使用： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">class User { private IPlayer player; public void play(){ player.play("xxx"); } }</code></pre></td></tr></table> </div> </div>此时<code>User</code>只依赖于<code>IPlayer</code>，而不依赖具体的实现。不管你是啥，只要具有播放器的功能就行，后面不管你怎么改变<code>IPlayer</code>的实现，<code>User</code>都不需要改变。 所以，我们可以看到面向接口的好处：低耦合，易拓展。因为接口是抽象的，依赖接口就是依赖抽象，不依赖细节，所以实现的细节怎么改都对我无影响，所以耦合就低；又因为接口是顶层的，就更容易拓展下层的细节实现。 <h2 id="接口隔离原则isp" class="heading-element">4 接口隔离原则（ISP） <a href="#%e6%8e%a5%e5%8f%a3%e9%9a%94%e7%a6%bb%e5%8e%9f%e5%88%99isp" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><blockquote>接口隔离原则（Interface Segregation Principle，简称 ISP）：接口尽量小，尽量单一，说白了就是接口粒度要细。 </blockquote>接口隔离要求接口的功能要单一，这听起来怎么就是单一职责原则呢，它们有区别吗？ 有！ 单一职责原则针对的是“职责”，说白了就是功能块，一个职责可能有多个功能；接口隔离原则针对的是“功能”，也就是一个接口只负责一个“功能”，比如，老师的职责是讲课和改作业，如果用单一职责原则就是一个接口里面包含了讲课和改作业这两个方法；如果用接口隔离原则就是两个接口，一个讲课的接口和一个改作业的接口。换句话说就是：接口隔离原则是单一职责的单一职责原则。 举个例子，还是音乐播放器，我们定义了一个接口： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">interface IPlayer { //开始 void play(String url); //停止 void stop(); //暂停 void pause(); //复原 void resume(); //获取歌曲时长 String getSongTime(); }</code></pre></td></tr></table> </div> </div>这正是单一职责原则，因为这个接口只定义了音乐播放相关的东西，但是却不满足接口隔离原则，因为一个接口干了多件事，假如我们现在有个歌曲展示器<code>SongDisplayer</code>，只需要展示歌曲的时长，也就是只需要<code>getSongTime()</code>这个函数，我们让它直接实现<code>IPlayer</code>接口吗？肯定不行！因为里面的其他函数是不需要的，也不应该有的。这就要用到接口隔离原则了，我们直接将<code>IPlayer</code>接口再进行拆分，如下： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">//音乐播放器就仅限于对播放的控制 interface IPlayer { //开始 void play(String path); //停止 void stop(); //暂停 void pause(); //复原 void resume(); ... } //歌曲展示器就仅限于对歌曲信息的展示 interface ISongDisplayer { //获取歌曲时长 String getSongTime(); //获取歌曲名字 String getSongName(); //其他 ... }</code></pre></td></tr></table> </div> </div>这样拆分后，我们的播放器就同时实现上面两个接口，而歌曲展示器只需要实现<code>ISongDisplayer</code>即可。 但是，我们根本不知道将来会出什么样的需求，怎么能提前预测并做好接口隔离呢？ 不需要提前做！因为接口隔离更多时候是个后置操作，说白了，更多时候是在问题发生的时候再去拆接口，所以是个后置操作，就像我们上面的修改，也没费多大劲，顶多就是多写一个接口，复制一部分代码，修改几个实现关系而已，根本没动业务上的代码，所以不必纠结，大多时候我们保证单一职责即可。 <blockquote>总之一句话：接口要尽量小，尽量单一。 </blockquote><h2 id="最少知识原则lkp" class="heading-element">5 最少知识原则（LKP） <a href="#%e6%9c%80%e5%b0%91%e7%9f%a5%e8%af%86%e5%8e%9f%e5%88%99lkp" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><blockquote>最少知识原则（Least Knowledge Principle，简称 LKP），也叫迪米特法则（LOD）：一个对象应该对其他对象有最少的了解，说白了就是，只关联自己需要的。 </blockquote>就像语文老师，只关心语文成绩即可，非要关心数学，怪不得头发都掉光了。 废话不说，我们来看个 Demo，又是那个音乐播放器，原本应该是这样的： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">interface IPlayer { void play(String path) .... } class User { .... void play(){ player.play(song.path); } .... } class Song { public String path; public String name; .... }</code></pre></td></tr></table> </div> </div>可以看到，播放时，只需要一个<code>path</code>即可。但是有人聪明，我直接把<code>Song</code>给他传过去不行吗？这样后面万一需要<code>Song</code>里面的其他变量，比如<code>name</code>啥的，我也不用改函数了，好有道理啊！ 突然有一天，要求可以播放用户通过聊天发送过来的歌曲，这个歌曲没有名字，点击就下载到本地，只有一个路径了，这个时候你怎么办呢？你当然可以用这个路径去创建一个<code>Song</code>然后丢进去，但是这样绕了一圈不就增加了复杂度吗？再万一将来某天要修改<code>Song</code>这个类呢，你的播放器也跟着修改了。 其实，播放器需要的只是一个播放的路径，至于其他的，它根本不关心。如果真的需要，你再提供，但也只需要提供它需要的，不要有任何附加内容。否则，一旦那些附加内容变化了，也间接导致播放器自身的变化，这是不应该的。 <blockquote>我们应该只关联自己直接用到的，而不关联那些不需要的，如此一来，那些发生在我们关联范围外的事，就不会引起我们的任何改变，这样就大大提升了代码的健壮性。 </blockquote><h2 id="开放闭合原则ocp" class="heading-element">6 开放闭合原则（OCP） <a href="#%e5%bc%80%e6%94%be%e9%97%ad%e5%90%88%e5%8e%9f%e5%88%99ocp" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><blockquote>开放闭合原则（Open Close Principle，简称 OCP）：一个类应该对扩展开放，对修改关闭。换句话说就是：应该多扩展代码，少修改代码。 </blockquote>开闭原则是最理想的原则，是所有设计模式的最终目标，基本不可能实现。它要求我们的任何改动都不修改老代码，而只添加新代码，这样就不会对老逻辑有任何影响，从而使得代码更加安全。 有人说，我们的代码不是一次性的，肯定是要修改的，怎么可能不修改呢？没错，肯定是需要修改的，但是合理运用开闭原则可以做到少修改，改得越少风险越小。 举个例子，比如我在面试百度的时候，要手写一个计算器，只需要支持简单的加减法就行，如下： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 9 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">public class Calculator { public static int calculate(int left, int right, String option) { //加法 if("+".equals(option)) return left + right; //减法 if("-".equals(option)) return left - right; throw new IllegalArgumentException("不支持的运算"); } }</code></pre></td></tr></table> </div> </div>代码简单粗暴，直接使用<code>if</code>判断就完事。但是，如果将来要支持其他运算呢？嗯，继续添加<code>if</code>分支？可以，但是不太好，谁能保证你下次添加别的运算符的时候，不会手残改了别的运算呢？那么，我们能不能将新的运算不放在这个类里面呢？可以！ 我们可以将每个运算定义成一个单独的类型，后面新增其他运算，只需要新加一个类就可以了。我们知道，基本的数学运算都是需要两个操作数和一个运算符的，我们可以定义一个公有的父类，来保存操作数和运算符。 定义公共父类： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">public abstract Calculator { // 左操作数 protected String leftOpt; // 右操作数 protected String rightOpt; // 操作符 protected String operator; // 设置左操作数 public void setLeftOpt(String leftOpt) { this.leftOpt = leftOpt; } // 设置右操作数 public void setRightOpt(String rightOpt) { this.rightOpt = rightOpt; } // 计算，提供一个模板函数，供子类实现 protected abstract int calculate(); // 对外公开的获取结果的 Api public String getResult(){ // 计算结果 String result = calculate(); // 清空操作数 clear(); // 返回结果 retrun result; } //清空操作数 public void clear(){ leftOpt = null; rightOpt = null; } }</code></pre></td></tr></table> </div> </div>加法器： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-java" data-lang="java">public class PlusCalculator extends Calculator { public static String OPERATOR = "+"; public PlusCalculator() { super(); this.operator = OPERATOR; } // 加法 @Override public String calculate() { return String.valueOf(Integer.parseInt(leftOpt) + Integer.parseInt(rightOpt)); } }</code></pre></td></tr></table> </div> </div>减法器： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">public class SubCalculator extends Calculator { public static String OPERATOR = "-"; public SubCalculator() { super(); this.operator = OPERATOR; } // 减法 @Override public String calculate() { return String.valueOf(Integer.parseInt(leftOpt) - Integer.parseInt(rightOpt)); } }</code></pre></td></tr></table> </div> </div>这里我们为不同的运算符提供了不同的实现类，每个类只负责自己的计算逻辑，如果将来有其他新运算加入，我们直接再添加一个新的类即可，完全不需要修改其他类的代码。 而且我们可以看到，开闭原则中用到了单一职责（每个类只做自己的运算），还用到了最少知识（每个类只关心自己的操作数和运算符），其实就是一句话：越单纯，越干净，越好！ 因为这样自己的责任就越少，就越不容易被牵连，也就越稳定，越安全。 <h2 id="设计模式" class="heading-element">7 设计模式 <a href="#%e8%ae%be%e8%ae%a1%e6%a8%a1%e5%bc%8f" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><blockquote>该小节非原文内容，仅为个人补充。 </blockquote>在掘金上有一个不错的专栏<a href="https://juejin.cn/column/7069912176978296839"target="_blank" rel="external nofollow noopener noreferrer">「手撕设计模式」</a>，里面详细介绍了 23 种设计模式中的好几种，可以作为进一步学习的参考。 <h2 id="总结" class="heading-element">8 总结 <a href="#%e6%80%bb%e7%bb%93" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>本节我们从宏观层面讲解了六大设计原则，这是 23 种设计模式的祖宗，或者说：设计模式就是这六大设计原则的具体实现，六大设计原则就是设计模式的抽象。 对于设计模式，我认为正确的学习顺序是： <ol> <li>学习设计原则，这是对设计思想的宏观认识。</li> <li>学习设计模式，这是对设计思想的具体认识。</li> <li>再学习设计原则，这是对设计思想的自我抽象。</li> </ol> 这就像我们看书的时候，先看目录，对整本书有个宏观的认识；然后仔细看每一章节，对每个模块进行具体了解；最后，也是最难的一点，就是：用自己的语言对整本书进行整体概括，然后尝试列出目录，这是对整本书的自我升华，或者叫自我抽象，这样，我们才能读到书的精髓。学习设计模式亦是如此，我们切记不要死记硬背，不要生搬硬套，不刻意设计的设计才是最好的设计。

怎么生成暗黑模式和明亮模式的 SVG 图片？

2024-06-06 22:13:26

在做博客顶部栏下落奶油图的时候，就在想怎么适配暗黑模式和明亮模式呢？本文将记录两个思路。 <h2 id="方案一通过模板生成两张图片" class="heading-element">1 方案一：通过模板生成两张图片 <a href="#%e6%96%b9%e6%a1%88%e4%b8%80%e9%80%9a%e8%bf%87%e6%a8%a1%e6%9d%bf%e7%94%9f%e6%88%90%e4%b8%a4%e5%bc%a0%e5%9b%be%e7%89%87" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>这是最容易想到的，也是我最初的想法，通过两张图片来实现暗黑模式和明亮模式的切换。 假设我们已经有了两张图片，<code>drop.min.svg</code> 和 <code>drop-dark.min.svg</code>，那么我们可以通过 CSS 来实现切换： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">#header-desktop { &::after { background-image: url(/images/drop.min.svg); } [data-theme='dark'] & { background-image: url(/images/drop-dark.min.svg); } }</code></pre></td></tr></table> </div> </div>再创建一个模板文件 <code>drop.template.svg</code>： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template">{{- $color := cond .isDark "#252627" "#e6e5f8" -}} <svg viewBox="0 0 778.95 302.64" xmlns="http://www.w3.org/2000/svg"> <path d="m28 14.56h778.71c-8.44 1.45-18.8 3-29.06 5-13.35 2.63-25.55 8.28-37.25 15-9.4 5.44-15.62 13.66-19.51 23.52-8.79 22.33-10 45.36-6 68.89 2.21 13.09 4.06 26.26 5.47 39.45a36.37 36.37 0 0 1 -1.59 13.5c-1.76 6.12-6.65 9.46-12 9.4s-9.52-3.32-11.77-9.32c-3.27-8.7-3.39-17.75-2-26.7 3-18.85 5.71-37.7 4.73-56.86a46.33 46.33 0 0 0 -1.6-9.56c-1.36-5.06-3.63-9.74-9.74-10s-10.86 2.71-13.77 8.06c-5 9.18-5.52 19.16-4.79 29.32.76 10.6 2 21.21 2 31.81 0 5.9-1.82 11.95-3.68 17.65s-6.11 8.1-11.52 7.92c-5-.17-8.76-3.08-10.72-8.53-2.42-6.69-1.42-13.44 0-20.13 2.61-12 5.78-23.85 7.89-35.92 2.43-13.92 3.11-27.94-2.19-41.55-4.23-10.85-14.09-12.81-21.12-3.56a61.82 61.82 0 0 1 -18.93 16.39c-3.95 2.27-7.46 5.32-11.13 8.07-7.31 5.46-13.69 4.33-18.88-3.22-5.52-8-9-16.89-11.55-26.27a56.4 56.4 0 0 0 -4.49-12c-3.1-5.81-9.92-6.05-12.45-.07a62 62 0 0 0 -4.39 18.75c-1.64 19.65 3.05 38.79 5.56 58.1.68 5.24.44 10.61.49 15.92a10.44 10.44 0 0 1 -.83 3.43c-1.68 4.76-5.19 7.58-9 7.29s-7.57-4-7.63-9.07c-.09-7.8.77-15.61 1-23.42s.69-15.38.32-23c-.19-3.87-1.42-8.17-6.18-9.32a8.82 8.82 0 0 0 -10.4 5.05c-3 6.5-6.06 13.34-7.05 20.33-3.34 23.67-2.93 47.47-.37 71.23 2.06 19.08 4.48 38.13 6.07 57.25 1.1 13.29.43 26.63-3.49 39.55a30.52 30.52 0 0 1 -3.69 8c-4.75 7.12-13 7.49-18.15.65a28.17 28.17 0 0 1 -4.42-9.55c-4.22-15.75-3.16-31.62-.46-47.48 4.92-29 11.36-57.79 9.32-87.49-.87-12.69-3.56-24.86-11.22-35.45-5.59-7.73-12.08-10.24-20.8-6.34-8 3.55-15.42 4.52-24 2.25-8.4-2.23-16.74 3.72-20.65 13.16-4.89 11.8-4.15 24-2.15 36.22 1.35 8.29 3.32 16.52 1.46 25-1.65 7.55-5.75 12.08-11.15 11.76s-9.66-5.63-9-13.27c.81-9.36 2.87-18.62 4.68-27.87 2-10.34 4.32-20.77 2-31.18-1.3-5.86-4.33-11.49-7.4-16.74-1.31-2.25-4.51-3.84-7.19-4.76-6.55-2.24-11.76 1.36-11.86 8.29-.07 4.84.91 9.68 1.25 14.54a73 73 0 0 1 .33 11.91c-.55 5.75-4.3 9.55-9.36 10.42-4.85.83-10.69-2-12.48-7.22a27 27 0 0 1 -1.22-12c1.62-11.68 4.51-23.21 5.7-34.92.64-6.26-.52-13-2.12-19.14-1.86-7.18-9.18-10.05-16-7a53.2 53.2 0 0 0 -8.63 5.33c-2.77 2-5.25 4.35-8 6.35-7 5.13-11.33 4.93-18.63.1-3.4-2.25-7.09-4.61-11-5.49-14.83-3.34-25.13 5.83-25.77 22.26-.71 18.29.73 36.32 5.61 54 1.64 6 .52 11.74-2.34 17.18-3.89 7.4-9.56 10.74-15.92 9.39-5.95-1.27-11.29-7.9-11-15.5.35-9 2-17.87 2.82-26.83.58-6.59 1.46-13.31.8-19.83-1-10.3-8.28-14.9-18.33-12.24-14.63 3.87-24.42 11.86-27.78 28-4.53 21.8-3.6 43.53-2.49 65.36 1.36 26.85 9.17 52.61 13.89 78.9 2.22 12.38 3.17 25.1-1.34 37.26-1.46 3.94-4.1 8.12-7.4 10.58-10 7.42-22.1 2.86-23.9-9.4a110.27 110.27 0 0 1 -.57-30c3.9-29.74 9.37-59.37 8-89.47-1-22.07-1.74-44.34-8.78-65.68-3.29-10-8.3-18.25-18-23.72-5.32-3-9.91-7.88-13.77-12.76-4-5.1-8.66-8-15-7.87a52.19 52.19 0 0 0 -11 1c-14 3.26-23.37-3.18-30.62-14.24-2.06-3.41-3.85-7.19-6.43-10.41-15-18.79-35-29.58-58.16-34.93-1.69-.39-3.39-.76-5.08-1.13z" transform="translate(-27.76 -14.56)" /> </svg></code></pre></td></tr></table> </div> </div>然后，我们可以通过 Hugo 的模板引擎来生成两张图片： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template">{{- $template := resources.Get "images/drop.template.svg" -}} {{- $resource := ($template | resources.ExecuteAsTemplate "images/drop.svg" (dict "isDark" false) | minify).RelPermalink -}} {{- $resourceDark := ($template | resources.ExecuteAsTemplate "images/drop-dark.svg" (dict "isDark" true) | minify).RelPermalink -}}</code></pre></td></tr></table> </div> </div>这样，我们就得到了暗黑模式和明亮模式的两张图片，正如现在博客所看到的一样。 <h2 id="方案二通过-css-实现响应式" class="heading-element">2 方案二：通过 CSS 实现响应式 <a href="#%e6%96%b9%e6%a1%88%e4%ba%8c%e9%80%9a%e8%bf%87-css-%e5%ae%9e%e7%8e%b0%e5%93%8d%e5%ba%94%e5%bc%8f" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>然后，我在想这两张图除了背景色，其他都一毛一样，能不能通过 CSS 来实现呢？ 一番尝试过后，答案是肯定的。 假设我们只有一张图片，<code>drop.responsive.svg</code>，还是通过 CSS 来实现切换： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 6 7 8 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">#header-desktop { &::after { background-image: url(/images/drop.responsive.svg); } [data-theme='dark'] & { background-image: url(/images/drop.responsive.svg#drop-dark-only); } }</code></pre></td></tr></table> </div> </div>再创建一个 SVG 文件 <code>drop.responsive.svg</code>： <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-svg" data-lang="svg"><svg id="drop-dark-only" viewBox="0 0 778.95 302.64" xmlns="http://www.w3.org/2000/svg"> <style> #header-drop { fill: #e6e5f8; } #drop-dark-only:target #header-drop { fill: #252627; } </style> <path id="header-drop" d="m28 14.56h778.71c-8.44 1.45-18.8 3-29.06 5-13.35 2.63-25.55 8.28-37.25 15-9.4 5.44-15.62 13.66-19.51 23.52-8.79 22.33-10 45.36-6 68.89 2.21 13.09 4.06 26.26 5.47 39.45a36.37 36.37 0 0 1 -1.59 13.5c-1.76 6.12-6.65 9.46-12 9.4s-9.52-3.32-11.77-9.32c-3.27-8.7-3.39-17.75-2-26.7 3-18.85 5.71-37.7 4.73-56.86a46.33 46.33 0 0 0 -1.6-9.56c-1.36-5.06-3.63-9.74-9.74-10s-10.86 2.71-13.77 8.06c-5 9.18-5.52 19.16-4.79 29.32.76 10.6 2 21.21 2 31.81 0 5.9-1.82 11.95-3.68 17.65s-6.11 8.1-11.52 7.92c-5-.17-8.76-3.08-10.72-8.53-2.42-6.69-1.42-13.44 0-20.13 2.61-12 5.78-23.85 7.89-35.92 2.43-13.92 3.11-27.94-2.19-41.55-4.23-10.85-14.09-12.81-21.12-3.56a61.82 61.82 0 0 1 -18.93 16.39c-3.95 2.27-7.46 5.32-11.13 8.07-7.31 5.46-13.69 4.33-18.88-3.22-5.52-8-9-16.89-11.55-26.27a56.4 56.4 0 0 0 -4.49-12c-3.1-5.81-9.92-6.05-12.45-.07a62 62 0 0 0 -4.39 18.75c-1.64 19.65 3.05 38.79 5.56 58.1.68 5.24.44 10.61.49 15.92a10.44 10.44 0 0 1 -.83 3.43c-1.68 4.76-5.19 7.58-9 7.29s-7.57-4-7.63-9.07c-.09-7.8.77-15.61 1-23.42s.69-15.38.32-23c-.19-3.87-1.42-8.17-6.18-9.32a8.82 8.82 0 0 0 -10.4 5.05c-3 6.5-6.06 13.34-7.05 20.33-3.34 23.67-2.93 47.47-.37 71.23 2.06 19.08 4.48 38.13 6.07 57.25 1.1 13.29.43 26.63-3.49 39.55a30.52 30.52 0 0 1 -3.69 8c-4.75 7.12-13 7.49-18.15.65a28.17 28.17 0 0 1 -4.42-9.55c-4.22-15.75-3.16-31.62-.46-47.48 4.92-29 11.36-57.79 9.32-87.49-.87-12.69-3.56-24.86-11.22-35.45-5.59-7.73-12.08-10.24-20.8-6.34-8 3.55-15.42 4.52-24 2.25-8.4-2.23-16.74 3.72-20.65 13.16-4.89 11.8-4.15 24-2.15 36.22 1.35 8.29 3.32 16.52 1.46 25-1.65 7.55-5.75 12.08-11.15 11.76s-9.66-5.63-9-13.27c.81-9.36 2.87-18.62 4.68-27.87 2-10.34 4.32-20.77 2-31.18-1.3-5.86-4.33-11.49-7.4-16.74-1.31-2.25-4.51-3.84-7.19-4.76-6.55-2.24-11.76 1.36-11.86 8.29-.07 4.84.91 9.68 1.25 14.54a73 73 0 0 1 .33 11.91c-.55 5.75-4.3 9.55-9.36 10.42-4.85.83-10.69-2-12.48-7.22a27 27 0 0 1 -1.22-12c1.62-11.68 4.51-23.21 5.7-34.92.64-6.26-.52-13-2.12-19.14-1.86-7.18-9.18-10.05-16-7a53.2 53.2 0 0 0 -8.63 5.33c-2.77 2-5.25 4.35-8 6.35-7 5.13-11.33 4.93-18.63.1-3.4-2.25-7.09-4.61-11-5.49-14.83-3.34-25.13 5.83-25.77 22.26-.71 18.29.73 36.32 5.61 54 1.64 6 .52 11.74-2.34 17.18-3.89 7.4-9.56 10.74-15.92 9.39-5.95-1.27-11.29-7.9-11-15.5.35-9 2-17.87 2.82-26.83.58-6.59 1.46-13.31.8-19.83-1-10.3-8.28-14.9-18.33-12.24-14.63 3.87-24.42 11.86-27.78 28-4.53 21.8-3.6 43.53-2.49 65.36 1.36 26.85 9.17 52.61 13.89 78.9 2.22 12.38 3.17 25.1-1.34 37.26-1.46 3.94-4.1 8.12-7.4 10.58-10 7.42-22.1 2.86-23.9-9.4a110.27 110.27 0 0 1 -.57-30c3.9-29.74 9.37-59.37 8-89.47-1-22.07-1.74-44.34-8.78-65.68-3.29-10-8.3-18.25-18-23.72-5.32-3-9.91-7.88-13.77-12.76-4-5.1-8.66-8-15-7.87a52.19 52.19 0 0 0 -11 1c-14 3.26-23.37-3.18-30.62-14.24-2.06-3.41-3.85-7.19-6.43-10.41-15-18.79-35-29.58-58.16-34.93-1.69-.39-3.39-.76-5.08-1.13z" transform="translate(-27.76 -14.56)" /> </svg></code></pre></td></tr></table> </div> </div>注意，这个图片没有任何模板执行的内容，只是一个 SVG 图片，那我们就可以拿来直接使用了，例如： <table> <thead> <tr> <th style="text-align: center">主题</th> <th style="text-align: center">图片</th> </tr> </thead> <tbody> <tr> <td style="text-align: center">明亮</td> <td style="text-align: center"><a href="https://lruihao.cn/images/drop.responsive.svg">light image</a></td> </tr> <tr> <td style="text-align: center">暗黑</td> <td style="text-align: center"><a href="https://lruihao.cn/images/drop.responsive.svg#drop-dark-only">dark image</a></td> </tr> </tbody> </table> 但是！这个方案有一个缺点，在 Safari 浏览器下，切换时会出现卡顿，不够丝滑。 唉，真实遗憾，所以还是继续使用方案一了。

利用 Vercel 反代 Gravatar 实现镜像加速

2024-04-17 12:51:35

在开发和部署网站时，经常会遇到加载外部资源较慢的问题。其中之一就是加载 Gravatar 头像图片时可能会受到网络延迟的影响。为了解决这个问题，我们可以利用 Vercel 平台的反向代理功能来实现镜像加速。 <h2 id="思路" class="heading-element">1 思路 <a href="#%e6%80%9d%e8%b7%af" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><ol> <li>解析请求的 URL，并将其 host 修改为我们要代理的目标域名（这里是 <code>www.gravatar.com</code>）。</li> <li>获取原始请求的方法、头部信息，并创建一个新的请求头部对象。</li> <li>将新请求头部对象中的 Host 字段设置为目标域名，并将 Referer 字段设置为原始请求的 URL。</li> <li>使用修改后的 URL、方法和头部信息发送请求到目标域名。</li> <li>获取原始响应的状态码、头部信息和响应体，并克隆原始响应对象。</li> <li>检查请求的 Referer 来源域名是否合法，如果不合法则返回一个 403 Forbidden 的响应。</li> <li>设置新的响应头部信息，包括允许的请求方法、请求头部和缓存控制策略。</li> <li>构造最终的响应对象，其中响应体为原始响应的内容，状态码和头部信息为修改后的值。</li> <li>返回最终的响应对象。</li> </ol> 安装上面的思路，理论上我们可以反代任何一个网站，并且支持设置 CORS 策略。GitHub 上也有类似的项目，比如 <a href="https://github.com/gaowanlu/google"target="_blank" rel="external nofollow noopener noreferrer">https://github.com/gaowanlu/google</a>. <blockquote>当然，网络不是非法之地，不要滥用这个功能反代一些不合法的网站哦。 </blockquote><h2 id="实现" class="heading-element">2 实现 <a href="#%e5%ae%9e%e7%8e%b0" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><img alt="Lruihao gravatar" src="https://gravatar.lruihao.cn/avatar/fee47a2f4f2cc71f99a02b0a73ecfee0?s=128" /> ⬆️ <code>https://gravatar.lruihao.cn/avatar/fee47a2f4f2cc71f99a02b0a73ecfee0?s=64</code> 实现 API 代码： <div class="highlight" title="api/gravatar.js"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js">const allowedReferrers = [ "lruihao.cn", "gravatar-x.vercel.app", "-lrh-dev.vercel.app", "-cell-x.vercel.app", "localhost", ]; const upstream = "www.gravatar.com"; /** * whether the hostname is allowed * @param {String} hostname * @returns */ function isAllowedHost(hostname) { const regExp = new RegExp(allowedReferrers.join("|"), "g"); // if hostname matches allowed referrers if (!hostname || regExp.test(hostname)) { return true } for (const referrer of allowedReferrers) { // if hostname ends with allowed referrers if (hostname.endsWith(referrer)) { return true } } return false } async function fetchAndApply(request) { let response = null; let url = new URL(request.url); url.host = upstream; let method = request.method; let request_headers = request.headers; let new_request_headers = new Headers(request_headers); new_request_headers.set("Host", upstream); new_request_headers.set("Referer", url.href); let original_response = await fetch(url.href, { method: method, headers: new_request_headers, }); let original_response_clone = original_response.clone(); let original_text = null; let response_headers = original_response.headers; let new_response_headers = new Headers(response_headers); let status = original_response.status; const hostname = (() => { try { return new URL(request.headers.get("Referer")).hostname; } catch (e) { return ""; } })(); if (!isAllowedHost(hostname)) { return new Response(`403 Forbidden: ${hostname}`, { headers: { "Content-Type": "text/html" }, status: 403, statusText: "Forbidden", }); } // new_response_headers.set("access-control-allow-origin", "https://lruihao.cn"); new_response_headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); new_response_headers.set("Access-Control-Allow-Headers", "Content-Type"); new_response_headers.set( "Cache-Control", "max-age=600, s-maxage=2592000, stale-while-revalidate" ); new_response_headers.delete("link"); original_text = original_response_clone.body; response = new Response(original_text, { status, headers: new_response_headers, }); return response; } export const config = { runtime: "experimental-edge", }; export default function (req) { return fetchAndApply(req); }</code></pre></td></tr></table> </div> </div>配置 <code>vercel.json</code> 文件： <div class="highlight" title="vercel.json"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code>1 2 3 4 5 </code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json">{ "rewrites": [ { "source": "/avatar/(.*)", "destination": "api/gravatar" } ] }</code></pre></td></tr></table> </div> </div>最后部署到 Vercel 平台即可。 <h2 id="源码" class="heading-element">3 源码 <a href="#%e6%ba%90%e7%a0%81" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><div class="gh-repo-card-container single"> <div class="gh-repo-card"> <div class="repo-card-content"> <div class="repo-name"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo mr-1 color-fg-muted"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> <a href="https://github.com/Lruihao/vercel-gravatar" class="repo-url" title="Lruihao/vercel-gravatar" target="_blank"> Lruihao/vercel-gravatar </a>Public </div>Gravatar Proxy powered by Vercel JavaScript <a href="https://github.com/Lruihao/vercel-gravatar/stargazers" title="1 stars" class="repo-stars" target="_blank"> <svg aria-label="stars" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg>1</a><a href="https://github.com/Lruihao/vercel-gravatar/forks" title="1 forks" class="repo-forks" target="_blank"> <svg aria-label="forks" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg>1</a> </div> </div> </div>

临时决定再写一个小工具 - 网站预览图生成器

2024-04-04 13:23:37

<img src="https://lruihao.cn/projects/apple-devices-preview/images/cover.webp" alt="featured image" referrerpolicy="no-referrer">开发完 <a href="https://github.com/Lruihao/CoverView"target="_blank" rel="external nofollow noopener noreferrer">CoverView</a>之后，在调整博客文章封面图的时候，我发现首页的多端缩略图还是只能自己 P 图诶，于是我又决定再写一个小工具，用来生成网站预览图。。 <h2 id="在线体验" class="heading-element">1 在线体验 <a href="#%e5%9c%a8%e7%ba%bf%e4%bd%93%e9%aa%8c" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><ul> <li><a href="https://lruihao.github.io/vue-el-demo/#/apple-devices-preview"target="_blank" rel="external nofollow noopener noreferrer">vue-el-demo#apple-devices-preview</a></li> <li><a href="https://github.com/Lruihao/vue-el-demo/blob/main/src/views/apple-devices-preview.vue"target="_blank" rel="external nofollow noopener noreferrer">源码</a></li> </ul> <h2 id="实现原理" class="heading-element">2 实现原理 <a href="#%e5%ae%9e%e7%8e%b0%e5%8e%9f%e7%90%86" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>实现原理很简单，就是先写好布局，然后每个设备里面套一个 iframe，然后通过 iframe 的 <code>src</code> 属性来加载网页。 <h2 id="卡壳点" class="heading-element">3 卡壳点 <a href="#%e5%8d%a1%e5%a3%b3%e7%82%b9" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2><ul> <li>iframe 存在跨域问题。</li> <li>在将 DOM 转图片的时候，iframe 里面的内容无法转换，尝试了 <code>html2canvas</code> 和 <code>dom-to-image-more</code> 都不行，放弃了，改为用浏览器插件 <code>Fireshot</code> 截图。</li> </ul> 一个未尝试的思路，如果跨域问题得以解决，转换图片的步骤可以分解为： <ol> <li>拿到每个 iframe 里的 body 内容，转为图片，然后将图片相对定位到对应的设备 iframe 里</li> <li>隐藏原来的 iframe</li> <li>最后将父容器的 DOM 转为图片</li> </ol> <h2 id="效果图" class="heading-element">4 效果图 <a href="#%e6%95%88%e6%9e%9c%e5%9b%be" class="heading-mark"> <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </a> </h2>输入不同设备的 URL，选择背景颜色，点击预览，然后自行截图即可，比如用 <code>Fireshot</code> 插件捕获可见区域。 <a class="lightgallery" href="https://lruihao.cn/projects/apple-devices-preview/images/screenshot.webp?size=large" data-thumbnail="/projects/apple-devices-preview/images/screenshot.webp?size=small" data-sub-html="<h2>screenshot</h2>"><img loading="lazy" src="https://lruihao.cn/projects/apple-devices-preview/images/screenshot.webp" alt="screenshot" srcset="https://lruihao.cn/projects/apple-devices-preview/images/screenshot.webp?size=small, https://lruihao.cn/projects/apple-devices-preview/images/screenshot.webp?size=medium 1.5x, https://lruihao.cn/projects/apple-devices-preview/images/screenshot.webp?size=large 2x" data-title="screenshot" style="--width: 2878px;--aspect-ratio: 2878 / 1506;background: url(/images/loading.min.svg) no-repeat center;" onload="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}this.dataset.lazyloaded='';" onerror="this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}"/></a>

关于 李瑞豪

李瑞豪 RSS 预览

关于李瑞豪