sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

JS优化

Browse Source
This commit is contained in:
结发受长生 2019-05-10 00:22:27 +08:00
parent f7b8721ec6
commit c8baba77fe
12 changed files with 166 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/filter.js
View File

@ -5,5 +5,5 @@ hexo.extend.filter.register('before_post_render', function(data){
data.content = data.content.replace(/\]\s*\((?=(?!http).*?\))/gi,
`](${hexo.config.picture_cdn}`)
}
return data;
});
return data
})

30
themes/yilia/source-src/config/photo-wall.json
View File

@ -1,30 +0,0 @@
[
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"},
{"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"}
]

162
themes/yilia/source-src/js/anm.js
View File

@ -1,92 +1,92 @@
function init() {
var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
// Main
initHeader();
addListeners();
// Main
initHeader();
addListeners();
function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {x: 0, y: height};
function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {x: 0, y: height};
largeHeader = document.getElementById('container');
largeHeader.style.height = height+'px';
largeHeader = document.getElementById('container');
largeHeader.style.height = height+'px';
canvas = document.getElementById('anm-canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
canvas = document.getElementById('anm-canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
// create particles
circles = [];
for(var x = 0; x < width*0.5; x++) {
var c = new Circle();
circles.push(c);
}
animate();
// create particles
circles = [];
for(var x = 0; x < width*0.5; x++) {
var c = new Circle();
circles.push(c);
}
animate();
}
// Event handling
function addListeners() {
window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize);
}
function scrollCheck() {
if(document.body.scrollTop > height) animateHeader = false;
else animateHeader = true;
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height+'px';
canvas.width = width;
canvas.height = height;
}
function animate() {
if(animateHeader) {
ctx.clearRect(0,0,width,height);
for(var i in circles) {
circles[i].draw();
}
}
requestAnimationFrame(animate);
}
// Canvas manipulation
function Circle() {
var _this = this;
// constructor
(function() {
_this.pos = {};
init();
//console.log(_this);
})();
function init() {
_this.pos.x = Math.random()*width;
_this.pos.y = height+Math.random()*100;
_this.alpha = 0.1+Math.random()*0.3;
_this.scale = 0.1+Math.random()*0.3;
_this.velocity = Math.random();
}
// Event handling
function addListeners() {
window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize);
}
function scrollCheck() {
if(document.body.scrollTop > height) animateHeader = false;
else animateHeader = true;
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height+'px';
canvas.width = width;
canvas.height = height;
}
function animate() {
if(animateHeader) {
ctx.clearRect(0,0,width,height);
for(var i in circles) {
circles[i].draw();
}
}
requestAnimationFrame(animate);
}
// Canvas manipulation
function Circle() {
var _this = this;
// constructor
(function() {
_this.pos = {};
init();
//console.log(_this);
})();
function init() {
_this.pos.x = Math.random()*width;
_this.pos.y = height+Math.random()*100;
_this.alpha = 0.1+Math.random()*0.3;
_this.scale = 0.1+Math.random()*0.3;
_this.velocity = Math.random();
}
this.draw = function() {
if(_this.alpha <= 0) {
init();
}
_this.pos.y -= _this.velocity;
_this.alpha -= 0.0005;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
ctx.fill();
};
}
this.draw = function() {
if(_this.alpha <= 0) {
init();
}
_this.pos.y -= _this.velocity;
_this.alpha -= 0.0005;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
ctx.fill();
};
}
}
export default { init }

4
themes/yilia/source-src/js/browser.js
View File

@ -1,6 +1,6 @@
export default {
versions: function() {
var u = window.navigator.userAgent;
var u = window.navigator.userAgent
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
@ -13,6 +13,6 @@ export default {
iPad: u.indexOf('iPad') > -1, //是否为iPad
webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') == -1 //是否为微信浏览器
};
}
}()
}

8
themes/yilia/source-src/js/comment.js
View File

@ -1,6 +1,6 @@
// const AV = require('leancloud-storage');
window.AV = require('leancloud-storage');
// const Valine = require('../lib/Valine.min');
// const AV = require('leancloud-storage')
window.AV = require('leancloud-storage')
// const Valine = require('../lib/Valine.min')
/**
* 使用根据Valine项目源代码重新打包
* 可以支持对于AV对象的传参输入, 而不需要暴露全局变量
@ -11,6 +11,6 @@ const commentConfig = require("../config/comment.json")
import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then(({ default: Valine }) => {
commentConfig.valine.config.path = window.location.pathname
// commentConfig.valine.config.av = AV;
// commentConfig.valine.config.av = AV
new Valine(commentConfig.valine.config)
})

20
themes/yilia/source-src/js/mobile.js
View File

@ -21,22 +21,22 @@ function tabActive() {
}
function getElementLeft(element) {　　　　
var actualLeft = element.offsetLeft;　　　　
var current = element.offsetParent;　　　　
var actualLeft = element.offsetLeft　　　　
var current = element.offsetParent　　　　
while (current !== null) {　　　　　　
actualLeft += current.offsetLeft;　　　　
current = current.offsetParent;　　
actualLeft += current.offsetLeft　　　　
current = current.offsetParent　　
}　　
return actualLeft;
return actualLeft
}　　
function getElementTop(element) {　　　　
var actualTop = element.offsetTop;　　　　
var current = element.offsetParent;　　　　
var actualTop = element.offsetTop　　　　
var current = element.offsetParent　　　　
while (current !== null) {　　　　　　
actualTop += current.offsetTop;　　　　　　
current = current.offsetParent;　　　　
actualTop += current.offsetTop　　　　　　
current = current.offsetParent　　　　
}　　　　
return actualTop;　　
return actualTop　　
}
function scrollStop($dom, top, limit, zIndex, diff) {

45
themes/yilia/source-src/js/photo-wall.js
View File

@ -1,13 +1,36 @@
import photoWallJson from '../config/photo-wall.json'
import axios from 'axios'
var content = '<div class="itemContainer">'
photoWallJson.forEach(item => {
content += `
<div class="item">
<img class="item-img" src="${item.url}" alt=""/>
</div>
`
})
content += '</div>'
var groupid = 1, currentIndex = 0
document.getElementById('photo-wall').innerHTML = content
function loadMore(step) {
// 滚动到底部时调用
axios.get(`${themeConfig.pictureCdn}/photo-wall/${groupid}/list.json`).then(res => {
var itemContainer = document.createElement('div')
var imgItems = '', index = currentIndex
for( ; index<currentIndex+step && index<res.data.files.length ; index++) {
imgItems += `
<div class="item">
<img class="item-img" src="${themeConfig.pictureCdn}/${res.data.files[index].name}" alt=""/>
</div>
`
}
if(index >= res.data.files.length) { // 已到达当前分组列表的末尾
groupid++
if(index<currentIndex+step) { // 如果加载的数据数量不足步长
// 则需要再加载下一个分组, 下一个分组需要加载的图片数量是剩余的步长
loadMore(currentIndex + step - index)
}
} else {
currentIndex = index
}
itemContainer.classList.add('item-container')
itemContainer.innerHTML = imgItems
document.getElementById('photo-wall').appendChild(itemContainer)
}).catch(res => { // 未加载到文件列表, 代表已经没有更多图片
// TODO 显示已没有更多内容
// console.log(res)
})
}
loadMore(20)
//TODO 在滚动到底部时调用loadMore

18
themes/yilia/source-src/js/share.js
View File

@ -4,9 +4,9 @@ function generate(url, opts) {
var url = url.replace(/<%-sUrl%>/g, encodeURIComponent(opts.sUrl))
.replace(/<%-sTitle%>/g, opts.sTitle)
.replace(/<%-sDesc%>/g, opts.sDesc)
.replace(/<%-sPic%>/g, encodeURIComponent(opts.sPic));
.replace(/<%-sPic%>/g, encodeURIComponent(opts.sPic))
window.open(url);
window.open(url)
}
var qrcodeInit = false
@ -47,18 +47,18 @@ function handleClick(type, opts) {
} else if (type === 'google') {
generate('https://plus.google.com/share?url=<%-sUrl%>', opts)
} else if (type === 'weixin') {
showWX();
showWX()
}
}
let init = function() {
let $sns = document.querySelectorAll('.share-sns');
if (!$sns || $sns.length === 0) return;
let $sns = document.querySelectorAll('.share-sns')
if (!$sns || $sns.length === 0) return
let sUrl = window.location.href;
let sTitle = document.querySelector('title').innerHTML;
let $img = document.querySelectorAll('.article-entry img');
let sPic = $img.length ? document.querySelector('.article-entry img').getAttribute('src') : '';
let sUrl = window.location.href
let sTitle = document.querySelector('title').innerHTML
let $img = document.querySelectorAll('.article-entry img')
let sPic = $img.length ? document.querySelector('.article-entry img').getAttribute('src') : ''
if ((sPic !== '') && !/^(http:|https:)?\/\//.test(sPic)) {
sPic = window.location.origin + sPic
}

4
themes/yilia/source-src/js/slider.js
View File

@ -86,7 +86,7 @@ new Vue({
},
filters: {
urlformat: (str) => {
return (window.themeConfig && window.themeConfig.root) ? window.themeConfig.root + str : '/' + str;
return (window.themeConfig && window.themeConfig.root) ? window.themeConfig.root + str : '/' + str
}
},
watch: {
@ -186,7 +186,7 @@ const waifuTools = {
// 隐藏看板娘
setTimeout(function() {
document.querySelector('.waifu').style.display = 'none'
}, 1300);
}, 1300)
},
"tools.eye"() {
// 切换到夜间模式

36
themes/yilia/source-src/js/util.js
View File

@ -18,7 +18,7 @@ const Util = (function(){
, a = /<br\s*\/?>/gi
, i = /\r?\n/g
, f = /\s/g
, p = {};
, p = {}
for (var s in u)
p[u[s]] = s;
return u["&apos;"] = "'",
@ -32,39 +32,39 @@ const Util = (function(){
},
encodeBase16: function(e) {
if (!e)
return e;
e += "";
return e
e += ""
for (var r = [], n = 0, t = e.length; t > n; n++)
r.push(e.charCodeAt(n).toString(16).toUpperCase());
r.push(e.charCodeAt(n).toString(16).toUpperCase())
return r.join("")
},
encodeBase16forJSON: function(e) {
if (!e)
return e;
return e
e = e.replace(/[\u4E00-\u9FBF]/gi, function(e) {
return escape(e).replace("%u", "\\u")
});
})
for (var r = [], n = 0, t = e.length; t > n; n++)
r.push(e.charCodeAt(n).toString(16).toUpperCase());
r.push(e.charCodeAt(n).toString(16).toUpperCase())
return r.join("")
},
decodeBase16: function(e) {
if (!e)
return e;
e += "";
return e
e += ""
for (var r = [], n = 0, t = e.length; t > n; n += 2)
r.push(String.fromCharCode("0x" + e.slice(n, n + 2)));
r.push(String.fromCharCode("0x" + e.slice(n, n + 2)))
return r.join("")
},
encodeObject: function(r) {
if (r instanceof Array)
for (var n = 0, t = r.length; t > n; n++)
r[n] = e.encodeObject(r[n]);
r[n] = e.encodeObject(r[n])
else if ("object" == typeof r)
for (var o in r)
r[o] = e.encodeObject(r[o]);
r[o] = e.encodeObject(r[o])
else if ("string" == typeof r)
return e.encode(r);
return e.encode(r)
return r
},
loadScript: function(path) {
@ -73,17 +73,17 @@ const Util = (function(){
$script.setAttribute('src', path)
},
addLoadEvent: function(func){
var oldonload = window.onload;
var oldonload = window.onload
if (typeof window.onload !== "function") {
window.onload = func;
window.onload = func
} else {
window.onload = function() {
oldonload();
func();
oldonload()
func()
}
}
}
}
})();
})()
export default Util

4
themes/yilia/source-src/js/viewer.js
View File

@ -6,7 +6,7 @@ import '../lib/photoswipe/default-skin/default-skin.css'
import Util from './util'
function init() {
let pswpElement = document.querySelectorAll('.pswp')[0];
let pswpElement = document.querySelectorAll('.pswp')[0]
let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))
Array.prototype.forEach.call($imgArr, ($em, i) => {
$em.addEventListener('click', function(){
@ -29,7 +29,7 @@ function init() {
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
index: parseInt(i),
bgOpacity: 0.8
});
})
gallery.init()
})
})

4
themes/yilia/source-src/js/waifu.js
View File

@ -7,8 +7,8 @@ const isMobile = (Browser.versions.mobile && window.screen.width < 800)
* 判断浏览器是否支持WebGL
*/
function isSupportWebGL() {
var canvas = document.createElement("canvas");
var webGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
var canvas = document.createElement("canvas")
var webGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl")
return webGL && webGL instanceof WebGLRenderingContext
}