UNIVERONE
📑 Posts 🏷️ Categories 🧜‍♀️ About 🔗 Links
UNIVERONE

Contents

关于个人网站页面优化的二三记录

 Included in Web
   2178 words   5 minutes 

最近在搞博客的优化，真的是非常折腾了，审美也在不断的变化，总体上来说还是收获很多的，在此记录一下自己的一点心得。

1. PJAX

这两天整了好久音乐播放器，审美来来回回变化，一个挺大的需求是实现在多个页面的音乐连续播放，经过一系列资料搜索后，看到github上由于一个PJAX的项目非常这个需求，即只动态加载部分页面，音乐播放器不重复加载，从而实现连续播放。
项目地址为： https://github.com/MoOx/pjax
使用也非常简单，按照官网的说明即可，引入pjax的javascript文件，并写javascript脚本指定链接和动态加载部分的内容即可，，elements指定跳转链接的样式（目前只支持a[href]和form[action]，如果是其它页面跳转的话需要修改跳转链接为指定样式），selectors指定动态加载的内容。

脚本如下：

1
2
3
4

    var pjax = new Pjax({
        elements: "a[href]",// default is "a[href], form[action]"
        selectors: [".front > div:nth-child(2)"]
    })

另外github上还有另一个jquery实现的pjax项目,相比来说我使用的这个项目不需要设置后端，并且在持续更新维护。

2.NProgress

使用PJAX加载的时候如果网速不太好的话会显示静止一段时间，因此使用一个进度条表示显示加载进度比较有必要。
项目地址为：http://ricostacruz.com/nprogress/
使用方式和PJAX类似，引入相应的css和javascript文件，在PJAX的script之后添加

1
2
3
4
5
6

        document.addEventListener('pjax:send', function () {
            NProgress.start();
        });
        document.addEventListener('pjax:complete', function () {
            NProgress.done();
        });

这个进度条的样式位于顶部比较低调，我更想用效果比较显眼的进度条，还在物色中。

3. 音乐播放器

音乐插件真的是花了好多时间，最开始我用的是Aplayer，后来从codepen上找好看的播放器，花了很多时间调整样式来适应博客的布局，结果效果也很一般（尤其是移动端适应）
以下为尝试过的几种播放器：

  1. Aplayer：样式固定，可以放歌单
  2. plyr：样式简洁，不可以放歌单
  3. codepen中自选：可定制程度高，这也是我目前使用的播放器
  4. 网易云外链：使用方便，不可以放歌单，不是所有歌都能生成外链

4.设置背景样式

4.1 背景图片

博客原来的背景是黑色，比较枯燥，因此使用每日更新的bing壁纸作为背景，直接使用别人做好的接口即可。

1

"background: no-repeat url(http://fly.atlinker.cn/api/bing/1366.php) fixed

4.2 背景特效

最后还是没有找到自己喜欢的背景特效，水面特效真的很好看，我想应用到自己的博客上，但是不太适配固定背景的页面，下拉的时候背景会变模糊，只好舍弃了。一些可以参考的项目如下：

5.动态变化窗口标题

根据正在浏览的窗口动态变化窗口的名称，参考atlinker的网站源码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

      var OriginTitile = document.title;
      var titleTime;
      document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
          document.title = '(つェ⊂)我藏好啦 ' + OriginTitile;
          clearTimeout(titleTime);
        }
        else {
          document.title = '´∇｀ 呀被发现啦~ ' + OriginTitile;
          titleTime = setTimeout(function() {
            document.title = OriginTitile;
          }, 2000);
        }});

6.鼠标特效

6.1 鼠标显示特效

鼠标在元素上显示的样式可以用css中的cursor属性指定，本博客作用在body元素上，制定了鼠标样式的图片

1
2
3

  body {
    cursor: url(/click.png) 4 12, auto;
  }

6.2 鼠标点击特效

使用别人写好的javascript文件

1
2
3
4
5

<script defer src="js/firework.js"></script>
<script>
var firework = new CursorSpecialEffects();
firework.init()
</script>

值得注意的时，下面的script代码最好写在onload()函数内部，以确保需要的依赖已经被加载，或者：
引入require.js, 再使用require()函数进行加载。

7. 返回顶部

参考了yearito博客和diygod博客的样式。
首先获得猫的图片，然后在html中写一个空元素

1

<div class="back-to-top"><i class="fa fa-arrow-up"></i></div>

css样式为

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  .back-to-top {
    position: fixed;
    right: 18rem;
    width: 70px;
    height: 900px;
    top: -100px;
    bottom: unset;
    transition: all 0.5s ease-in-out;
    background: url("/scroll.png");
  }

  .back-to-top>i {
    display: none;
  }

  .back-to-top.back-to-top-on {
    bottom: unset;
    top: calc(100vh - 900px - 200px);
  }

  @media (min-height: 1100px) {
    .back-to-top.back-to-top-on {
      top: 0px;
    }
  }

javascript代码为：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

        // 返回顶部的小猫
        $.scrollto = function (scrolldom, scrolltime) {
            $(scrolldom).click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                $('html, body').animate({
                    scrollTop: $('body').offset().top
                }, scrolltime);
                return false;
            });
        };
        // 判断位置控制 返回顶部的显隐
        var backTo = $(".back-to-top");
        var backHeight = $(window).height() - 980 + 'px';
        $(window).scroll(function () {
            if ($(window).scrollTop() > 700 && backTo.css('top') === '-900px') {
                backTo.css('top', backHeight);
            } else if ($(window).scrollTop() <= 700 && backTo.css('top') !== '-900px') {
                backTo.css('top', '-900px');
            }
        });

        // 启用
        $.scrollto(".back-to-top", 800);

8. 固定的navbar

使用css样式中position:sticky属性，具体参考MDN，使用的css样式如下：

1
2
3
4

position: -webkit-sticky; /* 多浏览器支持  */
position: sticky;
top:0;
z-index:9999; /* 保证元素位于最上层 */

sticky定位综合了relative定位和fixed定位，具体来说就是当元素顶部距离大于0px时，元素为relative 定位，当向下滚动，元素距离小于0px时，即原本的元素即将离开视野时，元素表现为fixed 定位，也就会固定在顶部。
sticky元素会固定在离它最近的一个拥有“滚动机制”的祖先上，因此需要注意父元素的高度应为实际高度。

感想

虽然说折腾这些东西花费了很多时间和经历，但是也收获了很多新的知识，所谓不折腾就很难有收获。另外，这些瞎忙活也算是简单的入门级操作，接触了node.js和scss等概念，自己写的javascript代码还很不成熟，之后希望能做一个node.js项目，系统学习一下相关知识。
可能下一次折腾博客的美化又要过好久啦，接下来应该更专注充实博客的内容。感觉自己写技术类的文章还是比较不成熟，还有很多进步空间，一是要多写多练，二是准备看一下技术写作的文档教程来学习。
最后，一定一定要好好利用这个假期的时间，不断进步学习！！！

参考

  1. pjax项目地址 https://github.com/MoOx/pjax
  2. Aplayer项目地址 https://github.com/MoePlayer/APlayer
  3. plyr项目地址 https://github.com/sampotts/plyr
  4. 巨硬(必应)每日壁纸接口 https://atlinker.cn/2019/07/28/bing.html
  5. NProgress项目地址 https://github.com/rstacruz/nprogress
  6. Hexo 搭建个人博客系列：主题美化篇 http://yearito.cn/posts/hexo-theme-beautify.html
  7. 深入理解position sticky粘性定位的计算规则 https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/
Updated on 30310-09-03
 博客, HTML5
Back | Home