更新

assets/css/joe.global.scss

@@ -46,6 +46,24 @@
 	}
 }
 
+.joe_mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.65);
+	backdrop-filter: blur(5px);
+	opacity: 0;
+	visibility: hidden;
+	transition: visibility 0.35s, opacity 0.35s;
+	z-index: 888;
+	&.active {
+		visibility: visible;
+		opacity: 1;
+	}
+}
+
 .joe_header {
 	position: sticky;
 	top: 0;
@@ -53,6 +71,9 @@
 	background: var(--background);
 	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
 	&__above {
+		position: relative;
+		z-index: 998;
+		background: var(--background);
 		.joe_container {
 			align-items: center;
 		}
@@ -308,6 +329,14 @@
 				}
 			}
 		}
+		&-searchicon {
+			display: none;
+			width: 20px;
+			height: 20px;
+			fill: var(--routine);
+			margin-left: auto;
+			cursor: pointer;
+		}
 	}
 	&__below {
 		position: relative;
@@ -366,6 +395,78 @@
 			transition: width 0.35s;
 		}
 	}
+	&__searchout {
+		position: absolute;
+		top: 60px;
+		left: 0;
+		right: 0;
+		z-index: 990;
+		background: var(--background);
+		border-top: 1px solid var(--classC);
+		transform: translate3d(0, -100%, 0);
+		transition: transform 0.35s, visibility 0.35s;
+		visibility: hidden;
+		&.active {
+			visibility: visible;
+			transform: translate3d(0, 0, 0);
+		}
+		&-inner {
+			padding: 15px 0;
+			width: 100%;
+			.search {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				input {
+					flex: 1;
+					height: 36px;
+					padding: 0 10px;
+					border: 1px solid var(--classA);
+					border-right: none;
+					border-radius: 2px 0 0 2px;
+					color: var(--routine);
+				}
+				button {
+					padding: 0 10px;
+					height: 36px;
+					border: none;
+					background: var(--theme);
+					color: #fff;
+					border-radius: 0 2px 2px 0;
+				}
+			}
+			.title {
+				color: var(--routine);
+				padding: 15px 0 10px;
+				font-size: 16px;
+				display: flex;
+				align-items: center;
+				.icon {
+					width: 22px;
+					height: 22px;
+					fill: var(--routine);
+					margin-right: 5px;
+				}
+			}
+			.cloud {
+				display: flex;
+				flex-wrap: wrap;
+				margin: 0 -5px -5px;
+				.item {
+					padding: 5px;
+					a {
+						display: block;
+						padding: 0 10px;
+						height: 24px;
+						line-height: 24px;
+						border-radius: 2px;
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
 }
 
 .joe_aside {
@@ -866,6 +967,7 @@
 				font-size: 18px;
 				line-height: 24px;
 				transition: color 0.35s;
+				font-weight: normal;
 				&:hover {
 					color: var(--theme);
 				}
@@ -881,7 +983,8 @@
 			text-overflow: ellipsis;
 			color: var(--minor);
 			word-break: break-all;
-			line-height: 26px;
+			line-height: 22px;
+			font-size: 13px;
 			opacity: 0.85;
 		}
 		.line {
@@ -1006,7 +1109,7 @@
 				}
 			}
 			.information {
-				margin-bottom: 10px;
+				margin-bottom: 15px;
 			}
 			.thumbnail {
 				display: block;
@@ -1014,7 +1117,7 @@
 				width: 100%;
 				height: 280px;
 				overflow: hidden;
-				margin-bottom: 10px;
+				margin-bottom: 15px;
 				img {
 					width: 100%;
 					height: 100%;
@@ -1050,14 +1153,14 @@
 		}
 		&.multiple {
 			.information {
-				margin-bottom: 10px;
+				margin-bottom: 15px;
 			}
 			.thumbnail {
 				display: grid;
 				grid-template-columns: repeat(3, 1fr);
 				grid-template-rows: 180px;
-				gap: 10px;
+				gap: 15px;
-				margin-bottom: 10px;
+				margin-bottom: 15px;
 				img {
 					width: 100%;
 					height: 100%;

assets/css/joe.index.scss

@@ -61,8 +61,8 @@
 					color: #fff;
 					line-height: 20px;
 					&_type {
-                        background-image: linear-gradient(to right, #fc712a, #f84c39);
+                        background-image: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);
-                        background-color: #f84c39;
+						background-color: #8695e6;
 						padding: 0 5px;
 						height: 20px;
 						border-radius: 2px;
@@ -126,7 +126,8 @@
 							z-index: 1;
 							top: 5px;
 							right: 5px;
-                            background-image: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);
+							background-image: linear-gradient(to right, #fc712a, #f84c39);
+							background-color: #f84c39;
 							color: #fff;
 							font-size: 12px;
 							height: 18px;

assets/css/joe.responsive.scss

@@ -0,0 +1,360 @@
+/* 基类：基于 最大屏幕 + 有侧边栏 下进行适配 */
+
+html {
+	@media (max-width: 1760px) {
+		#live2d-widget {
+			visibility: hidden;
+		}
+	}
+	@media (max-width: 1400px) {
+		.joe_video__list-item {
+			grid-template-columns: repeat(5, 1fr);
+		}
+		.joe_live__play-player {
+			height: 500px;
+		}
+		.joe_list__item.single .thumbnail {
+			height: 230px;
+		}
+		.joe_list__item.multiple .thumbnail {
+			grid-template-rows: 150px;
+		}
+	}
+	@media (max-width: 1200px) {
+		.joe_wallpaper__list {
+			grid-template-columns: repeat(3, 1fr);
+		}
+		.joe_detail__friends {
+			grid-template-columns: repeat(2, 1fr);
+		}
+		.joe_video__list-item {
+			grid-template-columns: repeat(4, 1fr);
+		}
+		.joe_video__player-play {
+			height: 450px;
+		}
+		.joe_live__list {
+			grid-template-columns: repeat(2, 1fr);
+		}
+		.joe_live__play-player {
+			height: 450px;
+		}
+		.joe_detail__article-player {
+			height: 450px;
+		}
+		.joe_list__item.multiple .thumbnail {
+			grid-template-rows: 125px;
+		}
+		.joe_list__item.single .thumbnail {
+			height: 200px;
+		}
+		.joe_index__ad-link .image {
+			height: 180px;
+		}
+		.joe_index__hot-list .item .link .inner .image {
+			height: 90px;
+		}
+		.joe_index__banner {
+			display: block;
+		}
+		.joe_index__banner-recommend {
+			padding-top: 15px;
+			width: 100%;
+			margin-left: 0;
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: 15px;
+			&.noswiper {
+				padding-top: 0;
+			}
+		}
+		.joe_index__banner-recommend .item {
+			margin: 0 !important;
+		}
+		.joe_index__hot-list {
+			column-gap: 10px;
+		}
+		.joe_video__list-item .item .thumb {
+			height: 200px;
+		}
+	}
+	@media (max-width: 992px) {
+		.joe_aside {
+			display: none;
+		}
+		.joe_video__list-item .item .thumb {
+			height: 220px;
+		}
+		.joe_video__source-list {
+			grid-template-columns: repeat(5, 1fr);
+		}
+		.joe_live__play-player {
+			height: 420px;
+		}
+		.joe_video__player-play {
+			height: 420px;
+		}
+		.joe_detail__article-player {
+			height: 420px;
+		}
+		.swiper-container {
+			height: 300px;
+		}
+		.swiper-container .item {
+			height: 300px;
+		}
+		.joe_header__above-logo {
+			padding-right: 0;
+		}
+		.joe_header__above-logo::after {
+			display: none;
+		}
+		.joe_header__above-search {
+			display: none;
+		}
+		.joe_header__above-searchicon {
+			display: block;
+		}
+	}
+	@media (max-width: 768px) {
+		.joe_header__above-nav {
+			display: none;
+		}
+		.joe_header__below {
+			display: none;
+		}
+		.joe_header__above-logo {
+			height: 55px;
+		}
+		.joe_header__above-logo img {
+			max-height: 45px;
+		}
+		.joe_header__searchout {
+			top: 55px;
+		}
+		.joe_header__above-slide {
+			display: block;
+		}
+		.swiper-container {
+			height: 180px;
+			.item {
+				height: 180px;
+			}
+		}
+		.joe_index__banner-recommend {
+			gap: 10px;
+			.item {
+				height: 100px;
+			}
+		}
+		.joe_index__hot-list {
+			overflow-x: auto;
+			grid-template-columns: repeat(4, 200px);
+			&::-webkit-scrollbar {
+				display: none;
+			}
+		}
+		.joe_index__ad-link .image {
+			height: 120px;
+		}
+		.joe_index__title-notice {
+			display: none;
+		}
+		.joe_index__title-title .item {
+			margin-right: 15px;
+		}
+		.joe_list__item {
+			.information {
+				.title {
+					h6 {
+						font-size: 16px;
+					}
+				}
+				.abstract {
+					max-height: 46px;
+				}
+			}
+			&.none {
+				.information {
+					height: 130px;
+				}
+			}
+			&.multiple {
+				.thumbnail {
+					grid-template-rows: 80px;
+					gap: 10px;
+				}
+			}
+			&.single {
+				.thumbnail {
+					height: 150px;
+				}
+			}
+			&.default {
+				padding-bottom: 47px;
+				.thumbnail {
+					width: 120px;
+					min-width: 120px;
+					height: 80px;
+					min-height: 80px;
+					margin-right: 10px;
+					time {
+						display: none;
+					}
+				}
+				.information {
+					.title {
+						margin-bottom: 0;
+					}
+					.abstract {
+						margin-top: auto;
+					}
+					.meta {
+						position: absolute;
+						bottom: 15px;
+						left: 0;
+						right: 0;
+					}
+				}
+			}
+		}
+		.joe_wallpaper {
+			&__list {
+				grid-template-columns: repeat(2, 1fr);
+			}
+			&__pagination {
+				justify-content: center;
+			}
+		}
+		.joe_detail {
+			&__friends {
+				grid-template-columns: repeat(1, 1fr);
+			}
+			&__article {
+				font-size: 14px;
+				&-player {
+					height: 230px;
+				}
+			}
+		}
+		.joe_video {
+			&__list-item {
+				grid-template-columns: repeat(3, 1fr);
+				.item .thumb {
+					height: 140px;
+				}
+			}
+			&__pagination {
+				justify-content: center;
+			}
+			&__source-list {
+				grid-template-columns: repeat(3, 1fr);
+			}
+			&__player-play {
+				height: 230px;
+			}
+		}
+		.joe_live {
+			&__pagination {
+				justify-content: center;
+			}
+			&__list-item .thumb {
+				height: 100px;
+			}
+		}
+	}
+}
+
+/* 没有侧边栏时候的样式 */
+html .noaside {
+	.joe_detail__friends {
+		grid-template-columns: repeat(4, 1fr);
+	}
+	.joe_video__list-item {
+		grid-template-columns: repeat(7, 1fr);
+	}
+	.joe_video__source-list {
+		grid-template-columns: repeat(8, 1fr);
+	}
+	.joe_live__list {
+		grid-template-columns: repeat(4, 1fr);
+	}
+	.joe_list__item.multiple .thumbnail {
+		grid-template-rows: 200px;
+	}
+	.joe_list__item.single .thumbnail {
+		height: 300px;
+	}
+	.joe_index__ad-link .image {
+		height: 250px;
+	}
+	.joe_index__hot-list .item .link .inner .image {
+		height: 140px;
+	}
+	@media (max-width: 1400px) {
+		.joe_video__list-item {
+			grid-template-columns: repeat(6, 1fr);
+		}
+		.joe_list__item.multiple .thumbnail {
+			grid-template-rows: 180px;
+		}
+		.joe_list__item.single .thumbnail {
+			height: 270px;
+		}
+	}
+	@media (max-width: 1200px) {
+		.joe_wallpaper__list {
+			grid-template-columns: repeat(4, 1fr);
+		}
+		.joe_detail__friends {
+			grid-template-columns: repeat(3, 1fr);
+		}
+		.joe_live__list {
+			grid-template-columns: repeat(3, 1fr);
+		}
+		.joe_index__hot-list .item .link .inner .image {
+			height: 120px;
+		}
+		.joe_list__item.single .thumbnail {
+			height: 250px;
+		}
+		.joe_list__item.multiple .thumbnail {
+			grid-template-rows: 150px;
+		}
+		.joe_index__banner-recommend .item {
+			height: 180px;
+		}
+	}
+	@media (max-width: 992px) {
+		.joe_wallpaper__list {
+			grid-template-columns: repeat(3, 1fr);
+		}
+		.joe_detail__friends {
+			grid-template-columns: repeat(2, 1fr);
+		}
+		.joe_video__list-item {
+			grid-template-columns: repeat(4, 1fr);
+		}
+		.joe_video__source-list {
+			grid-template-columns: repeat(5, 1fr);
+		}
+		.joe_live__list {
+			grid-template-columns: repeat(2, 1fr);
+		}
+		.joe_index__banner-recommend .item {
+			height: 160px;
+		}
+		.joe_index__hot-list .item .link .inner .image {
+			height: 90px;
+		}
+		.joe_index__ad-link .image {
+			height: 200px;
+		}
+		.joe_list__item.single .thumbnail {
+			height: 220px;
+		}
+		.joe_list__item.multiple .thumbnail {
+			grid-template-rows: 130px;
+		}
+	}
+}

assets/js/joe.global.js

@@ -323,10 +323,13 @@ document.addEventListener('DOMContentLoaded', () => {
 					Array.from(arr).forEach(_ => {
 						if (_.parentNode.className === 'container') str = _
 					})
-					if (!/Joe/.test(res)) return Qmsg.warning(str.textContent.trim() || '')
+					if (!/Joe/.test(res)) {
+						Qmsg.warning(str.textContent.trim() || '')
+						isSubmit = false
+					} else {
 						window.location.href = Joe.changeURLArg(location.href, 'scroll', 'joe_comment')
-				},
+					}
-				complete: () => (isSubmit = false)
+				}
 			})
 		})
 	}
@@ -351,4 +354,28 @@ document.addEventListener('DOMContentLoaded', () => {
 			$(this).toggleClass('active')
 		})
 	}
+
+	/* 小屏幕搜索框 */
+	{
+		$('.joe_header__above-searchicon').on('click', function () {
+			if ($('.joe_header__searchout').hasClass('active')) {
+				$('body').css('overflow', '')
+				$('.joe_mask').removeClass('active')
+				$('.joe_header__searchout').removeClass('active')
+			} else {
+				$('body').css('overflow', 'hidden')
+				$('.joe_mask').addClass('active')
+				$('.joe_header__searchout').addClass('active')
+			}
+		})
+	}
+
+	/* 点击遮罩层关闭 */
+	{
+		$('.joe_mask').on('click', function () {
+			$('body').css('overflow', '')
+			$('.joe_mask').removeClass('active')
+			$('.joe_header__searchout').removeClass('active')
+		})
+	}
 })

index.php

@@ -19,7 +19,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" />
     <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/wowjs@1.1.3/dist/wow.min.js"></script>
-    <script src="<?php $this->options->themeUrl('assets/js/joe.index.js'); ?>"></script>
+    <script src="<?php $this->options->themeUrl('assets/js/joe.index.js?v=212'); ?>"></script>
 </head>
 
 <body>

public/header.php

@@ -1,4 +1,5 @@
 <header class="joe_header">
+    
     <div class="joe_header__above">
         <div class="joe_container">
             <div class="joe_header__above-slide">
@@ -151,10 +152,14 @@
                         </a>
                         <?php $index++; ?>
                     <?php endwhile; ?>
-                    </ul>
+                </nav>
             </form>
+            <svg class="joe_header__above-searchicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+                <path d="M1008.190624 932.031321l-236.471871-236.471871a431.153179 431.153179 0 1 0-76.157382 76.157382l236.407873 236.471872a53.758152 53.758152 0 0 0 76.157382 0 53.758152 53.758152 0 0 0 0-76.157383zM107.805575 431.184538a323.636875 323.636875 0 0 1 323.316886-323.380884 323.700873 323.700873 0 0 1 323.380883 323.380884 323.636875 323.636875 0 0 1-323.380883 323.316886 323.636875 323.636875 0 0 1-323.316886-323.316886z" p-id="18926"></path>
+            </svg>
         </div>
     </div>
+
     <div class="joe_header__below">
         <div class="joe_container">
             <nav class="joe_header__below-class">
@@ -186,4 +191,72 @@
         </div>
         <div class="joe_header__below-progress"></div>
     </div>
+
+    <div class="joe_header__searchout">
+        <div class="joe_container">
+            <div class="joe_header__searchout-inner">
+                <form class="search" method="post" action="<?php $this->options->siteUrl(); ?>">
+                    <input maxlength="16" autocomplete="off" placeholder="请输入关键字..." name="s" value="<?php echo $this->is('search') ? $this->archiveTitle(' &raquo; ', '', '') : '' ?>" class="input" type="text" />
+                    <button type="submit" class="submit">Search</button>
+                </form>
+                <?php $this->widget('Widget_Metas_Tag_Cloud', array('sort' => 'count', 'ignoreZeroCount' => true, 'desc' => true, 'limit' => 20))->to($tags); ?>
+                <?php if ($tags->have()) : ?>
+                    <div class="title">
+                        <svg class="icon" viewBox="0 0 1445 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
+                            <path d="M1055.021176 277.865412a348.762353 348.762353 0 0 1 348.400942 348.340706c0 178.959059-136.131765 327.68-311.777883 346.172235l-758.603294 2.349176A291.237647 291.237647 0 0 1 42.164706 683.791059a291.237647 291.237647 0 0 1 273.227294-290.334118A369.242353 369.242353 0 0 1 683.791059 42.164706a370.567529 370.567529 0 0 1 344.18447 236.905412c9.336471-0.783059 18.191059-1.204706 27.045647-1.204706z m-371.230117-121.615059a255.036235 255.036235 0 0 0-254.735059 254.795294v95.954824H333.101176a177.031529 177.031529 0 0 0-176.790588 176.790588 177.031529 177.031529 0 0 0 176.790588 176.850823h721.980236a234.676706 234.676706 0 0 0 234.315294-234.435764 234.616471 234.616471 0 0 0-234.315294-234.255059 234.616471 234.616471 0 0 0-234.315294 234.315294v18.070588H706.56v-18.070588A348.400941 348.400941 0 0 1 915.817412 307.2a255.578353 255.578353 0 0 0-232.026353-151.009882z" p-id="20337"></path>
+                        </svg>标签搜索
+                    </div>
+                    <ul class="cloud">
+                        <?php $colors  = [
+                            '#F8D800',
+                            '#0396FF',
+                            '#EA5455',
+                            '#7367F0',
+                            '#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',
+                        ]; ?>
+                        <?php while ($tags->next()) : ?>
+                            <li class="item">
+                                <a style="background: <?php echo $colors[mt_rand(0, count($colors) - 1)] ?>" href="<?php $tags->permalink(); ?>"><?php $tags->name(); ?></a>
+                            </li>
+                        <?php endwhile; ?>
+                    </ul>
+                <?php endif; ?>
+            </div>
+        </div>
+    </div>
 </header>
+
+<div class="joe_mask"></div>

public/include.php

@@ -64,7 +64,7 @@
 <!-- 全局公用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.global.css?v=212'); ?>">
 <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.responsive.css'); ?>">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/qmsg/qmsg.css" />
 <link rel="stylesheet" href="https://apip.weatherdt.com/standard/static/css/weather-standard.css">