更新

archive.php

@@ -46,7 +46,7 @@
                                         </a>
                                         <div class="information">
                                             <a href="<?php $this->permalink() ?>" class="title" title="<?php $this->title() ?>">
-                                                <h6><?php $this->title() ?></h6>
+                                                <?php $this->title() ?>
                                             </a>
                                             <a class="abstract" href="<?php $this->permalink() ?>" title="文章摘要"><?php _getAbstract($this) ?></a>
                                             <div class="meta">
@@ -64,7 +64,7 @@
                                         <div class="line"></div>
                                         <div class="information">
                                             <a href="<?php $this->permalink() ?>" class="title" title="<?php $this->title() ?>">
-                                                <h6><?php $this->title() ?></h6>
+                                                <?php $this->title() ?>
                                             </a>
                                             <div class="meta">
                                                 <ul class="items">
@@ -92,7 +92,7 @@
                                         <div class="line"></div>
                                         <div class="information">
                                             <a href="<?php $this->permalink() ?>" class="title" title="<?php $this->title() ?>">
-                                                <h6><?php $this->title() ?></h6>
+                                                <?php $this->title() ?>
                                             </a>
                                             <a class="abstract" href="<?php $this->permalink() ?>" title="文章摘要"><?php _getAbstract($this) ?></a>
                                         </div>
@@ -116,7 +116,7 @@
                                         <div class="line"></div>
                                         <div class="information">
                                             <a href="<?php $this->permalink() ?>" class="title" title="<?php $this->title() ?>">
-                                                <h6><?php $this->title() ?></h6>
+                                                <?php $this->title() ?>
                                             </a>
                                             <a class="abstract" href="<?php $this->permalink() ?>" title="文章摘要"><?php _getAbstract($this) ?></a>
                                             <div class="meta">

assets/css/joe.global.scss

@@ -469,19 +469,108 @@
 	}
 	&__slideout {
 		position: fixed;
-		top: 0;
+		top: 55px;
 		bottom: 0;
 		left: 0;
-		width: 70%;
+		width: 80%;
 		z-index: 990;
-		background: var(--background);
+		background: var(--classD);
 		transform: translate3d(-100%, 0, 0);
 		visibility: hidden;
 		transition: transform 0.35s, visibility 0.35s;
+		overflow-y: auto;
+		padding: 135px 15px 15px;
+		&::-webkit-scrollbar {
+			display: none;
+		}
 		&.active {
 			visibility: visible;
 			transform: translate3d(0, 0, 0);
 		}
+		&-image {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 150px;
+			object-fit: cover;
+			z-index: -1;
+		}
+		&-author {
+			display: flex;
+			margin-bottom: 15px;
+			background: var(--background);
+			border-radius: var(--radius-wrap);
+			overflow: hidden;
+			padding: 15px;
+			box-shadow: var(--box-shadow);
+			.avatar {
+				width: 50px;
+				height: 50px;
+				margin-right: 10px;
+				border-radius: var(--radius-inner);
+			}
+			.info {
+				.link {
+					display: block;
+					line-height: 25px;
+					font-size: 15px;
+					font-weight: 500;
+					color: var(--main);
+				}
+				.motto {
+					line-height: 25px;
+					font-size: 12px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					color: var(--routine);
+				}
+			}
+		}
+		&-menu {
+			background: var(--background);
+			padding: 10px 15px;
+			border-radius: var(--radius-wrap);
+			overflow: hidden;
+			box-shadow: var(--box-shadow);
+			.link {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 10px 0;
+				color: var(--main);
+				transition: color 0.15s;
+				a {
+					transition: color 0.15s;
+					color: var(--routine);
+				}
+				.icon {
+					width: 13px;
+					height: 13px;
+					fill: var(--minor);
+					transition: transform 0.15s, fill 0.15s;
+				}
+				&.in {
+					color: var(--theme);
+					a {
+						color: var(--theme);
+					}
+					.icon {
+						fill: var(--theme);
+						transform: rotate(90deg);
+					}
+				}
+			}
+			.slides {
+				display: none;
+				border-left: 1px solid var(--classC);
+				padding-left: 15px;
+				.link {
+					color: var(--routine);
+				}
+			}
+		}
 	}
 }
 
@@ -960,10 +1049,24 @@
 		&:last-child {
 			border-bottom: none;
 		}
-		.information .title {
+		.information {
-			display: flex;
+			.title {
-			align-items: center;
 				margin-bottom: 10px;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				/*! autoprefixer: off */
+				-webkit-box-orient: vertical;
+				/* autoprefixer: on */
+				overflow: hidden;
+				text-overflow: ellipsis;
+				word-break: break-all;
+				color: var(--main);
+				font-size: 18px;
+				line-height: 24px;
+				transition: color 0.35s;
+				&:hover {
+					color: var(--theme);
+				}
 				.badge {
 					height: 20px;
 					line-height: 20px;
@@ -974,22 +1077,10 @@
 					border-radius: 2px;
 					padding: 0 8px;
 					white-space: nowrap;
-			}
+					vertical-align: 2px;
-			h6 {
-				color: var(--main);
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				font-size: 18px;
-				line-height: 24px;
-				transition: color 0.35s;
-				font-weight: normal;
-				&:hover {
-					color: var(--theme);
 				}
 			}
-		}
+			.abstract {
-		.information .abstract {
 				display: -webkit-box;
 				-webkit-line-clamp: 2;
 				/*! autoprefixer: off */
@@ -1000,9 +1091,9 @@
 				color: var(--minor);
 				word-break: break-all;
 				line-height: 22px;
-			font-size: 13px;
 				opacity: 0.85;
 			}
+		}
 		.line {
 			position: absolute;
 			z-index: 1;
@@ -1027,7 +1118,7 @@
 				li {
 					&::after {
 						content: '/';
-						color: #e1e1e1;
+						color: var(--seat);
 						padding: 0 5px;
 					}
 					&:last-child::after {
@@ -1550,10 +1641,18 @@
 		}
 		pre[class*='language-'] {
 			position: relative;
-			padding: 30px 15px 12px;
 			margin: 0 0 15px;
+			padding: 30px 0 0;
 			border-radius: var(--radius-inner);
 			font-size: 14px;
+			overflow: hidden !important;
+			code[class*='language-'] {
+				display: block;
+				max-width: 100%;
+				overflow: auto;
+				padding: 0 15px 12px;
+				border-radius: var(--radius-inner);
+			}
 			&::after {
 				content: '';
 				position: absolute;
@@ -1562,6 +1661,7 @@
 				width: 100%;
 				height: 30px;
 				background: #2d2d2d;
+				border-radius: var(--radius-inner) var(--radius-inner) 0 0;
 			}
 			&::before {
 				content: '';
@@ -2298,9 +2398,8 @@
 						display: flex;
 						align-items: center;
 						position: absolute;
-						top: 10px;
+						bottom: 10px;
-						left: 50%;
+						left: 10px;
-						transform: translate(-50%);
 						li {
 							width: 20px;
 							height: 20px;

assets/css/joe.responsive.scss

@@ -141,57 +141,76 @@ html {
 				height: 180px;
 			}
 		}
-		.joe_index__banner-recommend {
+		.joe_index {
+			&__banner {
+				&-recommend {
 					gap: 10px;
 					.item {
 						height: 100px;
 					}
 				}
-		.joe_index__hot-list {
+			}
+			&__hot {
+				&-list {
 					overflow-x: auto;
 					grid-template-columns: repeat(4, 200px);
 					&::-webkit-scrollbar {
 						display: none;
 					}
 				}
-		.joe_index__ad-link .image {
+			}
+			&__ad {
+				&-link {
+					.image {
 						height: 120px;
 					}
-		.joe_index__title-notice {
+				}
+			}
+			&__title {
+				&-notice {
 					display: none;
 				}
-		.joe_index__title-title .item {
+				&-title {
-			margin-right: 15px;
+					.item {
+						display: none;
+						&:nth-child(1),
+						&:nth-child(2) {
+							display: block;
 						}
-		.joe_list__item {
+					}
+				}
+			}
+		}
+		.joe_list {
+			&__item {
 				.information {
 					.title {
-					h6 {
 						font-size: 16px;
 					}
-				}
 					.abstract {
-					max-height: 46px;
+						display: none;
 					}
 				}
-			&.none {
+				.meta {
-				.information {
+					.last {
-					height: 130px;
+						display: none !important;
-				}
-			}
-			&.multiple {
-				.thumbnail {
-					grid-template-rows: 80px;
-					gap: 10px;
 					}
 				}
 				&.single {
 					.thumbnail {
 						height: 150px;
+						margin-bottom: 0;
+						time {
+							display: none;
+						}
 					}
 				}
 				&.default {
-				padding-bottom: 47px;
+					.information {
+						.title {
+							font-size: 15px;
+						}
+					}
 					.thumbnail {
 						width: 120px;
 						min-width: 120px;
@@ -202,18 +221,42 @@ html {
 							display: none;
 						}
 					}
-				.information {
 					.title {
 						margin-bottom: 0;
 					}
-					.abstract {
-						margin-top: auto;
-					}
 					.meta {
-						position: absolute;
+						.items {
-						bottom: 15px;
+							width: 100%;
-						left: 0;
+							li {
-						right: 0;
+								display: none;
+								&:nth-child(1) {
+									display: block;
+								}
+								&:nth-child(2) {
+									display: block;
+									margin-left: auto;
+								}
+								&::after {
+									display: none;
+								}
+							}
+						}
+					}
+				}
+				&.multiple {
+					.thumbnail {
+						grid-template-rows: 70px;
+						gap: 10px;
+					}
+				}
+				&.none {
+					.information {
+						height: 120px;
+					}
+					.abstract {
+						display: -webkit-box;
+						font-size: 13px;
+						max-height: 45px;
 					}
 				}
 			}
@@ -226,17 +269,6 @@ html {
 				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);
@@ -261,6 +293,101 @@ html {
 			&__list-item .thumb {
 				height: 100px;
 			}
+			&__play-player {
+				height: 200px;
+			}
+		}
+		.joe_detail {
+			&__title {
+				font-size: 18px;
+			}
+			&__count {
+				&-information {
+					width: 100%;
+					.avatar {
+						display: none;
+					}
+					.meta {
+						width: 100%;
+						height: unset;
+						.author {
+							display: none;
+						}
+						.item {
+							justify-content: center;
+							span:nth-child(2),
+							span:nth-child(3) {
+								display: none;
+							}
+						}
+					}
+				}
+				&-created {
+					display: none;
+				}
+				&::after {
+					display: none;
+				}
+			}
+			&__friends {
+				grid-template-columns: repeat(1, 1fr);
+			}
+			&__article {
+				font-size: 14px;
+				&-player {
+					height: 220px;
+				}
+				pre[class*='language-'] {
+					font-size: 13px;
+				}
+			}
+		}
+		.joe_comment {
+			position: relative;
+			&__title {
+				font-size: 20px;
+				text-align: left;
+			}
+			&__respond-type {
+				position: absolute;
+				top: 15px;
+				right: 15px;
+			}
+			&__respond-form {
+				.head {
+					display: block;
+					border-bottom: none;
+					.list {
+						border-bottom: 1px solid var(--classB);
+						&:nth-child(2) {
+							&::before,
+							&::after {
+								display: none;
+							}
+						}
+					}
+				}
+				.body .text{
+					height: 140px;
+				}
+			}
+			.comment-list__item-contain .term .avatar {
+				width: 34px;
+				height: 34px;
+				margin-right: 10px;
+			}
+			.comment-list__item-contain .term .content .user .agent {
+				display: none;
+			}
+			.comment-list__item-children {
+				padding-left: 0;
+			}
+			.comment-list__item .joe_comment__respond {
+				margin-left: 0;
+				&-type {
+					position: static;
+				}
+			}
 		}
 	}
 }
@@ -357,4 +484,58 @@ html .noaside {
 			grid-template-rows: 130px;
 		}
 	}
+	@media (max-width: 768px) {
+		.joe_wallpaper {
+			&__list {
+				grid-template-columns: repeat(2, 1fr);
+			}
+		}
+		.joe_detail {
+			&__friends {
+				grid-template-columns: repeat(1, 1fr);
+			}
+		}
+		.joe_video {
+			&__list-item {
+				grid-template-columns: repeat(3, 1fr);
+				.item .thumb {
+					height: 140px;
+				}
+			}
+			&__source-list {
+				grid-template-columns: repeat(3, 1fr);
+			}
+		}
+		.joe_index {
+			&__banner {
+				&-recommend {
+					gap: 10px;
+					.item {
+						height: 100px;
+					}
+				}
+			}
+			&__ad {
+				&-link {
+					.image {
+						height: 120px;
+					}
+				}
+			}
+		}
+		.joe_list {
+			&__item {
+				&.single {
+					.thumbnail {
+						height: 150px;
+					}
+				}
+				&.multiple {
+					.thumbnail {
+						grid-template-rows: 70px;
+					}
+				}
+			}
+		}
+	}
 }

assets/js/joe.global.js

@@ -357,13 +357,13 @@ document.addEventListener('DOMContentLoaded', () => {
 			if ($('.joe_header__slideout').hasClass('active')) {
 				$('body').css('overflow', '')
 				$('.joe_mask').removeClass('active')
-				$('.joe_header__above-slide').removeClass("active")
+				$('.joe_header__above-slide').removeClass('active')
-				$('.joe_header__slideout').removeClass("active")
+				$('.joe_header__slideout').removeClass('active')
 			} else {
 				$('body').css('overflow', 'hidden')
 				$('.joe_mask').addClass('active')
-				$('.joe_header__above-slide').addClass("active")
+				$('.joe_header__above-slide').addClass('active')
-				$('.joe_header__slideout').addClass("active")
+				$('.joe_header__slideout').addClass('active')
 			}
 		})
 	}
@@ -397,4 +397,17 @@ document.addEventListener('DOMContentLoaded', () => {
 			$('.joe_header__above-slide').removeClass('active')
 		})
 	}
+
+	/* 移动端侧边栏 */
+	{
+		$('.joe_header__slideout-menu .panel').on('click', function () {
+			const panelBox = $(this).parent().parent()
+			console.log(panelBox);
+			/* 清除全部内容 */
+			panelBox.find('.panel').not($(this)).removeClass('in')
+			panelBox.find('.panel-body').not($(this).siblings('.panel-body')).stop().hide('fast')
+			/* 激活当前的内容 */
+			$(this).toggleClass('in').siblings('.panel-body').stop().toggle('fast')
+		})
+	}
 })

assets/js/joe.index.js

@@ -36,8 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         </a>
                         <div class="information">
                             <a href="${_.permalink}" class="title" title="${_.title}">
-                                <span class="badge" style="display: ${_.type === 'sticky' ? 'block' : 'none'}">置顶</span>
+                                <span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
-                                <h6>${_.title}</h6>
                             </a>
                             <a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
                             <div class="meta">
@@ -63,8 +62,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         <div class="line"></div>
                         <div class="information">
                             <a href="${_.permalink}" class="title" title="${_.title}">
-                                <span class="badge" style="display: ${_.type === 'sticky' ? 'block' : 'none'}">置顶</span>
+                                <span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
-                                <h6>${_.title}</h6>
                             </a>
                             <div class="meta">
                                 <ul class="items">
@@ -100,8 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         <div class="line"></div>
                         <div class="information">
                             <a href="${_.permalink}" class="title" title="${_.title}">
-                                <span class="badge" style="display: ${_.type === 'sticky' ? 'block' : 'none'}">置顶</span>
+                                <span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
-                                <h6>${_.title}</h6>
                             </a>
                             <a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
                         </div>
@@ -136,8 +133,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         <div class="line"></div>
                         <div class="information">
                             <a href="${_.permalink}" class="title" title="${_.title}">
-                                <span class="badge" style="display: ${_.type === 'sticky' ? 'block' : 'none'}">置顶</span>
+                                <span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
-                                <h6>${_.title}</h6>
                             </a>
                             <a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
                             <div class="meta">

functions.php

@@ -564,6 +564,17 @@ function themeConfig($form)
     $JWallpaper_Background_WAP->setAttribute('class', 'joe_content joe_image');
     $form->addInput($JWallpaper_Background_WAP);
 
+    $JAside_Wap_Image = new Typecho_Widget_Helper_Form_Element_Textarea(
+        'JAside_Wap_Image',
+        NULL,
+        "https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/wap_aside_image.jpg",
+        '移动端侧边栏背景',
+        '介绍：用于修改移动端侧边栏背景图片 <br/>
+         格式：图片地址 或 Base64地址'
+    );
+    $JAside_Wap_Image->setAttribute('class', 'joe_content joe_image');
+    $form->addInput($JAside_Wap_Image);
+
     $JIndex_Carousel = new Typecho_Widget_Helper_Form_Element_Textarea(
         'JIndex_Carousel',
         NULL,

index.php

@@ -127,9 +127,9 @@
                     <div class="joe_index__title">
                         <ul class="joe_index__title-title">
                             <li class="item" data-type="created">最新文章</li>
+                            <li class="item" data-type="views">热门文章</li>
                             <li class="item" data-type="commentsNum">评论最多</li>
                             <li class="item" data-type="agree">点赞最多</li>
-                            <li class="item" data-type="views">浏览最多</li>
                             <li class="line"></li>
                         </ul>
                         <?php

public/header.php

@@ -163,23 +163,23 @@
     <div class="joe_header__below">
         <div class="joe_container">
             <nav class="joe_header__below-class">
-                <?php $this->widget('Widget_Metas_Category_List')->to($item); ?>
+                <?php $this->widget('Widget_Metas_Category_List')->to($category); ?>
-                <?php while ($item->next()) : ?>
+                <?php while ($category->next()) : ?>
-                    <?php if ($item->levels === 0) : ?>
+                    <?php if ($category->levels === 0) : ?>
-                        <?php $children = $item->getAllChildren($item->mid); ?>
+                        <?php $children = $category->getAllChildren($category->mid); ?>
                         <?php if (empty($children)) : ?>
-                            <a class="item <?php echo $this->is('category', $item->slug) ? 'active' : '' ?>" href="<?php $item->permalink(); ?>" title="<?php $item->name(); ?>"><?php $item->name(); ?></a>
+                            <a class="item <?php echo $this->is('category', $category->slug) ? 'active' : '' ?>" href="<?php $category->permalink(); ?>" title="<?php $category->name(); ?>"><?php $category->name(); ?></a>
                         <?php else : ?>
                             <div class="joe_dropdown" trigger="hover">
                                 <div class="joe_dropdown__link">
-                                    <a class="item <?php echo $this->is('category', $item->slug) ? 'active' : '' ?>" href="<?php $item->permalink(); ?>" title="<?php $item->name(); ?>"><?php $item->name(); ?></a>
+                                    <a class="item <?php echo $this->is('category', $category->slug) ? 'active' : '' ?>" href="<?php $category->permalink(); ?>" title="<?php $category->name(); ?>"><?php $category->name(); ?></a>
                                     <svg class="joe_dropdown__link-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="13" height="13">
                                         <path d="M561.873 725.165c-11.262 11.262-26.545 21.72-41.025 18.502-14.479 2.413-28.154-8.849-39.415-18.502L133.129 375.252c-17.697-17.696-17.697-46.655 0-64.352s46.655-17.696 64.351 0l324.173 333.021 324.977-333.02c17.696-17.697 46.655-17.697 64.351 0s17.697 46.655 0 64.351L561.873 725.165z" p-id="3535" fill="var(--minor)"></path>
                                     </svg>
                                 </div>
                                 <nav class="joe_dropdown__menu">
                                     <?php foreach ($children as $mid) : ?>
-                                        <?php $child = $item->getCategory($mid); ?>
+                                        <?php $child = $category->getCategory($mid); ?>
                                         <a class="<?php echo $this->is('category', $child['slug']) ? 'active' : '' ?>" href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?></a>
                                     <?php endforeach; ?>
                                 </nav>
@@ -259,7 +259,93 @@
     </div>
 
     <div class="joe_header__slideout">
-        <img src="" alt="">
+        <img class="joe_header__slideout-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<?php $this->options->JAside_Wap_Image() ?>" onerror="javascript: this.src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';" alt="<?php $this->author->screenName(); ?>" />
+        <div class="joe_header__slideout-author">
+            <img class="avatar lazyload" src="<?php _getAvatarLazyload(); ?>" data-src="<?php _getAvatarByMail($this->author->mail) ?>" onerror="javascript: this.src = '<?php _getAvatarLazyload(); ?>'" alt="<?php $this->author->screenName(); ?>" />
+            <div class="info">
+                <a class="link" href="<?php $this->options->JAside_Author_Link() ?>" target="_blank" rel="noopener noreferrer nofollow"><?php $this->author->screenName(); ?></a>
+                <p class="motto"><?php _getAsideAuthorMotto() ?></p>
+            </div>
+        </div>
+        <ul class="joe_header__slideout-menu panel-box">
+            <li>
+                <a class="link" href="<?php $this->options->siteUrl(); ?>" title="首页">
+                    <span>首页</span>
+                </a>
+            </li>
+            <!-- 栏目 -->
+            <li>
+                <a class="link panel" href="#" rel="nofollow">
+                    <span>栏目</span>
+                    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="13" height="13">
+                        <path d="M624.86499999 512.247l-292.15499999-292.159c-12.28-12.27-12.28-32.186 0-44.457 12.27-12.28 32.186-12.28 44.457 0l314.388 314.388c12.28 12.27 12.28 32.186 0 44.457l-314.388 314.387c-6.136 6.14-14.183 9.211-22.228 9.211s-16.092-3.071-22.228-9.211c-12.28-12.27-12.28-32.186 0-44.457l292.155-292.16z" p-id="1742"></path>
+                    </svg>
+                </a>
+                <ul class="slides panel-body panel-box">
+                    <?php while ($category->next()) : ?>
+                        <?php if ($category->levels === 0) : ?>
+                            <?php $children = $category->getAllChildren($category->mid); ?>
+                            <?php if (empty($children)) : ?>
+                                <li>
+                                    <a class="link" href="<?php $category->permalink(); ?>" title="<?php $category->name(); ?>"><?php $category->name(); ?></a>
+                                </li>
+                            <?php else : ?>
+                                <li>
+                                    <div class="link panel">
+                                        <a href="<?php $category->permalink(); ?>" title="<?php $category->name(); ?>"><?php $category->name(); ?></a>
+                                        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="13" height="13">
+                                            <path d="M624.86499999 512.247l-292.15499999-292.159c-12.28-12.27-12.28-32.186 0-44.457 12.27-12.28 32.186-12.28 44.457 0l314.388 314.388c12.28 12.27 12.28 32.186 0 44.457l-314.388 314.387c-6.136 6.14-14.183 9.211-22.228 9.211s-16.092-3.071-22.228-9.211c-12.28-12.27-12.28-32.186 0-44.457l292.155-292.16z" p-id="1742"></path>
+                                        </svg>
+                                    </div>
+                                    <ul class="slides panel-body">
+                                        <?php foreach ($children as $mid) : ?>
+                                            <?php $child = $category->getCategory($mid); ?>
+                                            <li>
+                                                <a class="link" href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?></a>
+                                            </li>
+                                        <?php endforeach; ?>
+                                    </ul>
+                                </li>
+                            <?php endif; ?>
+                        <?php endif; ?>
+                    <?php endwhile; ?>
+                </ul>
+            </li>
+            <!-- 页面 -->
+            <li>
+                <a class="link panel" href="#" rel="nofollow">
+                    <span>页面</span>
+                    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="13" height="13">
+                        <path d="M624.86499999 512.247l-292.15499999-292.159c-12.28-12.27-12.28-32.186 0-44.457 12.27-12.28 32.186-12.28 44.457 0l314.388 314.388c12.28 12.27 12.28 32.186 0 44.457l-314.388 314.387c-6.136 6.14-14.183 9.211-22.228 9.211s-16.092-3.071-22.228-9.211c-12.28-12.27-12.28-32.186 0-44.457l292.155-292.16z" p-id="1742"></path>
+                    </svg>
+                </a>
+                <ul class="slides panel-body">
+                    <?php foreach ($pages->stack as $item) : ?>
+                        <li>
+                            <a class="link" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?></a>
+                        </li>
+                    <?php endforeach; ?>
+                </ul>
+            </li>
+            <!-- 推荐 -->
+            <?php if (sizeof($custom) > 0) : ?>
+                <li>
+                    <a class="link panel" href="#" rel="nofollow">
+                        <span>推荐</span>
+                        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="13" height="13">
+                            <path d="M624.86499999 512.247l-292.15499999-292.159c-12.28-12.27-12.28-32.186 0-44.457 12.27-12.28 32.186-12.28 44.457 0l314.388 314.388c12.28 12.27 12.28 32.186 0 44.457l-314.388 314.387c-6.136 6.14-14.183 9.211-22.228 9.211s-16.092-3.071-22.228-9.211c-12.28-12.27-12.28-32.186 0-44.457l292.155-292.16z" p-id="1742"></path>
+                        </svg>
+                    </a>
+                    <ul class="slides panel-body">
+                        <?php foreach ($custom as $item) : ?>
+                            <li>
+                                <a class="link" href="<?php echo $item['url'] ?>" target="_blank" rel="noopener noreferrer nofollow"><?php echo $item['title'] ?></a>
+                            </li>
+                        <?php endforeach; ?>
+                    </ul>
+                </li>
+            <?php endif; ?>
+        </ul>
     </div>
 </header>