目录前言Agron主题鼠标点击特效动态背景看板娘插件左侧栏头像自动缩放、高亮 / 暗音乐播放插件登录页面插件菜单顶部标题前的图标设置菜单顶部标题前的图标设置雪花飘落的特效背景透明特效全局字体设置标题缩放特效总结前言常言道工欲善其事必先利其器在发表文章前美化博客使其利于自己的观看与管理极其重要所以我四处搜寻得到了以下美化代码。但是有时候我们走得太远会忘了为什么出发。希望阅览本文章的人不要忘记初心想想一开始为什么搭建博客。我相信大部分朋友都是为了记录自己学习笔记生活故事。所以有时候博客美化过度会适得其反望各位仔细斟酌莫要使自己的博客变成了花架子好的文章才是博客之本立足之根。Agron主题链接https://pan.baidu.com/s/1eOZPJINj-gVmp2PwU_F7Mg?pwdiu2q提取码iu2q鼠标点击特效此处代码放在后台-Argon主题选项-页头脚本中html body script function clickEffect() { let balls []; let longPressed false; let longPress; let multiplier 0; let width, height; let origin; let normal; let ctx; const colours [#F73859, #14FFEC, #00E0FF, #FF99FE, #FAF15D]; const canvas document.createElement(canvas); document.body.appendChild(canvas); canvas.setAttribute(style, width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;); const pointer document.createElement(span); pointer.classList.add(pointer); document.body.appendChild(pointer); if (canvas.getContext window.addEventListener) { ctx canvas.getContext(2d); updateSize(); window.addEventListener(resize, updateSize, false); loop(); window.addEventListener(mousedown, function(e) { pushBalls(randBetween(10, 20), e.clientX, e.clientY); document.body.classList.add(is-pressed); longPress setTimeout(function(){ document.body.classList.add(is-longpress); longPressed true; }, 500); }, false); window.addEventListener(mouseup, function(e) { clearInterval(longPress); if (longPressed true) { document.body.classList.remove(is-longpress); pushBalls(randBetween(50 Math.ceil(multiplier), 100 Math.ceil(multiplier)), e.clientX, e.clientY); longPressed false; } document.body.classList.remove(is-pressed); }, false); window.addEventListener(mousemove, function(e) { let x e.clientX; let y e.clientY; pointer.style.top y px; pointer.style.left x px; }, false); } else { console.log(canvas or addEventListener is unsupported!); } function updateSize() { canvas.width window.innerWidth * 2; canvas.height window.innerHeight * 2; canvas.style.width window.innerWidth px; canvas.style.height window.innerHeight px; ctx.scale(2, 2); width (canvas.width window.innerWidth); height (canvas.height window.innerHeight); origin { x: width / 2, y: height / 2 }; normal { x: width / 2, y: height / 2 }; } class Ball { constructor(x origin.x, y origin.y) { this.x x; this.y y; this.angle Math.PI * 2 * Math.random(); if (longPressed true) { this.multiplier randBetween(14 multiplier, 15 multiplier); } else { this.multiplier randBetween(6, 12); } this.vx (this.multiplier Math.random() * 0.5) * Math.cos(this.angle); this.vy (this.multiplier Math.random() * 0.5) * Math.sin(this.angle); this.r randBetween(8, 12) 3 * Math.random(); this.color colours[Math.floor(Math.random() * colours.length)]; } update() { this.x this.vx - normal.x; this.y this.vy - normal.y; normal.x -2 / window.innerWidth * Math.sin(this.angle); normal.y -2 / window.innerHeight * Math.cos(this.angle); this.r - 0.3; this.vx * 0.9; this.vy * 0.9; } } function pushBalls(count 1, x origin.x, y origin.y) { for (let i 0; i count; i) { balls.push(new Ball(x, y)); } } function randBetween(min, max) { return Math.floor(Math.random() * max) min; } function loop() { ctx.fillStyle rgba(255, 255, 255, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i 0; i balls.length; i) { let b balls[i]; if (b.r 0) continue; ctx.fillStyle b.color; ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false); ctx.fill(); b.update(); } if (longPressed true) { multiplier 0.2; } else if (!longPressed multiplier 0) { multiplier - 0.4; } removeBall(); requestAnimationFrame(loop); } function removeBall() { for (let i 0; i balls.length; i) { let b balls[i]; if (b.x b.r 0 || b.x - b.r width || b.y b.r 0 || b.y - b.r height || b.r 0) { balls.splice(i, 1); } } } } clickEffect();//调用特效函数 /script /body /html动态背景此处代码放在后台-Argon主题选项-页头脚本中video srchttps://new.gcxstudio.cn/wp-content/uploads/2022/03/daymode.mp4 /*白天动态视频链接*/ classbg-video bg-video-day autoplay looploop muted /video video srchttps://new.gcxstudio.cn/wp-content/uploads/2022/03/darkmode.webm /*夜间动态视频链接*/ classbg-video bg-video-night autoplay looploop muted /video style video.bg-video { position: fixed; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; width: 100vw; height: 100vh; object-fit: cover; pointer-events: none; } html.darkmode video.bg-video.bg-video-day { opacity: 0; } html.darkmode video.bg-video.bg-video-night { opacity: 1; } video.bg-video.bg-video-day { opacity: 1; } video.bg-video.bg-video-night { opacity: 0; } #banner, #banner .shape { background: transparent !important; } * { font-family: Comfortaa, Open Sans, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; } /style script srchttps://api.gcxstudio.cn/odometer/odometer.min.js integritysha256-65R1G5irU1VTk8L4coqgd3saSvO/Wufson/wv2Idw crossoriginanonymous /script link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css script srchttps://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js/script div idaplayer/div看板娘插件这里的看板娘我用的是插件因为网上的很多脚本都用不了链接https://pan.baidu.com/s/1olA3hMTYju7fL8bZo81JrQ?pwdhtpf提取码htpf若是网盘速度太慢也可以试试下面的代码插入后台-Argon主题选项-页脚脚本中script srchttps://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js/script script L2Dwidget.init({ model: { //jsonpath控制显示那个小萝莉模型 //(切换模型需要改动) // https://unpkg.com/(live2d-widget-model-koharu)1.0.5/assets/(koharu).model.json jsonPath: https://unpkg.com/live2d-widget-model-koharu1.0.5/assets/koharu.model.json, scale: 1 }, display: { position: right, //看板娘的表现位置 width: 75, //小萝莉的宽度 height: 150, //小萝莉的高度 hOffset: 0, vOffset: -20 }, mobile: { show: true, scale: 0.5 }, react: { opacityDefault: 0.7, opacityOnHover: 0.2 } }); /script /* 小帅哥 https://unpkg.com/live2d-widget-model-chitose1.0.5/assets/chitose.model.json 萌娘https://unpkg.com/live2d-widget-model-shizuku1.0.5/assets/shizuku.model.json 白猫https://unpkg.com/live2d-widget-model-tororo1.0.5/assets/tororo.model.json 黑猫 https://unpkg.com/live2d-widget-model-hijiki1.0.5/assets/hijiki.model.json 小可爱女https://unpkg.com/live2d-widget-model-koharu1.0.5/assets/koharu.model.json 小可爱男https://unpkg.com/live2d-widget-model-haruto1.0.5/assets/haruto.model.json 初音https://unpkg.com/live2d-widget-model-miku1.0.5/assets/miku.model.json 圣职者妹妹https://unpkg.com/live2d-widget-model-z161.0.5/assets/z16.model.json 茶杯犬https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko1.0.5/assets/wanko.model.json 绿毛妹妹https://unpkg.com/live2d-widget-model-tsumiki1.0.5/assets/tsumiki.model.json 金龟子妹妹https://unpkg.com/live2d-widget-model-unitychan1.0.5/assets/unitychan.model.json https://unpkg.com/live2d-widget-model-nito1.0.5/assets/nito.model.json https://unpkg.com/live2d-widget-model-ni-j1.0.5/assets/ni-j.model.json 小阿狸 https://unpkg.com/live2d-widget-model-nico1.0.5/assets/nico.model.json https://unpkg.com/live2d-widget-model-nietzche1.0.5/assets/nietzche.model.json https://unpkg.com/live2d-widget-model-nipsilon1.0.5/assets/nipsilon.model.json 女学生 https://unpkg.com/live2d-widget-model-hibiki1.0.5/assets/hibiki.model.json */左侧栏头像自动缩放、高亮 / 暗主页-自定义-额外CSS插入代码#leftbar_overview_author_image { width: 100px; height: 100px; margin: auto; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(127, 127, 127, 0.1); overflow: hidden; box-shadow: 0 0 5px rgba(116, 8, 204, 0.3); transition: transform 0.3s ease; /*变化速度*/ } #leftbar_overview_author_image:hover { transform: scale(1.2); /*缩放大小*/ filter: brightness(150%); /*调节亮度*/ }音乐播放插件放在页脚脚本中servernetease指定音乐平台为网易云typesong指单曲类型id7373135320为音乐的 id这里的 id 为打开音乐歌单网址显示的 id开启吸底模式fixedtrue, 开启迷你模式minitrue, 随机播放orderrandom, 关闭底部歌词lrc-type0注意id 需要为自己创建的歌单不能为我喜欢的音乐server 可以改自己用的音乐平台如 netease (网易云)、tencent (QQ 音乐)具体参数设置点击此链接https://yy.liveout.cn/article/Learn/front-end/aplayer%E5%8F%82%E6%95%B0.png插件LoginPress – Customizing the WordPress Login Screen.具体设置可以看看这篇文章APlayer HTML5 音乐播放器 | ACE-BLOG (ace520.github.io)登录页面插件先看一下效果插件LoginPress – Customizing the WordPress Login Screen.具体设置可以看看这篇文章https://zhuanlan.zhihu.com/p/403289536菜单顶部标题前的图标设置主页-自定义-额外CSS插入代码鼠标样式图标可以去致美化下载https://zhutix.com/animated/page/4//** 普通指针样式**/ body { cursor: url(https://dl.zhutix.net/2023/03/55488.png), default; }菜单顶部标题前的图标设置相信博客中的菜单大部分人都有吧但是菜单前的图标我相信很多的人一定还不会设置毕竟博主我也是四处求学才掌握了这个技能。好了废话不多说直接上 干货!i classfa fa-wordpressi/标签的名字下面这两个是字体图标库可以找想要的菜单图标图标库V5BUNOOB雪花飘落的特效如果是Argon主题的话直接在后台的Argon主题选项中的脚本页脚插入以下代码script typetext/javascript (function($){ $.fn.snow function(options){ var $flake $(div idsnowbox /).css({position: absolute,z-index:9999, top: -50px, cursor: pointer}).html(❄), documentHeight $(document).height(), documentWidth $(document).width(), defaults { minSize : 10, maxSize : 20, newOn : 1000, flakeColor : #AFDAEF /* 此处可以定义雪花颜色若要白色可以改为#FFFFFF */ }, options $.extend({}, defaults, options); var interval setInterval( function(){ var startPositionLeft Math.random() * documentWidth - 100, startOpacity 0.5 Math.random(), sizeFlake options.minSize Math.random() * options.maxSize, endPositionTop documentHeight - 200, endPositionLeft startPositionLeft - 500 Math.random() * 500, durationFall documentHeight * 10 Math.random() * 5000; $flake.clone().appendTo(body).css({ left: startPositionLeft, opacity: startOpacity, font-size: sizeFlake, color: options.flakeColor }).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 },durationFall,linear,function(){ $(this).remove() }); }, options.newOn); }; })(jQuery); $(function(){ $.fn.snow({ minSize: 5, /* 定义雪花最小尺寸 */ maxSize: 50,/* 定义雪花最大尺寸 */ newOn: 300 /* 定义密集程度数字越小越密集 */ }); }); /script一些其他特效的代码背景透明特效主页-自定义-额外CSS插入代码/*白天卡片背景透明*/ .card { background-color: rgba(255, 255, 255, 0.8) !important; /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/ -webkit-backdrop-filter: blur(6px); } /*小工具栏背景完全透明*/ /*小工具栏是card的子元素如果用同一个透明度会叠加变色故改为完全透明*/ .card .widget, .darkmode .card .widget, #post_contentdivdivdiv.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title, #custom_html-2 { background-color: #ffffff00 !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .emotion-keyboard, #fabtn_blog_settings_popup { background-color: rgba(255, 255, 255, 0.95) !important; } /*分类卡片透明*/ .bg-gradient-secondary { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /*夜间透明*/ html.darkmode.bg-white, html.darkmode .card, html.darkmode #footer { background: rgba(66, 66, 66, 0.9) !important; } html.darkmode #fabtn_blog_settings_popup { background: rgba(66, 66, 66, 0.95) !important; }全局字体设置主页-自定义-额外CSS插入代码/*字体*/ font-face { font-family: myFont; src:url(https://img.crowya.com/font/FZFWZZAY.woff2) format(woff2); font-display: swap; } body, .nav-link-inner--text { font-family: myFont; } .navbar-brand { font-size: 1.25rem; font-weight: 100; margin-right: 2rem; padding-bottom: .1rem; }此处代码出处标题缩放特效主页-自定义-额外CSS插入代码/* 标题缩放 */ .banner-title{ transition: .8s cubic-bezier(.2,.8,.2,1); } .banner-title:hover { transform:scale(1.4) translateY(-50%); }总结目前这些就是我用到的全部优化博客的代码了以后有新的美化想法或者代码的化也会及时的发布出来更多的美化内容可以去这个博客看看https://limingliang.top/index.php/2023/07/03/agron%e4%b8%bb%e9%a2%98%e7%be%8e%e5%8c%96/总的来说我们会在追求完美和美化过程中迷失了自己的初衷。重要的是记住我们开始时的动机和目标并确保我们的行动与之保持一致。对于网页设计或其他创作领域而言美化是一个重要的方面但不应成为我们放弃原始意图的理由。我们应该谨记初衷将美化作为实现初衷的手段而不是目的。保持初衷的重要性体现在多个方面。它可以帮助我们保持真实性确保我们所做的与我们的价值观和信念一致。它还能够让我们保持专注避免过度修饰而使事物变得复杂和混乱。此外初衷还能为我们提供方向和动力使我们在遇到挑战和困难时保持坚持和奋斗的勇气。因此在进行任何创作或决策时请时刻回顾自己的初衷并确保所做的选择与之相符。不要让过度追求美化而迷失自己而是用美化去支持和加强初衷让它更好地展现出来。