更新
This commit is contained in:
parent
f81e6bbca4
commit
1e35537f64
File diff suppressed because one or more lines are too long
@ -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
BIN
assets/img/snow.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 135 KiB |
@ -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());
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
|
@ -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());
|
||||||
} ?>
|
} ?>
|
@ -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
9
public/aside.php
Normal 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; ?>
|
@ -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>
|
@ -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>
|
Loading…
Reference in New Issue
Block a user