如题，如何使用数据可视化库 D3 绘制折线统计图？

这篇文章将通过实例来讲解如何一步一步绘制下面这样一个折线统计图，并带有鼠标悬浮移动的文字显示效果。

首先，我们来看下什么是 d3？移步官网：https://d3js.org

在使用 Docusaurus 搭建文档站点的时候，我们经常要给某个侧边栏菜单增加一些醒目的标识，比如针对新创建的文档给它一个 New 的标识， 以提醒过来看文档的用户这是一个新增加项或者新特性（阅读的时候不要遗漏）。

然而这个功能是 Docusaurus 本身没有的，但是它向我们提供了定制改造的支持。就是这个 Swizzling 特性。

纯静态网站或博客，由于没有数据存储功能，经常借助第三方的评论系统以插件的方式集成进来，而又以 Github 的 Discussions 和 Issues 功能实现的居多。

• giscus - 可借助组件库在 React、Vue 和 Svelte 中使用，支持多种语言
• gitalk - 基于 Github Issue 和 Preact 开发的评论插件
• utterances - 借助 Github issues 实现的轻量的评论组件，giscus 灵感就是来源于它

本站采用的是 Giscus 的方案。UI 风格我很喜欢，简介清爽。色调也和我的网站很搭。

一直认为 Docusaurus 默认的博客文章页面太过单调，可能对于只是在网上找一地方单纯记录文字的人来说已经够了。但是我是把它打造成一个用户体验很棒的知识分享产品来打造。

首先我们来看看一个好的博客或者也可以扩大点范围叫 Web 信息资讯类产品都有哪些功能？

• 社交平台转发分享
• 点赞，鼓励
• 评论互动
• 快速复制文章链接
• 二维码扫描手机端阅读

还有一个我觉得很好的最近几年才在各大产品频繁出现的文字的收听功能，比如微信公众号的“听全文”，国外的 Medium 也有播放音频。好处很多，对于很多不愿意或者不方便看文字的人来说他可以通过另外一条途径 来了解你分享的东西。

如题，要实现树叶在风中摇摆的动画，首先准备主体：树叶。

这里准备了两张矢量的高清版 SVG 格式的不同种类的树叶。

2023年只剩下最后一周，又到了一年一度该做年末总结的时候了。

回想起去年，还有人专门建立了一个关于年度总结文章汇总的仓库。读了很多篇别人写的，给了我很多的触动和感想。这里的每篇文章都是关于某个人这一整年的生活和工作的轨迹啊。 即使你这一年过的再平凡，也能从别人的视角窥见一种完全不一样的生活图景。

仓库的地址：https://github.com/saveweb/review-2022，该仓库接受投稿。

所以想想今年还是下笔了~

当你在浏览网页的时候，您可能经常会遇到这样一种类型的布局。它被称为便当网格布局，这种布局的灵感来源于日本的传统便当盒子 🍱。英文名为 Bento ，所以又叫 Bento Grid。

Bento 网格用途广泛，非常适合显示图像、文本、混合媒体等各种内容。它们以紧凑且有组织的方式展示大量内容，使您的网页或应用程序界面看起来干净清爽且能快速抓住人的眼球。

这种设计的趋势被认为可能最早来源于 Windows 8 和 Metro Design 设计风格。

文字渐变色​

对于色彩比较丰富的一些网站，经常会出现文字渐变的效果，比如 Vue 官网 “渐进式 JavaScript 框架” 中的 “渐进式”，就是使用了如下的渐变效果。