zkpeace.com

如果您在浏览本网站时遇到Bug、加载异常、认知错误请、错别字等等，请给我留言哈，拜托了。

本博客是我个人生活、工作、学习展示的入口，在这里基本上可以找到关于我的所有公开信息。

最近发现Butterfly主题的作者更新了新的 3.7 版本 Butterfly 主题，加上了我心心念的 pjax 功能，于是脑袋一热把博客主题接着魔改了，然后越改越多最后直接完全不一样了。索性记录一下魔改方案，用到的知识和中途遇到的问题。也算是对这个 2.0 版本个站写一个施工总结，日后专注在内容上，表面功夫该省略的就省略了。不过以前的站点下的留言不会同步了，就在下面放个旧站的链接纪念一下吧。

旧站访问地址

思路

设计风格

在设计上我尝试了添加各种功能性和装饰性的 3d 模型，现在主要应用在了关于我界面一方面是因为个人不太喜欢扁平化的设计，不太满足于 2D 显示的效果，另一方面是为了练习 3d 建模展示的自己的3d 建模作品。虽然现在用的大部分是免费资源模型，但是日后会将此站的模型替换成自己的模型，在主页使用three.js创建一个交互式的 3d 场景，当然这都是后话，不过我相信随着 AR/MR 设备的到来,未来 3d 建模的应用会非常广泛所以练习一下肯定很有用处。
尝试数据可视化，关于我页面利用 echarts 数据可视化直观的展示我的个人信息。
如果仔细看的话还可以发现本站的卡片框是有毛玻璃效果的，由于我还是喜欢简单的黑白背景所以效果不太明显。
另外本站尽量的将每个页面精简到只有一个功能，缩短页面的长度，让主要内容更加突出，例如首页只留下一个幻灯片，博客页面只留下了博客相关的内容，其他页面尽可能去除与该页面无关的侧边栏。

性能优化

主要是适配了 Pjax, 进入网站后可以一次性加载大部分 js 文件，访问其他页面不需要重新加载，大大提高访问速度，自己一直想尝试自己实现，但是失败了，再次感谢jerry添加此功能，当然在魔改的过程中还是踩了不少坑，这个下面会介绍到。

pjax loads html from your server into the current page without a full page load. It’s ajax with real permalinks, page titles, and a working back button that fully degrades. Whenever the time changes, a full page load has happened. If the time doesn’t change, no full page load has occurred. The idea is you can’t tell the difference between pjax page loads and normal page loads. On complicated sites, browsing just “feels faster.”

使用了自动化构建的工具 Gulp 把代码压缩了一下，但是压缩图片是出现了问题，gulp插件gulp-imagemin报错如下
Error: spawn /YOUR_PROJECT_PATH/node_modules/jpegtran-bin/vendor/jpegtran ENOENT
修复方法在终端中执行如下语句：
yarn add --force jpegtran-bin

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

使用PWA（Progressive Web Apps）优化网站的使用体验。

PWA的中文名叫做渐进式网页应用，早在2014年， W3C 公布过 Service Worker 的相关草案，但是其在生产环境被 Chrome 支持是在 2015 年。因此，如果我们把 PWA 的关键技术之一 Service Worker 的出现作为 PWA 的诞生时间，那就应该是 2015 年。自 2015 年以来，PWA 相关的技术不断升级优化，在用户体验和用户留存两方面都提供了非常好的解决方案。PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。需要特别说明的是，PWA 不是特指某一项技术，而是应用了多项技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push，等等。PWA的核心目标就是提升 Web App 的性能，改善 Web App 的用户体验。媲美native的流畅体验，将网络之长与应用之长相结合。作者：王玉略链接：https://juejin.cn/post/6844903556470816781 来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

首页

首页改成连播图的模式。

#carousel
    .carousel-box.fade
        img(src="https://cdn.dribbble.com/users/41854/screenshots/2840845/substance_d.gif")
        .site-info
            h1.site-title  ZHANG <br/> KUANGPU .
            .site-subtitle 攻城狮，斜杠青年<br/> 喜欢摄影，旅行 & 动物<br/> 你可以在这找到我的 <a href="/blog-cn/">博客</a> 和 <a href="/blog-cn/gallery">相册</a>.     
    .carousel-box.fade
        img(src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/0696b099875119.5eff5305b0343.gif")
        .site-info
            h1.site-title  COOPERATION <br/> & HIRE ME
            .site-subtitle 求职中，想找ML,LoT或者 AR相关岗位<br/>欢迎查看我的 <a href="/blog-cn/profile/">简历</a> 和 <a href="/blog-cn/profile/">项目</a>  对我感兴趣请务必<a>联系我</a>。      

    #carousel-indictors
        span.carousel-dot(onclick="currentSlide(1)")
        span.carousel-dot(onclick="currentSlide(2)")

var slideIndex = 1;
showSlides(slideIndex = 1)
// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("carousel-box");
    var dots = document.getElementsByClassName("carousel-dot");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
}

#carousel
    img
        width: 100%
        height: 100%
        object-fit: cover
    .carousel-box
        display: none
        height: 100%
        width: 100%
        overflow: hidden
        .site-info
            position: absolute
            bottom: 1rem
            padding: 0
            width: 100%
            .site-title,
            .site-subtitle
                text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
                line-height: 1.4
                letter-spacing: 4px
                width: 70%
            .site-title
                margin: 2rem
                color: var(--white)
                font-size: 2rem
                +maxWidth600()
                    margin: 2rem 1rem
                    font-size: 2em
                +minWidth2000()
                    margin: 2rem 3rem
                    font-size: 5em
            .site-subtitle
                margin: 2rem
                color: var(--white)
                font-size: 1.4em
                opacity : .8
                font-weight: normal
                +maxWidth600()
                    font-size: 1.2em
                    margin: 2rem 1rem
                +minWidth2000()
                    margin: 2rem 3rem
                    font-size: 2.5em
                a
                    color: var(--white)
                    background: rgba(255, 255, 255, .3)
                    border-radius: 16px
                    &:hover
                        background: rgba(255, 255, 255, .8)
                    
    #carousel-indictors
        // text-align:center
        position: absolute
        bottom: 1rem
        right: 1rem
        margin: 2rem
        +maxWidth600()
            margin: 2rem 0rem
        .carousel-dot 
            cursor: pointer
            height: 20px
            width: 20px
            margin: 10px 2px 0 2px
            background-color: var(--light-grey)
            border-radius: 50%
            display: block
            opacity : .3
            transition: background-color 0.6s ease
            +maxWidth600()
                height: 10px
                width: 10px
        .active, .carousel-dot:hover 
            // background-color: var(--white)
            opacity : 1
    /* Fading animation */
    .fade
        -webkit-animation-name: fade;
        -webkit-animation-duration: .5s;
        animation-name: fade;
        animation-duration: .5s;

    @-webkit-keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
    }

    @keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
    }

博客

blog

博客页与首页分离，去除了顶部图片.
右侧边栏只放了座右铭和最新博文两个 widgets.
左侧博文列表加大了首条博文高度，用于突出置顶文章.
标签页(未完成)
分类页（未完成）
重新加了一个展示书影音的‘豆瓣’页面，直接在页面左侧用iframe插入了豆瓣的个人资料库页面，在右侧添加了最近更新的有关书影音的博文。

douban

简历

Dashboard 仪表盘风格设计
大量使用 3D 元素，例如用了六个 3d 图标展示了我的兴趣爱好。

使用 Echarts 制作了三个图标：甘特图，旭日图，雷达图分别用来展示履历，技能和性格。

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11， Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。
你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。
ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。
为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。
通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。
几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载（4.0+）的支持，你可以使用 WebSocket 或者对数据分块后加载，加载多少渲染多少！不需要漫长地等待所有数据加载完再进行绘制。

var chartDom = document.getElementById('gantt');
var myChart = echarts.init(chartDom);
var option;

var data = [];
var dataCount = 10;
var startTime = +new Date();
var nowTime = +new Date();
var categories = ['学历', '工作', '位置'];

var oneYear = 31557600000;
var oneMonth = 2629800000;
var baseTime = 0;
var Time2013 = oneYear*43;
var Time2017 = Time2013 + oneYear*4;
var Time2018 = Time2013 + oneYear*5;
var data1 = [{
            name: '青岛大学,学士学位',
            value: [
                1,
                Time2013+oneMonth*9,
                Time2017+oneMonth*9,
                oneYear
            ],
            itemStyle: {
                normal: {
                    color: '#ff6b81',

                }
            }
        },{
            name: 'Uni Bonn,硕士学位',
            value: [
                1,
                Time2018+oneMonth*4,
                Time2018+oneYear*3,
                oneYear*3
            ],
            itemStyle: {
                normal: {
                    color: '#ff6b81',
  
                }
            }
        },{
            name: '青大创新实验室,Group leader',
            value: [
                0,
                Time2013+oneYear+oneMonth*9,
                Time2013+oneYear*2+oneMonth*9,
                oneYear*2
            ],
            itemStyle: {
                normal: {
                    color: '#1e90ff',

                }
            }
        },{
            name: '丸坐奶茶店,煮茶师',
            value: [
                0,
                Time2013+oneYear*7-oneMonth*2,
                Time2013+oneYear*7+oneMonth*4,
                oneYear*3
            ],
            itemStyle: {
                normal: {
                    color: '#1e90ff',

                }
            }
        },{
            name: '华为科技,测试工程师(实习)',
            value: [
                0,
                Time2013+oneYear*7+oneMonth*6,
                nowTime,
                oneYear*3
            ],
            itemStyle: {
                normal: {
                    color: '#1e90ff',

                }
            }
        },{
            name: '青岛,中国',
            value: [
                2,
                Time2013+oneMonth*9,
                Time2013+oneYear*4,
                oneYear*3
            ],
            itemStyle: {
                normal: {
                    color: '#f1c40f',

                }
            }
        },{
            name: '波恩,德国',
            value: [
                2,
                Time2018+oneMonth*4,
                nowTime,
                oneYear*3
            ],
            itemStyle: {
                normal: {
                    color: '#f1c40f',

                }
            }
        },{
            name: '惠与科技,培训生',
            value: [
                0,
                Time2017+8*oneMonth,
                Time2018+4*oneMonth,
                oneYear
            ],
            itemStyle: {
                normal: {
                    color: '#1e90ff',

                }
            }
        },];
        

function renderItem(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);
    var height = api.size([0, 1])[1] * 0.6;

    var rectShape = echarts.graphic.clipRectByRect({
        x: start[0],
        y: start[1] - height / 2,
        width: end[0] - start[0],
        height: height,
    }, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height,
    });

    return rectShape && {
        type: 'rect',
        transition: ['shape'],
        shape: {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height,
            r: 4
        },
        style: api.style()
    };
}


option = {
    tooltip: {
        formatter: function (params) {
            // return params.marker + params.name + ': ' + params.value[3] + ' ms';
            return params.marker + params.name;
        }
    },
    dataZoom: [{
        type: 'inside',
        filterMode: 'weakFilter',
        showDataShadow: false,
    }, {
        type: 'inside',
        filterMode: 'weakFilter'
    }],
    grid: {
        height: '60%',
        top: 25,
        left:20,
        width:'93%'

    },
    xAxis: {
        type:'time',
        min: Time2013+oneMonth*9,
        max: nowTime,
        axisLabel:{
            fontSize: 8,
            color: '#a4b0be',
        }
  
    },
    yAxis: {
        data: categories,
        axisTick :{
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel:{
            rotate: 90,
            fontSize: 8,
            color: '#a4b0be',
        }
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        itemStyle: {
            borderRadius : 80,
            opacity: 0.8,
            shadowColor: 'rgba(0,0,0,.2)',
            shadowBlur: 5,
            shadowOffsetX: 4,
            shadowOffsetY: 4,
        },
        encode: {
            x: [1, 2],
            y: 0
        },
        data: data1
    }]
};

option && myChart.setOption(option);


var chartDom = document.getElementById('sun');
var myChart = echarts.init(chartDom);
var option;
var data = [{ 
        name: '智能系统',
        value: 8,
        children: [{
            name: 'Robotic',
            value: 3,
            visualMap: false,
            itemStyle:{
                color: '#b5ea7b'
            },
            children: [{
                name: 'SLAM',
                value: 2,
                visualMap: false,
                itemStyle:{
                    color: '#c6ef9a'
                },
            }]
        }, {
            name: ' Mechine learning',
            value: 3,
            visualMap: false,
            itemStyle:{
                color: '#b5ea7b'
            },
            children: [{
                name: 'Reinforcement learning',
                value: 1,
                visualMap: false,
                itemStyle:{
                    color: '#c6ef9a'
                },
            }]
        }, {
            name: 'LoT',
            value: 2,
            visualMap: false,
            itemStyle:{
                color: '#b5ea7b'
            },
        }]
    }, {
        name: 'Engineering Capabilities',
        value: 9,
        children: [{
            name: 'Python',
            value: 3,
            visualMap: false,
            itemStyle:{
                color: '#f8e07f'
            },
            children:[
                {
                    name: 'numpy | scipy | matploit | seaborn',
                    value: 1.5,
                    visualMap: false,
                    itemStyle:{
                        color: '#f4e1a7'
                    },
                },
                {
                    name: 'pytorch',
                    value: 1.5,
                    visualMap: false,
                    itemStyle:{
                        color: '#f4e1a7'
                    },
                },
            ]
        }, {
            name: 'C++',
            value: 2,
            visualMap: false,
            itemStyle:{
                color: '#f8e07f'
            },
        },{
            name: 'Javascript | CSS | H5',
            value: 3,
            visualMap: false,
            itemStyle:{
                color: '#f8e07f'
            },
            children:[
                {
                    name: 'vue | Mini-APP | stylus | pug',
                    value: 2,
                    visualMap: false,
                    itemStyle:{
                        color: '#f4e1a7'
                    },
                },
                {
                    name: 'echarts|three.js',
                    value: .5,
                    visualMap: false,
                    itemStyle:{
                        color: '#f4e1a7'
                    },
                },
            ]
        }]
}, {
    name: 'Digital Media',
    children: [{
        name: 'Graphic Design',
        visualMap: false,
        value: .8,
        itemStyle:{
            color: '#ffb7c2'
        }
     },{
            name: 'UI/UX',
            value: 0.5,
            visualMap: false,
            itemStyle:{
                color: '#ffb7c2'
            },
            children: [{
                name: 'Figma | PS ',
                value: 0.5,
                visualMap: false,
                itemStyle:{
                    color: '#ffb7c2'
                },
            }]
        },{
            name: '3D modeling',
            value: 0.8,
            visualMap: false,
            itemStyle:{
                color: '#ffb7c2'
            },
            children: [{
                name: 'Blender',
                value: 0.8,
                visualMap: false,
                itemStyle:{
                    color: '#ffb7c2'
                },
            }]
    },]
    
}];




option = {
    visualMap: {
        type: 'piecewise',
        min: 0,
        max: 25,
        left: 'right',
        top: 20,
        textGap: -70,
        itemWidth: 80,
        itemHeight: 20,
        itemGap: 8,
        pieces: [
            {value: 8, label: '理论能力', color: '#97e245'}, 
            {value: 9, label: '工程能力', color: '#f4d142'}, 
            {value: 2.1, label: '其他能力', color: '#ff8fa0'}, 
        ],
        textStyle:{
            color: '#fff'
        }
    },
    tooltip:{
        formatter: function (params) {
            return params.marker + params.name;
        },
    },
    series: {
        label: {
            show: false
        },

        type: 'sunburst',
        data: data,
        radius: [40, '90%'],
        center: ['35%', '50%'],
        itemStyle: {
            borderRadius: 4,
            borderWidth: 0,
            shadowColor: 'rgba(0,0,0,.2)',
            shadowBlur: 14,
        },
        
    }
};
option && myChart.setOption(option);

var chartDom = document.getElementById('radar');
var myChart = echarts.init(chartDom);
var option;


var indicator = [{
        text: 'Ne',
        max: 2000,
    },
    {
        text: 'Ni',
        max: 2000
    },
    {
        text: 'Se',
        max: 2000
    },
    {
        text: 'Si',
        max: 2000
    },
    {
        text: 'Te',
        max: 2000
    },
    {
        text: 'Ti',
        max: 2000
    },
    {
        text: 'Fi',
        max: 2000
    },
    {
        text: 'Fe',
        max: 2000
    }
];
var dataArr = [{
        name: "Self-evaluation",
        value: [1100, 1100, 1300, 700, 1200, 1400, 500, 1100],
        lineStyle: {
            normal: {
                color: "rgba(2255,255,255,0)"
            }
        },
        areaStyle: {
            normal: { // 单项区域填充样式
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                            offset: 0,
                            color: '#7bed9f'
                        },
                        {
                            offset: 1,
                            color: '#27ae60'
                        }
                    ],
                    false
                ),
                opacity: 1, // 区域透明度
                // 设置扇形的阴影
                shadowBlur: 12,
                shadowColor: 'rgba(77,214,189,0.8)',
                shadowOffsetX: 12,
                shadowOffsetY: 12
            }
        }
    },
    {
        name: "MBTI Test",
        value: [1600, 700, 1100, 800, 1100, 1400, 1400, 600],

        lineStyle: {
            normal: {
                color: "rgba(2255,255,255,0)"
            }

        },

        areaStyle: {
            normal: { // 单项区域填充样式
                color: new echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    1,
                    [{
                            offset: 0,
                            color: '#eccc68'
                        },
                        {
                            offset: 1,
                            color: '#ff4757'
                        }
                    ],
                    false
                ),
                opacity: 1, // 区域透明度
                // 设置扇形的阴影
                shadowBlur: 12,
                shadowColor: 'rgba(137,201,255,0.50)',
                shadowOffsetX: 6,
                shadowOffsetY: 6
            }
        }
    }
];
option = {
    tooltip:{},
    color: ['#22CF96', '#ff4757'],
    // backgroundColor: "#fff",
    legend: {
        show: true,
        data: ['MBTI Test', 'Self-evaluation'],
        x: 'right',
        y: 'bottom',
        icon: "roundRect",
        itemWidth: 10,
        itemHeight: 10,
        bottom: 10,
		padding: 10,
        textStyle: {
            color: '#666666',
            fontSize: 0
        },
    },
    radar: {
        radius: '75%',
        name: {
            color: '#a4b0be',
            fontSize: 10,
            align: 'center',
            // lineHeight: 3
        },
        nameGap: 2,
        indicator: indicator,
        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: false
        },
        axisLine: { //指向外圈文本的分隔线样式
            show: false
        },

        splitLine: {
            lineStyle: {
                color: '#ddd', // 分隔线颜色
                width: .5, // 分隔线线宽
            }
        },
    },
    series: [{
        type: 'radar',
        symbolSize: 0,
        data: dataArr,

    }]
};
option && myChart.setOption(option);

使用了 hexo-githubcalendar 插件抓取展示了 github calendar 数据。主要用了 canvas 绘图。

hexo-githubcalendar 插件：这个插件是魔改的 Bloggify/github-calendar 的代码，我重新改了样式如下：

// Canvas例子
CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius) {
    if (width < 2 * radius) radius = width / 2;
    if (height < 2 * radius) radius = height / 2;
    this.beginPath();
    this.moveTo(x + radius, y);
    this.arcTo(x + width, y, x + width, y + height, radius);
    this.arcTo(x + width, y + height, x, y + height, radius);
    this.arcTo(x, y + height, x, y, radius);
    this.arcTo(x, y, x + width, y, radius);
    this.closePath();
    return this;
}

var github_canlendar = (git_user, git_color) => {
    var git_githubapiurl = "https://python-github-calendar-api.vercel.app/api?" + git_user;
    var git_fixed = 'fixed';
    var git_px = 'px';
    var git_month = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
    var git_monthchange = [];
    var git_oneyearbeforeday = '';
    var git_thisday = '';
    var git_amonthago = '';
    var git_aweekago = '';
    var git_weekdatacore = 0;
    var git_datacore = 0;
    var git_total = 0;
    var git_datadate = '';
    var git_git_data = [];
    var git_positionplusdata = [];
    var git_firstweek = [];
    var git_lastweek = [];
    var git_beforeweek = [];
    var git_thisweekdatacore = 0;
    var git_mounthbeforeday = 0;
    var git_mounthfirstindex = 0;
    var git_crispedges = 'crispedges';
    var git_thisdayindex = 0;
    var git_amonthagoindex = 0;
    var git_amonthagoweek = [];
    var git_firstdate = [];
    var git_first2date = [];
    var git_montharrbefore = [];
    var git_monthindex = 0;
    var retinaCanvas = (canvas, context, ratio) => {
        if (ratio > 1) {
            var canvasWidth = canvas.width;
            var canvasHeight = canvas.height;
            canvas.width = canvasWidth * ratio;
            canvas.height = canvasHeight * ratio;
            canvas.style.width = '100%';
            canvas.style.height = canvasHeight + 'px';
            context.scale(ratio, ratio);
        }
    };


    function responsiveChart() {
        var ratio = window.devicePixelRatio || 1
        var git_tooltip_container = document.getElementById('git_tooltip_container');
        var git_x = '';
        var git_y = '';
        var git_span1 = '';
        var git_span2 = '';
        var c = document.getElementById("gitcanvas");
        c.style.width = '100%';
        c.style.height = '';
        var cmessage = document.getElementById("gitmessage");
        var ctx = c.getContext("2d");
        width = c.width = document.getElementById("gitcalendarcanvasbox").offsetWidth;
        height = c.height = 9 * 0.96 * c.width / git_data.length;
        retinaCanvas(c, ctx, ratio)
        var linemaxwitdh = height / 9;
        var lineminwitdh = 0.8 * linemaxwitdh;
        var setposition = {
            x: 0.02 * width,
            y: 0.025 * width
        };
        if (document.body.clientWidth > 700) {
            ctx.font = 'bold 6px serif';
            ctx.fillStyle = '#aaa';
            ctx.fillText("日", 0, 1.9 * linemaxwitdh);
            ctx.fillText("二", 0, 3.9 * linemaxwitdh);
            ctx.fillText("四", 0, 5.9 * linemaxwitdh);
            ctx.fillText("六", 0, 7.9 * linemaxwitdh);
            var monthindexlist = width / 24;
            for (var index in git_monthchange) {
                ctx.fillText(git_monthchange[index], monthindexlist, 0.7 * linemaxwitdh);
                monthindexlist = monthindexlist + width / 12
            }
        }
        c.onmousemove = function (event) {
            if (document.querySelector('.gitmessage')) {
                git_tooltip_container.innerHTML = ""
            }
            getMousePos(c, event)
        };
        git_tooltip_container.onmousemove = function (event) {
            if (document.querySelector('.gitmessage')) {
                git_tooltip_container.innerHTML = ""
            }
        };
        for (var week in git_data) {
            weekdata = git_data[week];
            for (var day in weekdata) {
                var dataitem = {
                    date: "",
                    count: "",
                    x: 0,
                    y: 0
                };
                git_positionplusdata.push(dataitem);
                ctx.shadowOffsetY = 1;
                ctx.shadowOffsetX = 1;
                ctx.shadowColor = 'rgba(200,200,200,.8)';
                ctx.shadowBlur = 1;
                ctx.fillStyle = git_thiscolor(git_color, weekdata[day].count);
                setposition.y = Math.round(setposition.y * 100) / 100;
                dataitem.date = weekdata[day].date;
                dataitem.count = weekdata[day].count;
                dataitem.x = setposition.x;
                dataitem.y = setposition.y;
                ctx.roundRect(setposition.x, setposition.y, lineminwitdh, lineminwitdh, 1.9);
                ctx.fill();
                setposition.y = setposition.y + linemaxwitdh
            }
            setposition.y = 0.025 * width;
            setposition.x = setposition.x + linemaxwitdh
        }


        function getMousePos(canvas, event) {
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left * (canvas.width / rect.width);
            var y = event.clientY - rect.top * (canvas.height / rect.height);
            for (var item of git_positionplusdata) {
                var lenthx = x - item.x;
                var lenthy = y - item.y;
                if (0 < lenthx && lenthx < lineminwitdh) {
                    if (0 < lenthy && lenthy < lineminwitdh) {
                        git_span1 = item.date;
                        git_span2 = item.count;
                        git_x = event.clientX - 100;
                        git_y = event.clientY - 60;
                        html = tooltip_html(git_x, git_y, git_span1, git_span2);
                        append_div_gitcalendar(git_tooltip_container, html)
                    }
                }
            }
        }
    }

    function addlastmonth() {
        if (git_thisdayindex === 0) {
            thisweekcore(52);
            thisweekcore(51);
            thisweekcore(50);
            thisweekcore(49);
            thisweekcore(48);
            git_thisweekdatacore += git_firstdate[6].count;
            git_amonthago = git_firstdate[6].date
        } else {
            thisweekcore(52);
            thisweekcore(51);
            thisweekcore(50);
            thisweekcore(49);
            thisweek2core();
            git_amonthago = git_first2date[git_thisdayindex - 1].date
        }
    }

    function thisweek2core() {
        for (var i = git_thisdayindex - 1; i < git_first2date.length; i++) {
            git_thisweekdatacore += git_first2date[i].count
        }
    }

    function thisweekcore(index) {
        for (var item of git_data[index]) {
            git_thisweekdatacore += item.count
        }
    }

    function addlastweek() {
        for (var item of git_lastweek) {
            git_weekdatacore += item.count
        }
    }

    function addbeforeweek() {
        for (var i = git_thisdayindex; i < git_beforeweek.length; i++) {
            git_weekdatacore += git_beforeweek[i].count
        }
    }

    function addweek(data) {
        if (git_thisdayindex === 6) {
            git_aweekago = git_lastweek[0].date;
            addlastweek()
        } else {
            lastweek = data.contributions[51];
            git_aweekago = lastweek[git_thisdayindex + 1].date;
            addlastweek();
            addbeforeweek()
        }
    }

    fetch(git_githubapiurl).then(data => data.json()).then(data => {
        git_data = data.contributions;
        git_total = data.total;
        git_first2date = git_data[48];
        git_firstdate = git_data[47];
        git_firstweek = data.contributions[0];
        git_lastweek = data.contributions[52];
        git_beforeweek = data.contributions[51];
        git_thisdayindex = git_lastweek.length - 1;
        git_thisday = git_lastweek[git_thisdayindex].date;
        git_oneyearbeforeday = git_firstweek[0].date;
        git_monthindex = git_thisday.substring(5, 7) * 1;
        git_montharrbefore = git_month.splice(git_monthindex, 12 - git_monthindex);
        git_monthchange = git_montharrbefore.concat(git_month);
        addweek(data);
        addlastmonth();
        var html = github_main_box(git_monthchange, git_data, git_user, git_color, git_total, git_thisweekdatacore, git_weekdatacore, git_oneyearbeforeday, git_thisday, git_aweekago, git_amonthago);
        append_div_gitcalendar(github_container, html);
        if (document.getElementById('github_loading')) {
            document.getElementById('github_loading').remove()
        };
        responsiveChart()
    }).catch(function (error) {
        console.log(error)
    });
    // window.onresize = function () {
    //     if(document.getElementById('gallery-group-main')){
    //         responsiveChart()
    //     }
    // };
    window.onscroll = function () {
        if (document.querySelector('.gitmessage')) {
            git_tooltip_container.innerHTML = ""
        }
    };
    var git_thiscolor = (color, x) => {
        if (x === 0) {
            var i = parseInt(x / 2);
            return color[0]
        } else if (x < 2) {
            return color[1]
        } else if (x < 20) {
            var i = parseInt(x / 2);
            return color[i]
        } else {
            return color[9]
        }
    };
    var tooltip_html = (x, y, span1, span2) => {
        var html = '';
        // html += '<div class="gitmessage" style="top: 1px;left:1px;position: fixed;z-index:999999"><div class="angle-wrapper" style="display:block;"><span>' + span1 + '&nbsp;</span><span>' + span2 + ' 次上传</span></div></div>';
        return html
    };
    var github_canvas_box = () => {
        var html = '<div id="gitcalendarcanvasbox"> <canvas id="gitcanvas" style="animation: none;"></canvas></div>';
        return html
    };
    var github_info_box = (user, color) => {
        var html = '';
        html += '<div id="git_tooltip_container"></div><div class="contrib-footer clearfix mt-1 mx-3 px-3 pb-1"><div class="float-left text-gray">Github 2020-2021 <a href="https://github.com/' + user + '" target="blank">@' + user + '</a></div><div class="contrib-legend text-gray">Less <ul class="legend"><li style="background-color:' + color[0] + '"></li><li style="background-color:' + color[2] + '"></li><li style="background-color:' + color[4] + '"></li><li style="background-color:' + color[6] + '"></li><li style="background-color:' + color[8] + '"></li></ul>More </div></div>';
        return html
    };
    var github_main_box = (monthchange, git_data, user, color, total, thisweekdatacore, weekdatacore, oneyearbeforeday, thisday, aweekago, amonthago) => {
        var html = '';
        var canvasbox = github_canvas_box();
        var infobox = github_info_box(user, color);
        var style = github_main_style();
        html += '<div class="position-relative"><div class="border py-2 graph-before-activity-overview"><div class="js-gitcalendar-graph mx-md-2 mx-3 d-flex flex-column flex-items-end flex-xl-items-center overflow-hidden pt-1 is-graph-loading graph-canvas gitcalendar-graph height-full text-center">' + canvasbox + '</div>' + infobox + '</div></div>' + style;
        return html
    };
    var github_main_style = () => {
        style = '<style>#github_container{text-align:center;margin:.2rem auto;width:100%; height:100%;display:flex;display:-webkit-flex;justify-content:center;align-items:center;flex-wrap:wrap;}.gitcalendar-graph text.wday,.gitcalendar-graph text.month{font-size:10px;fill:#aaa;}.contrib-legend{text-align:right;padding:0 14px 10px 0;display:inline-block;float:right;}.contrib-legend .legend{display:inline-block;list-style:none;margin:0 5px;position:relative;bottom:-1px;padding:0;}.contrib-legend .legend li{display:inline-block;width:10px;height:10px;}.text-small{font-size:12px;color:#767676;}.gitcalendar-graph{padding:15px 0 0;text-align:center;}.contrib-column{text-align:center;border-left:1px solid #ddd;border-top:1px solid #ddd;font-size:11px;}.contrib-column-first{border-left:0;}.table-column{padding:10px;display:table-cell;flex:1;vertical-align:top;}.contrib-number{font-weight:300;line-height:1.3em;font-size:24px;display:block;}.gitcalendar img.spinner{width:70px;margin-top:50px;min-height:70px;}.monospace{text-align:center;color:#000;font-family:monospace;}.monospace a{color:#1D75AB;text-decoration:none;}.contrib-footer{font-size:11px;padding:0 10px 12px;text-align:left;width:100%;box-sizing:border-box;height:26px;}.left.text-muted{float:left;margin-left:9px;color:#767676;}.left.text-muted a{color:#4078c0;text-decoration:none;}.left.text-muted a:hover,.monospace a:hover{text-decoration:underline;}h2.f4.text-normal.mb-3{display:none;}.float-left.text-gray{float:left;}#user-activity-overview{display:none;}.day-tooltip{white-space:nowrap;position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.85);border-radius:3px;display:none;pointer-events:none;}.day-tooltip strong{color:rgba(0, 0, 0, .85);}.day-tooltip.is-visible{display:block;}.day-tooltip:after{position:absolute;bottom:-10px;left:50%;width:5px;height:5px;box-sizing:border-box;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.85)}.position-relative{width:100%;}@media screen and (max-width:650px){.contrib-column{display:none}}.angle-wrapper{z-index:9999;display:inline;width:200px;height:40px;position:relative;padding:5px 0;background:rgba(0,0,0,0.);border-radius:8px;text-align:center;color:white;}.angle-box{position:fixed;padding:10px}.angle-wrapper span{padding-bottom:1em;}.angle-wrapper:before{content:"";width:0;height:0;border:10px solid transparent;border-top-color:rgba(0,0,0,0.8);position:absolute;left:47.5%;top:100%;}</style>';
        return style
    }
};
var append_div_gitcalendar = (parent, text) => {
    if (typeof text === 'string') {
        var temp = document.createElement('div');
        temp.innerHTML = text;
        var frag = document.createDocumentFragment();
        while (temp.firstChild) {
            frag.appendChild(temp.firstChild)
        }
        parent.appendChild(frag)
    } else {
        parent.appendChild(text)
    }
};
var loading_git = (color) => {
    loading = '<div id="github_loading" style="width:10%;height:100%;margin:3rem auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="' + color + '" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div>';
    return loading
};

(function () {
    var git_user = 'Uzizkp';
    var github_container = document.getElementById('github_container');
    var github_loading = document.getElementById('github_loading');
    var git_purple = ['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f', ];
    var git_green = ['rgba(235,237,240,.2)', '#7bed9f', '#5be988', '#44d981', '#24e260', '#eccc68', '#f1c40f', '#ffa502', '#ff6348', '#ff6b81', '#ff4757'];
    var git_blue = ['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c', ];
    var git_color = git_green;
    append_div_gitcalendar(github_container, loading_git(git_color[4]));
    github_canlendar(git_user, git_color)
})()

Revolvermaps访客记录是行内添加 js 代码，因为 pjax 的存在，不刷新无法加载js，所以用 jquery 重新写了一个载入函数，用$(#id).append()直接把 js 添加页面。
Revolvermaps是一个访客地图生成工具，提供了使用 webgl 技术生成的2D 和 3D的访客地图，并且和其他访客地图相比，主题可以 DIY ，正好和我3D元素搭配起来，下图是我自定义的3d访客地图。但是 webgl版本的地图需要直接将 js 代码添加html 文件里，导致用于 js 重载的 data-pjax标签失效，必须刷新页面才能运行这个 js 脚本，于是写了一个 jquery 脚本让这段代码每次出现都重新加载一次。注意这里不能使用DOM Document Object，例如document.getElementById("demo").innerHTML添加js 代码。
```
<div id="visitorMap" class="vistor-map"></div>  
<script data-pjax src="/blog-cn/js/visitorMap.js"></script>
```
```
$('#visitorMap').append('<script src="//rf.revolvermaps.com/0/0/6.js?i=5n8y7sbczs0&amp;m=0c&amp;c=baff00&amp;cr1=ffffff&amp;f=ubuntu&amp;l=0&amp;v0=-10&amp;z=13&amp;hi=30&amp;he=6&amp;hc=000000&amp;cw=1e90ff&amp;cb=f1c40f"></script>')
```

项目

项目展示页面已经完成，也是费了些心思考虑怎么展示项目最合适，现在的成果我自己非常满意。

媒体

相册页面调整成长方形阵列的形式，去除多余的元素。
相册可以直接连接到博文、项目、服务
频道改成视频播客的形式，直接嵌入我的 b 站视频。

精选一些自己制作的（会标上原创）或者喜欢的b站视频，在这个页面收藏，可以随机播放视频。

<div id="fm-container">
  <div class="fm-wrapper" id="fm-player">
    <div class="player">
      <div class="player__top">
        <div class="player-cover" >
          <iframe id="fm-video-player" class="player-cover__item" src="//player.bilibili.com/player.html?aid=60317759&bvid=BV1Pt41177M1&cid=105010917&page=1&danmaku=0"  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: relative; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
        </div>
        <div class="player-controls">
          <div class="player-controls__item -favorite active" @click="favorite">
            <i class="fas fa-heart icon"></i>
          </div>
          <a href="https://www.bilibili.com/video/BV1Pt41177M1r?share_souce=copy_web" id="fm-video-link" target="_blank" class="player-controls__item">
            <i class="fas fa-external-link-alt icon"></i>
          </a>
          <div class="player-controls__item" id = "pre-fm-video">
            <i class="fas fa-arrow-left icon"></i>
          </div>
          <div class="player-controls__item" id="next-fm-video">
            <i class="fas fa-arrow-right icon"></i>
          </div>
          <!-- <div class="player-controls__item -xl js-play" @click="play"> -->
          <div class="player-controls__item -xl" id="random-fm-video">
            <!-- <i class="far fa-pause-circle icon"></i> -->
            <svg t="1622973493445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2686" width="200" height="200"><path d="M425.984 12.288c-43.008 43.008-12.288 69.632 81.92 69.632 182.272 2.048 358.4 126.976 413.696 296.96 32.768 98.304 16.384 258.048-30.72 331.776l-38.912 57.344L839.68 716.8c-6.144-28.672-24.576-51.2-40.96-51.2-22.528 0-30.72 28.672-30.72 112.64v112.64l118.784 6.144c94.208 4.096 116.736 0 116.736-26.624 0-16.384-18.432-30.72-40.96-30.72-51.2 0-51.2-4.096 0-102.4C1124.352 419.84 911.36 43.008 546.816 6.144c-57.344-6.144-112.64-4.096-120.832 6.144zM24.576 157.696c4.096 20.48 22.528 34.816 43.008 34.816 43.008-4.096 43.008-4.096-10.24 100.352C26.624 354.304 12.288 417.792 12.288 512 10.24 735.232 139.264 915.456 362.496 995.328c124.928 43.008 272.384 30.72 272.384-24.576 0-20.48-28.672-28.672-102.4-28.672C200.704 942.08-14.336 618.496 126.976 329.728l47.104-94.208 10.24 61.44c6.144 36.864 22.528 61.44 40.96 61.44 22.528 0 30.72-26.624 30.72-112.64V133.12l-118.784-6.144C30.72 120.832 18.432 124.928 24.576 157.696z" p-id="2687"></path></svg>
          </div>
        </div>
      </div>
      <div class="progress">
        <div class="progress__top">
          <div class="album-info">
            <!-- <div class="album-info__name">电台</div> -->
            <div class="album-info__track"><p id="fm-video-title">没有理想的人不伤心</p></div>
          </div>
          <!-- <div class="progress__duration">{{ duration }}</div> -->
        </div>
        <!-- <div class="progress__bar" @click="clickProgress">
          <div class="progress__current" :style="{ width : barWidth }"></div>
        </div> -->
        <!-- <div class="progress__time">{{ currentTime }}</div> -->
      </div>
      <div v-cloak></div>
    </div>
  </div>
</div>
<script data-pjax src="/blog-cn/js/channel.js"></script>

var videos = [
    {   
        title: '没有理想的人不伤心',
        link: 'https://www.bilibili.com/video/BV1Pt41177M1?share_source=copy_web',
        src:"//player.bilibili.com/player.html?aid=60317759&bvid=BV1Pt41177M1&cid=105010917&page=1&danmaku=0",

    },
    {   
        title: '漫长的岁月无谓地流逝',
        link: 'https://www.bilibili.com/video/BV1sJ411r7XK?share_source=copy_web',
        src:"//player.bilibili.com/player.html?aid=79168191&bvid=BV1sJ411r7XK&cid=135482988&page=1&danmaku=0",

    },
    {   
        title: '总有一天你会出现在我身边',
        link: 'https://www.bilibili.com/video/BV1qV411x7Me?share_source=copy_web',
        src:"//player.bilibili.com/player.html?aid=418408290&bvid=BV1qV411x7Me&cid=349576088&page=1",

    },
    ];
var currentFmVideo = 0
$('#next-fm-video').click(function(){
    showFmVideo(currentFmVideo+1)
})
$('#pre-fm-video').click(function(){
    showFmVideo(currentFmVideo-1)
})
$('#random-fm-video').click(function(){
    var n = Math.round(Math.random()*videos.length);
    showFmVideo(n);
    currentFmVideo = n;
})

function showFmVideo(n){
    if(n >= videos.length){
        n = 0;
    };
    if(n < 0){
        n = videos.length - 1;
    }
    currentFmVideo = n;
    $("#fm-video-player").attr("src",videos[n].src);
    $("#fm-video-link").attr("href",videos[n].link);
    $("#fm-video-title").html(videos[n].title);
    
}


#fm-container
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
  }

  .fm-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background-size: cover;
  }
  @media screen and (max-width: 700px), (max-height: 500px) {
    .wrapper {
      flex-wrap: wrap;
      flex-direction: column;
    }
  }

  .player {
    background-color: var(--card-bg);
    width: 400px;
    min-height: 400px;
    box-shadow: var(--card-box-shadow);
    border-radius: 8px;
    padding: 30px;
  }
  @media screen and (max-width: 576px), (max-height: 500px) {
    .player {
      width: 95%;
      padding: 20px;
      margin-top: 75px;
      min-height: initial;
      padding-bottom: 30px;
      max-width: 400px;
    }
  }
  .player__top {
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 4;
  }
  @media screen and (max-width: 576px), (max-height: 500px) {
    .player__top {
      flex-wrap: wrap;
    }
  }
  .player-cover {
    width: 300px;
    height: 300px;
    margin-left: -70px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    z-index: 2;
    border-radius: 8px;
    z-index: 1;
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
    /* transform: scale(0.9); */
    /* filter: blur(10px); */
  }
  @media screen and (max-width: 576px), (max-height: 500px) {
    .player-cover {
      margin-top: -70px;
      margin-bottom: 25px;
      width: 290px;
      height: 230px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  .player-cover__item {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    position: absolute;
    left: 0;
    top: 0;
  }
  .player-cover__item:before {
    content: "";
    background: inherit;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .2);
    display: block;
    z-index: 1;
    position: absolute;
    top: 30px;
    transform: scale(0.9);
    filter: blur(10px);
    opacity: 0.9;
    border-radius: 8px;
  }
  .player-cover__item:after {
    content: "";
    background: inherit;
    width: 100%;
    height: 100%;
    box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
    display: block;
    z-index: 2;
    position: absolute;
    border-radius: 8px;
  }
  .player-cover__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
    user-select: none;
    pointer-events: none;
  }
  .player-controls {
    flex: 1;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  @media screen and (max-width: 576px), (max-height: 500px) {
    .player-controls {
      flex-direction: row;
      padding-left: 0;
      width: 100%;
      flex: unset;
    }
  }
  .player-controls__item {
    display: inline-flex;
    font-size: 30px;
    padding: 5px;
    margin-bottom: 10px;
    color: #acb8cc;
    cursor: pointer;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease-in-out;
  }
  @media screen and (max-width: 576px), (max-height: 500px) {
    .player-controls__item {
      font-size: 26px;
      padding: 5px;
      margin-right: 10px;
      color: #acb8cc;
      cursor: pointer;
      width: 40px;
      height: 40px;
      margin-bottom: 0;
    }
  }
  .player-controls__item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #fff;
    transform: scale(0.5);
    opacity: 0;
    box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2);
    transition: all 0.3s ease-in-out;
    transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88);
  }
  @media screen and (min-width: 500px) {
    .player-controls__item:hover {
      color: #532ab9;
    }
    .player-controls__item:hover::before {
      opacity: 1;
      transform: scale(1.3);
    }
  }
  @media screen and (max-width: 576px), (max-height: 500px) {
    .player-controls__item:active {
      color: #532ab9;
    }
    .player-controls__item:active::before {
      opacity: 1;
      transform: scale(1.3);
    }
  }
  .player-controls__item .icon {
    position: relative;
    z-index: 2;
  }
  .player-controls__item.-xl {
    margin-bottom: 0;
    font-size: 85px;
    filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45));
    color: #fff;
    width: auto;
    height: auto;
    display: inline-flex;
  }
  @media screen and (max-width: 576px), (max-height: 500px) {
    .player-controls__item.-xl {
      margin-left: auto;
      font-size: 75px;
      margin-right: 0;
    }
  }
  .player-controls__item.-xl:before {
    display: none;
  }
  .player-controls__item.-favorite.active {
    color: red;
  }

  [v-cloak] {
    display: none;
  }

  [v-cloak] > * {
    display: none;
  }

  .progress {
    width: 100%;
    margin-top: -15px;
    user-select: none;
  }
  .progress__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .progress__duration {
    color: #71829e;
    font-weight: 700;
    font-size: 20px;
    opacity: 0.5;
  }
  .progress__time {
    margin-top: 2px;
    color: #71829e;
    font-weight: 700;
    font-size: 16px;
    opacity: 0.7;
  }

  .progress__bar {
    height: 6px;
    width: 100%;
    cursor: pointer;
    background-color: #d0d8e6;
    display: inline-block;
    border-radius: 8px;
  }

  .progress__current {
    height: inherit;
    width: 0%;
    background-color: #a3b3ce;
    border-radius: 8px;
  }

  .album-info {
    color: #71829e;
    flex: 1;
    padding-right: 60px;
    user-select: none;
  }
  @media screen and (max-width: 576px), (max-height: 500px) {
    .album-info {
      padding-right: 30px;
    }
  }
  .album-info__name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
    line-height: 1.3em;
  }
  @media screen and (max-width: 576px), (max-height: 500px) {
    .album-info__name {
      font-size: 18px;
      margin-bottom: 9px;
    }
  }
  .album-info__track {
    font-weight: 400;
    font-size: 20px;
    opacity: 0.7;
    font-family: 'Liu Jian Mao Cao', cursive;
    line-height: 1.3em;
    min-height: 52px;
  }
  @media screen and (max-width: 576px), (max-height: 500px) {
    .album-info__track {
      font-size: 18px;
      min-height: 50px;
    }
  }
  .scale-out-enter-active {
    transition: all .35s ease-in-out;
  }

  .scale-out-leave-active {
    transition: all .35s ease-in-out;
  }

  .scale-out-enter {
    transform: scale(0.55);
    pointer-events: none;
    opacity: 0;
  }

  .scale-out-leave-to {
    transform: scale(1.2);
    pointer-events: none;
    opacity: 0;
  }

  .scale-in-enter-active {
    transition: all .35s ease-in-out;
  }

  .scale-in-leave-active {
    transition: all .35s ease-in-out;
  }

  .scale-in-enter {
    transform: scale(1.2);
    pointer-events: none;
    opacity: 0;
  }

  .scale-in-leave-to {
    transform: scale(0.55);
    pointer-events: none;
    opacity: 0;
  }

东西页用来展示种草的物件。使用了sorttablejs.mini.js. 然后重新设计了展示卡片，并且可以直链相关的博文。现在遇到一个问题，在打开pjax的情况下，切换网页的时候卡片不能自动加载，于是现在先把这个页面的pjax关闭了。以后会将它分离出来着一个hexo的插件。

things

足迹页面暂用 google map 记录旅行足迹，国内需要翻墙浏览，以后会用 baidu 地图代替并且可以直连博文。

商店

开始经营一个代购商店

其他

重新设计了 footer 部分，改成了网站地图的形式,并且增加了友链位。
导航栏在非首页无头图的情况下，背景会变换成透明色，并且添加了我的 logo。
小屏模式和暗黑模式进行了大量细节优化。
本站添加了背景音乐，还是托 pjax 的福，切换页面音乐不会刷新。开关在右下角

<audio id="bg-music" class="no-destroy" src="https://blog-1253324855.cos.ap-shanghai.myqcloud.com/picgo/CharlesTheFirst%20-%20Crunksauce%20Vol%20IV%20-%2001%20All%20Ways.mp3"></audio>

function bgMusic() {
    var player = $("#bg-music")[0];
    if (player.paused) {
        /*如果已经暂停*/
        $("#background-music").html("<i class='fas fa-music'></i>")
        player.play(); /*播放*/
    } else {
        $("#background-music").html("<i class='fas fa-play'></i>")
        player.pause(); /*暂停*/
    }

}