什么？博客園主題比我的個(gè)人博客好看？??
夢(mèng)開(kāi)始的地方??
最近逛博客園，發(fā)現(xiàn)我的園子還挺好看，但是還不夠好看，所以通過(guò)我百度發(fā)現(xiàn)SimpleMemory主題還可以繼續(xù)添加新的東西，當(dāng)然這些東西不一定非得用SimpleMemory主題才行，但是搭配SimpleMemory主題是真的好看呀（比我的博客好看多了）。
訪問(wèn)不進(jìn)去GitHub，又不想花錢(qián)使用魔法，看下面，記得一鍵三連~
https://www.bilibili.com/video/BV12k4y1P7EW/?share_source=copy_web&vd_source=fce337a51d11a67781404c67ec0b5084
我的園子
這是首頁(yè)
注意圖標(biāo)和文案都是可以改的，操作方法請(qǐng)?zhí)D(zhuǎn)至底部參考鏈接。
這是內(nèi)容頁(yè)
同樣圖片是可以改的，并且右下角的動(dòng)漫角色可以換成
初音、黑貓、萌娘、白貓、狗狗、小可愛(ài)
我的博客
園子有的東西，我的博客怎么能少呢
教程
博客園如何搭建的鏈接我放在文章底部了，是另一位博主寫(xiě)的，然后我就不copy了。
我來(lái)講一下自己的網(wǎng)站怎么實(shí)現(xiàn)上述的功能吧。其實(shí)原理很簡(jiǎn)單就是把js、css、html代碼放到自己的網(wǎng)站就可以了
看板娘2d角色
首先創(chuàng)建3個(gè)js文件
L2Dwidget.min.js
https://blog-static.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js
L2Dwidget.0.min.js
https://blog-static.cnblogs.com/files/liuzhou1/L2Dwidget.min.js
不能直接引用，因?yàn)檫@是博客園的，在瀏覽器打開(kāi)復(fù)制到自己創(chuàng)建的js文件中就行了，也可以直接去GitHub上去弄官方的。我這里推薦下載博客園的，第一次加載看板娘會(huì)有點(diǎn)慢，這是正常的，如果后面幾次加載也很慢把js放到cdn上去，或者找免費(fèi)的cdn，不過(guò)我沒(méi)找到，如果有的話@我一下??。
2d.js
這是配置樣式的js文件
L2DwidgetMin.init(
{
"model": {
//模型為初音
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", //改這里就是改角色，角色在下面
"scale": 1
},
"display": {
"superSample": 2,
"width": 180,
"height": 320,
"position": "right",
"hOffset": 110,
"vOffset": -30
},
"mobile": {
"show": true,
},
"react": {
"opacityDefault": 1,//不透明度，可調(diào)
"opacityOnHover": 0.2
}
});
// 其他可選的模型：
//初音: https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
// 黑貓：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
// 萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
// 白貓：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
// 狗狗：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
// 小可愛(ài)：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
// 小可愛(ài)：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
音樂(lè)播放器
這是一個(gè) Git 上 7.3K 的開(kāi)源播放器
<!-- 為博客底部添加音樂(lè)組件 -->
<div id="player" class="aplayer"></div>
Music.js
配置文件
var ap = new APlayer({
element: document.getElementById('player'),
narrow: false,
loop: 'all',<!-- 全部循環(huán) -->
order: 'random',<!-- 隨機(jī)循環(huán) -->
volume: 0.7,<!-- 播放音量 -->
autoplay: true, <!-- 是否自動(dòng)播放 -->
showlrc: true, <!--是否開(kāi)啟歌詞功能 ，默認(rèn)false（為true時(shí)musics集合中需要傳入lrc字段。）-->
fixed:1,<!-- 是否固定在左下角不動(dòng)， 1即為true -->
theme: '#04112d', <!-- 插件背景顏色，建議和你的公告欄背景色一樣，這樣融為一體的感覺(jué) -->
autoplay:true,
music: [
{
title: '夠愛(ài)（翻自 曾沛慈）',
author: '是我呀卡司寶貝',
url: 'https://music.163.com/song/media/outer/url?id=1846812463.mp3',
pic: 'http://p2.music.126.net/nQqUGffgtOv5PjfwqgVJyw==/109951166562832347.jpg?param=300x300',
lrc: '[00:00.000] 作詞 : 無(wú)[00:01.000] 作曲 : 無(wú)[00:02.818]翻唱：卡司[00:05.809]后期：A 醬[00:08.806]母帶：TORA[00:12.068]海報(bào)：相如賦[00:13.309]“因?yàn)閴驉?ài)，所以才勇敢啊”[00:14.056]我穿梭金星 木星 水星 火星 土星 追尋[00:17.051]追尋你 時(shí)間滴滴答滴答答的聲音[00:20.253]我穿梭金星 木星 水星 火星 土星 追尋[00:23.003]追尋你 時(shí)間滴滴答滴答答的聲音[00:42.507]指頭還殘留 你為我[00:47.510]擦的指甲油 沒(méi)想透[00:54.764]你好像說(shuō)過(guò) 你和我[00:59.520]會(huì)不會(huì)有以后[01:04.263]世界一直一直變[01:06.264]地球不停的轉(zhuǎn)動(dòng)[01:08.260]在你的時(shí)空 我從未退縮懦弱[01:16.760]當(dāng)我靠在你耳朵[01:18.952]只想輕輕對(duì)你說(shuō)[01:21.203]我的溫柔 只想讓你都擁有[01:28.960]我的愛(ài) 只能夠[01:31.457]讓你一個(gè)人 獨(dú)自擁有[01:35.205]我的靈和魂魄[01:37.461]不停守候 在你心門(mén)口[01:41.219]我的傷和眼淚[01:43.720]化為烏有 為你而流[01:47.710]藏在 無(wú)邊無(wú)際[01:49.706]小小宇宙 愛(ài)你的我[02:02.708]你聽(tīng)見(jiàn)了嗎[02:04.467]我為你唱的這首歌[02:06.963]是為了要證明[02:08.960]我為了你 存在的意義[02:12.710]世界一直一直變[02:15.202]地球不停的轉(zhuǎn)動(dòng)[02:16.457]在你的時(shí)空 我從未退縮懦弱[02:24.964]當(dāng)我靠在你耳朵[02:26.969]只想輕輕對(duì)你說(shuō)我的溫柔[02:32.203]只想讓你都擁有[02:37.202]我的愛(ài) 只能夠[02:39.710]讓你一個(gè) 人獨(dú)自擁有[02:43.469]我的靈和魂魄[02:46.397]不停守候 在你心門(mén)口[02:49.647]我的傷和眼淚化為烏有[02:53.398]為你而流[02:56.404]藏在 無(wú)邊無(wú)際[02:58.156]小小宇宙 愛(ài)你的我[03:32.149]愛(ài)你的我 不能停止脈搏[03:38.163]為了愛(ài)你奮斗[03:40.911]就請(qǐng)你讓我 說(shuō)出口[03:47.648]愛(ài) 只能夠[03:48.912]讓你一個(gè)人 獨(dú)自擁有[03:52.658]我的靈和魂魄[03:55.149]不停守候 在你心門(mén)口[03:58.911]我的傷和眼淚[04:01.397]化為烏有 為你而流[04:05.401]藏在 無(wú)邊無(wú)際[04:07.846]小小宇宙 愛(ài)你的我[04:16.598]愛(ài)你的我 愛(ài)你的我[04:23.844]我穿梭金星 木星 水星[04:26.598]火星 土星 追尋[04:26.839]追尋你 時(shí)間滴滴答滴答[04:28.349]答滴聲音[04:29.848]我穿梭金星 木星 水星[04:31.843]火星 土星 追尋[04:33.095]追尋你 時(shí)間滴滴答滴答[04:34.097]答的聲音[04:36.094]我穿梭金星 木星 水星[04:37.592]火星 土星 追尋[04:39.098]追尋你 時(shí)間滴滴答滴答[04:40.847]答的聲音'
},
{
title:'老人と海',
author:'ヨルシカ',
url:'http://music.163.com/song/media/outer/url?id=1870469768.mp3',
pic:'http://p1.music.126.net/5aHcGADR5i6biE5TSqf_aQ==/109951166295171725.jpg?param=300x300',
lrc:'[00:00.000] 作詞 : n-buna[00:01.000] 作曲 : n-buna[00:02.000] 編曲 : n-buna[00:14.140]靴紐が解けてる 木漏れ日は足を舐む[00:21.718]息を吸う音だけ聞こえてる[00:28.771]貴方は今立ち上がる 古びた椅子の上から[00:36.761]柔らかい麻の匂いがする[00:41.394][00:42.047]遙か遠(yuǎn)くへ まだ遠(yuǎn)くへ[00:46.974]僕らは身體も脫ぎ去って[00:50.608]まだ遠(yuǎn)くへ 雲(yún)も越えてまだ向こうへ[00:58.225]風(fēng)に乗って[00:59.805]僕の想像力という重力の向こうへ[01:05.603]まだ遠(yuǎn)くへ まだ遠(yuǎn)くへ[01:09.400]海の方へ[01:11.483][01:24.123]靴紐が解けてる 蛇みたいに跳ね遊ぶ[01:32.043]貴方の靴が気になる[01:39.017]僕らは今歩き出す 潮風(fēng)は肌を舐む[01:46.946]手を引かれるままの道[01:51.508][01:52.129]さぁまだ遠(yuǎn)くへ まだ遠(yuǎn)くへ[01:57.092]僕らはただの風(fēng)になって[02:00.835]まだ遠(yuǎn)くへ 雲(yún)も越えてまだ向こうへ[02:08.315]風(fēng)に乗って 僕ら想像力という縛りを抜け出して[02:15.631]まだ遠(yuǎn)くへ まだ遠(yuǎn)くへ 海の方へ[02:21.699][02:34.307]靴紐が解けてる 僕はついにしゃがみ込む[02:42.352]鳥(niǎo)の鳴く聲だけ聞こえてる[02:49.134]肩をそっと叩かれてようやく僕は気が付く[02:57.329]海がもう目の先にある[03:01.675][03:02.536]あぁまだ遠(yuǎn)くへ まだ遠(yuǎn)くへ[03:09.279]僕らは心だけになって[03:12.804]まだ遠(yuǎn)くへ 海も越えてまだ向こうへ[03:20.398]風(fēng)に乗って 僕の想像力という重力の向こうへ[03:27.668]まだ遠(yuǎn)くへ まだ遠(yuǎn)くへ[03:31.362]海の方へ[03:33.779][03:46.264]僕らは今靴を脫ぐ さざなみは足を舐む[03:54.505]貴方の眼は遠(yuǎn)くを見(jiàn)る[04:01.048]ライオンが戯れるアフリカの砂浜は[04:09.236]海のずっと向こうにある'
}
]
});
ap.init();
音樂(lè)放服務(wù)器很慢怎么辦↓ ↓ ↓
為師放出一條鏈接，可否來(lái)個(gè)贊??????~
音樂(lè)鏈接找它：http://music.wandhi.com/ 歌詞可以下載，下載后用記事本打開(kāi)
歌詞很長(zhǎng)我想換成一行顯示怎么辦，找它：https://www.bejson.com/text/text_replace_hr/
歌曲的圖片怎么獲取呢：打開(kāi)上面的網(wǎng)站，找到自己喜歡的音樂(lè)，然后F12把鼠標(biāo)移動(dòng)到歌曲的圖標(biāo)上面，找到鏈接復(fù)制就行了，實(shí)在不會(huì)你直接隨便放個(gè)能訪問(wèn)到的圖片鏈接就行了
最后導(dǎo)入音樂(lè)播放器css 和 js，注意了，配置文件要在下面的js之后導(dǎo)入，這點(diǎn)知識(shí)想必大家都知道吧
<link rel="stylesheet"> //這是cdn，不用下載，直接copy過(guò)去就行
<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
//導(dǎo)入自己的配置js
<script src='Music.js'></script>
鼠標(biāo)連線特效
寫(xiě)在你的網(wǎng)站里面
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
把這個(gè)鏈接的內(nèi)容下載到自己網(wǎng)站里面
https://files.cnblogs.com/files/siwuxie095/canvas-nest.min.js
然后引入就行了
鼠標(biāo)點(diǎn)擊煙花
<canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js
下載到自己網(wǎng)站，不能直接引入，下載后在引入自己的。
鼠標(biāo)點(diǎn)擊愛(ài)心
創(chuàng)建一個(gè)js文件，然后引入到網(wǎng)站就行了
<script type="text/javascript">
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
</script>
小魚(yú)跳
放在網(wǎng)站里面底部
<div id="jsi-flying-fish-container" class="container" style="background-color:#fff"></div>
下載這個(gè)js：https://blog-static.cnblogs.com/files/yiyuzi/myfish.js
寫(xiě)一個(gè)樣式：
<style>
@media only screen and (max-width: 767px){
#sidebar_search_box input[type=text]{width:calc(100% - 24px); }}
#jsi-flying-fish-container{
opacity: 0.4;
position:fixed;
width: 100%;
height: 8%;
bottom: 0;
}
</style>
如果小魚(yú)沒(méi)有占滿底部，看看是不是 class="container" 和自己網(wǎng)站的沖突了，刪掉就行。
結(jié)尾
想擁有和我一樣的博客園主題，可以去看看這位博主寫(xiě)的內(nèi)容（鏈接在下面），非常的詳細(xì)了，如果也想在自己寫(xiě)的博客里面擁有看板娘，以及音樂(lè)播放器、底部小魚(yú)、點(diǎn)擊特效查看上面的教程，實(shí)現(xiàn)了記得回來(lái)點(diǎn)個(gè)贊。
參考資料
看板娘GitHub地址：https://github.com/xiazeyu/live2d-widget.js
音樂(lè)播放器GitHub地址：https://github.com/DIYgod/APlayer
博客園主題教程：https://www.cnblogs.com/ProsperousEnding/articles/16595150.html
我的園子：https://www.cnblogs.com/ZYPLJ/文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-572802.html
我的個(gè)人博客：https://pljzy.top/文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-572802.html
到了這里，關(guān)于什么？博客園主題比我的個(gè)人博客好看？?的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
