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

更新

Browse Source
This commit is contained in:
杜恒 2021-01-20 12:39:49 +08:00
parent f81e6bbca4
commit 1e35537f64
10 changed files with 298 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@ -1,3 +1,51 @@
.joe_dropdown {
position: relative;
&__link {
display: flex;
align-items: center;
&-icon {
transition: transform 0.35s;
}
}
&__menu {
position: absolute;
left: 50%;
visibility: hidden;
z-index: 999;
border-top: 3px solid var(--theme);
transform-origin: top;
background: var(--background);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
border-radius: 0 0 4px 4px;
padding: 10px 0;
opacity: 0;
transform: translateX(-50%) perspective(600px) rotateX(-45deg);
transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
&::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid var(--theme);
}
}
&.active {
.joe_dropdown__link-icon {
transform: rotate(-180deg);
}
.joe_dropdown__menu {
visibility: visible;
opacity: 1;
transform: translateX(-50%) perspective(600px) rotateX(0);
}
}
}
.joe_header { .joe_header {
position: sticky; position: sticky;
top: 0; top: 0;
@ -40,7 +88,6 @@
margin-right: 15px; margin-right: 15px;
transition: color 0.35s; transition: color 0.35s;
white-space: nowrap; white-space: nowrap;
cursor: pointer;
color: var(--main); color: var(--main);
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
@ -67,6 +114,40 @@
} }
} }
} }
.joe_dropdown {
&__link {
a {
height: 60px;
line-height: 60px;
font-size: 15px;
padding-left: 8px;
padding-right: 3px;
transition: color 0.35s;
white-space: nowrap;
color: var(--main);
}
}
&__menu {
width: 110px;
text-align: center;
a {
display: block;
line-height: 34px;
height: 34px;
transition: color 0.35s, background 0.35s;
color: var(--minor);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 15px;
&:hover,
&.active {
color: var(--theme);
background: var(--classD);
}
}
}
}
} }
&-search { &-search {
position: relative; position: relative;
@ -114,4 +195,94 @@
} }
} }
} }
&__below {
border-top: 1px solid var(--classC);
height: 45px;
&-class {
display: flex;
.item {
margin-right: 15px;
color: var(--minor);
height: 45px;
line-height: 45px;
transition: color 0.35s;
white-space: nowrap;
&:hover,
&.active {
color: var(--theme);
}
}
.joe_dropdown {
margin-right: 15px;
&__link {
.item {
margin-right: 3px;
}
}
&__menu {
width: 110px;
text-align: center;
a {
display: block;
height: 34px;
line-height: 34px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--minor);
transition: color 0.35s, background 0.35s;
&:hover,
&.active {
color: var(--theme);
background: var(--classD);
}
}
}
}
}
}
}
.joe_aside {
padding: 15px 0;
margin-left: 15px;
&__item {
position: relative;
width: 250px;
margin-bottom: 15px;
border-radius: 8px;
box-shadow: var(--box-shadow);
overflow: hidden;
&:last-child {
position: sticky;
margin-bottom: 0;
}
&.author {
background: var(--background);
padding: 45px 15px 15px;
&::before {
content: '';
position: absolute;
top: 90px;
left: 0;
width: 100%;
height: 30px;
z-index: 2;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
}
&::after {
display: none;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 273px;
background: url('https://cdn.jsdelivr.net/npm/typecho_joe_theme@4.3.5/assets/img/snow.gif') no-repeat;
background-size: cover;
z-index: 3;
pointer-events: none;
}
}
}
} }

BIN
assets/img/snow.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

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

@ -1 +1,31 @@
document.addEventListener('DOMContentLoaded', function () {}); window.Joe = function () {
/* Dropdown */
{
$('.joe_dropdown').each(function (index, item) {
const menu = $(this).find('.joe_dropdown__menu');
/* 弹出方式 */
const trigger = $(item).attr('trigger') || 'click';
/* 弹出高度 */
const placement = $(item).attr('placement') || $(this).height() || 0;
/* 设置弹出高度 */
menu.css('top', placement);
/* 如果是hover，则绑定hover事件 */
if (trigger === 'hover') {
$(this).hover(
() => $(this).addClass('active'),
() => $(this).removeClass('active')
);
} else {
/* 否则绑定点击事件 */
$(this).on('click', function (e) {
$(this).toggleClass('active');
$(document).one('click', () => $(this).removeClass('active'));
e.stopPropagation();
});
menu.on('click', e => e.stopPropagation());
}
});
}
};
document.addEventListener('DOMContentLoaded', () => Joe());

16
core/core.php
View File

@ -4,3 +4,19 @@ function _getVersion()
{ {
return "1.0.0"; return "1.0.0";
}; };
function themeFields($layout)
{
$aside = new Typecho_Widget_Helper_Form_Element_Radio(
'aside',
array(
'on' => '开启',
'off' => '关闭'
),
'on',
'是否开启当前页面的侧边栏',
'介绍：用于单独设置当前页侧边栏的开启状态 <br />
注意：只有在外观设置侧边栏开启状态下生效'
);
$layout->addItem($aside);
}

13
functions.php
View File

@ -74,4 +74,17 @@ function themeConfig($form)
); );
$JNavMaxNum->setAttribute('class', 'joe_content joe_global'); $JNavMaxNum->setAttribute('class', 'joe_content joe_global');
$form->addInput($JNavMaxNum->multiMode()); $form->addInput($JNavMaxNum->multiMode());
$JAside = new Typecho_Widget_Helper_Form_Element_Checkbox(
'JAside',
array(
'author' => '作者栏',
),
null,
'选择首页需要显示的侧边栏栏目（非必选）',
'介绍：用于控制首页侧边栏的栏目显示规则 <br>
注意：如果全部未选，则表示不开启侧边栏'
);
$JAside->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JAside->multiMode());
} ?> } ?>

7
index.php
View File

@ -19,7 +19,12 @@
<body> <body>
<div id="Joe"> <div id="Joe">
<?php $this->need('public/header.php'); ?> <?php $this->need('public/header.php'); ?>
<div class="joe_container">
<div class="joe_main">
1
</div>
<?php $this->need('public/aside.php'); ?>
</div>
<?php $this->need('public/footer.php'); ?> <?php $this->need('public/footer.php'); ?>
</div> </div>
</body> </body>

9
public/aside.php Normal file
View File

@ -0,0 +1,9 @@
<?php if ($this->options->JAside && $this->fields->aside !== "off") : ?>
<aside class="joe_aside">
<?php if (in_array('author', $this->options->JAside)) : ?>
<section class="joe_aside__item author">
<img class="wallpaper" />
</section>
<?php endif; ?>
</aside>
<?php endif; ?>

58
public/header.php
View File

@ -1,24 +1,32 @@
<header class="joe_header"> <header class="joe_header">
<!-- Header Above -->
<div class="joe_header__above"> <div class="joe_header__above">
<div class="joe_container"> <div class="joe_container">
<a class="joe_header__above-logo" href="<?php $this->options->siteUrl(); ?>"> <a title="<?php $this->options->title(); ?>" class="joe_header__above-logo" href="<?php $this->options->siteUrl(); ?>">
<img src="<?php $this->options->JLogo() ?>" alt="<?php $this->options->title(); ?>" /> <img src="<?php $this->options->JLogo() ?>" alt="<?php $this->options->title(); ?>" />
</a> </a>
<nav class="joe_header__above-nav"> <nav class="joe_header__above-nav">
<a class="item <?php echo $this->is('index') ? 'active' : '' ?>" href="<?php $this->options->siteUrl(); ?>">首页</a> <a class="item <?php echo $this->is('index') ? 'active' : '' ?>" href="<?php $this->options->siteUrl(); ?>" title="首页">首页</a>
<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?> <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
<?php if (count($pages->stack) <= $this->options->JNavMaxNum) : ?> <?php if (count($pages->stack) <= $this->options->JNavMaxNum) : ?>
<?php foreach ($pages->stack as $item) : ?> <?php foreach ($pages->stack as $item) : ?>
<a class="item" href="">首页</a> <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?></a>
<?php endforeach; ?> <?php endforeach; ?>
<?php else : ?> <?php else : ?>
<?php foreach (array_slice($pages->stack, $this->options->JNavMaxNum) as $item) : ?> <?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) as $item) : ?>
<a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>"><?php echo $item['title'] ?></a> <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?></a>
<?php endforeach; ?> <?php endforeach; ?>
<div class="joe_dropdown"> <div class="joe_dropdown" trigger="click" placement="60px">
<div class="joe_dropdown__link">
<a href="javascript: void(0)" rel="nofollow">更多</a>
<svg class="joe_dropdown__link-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<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(--main)"></path>
</svg>
</div>
<nav class="joe_dropdown__menu">
<?php foreach (array_slice($pages->stack, $this->options->JNavMaxNum) as $item) : ?>
<a class="<?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?></a>
<?php endforeach; ?>
</nav>
</div> </div>
<?php endif; ?> <?php endif; ?>
</nav> </nav>
@ -29,6 +37,34 @@
</form> </form>
</div> </div>
</div> </div>
<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 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>
<?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>
<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); ?>
<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>
</div>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
</nav>
</div>
</div>
</header> </header>

3
public/include.php
View File

@ -6,6 +6,9 @@
<link rel="shortcut icon" href="<?php $this->options->JFavicon() ?>" /> <link rel="shortcut icon" href="<?php $this->options->JFavicon() ?>" />
<?php $this->header(); ?> <?php $this->header(); ?>
<title><?php $this->options->title(); ?></title> <title><?php $this->options->title(); ?></title>
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.normalize.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'); ?>">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.global.js'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.global.js'); ?>"></script>