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>
<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">

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

File diff suppressed because one or more lines are too long

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

@ -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 {
display: flex;
align-items: center;
.information {
.title {
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;
}
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);
vertical-align: 2px;
}
}
}
.information .abstract {
.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;
left: 50%;
transform: translate(-50%);
bottom: 10px;
left: 10px;
li {
width: 20px;
height: 20px;

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

File diff suppressed because one or more lines are too long

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

@ -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 {
margin-right: 15px;
&-title {
.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 {
.information {
height: 130px;
}
}
&.multiple {
.thumbnail {
grid-template-rows: 80px;
gap: 10px;
.meta {
.last {
display: none !important;
}
}
&.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;
bottom: 15px;
left: 0;
right: 0;
.items {
width: 100%;
li {
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;
}
}
}
}
}
}

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

@ -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__slideout').removeClass("active")
$('.joe_header__above-slide').removeClass('active')
$('.joe_header__slideout').removeClass('active')
} else {
$('body').css('overflow', 'hidden')
$('.joe_mask').addClass('active')
$('.joe_header__above-slide').addClass("active")
$('.joe_header__slideout').addClass("active")
$('.joe_header__above-slide').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')
})
}
})

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

@ -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>
<h6>${_.title}</h6>
<span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
</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>
<h6>${_.title}</h6>
<span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
</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>
<h6>${_.title}</h6>
<span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
</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>
<h6>${_.title}</h6>
<span class="badge" style="display: ${_.type === 'sticky' ? 'inline-block' : 'none'}">置顶</span>${_.title}
</a>
<a class="abstract" href="${_.permalink}" title="文章摘要">${_.abstract}</a>
<div class="meta">

11
functions.php
View File

@ -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,

2
index.php
View File

@ -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

102
public/header.php
View File

@ -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 while ($item->next()) : ?>
<?php if ($item->levels === 0) : ?>
<?php $children = $item->getAllChildren($item->mid); ?>
<?php $this->widget('Widget_Metas_Category_List')->to($category); ?>
<?php while ($category->next()) : ?>
<?php if ($category->levels === 0) : ?>
<?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>