diff --git a/themes/yilia/layout/layout.ejs b/themes/yilia/layout/layout.ejs index fdb670b..8065c97 100644 --- a/themes/yilia/layout/layout.ejs +++ b/themes/yilia/layout/layout.ejs @@ -6,7 +6,7 @@ <%- partial('_partial/left-col', null, {cache: !config.relative_link}) %> <%- partial('_partial/live2d') %> -
+
<%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
diff --git a/themes/yilia/source-src/css/core/_animation.scss b/themes/yilia/source-src/css/core/_animation.scss index 619816e..8929508 100644 --- a/themes/yilia/source-src/css/core/_animation.scss +++ b/themes/yilia/source-src/css/core/_animation.scss @@ -255,13 +255,25 @@ } @keyframes leftIn { - from {transform: translate3d(0, 0, 0);} - to {transform: translate3d(333px, 0, 0);} + from { + transform: translate3d(0, 0, 0); + background:$colorBodyBg; + } + to { + transform: translate3d(333px, 0, 0); + background: none; + } } @keyframes leftOut { - from {transform: translate3d(333px, 0, 0);} - to {transform: translate3d(0, 0, 0);} + from { + transform: translate3d(333px, 0, 0); + background: none; + } + to { + transform: translate3d(0, 0, 0); + background:$colorBodyBg; + } } %anmLeftIn { @@ -275,13 +287,25 @@ } @keyframes smallLeftIn { - from {transform: translate3d(0, 0, 0);} - to {transform: translate3d(300px, 0, 0);} + from { + transform: translate3d(0, 0, 0); + opacity: 0; + } + to { + transform: translate3d(300px, 0, 0); + opacity: 1; + } } @keyframes smallleftOut { - from {transform: translate3d(300px, 0, 0);} - to {transform: translate3d(0, 0, 0);} + from { + transform: translate3d(300px, 0, 0); + opacity: 1; + } + to { + transform: translate3d(0, 0, 0); + opacity: 0; + } } %anmSmallLeftIn { diff --git a/themes/yilia/source-src/css/grid.scss b/themes/yilia/source-src/css/grid.scss index 87dd9ac..96fc4e2 100644 --- a/themes/yilia/source-src/css/grid.scss +++ b/themes/yilia/source-src/css/grid.scss @@ -43,12 +43,11 @@ html, body, #container { width: auto; @extend %trans; &.show { - background: none; - opacity: .9; @extend %anmLeftIn; .article { transition: opacity .5s ease-in, background-color .2s ease-in; opacity: 0.6; + pointer-events: none; } } &.hide { diff --git a/themes/yilia/source-src/css/tools.scss b/themes/yilia/source-src/css/tools.scss index 54e622a..59bae61 100644 --- a/themes/yilia/source-src/css/tools.scss +++ b/themes/yilia/source-src/css/tools.scss @@ -11,12 +11,10 @@ overflow-scrolling: touch; @extend %trans; &.show { - opacity: 1; @extend %anmSmallLeftIn; } &.hide { @extend %anmSmallLeftOut; - z-index: 0; } .tools-nav { display: none; diff --git a/themes/yilia/source-src/js/comment.js b/themes/yilia/source-src/js/comment.js index 33586c5..e62fa0e 100644 --- a/themes/yilia/source-src/js/comment.js +++ b/themes/yilia/source-src/js/comment.js @@ -7,7 +7,7 @@ window.AV = require('leancloud-storage') * 但是缺少一些新功能 */ // 评论配置 -const commentConfig = require("../config/comment.json") +const commentConfig = require('../config/comment.json') import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then(({default: Valine }) => { commentConfig.valine.config.path = window.location.pathname diff --git a/themes/yilia/source-src/js/main.js b/themes/yilia/source-src/js/main.js index 85bf761..d3d1c24 100644 --- a/themes/yilia/source-src/js/main.js +++ b/themes/yilia/source-src/js/main.js @@ -21,8 +21,23 @@ Util.addLoadEvent(function() { } }) -const commentConfig = require("../config/comment.json") +const commentConfig = require('../config/comment.json') if(window.themeConfig.isPost && commentConfig.valine.enable) { // 文章详情页面, 并且启用了评论, 则加载评论相关代码 import(/* webpackChunkName: "comment" */ './comment') -} \ No newline at end of file +} + +var hideWaifu = localStorage.getItem('hideWaifu') +if(!hideWaifu || !eval(hideWaifu)) { + import(/* webpackChunkName: "waifu" */ './waifu').then(waifuInit => { + waifuInit.default.init() + }) +} + +// 控制台 +console.log( + '\n %c Silence %c https://www.colorfulsweet.site \n', + 'color:#FFFFFB;background:#ffa628;padding:5px 0;border-radius:.5rem 0 0 .5rem;', + 'background: #efefef;padding:5px 0;border-radius:0 .5rem .5rem 0;' +) +console.log(`页面加载消耗了 ${(Math.round(performance.now()*100)/100/1000).toFixed(2)}s`) \ No newline at end of file diff --git a/themes/yilia/source-src/js/slider.js b/themes/yilia/source-src/js/slider.js index 12f7e91..8db28ad 100644 --- a/themes/yilia/source-src/js/slider.js +++ b/themes/yilia/source-src/js/slider.js @@ -19,7 +19,7 @@ new Vue({ el: '#container', data: { isCtnShow: false, - isShow: false, + isShow: undefined, items: [], innerArchive: false, friends: false, @@ -191,6 +191,7 @@ const waifuTools = { // 隐藏看板娘 setTimeout(function() { document.querySelector('.waifu').style.display = 'none' + localStorage.setItem('hideWaifu', true) }, 1300) }, "tools.eye"() { diff --git a/themes/yilia/source-src/js/waifu.js b/themes/yilia/source-src/js/waifu.js index 3bfab42..b4a7634 100644 --- a/themes/yilia/source-src/js/waifu.js +++ b/themes/yilia/source-src/js/waifu.js @@ -12,19 +12,12 @@ function isSupportWebGL() { return webGL && webGL instanceof WebGLRenderingContext } -if(!isMobile && isSupportWebGL()) { - // 加载live2d模型 - loadlive2d('live2d', 'https://blog-cdn.nos-eastchina1.126.net/live2D/Kesshouban/model.json') - document.querySelector('.waifu').style.display = 'block' +export default { + init() { + if(!isMobile && isSupportWebGL()) { + // 加载live2d模型 + loadlive2d('live2d', 'https://blog-cdn.nos-eastchina1.126.net/live2D/Kesshouban/model.json') + document.querySelector('.waifu').style.display = 'block' + } + } } - - -// 控制台 -console.log( - '\n %c Silence %c https://www.colorfulsweet.site \n', - 'color:#FFFFFB;background:#ffa628;padding:5px 0;border-radius:.5rem 0 0 .5rem;', - 'background: #efefef;padding:5px 0;border-radius:0 .5rem .5rem 0;' -) -console.log(`页面加载消耗了 ${(Math.round(performance.now()*100)/100/1000).toFixed(2)}s`) - - diff --git a/themes/yilia/webpack.config.js b/themes/yilia/webpack.config.js index f305e68..6866289 100644 --- a/themes/yilia/webpack.config.js +++ b/themes/yilia/webpack.config.js @@ -18,8 +18,7 @@ module.exports = function(env, argv) { main: './source-src/js/main.js', slider: './source-src/js/slider.js', mobile: ['babel-polyfill', './source-src/js/mobile.js'], - viewer: './source-src/js/viewer.js', - waifu: './source-src/js/waifu.js' + viewer: './source-src/js/viewer.js' }, output: { publicPath: '/',