建站笔记（完结篇+彩蛋）

到这里博客的搭建就已经圆满完成了，笔记也整理的差不多了。接下来写一些关于我的博客的一些彩蛋补充，比如这些壁纸，图片，还有就是音乐盒页面的音乐是怎么添加进去的。

1. 博客壁纸

以下介绍一个链接

https://www.dmoe.cc/random.php

这个链接是我在搭建这个博客前，在逛博客园的时候，偶然在别人的博客里发现的。我发现那个博客每刷新一次，页面背景的壁纸就会切换一张图片，而且全是二次元的动漫图片，质量也挺高的，我觉得很神奇，就下意识地按下了F12去看看是怎么做到的，然后就在控制台页面发现他的博客的背景图片仅仅是加载了上面的这个链接。我把这个链接复制了下来，在另一个网页粘贴访问，然后~~~直接发现新世界。

之后就是只需要在你自己的css全局样式中，给body的背景图片属性换上这个链接，这样的话，你每次访问刷新博客的任何一个页面，你的背景图片都会切换。

而且每发布一篇博客文章，你可以先访问多遍这个链接，刷出自己喜欢的图片，然后可以把它的链接作为博客网章的首图。

2. 音乐盒的音乐

这就要用到偷东西的技术了

我突然觉得F12能做的事情真的太多了，音乐盒的音乐其实也是靠F12获取到的哈哈哈。

首先打开网页版的网易云音乐，然后登录自己的网易云账号，找到自己喜欢的歌曲点进去。

按下F12，检查元素，检查所选音乐的图片,可以看到红色圈圈部分是这个图片的链接，记录下来，待会要放进前端代码里

再复制链接上的音乐id，记录下来，待会要用

再复制音乐的名称，作者的名称，同样记录下来，待会要用

歌词的话有点麻烦,接下来会细讲

首先就在这个页面，打开F12，控制台选择network一栏，然后按F5刷新本页面，然后我们可以看到有很多的请求，在这些请求中我们得找到一个以"lyric"开头的请求连接

然后点击它，右键，选择Copy->然后选Copy response

之后的话选择控制台的Console一栏，在控制台上输入a=,之后在等号后边鼠标右键粘贴刚刚copy的内容

按下回车键，控制台输出这一行内容

之后继续在控制台输入a.lrc.lyric或a.tlyric.lyric

这里解释下这两个命令的不同之处

a.lrc.lyric是输出没有经过翻译的歌词内容

a.tlyric.lyric是输出经过了翻译的歌词内容，也就是中文。

然后先不要关闭浏览器以及F12控制台,打开idea，找到音乐盒的页面代码

具体html部分：

• 存放音乐盒位置的代码

<div class="ui m-margin- m-opacity" align="center">
    <div class="ui container box-shadow-max">
        <div id="player2"></div>
    </div>
</div>

js部分：

<script>
var zp2 = new zplayer({
    element: document.getElementById("player2"),
    lrcStart: 1,/*是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）*/
    musics: [{
            title: "nameless story",
            author: "岸田教団＆THE明星ロケッツ",
            url: "http://music.163.com/song/media/outer/url?id=1417265422.mp3",
            pic: "https://p2.music.126.net/B77XwhCVGFRHEXcMmv3vnQ==/109951164632963163.jpg?param=177y177",
            lrc: "[ti:nameless story]\n"+
        	....
    }]
             })
zp2.init();
</script>
      

title处存放音乐的名字，author存放音乐作者，url存放音乐播放的链接（注意只用改链接后面的id，每一首歌对应一个id），

pic为音乐的图片，lrc则为歌词部分，直接复制粘贴刚刚F12控制台里输出的歌词内容即可。

到这里就完成了，想要添加多少歌曲就按照对应的步骤一步步来就可以了，音乐盒完成~