更新

assets/css/joe.global.scss

@@ -1,51 +1,3 @@
-/* 以下配色为全球公认的一套色彩值，如无必要，无需修改下方色彩值（主题色可以修改） */
-html {
-	--theme: #409eff;
-	--background: #fff;
-	--main: #303133;
-	--routine: #606266;
-	--minor: #909399;
-	--seat: #c0c4cc;
-	--classA: #dcdfe6;
-	--classB: #e4e7ed;
-	--classC: #ebeef5;
-	--classD: #f2f6fc;
-	--radius-wrap: 8px;
-	--radius-inner: 4px;
-	--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-	--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
-}
-
-/* 黑夜模式的配色方案是我随便写的一套，您可以修改配色成您的一套方案 */
-html[data-night='night'] {
-	--background: #333;
-	--theme: #54b5db;
-	--main: #808080;
-	--routine: #7b7b7b;
-	--minor: #6d6d6d;
-	--seat: #666;
-	--classA: #444;
-	--classB: #444;
-	--classC: #444;
-	--classD: #444;
-	--text-shadow: none;
-	--box-shadow: none;
-}
-
-/* 此处用于修改黑夜模式下没有覆盖到的小地方的样式 */
-html[data-night='night'] {
-	body::before {
-		background: #202122;
-		z-index: -500;
-	}
-	.joe_header__above-logo img {
-		display: none;
-	}
-	.joe_header__above-logo svg {
-		display: block;
-	}
-}
-
 .joe_dropdown {
     position: relative;
     &__link {
@@ -1654,14 +1606,15 @@ html[data-night='night'] {
             }
         }
         &-anote {
+			position: relative;
             display: inline-block;
             color: #fff;
             height: 35px;
             line-height: 35px;
-			transition: transform 0.35s, box-shadow 0.35s;
+            transform: translateZ(0);
+			transition: transform 0.35s;
             &:hover {
                 transform: translateY(-3px);
-				box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
             }
             .icon {
                 display: inline-block;
@@ -1814,13 +1767,11 @@ html[data-night='night'] {
         }
     }
     &__friends {
-		display: flex;
+        display: grid;
-		flex-wrap: wrap;
+        grid-template-columns: repeat(4, 1fr);
-		margin: 0 -7.5px;
+        gap: 15px;
         margin-bottom: 15px;
         &-item {
-			width: 25%;
-			padding: 7.5px;
             .contain {
                 display: block;
                 border-radius: var(--radius-inner);

assets/css/joe.index.scss

@@ -83,11 +83,10 @@
     &__hot {
         padding-top: 15px;
         &-list {
-            display: flex;
+            display: grid;
-            margin: 0 -5px;
+            grid-template-columns: repeat(4, 1fr);
+            column-gap: 15px;
             .item {
-                width: 25%;
-                padding: 0 5px;
                 .link {
                     display: block;
                     .inner {

assets/css/joe.live.scss

@@ -86,7 +86,7 @@
     }
     &__list {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(3, 1fr);
         gap: 15px;
         &-item {
             display: block;

assets/css/joe.mode.css

@@ -0,0 +1 @@
+html{--theme: #409eff;--background: #fff;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--radius-wrap: 8px;--radius-inner: 4px;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[data-night='night']{--background: #333;--theme: #54b5db;--main: #808080;--routine: #7b7b7b;--minor: #6d6d6d;--seat: #666;--classA: #444;--classB: #444;--classC: #444;--classD: #444;--text-shadow: none;--box-shadow: none}html[data-night='night'] body::before{background:#202122;z-index:-500}html[data-night='night'] .joe_header__above-logo img{display:none}html[data-night='night'] .joe_header__above-logo svg{display:block}

assets/css/joe.mode.scss

@@ -0,0 +1,48 @@
+/* 昼夜模式专用css */
+/* 以下配色为全球公认的一套色彩值，如无必要，无需修改下方色彩值（主题色可以修改） */
+html {
+    --theme: #409eff;
+    --background: #fff;
+    --main: #303133;
+    --routine: #606266;
+    --minor: #909399;
+    --seat: #c0c4cc;
+    --classA: #dcdfe6;
+    --classB: #e4e7ed;
+    --classC: #ebeef5;
+    --classD: #f2f6fc;
+    --radius-wrap: 8px;
+    --radius-inner: 4px;
+    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
+}
+
+/* 黑夜模式的配色方案是我随便写的一套，您可以修改配色成您的一套方案 */
+html[data-night='night'] {
+    --background: #333;
+    --theme: #54b5db;
+    --main: #808080;
+    --routine: #7b7b7b;
+    --minor: #6d6d6d;
+    --seat: #666;
+    --classA: #444;
+    --classB: #444;
+    --classC: #444;
+    --classD: #444;
+    --text-shadow: none;
+    --box-shadow: none;
+}
+
+/* 此处用于修改黑夜模式下没有覆盖到的小地方的样式 */
+html[data-night='night'] {
+    body::before {
+        background: #202122;
+        z-index: -500;
+    }
+    .joe_header__above-logo img {
+        display: none;
+    }
+    .joe_header__above-logo svg {
+        display: block;
+    }
+}

assets/css/joe.responsive.css

@@ -0,0 +1 @@
+@media (max-width: 1760px){html #live2d-widget{visibility:hidden}}@media (max-width: 1400px){html .joe_live__play-player{height:520px}html .joe_detail__friends{grid-template-columns:repeat(3, 1fr)}html .joe_video__source-list{grid-template-columns:repeat(7, 1fr)}}@media (max-width: 1200px){html .joe_live__list-item .thumb{height:125px}}html .noaside .joe_live__list{grid-template-columns:repeat(4, 1fr)}html .noaside .joe_video__list-item{grid-template-columns:repeat(7, 1fr)}html .noaside .joe_wallpaper__list{grid-template-columns:repeat(5, 1fr)}@media (max-width: 1400px){html .noaside .joe_detail__friends{grid-template-columns:repeat(4, 1fr)}html .noaside .joe_video__list-item{grid-template-columns:repeat(6, 1fr)}}

assets/css/joe.responsive.scss

@@ -0,0 +1,61 @@
+/* 基类：基于 最大屏幕 + 有侧边栏 下进行适配 */
+
+/* 有侧边栏时候的样式 */
+html {
+    @media (max-width: 1760px) {
+        #live2d-widget {
+            visibility: hidden;
+        }
+    }
+    @media (max-width: 1400px) {
+        .joe_live__play-player {
+            height: 520px;
+        }
+        .joe_detail__friends {
+            grid-template-columns: repeat(3, 1fr);
+        }
+        .joe_video__source-list {
+            grid-template-columns: repeat(7, 1fr);
+        }
+    }
+    @media (max-width: 1200px) {
+        .joe_live__list-item .thumb {
+            height: 125px;
+        }
+    }
+    @media (max-width: 992px) {
+    }
+    @media (max-width: 768px) {
+    }
+    @media (max-width: 576px) {
+    }
+}
+
+/* 没有侧边栏时候的样式 */
+html .noaside {
+    .joe_live__list {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .joe_video__list-item {
+        grid-template-columns: repeat(7, 1fr);
+    }
+    .joe_wallpaper__list {
+        grid-template-columns: repeat(5, 1fr);
+    }
+    @media (max-width: 1400px) {
+        .joe_detail__friends {
+            grid-template-columns: repeat(4, 1fr);
+        }
+        .joe_video__list-item {
+            grid-template-columns: repeat(6, 1fr);
+        }
+    }
+    @media (max-width: 1200px) {
+    }
+    @media (max-width: 992px) {
+    }
+    @media (max-width: 768px) {
+    }
+    @media (max-width: 576px) {
+    }
+}

assets/css/joe.video.scss

@@ -75,7 +75,7 @@
         &-item {
             display: grid;
             gap: 15px;
-            grid-template-columns: repeat(6, 1fr);
+            grid-template-columns: repeat(5, 1fr);
             border-top: 1px solid var(--classC);
             padding-top: 15px;
             .item {
@@ -263,7 +263,7 @@
             .description {
                 overflow: hidden;
                 dt {
-                    font-size: 24px;
+                    font-size: 22px;
                     color: var(--main);
                     max-width: 100%;
                     overflow: hidden;

assets/css/joe.wallpaper.scss

@@ -71,7 +71,7 @@
 	}
 	&__list {
 		display: grid;
-		grid-template-columns: repeat(5, 1fr);
+		grid-template-columns: repeat(4, 1fr);
 		.item {
 			position: relative;
 			display: block;

assets/js/joe.global.js

@@ -207,6 +207,19 @@ document.addEventListener('DOMContentLoaded', () => {
         $(window).on('scroll', () => calcProgress());
     }
 
+    /* 判断页面上是否有侧边栏 */
+    {
+        const getAside = () => {
+            if ($('.joe_aside').length === 0) {
+                $('body').addClass('noaside');
+            } else {
+                $('body').removeClass('noaside');
+            }
+        };
+        getAside();
+        $(window).on('resize', () => getAside());
+    }
+
     /* 评论框点击切换画图模式和文本模式 */
     {
         $('.joe_comment__respond-type .item').on('click', function () {

core/function.php

@@ -3,7 +3,7 @@
 /* 获取主题当前版本号 */
 function _getVersion()
 {
-    return "1.0.0";
+    return "5.0.0";
 };
 
 /* 判断是否是手机 */

core/route.php

@@ -6,7 +6,7 @@ function _getRanking($self)
     header("HTTP/1.1 200 OK");
     $ranking_txt = Helper::options()->JAside_Ranking;
     $ranking_arr = explode("$", $ranking_txt);
-    $json = _curl("https://the.top/v1/{$ranking_arr[1]}/1/9");
+    $json = _curl("https://rank.the.top/v1/{$ranking_arr[1]}/1/9");
     $res = json_decode($json, TRUE);
     if ($res['code'] === 0) {
         $self->response->throwJson([

functions.php

@@ -237,7 +237,7 @@ function themeConfig($form)
             'https://cdn.jsdelivr.net/npm/live2d-widget-model-hk_fos@1.0.0/assets/hk416.model.json' => 'hk416'
         ),
         'off',
-        '选择一款喜爱的Live2D动态人物模型',
+        '选择一款喜爱的Live2D动态人物模型（仅在屏幕分辨率大于1760px下显示）',
         '介绍：开启后会在右下角显示一个小人'
     );
     $JLive2d->setAttribute('class', 'joe_content joe_global');

library/player.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8" />

public/include.php

@@ -60,13 +60,15 @@
     <?php $this->header(); ?>
 <?php endif; ?>
 <!-- 全局公用CSS（静态资源放在了CDN上，如果你的服务器带宽不够，请不要修改成本地，cdn采用jsdelivr放心不会失效） -->
+<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.mode.css'); ?>">
+<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.normalize.css'); ?>">
+<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.css'); ?>">
+<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.responsive.css'); ?>">
+<link rel="stylesheet" href="<?php $this->options->themeUrl('plugin/qmsg/qmsg.css'); ?>" />
 <link rel="stylesheet" href="https://apip.weatherdt.com/standard/static/css/weather-standard.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
-<link rel="stylesheet" href="<?php $this->options->themeUrl('plugin/qmsg/qmsg.css'); ?>" />
-<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.normalize.css'); ?>">
-<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.css'); ?>">
 <!-- 全局公用JS（静态资源放在了CDN上，如果你的服务器带宽不够，请不要修改成本地，cdn采用jsdelivr放心不会失效） -->
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/scroll/joe.scroll.js"></script>