简述

问题描述

前情提示

系统：

一说

  • 同步更新最新版、完整版请移步PUSDN Powered By PUSDN - 平行宇宙软件开发者网www.pusdn.com ，转载请标明出处！

  • 部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤

  • 带有#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行

一、 进入NexT主题目录/home/myblog/themes/next

二、安装依赖git clone https://github.com/theme-next/theme-next-three source/lib/three

三、修改配置文件/home/myblog/themes/next/_config.yml，启用three，并修改背景动画三选一设置为true，如下：

1
2
3
4
5
6
7
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: false
  canvas_lines: false
  canvas_sphere: true

如果细心的呃小伙伴，看到如下图位置留空的话默认是取themes/next/source/lib下面的JS，当然了，官方也说了，如果你想要使用CDN也可以修改为对应的地址。

在这里插入图片描述

三种效果预览截图：

  1. 波浪

在这里插入图片描述

  1. 丝线

在这里插入图片描述

  1. 效果三猜名称i 应该是球体。

在这里插入图片描述

如果想要点击彩带效果可以修改如下：

1
2
3
4
5
6
7
8
# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: false
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

效果展示：https://zproo.github.io/showcase/project/canvas-ribbon/

在这里插入图片描述

配置流动线条

https://github.com/theme-next/theme-next-canvas-nest

流动线条效果展示：https://git.hust.cc/canvas-nest.js/

在这里插入图片描述

流动线条（可以让阅读者娱乐把玩下）

  1. 查看/home/myblog/source目录下是否有_data目录，默认是没有的，如果没有，进行创建mkdir /home/myblog/source/_data（根据你的实际目录进行创建）

  2. 在_data目录下新建文件，名为footer.swig，内容如下：（当然，你也可以自定义那些参数）

1
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

如果想了解参数，进入官网查看，如果简单参考如下：

1
2
3
4
color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
  1. 编辑文件/home/myblog/themes/next/_config.yml，找到以下内容并去掉footer注释：
1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

至此，完成了流动线条，赶紧看下效果吧！

防止有一天CSDN把图片吃了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  commonweal: 404.html/ || heartbeat
  
# Enable/Disable menu icons.
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive