[{"data":1,"prerenderedAt":63},["ShallowReactive",2],{"article-98":3},{"code":4,"msg":5,"data":6,"count":14},200,"查询成功",{"id":7,"title":8,"keywords":9,"description":10,"category_id":11,"content":12,"body_html":13,"thumb_up":14,"clicks":15,"sort":14,"remark":16,"status":11,"is_open":11,"is_deleted":14,"is_top":14,"is_recommend":11,"create_time":17,"update_time":18,"image_id":19,"url":13,"member_id":14,"cate_name":20,"prev":21,"next":24,"tags":27,"words":34,"read_time":35,"comments":11,"cover":36,"relevant":37},98,"本站点JavaScript相关特效使用方法整理","JavaScript,特效","本站的页面用的特效有，粒子线canvas-nest，动态彩带canvas-ribbon，鼠标点击特效以及音乐播放器，本文整理了特效的使用方法",1,"###### 一、鼠标点击出现爱国，民主等字样\n\n```javascript\nimport $ from 'jquery';\nvar a_idx = 0;\n$(document).ready(function($) {\n\t$(\"body\").click(function(e) {\n\t\tvar a = new Array(\"❤富强❤\", \"❤民主❤\", \"❤文明❤\", \"❤和谐❤\", \"❤自由❤\", \"❤平等❤\", \"❤公正❤\", \"❤法治❤\", \"❤爱国❤\", \"❤敬业❤\", \"❤诚信❤\", \"❤友善❤\");\n\t\tvar $i = $(\"\u003Cspan>\u003C\u002Fspan>\").text(a[a_idx]);\n\t\t\ta_idx = (a_idx + 1) % a.length;\n\t\tvar x = e.pageX,\n\t\t\ty = e.pageY;\n\t\t\t$i.css({\n\t\t\t\t\"z-index\": 9999999,\n\t\t\t\t\"top\": y - 20,\n\t\t\t\t\"left\": x,\n\t\t\t\t\"font-size\":\"12px\",\n\t\t\t\t\"position\": \"absolute\",\n\t\t\t\t\"font-weight\": \"bold\",\n\t\t\t\t\"color\": \"rgb(\"+~~(255*Math.random())+\",\"+~~(255*Math.random())+\",\"+~~(255*Math.random())+\")\"\n\t\t\t});\n\t\t\t$(\"body\").append($i);\n\t\t\t$i.animate({\n\t\t\t\t\"top\": y - 180,\n\t\t\t\t\"opacity\": 0\n\t\t\t}, 1500, function(){\n\t\t\t\t$i.remove();\n\t\t\t});\n\t});\n});\n```\n\n放在共用的`footer.vue`中即可\n\n###### 二、页面显示动态彩带\n\n```html\n\u003Cscript id=\"ribbon\" size=\"300\" alpha=\"0.1\" zindex=\"-1\" src=\"\u002Fstatic\u002Fjs\u002Fcanvas-ribbon.js\">\u003C\u002Fscript>\n```\n\n参数说明：\n\n```bash\nsize：功能区的大小，默认值：90。\nalpha：行的不透明度（0~1），默认值：0.6。\nzIndex：z空间的索引，默认值：-1。\n```\n\n目前是暂时在`index.html`中引入\n\n###### 三、粒子线效果\n\n```html\n\u003Cscript color=\"0, 255, 255\" opacity=\"0.7\" zindex=\"-1\" count=\"140\" src=\"\u002Fstatic\u002Fjs\u002Fcanvas-nest.min.js\">\u003C\u002Fscript>\n```\n\n参数说明：\n\n```bash\ncolor=\"255,0,0\" 背景粒子线的颜色\nopacity=\"0.5\"  背景粒子线的透明度，一般设置成 0.5-1 之间\ncount=\"99\"  背景粒子线的密度，\nzIndex=\"-2\"  z 轴坐标默认-1\n```\n\n目前是暂时在`index.html`中引入\n\n##### 四、音乐播放器\n\n```html\n\u003Clink rel=\"stylesheet\" href=\"\u002Fstatic\u002Fwly\u002FAPlayer.min.css\">\n\u003Cscript src=\"\u002Fstatic\u002Fwly\u002FAPlayer.min.js\">\u003C\u002Fscript>\n\u003Cdiv id=\"aplayer\" class=\"aplayer\"  data-id=\"768991704\" data-server=\"netease\" data-autoplay=\"true\" data-type=\"playlist\" data-fixed=\"true\" data-listfolded=\"true\" data-order=\"random\" data-theme=\"#F58EA8\">\u003C\u002Fdiv>\n\u003Cscript src=\"\u002Fstatic\u002Fwly\u002FMeting.min.js\">\u003C\u002Fscript>\n```\n\n参数说明：\n\n| 选项                        |   默认   | 描述                                                         |\n| :-------------------------- | :------: | :----------------------------------------------------------- |\n| id(编号)                    | require  | 歌曲ID \u002F播放列表ID \u002F专辑ID \u002F搜索关键字                       |\n| server(平台)                | require  | 音乐平台：netease`，`tencent`，`kugou`，`xiami`，`baidu      |\n| type（类型）                | require  | song，playlist，album，search，artist                        |\n| auto（支持类种 类）         | options  | 音乐链接，支持：netease，tencent，xiami                      |\n| fixed（固定模式）           |  false   | 启用固定模式，默认false                                      |\n| mini（迷你模式）            |  false   | 启用迷你模式,默认false                                       |\n| autoplay（自动播放）        |  false   | 音频自动播放，默认false                                      |\n| theme(主题颜色)             | #2980b9  | 默认`#2980b9`                                                |\n| loop（循环）                |   all    | 播放器循环播放，值：“all”，one”，“none”                      |\n| order(顺序)                 |   list   | 播放器播放顺序，值：“list”，“random”                         |\n| preload(加载)               |   auto   | 值：“none”，“metadata”，“'auto”                              |\n| volume（声量）              |   0.7    | 默认音量，请注意播放器会记住用户设置，用户自己设置音量后默认音量将不起作用 |\n| mutex（限制）               |   true   | 防止同时播放多个玩家，在该玩家开始播放时暂停其他玩家         |\n| lrc-type（歌词）            |    0     | 歌词显示                                                     |\n| list-folded（列表折叠）     |  false   | 指示列表是否应该首先折叠                                     |\n| list-max-height（最大高度） |  340px   | 列出最大高度                                                 |\n| storage-name（储存名称）    | metingjs | 存储播放器设置的localStorage键                               |\n\n目前是暂时在`index.html`中引入",null,0,706,"","2021-04-22 18:38:53","2026-04-19 10:44:47",128,"技术杂谈",{"id":22,"title":23},97,"Redis必知必会的知识点",{"id":25,"title":26},99,"Memcached、MongoDB和Redis的对比区别",[28,31],{"id":29,"name":30},43,"Javascript",{"id":32,"name":33},80,"HTML",1582,3,"https:\u002F\u002Ftp.myong.top\u002Fstorage\u002Farticle\u002F87\u002F675ea24d1392f61fb3cd682702835d.jpg",[38,43,48,53,58],{"id":39,"title":40,"create_time":41,"description":42},89,"获取腾讯“邮我”的链接","2020-06-16 10:47:34","腾讯QQ邮箱提供了“邮我”组件，可以放在自己的网站上，让别人点击提供的图片或者链接就可以发Email过来，该文章分享的是如何获取到其中的链接。",{"id":44,"title":45,"create_time":46,"description":47},106,"阿里开源数据同步组件Canal","2023-10-26 22:43:32","最开始听说canal是从mysql与redis双写一致性解决方案，当时并没有太在意，最近由于需要实时同步数据，如果在代码对insert\u002Fupdate\u002Fdelete做拦截也可以实现，但对代码侵入性太大了，并且后期更改时容易有遗漏，风险太高，这时就又想到了canal，canal的好处在于对业务代码没有侵入，因为是基于监听binlog日志去进行同步数据，这个真的是太爽爽爽了。并且实时性也能做到准实时，这也是canal为什么这么流行，因为确实很多企业会用来做数据同步的方案。",{"id":49,"title":50,"create_time":51,"description":52},62,"内网使用Composer","2019-10-08 23:29:23","最近本地部署Laravel开发环境时，遇到公司的内网无法正常使用Composer下载Laravel，后来发现是要设置公司内网代理",{"id":54,"title":55,"create_time":56,"description":57},75,"Hexo-SEO优化开启静态文件压缩功能","2019-12-30 21:34:32","个人对HEXO搭建博客的SEO优化方案进行总结，从本地的文章结构到定期推送，再到SEO关键词优化做一个全面体系的汇总，如果有更好的方法可以私聊我。\n\n",{"id":59,"title":60,"create_time":61,"description":62},49,"了解域名SSL证书申请安装","2019-03-22 17:17:43","如何将自己的网站的访问协议http转成https协议，就得要求我们必须对域名进行SSl证书申请并应用。",1783431655795]