✅ 博客最常见两种：

1. particles.js（老博客最经典），升级版本叫 tsParticles（推荐新项目）

就是你描述效果：页面背景漂浮小点，近的点自动连线，鼠标移动附近粒子会吸附（grab抓取模式，粒子被鼠标吸过去，还拉出连线），Canvas实现。

• onhover.mode: "grab"：鼠标靠近，粒子吸附到光标，带连线，就是你看到的效果

• line_linked：粒子互相之间近距离自动生成细线>

  很多Hexo、VuePress、VitePress博客早年全用这个。

2. canvas-nest.js（国内博客大量用，极简！）

国内博客圈非常流行，只有几百行原生JS，不需要任何依赖。
特点：背景小点、点之间连线；鼠标靠近，粒子向鼠标聚拢吸附。
很多sakura、hexo博客模板自带这个，代码极轻。

区别：canvas-nest功能少，只能做背景粒子；particles/tsParticles自定义能力极强。

简单区分

• 只想快速给博客加背景粒子吸附效果，不想折腾配置：canvas-nest.js，一行引入直接用。
• 需要精细调颜色、粒子数量、多种鼠标模式（吸附/排斥/点击爆炸）：tsParticles（新版particles）

补充：和刚才模块网络图的区别

⚠️ 注意区分：

1. particles.js / canvas-nest：背景粒子特效，粒子自由漂浮，鼠标吸附，用于博客首页背景；
2. force-graph / d3-force：力导向图，是表达数据之间依赖关系（你前面Vite模块图），不是单纯装饰背景。

tsParticles 关键配置片段（实现鼠标吸附抓取效果）

"interactivity": {
  "events": {
    "onhover": {
      "enable": true,
      "mode": "grab" // grab=吸附抓取，鼠标和粒子之间拉出连线
    }
  },
  "modes": {
    "grab": {
      "distance": 140,
      "links": {
        "opacity": 0.5
      }
    }
  }
}

canvas-nest 最简引入

<script src="[https://cdn.jsdelivr.net/npm/canvas-nest.js/dist/canvas-nest.min.js](https://cdn.jsdelivr.net/npm/canvas-nest.js/dist/canvas-nest.min.js)"></script>

引入页面直接生效，无需额外配置。

你是打算加到Vue博客页面做背景吗？我可以直接给对应的Vue版本代码。

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1568.html

转载时须注明出处及本声明