效果美化及若干效果bug修复
This commit is contained in:
parent
66a69b1100
commit
eb5625c3ae
@ -1,5 +1,4 @@
|
|||||||
<% var defaultBg = '#4d4d4d'; %>
|
<% var defaultBg = '#4d4d4d'; %>
|
||||||
<div class="overlay" ></div>
|
|
||||||
<div class="intrude-less">
|
<div class="intrude-less">
|
||||||
<header id="header" class="inner">
|
<header id="header" class="inner">
|
||||||
<a href="<%=config.root%>" @mouseover="linkMouseover('home')" class="profilepic">
|
<a href="<%=config.root%>" @mouseover="linkMouseover('home')" class="profilepic">
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
<div class="article-outer">
|
||||||
<article class="article">
|
<article class="article">
|
||||||
<h3 class="category-count">共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3>
|
<h3 class="category-count">共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3>
|
||||||
<% if (site.categories.length){ %>
|
<% if (site.categories.length){ %>
|
||||||
@ -21,4 +22,5 @@
|
|||||||
amount: 999
|
amount: 999
|
||||||
}) %>
|
}) %>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
</div>
|
||||||
@ -27,10 +27,13 @@ html, body, #container {
|
|||||||
.anm-canvas {
|
.anm-canvas {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
&.show .anm-canvas {
|
&.show {
|
||||||
display: block;
|
overflow-y: hidden;
|
||||||
position: fixed;
|
.anm-canvas {
|
||||||
}
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.body-wrap{
|
.body-wrap{
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
|
|||||||
BIN
themes/yilia/source-src/css/img/left_bg.jpg
Normal file
BIN
themes/yilia/source-src/css/img/left_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
@ -1,21 +1,13 @@
|
|||||||
.left-col {
|
.left-col {
|
||||||
background: $colorBg;
|
background: $colorBg url(./img/left_bg.jpg) no-repeat;
|
||||||
|
background-size: cover;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
position:fixed;
|
position:fixed;
|
||||||
opacity:1;
|
opacity:1;
|
||||||
@extend %trans;
|
@extend %trans;
|
||||||
height:100%;
|
height:100%;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
&.show {
|
@extend %shadow;
|
||||||
@extend %shadow;
|
|
||||||
}
|
|
||||||
.overlay{
|
|
||||||
width: 100%;
|
|
||||||
height: 130px;
|
|
||||||
position: absolute;
|
|
||||||
background: #4d4d4d;
|
|
||||||
@extend %trans;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intrude-less {
|
.intrude-less {
|
||||||
width: 76%;
|
width: 76%;
|
||||||
|
|||||||
@ -105,9 +105,6 @@ body.night {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.overlay {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
// 头像 看板娘 图标 -> 降低亮度滤镜
|
// 头像 看板娘 图标 -> 降低亮度滤镜
|
||||||
.profilepic, .waifu, #header .header-nav .social a {
|
.profilepic, .waifu, #header .header-nav .social a {
|
||||||
filter: brightness(30%);
|
filter: brightness(30%);
|
||||||
|
|||||||
@ -1,13 +1,12 @@
|
|||||||
var backTop = function (domE, ctn, distance) {
|
var backTop = function (domE, ctn, distance) {
|
||||||
if (!domE) return
|
if (!domE) return
|
||||||
var timer = null
|
ctn.addEventListener('scroll', function(){
|
||||||
var _onscroll = ctn.onscroll
|
// 滚动到一定高度才显示"回到顶部"按钮
|
||||||
ctn.onscroll = throttle(function () { // 滚动到一定高度才显示"回到顶部"按钮
|
throttle(toggleDomE, 200)(domE, ctn, distance)
|
||||||
typeof _onscroll === 'function' && _onscroll.apply(this, arguments)
|
})
|
||||||
toggleDomE()
|
|
||||||
}, 100)
|
|
||||||
if(!window.getComputedStyle || window.getComputedStyle(ctn).scrollBehavior === undefined) {
|
if(!window.getComputedStyle || window.getComputedStyle(ctn).scrollBehavior === undefined) {
|
||||||
// 浏览器不支持scroll-behavior属性
|
// 浏览器不支持scroll-behavior属性
|
||||||
|
let timer = null
|
||||||
domE.querySelector('a[href="#top"]').addEventListener('click', function (event) {
|
domE.querySelector('a[href="#top"]').addEventListener('click', function (event) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
timer = setInterval(function () { //设置一个计时器
|
timer = setInterval(function () { //设置一个计时器
|
||||||
@ -26,16 +25,15 @@ var backTop = function (domE, ctn, distance) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleDomE() {
|
function toggleDomE(targetDom, containerDom, distance) {
|
||||||
domE.style.display = (ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop) > distance ? 'block' : 'none'
|
targetDom.style.display = (containerDom.scrollTop || document.documentElement.scrollTop || document.body.scrollTop) > distance ? 'block' : 'none'
|
||||||
}
|
}
|
||||||
function throttle(func, wait) {
|
function throttle(func, wait) {
|
||||||
var timer = null
|
var timer = null
|
||||||
return function () {
|
return function (...args) {
|
||||||
var self = this, args = arguments
|
|
||||||
if (timer) clearTimeout(timer)
|
if (timer) clearTimeout(timer)
|
||||||
timer = setTimeout(function () {
|
timer = setTimeout(() => {
|
||||||
return typeof func === 'function' && func.apply(self, args)
|
return typeof func === 'function' && func.apply(this, args)
|
||||||
}, wait)
|
}, wait)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -27,17 +27,17 @@ Util.addLoadEvent(function() {
|
|||||||
},{ // 放大
|
},{ // 放大
|
||||||
scale: 0.8
|
scale: 0.8
|
||||||
},{ // 缩小
|
},{ // 缩小
|
||||||
scale: 1.2
|
scale: 1.1
|
||||||
},{ // 绕X轴旋转
|
},{ // 绕X轴旋转
|
||||||
rotate: { x: 30 }
|
rotate: { x: 30 }
|
||||||
},{ // 绕Y轴旋转
|
},{ // 绕Y轴旋转
|
||||||
rotate: { y: 30 }
|
rotate: { y: 20 }
|
||||||
}]
|
}]
|
||||||
import(/* webpackChunkName: "scrollreveal" */ 'scrollreveal').then(ScrollReveal => {
|
import(/* webpackChunkName: "scrollreveal" */ 'scrollreveal').then(ScrollReveal => {
|
||||||
let index = Math.floor(Math.random() * animateTypes.length)
|
let index = Math.floor(Math.random() * animateTypes.length)
|
||||||
ScrollReveal.default().reveal('.article-index', Object.assign({
|
ScrollReveal.default().reveal('.article-index', Object.assign({
|
||||||
delay: 200,
|
delay: 200,
|
||||||
container: document.querySelector('#container')
|
container: document.getElementById('container')
|
||||||
}, animateTypes[index]))
|
}, animateTypes[index]))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@ -92,11 +92,8 @@ function checkScrollSlide(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
var _onscroll = scrollDom.onscroll
|
|
||||||
var timer = null
|
var timer = null
|
||||||
scrollDom.onscroll = function () {
|
scrollDom.addEventListener('scroll', function(){
|
||||||
// 保留已有的滚动事件回调函数并在新的回调函数中进行调用
|
|
||||||
typeof _onscroll === 'function' && _onscroll.apply(this, arguments)
|
|
||||||
if(scrollLock) return
|
if(scrollLock) return
|
||||||
if(timer) clearTimeout(timer)
|
if(timer) clearTimeout(timer)
|
||||||
timer = setTimeout(()=>{
|
timer = setTimeout(()=>{
|
||||||
@ -105,7 +102,7 @@ function init() {
|
|||||||
}
|
}
|
||||||
timer = null
|
timer = null
|
||||||
}, 200)
|
}, 200)
|
||||||
}
|
})
|
||||||
loadMoreItems(defaultStep)
|
loadMoreItems(defaultStep)
|
||||||
}
|
}
|
||||||
export default { init }
|
export default { init }
|
||||||
@ -8,22 +8,23 @@ const Util = (function(){
|
|||||||
var t = /"|<|>|&| |'|&#(\d+);|&#(\d+)/g
|
var t = /"|<|>|&| |'|&#(\d+);|&#(\d+)/g
|
||||||
, o = /['<> "&]/g
|
, o = /['<> "&]/g
|
||||||
, u = {
|
, u = {
|
||||||
""": '"',
|
""": '"',
|
||||||
"<": "<",
|
"<": "<",
|
||||||
">": ">",
|
">": ">",
|
||||||
"&": "&",
|
"&": "&",
|
||||||
" ": " "
|
" ": " "
|
||||||
}
|
}
|
||||||
, c = /\u00a0/g
|
, c = /\u00a0/g
|
||||||
, a = /<br\s*\/?>/gi
|
, a = /<br\s*\/?>/gi
|
||||||
, i = /\r?\n/g
|
, i = /\r?\n/g
|
||||||
, f = /\s/g
|
, f = /\s/g
|
||||||
, p = {}
|
, p = {}
|
||||||
for (var s in u)
|
for (let s in u) {
|
||||||
p[u[s]] = s;
|
p[u[s]] = s
|
||||||
return u["'"] = "'",
|
}
|
||||||
p["'"] = "'",
|
u["'"] = "'"
|
||||||
{
|
p["'"] = "'"
|
||||||
|
return {
|
||||||
encode: function(e) {
|
encode: function(e) {
|
||||||
return e ? ("" + e).replace(o, n).replace(i, "<br/>").replace(f, " ") : ""
|
return e ? ("" + e).replace(o, n).replace(i, "<br/>").replace(f, " ") : ""
|
||||||
},
|
},
|
||||||
@ -67,21 +68,9 @@ const Util = (function(){
|
|||||||
return e.encode(r)
|
return e.encode(r)
|
||||||
return r
|
return r
|
||||||
},
|
},
|
||||||
loadScript: function(path) {
|
|
||||||
var $script = document.createElement('script')
|
|
||||||
document.getElementsByTagName('body')[0].appendChild($script)
|
|
||||||
$script.setAttribute('src', path)
|
|
||||||
},
|
|
||||||
addLoadEvent: function(func){
|
addLoadEvent: function(func){
|
||||||
var oldonload = window.onload
|
if(typeof func !== 'function') return
|
||||||
if (typeof window.onload !== "function") {
|
document.addEventListener("DOMContentLoaded", func)
|
||||||
window.onload = func
|
|
||||||
} else {
|
|
||||||
window.onload = function() {
|
|
||||||
oldonload()
|
|
||||||
func()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})()
|
})()
|
||||||
|
|||||||
@ -43,7 +43,6 @@ function init() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// export default { init }
|
|
||||||
if(!window.themeConfig.pageid) { // 非个性化页面的普通文章
|
if(!window.themeConfig.pageid) { // 非个性化页面的普通文章
|
||||||
Util.addLoadEvent(init)
|
Util.addLoadEvent(init)
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user