Hexo博客NexT主题添加theme-next-canvas-nest几何动效

发表于 | 阅读次数：
| 本文字数： 718 | 阅读时长 ≈ 1 分钟

步骤一 进入NexT文件目录

1
$ cd themes/next

Click and drag to move

步骤二 下载canvas-nest

我们把canvas-nest下载到next目录下的ource/lib目录里

1
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

Click and drag to move

步骤三 配置

在NexT配置文件_config.yml中配置开启canvas_nest

在配置文件中找到canvas_nest，将enable设置成true，还可以自定义颜色、透明度、数量等。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,255' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

Click and drag to move

更新

1
2
$ cd themes/next/source/lib/canvas-nest
$ git pull

Click and drag to move

效果

$ hexo d -g重新编译部署下就可以看到效果了，可以到我的个人博客野猿新一看下效果

canvas_nest GitHub主页

详细说明可以到canvas_nest主页theme-next/theme-next-canvas-nest查看