diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css index dc79b39..b089b28 100644 --- a/assets/css/joe.global.css +++ b/assets/css/joe.global.css @@ -1 +1 @@ -.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;cursor:pointer;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(../img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)} +.joe_dropdown{position:relative}.joe_dropdown__link{display:flex;align-items:center}.joe_dropdown__link-icon{transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu{position:absolute;left:50%;visibility:hidden;z-index:999;border-top:3px solid var(--theme);-webkit-transform-origin:top;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;-webkit-transform:translateX(-50%) perspective(600px) rotateX(-45deg);transform:translateX(-50%) perspective(600px) rotateX(-45deg);transition:opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu::before{content:'';position:absolute;top:-10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--theme)}.joe_dropdown.active .joe_dropdown__link-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.joe_dropdown.active .joe_dropdown__menu{visibility:visible;opacity:1;-webkit-transform:translateX(-50%) perspective(600px) rotateX(0);transform:translateX(-50%) perspective(600px) rotateX(0)}.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-nav .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)}.joe_header__above-nav .joe_dropdown__menu{width:110px;text-align:center}.joe_header__above-nav .joe_dropdown__menu 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}.joe_header__above-nav .joe_dropdown__menu a:hover,.joe_header__above-nav .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(../img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)}.joe_header__below{border-top:1px solid var(--classC);height:45px}.joe_header__below-class{display:flex}.joe_header__below-class .item{margin-right:15px;color:var(--minor);height:45px;line-height:45px;transition:color 0.35s;white-space:nowrap}.joe_header__below-class .item:hover,.joe_header__below-class .item.active{color:var(--theme)}.joe_header__below-class .joe_dropdown{margin-right:15px}.joe_header__below-class .joe_dropdown__link .item{margin-right:3px}.joe_header__below-class .joe_dropdown__menu{width:110px;text-align:center}.joe_header__below-class .joe_dropdown__menu 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}.joe_header__below-class .joe_dropdown__menu a:hover,.joe_header__below-class .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_aside{padding:15px 0;margin-left:15px}.joe_aside__item{position:relative;width:250px;margin-bottom:15px;border-radius:8px;box-shadow:var(--box-shadow);overflow:hidden}.joe_aside__item:last-child{position:-webkit-sticky;position:sticky;margin-bottom:0}.joe_aside__item.author{background:var(--background);padding:45px 15px 15px}.joe_aside__item.author::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))}.joe_aside__item.author::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} diff --git a/assets/css/joe.global.scss b/assets/css/joe.global.scss index 58ea7d4..918a075 100644 --- a/assets/css/joe.global.scss +++ b/assets/css/joe.global.scss @@ -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 { position: sticky; top: 0; @@ -40,7 +88,6 @@ margin-right: 15px; transition: color 0.35s; white-space: nowrap; - cursor: pointer; color: var(--main); &:last-child { 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 { 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; + } + } + } } diff --git a/assets/img/snow.gif b/assets/img/snow.gif new file mode 100644 index 0000000..d3284d5 Binary files /dev/null and b/assets/img/snow.gif differ diff --git a/assets/js/joe.global.js b/assets/js/joe.global.js index 7e7d7c8..28cc654 100644 --- a/assets/js/joe.global.js +++ b/assets/js/joe.global.js @@ -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()); diff --git a/core/core.php b/core/core.php index 2b4d291..55b4c24 100644 --- a/core/core.php +++ b/core/core.php @@ -4,3 +4,19 @@ function _getVersion() { return "1.0.0"; }; + +function themeFields($layout) +{ + $aside = new Typecho_Widget_Helper_Form_Element_Radio( + 'aside', + array( + 'on' => '开启', + 'off' => '关闭' + ), + 'on', + '是否开启当前页面的侧边栏', + '介绍：用于单独设置当前页侧边栏的开启状态
+ 注意：只有在外观设置侧边栏开启状态下生效' + ); + $layout->addItem($aside); +} diff --git a/functions.php b/functions.php index cd1eb60..72395bd 100644 --- a/functions.php +++ b/functions.php @@ -74,4 +74,17 @@ function themeConfig($form) ); $JNavMaxNum->setAttribute('class', 'joe_content joe_global'); $form->addInput($JNavMaxNum->multiMode()); + + $JAside = new Typecho_Widget_Helper_Form_Element_Checkbox( + 'JAside', + array( + 'author' => '作者栏', + ), + null, + '选择首页需要显示的侧边栏栏目（非必选）', + '介绍：用于控制首页侧边栏的栏目显示规则
+ 注意：如果全部未选，则表示不开启侧边栏' + ); + $JAside->setAttribute('class', 'joe_content joe_aside'); + $form->addInput($JAside->multiMode()); } ?> \ No newline at end of file diff --git a/index.php b/index.php index de1b723..da9294b 100644 --- a/index.php +++ b/index.php @@ -19,7 +19,12 @@
need('public/header.php'); ?> - +
+
+ 1 +
+ need('public/aside.php'); ?> +
need('public/footer.php'); ?>
diff --git a/public/aside.php b/public/aside.php new file mode 100644 index 0000000..c7336fd --- /dev/null +++ b/public/aside.php @@ -0,0 +1,9 @@ +options->JAside && $this->fields->aside !== "off") : ?> + + \ No newline at end of file diff --git a/public/header.php b/public/header.php index b3a6a9d..429617f 100644 --- a/public/header.php +++ b/public/header.php @@ -1,24 +1,32 @@
- -
- @@ -29,6 +37,34 @@
- - +
+
+ +
+
\ No newline at end of file diff --git a/public/include.php b/public/include.php index 3e5b8c1..4efe1a4 100644 --- a/public/include.php +++ b/public/include.php @@ -6,6 +6,9 @@ header(); ?> <?php $this->options->title(); ?> + + + \ No newline at end of file