更新

assets/css/joe.global.scss

@@ -1,3 +1,36 @@
+/* 以下配色为全球公认的一套色彩值，如无必要，无需修改下方色彩值（主题色可以修改） */
+html {
+	--theme: #409eff;
+	--background: #fff;
+	--main: #303133;
+	--routine: #606266;
+	--minor: #909399;
+	--seat: #c0c4cc;
+	--classA: #dcdfe6;
+	--classB: #e4e7ed;
+	--classC: #ebeef5;
+	--classD: #f2f6fc;
+	--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;
@@ -211,6 +244,7 @@ html[data-night='night'] {
 			}
 			.result {
 				position: absolute;
+				z-index: 2;
 				top: 60px;
 				left: 0;
 				right: 0;
@@ -327,6 +361,7 @@ html[data-night='night'] {
 		}
 		&-progress {
 			position: absolute;
+			z-index: 1;
 			left: 0;
 			bottom: -3px;
 			height: 3px;
@@ -1349,7 +1384,7 @@ html[data-night='night'] {
 			cursor: zoom-in;
 			margin: 0 auto;
 			&:hover {
-                // transform: translateY(-5px);
+				transform: translateY(-5px);
 				box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
 			}
 		}
@@ -1512,26 +1547,30 @@ html[data-night='night'] {
 			}
 		}
 	}
-    &__friends{
+	&__friends {
 		display: flex;
 		flex-wrap: wrap;
 		margin: 0 -7.5px;
+		margin-bottom: 15px;
 		&-item {
 			width: 25%;
 			padding: 7.5px;
 			.contain {
 				display: block;
 				border-radius: 4px;
-                white-space: nowrap;
 				overflow: hidden;
-                text-overflow: ellipsis;
 				padding: 15px;
 				color: #fff;
 				word-break: break-all;
+				transition: transform 0.35s, box-shadow 0.35s;
+				&:hover {
+					transform: translateY(-5px) scale(1.025);
+					box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
+				}
 				.title {
 					position: relative;
-                    &::after{
+					&::after {
-                        content: "";
+						content: '';
 						position: absolute;
 						bottom: -5px;
 						left: 0;
@@ -1545,12 +1584,16 @@ html[data-night='night'] {
 					justify-content: space-between;
 					align-items: center;
 					margin-top: 15px;
+					.desc {
+						margin-right: 10px;
+					}
 					.avatar {
 						width: 40px;
 						height: 40px;
 						min-width: 40px;
 						min-height: 40px;
 						border-radius: 50%;
+						object-fit: cover;
 					}
 				}
 			}

assets/css/joe.normalize.css

@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--seat)}::-webkit-scrollbar-track{background:transparent}body{font-size:14px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_main{min-width:0;flex:1;padding:15px 0}.joe_container{display:flex;width:100%;margin:0 auto;padding:0 15px}@media (min-width: 576px){.joe_container{max-width:540px}}@media (min-width: 768px){.joe_container{max-width:720px}}@media (min-width: 992px){.joe_container{max-width:960px}}@media (min-width: 1200px){.joe_container{max-width:1140px}}@media (min-width: 1400px){.joe_container{max-width:1320px}}html{--background: #fff;--theme: #f24e4e;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--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: #303133;--box-shadow: none}
+*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--seat)}::-webkit-scrollbar-track{background:transparent}body{font-size:14px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_main{min-width:0;flex:1;padding:15px 0}.joe_container{display:flex;width:100%;margin:0 auto;padding:0 15px}@media (min-width: 576px){.joe_container{max-width:540px}}@media (min-width: 768px){.joe_container{max-width:720px}}@media (min-width: 992px){.joe_container{max-width:960px}}@media (min-width: 1200px){.joe_container{max-width:1140px}}@media (min-width: 1400px){.joe_container{max-width:1320px}}

assets/css/joe.normalize.scss

@@ -22,6 +22,7 @@
 
 body {
 	font-size: 14px;
+	/* 我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。 */
 	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 }
 
@@ -130,23 +131,3 @@ table {
 		max-width: 1320px;
 	}
 }
-
-html {
-    --background: #fff;
-    --theme: #f24e4e;
-    --main: #303133;
-    --routine: #606266;
-    --minor: #909399;
-    --seat: #c0c4cc;
-    --classA: #dcdfe6;
-    --classB: #e4e7ed;
-    --classC: #ebeef5;
-    --classD: #f2f6fc;
-    --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: #303133;
-    --box-shadow: none;
-}

assets/js/joe.index.js

@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 	/* 初始化首页列表功能 */
 	{
-		let queryData = { page: 1, pageSize: 10, type: 'created' }
+		let queryData = { page: 1, pageSize: 12, type: 'created' }
 		const initDom = () => {
 			$('.joe_index__list .joe_list').html('')
 			let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]')
@@ -82,7 +82,7 @@ document.addEventListener('DOMContentLoaded', () => {
 		pushDom()
 		$('.joe_index__title-title .item').on('click', async function () {
 			if ($(this).attr('data-type') === queryData.type) return
-			queryData = { page: 1, pageSize: 10, type: $(this).attr('data-type') }
+			queryData = { page: 1, pageSize: 12, type: $(this).attr('data-type') }
 			initDom()
 			pushDom()
 		})

core/core.php

@@ -11,7 +11,7 @@ function themeInit($self)
 {
     Helper::options()->commentsThreaded = true;
     /* 强制显示一页15篇文章 */
-    $self->parameter->pageSize = 15;
+    $self->parameter->pageSize = 12;
 
     /* 主题开放API 路由规则 */
     $path_info = $self->request->getPathinfo();

friends.php

@@ -32,20 +32,44 @@
                     <?php
                     $friends = [];
                     $friends_color = [
-                        '#0396ff',
+                        '#F8D800',
-                        '#ea5455',
+                        '#0396FF',
-                        '#7367f0',
+                        '#EA5455',
-                        '#28c76f',
+                        '#7367F0',
-                        '#9f44d3',
+                        '#32CCBC',
+                        '#F6416C',
+                        '#28C76F',
+                        '#9F44D3',
+                        '#F55555',
+                        '#736EFE',
+                        '#E96D71',
+                        '#DE4313',
+                        '#D939CD',
+                        '#4C83FF',
+                        '#F072B6',
+                        '#C346C2',
+                        '#5961F9',
+                        '#FD6585',
+                        '#465EFB',
+                        '#FFC600',
+                        '#FA742B',
+                        '#5151E5',
+                        '#BB4E75',
+                        '#FF52E5',
+                        '#49C628',
+                        '#00EAFF',
+                        '#F067B4',
+                        '#F067B4',
+                        '#ff9a9e',
+                        '#00f2fe',
+                        '#4facfe',
+                        '#f093fb',
                         '#6fa3ef',
                         '#bc99c4',
                         '#46c47c',
                         '#f9bb3c',
                         '#e8583d',
                         '#f68e5f',
-                        '#67c23a',
-                        '#e6a23c',
-                        '#f56c6c'
                     ];
                     $friends_text = $this->options->JFriends;
                     if ($friends_text) {
@@ -68,7 +92,7 @@
                                     <a class="contain" href="http://ae.js.cn" target="_blank" rel="noopener noreferrer" style="background: <?php echo $friends_color[rand(0, count($friends_color) - 1)] ?>">
                                         <span class="title"><?php echo $item['name']; ?></span>
                                         <div class="content">
-                                            <p class="desc"><?php echo $item['desc']; ?></p>
+                                            <div class="desc"><?php echo $item['desc']; ?></div>
                                             <img class="avatar" src="<?php echo $item['avatar']; ?>" alt="<?php echo $item['name']; ?>" />
                                         </div>
                                     </a>

functions.php

@@ -588,7 +588,7 @@ function themeConfig($form)
         'Joe的博客 || https://ae.js.cn || https://cdn.jsdelivr.net/npm/typecho_joe_theme@4.3.5/assets/img/link.png || Joe主题作者',
         '友情链接（非必填）',
         '介绍：用于填写友情链接 <br />
-         注意：您需要先增加友联链接页面，该项才会生效 <br />
+         注意：您需要先增加友联链接页面（新增独立页面-右侧模板选择友联），该项才会生效 <br />
          格式：博客名称 || 博客地址 || 博客头像 || 博客简介 <br />
          其他：一行一个，一行代表一个友联'
     );