博客園美化踩坑之路

時間 2020-12-01

標籤 javascript css html java jquery canvas app dom 字體欄目 JavaScript 简体版

原文原文鏈接

博客園美化踩坑之路

1.美化前的準備

首先要先申請支持js代碼，申請js代碼頁面在博客後臺——設置——博客側邊欄公告——申請開通js代碼
javascript

2.添加網易雲音樂設置

建立歌單就不用我在演示了吧，玩網易的人都會，我主要講的是如何生成網易雲音樂外鏈。
在網頁版的網易雲音樂歌單頁面，右擊鼠標有一個檢測功能，這是我提取出來的部分外鏈地址/outchain/0/5019496415/，完整的外鏈須要結合

https://music.163.com/#/outchain/0/5019496415/ 這是我結合成功的外鏈如圖所示

我這裏直接貼出我實驗成功的代碼

<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=5019496415&auto=0&height=90"></embed>
有人會好奇個人html代碼和網易雲生成的外鏈不同，這是由於博客園不支持網易雲音樂開頭的iframe 標籤，因此我把它改爲embed 就能使用網易雲音樂了。
另外還有一個坑，不是因此的歌曲都能播放，在獲取成功的外鏈界面用鼠標點擊一下，有不能播放的歌曲就從歌單裏面刪除就好了，否則歌曲會卡在那裏不在主動播放音樂。音樂播放是可控的auto=0爲不自動播放，當auto=1時，表示音樂自動播放。css

3.動態雪花設置

效果以下

直接貼出代碼
<script type="text/javascript"> window.onload = function () { var minSize = 15; //最小字體 var maxSize = 30;//最大字體 var newOne = 600; //生成雪花間隔 var flakColor = "#1bd3ff"; //雪花顏色 var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("❉");//定義一個雪花 var dhight = $(window).height(); //定義視圖高度 var dw =$(window).width()-80; //定義視圖寬度 setInterval(function(){ var sizeflak = minSize+Math.random()*maxSize; //產生大小不等的雪花 var startLeft = Math.random()*dw; //雪花生成是隨機的left值 var startOpacity = 0.7+Math.random()*0.3; //隨機透明度 var endTop= dhight-100; //雪花中止top的位置 var endLeft= Math.random()*dw; //雪花中止的left位置 var durationfull = 5000+Math.random()*3000; //雪花飄落速度不一樣 flak.clone().appendTo($("body")).css({ "left":startLeft , "opacity":startOpacity, "font-size":sizeflak, "color":flakColor }).animate({ "top":endTop, "left":endLeft, "apacity":0.1 },durationfull,function(){ $(this).remove() }); },newOne); } </script>html

讓你看一下我設置位置，代碼存放位置看我的喜愛
圖片以下
java

添加鼠標點擊特效

直接貼出代碼
<script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤喜歡就關注一下吧❤","❤不是點這裏哦❤","❤快去點贊❤","❤在文章最下面哦❤","❤快去推薦一下吧❤","❤感謝觀看❤","❤"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
讓你看一下個人存放位置
圖片以下
jquery

4.看板娘設置

效果圖以下

首先須要上傳幾個js和css文件到直接的文件空間，文件地址下載url:複製這段內容後打開百度網盤手機App，操做更方便哦連接:https://pan.baidu.com/s/1fL9EeYNu4ZO_6eRtB1xkvQ 提取碼:j7ag
文件上傳處如圖

flat-ui.min.css（看板娘右面的選項，能夠不配置此文件）
live2d.min.js（一些點擊以後的動做）
waifu.css/waifu1.css（看板娘在頁面的位置以及大小，兩個文件根據本身需求2選1，分別是左下角和右下角）
waifu-tips.js（看板孃的語言設置）
另外還要在後臺設置配置文件
我存放代碼的位置圖片以下，紅線是網易音樂代碼，我把他們放在一塊兒了

我實現的代碼以下，再次強調，我把網易雲音樂也放裏面了canvas

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/grow-blog/waifu1.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
embed
{
	position: fixed;
        bottom: 0;
        left: 0;
}
  </style>
<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=5019496415&auto=0&height=90">
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/grow-blog/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/grow-blog/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/grow-blog/flat-ui.min.css"/>
</body>
</html>

看板娘代碼配置詳解以下
沒有通過修改的源碼，上面添加音樂的代碼是我修改事後的。
app