caojiezi2003/Jony
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
haoouba 2021-02-13 15:12:18 +08:00
parent 0ff08cbbc0
commit 2d1ecf1e0c
10 changed files with 527 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
archive.php
View File

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

2
assets/css/joe.global.css
View File

File diff suppressed because one or more lines are too long

181
assets/css/joe.global.scss
View File

@ -469,19 +469,108 @@
} }
&__slideout { &__slideout {
position: fixed; position: fixed;
top: 0; top: 55px;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 70%; width: 80%;
z-index: 990; z-index: 990;
background: var(--background); background: var(--classD);
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
visibility: hidden; visibility: hidden;
transition: transform 0.35s, visibility 0.35s; transition: transform 0.35s, visibility 0.35s;
overflow-y: auto;
padding: 135px 15px 15px;
&::-webkit-scrollbar {
display: none;
}
&.active { &.active {
visibility: visible; visibility: visible;
transform: translate3d(0, 0, 0); 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,48 +1049,50 @@
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
.information .title { .information {
display: flex; .title {
align-items: center; margin-bottom: 10px;
margin-bottom: 10px; display: -webkit-box;
.badge { -webkit-line-clamp: 2;
height: 20px; /*! autoprefixer: off */
line-height: 20px; -webkit-box-orient: vertical;
background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%); /* autoprefixer: on */
color: #fff;
font-size: 12px;
margin-right: 5px;
border-radius: 2px;
padding: 0 8px;
white-space: nowrap;
}
h6 {
color: var(--main);
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-all;
color: var(--main);
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
transition: color 0.35s; transition: color 0.35s;
font-weight: normal;
&:hover { &:hover {
color: var(--theme); color: var(--theme);
} }
.badge {
height: 20px;
line-height: 20px;
background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
color: #fff;
font-size: 12px;
margin-right: 5px;
border-radius: 2px;
padding: 0 8px;
white-space: nowrap;
vertical-align: 2px;
}
}
.abstract {
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
color: var(--minor);
word-break: break-all;
line-height: 22px;
opacity: 0.85;
} }
}
.information .abstract {
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
color: var(--minor);
word-break: break-all;
line-height: 22px;
font-size: 13px;
opacity: 0.85;
} }
.line { .line {
position: absolute; position: absolute;
@ -1027,7 +1118,7 @@
li { li {
&::after { &::after {
content: '/'; content: '/';
color: #e1e1e1; color: var(--seat);
padding: 0 5px; padding: 0 5px;
} }
&:last-child::after { &:last-child::after {
@ -1550,10 +1641,18 @@
} }
pre[class*='language-'] { pre[class*='language-'] {
position: relative; position: relative;
padding: 30px 15px 12px;
margin: 0 0 15px; margin: 0 0 15px;
padding: 30px 0 0;
border-radius: var(--radius-inner); border-radius: var(--radius-inner);
font-size: 14px; 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 { &::after {
content: ''; content: '';
position: absolute; position: absolute;
@ -1562,6 +1661,7 @@
width: 100%; width: 100%;
height: 30px; height: 30px;
background: #2d2d2d; background: #2d2d2d;
border-radius: var(--radius-inner) var(--radius-inner) 0 0;
} }
&::before { &::before {
content: ''; content: '';
@ -2298,9 +2398,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: absolute; position: absolute;
top: 10px; bottom: 10px;
left: 50%; left: 10px;
transform: translate(-50%);
li { li {
width: 20px; width: 20px;
height: 20px; height: 20px;

2
assets/css/joe.responsive.css
View File

File diff suppressed because one or more lines are too long

327
assets/css/joe.responsive.scss
View File

@ -141,79 +141,122 @@ html {
height: 180px; height: 180px;
} }
} }
.joe_index__banner-recommend { .joe_index {
gap: 10px; &__banner {
.item { &-recommend {
height: 100px; 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 { &__hot {
.information { &-list {
height: 130px; overflow-x: auto;
} grid-template-columns: repeat(4, 200px);
} &::-webkit-scrollbar {
&.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; display: none;
} }
} }
}
&__ad {
&-link {
.image {
height: 120px;
}
}
}
&__title {
&-notice {
display: none;
}
&-title {
.item {
display: none;
&:nth-child(1),
&:nth-child(2) {
display: block;
}
}
}
}
}
.joe_list {
&__item {
.information { .information {
.title {
font-size: 16px;
}
.abstract {
display: none;
}
}
.meta {
.last {
display: none !important;
}
}
&.single {
.thumbnail {
height: 150px;
margin-bottom: 0;
time {
display: none;
}
}
}
&.default {
.information {
.title {
font-size: 15px;
}
}
.thumbnail {
width: 120px;
min-width: 120px;
height: 80px;
min-height: 80px;
margin-right: 10px;
time {
display: none;
}
}
.title { .title {
margin-bottom: 0; margin-bottom: 0;
} }
.abstract {
margin-top: auto;
}
.meta { .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; justify-content: center;
} }
} }
.joe_detail {
&__friends {
grid-template-columns: repeat(1, 1fr);
}
&__article {
font-size: 14px;
&-player {
height: 230px;
}
}
}
.joe_video { .joe_video {
&__list-item { &__list-item {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@ -261,6 +293,101 @@ html {
&__list-item .thumb { &__list-item .thumb {
height: 100px; 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; 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;
}
}
}
}
}
} }

21
assets/js/joe.global.js
View File

@ -357,13 +357,13 @@ document.addEventListener('DOMContentLoaded', () => {
if ($('.joe_header__slideout').hasClass('active')) { if ($('.joe_header__slideout').hasClass('active')) {
$('body').css('overflow', '') $('body').css('overflow', '')
$('.joe_mask').removeClass('active') $('.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 { } else {
$('body').css('overflow', 'hidden') $('body').css('overflow', 'hidden')
$('.joe_mask').addClass('active') $('.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__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')
})
}
}) })

12
assets/js/joe.index.js
View File

@ -36,8 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
</a> </a>
<div class="information"> <div class="information">
<a href="${_.permalink}" class="title" title="${_.title}"> <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>
<a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a> <a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
<div class="meta"> <div class="meta">
@ -63,8 +62,7 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="line"></div> <div class="line"></div>
<div class="information"> <div class="information">
<a href="${_.permalink}" class="title" title="${_.title}"> <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>
<div class="meta"> <div class="meta">
<ul class="items"> <ul class="items">
@ -100,8 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="line"></div> <div class="line"></div>
<div class="information"> <div class="information">
<a href="${_.permalink}" class="title" title="${_.title}"> <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>
<a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a> <a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
</div> </div>
@ -136,8 +133,7 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="line"></div> <div class="line"></div>
<div class="information"> <div class="information">
<a href="${_.permalink}" class="title" title="${_.title}"> <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>
<a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a> <a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
<div class="meta"> <div class="meta">

11
functions.php
View File

@ -564,6 +564,17 @@ function themeConfig($form)
$JWallpaper_Background_WAP->setAttribute('class', 'joe_content joe_image'); $JWallpaper_Background_WAP->setAttribute('class', 'joe_content joe_image');
$form->addInput($JWallpaper_Background_WAP); $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 = new Typecho_Widget_Helper_Form_Element_Textarea(
'JIndex_Carousel', 'JIndex_Carousel',
NULL, NULL,

2
index.php
View File

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

102
public/header.php
View File

@ -163,23 +163,23 @@
<div class="joe_header__below"> <div class="joe_header__below">
<div class="joe_container"> <div class="joe_container">
<nav class="joe_header__below-class"> <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)) : ?> <?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 : ?> <?php else : ?>
<div class="joe_dropdown" trigger="hover"> <div class="joe_dropdown" trigger="hover">
<div class="joe_dropdown__link"> <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"> <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> <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> </svg>
</div> </div>
<nav class="joe_dropdown__menu"> <nav class="joe_dropdown__menu">
<?php foreach ($children as $mid) : ?> <?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> <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; ?> <?php endforeach; ?>
</nav> </nav>
@ -259,7 +259,93 @@
</div> </div>
<div class="joe_header__slideout"> <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> </div>
</header> </header>