springboot博客（七）（后端之音乐盒/前端页面优化）

音乐盒

效果图

功能分析

1. 音乐播放

步骤

1. 搭建页面

   直接套用图片墙的网页，加上网易云的链接即可

   <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=800 height=400 src="//music.163.com/outchain/player?type=0&id=2153548870&auto=1&height=430"></iframe>
   

   网易云音乐链接获取：

   1. 进入页面选择喜欢的歌单
   2. 点击生成外部链接
   3. 有的歌单因为版权原因不能生成，多找几个试一下

2. 编写controller

   1. 跳转到音乐盒界面

   @GetMapping("/music")
   public String music(){
       return "music";
   }
   

页面功能优化

index.html页面

1. 顶部图片美化
2. 图标显示信息
3. 导航隐藏回显

// 显示微信
$('.wechat').popup({
    popup : $('.wechat-qr'),
    position: 'bottom center'
});
// 显示邮箱
$('.email').popup();
// 导航栏显示
var waypoint = new Waypoint({
      element: document.getElementById('waypoint'),
      handler: function(direction) {
        if (direction == 'down') {
          $('#nav').show(500);
        } else {
          $('#nav').hide(500);
        }
        console.log('Scrolled to waypoint!  ' + direction);
      }
    })

顶部图片

分类、标签、归档、搜索、音乐、图片、友链、博客详情、关于我

全部加上了顶部图片，并且设置为动态图片获取

<div class="m-bg-type_outer" style="width: 100%;height: 40%">
    <img src="https://api.ixiaowai.cn/gqapi/gqapi.php"  alt="" class="ui m-bg image" style="width: 100%;height: 100%">
    <div class="m-bg-class_cover">
        <div class="ui container" style="position: relative ;bottom: -540px;">
            <div class="m-font-size-title m-right-bottom" align="center" style="font-family:'STXingkai'">博客分类</div>
            <div class="m-font-size-text-init-title m-margin-top" align="center">记忆是一种相聚的方式，放下是一种自由的形式。不必悲伤，不必忧愁，邂逅的回忆都是美好的故事</div>
        </div>
    </div>
</div>

归档

使用timeline插件

1. 在lib中加入timeline的js，css中加入css

2. 加入链接

   <link rel="stylesheet" href="../static/css/timeline.css" th:href="@{/css/timeline.css}">
   <script src="../static/lib/timeline/timeline.js" th:src="@{/lib/timeline/timeline.js}"></script>
   

3. 中间内容

   ```html