Waxy主题:自定义Canvas背景

warning: 这篇文章距离上次修改已过1283天,其中的内容可能已经有所变动。

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

什么是Canvas?

Canvas 是 HTML5 中一个新特性,开发者绘制一系列图形。通过和JavaScript配合,可以使静态的图形动起来~

当然更加具体的内容,还请您自己学习,这里不做展开~

后面飞扬的花瓣就是基于Canvas技术实现的后面飞扬的花瓣就是基于Canvas技术实现的

如何自定义Canvas背景?

目前Waxy主题支持3种方式自定义Canvas背景,在文章后面,我提供了几个整理好的背景。

1.文件引入(推荐)

首先,您需要将要引入的背景文件,放入网站的目录下,并且保证可以读取。

这里我放在主题的js目录下这里我放在主题的js目录下

然后进入主题设置,自定义JS,中填入下面的代码:

<script type="text/javascript" src="【此处为该js文件相对与网站的路径地址】"></script>

注意替换src的路径注意替换src的路径

2.代码追加

打开主题下的/js/waxy-main.js文件。

在文件末尾换行一次或多次,将背景文件内所有内容复制进文件最后。

注意复制全了注意复制全了

3.全量设置

然后进入主题设置,自定义JS,中填入下面的代码:

<script type="text/javascript">此处为背景文件内所有的内容</script>

注意,一定不要丢 '&lt;' 和 '&gt;'注意,一定不要丢 '&lt;' 和 '&gt;'

附件

这些背景均搜集自网络,仅修改不兼容Waxy的部分,其他代码均未修改。保留原作者注释及声明




已有 12 条评论

  1. 收到 背景。谢谢

    1. 感谢您对Waxy主题的喜爱~

  2. 马教授 马教授

    Hello, Sir , Verd good,thanks!good bye!

  3. 今天又是想婷婷的一天 今天又是想婷婷的一天

    今天又是想婷婷的一天⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

  4. kwshh kwshh

    第一次玩,谢谢大佬指引啦(*╹▽╹*)

    1. 感谢您对Waxy主题的喜欢,如果您有 反馈/建议/疑问 欢迎发邮件或是留言来联系我~

  5. 如何将文章的背景颜色设置成透明啊,感觉白色的好丑....

    1. 额,您在主题设置中添加下面的内容,覆盖主题默认样式即可
      .post{
      background: rgba(255, 255, 255, 0.8);
      }

      如果还要修改侧边栏样式,可追加下面的内容:
      .sidebar .widget {
      background: rgba(255,255,255,0.8);
      }

  6. 麋鹿 麋鹿

    麻烦问下去哪改啊.......................阿巴阿巴

    1. 受评论区限制,更详细的图文教程已经发送到您的邮箱里了,请您注意查看~

  7. 麋鹿 麋鹿

    邮件收到了感觉大佬热心回复~~~

  8. kyara zhan kyara zhan

    Verd good

添加新评论

* 人工审核评论,通过后即可正常显示。《隐私政策》