hexo（sakura）给博客增添侧边栏（回到顶部，跳转评论，深色模式，播放音乐）

一、前言

1.序

之前butterfly主题有深色模式和阅读模式，感觉很nice，但一直没有动手，直到昨天无意间溜达到小伙伴的博客（Powered by Typecho ※ Theme is Cuteen），又碰巧去点了点深色模式。

嗯，爱了爱了，太喜欢所以移植了一下，对移植也有一定的修改，如果涉及侵权，就删除这个功能；移植到hexo驱动的sakura主题下，当然在sakuraplus主题下已经集成了。

这里做一个笔记，方便以后查看。ejs驱动的主题，都可以跟着轮子造车。

2.效果预览

浮窗小功能，比较nice。

div容器样式：（完整代码在文末）

样式是svg图标，功能是封装到a标签里（herf或者onclinck触发）。

浮窗样式是svg图标，功能控制由jQuery，深色模式就是加对应的css样式（前端的一套）。

二、原理

1.回到顶部

id为btn，当点击时，触发回滚到顶部。会监听滚动条，如果在顶部，就不会出现回到顶部的图标。

js：

 function BackTOP() {
        $("#btn").hide();
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 50) {
                    $("#btn").fadeIn(200);
                } else {
                    $("#btn").fadeOut(200);
                }
            });
            $("#btn").click(function () {
                $('body,html').animate({
                        scrollTop: 0
                    },
                    500);
                return false;
            });
        })
    }
BackTOP();

2.跳转评论

通过a标签的herf路由，直接跳转，我的主题中的评论为valine，这里仅设置为valine的地址。

3.深色模式

深色模式效果：

div容器：

具体过程：
（1）点击触发，先给文章添加一个切换动画，在body加一个属性为 Cuteen_DarkSky 的div容器（这是显示css动画的，切换时太阳落下、月亮升起）

（2）再给body容器的class加一个DarkMode属性（css控制背景变深色，字体变浅色）

（3）同时会记录当前的状态（在切换页面时，不会改变当前状态），cookie记录当前状态（DarkMode为1则为深色模式）。
（4）额外的，没有设置当前主题是否为深色时，在23点到7点间，主题自动设置为深色。
（5）月亮和太阳svg图标切换，设置xlink:href切换样式。

js：

function switchNightMode() {
        $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($("body")), setTimeout(
            function () {
                var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") ||
                    '0';
                (DarkMode == '0') ? ($("html").addClass("DarkMode"), document.cookie = "DarkMode=1;path=/", console
                    .log('夜间模式开启'), $('#modeicon').attr("xlink:href", "#icon-sun")) : ($("html").removeClass(
                        "DarkMode"), document.cookie = "DarkMode=0;path=/", console.log('夜间模式关闭'), $('#modeicon')
                    .attr("xlink:href", "#icon-_moon")), setTimeout(function () {
                    $(".Cuteen_DarkSky").fadeOut(1e3, function () {
                        $(this).remove()
                    })
                }, 2e3)
            }), 50
    }

    function checkNightMode() {
        if ($("html").hasClass("n-f")) {
            $("html").removeClass("day");
            $("html").addClass("DarkMode");
            $('#modeicon').attr("xlink:href", "#icon-sun")
            return;
        }
        if ($("html").hasClass("d-f")) {
            $("html").removeClass("DarkMode");
            $("html").addClass("day");
            $('#modeicon').attr("xlink:href", "#icon-_moon")

            return;
        }
        if (document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '') {
            if (new Date().getHours() >= 23 || new Date().getHours() < 7) {
                $("html").addClass("DarkMode");
                document.cookie = "DarkMode=1;path=/";
                console.log('夜间模式开启');
                $('#modeicon').attr("xlink:href", "#icon-sun")
            } else {
                $("html").removeClass("DarkMode");
                document.cookie = "DarkMode=0;path=/";
                console.log('夜间模式关闭');
                $('#modeicon').attr("xlink:href", "#icon-_moon")
            }
        } else {
            var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
            if (DarkMode == '0') {
                $("html").removeClass("DarkMode");
                $('#modeicon').attr("xlink:href", "#icon-_moon")
            } else if (DarkMode == '1') {
                $("html").addClass("DarkMode");
                $('#modeicon').attr("xlink:href", "#icon-sun")
            }
        }
    }
    checkNightMode();

css：

1. 找到属性名称（.xx是class，#xx是id，xx直接是标签）

   注意在不同主题下，对应的样式class属性名称是不一样的，好比如sakura主题，.DarkMode #page,是class为DarkMode，id为page的内容，.DarkMode p中p为段落，需要明白哪些div容器需要设置为深色，哪些是浅色。
   

2. 设置颜色
   字体color: rgba(255, 255, 255, .6);设置颜色为白色，透明度为0.6，
   背景background-color: #12121c;深色，
   图片.DarkMode img { filter: brightness(.7); }亮度为0.7，
3. 切换动画
   Cuteen_DarkSky是切换动画的样式，如果不喜欢可以在css中删去，也可以在js中删去。

    /* font color */
    .DarkMode #page,
    .DarkMode #colophon,
    .DarkMode #vcomments .vbtn,
    .DarkMode .art-content #archives .al_mon_list .al_mon,
    .DarkMode .art-content #archives .al_mon_list span,
    .DarkMode body,
    .DarkMode .art-content #archives .al_mon_list .al_mon,
    .DarkMode .art-content #archives .al_mon_list span,
    .DarkMode button,
    .DarkMode .art .art-content #archives a,
    .DarkMode textarea,
    .DarkMode strong,
    .DarkMode a,
    .DarkMode p,
    .DarkMode .label {
        color: rgba(255, 255, 255, .6);
    }

    .DarkMode #page,
    .DarkMode body,
    .DarkMode #colophon,
    .DarkMode #main-container,
    .DarkMode #page .yya,
    .DarkMode #content,
    .DarkMode #contentss,
    .DarkMode #footer {
        background-color: #12121c;
    }
    .DarkMode strong,
    .DarkMode img {
        filter: brightness(.7);
    }

    /* sun and noon */
    .Cuteen_DarkSky,
    .Cuteen_DarkSky:before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 88888888
    }

    .Cuteen_DarkSky {
        background: linear-gradient(#feb8b0, #fef9db)
    }

    .Cuteen_DarkSky:before {
        transition: 2s ease all;
        opacity: 0;
        background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed)
    }

    .DarkMode .Cuteen_DarkSky:before {
        opacity: 1
    }

    .Cuteen_DarkPlanet {
        z-index: 99999999;
        position: fixed;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        -webkit-animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
        animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
        transform-origin: center bottom
    }

    @-webkit-keyframes CuteenPlanetMove {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    @keyframes CuteenPlanetMove {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    .Cuteen_DarkPlanet:after {
        position: absolute;
        left: 35%;
        top: 40%;
        width: 9.375rem;
        height: 9.375rem;
        border-radius: 50%;
        content: "";
        background: linear-gradient(#fefefe, #fffbe8)
    }
    /* sun and noon.end */

4.播放音乐

我是直接设置的固定背景音乐播放，也可以拥抱aplayer或者其他，个人不太喜欢在博客主题中放歌，这里没做深度优化。

div容器，有一个播放条。

读取的音乐是在主题配置的bg_music，会播放这一个。

js：

    function music_on() {
        var audio1 = document.getElementById('bg_music');
        if (audio1.paused) {
            audio1.play();
        }else{
            audio1.pause();
            audio1.currentTime = 0;//音乐从头播放
        }
    }

5.展开侧边栏

这里每个主题都不一样啦，需要特别修改。sakura主题展开侧边栏如下，在全屏时显示上方导航栏，根据不同屏幕大小显示不同的导航栏。

function SiderMenu() {
        $('#main-container').toggleClass('open');
        $('.iconflat').css('width', '50px').css('height', '50px');
        $('.openNav').css('height', '50px');
        $('#main-container,#mo-nav,.openNav').toggleClass('open')
    }

三、直接使用

1. 在themes\sakura\layout\layout.ejs最后body前加入引用

   <%- partial('_partial/left', null, {cache: !config.relative_link}) %>
   

   位置如下：
   

2. 新建themes\sakura\layout\_partial\left.ejs样式文件
   所有的div和jq以及style我都写在一起了：
   

3. 使用说明
   （1）在主题中配置设置音乐
   参考位置：themes\sakura\_config.yml

   # 背景音乐
   bg_music: https://m10.music.126.net/20200602143725/fa04d41ad48c7ee8acd87321007b190c/ymusic/a7c0/b207/4ec9/da0ca2f21a36146d14548b8c99f819d0.mp3
   
   

   （2）深色模式，不同主题要调整css中的.DarkMode部分
   （3）侧边栏每个主题不同，自由设置。
   （4）评论我这里直接跳转的#vcomments，因为valine评论页面有id为vcomments的内容，其他评论系统修改即可。
   （5）阅读模式和字体大小调整的js也能写，不过我没找到好看的svg，如果有人给我提供svg，我就补充，哈哈哈~

完整left.ejs参考如下
—搬砖不易，点赞评论分享三连。

<!-- left side bar -->
<div id="RightDownBtn">
    <a id="btn" href="javascript:void(0)" target="_self" style="">
        <svg style=" width: 1.5em;height: 1.5em;" class="icon" aria-hidden="true">
            <use xlink:href="#icon-xuanfufanhuidingbu">
                <svg id="icon-xuanfufanhuidingbu" viewBox="0 0 1024 1024">
                    <path d="M0 512c0 282.624 229.376 512 512 512s512-229.376 512-512S794.624 0 512 0 0 229.376 0 512z"
                        fill="#1989FA"></path>
                    <path
                        d="M736.768 263.68H287.232c-12.288 0-23.04 10.752-23.04 23.04s10.752 23.04 23.04 23.04H737.28c12.288 0 23.04-10.752 23.04-23.04s-10.752-23.04-23.552-23.04m-207.872 105.472c-1.536-1.536-4.608-4.608-7.68-4.608-3.072-1.536-6.144-1.536-7.68-1.536-3.072 0-6.144 0-7.68 1.536-3.072 1.536-4.608 3.072-7.68 4.608l-186.368 186.368c-9.216 9.216-9.216 23.04 0 32.768 9.216 9.216 23.04 9.216 32.768 0l145.92-145.92V737.28c0 12.288 10.752 23.04 23.04 23.04s23.04-10.752 23.04-23.04V442.368l145.92 145.92c4.608 4.608 10.752 6.144 16.896 6.144 6.144 0 12.288-1.536 16.896-6.144 9.216-9.216 9.216-23.04 0-32.768l-187.392-186.368z"
                        fill="#FFFFFF"></path>
                </svg>
            </use>
        </svg>
    </a>
    <a onclick="SiderMenu()" target="_self">
        <svg style=" width: 1.5em;height: 1.5em;" class="icon" aria-hidden="true">
            <use xlink:href="#icon-caidanfenlei">
                <svg id="icon-caidanfenlei" viewBox="0 0 1024 1024">
                    <path
                        d="M884.736 596.48h-747.52c-47.616 0-87.04-38.912-87.04-87.04 0-47.616 38.912-87.04 87.04-87.04h747.52c47.616 0 87.04 38.912 87.04 87.04s-39.424 87.04-87.04 87.04z"
                        fill="#FF948D"></path>
                    <path d="M884.736 509.44m-87.04 0a87.04 87.04 0 1 0 174.08 0 87.04 87.04 0 1 0-174.08 0Z"
                        fill="#FF0000"></path>
                    <path
                        d="M884.736 276.48h-747.52c-47.616 0-87.04-38.912-87.04-87.04 0-47.616 38.912-87.04 87.04-87.04h747.52c47.616 0 87.04 38.912 87.04 87.04s-39.424 87.04-87.04 87.04z"
                        fill="#FF948D"></path>
                    <path d="M137.216 189.44m-87.04 0a87.04 87.04 0 1 0 174.08 0 87.04 87.04 0 1 0-174.08 0Z"
                        fill="#FF0000"></path>
                    <path
                        d="M884.736 916.48h-747.52c-47.616 0-87.04-38.912-87.04-87.04 0-47.616 38.912-87.04 87.04-87.04h747.52c47.616 0 87.04 38.912 87.04 87.04 0 47.616-39.424 87.04-87.04 87.04z"
                        fill="#FF948D"></path>
                    <path d="M137.216 829.44m-87.04 0a87.04 87.04 0 1 0 174.08 0 87.04 87.04 0 1 0-174.08 0Z"
                        fill="#FF0000"></path>
                </svg>
            </use>
        </svg>
    </a>
    <a id="say" href="#vcomments" target="_self">
        <svg style=" width: 1.5em;height: 1.5em;" class="icon" aria-hidden="true">
            <use xlink:href="#icon-ketangtaolun">
                <svg id="icon-ketangtaolun" viewBox="0 0 1234 1024">
                    <path
                        d="M736.914286 393.472c-20.114286-46.628571-47.542857-88.685714-84.114286-121.6-34.742857-34.742857-74.971429-62.171429-123.428571-82.285714-46.628571-20.114286-95.085714-30.171429-149.028572-29.257143-53.942857 0-102.4 11.885714-149.028571 32-46.628571 20.114286-86.857143 49.371429-121.6 84.114286-34.742857 34.742857-60.342857 76.8-81.371429 124.342857-20.114286 47.542857-28.342857 96.914286-28.342857 151.771428 1.828571 50.285714 11.885714 98.742857 29.257143 141.714286 19.2 42.971429 42.057143 82.285714 72.228571 116.114286 8.228571 10.057143 14.628571 21.942857 17.371429 34.742857 1.828571 11.885714-2.742857 21.942857-14.628572 27.428571-21.942857 11.885714-49.371429 20.114286-79.542857 25.6-5.485714 1.828571 5.485714 5.485714 34.742857 15.542857 29.257143 10.057143 74.057143 17.371429 134.4 22.857143 27.428571 2.742857 52.114286 4.571429 74.057143 5.485715h59.428572c17.371429 0 32.914286-1.828571 47.542857-2.742858 14.628571-1.828571 27.428571-2.742857 40.228571-4.571428 49.371429-5.485714 95.085714-19.2 137.142857-42.057143 42.971429-21.942857 79.542857-50.285714 111.542858-85.028571 32-34.742857 56.685714-74.057143 74.057142-118.857143 17.371429-44.8 25.6-92.342857 25.6-143.542857 4.571429-53.028571-6.4-104.228571-26.514285-151.771429"
                        fill="#E6E6E6"></path>
                    <path
                        d="M736.914286 393.472c-20.114286-46.628571-47.542857-88.685714-84.114286-121.6-34.742857-34.742857-74.971429-62.171429-123.428571-82.285714-46.628571-20.114286-95.085714-30.171429-149.028572-29.257143-53.942857 0-102.4 11.885714-149.028571 32-46.628571 20.114286-86.857143 49.371429-121.6 84.114286-34.742857 34.742857-60.342857 76.8-81.371429 124.342857-20.114286 47.542857-28.342857 96.914286-28.342857 151.771428 1.828571 50.285714 11.885714 98.742857 29.257143 141.714286 19.2 42.971429 42.057143 82.285714 72.228571 116.114286 8.228571 10.057143 14.628571 21.942857 17.371429 34.742857 1.828571 11.885714-2.742857 21.942857-14.628572 27.428571-21.942857 11.885714-49.371429 20.114286-79.542857 25.6-5.485714 1.828571 5.485714 5.485714 34.742857 15.542857 29.257143 10.057143 74.057143 17.371429 134.4 22.857143 27.428571 2.742857 52.114286 4.571429 74.057143 5.485715h59.428572c17.371429 0 32.914286-1.828571 47.542857-2.742858 14.628571-1.828571 27.428571-2.742857 40.228571-4.571428 49.371429-5.485714 95.085714-19.2 137.142857-42.057143 42.971429-21.942857 79.542857-50.285714 111.542858-85.028571 32-34.742857 56.685714-74.057143 74.057142-118.857143 17.371429-44.8 25.6-92.342857 25.6-143.542857 4.571429-53.028571-6.4-104.228571-26.514285-151.771429"
                        fill="#22E5B1"></path>
                    <path
                        d="M1101.714286 933.814857c-14.628571-8.228571-20.114286-20.114286-19.2-34.742857 2.742857-15.542857 10.057143-29.257143 21.942857-42.971429 37.485714-42.057143 67.657143-89.6 91.428571-144.457142 22.857143-56.685714 36.571429-116.114286 37.485715-179.2 1.828571-67.657143-11.885714-131.657143-36.571429-191.085715s-59.428571-111.542857-102.4-156.342857c-42.971429-44.8-94.171429-79.542857-153.6-106.057143-58.514286-26.514286-120.685714-39.314286-187.428571-41.142857-66.742857-1.828571-129.828571 11.885714-188.342858 36.571429-59.428571 24.685714-109.714286 59.428571-154.514285 102.4-44.8 43.885714-79.542857 94.171429-106.057143 153.6-25.6 59.428571-39.314286 123.428571-39.314286 189.257143-1.828571 64 10.057143 124.342857 32 181.028571 21.942857 56.685714 53.942857 106.971429 94.171429 150.857143 40.228571 42.971429 86.857143 79.542857 140.8 106.971428 53.942857 29.257143 112.457143 46.628571 175.542857 52.114286 15.542857 2.742857 32.914286 4.571429 52.114286 5.485714 19.2 1.828571 39.314286 2.742857 60.342857 2.742858 21.942857 1.828571 47.542857 1.828571 74.971428 0 27.428571-1.828571 57.6-2.742857 92.342857-7.314286 76.8-7.314286 133.485714-17.371429 170.971429-29.257143 37.485714-11.885714 52.114286-19.2 44.8-20.114286-39.314286-3.657143-72.228571-13.714286-101.485714-28.342857"
                        fill="#E6E6E6"></path>
                    <path
                        d="M1056 897.243429c-14.628571-8.228571-20.114286-20.114286-19.2-34.742858 2.742857-15.542857 10.057143-29.257143 21.942857-42.971428 37.485714-42.057143 67.657143-89.6 91.428572-144.457143 22.857143-56.685714 36.571429-116.114286 37.485714-179.2 1.828571-67.657143-11.885714-131.657143-36.571429-191.085714-24.685714-59.428571-59.428571-111.542857-102.4-156.342857-42.971429-45.714286-93.257143-80.457143-152.685714-106.971429-59.428571-25.6-121.6-38.4-188.342857-40.228571-66.742857-1.828571-129.828571 11.885714-188.342857 36.571428-59.428571 24.685714-109.714286 59.428571-154.514286 102.4-44.8 43.885714-79.542857 94.171429-106.057143 153.6-25.6 59.428571-39.314286 123.428571-39.314286 189.257143-1.828571 64 10.057143 124.342857 32 181.028571 21.942857 56.685714 53.942857 106.971429 94.171429 150.857143 40.228571 42.971429 86.857143 79.542857 140.8 106.971429 53.942857 29.257143 112.457143 46.628571 175.542857 52.114286 15.542857 2.742857 32.914286 4.571429 52.114286 5.485714 19.2 1.828571 39.314286 2.742857 60.342857 2.742857 21.942857 1.828571 47.542857 1.828571 74.971429 0 27.428571-1.828571 57.6-2.742857 92.342857-7.314286 76.8-7.314286 133.485714-17.371429 170.971428-29.257143 37.485714-11.885714 52.114286-19.2 44.8-20.114285-39.314286-3.657143-72.228571-13.714286-101.485714-28.342857"
                        fill="#16D7A3"></path>
                    <path
                        d="M896.914286 429.714286H739.657143L768 223.085714c1.828571-5.485714-2.742857-11.885714-8.228571-14.628571-5.485714-4.571429-12.8-4.571429-17.371429 0L499.2 496.457143c-1.828571 1.828571-2.742857 4.571429-4.571429 5.485714-0.914286 1.828571-0.914286 4.571429-0.914285 7.314286 0 8.228571 7.314286 15.542857 15.542857 15.542857h159.085714l-30.171428 233.142857v2.742857c-1.828571 5.485714 0 11.885714 4.571428 15.542857 5.485714 5.485714 15.542857 5.485714 21.942857 0l244.114286-320.914285c2.742857-2.742857 4.571429-7.314286 4.571429-11.885715 0-6.4-7.314286-13.714286-16.457143-13.714285"
                        fill="#FFFFFF"></path>
                </svg>
            </use>
        </svg>
    </a>
    <a onclick="switchNightMode()">
        <svg style=" width: 1.5em;height: 1.5em;" class="icon" aria-hidden="true">
            <use id="modeicon" xlink:href="#icon-_moon">
            </use>
        </svg>
    </a>
    <svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
        <symbol id="icon-sun" viewBox="0 0 1024 1024">
            <path
                d="M511.99976 511.99976m-511.99976 0a511.99976 511.99976 0 1 0 1023.99952 0 511.99976 511.99976 0 1 0-1023.99952 0Z"
                fill="#91D2F2"></path>
            <path
                d="M144.623932 868.455593C237.679889 964.327548 367.831828 1023.99952 511.99976 1023.99952c269.983873 0 490.99977-209.007902 510.455761-474.031778C956.991551 535.703749 887.559584 527.999753 815.623618 527.999753c-309.535855 0-572.895731 142.055933-670.999686 340.45584z"
                fill="#198058"></path>
            <path
                d="M979.623541 575.99973c-351.319835 0-647.791696 155.655927-741.279653 368.639827A509.359761 509.359761 0 0 0 511.99976 1023.99952c260.839878 0 475.967777-195.111909 507.799762-447.31979a1194.34344 1194.34344 0 0 0-40.175981-0.68z"
                fill="#1E9969"></path>
            <path
                d="M69.711967 769.831639C158.503926 921.815568 323.271848 1023.99952 511.99976 1023.99952a509.455761 509.455761 0 0 0 269.631874-76.783964C657.111692 828.375612 464.271782 751.999648 247.623884 751.999648c-61.575971 0-121.183943 6.271997-177.911917 17.831991z"
                fill="#6AA33A"></path>
            <path
                d="M487.887771 1023.39152c-86.543959-122.151943-236.911889-214.679899-417.591804-252.543881 85.11996 144.919932 239.415888 244.279885 417.591804 252.543881z"
                fill="#95E652"></path>
            <path
                d="M394.159815 167.999921l-45.255979 45.255979L303.647858 167.999921l45.255978-45.255979zM394.159815 503.999764l-45.255979 45.255979L303.655858 503.999764l45.247978-45.247979z"
                fill="#FFF8E6"></path>
            <path
                d="M180.879915 290.719864l45.247979 45.247979-45.255979 45.255978-45.255979-45.255978zM516.903758 290.719864l45.247978 45.247979-45.247978 45.247978-45.247979-45.247978z"
                fill="#FFF8E6"></path>
            <path d="M198.087907 185.207913h63.99997v63.99997h-63.99997zM435.671796 422.791802h63.99997v63.99997h-63.99997z"
                fill="#FFF8E6"></path>
            <path d="M198.087907 422.791802h63.99997v63.99997h-63.99997zM435.671796 185.207913h63.99997v63.99997h-63.99997z"
                fill="#FFF8E6"></path>
            <path
                d="M348.879836 335.999843m-183.999913 0a183.999914 183.999914 0 1 0 367.999827 0 183.999914 183.999914 0 1 0-367.999827 0Z"
                fill="#FFEAB3"></path>
            <path
                d="M348.879836 335.999843m-159.999925 0a159.999925 159.999925 0 1 0 319.99985 0 159.999925 159.999925 0 1 0-319.99985 0Z"
                fill="#FFDC80"></path>
        </symbol>
        <symbol id="icon-_moon" viewBox="0 0 1024 1024">
            <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#323232"></path>
            <path
                d="M512 512m-407.005867 0a407.005867 407.005867 0 1 0 814.011734 0 407.005867 407.005867 0 1 0-814.011734 0Z"
                fill="#494A4A"></path>
            <path
                d="M748.1344 633.9584c0-1.143467 0.085333-2.286933 0.085333-3.413333a69.512533 69.512533 0 0 0-8.823466-33.979734q-1.058133-1.911467-2.2528-3.7376l-0.187734-0.3072a70.485333 70.485333 0 0 0-5.2736-7.099733l-0.238933-0.273067q-1.3312-1.536-2.730667-3.003733l-0.3072-0.324267a70.894933 70.894933 0 0 0-6.417066-5.819733l-0.5632-0.443733q-1.467733-1.160533-3.003734-2.235734l-0.494933-0.341333q-1.706667-1.2288-3.6352-2.3552l-0.256-0.136533q-1.706667-0.989867-3.413333-1.8944l-0.887467-0.4608q-1.604267-0.802133-3.242667-1.536l-0.6144-0.273067q-1.928533-0.836267-3.9424-1.553067l-0.8192-0.273066a54.8864 54.8864 0 0 0-3.242666-1.024l-1.143467-0.324267a85.248 85.248 0 0 0-3.601067-0.887467l-0.546133-0.119466a67.345067 67.345067 0 0 0-4.1984-0.733867l-1.143467-0.136533q-1.706667-0.2048-3.2768-0.341334l-1.245866-0.1024a74.786133 74.786133 0 0 0-4.386134-0.1536 69.8368 69.8368 0 0 0-20.48 3.037867 104.106667 104.106667 0 0 0-12.1344-11.076267 258.696533 258.696533 0 0 0-449.9456-248.763733 183.1424 183.1424 0 0 1 106.939734-34.2528c5.12 0 10.24 0.221867 15.36 0.631467a183.125333 183.125333 0 0 1 50.5344 11.52h0.170666q3.874133 1.501867 7.68 3.157333l0.256 0.1024 7.441067 3.413333 0.273067 0.136534q3.669333 1.826133 7.253333 3.805866l0.221867 0.119467q3.618133 2.013867 7.133866 4.164267a184.610133 184.610133 0 0 1 26.760534 20.036266h0.085333q2.986667 2.696533 5.870933 5.5296l0.324267 0.3072q2.781867 2.7648 5.461333 5.632l0.443734 0.477867q2.6112 2.833067 5.12 5.768533l0.494933 0.580267q2.4576 2.9184 4.795733 5.956267l0.494934 0.648533q2.321067 3.037867 4.522666 6.178133l0.426667 0.6144q2.2016 3.1744 4.283733 6.4512l0.324267 0.529067q2.116267 3.413333 4.078933 6.826667l0.170667 0.3072c1.553067 2.7136 3.0208 5.495467 4.437333 8.2944a56.149333 56.149333 0 0 0-12.578133 2.304 82.824533 82.824533 0 0 0-134.007467 18.039466 42.530133 42.530133 0 0 0-53.009066 41.079467 104.277333 104.277333 0 0 0-42.2912 80.110933 13.653333 13.653333 0 0 0 0 1.4336v0.426667c0 0.136533 0.1024 0.682667 0.187733 1.024s0 0.3072 0.1024 0.4608 0.2048 0.733867 0.324267 1.092267l0.1024 0.3072a15.36 15.36 0 0 0 0.580266 1.416533l0.1024 0.187733a16.520533 16.520533 0 0 0 0.648534 1.211734l0.221866 0.3584c0.221867 0.3584 0.4608 0.733867 0.7168 1.092266l0.221867 0.3072a26.333867 26.333867 0 0 0 2.338133 2.798934l0.119467 0.119466q0.6144 0.631467 1.297067 1.262934l0.2048 0.187733q0.7168 0.648533 1.501866 1.297067 1.706667 1.416533 3.720534 2.781866c0.6656 0.4608 1.348267 0.904533 2.065066 1.348267 26.914133 16.7936 87.995733 28.535467 159.044267 28.535467 19.3536 0 37.956267-0.8704 55.3472-2.474667l-0.494933 0.750933-0.426667 0.6144q-2.2016 3.140267-4.539733 6.178134l-0.477867 0.631466q-2.338133 3.037867-4.795733 5.956267l-0.494934 0.580267q-2.491733 2.935467-5.12 5.7856l-0.443733 0.477866q-2.679467 2.884267-5.461333 5.649067l-0.3072 0.290133q-2.884267 2.833067-5.870934 5.546667a184.8832 184.8832 0 0 1-26.7776 20.036267q-3.515733 2.167467-7.150933 4.181333l-0.187733 0.1024q-3.584 1.979733-7.2704 3.805867l-0.256 0.136533q-3.6864 1.826133-7.458134 3.413333l-0.238933 0.1024q-3.805867 1.706667-7.68 3.157334h-0.136533a183.057067 183.057067 0 0 1-50.551467 11.52c-5.12 0.4096-10.24 0.631467-15.36 0.631466a183.159467 183.159467 0 0 1-106.939733-34.2528 258.5088 258.5088 0 0 0 180.138666 107.093334 109.550933 109.550933 0 0 0-3.259733 26.453333 16.520533 16.520533 0 0 0 0.1024 1.706667v0.529066c0 0.170667 0.136533 0.853333 0.221867 1.262934l0.136533 0.5632 0.392533 1.365333 0.136534 0.4096a13.892267 13.892267 0 0 0 0.733866 1.706667l0.119467 0.238933c0.238933 0.512 0.512 1.006933 0.802133 1.501867l0.273067 0.443733q0.4096 0.682667 0.887467 1.365333l0.273066 0.375467a33.0752 33.0752 0 0 0 2.9184 3.413333l0.1536 0.1536 1.5872 1.553067 0.273067 0.256 1.8432 1.621333q2.116267 1.706667 4.625067 3.413334l2.56 1.706666c33.467733 20.8896 109.431467 35.4816 197.802666 35.4816 119.330133 0 216.046933-26.606933 216.046934-59.409066a131.413333 131.413333 0 0 0-56.285867-102.058667z"
                fill="#323232"></path>
            <path
                d="M573.8496 401.8176v-2.781867a56.200533 56.200533 0 0 0-72.6016-53.725866 82.824533 82.824533 0 0 0-134.007467 18.039466 42.530133 42.530133 0 0 0-53.009066 41.079467 104.277333 104.277333 0 0 0-42.257067 80.0768c0 26.385067 77.7728 47.786667 173.7216 47.786667s173.7216-21.384533 173.7216-47.786667a105.659733 105.659733 0 0 0-45.568-82.688z"
                fill="#CDCCCA"></path>
            <path
                d="M293.768533 506.2656a104.277333 104.277333 0 0 1 42.2912-80.110933 42.530133 42.530133 0 0 1 53.009067-41.079467 82.807467 82.807467 0 0 1 134.007467-18.039467 56.32 56.32 0 0 1 43.758933 4.642134 56.2176 56.2176 0 0 0-65.518933-26.4192 82.824533 82.824533 0 0 0-134.007467 18.039466 42.530133 42.530133 0 0 0-53.009067 41.079467 104.277333 104.277333 0 0 0-42.325333 80.128c0 8.413867 7.936 16.3328 21.845333 23.210667a13.294933 13.294933 0 0 1-0.0512-1.450667z"
                fill="#E8E9EC"></path>
            <path
                d="M453.4784 166.912a258.338133 258.338133 0 0 0-210.944 108.919467 183.995733 183.995733 0 1 1 0 299.451733 258.6624 258.6624 0 1 0 210.944-408.388267z"
                fill="#DDAE2A"></path>
            <path
                d="M364.834133 608.9216q7.594667 0.631467 15.36 0.648533a183.995733 183.995733 0 0 0 0-367.9744q-7.748267 0-15.36 0.631467a183.995733 183.995733 0 0 1 0 366.6944z"
                fill="#EDC849"></path>
            <path
                d="M794.7776 605.969067c0-1.143467 0.085333-2.286933 0.085333-3.413334a69.973333 69.973333 0 0 0-90.299733-66.833066 102.997333 102.997333 0 0 0-166.656 22.4256 52.906667 52.906667 0 0 0-65.928533 51.0976 129.706667 129.706667 0 0 0-52.599467 99.6352c0 32.8192 96.733867 59.409067 216.046933 59.409066s216.046933-26.606933 216.046934-59.409066a131.413333 131.413333 0 0 0-56.695467-102.912z"
                fill="#CDCCCA"></path>
            <path
                d="M446.481067 735.914667a129.706667 129.706667 0 0 1 52.599466-99.6352 52.906667 52.906667 0 0 1 65.928534-51.080534 102.997333 102.997333 0 0 1 166.6048-22.442666 69.973333 69.973333 0 0 1 54.408533 5.7856 69.973333 69.973333 0 0 0-81.476267-32.853334 102.997333 102.997333 0 0 0-166.656 22.4256 52.906667 52.906667 0 0 0-65.928533 51.0976 129.706667 129.706667 0 0 0-52.599467 99.6352c0 10.478933 9.864533 20.309333 27.170134 28.859734a17.408 17.408 0 0 1-0.0512-1.792z"
                fill="#E8E9EC"></path>
        </symbol>
    </svg>

    <a onclick="music_on();" id="musicmobbtn">
        <svg style=" width: 1.5em;height: 1.5em;" class="icon" aria-hidden="true">
            <use id="modeicon" xlink:href="#icon-icon-music">
                <svg id="icon-icon-music" viewBox="0 0 1024 1024">
                    <path
                        d="M997.45185173 512A485.45185173 485.45185173 0 1 1 26.54814827 512a485.45185173 485.45185173 0 0 1 970.90370346 0"
                        fill="#9025FC"></path>
                    <path
                        d="M478.56450347 602.59745173S403.9869632 545.19277013 369.03442987 537.78962987c-82.1020448-17.41558507-136.47265173 35.8020736-133.37789654 106.192592 4.36906667 100.42785173 127.37042987 123.85090347 194.66619307 111.3505184 67.3564448-12.37902187 101.09534827-57.04059307 108.86257707-111.83597014 7.76722987-54.79537813 46.84610347-263.9037632 46.84610346-263.9037632s66.26417813 61.28829653 85.2574816 82.3447712c26.4571264 29.3698368-0.1820448 79.85682987-0.18204373 79.8568288s72.39300693-12.07561493 90.23336213-104.97896213c12.31834027-64.1403264-23.36237013-76.64071147-65.71804373-110.37961493-82.76954027-65.7787264-121.2416-90.2940448-145.63555627-95.45197014-24.27259307-5.0972448-45.02565973 4.42974827-45.8145184 81.4952288-0.84954027 77.0654816-25.60758507 290.1181632-25.60758506 290.1181632"
                        fill="#FFFFFF"></path>
                </svg>
            </use>
        </svg>
    </a>
    <audio id="bg_music" src="<%= theme.bg_music%>" loop="loop"></audio>
</div>

<script>
    function music_on() {
        var audio1 = document.getElementById('bg_music');
        if (audio1.paused) {
            audio1.play();
        }else{
            audio1.pause();
            audio1.currentTime = 0;//音乐从头播放
        }
    }
    function BackTOP() {
        $("#btn").hide();
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 50) {
                    $("#btn").fadeIn(200);
                } else {
                    $("#btn").fadeOut(200);
                }
            });
            $("#btn").click(function () {
                $('body,html').animate({
                        scrollTop: 0
                    },
                    500);
                return false;
            });
        });
        $(function () {
            $("#say").click(function () {
                $('body,html').animate({
                        scrollTop: $('html, body').get(0).scrollHeight
                    },
                    500);
                return false;
            });
        })
    }

    $('#readmode').click(function () {
            $('body').toggleClass('read-mode')
        })
        
    function SiderMenu() {
        $('#main-container').toggleClass('open');
        $('.iconflat').css('width', '50px').css('height', '50px');
        $('.openNav').css('height', '50px');
        $('#main-container,#mo-nav,.openNav').toggleClass('open')
    }

    function switchNightMode() {
        $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($("body")), setTimeout(
            function () {
                var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") ||
                    '0';
                (DarkMode == '0') ? ($("html").addClass("DarkMode"), document.cookie = "DarkMode=1;path=/", console
                    .log('夜间模式开启'), $('#modeicon').attr("xlink:href", "#icon-sun")) : ($("html").removeClass(
                        "DarkMode"), document.cookie = "DarkMode=0;path=/", console.log('夜间模式关闭'), $('#modeicon')
                    .attr("xlink:href", "#icon-_moon")), setTimeout(function () {
                    $(".Cuteen_DarkSky").fadeOut(1e3, function () {
                        $(this).remove()
                    })
                }, 2e3)
            }), 50
    }

    function checkNightMode() {
        if ($("html").hasClass("n-f")) {
            $("html").removeClass("day");
            $("html").addClass("DarkMode");
            $('#modeicon').attr("xlink:href", "#icon-sun")
            return;
        }
        if ($("html").hasClass("d-f")) {
            $("html").removeClass("DarkMode");
            $("html").addClass("day");
            $('#modeicon').attr("xlink:href", "#icon-_moon")

            return;
        }
        if (document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '') {
            if (new Date().getHours() >= 23 || new Date().getHours() < 7) {
                $("html").addClass("DarkMode");
                document.cookie = "DarkMode=1;path=/";
                console.log('夜间模式开启');
                $('#modeicon').attr("xlink:href", "#icon-sun")
            } else {
                $("html").removeClass("DarkMode");
                document.cookie = "DarkMode=0;path=/";
                console.log('夜间模式关闭');
                $('#modeicon').attr("xlink:href", "#icon-_moon")
            }
        } else {
            var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
            if (DarkMode == '0') {
                $("html").removeClass("DarkMode");
                $('#modeicon').attr("xlink:href", "#icon-_moon")
            } else if (DarkMode == '1') {
                $("html").addClass("DarkMode");
                $('#modeicon').attr("xlink:href", "#icon-sun")
            }
        }
    }
    BackTOP();
    checkNightMode();
</script>

<style>
    #RightDownBtn {
        position: fixed;
        left: 1.875rem;
        bottom: 1.875rem;
        padding: 0.3125rem 0.625rem;
        background: #fff;
        border-radius: 0.1875rem;
        box-shadow: 0 0 0.3125rem rgba(0, 0, 0, .4);
        transition: 0.3s ease all;
        z-index: 1000;
        align-items: flex-end;
        flex-direction: column;
        display: -moz-flex;
        display: flex;
        float: right;
    }

    #RightDownBtn>a,
    #RightDownBtn>label {
        width: 1.5em;
        height: 1.5em;
        margin: 0.3125rem 0;
        transition: .2s cubic-bezier(.25, .46, .45, .94);
    }

    a {
        color: #3273dc;
        cursor: pointer !important;
        text-decoration: none;
    }
    /* font color */
    .DarkMode #page,
    .DarkMode #colophon,
    .DarkMode #vcomments .vbtn,
    .DarkMode .art-content #archives .al_mon_list .al_mon,
    .DarkMode .art-content #archives .al_mon_list span,
    .DarkMode body,
    .DarkMode .art-content #archives .al_mon_list .al_mon,
    .DarkMode .art-content #archives .al_mon_list span,
    .DarkMode button,
    .DarkMode .art .art-content #archives a,
    .DarkMode textarea,
    .DarkMode strong,
    .DarkMode a,
    .DarkMode p,
    .DarkMode .label {
        color: rgba(255, 255, 255, .6);
    }

    .DarkMode #page,
    .DarkMode body,
    .DarkMode #colophon,
    .DarkMode #main-container,
    .DarkMode #page .yya,
    .DarkMode #content,
    .DarkMode #contentss,
    .DarkMode #footer {
        background-color: #12121c;
    }
    .DarkMode strong,
    .DarkMode img {
        filter: brightness(.7);
    }

    /* sun and noon */
    .Cuteen_DarkSky,
    .Cuteen_DarkSky:before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 88888888
    }

    .Cuteen_DarkSky {
        background: linear-gradient(#feb8b0, #fef9db)
    }

    .Cuteen_DarkSky:before {
        transition: 2s ease all;
        opacity: 0;
        background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed)
    }

    .DarkMode .Cuteen_DarkSky:before {
        opacity: 1
    }

    .Cuteen_DarkPlanet {
        z-index: 99999999;
        position: fixed;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        -webkit-animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
        animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
        transform-origin: center bottom
    }

    @-webkit-keyframes CuteenPlanetMove {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    @keyframes CuteenPlanetMove {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    .Cuteen_DarkPlanet:after {
        position: absolute;
        left: 35%;
        top: 40%;
        width: 9.375rem;
        height: 9.375rem;
        border-radius: 50%;
        content: "";
        background: linear-gradient(#fefefe, #fffbe8)
    }
</style>

<!-- left side bar.end -->

---

参考主题：

1. Typecho 驱动的 Cuteen主题——秦枫鸢梦
   2020年新版主题，看了一下，是我友链好友写的，推推推，好看好看，美丽极了。

2. hexo-theme-butterfly蝴蝶主题——JerryC
   2017年至今都在维护，小清新主题，非常nice。

这两个主题都很nice，推荐一波。

3. hexo-theme-sakuraplus樱花主题
   放出我自己现在用的博客主题 ，不是原创，是改进，也超好看。