hexo-theme-solitude 1.0.0 → 1.1.0

package/layout/partial/compoment/about/other.ejs

@@ -1,68 +1,76 @@
 <div class="author-content">
-    <div class="about-statistic author-content-item" style="background: url(<%= site.data.about.tj.img %>);">
-        <div class="card-content">
-            <div class="author-content-item-tips">数据</div>
-            <span class="author-content-item-title">访问统计</span>
-            <div id="statistic"></div>
-            <div class="post-tips">
-                统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6" target="_blank" rel="noopener nofollow">51la网站统计</a>
-            </div>
-            <div class="banner-button-group">
-                <a class="banner-button" onclick="pjax.loadUrl(&quot;/echart/&quot;)" data-pjax-state="">
-                    <i class="ri-arrow-right-circle-fill"></i>
-                    <span class="banner-button-text">文章统计</span>
-                </a>
+    <% if(site.data.about.tj){ %>
+        <div class="about-statistic author-content-item" style="background: url(<%= site.data.about.tj.img %>);">
+            <div class="card-content">
+                <div class="author-content-item-tips">数据</div>
+                <span class="author-content-item-title">访问统计</span>
+                <div id="statistic"></div>
+                <div class="post-tips">
+                    统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6" target="_blank"
+                                    rel="noopener nofollow">51la网站统计</a>
+                </div>
+                <div class="banner-button-group">
+                    <a class="banner-button" onclick="pjax.loadUrl(&quot;/echart/&quot;)" data-pjax-state="">
+                        <i class="scoicon sco-right-btn-fill"></i>
+                        <span class="banner-button-text">文章统计</span>
+                    </a>
+                </div>
             </div>
         </div>
-    </div>
-    <script>
-        fetch("<%= site.data.about.tj.url %>")
-            .then(res => res.text())
-            .then(data => {
-                let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
-                let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);
-                num = num.map(el => {
-                    let val = el.replace(/(<\/span><span>)/g, "");
-                    let str = val.replace(/(<\/span><\/p>)/g, "");
-                    return str;
+        <script>
+            fetch("<%= site.data.about.tj.url %>")
+                .then(res => res.text())
+                .then(data => {
+                    let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
+                    let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);
+                    num = num.map(el => {
+                        let val = el.replace(/(<\/span><span>)/g, "");
+                        let str = val.replace(/(<\/span><\/p>)/g, "");
+                        return str;
+                    });
+                    let s = document.getElementById("statistic");
+                    let statistic = [];
+                    for (let i = 0; i < num.length; i++) {
+                        if (i == 0 || i == num.length - 1) continue;
+                        s.innerHTML += "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
+                    }
                 });
-                let s = document.getElementById("statistic");
-                let statistic = [];
-                for (let i = 0; i < num.length; i++) {
-                    if (i == 0 || i == num.length - 1) continue;
-                    s.innerHTML += "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
-                }
-            });
-    </script>
-    <style>
-        :root {
-            --site-about-oneself-map--light: url(<%= site.data.about.oneself.map.light %>);
-            --site-about-oneself-map--dark: url(<%= site.data.about.oneself.map.dark %>);
-        }
-    </style>
-    <% const oneself = site.data.about.oneself; %>
-    <div class="author-content-item-group column mapAndInfo">
-        <div class="author-content-item map single">
-            <span class="map-title">我现在住在 <b><%= oneself.location %></b></span></div>
-        <div class="author-content-item selfInfo single">
-            <div><span class="selfInfo-title">生于</span>
-                <span class="selfInfo-content" style="color: #43a6c6;"><%= oneself.birthYear %></span>
-            </div>
-            <div>
-                <span class="selfInfo-title"><%= oneself.university %></span>
-                <span class="selfInfo-content" style="color: #c69043;"><%= oneself.major %></span>
-            </div>
-            <div>
-                <span class="selfInfo-title">现在职业</span>
-                <span class="selfInfo-content" style="color: #b04fe6;"><%= oneself.occupation %></span>
+        </script>
+    <% } %>
+    <% if(site.data.about.oneself){ %>
+        <style>
+            :root {
+                --site-about-oneself-map--light: url(<%= site.data.about.oneself.map.light %>);
+                --site-about-oneself-map--dark: url(<%= site.data.about.oneself.map.dark %>);
+            }
+        </style>
+        <% const oneself = site.data.about.oneself; %>
+        <div class="author-content-item-group column mapAndInfo">
+            <div class="author-content-item map single">
+                <span class="map-title">我现在住在 <b><%= oneself.location %></b></span></div>
+            <div class="author-content-item selfInfo single">
+                <div><span class="selfInfo-title">生于</span>
+                    <span class="selfInfo-content" style="color: #43a6c6;"><%= oneself.birthYear %></span>
+                </div>
+                <div>
+                    <span class="selfInfo-title"><%= oneself.university %></span>
+                    <span class="selfInfo-content" style="color: #c69043;"><%= oneself.major %></span>
+                </div>
+                <div>
+                    <span class="selfInfo-title">现在职业</span>
+                    <span class="selfInfo-content" style="color: #b04fe6;"><%= oneself.occupation %></span>
+                </div>
             </div>
         </div>
-    </div>
+    <% } %>
 </div>
-<div class="author-content">
-    <div class="create-site-post author-content-item single">
-        <div class="author-content-item-tips">心路历程</div>
-        <span class="author-content-item-title">为什么建站？</span>
-        <%- site.data.about.cause %>
+
+<% if(site.data.about.cause){ %>
+    <div class="author-content">
+        <div class="create-site-post author-content-item single">
+            <div class="author-content-item-tips">心路历程</div>
+            <span class="author-content-item-title">为什么建站？</span>
+            <%- site.data.about.cause %>
+        </div>
     </div>
-</div>
+<% } %>

package/layout/partial/compoment/aside/asideFlipCard.ejs

@@ -1,8 +1,72 @@
-<div class="card-widget heo-right-widget" id="card-wechat">
+<style>
+    #aside-content .card-widget.card-platform {
+        background: var(--sco-main);
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        padding: 0;
+        cursor: pointer;
+        border: none;
+        height: 110px;
+        border: var(--style-border);
+        transition: 0.6s
+    }
+    #aside-content .card-widget.card-platform:before {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background: url("<%- theme.aside.flip.favicon || 'https://img.meuicat.com/blog/14.webp' %>") center center no-repeat;
+        content: '';
+        background-size: cover
+    }
+    #aside-content .card-widget.card-platform:hover:before {
+        filter: blur(12px) saturate(1.5);
+        transition: .3s
+    }
+    #aside-content .card-widget #flip-wrapper {
+        perspective: 1000;
+        position: relative;
+        width: 235px;
+        height: 110px;
+        z-index: 1
+    }
+    #aside-content .card-platform #flip-wrapper:hover #flip-content {
+        transform: rotateY(180deg)
+    }
+    #aside-content .card-platform #flip-wrapper #flip-content {
+        width: 100%;
+        height: 100%;
+        transform-style: preserve-3d;
+        transition: cubic-bezier(0, 0, 0, 1.29) 0.3s
+    }
+    #aside-content .card-platform #flip-wrapper #flip-content .face {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        background: url("<%- theme.aside.flip.face || 'https://img.meuicat.com/blog/15.webp' %>") center center no-repeat;
+        background-size: 100%
+    }
+    #aside-content .card-platform #flip-wrapper #flip-content .face.back {
+        display: block;
+        -webkit-transform: rotateY(180deg);
+        transform: rotateY(180deg);
+        box-sizing: border-box;
+        background: url("<%- theme.aside.flip.backface || 'https://img.meuicat.com/blog/16.webp' %>") center center no-repeat;
+        background-size: 100%
+    }
+    [data-theme='dark'] #aside-content .card-widget.card-platform {
+        background: var(--sco-card-bg)
+    }
+</style>
+<div class="card-widget card-platform">
     <div id="flip-wrapper">
         <div id="flip-content">
-            <div class="face" style="background: url(<%= theme.aside.flip.face %>) center center no-repeat; background-size: 100%;"></div>
-            <div class="back face" style="background: url(<%= theme.aside.flip.backface %>) center center no-repeat;background-size: 100%"></div>
+            <div class="face"></div>
+            <div class="back face"></div>
         </div>
     </div>
 </div>

package/layout/partial/compoment/aside/asideHistory.ejs

@@ -0,0 +1,49 @@
+<% if(theme.aside.history.enable){ %>
+    <style>
+        .swiper-wrapper{
+            flex-direction: column
+        }
+        .history_slide {
+            text-align:left;
+            display: flex !important;
+            flex-direction:column;
+            align-items: flex-start
+        }
+        #history-baidu > .blog-slider__pagination{
+            display:none
+        }
+        .history_slide_time{
+            color: var(--sco-secondtext);
+            font-size: 14px;
+            font-style: italic;
+            font-weight: lighter
+        }
+        .history_slide_link {
+            line-height: 1.5;
+            -webkit-line-clamp: 2;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-box-orient: vertical
+        }
+        .history_slide_link a{
+            color: var(--sco-main);
+            padding: 0 4px;
+            border-radius: 4px
+        }
+        .history_slide_link a:hover{
+            color: var(--sco-white);
+            background: var(--sco-main)
+        }
+    </style>
+    <div class="card-widget card-history">
+        <div class="item-headline">
+            <i class="<%- theme.aside.history.icon || 'scoicon sco-clock-fill' %>"></i>
+            <span><%- theme.aside.history.title || '那年今日' %></span>
+        </div>
+        <div id="history-baidu" style="height: 100px;overflow: hidden">
+            <div id="history-container" class="history_swiper-container" style="width: 100%;height: 100%;margin-top: 6px">
+                <div id="history_container_wrapper" class="swiper-wrapper" style="height:20px"></div>
+            </div>
+        </div>
+    </div>
+<% } %>

package/layout/partial/compoment/aside/asideNewestPost.ejs

@@ -1,6 +1,6 @@
 <div class="card-widget card-recent-post">
     <div class="item-headline">
-        <i class="ri-map-2-line"></i>
+        <i class="scoicon sco-map-line"></i>
         <span>最近发布</span>
     </div>
     <div class="aside-list">

package/layout/partial/compoment/aside/asidePower.ejs

@@ -1,13 +1,13 @@
 <div class="card-widget card-power">
-    <% const data = site.data.aifadian.links %>
+    <% const data = site.data.afadian.links %>
     <% const vip = data[Math.floor(Math.random() * data.length)] %>
     <div class="item-headline">
-        <img src="/img/power.png" style="width: 1.2rem">
+        <i class="scoicon sco-afdian-line"></i>
         <span>爱发电赞助</span>
         <a class="power-charge" href="<%= theme.aside.power.link %>" rel="external nofollow" target="_blank"
            title="赞助博主">赞助</a>
     </div>
-    <a id="power-star" data-pjax-state="" href="<%= vip.url %>>">
+    <a id="power-star" data-pjax-state="" href="<%= vip.url %>">
         <div id="power-star-image"
              style="background-image: url('<%= vip.avatar %>');"></div>
         <div class="power-star-body">

package/layout/partial/compoment/aside/asideSwitch.ejs

@@ -8,6 +8,12 @@
     case 'flip': %>
         <%- partial('partial/compoment/aside/asideFlipCard', {cache: true}) %>
     <% break;
+    case 'welcome': %>
+        <%- partial('partial/compoment/aside/asideWelcome', {cache: true}) %>
+    <% break;
+    case 'history': %>
+        <%- partial('partial/compoment/aside/asideHistory', {cache: true}) %>
+    <% break;
     case 'newestPost': %>
         <%- partial('partial/compoment/aside/asideNewestPost', {cache: true}) %>
     <% break;

package/layout/partial/compoment/aside/asideToc.ejs

@@ -1,6 +1,6 @@
 <div class="card-widget" id="card-toc">
     <div class="item-headline">
-        <i class="ri-menu-fill"></i>
+        <i class="scoicon sco-menu-line"></i>
         <span>文章目录</span>
     </div>
     <div class="toc-content" id="toc-content">

package/layout/partial/compoment/aside/asideWebInfo.ejs

@@ -2,7 +2,7 @@
     <% if(theme.aside.siteinfo.postcount){ %>
         <div class="webinfo-item">
             <div class="webinfo-item-title">
-                <i class="item-icon ri-archive-fill"></i>
+                <i class="item-icon scoicon sco-folder-fill"></i>
                 <div class="item-name">文章总数 :</div>
             </div>
             <div class="item-count"><%= site.posts.length %></div>
@@ -12,26 +12,26 @@
         <% if(theme.aside.siteinfo.pv){ %>
             <div class="webinfo-item">
                 <div class="webinfo-item-title">
-                    <i class="item-icon ri-window-fill"></i>
+                    <i class="item-icon scoicon sco-visitor-line"></i>
                     <div class="item-name">总访问数 :</div>
                 </div>
-                <span id="busuanzi_value_site_pv"><i class="ri-loader-2-fill"></i></span>
+                <span id="busuanzi_value_site_pv"><i class="scoicon sco-loading-line"></i></span>
             </div>
         <% } %>
         <% if(theme.aside.siteinfo.uv){ %>
             <div class="webinfo-item">
                 <div class="webinfo-item-title">
-                    <i class="item-icon ri-team-fill"></i>
+                    <i class="item-icon scoicon sco-team-fill"></i>
                     <div class="item-name">总访客数 :</div>
                 </div>
-                <span id="busuanzi_value_site_uv"><i class="ri-loader-2-fill"></i></span>
+                <span id="busuanzi_value_site_uv"><i class="scoicon sco-loading-line"></i></span>
             </div>
         <% } %>
     <% } %>
     <% if(theme.aside.siteinfo.runtimeenable){ %>
         <div class="webinfo-item">
             <div class="webinfo-item-title">
-                <i class="item-icon ri-calendar-todo-fill"></i>
+                <i class="item-icon scoicon sco-calendar-todo-fill"></i>
                 <div class="item-name">建站天数 :</div>
             </div>
             <div class="item-count" id="runtimeshow">
@@ -41,7 +41,7 @@
     <% if(theme.aside.siteinfo.updatetime){ %>
         <div class="webinfo-item">
             <div class="webinfo-item-title">
-                <i class="item-icon ri-loop-left-fill"></i>
+                <i class="item-icon scoicon sco-loop-left-fill"></i>
                 <div class="item-name">最后更新 :</div>
             </div>
             <time class="item-count" datetime="<%= new Date() %>">
@@ -51,7 +51,7 @@
     <% if(theme.thirdparty.wordcount && theme.aside.siteinfo.wordcount){ %>
         <div class="webinfo-item">
             <div class="webinfo-item-title">
-                <i class="item-icon ri-file-word-fill"></i>
+                <i class="item-icon scoicon sco-word-fill"></i>
                 <div class="item-name">全站字数 :</div>
             </div>
             <div class="item-count"><%= totalcount(site) %></div>

package/layout/partial/compoment/aside/asideWelcome.ejs

@@ -0,0 +1,33 @@
+<% if(theme.aside.welcome.enable){ %>
+    <style>
+        #welcome-info {
+            overflow: hidden;
+            margin-top: 4px
+        }
+
+        #welcome-info .welcome-time {
+            width: 100%;
+            margin: 12px 0 0;
+            display: inline-flex
+        }
+
+        #welcome-info .welcome-message {
+            width: 100%;
+            margin-bottom: 8px;
+            display: inline-flex
+        }
+    </style>
+    <div class="card-widget card-welcome">
+        <div class="item-headline">
+            <i class="<%- theme.aside.welcome.icon || 'scoicon sco-map-pin-fill' %>"></i>
+            <span><%- theme.aside.welcome.title || '来访者' %></span>
+        </div>
+        <div id="welcome-info"></div>
+    </div>
+    <script data-pjax>
+        var longitude = '<%= theme.aside.welcome.longitude %>'
+        var Latitude = '<%= theme.aside.welcome.Latitude %>'
+        var txkey = '<%= theme.aside.welcome.key %>'
+        var ipLoacation;
+    </script>
+<% } %>

package/layout/partial/compoment/circle/angle.ejs

@@ -3,7 +3,7 @@
         <h2 style="padding-top: 0;margin:0.6rem 0 0.6rem;">🎣 钓鱼</h2>
         <a id="random-post-start" href="javascript:fetchRandomPost();" rel="external nofollow"
            style="transition-duration: 0.3s; transform: rotate(63000deg); opacity: 1;" data-pjax-state="">
-            <i class="scoicon ri-refresh-line"></i>
+            <i class="scoicon sco-refresh-line"></i>
         </a>
     </div>
     <div class="title-h2-a-right"><a class="random-post-all" href="/links/" data-pjax-state="">全部友链</a></div>

package/layout/partial/compoment/circle/content.ejs

@@ -15,8 +15,5 @@
         expire_days: <%= theme.circle.expire_days %>,
     }
 </script>
-<script type="text/javascript"
-    src="<%= theme.circle.appjs ? theme.circle.appjs : '/js/circle.js' %>"    rel="external nofollow"></script>
-<script type="text/javascript"
-    src="<%= theme.circle.bundejs ? theme.circle.bundejs : 'https://npm.elemecdn.com/wzheo-absolute@1.0.3/lib/bundle.min.js' %>"
-    rel="external nofollow"></script>
+<script type="text/javascript" src="<%= theme.circle.appjs %>"></script>
+<script type="text/javascript" src="<%= theme.circle.bundlejs %>"></script>

package/layout/partial/compoment/dorakika/rightmenu.ejs

@@ -1,115 +1,100 @@
 <div id="rightMenu">
     <div class="rightMenu-group rightMenu-small">
-        <a class="rightMenu-item" href="javascript:window.history.back();">
-            <i class="scoicon ri-arrow-left-circle-fill"></i>
-        </a>
-        <a class="rightMenu-item" href="javascript:window.history.forward();">
-            <i class="scoicon ri-arrow-right-circle-fill"></i>
-        </a>
-        <a class="rightMenu-item" href="javascript:window.location.reload();">
-            <i class="scoicon ri-restart-fill"></i>
-        </a>
-        <a class="rightMenu-item" href="javascript:sco.toTop();">
-            <i class="scoicon ri-arrow-up-circle-fill"></i>
-        </a>
+        <div class="rightMenu-item" id="menu-backward">
+            <i class="scoicon sco-arrow-left-line"></i>
+        </div>
+        <div class="rightMenu-item" id="menu-forward">
+            <i class="scoicon sco-arrow-right-line"></i>
+        </div>
+        <div class="rightMenu-item" id="menu-refresh">
+            <i class="scoicon sco-restart-line" style="font-size: 19px;"></i>
+        </div>
+        <div class="rightMenu-item" id="menu-top">
+            <i class="scoicon sco-arrow-up-line"></i>
+        </div>
     </div>
-    <div class="rightMenu-group rightMenu-line hide" id="menu-text">
-        <a class="rightMenu-item" href="javascript:rmf.copySelect();">
-            <i class="scoicon ri-file-copy-fill"></i>
+    <div class="rightMenu-group rightMenu-line rightMenuPlugin">
+        <div class="rightMenu-item" id="menu-copytext">
+            <i class="scoicon sco-copy-fill"></i>
             <span>复制选中文本</span>
+        </div>
+        <div class="rightMenu-item" id="menu-pastetext">
+            <i class="heofont icon-clipboard-fill"></i>
+            <span>粘贴文本</span>
+        </div>
+        <a class="rightMenu-item" id="menu-commenttext" data-pjax-state="">
+            <i class="scoicon sco-chat-new-fill"></i>
+            <span>引用到评论</span>
         </a>
+        <div class="rightMenu-item" id="menu-newwindow">
+            <i class="scoicon sco-window-fill"></i>
+            <span>新窗口打开</span>
+        </div>
+        <div class="rightMenu-item" id="menu-copylink">
+            <i class="scoicon sco-link-line"></i>
+            <span>复制链接地址</span>
+        </div>
+        <div class="rightMenu-item" id="menu-copyimg">
+            <i class="scoicon sco-copy-fill"></i>
+            <span>复制此图片</span>
+        </div>
+        <div class="rightMenu-item" id="menu-downloadimg">
+            <i class="scoicon sco-download-cloud-fill"></i>
+            <span>下载此图片</span>
+        </div>
+        <div class="rightMenu-item" id="menu-search">
+            <i class="scoicon sco-search-line"></i>
+            <span>站内搜索</span>
+        </div>
+        <div class="rightMenu-item" id="menu-searchBaidu">
+            <i class="scoicon sco-baidu-fill"></i>
+            <span>百度搜索</span>
+        </div>
+        <div class="rightMenu-item" id="menu-music-toggle">
+            <i class="scoicon sco-play-fill"></i>
+            <span>播放音乐</span>
+        </div>
+        <div class="rightMenu-item" id="menu-music-back">
+            <i class="scoicon sco-skip-back-fill"></i>
+            <span>切换到上一首</span>
+        </div>
+        <div class="rightMenu-item" id="menu-music-forward">
+            <i class="scoicon sco-skip-forward-fill"></i>
+            <span>切换到下一首</span>
+        </div>
+        <div class="rightMenu-item" id="menu-music-playlist"
+             onclick="window.open('<%- theme.thirdparty.aplayer.server == 'tencent' ? `https://y.qq.com/n/ryqq/playlist/${theme.thirdparty.aplayer.id}` : `https://music.163.com/#/playlist?id=${theme.thirdparty.aplayer.id}` %>', '_blank');">
+            <i class="scoicon sco-play-list-2-line"></i>
+            <span>查看所有歌曲</span></div>
+        <div class="rightMenu-item" id="menu-music-copyMusicName">
+            <i class="scoicon sco-copy-fill"></i>
+            <span>复制歌名</span>
+        </div>
     </div>
-    <div class="rightMenu-group rightMenu-line">
-        <a class="rightMenu-item" href="javascript:toRandomPost();">
-            <i class="scoicon ri-signal-tower-fill"></i>
-            <span>随便逛逛</span>
-        </a>
-        <a class="rightMenu-item" href="/categories/">
-            <i class="scoicon ri-send-backward"></i>
-            <span>文章分类</span>
-        </a>
-        <a class="rightMenu-item" href="/tags/">
-            <i class="scoicon ri-price-tag-3-fill"></i>
-            <span>文章标签</span>
-        </a>
+    <div class="rightMenu-group rightMenu-line rightMenuOther">
+        <a class="rightMenu-item menu-Link" id="menu-randomPost" data-pjax-state="">
+            <i class="scoicon sco-signal-tower-fill"></i>
+            <span>随便逛逛</span></a>
+        <a class="rightMenu-item menu-link" href="/categories/" data-pjax-state="">
+            <i class="scoicon sco-checkbox-multiple-blank-fill"></i>
+            <span>博客分类</span></a>
+        <a class="rightMenu-item menu-link" href="/tags/" data-pjax-state="">
+            <i class="scoicon sco-price-tag-fill"></i>
+            <span>文章标签</span></a>
     </div>
-    <div class="rightMenu-group rightMenu-line">
-        <a class="rightMenu-item" href="javascript:sco.switchDarkMode();">
-            <i class="scoicon ri-contrast-2-fill"></i>
-            <span>昼夜转换</span>
-        </a>
-        <a class="rightMenu-item" href="javascript:sco.copyPageUrl();">
-            <i class="scoicon ri-external-link-fill"></i>
+    <div class="rightMenu-group rightMenu-line rightMenuOther">
+        <div class="rightMenu-item" id="menu-copy">
+            <i class="scoicon sco-external-link-fill"></i>
             <span>复制地址</span>
-        </a>
-        <% if(theme.comment.enable){ %>
-            <a class="rightMenu-item" href="javascript:sco.switchCommentBarrage()">
-                <i class="scoicon ri-message-3-fill"></i>
-                <span class="menu-commentBarrage-text">关闭热评</span>
-            </a>
-        <% } %>
+        </div>
+        <div class="rightMenu-item" id="menu-commentBarrage">
+            <i class="scoicon sco-chat-fill"></i>
+            <span class="menu-commentBarrage-text">关闭热评</span>
+        </div>
+        <div class="rightMenu-item" id="menu-darkmode">
+            <i class="scoicon sco-moon-clear-fill"></i>
+            <span class="menu-darkmode-text">浅色模式</span>
+        </div>
     </div>
 </div>
-<script>
-    let rmf = {};
-    rmf.showRightMenu = function (isTrue, x = 0, y = 0) {
-        let rightMenu = document.getElementById('rightMenu');
-        rightMenu.style.top = x + 'px';
-        rightMenu.style.left = y + 'px';
-
-        if (isTrue) {
-            rightMenu.style.display = 'block';
-        } else {
-            rightMenu.style.display = 'none';
-        }
-    }
-
-    //复制选中文字
-    rmf.copySelect = function () {
-        document.execCommand('Copy', false, null);
-        //这里可以写点东西提示一下 已复制
-    }
-
-    rmf.hideRightMenu = function () {
-        rmf.showRightMenu(false);
-        document.getElementById("rightmenu-item").style.display = "none";
-    };
-
-    rmf.rightmenuCopyText = function (e) {
-        navigator.clipboard && navigator.clipboard.writeText(e),
-            rmf.hideRightMenu()
-    }
-
-    // 右键菜单事件
-    if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
-        window.oncontextmenu = function (event) {
-            let rightMenuGroup = document.querySelectorAll('.rightMenu-group.hide');
-            rightMenuGroup.forEach(function (group) {
-                group.style.display = 'none';
-            });
-
-            //如果有文字选中，则显示 文字选中相关的菜单项
-            if (document.getSelection().toString()) {
-                document.getElementById('menu-text').style.display = 'block';
-            }
-
-            let pageX = event.clientX + 10;
-            let pageY = event.clientY;
-            let rmWidth = document.getElementById('rightMenu').offsetWidth;
-            let rmHeight = document.getElementById('rightMenu').offsetHeight;
-            if (pageX + rmWidth > window.innerWidth) {
-                pageX -= rmWidth + 10;
-            }
-            if (pageY + rmHeight > window.innerHeight) {
-                pageY -= pageY + rmHeight - window.innerHeight;
-            }
-
-            rmf.showRightMenu(true, pageY, pageX);
-            return false;
-        };
-
-        window.addEventListener('click', function () {
-            rmf.showRightMenu(false);
-        });
-    }
-</script>
+<div id="rightmenu-mask"></div>