kudzues/hexo-theme-shoka
1
0
Fork 0
mirror of https://github.com/amehime/hexo-theme-shoka.git synced 2026-04-05 02:16:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
amehime
2020-09-06 22:52:15 +08:00
parent 2278624bdd
commit 2af3c758f5
28 changed files with 572 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
example/_config.shoka.yml
View File

@@ -91,8 +91,8 @@ search:
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
appId:
appKey:
appId: #这里不要忘了改
appKey: #这里不要忘了改
placeholder: ヽ(○´∀`)ﾉ♪ # Comment box placeholder
avatar: mp # Gravatar style
pageSize: 10 # Pagination size

2
layout/_alternate/atom.ejs
View File

@@ -9,7 +9,7 @@
<name><%= config.author %></name>
</author>
<updated><%= moment(lastBuildDate).toISOString() %></updated>
<%_ for (item of (config.keywords.split(',') || [])) { _%>
<%_ for (item of (config.keywords ? config.keywords.split(',') : [])) { _%>
<category term="<%= item %>" />
<%_ } _%>
<%_ for (const post of posts) { _%>

2
layout/_alternate/rss.ejs
View File

@@ -12,7 +12,7 @@
<language><%= config.language %></language>
<pubDate><%= moment(lastBuildDate).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %></pubDate>
<lastBuildDate><%= moment(lastBuildDate).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %></lastBuildDate>
<%_ for (item of (config.keywords.split(',') || [])) { _%>
<%_ for (item of (config.keywords ? config.keywords.split(',') : [])) { _%>
<category term="<%= item %>" />
<%_ } _%>
<%_ for (const post of posts) { _%>

1
layout/_partials/header.njk
View File

@@ -8,6 +8,7 @@
</div>
</div>
<ul class="menu">
<li class="item title"><a href="{{ config.root }}" rel="start">{{ alternate or title }}</a></li>
{{ partial('_partials/sidebar/menu.njk', {}, {cache: true}) }}
</ul>
<ul class="right">

16
layout/_partials/layout.njk
View File

@@ -10,9 +10,19 @@
<div id="loading">
<div class="cat">
<div class="body"></div>
<div class="body"></div>
<div class="tail"></div>
<div class="head"></div>
<div class="head">
<div class="face"></div>
</div>
<div class="foot">
<div class="tummy-end"></div>
<div class="bottom"></div>
<div class="legs left"></div>
<div class="legs right"></div>
</div>
<div class="paw">
<div class="hands left"></div>
<div class="hands right"></div>
</div>
</div>
</div>
<div id="container">

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "hexo-theme-shoka",
"version": "0.1.2",
"version": "0.1.3",
"description": "",
"author": "Ruri Shimotsuki",
"license": "MIT",

26
scripts/helpers/asset.js
View File

@@ -1,6 +1,16 @@
/* global hexo */
'use strict';
const { htmlTag, url_for } = require('hexo-util');
const theme_env = require('../../package.json');
hexo.extend.helper.register('hexo_env', function (type) {
return this.env[type]
})
hexo.extend.helper.register('theme_env', function (type) {
return theme_env[type]
})
hexo.extend.helper.register('_vendor_font', () => {
const config = hexo.theme.config.font;
@@ -25,7 +35,7 @@ hexo.extend.helper.register('_vendor_font', () => {
fontFamilies = fontFamilies.join('|');
// Merge extra parameters to the final processed font string
return fontFamilies ? `<link rel="stylesheet" href="${fontHost}/css?family=${fontFamilies.concat(fontDisplay, fontSubset)}">` : '';
return fontFamilies ? htmlTag('link', { rel: 'stylesheet', href: `${fontHost}/css?family=${fontFamilies.concat(fontDisplay, fontSubset)}` }) : '';
});
@@ -48,6 +58,18 @@ hexo.extend.helper.register('_vendor_js', () => {
let result = vendorJs ? `<script src="//cdn.jsdelivr.net/combine/${vendorJs}"></script>` : '';
return result;
return vendorJs ? htmlTag('script', { src: `//cdn.jsdelivr.net/combine/${vendorJs}` }, '') : '';
});
hexo.extend.helper.register('_css', function(...urls) {
const { statics, css } = hexo.theme.config;
return urls.map(url => htmlTag('link', { rel: 'stylesheet', href: url_for.call(this, `${statics}${css}/${url}?v=${theme_env['version']}`) })).join('');
});
hexo.extend.helper.register('_js', function(...urls) {
const { statics, js } = hexo.theme.config;
return urls.map(url => htmlTag('script', { src: url_for.call(this, `${statics}${js}/${url}?v=${theme_env['version']}`) }, '')).join('');
});

38
scripts/helpers/engine.js
View File

@@ -2,7 +2,7 @@
'use strict';
const { htmlTag } = require('hexo-util');
const { htmlTag, url_for } = require('hexo-util');
const url = require('url');
const crypto = require('crypto');
const fs = require('fs');
@@ -13,7 +13,7 @@ const imageListFile = fs.readFileSync(path.join(__dirname, '../../_images.yml'))
const imageList = yaml.safeLoad(imageListFile);
const randomServer = function() {
return [1,2,3,4][Math.floor(Math.random() * 4)]
return parseInt(Math.random()*4,10)+1
}
const randomBG = function(count = 1) {
@@ -33,31 +33,6 @@ const randomBG = function(count = 1) {
return 'https://tva'+randomServer()+'.sinaimg.cn/mw690/'+imageList[Math.floor(Math.random() * imageList.length)]
}
hexo.extend.helper.register('hexo_env', function (type) {
return this.env[type]
})
hexo.extend.helper.register('theme_env', function (type) {
var env = require('../../package.json')
return env[type]
})
hexo.extend.helper.register('_css', function(...urls) {
const { statics, css } = hexo.theme.config;
return urls.map(url => this.css(`${statics}${css}/${url}`)).join('');
});
hexo.extend.helper.register('_js', function(...urls) {
const { statics, js } = hexo.theme.config;
return urls.map(url => this.js(`${statics}${js}/${url}`)).join('');
});
hexo.extend.helper.register('_url', function(path, text, options = {}) {
const { config } = this;
const data = url.parse(path);
@@ -66,7 +41,7 @@ hexo.extend.helper.register('_url', function(path, text, options = {}) {
const theme = hexo.theme.config;
let exturl = '';
let tag = 'a';
let attrs = { href: this.url_for(path) };
let attrs = { href: url_for.call(this, path) };
// If `exturl` enabled, set spanned links only on external links.
if (theme.exturl && data.protocol && data.hostname !== siteHost) {
@@ -115,14 +90,13 @@ hexo.extend.helper.register('_url', function(path, text, options = {}) {
hexo.extend.helper.register('_cover', function(item, num) {
var that = this
const { statics, js } = hexo.theme.config;
var format = function(img) {
if (img.startsWith('//') || img.startsWith('http')) {
return img
} else {
return that.url_for(statics + img)
return url_for.call(this, statics + img)
}
}
@@ -137,7 +111,7 @@ hexo.extend.helper.register('_cover', function(item, num) {
})
hexo.extend.helper.register('_md5', function(path) {
let str = this.url_for(path);
let str = url_for.call(this, path);
str.replace('index.html', '');
return crypto.createHash('md5').update(str).digest('hex');
});
@@ -159,7 +133,7 @@ hexo.extend.helper.register('canonical', function() {
hexo.extend.helper.register('i18n_path', function(language) {
const { path, lang } = this.page;
const base = path.startsWith(lang) ? path.slice(lang.length + 1) : path;
return this.url_for(`${this.languages.indexOf(language) === 0 ? '' : '/' + language}/${base}`);
return url_for.call(this, `${this.languages.indexOf(language) === 0 ? '' : '/' + language}/${base}`);
});
/**

2
source/css/_colors.styl
View File

@@ -106,7 +106,7 @@
}
}
.container>header .lozad::before {
#imgs::before {
background-color: rgba(0, 0, 0, 0.5);
}

2
source/css/_common/components/highlight/highlight.styl
View File

@@ -113,7 +113,7 @@ code,
@extend .elastic;
.code-container {
height: 100vh;
height: calc(100% - 3rem);
overflow: scroll;
}
}

2
source/css/_common/components/tags/list.styl
View File

@@ -56,7 +56,7 @@
border-radius: 50%;
text-align: center;
font-size: .8em;
line-height: 1.3;
line-height: 1.4;
top: .5rem;
left: -1.6rem;
background: var(--primary-color);

284
source/css/_common/components/third-party/loading.styl vendored
View File

@@ -1,95 +1,219 @@
$cat-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: rotating 2.79s cubic-bezier(.65, .54, .12, .93) infinite;
backface-visibility: hidden;
&::before {
content: '';
position: absolute;
width: 50%;
height: 50%;
background-size: 200%;
background-repeat: no-repeat;
background-image: url("../images/cat.png");
background-color: var(--grey-1);
backface-visibility: hidden;
}
}
#loading {
display: flex;
position: fixed;
width: 100%;
height: 100%;
z-index: $zindex-5;
transform: translateZ(.125rem);
@extend $fix-fullscreen;
background-color: var(--grey-1);
}
.cat {
position: relative;
width: 100%;
max-width: 10rem;
margin: auto;
overflow: hidden;
$bgColor = var(--grey-1)
$bodyColor = rgb(237, 166, 93)
$tailColor = rgb(198, 130, 59)
$tummyColor = rgb(242, 192, 137)
$borderColor = rgb(56, 60, 75)
$innerR = 8.125em
$middleR = 12.8125em
$outterR = 15em
$tummyWidth = 1.5em
$borderWidth = .375em
$polygon-start = polygon(50% 50%, 0% 50%, 0% 100%, 100% 100%, 100% 20%)
$polygon-a = polygon(50% 50%, 30% 120%, 50% 100%, 100% 100%, 100% 20%)
$polygon-b = polygon(50% 50%, 100% 90%, 120% 90%, 100% 100%, 100% 20%)
$polygon-middle = polygon(50% 50%, 100% 45%, 120% 45%, 120% 50%, 100% 20%)
$polygon-c = polygon(50% 50%, 100% 65%, 120% 65%, 120% 50%, 100% 20%)
$polygon-d = polygon(50% 50%, 75% 130%, 120% 65%, 120% 50%, 100% 20%)
$polygon-e = polygon(50% 50%, -20% 110%, 50% 120%, 100% 100%, 100% 20%)
&::before {
content: '';
display: block;
padding-bottom: 100%;
}
center-center()
position: absolute
top: 0
right: 0
bottom: 0
left: 0
margin: auto
tummy-style()
width: $tummyWidth
height: $tummyWidth
position: absolute
border-radius: 50%
background-color: $tummyColor
body-color()
background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 46%, $tummyColor 46%, $tummyColor 60%, $bodyColor 60%, $bodyColor 67%, $borderColor 67%, $borderColor 100%)
head-foot-color()
background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 67%, $borderColor 67%, $borderColor 100%)
&:hover>* {
.cat
position: relative
display: block
width: $outterR
height: 100%
font-size: 10px
margin: auto
*
box-sizing: content-box;
.head, .foot, .body, .paw
center-center()
border-radius: 50%
width: $outterR
height: $outterR
.body
body-color()
.head:before, .foot:before
head-foot-color()
.head
&:before
content: ''
width: 100%
height: 100%
position: absolute
border-radius: 50%
clip-path: polygon(100% 20%, 50% 50%, 70% -10%)
-webkit-clip-path: polygon(100% 20%, 50% 50%, 70% -10%)
&:after
content: ''
width: 4.125em
height: 2.5em
position: absolute
top: 0.8125em
right: 3.9375em
background-image: linear-gradient($bgColor 65%, transparent 65%), radial-gradient($bgColor 51%, $borderColor 55%, $borderColor 68%, transparent 70%)
transform: rotate(-66deg)
.face
width: 5em
height: 3.75em
left: 9.0625em
top: 1.8125em
position: absolute
transform: rotate(-47deg)
background: radial-gradient(circle, $tummyColor 0%, $tummyColor 23%, transparent 23%) -0.1875em 1.0625em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) 0.75em -0.75em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) -0.75em -0.75em no-repeat, radial-gradient($bodyColor 0%, $bodyColor 15%, transparent 15%) 0 -0.6875em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) -0.1875em -0.3125em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) 0.1875em -0.3125em no-repeat, radial-gradient(circle, $bodyColor 45%, transparent 45%) 0 -0.1875em, linear-gradient(transparent 35%, $borderColor 35%, $borderColor 41%, transparent 41%, transparent 44%, $borderColor 44%, $borderColor 50%, transparent 50%, transparent 53%, $borderColor 53%, $borderColor 59%, transparent 59%)
.foot
&:before, &:after
content: ''
width: 100%
height: 100%
position: absolute
&:before
border-radius: 50%
clip-path: polygon(50% 50%, 0% 50%, 0% 25%)
-webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 25%)
.tummy-end
tummy-style()
left: 1.1875em
top: 6.5625em
.bottom
width: 2.1875em
height: 0.9375em
position: absolute
top: 4.875em
left: 0.75em
border: 0.375em solid $borderColor
border-bottom: 0
border-radius: 50%
transform: rotate(21deg)
background: $bodyColor
.hands, .legs, .foot:after
width: 0.625em
height: 1.5625em
position: absolute
border: $borderWidth solid $borderColor
background-color: $bodyColor
.hands
border-top: 0
border-radius: 0 0 0.75em 0.75em
&.left
top: 4.3em
left: 13.1875em
transform: rotate(-20deg)
&.right
top: 5.125em
left: 10.975em
transform: rotate(-25deg)
.legs
border-bottom: 0
border-radius: 0.75em 0.75em 0 0
&.left
top: 4.0625em
left: 3.125em
transform: rotate(25deg)
&.right
top: 3.3125em
left: 0.75em
transform: rotate(22deg)
.foot:after
width: .9em
height: 2.5em
top: 2.625em
left: 2.5em
z-index: -1
transform: rotate(25deg)
background-color: $tailColor
border-bottom: 0
border-radius: 0.75em 0.75em 0 0
animation: 2.74s linear infinite loading-cat
.body
animation: 2.74s linear infinite body
.foot
animation: 2.74s linear infinite foot
&:hover
animation-play-state: paused;
}
.body, .foot
animation-play-state: paused;
&:active>* {
&:active
animation-play-state: running;
.body, .foot
animation-play-state: running;
@keyframes body {
0% {
clip-path: $polygon-start;
}
.head {
@extend $cat-img;
&::before {
top: 0;
right: 0;
background-position: 100% 0%;
transform-origin: 0% 100%;
transform: rotate(90deg);
}
10% {
clip-path: $polygon-a;
}
.tail {
@extend $cat-img;
animation-delay: .2s;
&::before {
left: 0;
bottom: 0;
background-position: 0% 100%;
transform-origin: 100% 0%;
transform: rotate(-30deg);
}
20% {
clip-path: $polygon-b;
}
.body {
@extend $cat-img;
animation-delay: .1s;
&:nth-of-type(2) {
animation-delay: .2s;
}
&::before {
right: 0;
bottom: 0;
background-position: 100% 100%;
transform-origin: 0% 0%;
}
40% {
clip-path: $polygon-middle;
}
50% {
clip-path: $polygon-middle;
}
65% {
clip-path: $polygon-c;
}
80% {
clip-path: $polygon-d;
}
90% {
clip-path: $polygon-e;
}
100% {
clip-path: $polygon-start;
}
}
@keyframes loading-cat {
0% { transform: rotate(0deg); }
10% { transform: rotate(-80deg); }
20% { transform: rotate(-180deg); }
40% { transform: rotate(-245deg); }
50% { transform: rotate(-250deg); }
68% { transform: rotate(-300deg); }
90% { transform: rotate(-560deg); }
100% { transform: rotate(-720deg); }
}
@keyframes foot {
0% { transform: rotate(-10deg); }
10% { transform: rotate(-100deg); }
20% { transform: rotate(-145deg); }
35% { transform: rotate(-190deg); }
50% { transform: rotate(-195deg); }
70% { transform: rotate(-165deg); }
100% { transform: rotate(-10deg); }
}

2
source/css/_common/components/third-party/search.styl vendored
View File

@@ -103,6 +103,8 @@
overflow-y: scroll;
height: calc(100% - 8.125rem);
@extend $mini-scrollbar;
ol {
padding: 0;
}

196
source/css/_common/components/third-party/theme.styl vendored Normal file
View File

@@ -0,0 +1,196 @@
#neko {
@extend $fix-fullscreen;
display: none;
background: linear-gradient(to top, #fddb92 0%, #d1fdff 80%);
.planet {
position: fixed;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
animation: rotate 2s cubic-bezier(.7, 0, 0, 1);
transform-origin: center bottom;
}
&:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
transition: 2s ease all;
}
.sun, .moon {
position: absolute;
border-radius: 100%;
left: 55%;
top: 32%;
}
.sun {
height: 40px;
width: 40px;
background: #ffee94;
box-shadow: 0px 0px 40px #ffee94;
opacity: 1;
}
.moon {
height: 24px;
width: 24px;
background: #eee;
box-shadow: 0px 0px 20px #fff;
opacity: 0;
}
.body {
display: block;
position: absolute;
bottom: -20px;
height: 140px;
width: 135px;
left: 50%;
margin-left: -100px;
background: #777777;
transition: bottom 0.25s ease-in-out;
&:before {
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-bottom: 20px solid #777;
top: -20px;
left: 0;
position: absolute;
content: "";
}
&:after {
width: 0;
height: 0;
border-right: 0px solid transparent;
border-left: 30px solid transparent;
border-bottom: 20px solid #777;
top: -20px;
right: 0;
position: absolute;
content: "";
}
.eyes {
display: block;
position: absolute;
background: #ffee94;
height: 40px;
width: 40px;
border-radius: 100%;
bottom: 80px;
}
.eyes.left {
left: 12px;
}
.eyes.right {
right: 12px;
}
.eyes .pupil {
display: block;
position: relative;
background: #ffb399;
height: 100%;
width: 5px;
border-radius: 100%;
margin: 0 auto;
transition: width 0.5s ease-in-out;
}
.nose {
display: block;
position: relative;
background: #ffb399;
height: 10px;
width: 10px;
border-radius: 100%;
margin: 0 auto;
top: 45px;
}
}
&:hover {
.body {
display: block;
position: absolute;
bottom: -40px;
cursor: pointer;
.eyes {
display: block;
position: absolute;
height: 8px;
width: 40px;
bottom: 100px;
}
}
}
&.dark {
&:before {
opacity: 1;
}
.sun {
opacity: 0;
}
.moon {
opacity: 1;
}
.body {
background: #444;
&:before {
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-bottom: 20px solid #444;
top: -20px;
left: 0;
position: absolute;
content: "";
}
&:after {
width: 0;
height: 0;
border-right: 0px solid transparent;
border-left: 30px solid transparent;
border-bottom: 20px solid #444;
top: -20px;
right: 0;
position: absolute;
content: "";
}
.eyes .pupil {
height: 90%;
width: 34px;
margin: 5% auto;
}
}
&:hover {
.body .eyes {
height: 40px;
bottom: 80px;
}
}
}
}

2
source/css/_common/components/third-party/third-party.styl vendored
View File

@@ -1,7 +1,7 @@
@import 'pace';
@import 'loading';
@import 'search';
@import 'theme';
.katex,
.katex-display {

2
source/css/_common/outline/header/image.styl
View File

@@ -7,6 +7,7 @@
height: 70vh;
min-height: 25rem;
z-index: -9;
background-color: #363636;
img {
width: 100%;
@@ -29,6 +30,7 @@
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
backface-visibility: hidden;
}
for num in (1 .. 6) {

7
source/css/_common/outline/header/menu.styl
View File

@@ -11,16 +11,21 @@
padding: 0 .625rem;
letter-spacing: .0625rem;
text-align: center;
+mobile() {
display: none;
&.title {
display: block;
}
}
.ic {
margin-right: .5rem;
}
a {
&:not(.title) a {
display: block;
font-size: $font-size-medium;

1
source/css/_common/outline/header/right.styl
View File

@@ -1,6 +1,5 @@
#nav .right {
display: inline-flex;
line-height: 1;
align-items: center;
justify-content: center;

10
source/css/_common/outline/header/tool.styl
View File

@@ -354,16 +354,20 @@
left: auto;
}
&.on {
&.show {
display: block;
if (hexo-config('sidebar.position') == 'left') {
@extend .slide-right-in;
} else {
@extend .slide-left-in;
+tablet-mobile() {
animation: slideRightIn .3s;
}
}
+tablet-mobile() {
animation: slideRightIn .3s;
&.hide {
@extend .fade-out;
}
}
}

2
source/css/_common/outline/outline.styl
View File

@@ -47,7 +47,7 @@
min-height: 37.5rem;
.cat {
margin-top: 6.25rem;
margin-top: 10rem;
}
.wrap {

17
source/css/_common/scaffolding/animate.styl vendored
View File

@@ -20,6 +20,10 @@
animation: fadeIn .5s;
}
.fade-out {
animation: fadeOut .3s;
}
.up-down {
animation: UpDown 2s infinite;
}
@@ -60,10 +64,6 @@
animation: elastic 1s;
}
.reverse {
animation-direction: reverse;
}
@keyframes rotate {
from {
transform: rotate(0)
@@ -175,6 +175,15 @@
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes blur {
0% {

8
source/css/_common/scaffolding/tip.styl
View File

@@ -5,9 +5,15 @@
top: 50%;
left: 50%;
z-index: $zindex-5;
padding: .625rem;
padding: .625rem 1rem;
border-radius: .625rem;
transform: translate(-50%,-50%);
text-align: center;
font-size: $font-size-small;
backdrop-filter: blur(.625rem);
@extend .fade-in;
&.hide {
@extend .fade-out;
}
}

9
source/css/_mixins.styl
View File

@@ -134,3 +134,12 @@ $color-btn {
background-image: linear-gradient(to right,var(--color-pink) 0,var(--color-orange) 100%);
box-shadow: 0 0 .75rem var(--color-pink-a3);
}
$fix-fullscreen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: $zindex-5;
}

BIN
source/images/cat.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

31
source/js/_app/dom.js
View File

@@ -60,12 +60,11 @@ Object.assign(HTMLElement.prototype, {
}
},
display: function(d) {
if(d) {
this.style.display = d;
} else {
if(d == null) {
return this.style.display
} else {
this.style.display = d;
}
},
child: function(selector) {
return $(selector, this)
@@ -129,8 +128,13 @@ const mediaPlayer = function(config) {
}
},
"music": function(event) {
t.media.list.toggleClass('on');
t.media.scroll();
if(t.media.list.hasClass('show')) {
t.media.hideList()
} else {
t.media.list.addClass('show');
t.media.scroll();
t.media.changeTitle();
}
}
}
};
@@ -315,7 +319,7 @@ const mediaPlayer = function(config) {
return;
}
this.source.play()
document.title = 'Now Playing...' + this.playlist[this.pointer]['title'] + ' - ' + this.playlist[this.pointer]['author'] + ' | ' + originTitle;
this.changeTitle()
},
pause: function() {
this.source.pause()
@@ -349,6 +353,17 @@ const mediaPlayer = function(config) {
}
}
}
},
hideList: function() {
var el = this.list
el.addClass('hide');
window.setTimeout(function() {
el.removeClass('show hide')
}, 300);
},
changeTitle: function() {
if(!this.source.paused)
document.title = 'Now Playing...' + this.playlist[this.pointer]['title'] + ' - ' + this.playlist[this.pointer]['author'] + ' | ' + originTitle;
}
};
@@ -408,7 +423,7 @@ const mediaPlayer = function(config) {
t.insertAfter(el);
$('#main').addEventListener('click', function() {
t.media.list.removeClass('on');
t.media.hideList()
})
}
},

54
source/js/_app/global.js
View File

@@ -19,7 +19,6 @@ const goToComment = toolBtn.child('.chat');
const sideBar = $('#sidebar');
const siteBrand = $('#brand');
const siteSearch = $('#search');
const siteContent = $('#content');
const headerHight = $('#waves').top();
const headerHightInner = headerHight - siteNavHeight;
@@ -30,7 +29,6 @@ const Loader = {
clearTimeout(this.timer);
document.body.removeClass('loaded');
Velocity(loadCat, "fadeIn", {
display: "flex",
complete: function() {
Loader.lock = false;
}
@@ -49,10 +47,15 @@ const Loader = {
}
const changeTheme = function(type) {
var btn = $('.theme .ic')
if(type) {
HTML.attr('data-theme', type);
btn.removeClass('i-sun')
btn.addClass('i-moon')
} else {
HTML.attr('data-theme', null);
btn.removeClass('i-moon');
btn.addClass('i-sun');
}
}
@@ -72,18 +75,48 @@ const themeColorListener = function () {
}
});
var t = store.get('theme');
if(t) {
changeTheme(t);
}
$('.theme').addEventListener('click', function(event) {
var btn = event.currentTarget.child('.ic')
var neko = $('#neko')
if(!neko) {
neko = document.createElement('div')
neko.id = 'neko'
neko.innerHTML = '<div class="planet"><div class="sun"></div><div class="moon"></div></div><div class="body"><div class="face"><section class="eyes left"><span class="pupil"></span></section><section class="eyes right"><span class="pupil"></span></section><span class="nose"></span></div></div>'
BODY.appendChild(neko);
}
if(btn.hasClass('i-sun')) {
changeTheme('dark');
btn.removeClass('i-sun')
btn.addClass('i-moon')
Velocity(neko, "fadeIn", {
complete: function() {
neko.addClass('dark');
changeTheme('dark');
store.set('theme', 'dark');
setTimeout(function() {
Velocity(neko, "fadeOut");
}, 2500);
}
});
} else {
changeTheme();
btn.removeClass('i-moon')
btn.addClass('i-sun')
Velocity(neko, "fadeIn", {
complete: function() {
neko.removeClass('dark');
changeTheme();
store.del('theme');
setTimeout(function() {
Velocity(neko, "fadeOut");
}, 2500);
}
});
}
});
}
const visibilityListener = function () {
@@ -116,8 +149,11 @@ const showtip = function(msg) {
new_div.addClass('tip');
BODY.appendChild(new_div);
window.setTimeout(function() {
setTimeout(function() {
new_div.addClass('hide')
setTimeout(function() {
BODY.removeChild(new_div);
}, 300);
}, 3000);
}

6
source/js/_app/pjax.js
View File

@@ -15,8 +15,8 @@ const pjaxReload = function () {
});
}
siteContent.innerHTML = ''
siteContent.appendChild(loadCat.lastChild.cloneNode(true));
$('#content').innerHTML = ''
$('#content').appendChild(loadCat.lastChild.cloneNode(true));
}
const siteRefresh = function (reload) {
@@ -113,4 +113,4 @@ const siteInit = function () {
window.addEventListener('DOMContentLoaded', siteInit);
console.log('%c Theme.Shoka %c v' + CONFIG.version + ' ', 'color: white; background: #e9546b; padding:5px 0;', 'padding:4px;border:1px solid #e9546b;')
console.log('%c Theme.Shoka v' + CONFIG.version + ' %c https://shoka.lostyu.me/ ', 'color: white; background: #e9546b; padding:5px 0;', 'padding:4px;border:1px solid #e9546b;')

2
source/js/_app/sidebar.js
View File

@@ -196,7 +196,7 @@ const goToCommentHandle = function () {
}
const menuActive = function () {
$.each('.menu .item', function (element) {
$.each('.menu .item:not(.title)', function (element) {
var target = element.child('a[href]');
if (!target) return;
var isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '');