Merge remote-tracking branch 'origin/main' into main
This commit is contained in:
1152958806@qq.com
commit
618d564834
|
|
@ -2661,6 +2661,36 @@ spec:
|
|||
validation: required
|
||||
value: 'https://npm.onmicrosoft.cn/hao-theme-static@1.3.0/templates/assets'
|
||||
help: '默认为npmJs的onmicrosoft加速地址，如果你有自己的cdn地址（请确保链接下assets文件夹下主题静态资源文件），可以填写，否则请勿修改！ '
|
||||
- $formkit: group
|
||||
name: vanillaLazyload
|
||||
label: 懒加载
|
||||
value:
|
||||
enable: true
|
||||
errorImg: "/themes/theme-hao/assets/images/404.gif"
|
||||
loadingImg: /themes/theme-hao/assets/images/404s.gif
|
||||
children:
|
||||
- $formkit: radio
|
||||
name: enable
|
||||
id: enable
|
||||
key: enable
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: attachment
|
||||
name: loadingImg
|
||||
id: loadingImg
|
||||
key: loadingImg
|
||||
if: $get(enable).value
|
||||
label: 加载图片
|
||||
validation: required
|
||||
placeholder: 请输入图片 url
|
||||
- $formkit: attachment
|
||||
name: errorImg
|
||||
label: 图片加载失败图
|
||||
validation: required
|
||||
placeholder: 请输入图片 url
|
||||
- $formkit: group
|
||||
name: diytitle
|
||||
label: 动态标题
|
||||
|
|
|
|||
|
|
@ -23,7 +23,10 @@
|
|||
<div class="card-album">
|
||||
<th:block th:each="group : ${photoFinder.groupBy()}">
|
||||
<div class="card" th:onclick="go([[${group.metadata.name}]])">
|
||||
<img class="card_cover entered loaded" th:src="${#annotations.get(group, 'cover')}">
|
||||
<img class="card_cover"
|
||||
th:src="${isLazyload ? loadingImg : #annotations.get(group, 'cover')}"
|
||||
th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
|
||||
>
|
||||
<div class="card__content">
|
||||
<p class="card__category" th:text="${group.spec.displayName}"></p>
|
||||
<h3 class="card__heading" th:text="${#annotations.get(group, 'description')}"></h3>
|
||||
|
|
@ -39,8 +42,11 @@
|
|||
<h2 style="text-align:center;">[[${theme.config.photos.bigTitle}]]</h2>
|
||||
<div class="gallery-group-main">
|
||||
<th:block th:each="group : ${photoFinder.groupBy()}">
|
||||
<figure class="gallery-group"><img class="gallery-group-img no-lightbox"
|
||||
th:src="${#annotations.get(group, 'cover')}" alt="Group Image Gallery">
|
||||
<figure class="gallery-group">
|
||||
<img class="gallery-group-img no-lightbox"
|
||||
th:src="${isLazyload ? loadingImg : #annotations.get(group, 'cover')}"
|
||||
th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
|
||||
alt="Group Image Gallery">
|
||||
<figcaption>
|
||||
<div class="gallery-group-name">[[${group.spec.displayName}]]</div>
|
||||
<p>[[${#annotations.get(group, 'description')}]]</p><a target="_blank"
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@
|
|||
|
||||
<body>
|
||||
<div id="canvas" style="width: 540px;height: 640px;"></div>
|
||||
<script src="/themes/theme-hao/assets/libs/link/protoclass.js"></script>
|
||||
<script src="/themes/theme-hao/assets/libs/link/box2d.js"></script>
|
||||
<script src="/themes/theme-hao/assets/libs/link/Main.js">
|
||||
<script src="/themes/theme-hao/assets/libs/link/protoclass.min.js"></script>
|
||||
<script src="/themes/theme-hao/assets/libs/link/box2d.min.js"></script>
|
||||
<script src="/themes/theme-hao/assets/libs/link/Main.min.js">
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ let halo = {
|
|||
//折叠
|
||||
if(isEnableExpander){
|
||||
var expander = document.createElement("i");
|
||||
expander.className = 'fa-sharp fa-solid fa-caret-down code-expander cursor-pointer'
|
||||
expander.className = 'fa-sharp fa-solid haofont hao-icon-angle-down code-expander cursor-pointer'
|
||||
customItem.appendChild(expander)
|
||||
|
||||
expander.addEventListener('click', prismToolsFn)
|
||||
|
|
@ -271,7 +271,7 @@ let halo = {
|
|||
|
||||
|
||||
danmu: (url,token,maxBarrage)=>{
|
||||
const e = new EasyDanmaku({
|
||||
const e = new EasyDanmakuMin({
|
||||
el: "#danmu",
|
||||
line: 10,
|
||||
speed: 20,
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
const jqLoadAndRun = () => {
|
||||
const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
|
||||
? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.site-card-avatar):not(.flink-item-info):not(.rss-plan-info-group) > img, #article-container > img,.bber-container-img > img')
|
||||
? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.site-card-avatar):not(.flink-item-info):not(.rss-plan-info-group):not(.bangumi-picture) > img, #article-container > img,.bber-container-img > img')
|
||||
: []
|
||||
const fbLengthNoZero = $fancyboxEle.length > 0
|
||||
const $jgEle = document.querySelectorAll('#article-container .gallery')
|
||||
|
|
@ -443,6 +443,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
window.lazyLoadInstance = new LazyLoad({
|
||||
elements_selector: 'img',
|
||||
threshold: 0,
|
||||
data_src: 'lazy-src',
|
||||
callback_error: (img) => {
|
||||
img.setAttribute("srcset", GLOBAL_CONFIG.lazyload.error);
|
||||
}
|
||||
|
|
@ -465,14 +466,14 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
})
|
||||
|
||||
clickFnOfSubMenu()
|
||||
|
||||
GLOBAL_CONFIG.lazyload.enable && lazyloadImg()
|
||||
GLOBAL_CONFIG.copyright !== undefined && addCopyright()
|
||||
}
|
||||
|
||||
window.refreshFn = function () {
|
||||
initAdjust();
|
||||
|
||||
GLOBAL_CONFIG.lazyload.enable && lazyloadImg()
|
||||
|
||||
if (GLOBAL_CONFIG.isPost) {
|
||||
addRuntime();
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,91 +1 @@
|
|||
if (document.querySelector(".author-content.author-content-item.single")) {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.id = "header_canvas";
|
||||
canvas.style.position = "absolute";
|
||||
canvas.style.bottom = "0";
|
||||
canvas.width = 844;
|
||||
canvas.height = 346;
|
||||
document.querySelector(".author-content.author-content-item.single").appendChild(canvas);
|
||||
const parent = document.querySelector(".author-content.author-content-item.single").parentNode;
|
||||
parent.className = "thumbnail_canvas";
|
||||
(function () {
|
||||
var canvas,
|
||||
ctx,
|
||||
width,
|
||||
height,
|
||||
bubbles,
|
||||
animateHeader = true;
|
||||
initHeader();
|
||||
function initHeader() {
|
||||
canvas = document.getElementById("header_canvas");
|
||||
window_resize();
|
||||
if (canvas) {
|
||||
ctx = canvas.getContext("2d");
|
||||
//建立泡泡
|
||||
bubbles = [];
|
||||
var num = width * 0.04; //气泡数量
|
||||
for (var i = 0; i < num; i++) {
|
||||
var c = new Bubble();
|
||||
bubbles.push(c);
|
||||
}
|
||||
animate();
|
||||
}
|
||||
}
|
||||
function animate() {
|
||||
if (animateHeader) {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
for (var i in bubbles) {
|
||||
bubbles[i].draw();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
function window_resize() {
|
||||
//canvas铺满窗口
|
||||
//width = window.innerWidth;
|
||||
//height = window.innerHeight;
|
||||
|
||||
//如果需要铺满内容可以换下面这个
|
||||
const panel = document.querySelector(".thumbnail_canvas");
|
||||
if (panel) {
|
||||
width = panel.offsetWidth;
|
||||
height = panel.offsetHeight;
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
}
|
||||
window.onresize = function () {
|
||||
window_resize();
|
||||
};
|
||||
function Bubble() {
|
||||
var _this = this;
|
||||
(function () {
|
||||
_this.pos = {};
|
||||
init();
|
||||
})();
|
||||
function init() {
|
||||
_this.pos.x = Math.random() * width;
|
||||
_this.pos.y = height + Math.random() * 100;
|
||||
_this.alpha = 0.1 + Math.random() * 0.5; //气泡透明度
|
||||
_this.alpha_change = 0.0002 + Math.random() * 0.0005; //气泡透明度变化速度
|
||||
_this.scale = 0.2 + Math.random() * 0.8; //气泡大小
|
||||
_this.scale_change = Math.random() * 0.002; //气泡大小变化速度
|
||||
_this.speed = 0.1 + Math.random() * 0.4; //气泡上升速度
|
||||
}
|
||||
//气泡
|
||||
this.draw = function () {
|
||||
if (_this.alpha <= 0) {
|
||||
init();
|
||||
}
|
||||
_this.pos.y -= _this.speed;
|
||||
_this.alpha -= _this.alpha_change;
|
||||
_this.scale += _this.scale_change;
|
||||
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();
|
||||
};
|
||||
}
|
||||
})();
|
||||
}
|
||||
if(document.querySelector(".author-content.author-content-item.single")){const canvas=document.createElement("canvas");canvas.id="header_canvas",canvas.style.position="absolute",canvas.style.bottom="0",canvas.width=844,canvas.height=346,document.querySelector(".author-content.author-content-item.single").appendChild(canvas);document.querySelector(".author-content.author-content-item.single").parentNode.className="thumbnail_canvas",function(){var canvas,ctx,width,height,bubbles;function animate(){for(var i in ctx.clearRect(0,0,width,height),bubbles)bubbles[i].draw();requestAnimationFrame(animate)}function window_resize(){const panel=document.querySelector(".thumbnail_canvas");panel&&(width=panel.offsetWidth,height=panel.offsetHeight,canvas.width=width,canvas.height=height)}function Bubble(){var _this=this;function init(){_this.pos.x=Math.random()*width,_this.pos.y=height+100*Math.random(),_this.alpha=.1+.5*Math.random(),_this.alpha_change=2e-4+5e-4*Math.random(),_this.scale=.2+.8*Math.random(),_this.scale_change=.002*Math.random(),_this.speed=.1+.4*Math.random()}_this.pos={},init(),this.draw=function(){_this.alpha<=0&&init(),_this.pos.y-=_this.speed,_this.alpha-=_this.alpha_change,_this.scale+=_this.scale_change,ctx.beginPath(),ctx.arc(_this.pos.x,_this.pos.y,10*_this.scale,0,2*Math.PI,!1),ctx.fillStyle="rgba(255,255,255,"+_this.alpha+")",ctx.fill()}}!function(){if(canvas=document.getElementById("header_canvas"),window_resize(),canvas){ctx=canvas.getContext("2d"),bubbles=[];for(var num=.04*width,i=0;i<num;i++){var c=new Bubble;bubbles.push(c)}animate()}}(),window.onresize=function(){window_resize()}}()}
|
||||
|
|
@ -1,50 +1 @@
|
|||
function dark() {
|
||||
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
|
||||
var n, e, i, h, t = .05,
|
||||
s = document.getElementById("universe"),
|
||||
o = !0,
|
||||
a = "180,184,240",
|
||||
r = "226,225,142",
|
||||
d = "226,225,224",
|
||||
c = [];
|
||||
|
||||
function f() {
|
||||
n = window.innerWidth, e = window.innerHeight, i = .216 * n, s.setAttribute("width", n), s.setAttribute("height", e)
|
||||
}
|
||||
function u() {
|
||||
h.clearRect(0, 0, n, e);
|
||||
for (var t = c.length, i = 0; i < t; i++) {
|
||||
var s = c[i];
|
||||
s.move(), s.fadeIn(), s.fadeOut(), s.draw()
|
||||
}
|
||||
}
|
||||
function y() {
|
||||
this.reset = function() {
|
||||
this.giant = m(3), this.comet = !this.giant && !o && m(10), this.x = l(0, n - 10), this.y = l(0, e), this.r = l(1.1, 2.6), this.dx = l(t, 6 * t) + (this.comet + 1 - 1) * t * l(50, 120) + 2 * t, this.dy = -l(t, 6 * t) - (this.comet + 1 - 1) * t * l(50, 120), this.fadingOut = null, this.fadingIn = !0, this.opacity = 0, this.opacityTresh = l(.2, 1 - .4 * (this.comet + 1 - 1)), this.do = l(5e-4, .002) + .001 * (this.comet + 1 - 1)
|
||||
}, this.fadeIn = function() {
|
||||
this.fadingIn && (this.fadingIn = !(this.opacity > this.opacityTresh), this.opacity += this.do)
|
||||
}, this.fadeOut = function() {
|
||||
this.fadingOut && (this.fadingOut = !(this.opacity < 0), this.opacity -= this.do /2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20 * t) + ")", h.rect(this.x - this.dx / 4 * t, this.y - this.dy / 4 * t - 2, 2, 2), h.fill()
|
||||
} else h.fillStyle = "rgba(" + r + "," + this.opacity + ")", h.rect(this.x, this.y, this.r, this.r);
|
||||
h.closePath(), h.fill()
|
||||
}, this.move = function() {
|
||||
this.x += this.dx, this.y += this.dy, !1 === this.fadingOut && this.reset(), (this.x > n - n / 4 || this.y < 0) && (this.fadingOut = !0)
|
||||
}, setTimeout(function() {
|
||||
o = !1
|
||||
}, 50)
|
||||
}
|
||||
function m(t) {
|
||||
return Math.floor(1e3 * Math.random()) + 1 < 10 * t
|
||||
}
|
||||
function l(t, i) {
|
||||
return Math.random() * (i - t) + t
|
||||
}
|
||||
f(), window.addEventListener("resize", f, !1), function() {
|
||||
h = s.getContext("2d");
|
||||
for (var t = 0; t < i; t++) c[t] = new y, c[t].reset();
|
||||
u()
|
||||
}(), function t() {
|
||||
document.getElementsByTagName('html')[0].getAttribute('data-theme') == 'dark' && u(), window.requestAnimationFrame(t)
|
||||
}()
|
||||
};
|
||||
dark()
|
||||
function dark(){window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+.1,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba(180,184,240,"+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba(226,225,142,"+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout((function(){o=!1}),50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){"dark"==document.getElementsByTagName("html")[0].getAttribute("data-theme")&&u(),window.requestAnimationFrame(t)}()}dark();
|
||||
|
|
@ -119,7 +119,7 @@ Last Modified time : 20220211 98:00 by https://immmmm.com
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#cf-container a:not(.rss-plan-item) {
|
||||
#cf-container a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,461 +0,0 @@
|
|||
|
||||
var canvas;
|
||||
|
||||
var delta = [0, 0];
|
||||
var stage = [window.screenX, window.screenY, window.innerWidth, window.innerHeight];
|
||||
getBrowserDimensions();
|
||||
|
||||
var themes = [[" #10222B", "#95AB63", "#BDD684", "#E2F0D6", "#F6FFE0"], ["#362C2A", "#732420", "#BF734C"
|
||||
, "#FAD9A0", "#736859"], ["#0D1114", "#102C2E", "#695F4C", "#EBBC5E", "#FFFBB8"], ["#2E2F38", "#FFD63E"
|
||||
, "#FFB54B", "#E88638", "#8A221C"], ["#121212", "#E6F2DA", "#C9F24B", "#4D7B85", "#23383D"],
|
||||
["#343F40", "#736751", "#F2D7B6", "#BFAC95", "#8C3F3F"], ["#000000", "#2D2B2A", "#561812", "#B81111"
|
||||
, "#FFFFFF"], ["#333B3A", "#B4BD51", "#543B38", "#61594D", "#B8925A"]]; var theme; var worldAABB, world,
|
||||
iterations = 1, timeStep = 1 / 15; var walls = []; var wall_thickness = 200; var wallsSetted = false; var bodies,
|
||||
elements, text; var createMode = false; var destroyMode = false; var isMouseDown = false; var mouseJoint; var mouse = {
|
||||
x: 0, y: 0
|
||||
}; var gravity = { x: 0, y: 1 }; var PI2 = Math.PI * 2; var timeOfLastTouch = 0; init(); play(); function
|
||||
init() {
|
||||
canvas = document.getElementById('canvas'); document.onmousedown = onDocumentMouseDown;
|
||||
document.onmouseup = onDocumentMouseUp; document.onmousemove = onDocumentMouseMove;
|
||||
document.ondblclick = onDocumentDoubleClick; document.addEventListener('touchstart', onDocumentTouchStart, false);
|
||||
document.addEventListener('touchmove', onDocumentTouchMove, false); document.addEventListener('touchend',
|
||||
onDocumentTouchEnd, false); window.addEventListener('deviceorientation', onWindowDeviceOrientation, false);
|
||||
//init box2d
|
||||
worldAABB = new b2AABB(); worldAABB.minVertex.Set(-200, -200);
|
||||
worldAABB.maxVertex.Set(window.innerWidth + 200, window.innerHeight + 200); world = new b2World(worldAABB, new
|
||||
b2Vec2(0, 0), true); setWalls(); reset();
|
||||
} function play() { setInterval(loop, 1000 / 40); } function reset() {
|
||||
var i; if (bodies) {
|
||||
for (i = 0; i < bodies.length; i++) {
|
||||
var body = bodies[i]
|
||||
canvas.removeChild(body.GetUserData().element); world.DestroyBody(body); body = null;
|
||||
}
|
||||
} // color theme
|
||||
theme = themes[Math.random() * themes.length >> 0];
|
||||
document.body.style['backgroundColor'] = theme[0];
|
||||
|
||||
bodies = [];
|
||||
elements = [];
|
||||
|
||||
createInstructions();
|
||||
|
||||
for (i = 0; i < 10; i++) {
|
||||
|
||||
createBall();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function onDocumentMouseDown() {
|
||||
|
||||
isMouseDown = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function onDocumentMouseUp() {
|
||||
|
||||
isMouseDown = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
function onDocumentMouseMove(event) {
|
||||
|
||||
mouse.x = event.clientX;
|
||||
mouse.y = event.clientY;
|
||||
}
|
||||
|
||||
function onDocumentDoubleClick() {
|
||||
|
||||
reset();
|
||||
}
|
||||
|
||||
function onDocumentTouchStart(event) {
|
||||
|
||||
if (event.touches.length == 1) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
// Faking double click for touch devices
|
||||
|
||||
var now = new Date().getTime();
|
||||
|
||||
if (now - timeOfLastTouch < 250) {
|
||||
|
||||
reset();
|
||||
return;
|
||||
}
|
||||
|
||||
timeOfLastTouch = now;
|
||||
|
||||
mouse.x = event.touches[0].pageX;
|
||||
mouse.y = event.touches[0].pageY;
|
||||
isMouseDown = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onDocumentTouchMove(event) {
|
||||
|
||||
if (event.touches.length == 1) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
mouse.x = event.touches[0].pageX;
|
||||
mouse.y = event.touches[0].pageY;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onDocumentTouchEnd(event) {
|
||||
|
||||
if (event.touches.length == 0) {
|
||||
|
||||
event.preventDefault();
|
||||
isMouseDown = false;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onWindowDeviceOrientation(event) {
|
||||
|
||||
if (event.beta) {
|
||||
|
||||
gravity.x = Math.sin(event.gamma * Math.PI / 180);
|
||||
gravity.y = Math.sin((Math.PI / 4) + event.beta * Math.PI / 180);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function createInstructions() {
|
||||
|
||||
var size = 250;
|
||||
|
||||
var element = document.createElement('div');
|
||||
element.width = size;
|
||||
element.height = size;
|
||||
element.style.position = 'absolute';
|
||||
element.style.left = -200 + 'px';
|
||||
element.style.top = -200 + 'px';
|
||||
element.style.cursor = "default";
|
||||
|
||||
canvas.appendChild(element);
|
||||
elements.push(element);
|
||||
|
||||
var circle = document.createElement('canvas');
|
||||
circle.width = size;
|
||||
circle.height = size;
|
||||
|
||||
var graphics = circle.getContext('2d');
|
||||
|
||||
graphics.fillStyle = theme[3];
|
||||
graphics.beginPath();
|
||||
graphics.arc(size * .5, size * .5, size * .5, 0, PI2, true);
|
||||
graphics.closePath();
|
||||
graphics.fill();
|
||||
|
||||
element.appendChild(circle);
|
||||
|
||||
text = document.createElement('div');
|
||||
text.onSelectStart = null;
|
||||
var flinks = JSON.parse(localStorage.getItem('logos'))
|
||||
text.innerHTML = '<span class="gdtx" style="color:' + theme[0] + '"><img src=' + (flinks[Math.floor(Math.random() * flinks.length)]) + '></img></span>';
|
||||
text.style.color = theme[1];
|
||||
text.style.position = 'absolute';
|
||||
text.style.left = '0px';
|
||||
text.style.top = '0px';
|
||||
text.style.fontFamily = 'Georgia';
|
||||
text.style.textAlign = 'center';
|
||||
element.appendChild(text);
|
||||
|
||||
text.style.left = ((250 - text.clientWidth) / 2) + 'px';
|
||||
text.style.top = ((250 - text.clientHeight) / 2) + 'px';
|
||||
|
||||
var b2body = new b2BodyDef();
|
||||
|
||||
var circle = new b2CircleDef();
|
||||
circle.radius = size / 2;
|
||||
circle.density = 1;
|
||||
circle.friction = 0.3;
|
||||
circle.restitution = 0.3;
|
||||
b2body.AddShape(circle);
|
||||
b2body.userData = { element: element };
|
||||
|
||||
b2body.position.Set(Math.random() * stage[2], Math.random() * -200);
|
||||
b2body.linearVelocity.Set(Math.random() * 400 - 200, Math.random() * 400 - 200);
|
||||
bodies.push(world.CreateBody(b2body));
|
||||
}
|
||||
|
||||
function createBall(x, y) {
|
||||
|
||||
var x = x || Math.random() * stage[2];
|
||||
var y = y || Math.random() * -200;
|
||||
|
||||
var size = (Math.random() * 100 >> 0) + 20;
|
||||
|
||||
var element = document.createElement("canvas");
|
||||
element.width = size;
|
||||
element.height = size;
|
||||
element.style.position = 'absolute';
|
||||
element.style.left = -200 + 'px';
|
||||
element.style.top = -200 + 'px';
|
||||
element.style.WebkitTransform = 'translateZ(0)';
|
||||
element.style.MozTransform = 'translateZ(0)';
|
||||
element.style.OTransform = 'translateZ(0)';
|
||||
element.style.msTransform = 'translateZ(0)';
|
||||
element.style.transform = 'translateZ(0)';
|
||||
|
||||
var graphics = element.getContext("2d");
|
||||
|
||||
var num_circles = Math.random() * 10 >> 0;
|
||||
|
||||
for (var i = size; i > 0; i -= (size / num_circles)) {
|
||||
|
||||
graphics.fillStyle = theme[(Math.random() * 4 >> 0) + 1];
|
||||
graphics.beginPath();
|
||||
graphics.arc(size * .5, size * .5, i * .5, 0, PI2, true);
|
||||
graphics.closePath();
|
||||
graphics.fill();
|
||||
}
|
||||
|
||||
canvas.appendChild(element);
|
||||
|
||||
elements.push(element);
|
||||
|
||||
var b2body = new b2BodyDef();
|
||||
|
||||
var circle = new b2CircleDef();
|
||||
circle.radius = size >> 1;
|
||||
circle.density = 1;
|
||||
circle.friction = 0.3;
|
||||
circle.restitution = 0.3;
|
||||
b2body.AddShape(circle);
|
||||
b2body.userData = { element: element };
|
||||
|
||||
b2body.position.Set(x, y);
|
||||
b2body.linearVelocity.Set(Math.random() * 400 - 200, Math.random() * 400 - 200);
|
||||
bodies.push(world.CreateBody(b2body));
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function loop() {
|
||||
|
||||
if (getBrowserDimensions()) {
|
||||
|
||||
setWalls();
|
||||
|
||||
}
|
||||
|
||||
delta[0] += (0 - delta[0]) * .5;
|
||||
delta[1] += (0 - delta[1]) * .5;
|
||||
|
||||
world.m_gravity.x = gravity.x * 350 + delta[0];
|
||||
world.m_gravity.y = gravity.y * 350 + delta[1];
|
||||
|
||||
mouseDrag();
|
||||
world.Step(timeStep, iterations);
|
||||
|
||||
for (i = 0; i < bodies.length; i++) {
|
||||
|
||||
var body = bodies[i];
|
||||
var element = elements[i];
|
||||
|
||||
element.style.left = (body.m_position0.x - (element.width >> 1)) + 'px';
|
||||
element.style.top = (body.m_position0.y - (element.height >> 1)) + 'px';
|
||||
|
||||
if (element.tagName == 'DIV') {
|
||||
|
||||
var style = 'rotate(' + (body.m_rotation0 * 57.2957795) + 'deg) translateZ(0)';
|
||||
text.style.WebkitTransform = style;
|
||||
text.style.MozTransform = style;
|
||||
text.style.OTransform = style;
|
||||
text.style.msTransform = style;
|
||||
text.style.transform = style;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// .. BOX2D UTILS
|
||||
|
||||
function createBox(world, x, y, width, height, fixed) {
|
||||
|
||||
if (typeof (fixed) == 'undefined') {
|
||||
|
||||
fixed = true;
|
||||
|
||||
}
|
||||
|
||||
var boxSd = new b2BoxDef();
|
||||
|
||||
if (!fixed) {
|
||||
|
||||
boxSd.density = 1.0;
|
||||
|
||||
}
|
||||
|
||||
boxSd.extents.Set(width, height);
|
||||
|
||||
var boxBd = new b2BodyDef();
|
||||
boxBd.AddShape(boxSd);
|
||||
boxBd.position.Set(x, y);
|
||||
|
||||
return world.CreateBody(boxBd);
|
||||
|
||||
}
|
||||
|
||||
function mouseDrag() {
|
||||
// mouse press
|
||||
if (createMode) {
|
||||
|
||||
createBall(mouse.x, mouse.y);
|
||||
|
||||
} else if (isMouseDown && !mouseJoint) {
|
||||
|
||||
var body = getBodyAtMouse();
|
||||
|
||||
if (body) {
|
||||
|
||||
var md = new b2MouseJointDef();
|
||||
md.body1 = world.m_groundBody;
|
||||
md.body2 = body;
|
||||
md.target.Set(mouse.x, mouse.y);
|
||||
md.maxForce = 30000 * body.m_mass;
|
||||
// md.timeStep = timeStep;
|
||||
mouseJoint = world.CreateJoint(md);
|
||||
body.WakeUp();
|
||||
|
||||
} else {
|
||||
|
||||
createMode = true;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// mouse release
|
||||
if (!isMouseDown) {
|
||||
|
||||
createMode = false;
|
||||
destroyMode = false;
|
||||
|
||||
if (mouseJoint) {
|
||||
|
||||
world.DestroyJoint(mouseJoint);
|
||||
mouseJoint = null;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// mouse move
|
||||
if (mouseJoint) {
|
||||
|
||||
var p2 = new b2Vec2(mouse.x, mouse.y);
|
||||
mouseJoint.SetTarget(p2);
|
||||
}
|
||||
}
|
||||
|
||||
function getBodyAtMouse() {
|
||||
|
||||
// Make a small box.
|
||||
var mousePVec = new b2Vec2();
|
||||
mousePVec.Set(mouse.x, mouse.y);
|
||||
|
||||
var aabb = new b2AABB();
|
||||
aabb.minVertex.Set(mouse.x - 1, mouse.y - 1);
|
||||
aabb.maxVertex.Set(mouse.x + 1, mouse.y + 1);
|
||||
|
||||
// Query the world for overlapping shapes.
|
||||
var k_maxCount = 10;
|
||||
var shapes = new Array();
|
||||
var count = world.Query(aabb, shapes, k_maxCount);
|
||||
var body = null;
|
||||
|
||||
for (var i = 0; i < count; ++i) {
|
||||
|
||||
if (shapes[i].m_body.IsStatic() == false) {
|
||||
|
||||
if (shapes[i].TestPoint(mousePVec)) {
|
||||
|
||||
body = shapes[i].m_body;
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return body;
|
||||
|
||||
}
|
||||
|
||||
function setWalls() {
|
||||
|
||||
if (wallsSetted) {
|
||||
|
||||
world.DestroyBody(walls[0]);
|
||||
world.DestroyBody(walls[1]);
|
||||
world.DestroyBody(walls[2]);
|
||||
world.DestroyBody(walls[3]);
|
||||
|
||||
walls[0] = null;
|
||||
walls[1] = null;
|
||||
walls[2] = null;
|
||||
walls[3] = null;
|
||||
}
|
||||
|
||||
walls[0] = createBox(world, stage[2] / 2, - wall_thickness, stage[2], wall_thickness);
|
||||
walls[1] = createBox(world, stage[2] / 2, stage[3] + wall_thickness, stage[2], wall_thickness);
|
||||
walls[2] = createBox(world, - wall_thickness, stage[3] / 2, wall_thickness, stage[3]);
|
||||
walls[3] = createBox(world, stage[2] + wall_thickness, stage[3] / 2, wall_thickness, stage[3]);
|
||||
|
||||
wallsSetted = true;
|
||||
|
||||
}
|
||||
|
||||
// BROWSER DIMENSIONS
|
||||
|
||||
function getBrowserDimensions() {
|
||||
|
||||
var changed = false;
|
||||
|
||||
if (stage[0] != window.screenX) {
|
||||
|
||||
delta[0] = (window.screenX - stage[0]) * 50;
|
||||
stage[0] = window.screenX;
|
||||
changed = true;
|
||||
|
||||
}
|
||||
|
||||
if (stage[1] != window.screenY) {
|
||||
|
||||
delta[1] = (window.screenY - stage[1]) * 50;
|
||||
stage[1] = window.screenY;
|
||||
changed = true;
|
||||
|
||||
}
|
||||
|
||||
if (stage[2] != window.innerWidth) {
|
||||
|
||||
stage[2] = window.innerWidth;
|
||||
changed = true;
|
||||
|
||||
}
|
||||
|
||||
if (stage[3] != window.innerHeight) {
|
||||
stage[3] = window.innerHeight;
|
||||
changed = true;
|
||||
|
||||
}
|
||||
return changed;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,176 +0,0 @@
|
|||
var Class = {
|
||||
create: function () {
|
||||
var parent = null, properties = $A(arguments);
|
||||
if (Object.isFunction(properties[0]))
|
||||
parent = properties.shift();
|
||||
|
||||
function klass() {
|
||||
this.initialize.apply(this, arguments);
|
||||
}
|
||||
|
||||
Object.extend(klass, Class.Methods);
|
||||
klass.superclass = parent;
|
||||
klass.subclasses = [];
|
||||
|
||||
if (parent) {
|
||||
var subclass = function () { };
|
||||
subclass.prototype = parent.prototype;
|
||||
klass.prototype = new subclass;
|
||||
parent.subclasses.push(klass);
|
||||
}
|
||||
|
||||
for (var i = 0; i < properties.length; i++)
|
||||
klass.addMethods(properties[i]);
|
||||
|
||||
if (!klass.prototype.initialize)
|
||||
klass.prototype.initialize = this.emptyFunction;
|
||||
|
||||
klass.prototype.constructor = klass;
|
||||
|
||||
return klass;
|
||||
},
|
||||
emptyFunction: function () { },
|
||||
|
||||
};
|
||||
|
||||
Class.Methods = {
|
||||
addMethods: function (source) {
|
||||
var ancestor = this.superclass && this.superclass.prototype;
|
||||
var properties = Object.keys(source);
|
||||
|
||||
if (!Object.keys({ toString: true }).length)
|
||||
properties.push("toString", "valueOf");
|
||||
|
||||
for (var i = 0, length = properties.length; i < length; i++) {
|
||||
var property = properties[i], value = source[property];
|
||||
if (ancestor && Object.isFunction(value) &&
|
||||
value.argumentNames().first() == "$super") {
|
||||
var method = value, value = Object.extend((function (m) {
|
||||
return function () { return ancestor[m].apply(this, arguments) };
|
||||
})(property).wrap(method), {
|
||||
valueOf: function () { return method },
|
||||
toString: function () { return method.toString() }
|
||||
});
|
||||
}
|
||||
this.prototype[property] = value;
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
Object.extend = function (destination, source) {
|
||||
for (var property in source)
|
||||
destination[property] = source[property];
|
||||
return destination;
|
||||
};
|
||||
|
||||
Object.extend(Object, {
|
||||
inspect: function (object) {
|
||||
try {
|
||||
if (Object.isUndefined(object)) return 'undefined';
|
||||
if (object === null) return 'null';
|
||||
return object.inspect ? object.inspect() : String(object);
|
||||
} catch (e) {
|
||||
if (e instanceof RangeError) return '...';
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
|
||||
toJSON: function (object) {
|
||||
var type = typeof object;
|
||||
switch (type) {
|
||||
case 'undefined':
|
||||
case 'function':
|
||||
case 'unknown': return;
|
||||
case 'boolean': return object.toString();
|
||||
}
|
||||
|
||||
if (object === null) return 'null';
|
||||
if (object.toJSON) return object.toJSON();
|
||||
if (Object.isElement(object)) return;
|
||||
|
||||
var results = [];
|
||||
for (var property in object) {
|
||||
var value = Object.toJSON(object[property]);
|
||||
if (!Object.isUndefined(value))
|
||||
results.push(property.toJSON() + ': ' + value);
|
||||
}
|
||||
|
||||
return '{' + results.join(', ') + '}';
|
||||
},
|
||||
|
||||
toQueryString: function (object) {
|
||||
return $H(object).toQueryString();
|
||||
},
|
||||
|
||||
toHTML: function (object) {
|
||||
return object && object.toHTML ? object.toHTML() : String.interpret(object);
|
||||
},
|
||||
|
||||
keys: function (object) {
|
||||
var keys = [];
|
||||
for (var property in object)
|
||||
keys.push(property);
|
||||
return keys;
|
||||
},
|
||||
|
||||
values: function (object) {
|
||||
var values = [];
|
||||
for (var property in object)
|
||||
values.push(object[property]);
|
||||
return values;
|
||||
},
|
||||
|
||||
clone: function (object) {
|
||||
return Object.extend({}, object);
|
||||
},
|
||||
|
||||
isElement: function (object) {
|
||||
return object && object.nodeType == 1;
|
||||
},
|
||||
|
||||
isArray: function (object) {
|
||||
return object != null && typeof object == "object" &&
|
||||
'splice' in object && 'join' in object;
|
||||
},
|
||||
|
||||
isHash: function (object) {
|
||||
return object instanceof Hash;
|
||||
},
|
||||
|
||||
isFunction: function (object) {
|
||||
return typeof object == "function";
|
||||
},
|
||||
|
||||
isString: function (object) {
|
||||
return typeof object == "string";
|
||||
},
|
||||
|
||||
isNumber: function (object) {
|
||||
return typeof object == "number";
|
||||
},
|
||||
|
||||
isUndefined: function (object) {
|
||||
return typeof object == "undefined";
|
||||
}
|
||||
});
|
||||
|
||||
function $A(iterable) {
|
||||
if (!iterable) return [];
|
||||
if (iterable.toArray) return iterable.toArray();
|
||||
var length = iterable.length || 0, results = new Array(length);
|
||||
while (length--) results[length] = iterable[length];
|
||||
return results;
|
||||
}
|
||||
|
||||
if (WebKit = navigator.userAgent.indexOf('AppleWebKit/') > -1) {
|
||||
$A = function (iterable) {
|
||||
if (!iterable) return [];
|
||||
if (!(Object.isFunction(iterable) && iterable == '[object NodeList]') &&
|
||||
iterable.toArray) return iterable.toArray();
|
||||
var length = iterable.length || 0, results = new Array(length);
|
||||
while (length--) results[length] = iterable[length];
|
||||
return results;
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
var Class={create:function(){var parent=null,properties=$A(arguments);function klass(){this.initialize.apply(this,arguments)}if(Object.isFunction(properties[0])&&(parent=properties.shift()),Object.extend(klass,Class.Methods),klass.superclass=parent,klass.subclasses=[],parent){var subclass=function(){};subclass.prototype=parent.prototype,klass.prototype=new subclass,parent.subclasses.push(klass)}for(var i=0;i<properties.length;i++)klass.addMethods(properties[i]);return klass.prototype.initialize||(klass.prototype.initialize=this.emptyFunction),klass.prototype.constructor=klass,klass},emptyFunction:function(){}};function $A(iterable){if(!iterable)return[];if(iterable.toArray)return iterable.toArray();for(var length=iterable.length||0,results=new Array(length);length--;)results[length]=iterable[length];return results}Class.Methods={addMethods:function(source){var ancestor=this.superclass&&this.superclass.prototype,properties=Object.keys(source);Object.keys({toString:!0}).length||properties.push("toString","valueOf");for(var i=0,length=properties.length;i<length;i++){var property=properties[i],value=source[property];if(ancestor&&Object.isFunction(value)&&"$super"==value.argumentNames().first()){var method=value;value=Object.extend(function(m){return function(){return ancestor[m].apply(this,arguments)}}(property).wrap(method),{valueOf:function(){return method},toString:function(){return method.toString()}})}this.prototype[property]=value}return this}},Object.extend=function(destination,source){for(var property in source)destination[property]=source[property];return destination},Object.extend(Object,{inspect:function(object){try{return Object.isUndefined(object)?"undefined":null===object?"null":object.inspect?object.inspect():String(object)}catch(e){if(e instanceof RangeError)return"...";throw e}},toJSON:function(object){switch(typeof object){case"undefined":case"function":case"unknown":return;case"boolean":return object.toString()}if(null===object)return"null";if(object.toJSON)return object.toJSON();if(!Object.isElement(object)){var results=[];for(var property in object){var value=Object.toJSON(object[property]);Object.isUndefined(value)||results.push(property.toJSON()+": "+value)}return"{"+results.join(", ")+"}"}},toQueryString:function(object){return $H(object).toQueryString()},toHTML:function(object){return object&&object.toHTML?object.toHTML():String.interpret(object)},keys:function(object){var keys=[];for(var property in object)keys.push(property);return keys},values:function(object){var values=[];for(var property in object)values.push(object[property]);return values},clone:function(object){return Object.extend({},object)},isElement:function(object){return object&&1==object.nodeType},isArray:function(object){return null!=object&&"object"==typeof object&&"splice"in object&&"join"in object},isHash:function(object){return object instanceof Hash},isFunction:function(object){return"function"==typeof object},isString:function(object){return"string"==typeof object},isNumber:function(object){return"number"==typeof object},isUndefined:function(object){return void 0===object}}),(WebKit=navigator.userAgent.indexOf("AppleWebKit/")>-1)&&($A=function(iterable){if(!iterable)return[];if((!Object.isFunction(iterable)||"[object NodeList]"!=iterable)&&iterable.toArray)return iterable.toArray();for(var length=iterable.length||0,results=new Array(length);length--;)results[length]=iterable[length];return results});
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
Vue.config.devtools = true;
|
||||
|
||||
Vue.component("card", {
|
||||
template: `
|
||||
<div class="card-wrap"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
ref="card">
|
||||
<div class="card"
|
||||
:style="cardStyle">
|
||||
<div class="card-bg" :style="[cardBgTransform, cardBgImage]"></div>
|
||||
<div class="card-info">
|
||||
<slot name="header"></slot>
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
mounted() {
|
||||
this.width = this.$refs.card.offsetWidth;
|
||||
this.height = this.$refs.card.offsetHeight;
|
||||
},
|
||||
props: ["dataImage"],
|
||||
data: () => ({
|
||||
width: 0,
|
||||
height: 0,
|
||||
mouseX: 0,
|
||||
mouseY: 0,
|
||||
mouseLeaveDelay: null
|
||||
}),
|
||||
|
||||
computed: {
|
||||
mousePX() {
|
||||
return this.mouseX / this.width;
|
||||
},
|
||||
mousePY() {
|
||||
return this.mouseY / this.height;
|
||||
},
|
||||
cardStyle() {
|
||||
const rX = this.mousePX * 30;
|
||||
const rY = this.mousePY * -30;
|
||||
return {
|
||||
transform: `rotateY(${rX}deg) rotateX(${rY}deg)`
|
||||
};
|
||||
},
|
||||
cardBgTransform() {
|
||||
const tX = this.mousePX * -40;
|
||||
const tY = this.mousePY * -40;
|
||||
return {
|
||||
transform: `translateX(${tX}px) translateY(${tY}px)`
|
||||
};
|
||||
},
|
||||
cardBgImage() {
|
||||
return {
|
||||
backgroundImage: `url(${this.dataImage})`
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMouseMove(e) {
|
||||
this.mouseX = e.pageX - this.$refs.card.offsetLeft - this.width / 2;
|
||||
this.mouseY = e.pageY - this.$refs.card.offsetTop - this.height / 2;
|
||||
},
|
||||
handleMouseEnter() {
|
||||
clearTimeout(this.mouseLeaveDelay);
|
||||
},
|
||||
handleMouseLeave() {
|
||||
this.mouseLeaveDelay = setTimeout(() => {
|
||||
this.mouseX = 0;
|
||||
this.mouseY = 0;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var app = new Vue({
|
||||
el: "#lib-cards"
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
Vue.config.devtools=!0,Vue.component("card",{template:'\n <div class="card-wrap"\n @mousemove="handleMouseMove"\n @mouseenter="handleMouseEnter"\n @mouseleave="handleMouseLeave"\n ref="card">\n <div class="card"\n :style="cardStyle">\n <div class="card-bg" :style="[cardBgTransform, cardBgImage]"></div>\n <div class="card-info">\n <slot name="header"></slot>\n <slot name="content"></slot>\n </div>\n </div>\n </div>',mounted(){this.width=this.$refs.card.offsetWidth,this.height=this.$refs.card.offsetHeight},props:["dataImage"],data:()=>({width:0,height:0,mouseX:0,mouseY:0,mouseLeaveDelay:null}),computed:{mousePX(){return this.mouseX/this.width},mousePY(){return this.mouseY/this.height},cardStyle(){return{transform:`rotateY(${30*this.mousePX}deg) rotateX(${-30*this.mousePY}deg)`}},cardBgTransform(){return{transform:`translateX(${-40*this.mousePX}px) translateY(${-40*this.mousePY}px)`}},cardBgImage(){return{backgroundImage:`url(${this.dataImage})`}}},methods:{handleMouseMove(e){this.mouseX=e.pageX-this.$refs.card.offsetLeft-this.width/2,this.mouseY=e.pageY-this.$refs.card.offsetTop-this.height/2},handleMouseEnter(){clearTimeout(this.mouseLeaveDelay)},handleMouseLeave(){this.mouseLeaveDelay=setTimeout((()=>{this.mouseX=0,this.mouseY=0}),1e3)}}});var app=new Vue({el:"#lib-cards"});
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
|
||||
#article-container .code-toolbar .toolbar .custom-item>i {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
margin-left: 8px;
|
||||
-webkit-transition: -webkit-transform .2s;
|
||||
transition: transform .2s;
|
||||
transition: transform .2s,-webkit-transform .2s
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,140 +0,0 @@
|
|||
class EasyDanmaku {
|
||||
constructor(t) {
|
||||
this.container = this.checkParams(t), this.wrapperStyle = t.wrapperStyle || null, this.line = t.line || 10, this.speed = t.speed || 5, this.runtime = t.runtime || 10, this.colourful = t.colourful || !1, this.loop = t.loop || !1, this.hover = t.hover || !1, this.coefficient = t.coefficient || 1.38, this.originIndex = 0, this.originList = null, this.offsetValue = this.container.offsetHeight / this.line, this.vipIndex = 0, this.overflowArr = [], this.clearIng = !1, this.cleartimer = null, this.init(), this.handleEvents(t)
|
||||
}
|
||||
handleEvents(t) {
|
||||
this.onComplete = t.onComplete || null, this.onHover = t.onHover || null
|
||||
}
|
||||
init() {
|
||||
this.runstatus = 1, this.aisle = [], this.container.style.overflow = "hidden", this.hover && this.handleMouseHover(), "relative" !== Utils.getStyle(this.container, "position") && "fixed" !== Utils.getStyle(this.container, "position") && (this.container.style.position = "relative");
|
||||
for (let t = 0; t < this.line; t++) this.aisle.push({
|
||||
normalRow: !0,
|
||||
vipRow: !0
|
||||
})
|
||||
}
|
||||
checkParams(t) {
|
||||
if (!document.querySelector(t.el)) throw `Could not find the ${t.el} element`;
|
||||
if (t.wrapperStyle && "string" != typeof t.wrapperStyle) throw "The type accepted by the wrapperStyle parameter is string";
|
||||
if (t.line && "number" != typeof t.line) throw "The type accepted by the line parameter is number";
|
||||
if (t.speed && "number" != typeof t.speed) throw "The type accepted by the speed parameter is number";
|
||||
if (t.colourful && "boolean" != typeof t.colourful) throw "The type accepted by the colourful parameter is boolean";
|
||||
if (t.runtime && "number" != typeof t.runtime) throw "The type accepted by the runtime parameter is number";
|
||||
if (t.loop && "boolean" != typeof t.loop) throw "The type accepted by the loop parameter is boolean";
|
||||
if (t.coefficient && "number" != typeof t.coefficient) throw "The type accepted by the coefficient parameter is number";
|
||||
if (t.hover && "boolean" != typeof t.hover) throw "The type accepted by the hover parameter is boolean";
|
||||
if (t.onComplete && "function" != typeof t.onComplete) throw "The type accepted by the onComplete parameter is function";
|
||||
if (t.onHover && "function" != typeof t.onHover) throw "The type accepted by the onHover parameter is function";
|
||||
return document.querySelector(t.el)
|
||||
}
|
||||
send(t, e = null, i = null) {
|
||||
if (0 == this.runstatus) return void this.overflowArr.push({
|
||||
content: t,
|
||||
normalClass: e
|
||||
});
|
||||
if (t.length < 1) return;
|
||||
let n = document.createElement("div"),
|
||||
r = 0,
|
||||
s = this.speed,
|
||||
o = null,
|
||||
l = 0;
|
||||
n.innerHTML = t, n.style.display = "inline-block", n.classList.add("default-style"), (e || this.wrapperStyle) && n.classList.add(e || this.wrapperStyle),
|
||||
function a() {
|
||||
if (r = Math.round(Math.random() * (this.line - 1)), this.aisle[r].normalRow) {
|
||||
this.aisle[r].normalRow = !1, this.container.appendChild(n), s += n.offsetWidth / n.parentNode.offsetWidth * 2, n.style.cssText = `\n text-align:center;\n min-width:130px;\n will-change: transform;\n position:absolute;\n right: -${n.offsetWidth+130}px;\n transition: transform ${s}s linear;\n transform: translateX(-${n.parentNode.offsetWidth+n.offsetWidth+130}px);\n top: ${r*this.offsetValue}px;\n line-height:${this.offsetValue}px;\n color:${this.colourful?"#"+("00000"+(16777216*Math.random()<<0).toString(16)).substr(-6):void 0}\n `;
|
||||
let t = (n.parentNode.offsetWidth + n.offsetWidth) / s / 60;
|
||||
o = setInterval((() => {
|
||||
l += t, l > n.offsetWidth * this.coefficient && (this.aisle[r].normalRow = !0, clearInterval(o))
|
||||
}), 16.66), setTimeout((() => {
|
||||
1 != n.getAttribute("relieveDel") && (i && i({
|
||||
runtime: s,
|
||||
target: n,
|
||||
width: n.offsetWidth
|
||||
}), n.remove())
|
||||
}), 1e3 * s)
|
||||
} else {
|
||||
this.aisle.some((t => !0 === t.normalRow)) ? a.call(this) : (() => {
|
||||
this.overflowArr.push({
|
||||
content: t,
|
||||
normalClass: e
|
||||
}), this.clearIng || this.clearOverflowDanmakuArray()
|
||||
})()
|
||||
}
|
||||
}.call(this)
|
||||
}
|
||||
batchSend(t, e = !1, i = null) {
|
||||
let n = this.runtime || 1.23 * t.length;
|
||||
this.originList = t, this.hasAvatar = e, this.normalClass = i;
|
||||
let r = setInterval((() => {
|
||||
this.originIndex > t.length - 1 ? (clearInterval(r), this.originIndex = 0, this.onComplete && this.onComplete(), this.loop && this.batchSend(this.originList, e, i)) : (e ? this.send(`<img src=${t[this.originIndex].avatar}>\n <a href=${t[this.originIndex].href} target='_blank'> <p>${t[this.originIndex].content}</p> </a>\n `, i || this.wrapperStyle) : this.send(t[this.originIndex], i || this.wrapperStyle), this.originIndex++)
|
||||
}), n / t.length * 1e3)
|
||||
}
|
||||
centeredSend(t, e, i = 3e3, n = null) {
|
||||
let r = document.createElement("div"),
|
||||
s = 0;
|
||||
r.innerHTML = t, (e || this.wrapperStyle) && r.classList.add(e || this.wrapperStyle),
|
||||
function t() {
|
||||
if (this.aisle[s].vipRow) this.container.appendChild(r), r.style.cssText = `\n position:absolute;\n left:50%;\n transform:translateX(-50%);\n top: ${s*this.offsetValue}px;\n `, this.aisle[s].vipRow = !1, setTimeout((() => {
|
||||
n && n({
|
||||
duration: i,
|
||||
target: r,
|
||||
width: r.offsetWidth
|
||||
}), r.remove(), this.aisle[s].vipRow = !0
|
||||
}), i);
|
||||
else {
|
||||
if (s++, s > this.line - 1) return;
|
||||
t.call(this)
|
||||
}
|
||||
}.call(this)
|
||||
}
|
||||
play() {
|
||||
const t = this.container.children;
|
||||
for (let e = 0; e < t.length; e++) this.controlDanmakurunStatus(t[e], 1);
|
||||
this.runstatus = 1, 0 !== this.overflowArr.length && this.clearOverflowDanmakuArray()
|
||||
}
|
||||
pause() {
|
||||
const t = this.container.children;
|
||||
for (let e = 0; e < t.length; e++) this.controlDanmakurunStatus(t[e], 0);
|
||||
this.runstatus = 0
|
||||
}
|
||||
controlDanmakurunStatus(t, e) {
|
||||
const i = 0,
|
||||
n = /-(\S*),/;
|
||||
if (e === 1) {
|
||||
clearTimeout(t.timer);
|
||||
const e = Utils.getStyle(t, "transform").match(n)[1];
|
||||
t.style.transition = `transform ${this.speed}s linear`, t.style.transform = `translateX(-${t.parentNode.offsetWidth+parseInt(e)+t.offsetWidth+130}px)`, t.timer = setTimeout((() => {
|
||||
t.remove()
|
||||
}), 1e3 * this.speed)
|
||||
} else if (e === i) {
|
||||
clearTimeout(t.timer);
|
||||
const e = Utils.getStyle(t, "transform").match(n)[1];
|
||||
t.style.transition = "transform 0s linear", t.style.transform = `translateX(-${e}px)`, t.setAttribute("relieveDel", 1)
|
||||
}
|
||||
}
|
||||
handleMouseHover() {
|
||||
Utils.eventDelegation(this.container, "default-style", "mouseover", (t => {
|
||||
t.style["z-index"] = 1e3, this.controlDanmakurunStatus(t, 0), this.onHover && this.onHover(t)
|
||||
})), Utils.eventDelegation(this.container, "default-style", "mouseout", (t => {
|
||||
t.style.zIndex = 1, 1 == this.runstatus && this.controlDanmakurunStatus(t, 1)
|
||||
}))
|
||||
}
|
||||
clearOverflowDanmakuArray() {
|
||||
clearInterval(this.cleartimer), this.clearIng = !0;
|
||||
let t = 0;
|
||||
this.cleartimer = setInterval((() => {
|
||||
0 === this.overflowArr.length ? (t++, t > 20 && (clearInterval(this.cleartimer), this.clearIng = !1)) : (this.send(this.overflowArr[0].content, this.overflowArr[0].normalClass || this.wrapperStyle), this.overflowArr.shift())
|
||||
}), 500)
|
||||
}
|
||||
}
|
||||
class Utils {
|
||||
static getStyle(t, e) {
|
||||
return window.getComputedStyle(t, null)[e]
|
||||
}
|
||||
static eventDelegation(t, e, i, n) {
|
||||
t.addEventListener(i, (t => {
|
||||
try {
|
||||
t.target.className.includes(e) && n(t.target)
|
||||
} catch (t) {}
|
||||
}))
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -390,3 +390,13 @@ ul li {
|
|||
#libCategories .card-wrap:hover .card-info:after {
|
||||
width: 300%
|
||||
}
|
||||
|
||||
.fa-sharp, .fa-solid{
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: var(--fa-display,inline-block);
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto
|
||||
}
|
||||
|
|
@ -3106,11 +3106,11 @@ ul {
|
|||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
#article-container a:not(.rss-plan-item) {
|
||||
#article-container a {
|
||||
color: rgb(48, 122, 246);
|
||||
}
|
||||
|
||||
#article-container a:not(.rss-plan-item):hover {
|
||||
#article-container a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -11450,7 +11450,7 @@ details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) > summary
|
|||
}
|
||||
|
||||
/* 文章中的超链接 */
|
||||
#article-container a:not(.rss-plan-item) {
|
||||
#article-container a {
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid var(--heo-lighttext);
|
||||
color: var(--heo-fontcolor);
|
||||
|
|
@ -11459,7 +11459,7 @@ details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) > summary
|
|||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
#article-container a:not(.fancybox):not(.rss-plan-item):hover {
|
||||
#article-container a:not(.fancybox):hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid var(--heo-none);
|
||||
color: var(--heo-white);
|
||||
|
|
@ -11694,8 +11694,8 @@ blockquote p {
|
|||
|
||||
/* 文章内标题 */
|
||||
#article-container .headerlink::before {
|
||||
content: "\f0c1";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\e621";
|
||||
font-family: haofont!important;
|
||||
}
|
||||
|
||||
#article-container .headerlink {
|
||||
|
|
@ -17461,6 +17461,38 @@ img.rss-plan-icon {
|
|||
opacity: .6
|
||||
}
|
||||
|
||||
#article-container a:not(.fancybox).rss-plan-item:hover{
|
||||
text-decoration: none;
|
||||
border-bottom: 0px;
|
||||
color: rgb(48 122 246 / 0%);
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
}
|
||||
|
||||
#article-container a:not(.fancybox).rss-plan-item.rss-plan-wechat:hover {
|
||||
background: #27c125;
|
||||
}
|
||||
|
||||
#article-container a:not(.fancybox).rss-plan-item.rss-plan-rss:hover {
|
||||
background: var(--heo-orange);
|
||||
}
|
||||
|
||||
#article-container a:not(.fancybox).rss-plan-item.rss-plan-mail:hover {
|
||||
background: var(--heo-blue);
|
||||
}
|
||||
|
||||
|
||||
#article-container a.rss-plan-item{
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
border-bottom: 0px;
|
||||
padding: 0px;
|
||||
border-radius: 12px;
|
||||
color: rgb(48 122 246 / 0%);
|
||||
}
|
||||
|
||||
|
||||
/* 分页搜索框 */
|
||||
.pagination input {
|
||||
width: 40px;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
</div>
|
||||
<div class="js-pjax">
|
||||
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
|
||||
<script th:src="${assets_link + '/libs/no3d/no3d.js'}"></script>
|
||||
<script th:src="${assets_link + '/libs/no3d/no3d.min.js'}"></script>
|
||||
</div>
|
||||
</th:block>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,9 +28,10 @@
|
|||
|
||||
<div class="equipment-item-content-item" th:each="equipment : ${equipmentList}">
|
||||
<div class="equipment-item-content-item-cover">
|
||||
<img class="equipment-item-content-item-image entered loaded"
|
||||
<img class="equipment-item-content-item-image"
|
||||
th:alt="${equipment.name}"
|
||||
th:src="${equipment.img}">
|
||||
th:src="${isLazyload ? loadingImg : equipment.img}"
|
||||
th:data-lazy-src="${ isLazyload ? equipment.img : ''}">
|
||||
</div>
|
||||
<div class="equipment-item-content-item-info">
|
||||
<div class="equipment-item-content-item-name"
|
||||
|
|
|
|||
|
|
@ -3,13 +3,11 @@
|
|||
<th:block th:fragment="bangumi-item(spec)">
|
||||
<div class="bangumi-item">
|
||||
<div class="bangumi-picture">
|
||||
<a th:href="${spec.cover}" data-fancybox="gallery" data-caption=""
|
||||
th:data-thumb="${spec.cover}">
|
||||
<img th:src="${spec.cover}" th:data-lazy-src="${spec.cover}"
|
||||
<img
|
||||
th:src="${isLazyload ? loadingImg : spec.cover}"
|
||||
th:data-lazy-src="${ isLazyload ? spec.cover : ''}"
|
||||
referrerpolicy="no-referrer" width="110"
|
||||
style="width:110px;margin:20px auto;" data-ll-status="loaded"
|
||||
class="entered loaded">
|
||||
</a>
|
||||
style="width:110px;margin:20px auto;">
|
||||
</div>
|
||||
<div class="bangumi-info">
|
||||
<div class="bangumi-title">
|
||||
|
|
|
|||
|
|
@ -24,11 +24,17 @@
|
|||
<a class="tags-group-icon" target="_blank" th:href="${linkOdd.spec.url}"
|
||||
th:title="${linkOdd.spec.displayName}"
|
||||
th:with="linkOdd = ${group.links.get(iterStat.index - 1)}">
|
||||
<img th:src="@{${linkOdd.spec.logo}}" th:title="${linkOdd.spec.displayName}">
|
||||
<img th:with=" img = @{${linkOdd.spec.logo}}"
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
th:title="${linkOdd.spec.displayName}">
|
||||
</a>
|
||||
<a class="tags-group-icon" target="_blank" th:href="${linkEven.spec.url}"
|
||||
th:title="${linkEven.spec.displayName}" th:with="linkEven = ${link}">
|
||||
<img th:src="@{${linkEven.spec.logo}}" th:title="${linkEven.spec.displayName}">
|
||||
<img th:with="img = @{${linkEven.spec.logo}}"
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
th:title="${linkEven.spec.displayName}">
|
||||
</a>
|
||||
</div>
|
||||
</th:block>
|
||||
|
|
@ -87,14 +93,19 @@
|
|||
|
||||
<a class="img" target="_blank" th:href="${link.spec.url}" th:title="${link.spec.displayName}">
|
||||
<img class="flink-avatar" style="pointer-events: none;" th:alt="${link.spec.displayName}"
|
||||
th:src="@{${#strings.isEmpty(#annotations.get(link, 'siteshot')) ? link.spec.logo : #annotations.get(link,'siteshot') }}">
|
||||
th:with="img = @{${#strings.isEmpty(#annotations.get(link, 'siteshot')) ? link.spec.logo : #annotations.get(link,'siteshot') }}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||||
</a>
|
||||
|
||||
<a class="info cf-friends-link" target="_blank" th:href="${link.spec.url}"
|
||||
th:title="${link.spec.displayName}">
|
||||
<div class="site-card-avatar">
|
||||
<img class="flink-avatar cf-friends-avatar" th:alt="${link.spec.displayName}"
|
||||
th:src="${link.spec.logo}">
|
||||
|
||||
th:src="${isLazyload ? loadingImg : link.spec.logo}"
|
||||
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
|
||||
</div>
|
||||
<div class="site-card-text">
|
||||
<span class="title cf-friends-name" th:text="${link.spec.displayName}"></span>
|
||||
|
|
@ -116,12 +127,16 @@
|
|||
<a class="cf-friends-link" rel="external nofollow" target="_blank" th:href="${link.spec.url}"
|
||||
th:title="${link.spec.displayName}">
|
||||
<img class="flink-avatar cf-friends-avatar" th:alt="${link.spec.displayName}"
|
||||
th:src="${link.spec.logo}">
|
||||
|
||||
th:src="${isLazyload ? loadingImg : link.spec.logo}"
|
||||
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
|
||||
<div class="flink-item-info">
|
||||
<span class="flink-item-name cf-friends-name" th:text="${link.spec.displayName}"></span>
|
||||
<span class="flink-item-desc" th:text="${link.spec.description}"
|
||||
th:title="${link.spec.description}"></span>
|
||||
<img th:src="${link.spec.logo}" class="entered loaded">
|
||||
<img
|
||||
th:src="${isLazyload ? loadingImg : link.spec.logo}"
|
||||
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -132,7 +147,10 @@
|
|||
<div class="flink-list-item" th:each="link : ${group.links}">
|
||||
<a class="cf-friends-link" rel="external nofollow" target="_blank" th:href="${link.spec.url}"
|
||||
th:title="${link.spec.displayName}">
|
||||
<img class="flink-avatar cf-friends-avatar entered loaded" th:src="${link.spec.logo}"
|
||||
<img class="flink-avatar cf-friends-avatar"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : link.spec.logo}"
|
||||
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
|
||||
th:alt="${link.spec.displayName}">
|
||||
<div class="img-alt is-center">[[${link.spec.displayName}]]</div>
|
||||
<div class="flink-item-info">
|
||||
|
|
|
|||
|
|
@ -45,8 +45,6 @@
|
|||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.0/css/all.min.css" media="all" onload="this.media='all'">
|
||||
|
||||
<!-- 代码块自动识别语言 -->
|
||||
<th:block th:replace="~{modules/common/code :: code}"/>
|
||||
<!-- 代码块-->
|
||||
|
|
@ -197,7 +195,7 @@
|
|||
postUpdate: '2022-11-04 20:08:15',
|
||||
copyright: undefined,
|
||||
lightbox: 'fancybox',
|
||||
lazyload: {enable: true, error: "/themes/theme-hao/assets/images/404s.gif"},
|
||||
lazyload: {enable: [[${theme.config.other.vanillaLazyload.enable}]], error: [[@{${theme.config.other.vanillaLazyload.errorImg}}]] },
|
||||
isFriendLinksInFooter: [[${theme.config.footer.footer_group.enable_footer_group}]],
|
||||
loadingBox: [[${theme.config.other.loadingBoxs.loadingBoxEnable}]],
|
||||
loadProgressBar: [[${theme.config.other.loadingBoxs.loadProgressBar}]],
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
th:with="assets_link=${theme.config.other.staticResource.use == 'onmicrosoft' ? 'https://npm.onmicrosoft.cn/hao-theme-static@' + theme.spec.version +'/templates/assets' :
|
||||
theme.config.other.staticResource.use == 'cbd' ? 'https://cdn.cbd.int/hao-theme-static@' + theme.spec.version +'/templates/assets' :
|
||||
theme.config.other.staticResource.use == 'custom' ? theme.config.other.staticResource.cdn_link : #theme.assets('/')},
|
||||
theme_version = ${ theme.config.other.staticResource.use == 'local' ? '?v='+ theme.spec.version : ''}">
|
||||
theme_version = ${ theme.config.other.staticResource.use == 'local' ? '?v='+ theme.spec.version : ''},
|
||||
isLazyload = ${theme.config.other.vanillaLazyload.enable},
|
||||
loadingImg = ${theme.config.other.vanillaLazyload.loadingImg}">
|
||||
|
||||
<!-- head 中自定义的 -->
|
||||
|
||||
|
|
@ -116,7 +118,7 @@
|
|||
|
||||
<div id="js-pjax"></div>
|
||||
|
||||
<script th:if="${theme.config.envelope_comment.enable_danmu}" th:src="${assets_link + '/libs/twikoo/easy-Danmaku.js' + theme_version}" id="Danmaku"></script>
|
||||
<script th:if="${theme.config.envelope_comment.enable_danmu}" th:src="${assets_link + '/libs/twikoo/easy-Danmaku.min.js' + theme_version}" id="Danmaku"></script>
|
||||
|
||||
|
||||
<script>
|
||||
|
|
@ -232,7 +234,7 @@
|
|||
document.body.clientWidth > 768 &&
|
||||
[[${theme.config.envelope_comment.enable_danmu}]]){
|
||||
halo.closeCommentBarrage();
|
||||
halo.addScript("Danmaku", "[[${assets_link + '/libs/twikoo/easy-Danmaku.js'}]]", halo.danmu("[(${theme.config.comments.twikoos.envId})]","[(${theme.config.comments.twikoos.accessToken})]",[[${theme.config.envelope_comment.maxBarrage}]]))
|
||||
halo.addScript("Danmaku", "[[${assets_link + '/libs/twikoo/easy-Danmaku.min.js'}]]", halo.danmu("[(${theme.config.comments.twikoos.envId})]","[(${theme.config.comments.twikoos.accessToken})]",[[${theme.config.envelope_comment.maxBarrage}]]))
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,11 @@
|
|||
|
||||
<div class="post_cover left_radius">
|
||||
<a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
|
||||
<img class="post_bg entered loaded" loading="lazy"
|
||||
<img class="post_bg"
|
||||
th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
|
||||
th:alt="${post.spec.title}"
|
||||
th:src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'>
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
th:src="${isLazyload ? loadingImg : img}">
|
||||
</a>
|
||||
</div>
|
||||
<!-- 类别非空时 -->
|
||||
|
|
|
|||
|
|
@ -16,8 +16,10 @@ containsTitle = ${#strings.contains(recommandPosts,post.spec.title)}">
|
|||
th:if="${not #strings.equals(post.spec.title, recommandPost.spec.title)}">
|
||||
<div th:if="${!containsTitle ? iterStat.index <6 : true}">
|
||||
<a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
|
||||
<img alt="cover" class="cover" loading="lazy" id="preimg"
|
||||
th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
|
||||
<img alt="cover" class="cover" id="preimg"
|
||||
th:with="img = ${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}"
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||||
<div class="content is-center">
|
||||
<div class="date" style="color: white"><i class="far fa-calendar-alt fa-fw"></i>
|
||||
[[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]
|
||||
|
|
@ -35,7 +37,10 @@ containsTitle = ${#strings.contains(recommandPosts,post.spec.title)}">
|
|||
<div th:if="${!containsTitle ? iterStat.index <2 : true}">
|
||||
<a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
|
||||
<img class="cover" alt="cover"
|
||||
th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
|
||||
th:with="img = ${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||||
<div class="content is-center">
|
||||
<div class="date"><i class="far fa-calendar-alt fa-fw"></i>
|
||||
[[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]</div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,10 @@
|
|||
th:href="${comic.url}"
|
||||
rel="external nofollow noreferrer" target="_blank" th:title="${comic.title}" draggable="false">
|
||||
<div class="comic-item-cover"><img
|
||||
th:src="@{${comic.bg}}"
|
||||
th:with="img = @{${comic.bg}}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
th:alt="${comic.title}"
|
||||
draggable="false" >
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@
|
|||
<a th:each="link : ${group.links}"
|
||||
class="card-friend-item online-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
|
||||
target="_blank"><img class="no-lightbox card-friend-avatar"
|
||||
th:src="${link.spec.logo}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : link.spec.logo}"
|
||||
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
|
||||
th:alt="${link.spec.displayName}">
|
||||
<div class="card-friend-details">
|
||||
<div class="card-friend-name">[[${link.spec.displayName}]]</div>
|
||||
|
|
@ -33,8 +35,10 @@
|
|||
</summary>
|
||||
<a th:each="link : ${group.links}"
|
||||
class="card-friend-item offline-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
|
||||
target="_blank"><img class="no-lightbox card-friend-avatar entered loaded"
|
||||
th:src="${link.spec.logo}"
|
||||
target="_blank"><img class="no-lightbox card-friend-avatar"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : link.spec.logo}"
|
||||
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
|
||||
th:alt="${link.spec.displayName}">
|
||||
<div class="card-friend-details">
|
||||
<div class="card-friend-name">[[${link.spec.displayName}]]</div>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,11 @@
|
|||
<div class="author-info__top-group">
|
||||
<div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！我是
|
||||
</div>
|
||||
<img class="avatar-img entered loaded"
|
||||
th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
|
||||
<img class="avatar-img"
|
||||
th:with=" img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||||
</div>
|
||||
<div class="author-info__name" th:if="${#strings.isEmpty(theme.config.sidebar.profile.profileName)}"
|
||||
th:text="${site.title}"></div>
|
||||
|
|
@ -140,10 +143,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar-img-group"><img class="avatar-img" alt="avatar"
|
||||
th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
|
||||
<div class="avatar-sticker"><img class="avatar-sticker-img" alt="avatar"
|
||||
th:src="@{${theme.config.sidebar.profile.stickerImg}}"></div>
|
||||
<div class="avatar-img-group">
|
||||
<img class="avatar-img" alt="avatar"
|
||||
th:with="img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||||
<div class="avatar-sticker">
|
||||
<img class="avatar-sticker-img" alt="avatar"
|
||||
th:with="img = @{${theme.config.sidebar.profile.stickerImg}}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="author-info__description_group" th:utext="${theme.config.sidebar.profile.profileDesc}">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,11 @@
|
|||
<!-- 最新文章，用户可以自定义展示数量 -->
|
||||
<div class="aside-list-item" th:each="post : ${posts}">
|
||||
<a class="thumbnail" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
|
||||
<img loading="lazy" th:alt="${post.spec.title}"
|
||||
th:src="${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}">
|
||||
<img th:alt="${post.spec.title}"
|
||||
th:with="img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||||
</a>
|
||||
<div class="content">
|
||||
<a class="title" th:href="@{${post.status.permalink}}" th:text="${post.spec.title}" th:title="${post.spec.title}"></a>
|
||||
|
|
|
|||
|
|
@ -19,114 +19,254 @@
|
|||
<div class="tags-group-wrapper" th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'default')}">
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#989bf8">
|
||||
<img th:src="${assets_link + '/images/icons/AfterEffect.png'}" title="AfterEffect">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="AfterEffect">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#fff">
|
||||
<img th:src="${assets_link + '/images/icons/Sketch.png'}" title="Sketch">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Sketch">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#57b6e6">
|
||||
<img th:src="${assets_link + '/images/icons/Docker.png'}" title="Docker">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Docker">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#4082c3">
|
||||
<img th:src="${assets_link + '/images/icons/Photoshop.png'}" title="Photoshop">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Photoshop">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#fff">
|
||||
<img th:src="${assets_link + '/images/icons/FinalCutPro.png'}" title="FinalCutPro">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="FinalCutPro">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#fff">
|
||||
<img th:src="${assets_link + '/images/icons/Python.png'}" title="Python">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Python.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Python">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#eb6840">
|
||||
<img th:src="${assets_link + '/images/icons/Swift.png'}" title="Swift">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Swift">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#8f55ba">
|
||||
<img th:src="${assets_link + '/images/icons/Principle.png'}" title="Principle">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Principle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#f29e39">
|
||||
<img th:src="${assets_link + '/images/icons/illustrator.png'}" title="illustrator">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="illustrator">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#2c51db">
|
||||
<img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="CSS3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#f7cb4f">
|
||||
<img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/JS.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="JS">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#e9572b">
|
||||
<img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="HTML">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#df5b40">
|
||||
<img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Git.webp'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Git">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#e65164">
|
||||
<img th:src="${assets_link + '/images/icons/Apifox.webp'}" title="Apifox">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Apifox.webp'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Apifox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#989bf8">
|
||||
<img th:src="${assets_link + '/images/icons/AfterEffect.png'}" title="AfterEffect">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="AfterEffect">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#fff">
|
||||
<img th:src="${assets_link + '/images/icons/Sketch.png'}" title="Sketch">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Sketch">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#57b6e6">
|
||||
<img th:src="${assets_link + '/images/icons/Docker.png'}" title="Docker">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Docker">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#4082c3">
|
||||
<img th:src="${assets_link + '/images/icons/Photoshop.png'}" title="Photoshop">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Photoshop">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#fff">
|
||||
<img th:src="${assets_link + '/images/icons/FinalCutPro.png'}" title="FinalCutPro">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="FinalCutPro">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#fff">
|
||||
<img th:src="${assets_link + '/images/icons/Python.png'}" title="Python">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Python.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Python">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#eb6840">
|
||||
<img th:src="${assets_link + '/images/icons/Swift.png'}" title="Swift">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Swift">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#8f55ba">
|
||||
<img th:src="${assets_link + '/images/icons/Principle.png'}" title="Principle">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Principle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#f29e39">
|
||||
<img th:src="${assets_link + '/images/icons/illustrator.png'}" title="illustrator">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="illustrator">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#2c51db">
|
||||
<img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="CSS3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#f7cb4f">
|
||||
<img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/JS.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="JS">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#e9572b">
|
||||
<img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="HTML">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-group-icon-pair">
|
||||
<div class="tags-group-icon" style="background:#df5b40">
|
||||
<img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Git.webp'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Git">
|
||||
</div>
|
||||
<div class="tags-group-icon" style="background:#e65164">
|
||||
<img th:src="${assets_link + '/images/icons/Apifox.webp'}" title="Apifox">
|
||||
<img
|
||||
th:with=" img = ${assets_link + '/images/icons/Apifox.webp'}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="Apifox">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -140,13 +280,23 @@
|
|||
<div class="tags-group-icon"
|
||||
th:style="'background:' + ${techOdd.background}"
|
||||
th:with="techOdd = ${techs.get(iterStat.index - 1)}">
|
||||
<img th:src="@{${techOdd.url}}" th:title="${techOdd.name}">
|
||||
<img
|
||||
th:with=" img = @{${techOdd.url}}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
th:title="${techOdd.name}">
|
||||
</div>
|
||||
|
||||
<div class="tags-group-icon"
|
||||
th:style="'background:' + ${techEven.background}"
|
||||
th:with="techEven = ${tech}">
|
||||
<img th:src="@{${techEven.url}}" th:title="${techEven.name}">
|
||||
<img
|
||||
th:with=" img = @{${techEven.url}}"
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
th:title="${techEven.name}">
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
|
|
|||
|
|
@ -12,30 +12,40 @@
|
|||
|
||||
<!-- 页码按钮 -->
|
||||
<th:block th:if="${pageInfo.page > 3}">
|
||||
<a class="page-number" th:href="${paths}" th:text="1"></a>
|
||||
<a class="page-number" th:href="${paths}" th:text="1" onclick="scrollToPost()"></a>
|
||||
<span class="space" th:if="${pageInfo.page != 4}">…</span>
|
||||
</th:block>
|
||||
|
||||
<th:block th:each="index:${#numbers.sequence(pageInfo.page-2,pageInfo.page+2)}">
|
||||
<span class="page-number current" th:if="${pageInfo.page} == ${index}" th:text="${pageInfo.page}"></span>
|
||||
<a class="page-number" th:unless="${pageInfo.page == index}"
|
||||
th:if="${index > 0 && index <= pageInfo.totalPages}" th:href="${#strings.equals(index, '1') ? paths : path+'/page/'+index}"
|
||||
th:text="${index}"></a>
|
||||
th:if="${index > 0 && index <= pageInfo.totalPages}"
|
||||
th:href="${#strings.equals(index, '1') ? paths : path+'/page/'+index}"
|
||||
th:text="${index}"
|
||||
onclick="scrollToPost()"></a>
|
||||
</th:block>
|
||||
|
||||
<th:block th:if="${pageInfo.totalPages - pageInfo.page > 2}">
|
||||
<span class="space" th:if="${pageInfo.totalPages - pageInfo.page != 3}">…</span>
|
||||
<a class="page-number" th:href="${path+'/page/'+pageInfo.totalPages}" th:text="${pageInfo.totalPages}"></a>
|
||||
<a class="page-number"
|
||||
th:href="${path+'/page/'+pageInfo.totalPages}"
|
||||
th:text="${pageInfo.totalPages}"
|
||||
onclick="scrollToPost()"></a>
|
||||
</th:block>
|
||||
|
||||
<!-- 翻页按钮 -->
|
||||
<a class="extend prev" rel="prev" th:if="${pageInfo.hasPrevious}" th:href="${pageInfo.prevUrl}"
|
||||
data-pjax-state="">
|
||||
<a class="extend prev" rel="prev"
|
||||
th:if="${pageInfo.hasPrevious}"
|
||||
th:href="${pageInfo.prevUrl}"
|
||||
onclick="scrollToPost()">
|
||||
<i class="haofont hao-icon-chevron-left fa-fw"></i>
|
||||
<div class="pagination_tips_prev">上页</div>
|
||||
</a>
|
||||
|
||||
<a class="extend next" rel="next" th:if="${pageInfo.hasNext}" th:href="${pageInfo.nextUrl}" data-pjax-state="">
|
||||
<a class="extend next"
|
||||
rel="next" th:if="${pageInfo.hasNext}"
|
||||
th:href="${pageInfo.nextUrl}"
|
||||
onclick="scrollToPost()">
|
||||
<div class="pagination_tips_next">下页</div>
|
||||
<i class="haofont hao-icon-chevron-right fa-fw"></i>
|
||||
</a>
|
||||
|
|
@ -43,12 +53,25 @@
|
|||
<input id="toPageText" maxlength="3" title="跳转到指定页面"
|
||||
oninput="value=value.replace(/[^0-9]/g,'')"
|
||||
onkeyup="if (this.value === '0') this.value = ''">
|
||||
<a id="toPageButton" onclick="heo.toPage()"
|
||||
data-pjax-state=""><i class="haofont hao-icon-angles-right"></i>
|
||||
<a id="toPageButton" onclick="heo.toPage();scrollToPost();"><i class="haofont hao-icon-angles-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script th:if="${theme.config.top.above.enable_above}">
|
||||
function scrollToPost(){
|
||||
setTimeout(()=>{
|
||||
btf.scrollToDest(window.innerHeight, 500);
|
||||
},1000)
|
||||
}
|
||||
</script>
|
||||
<script th:unless="${theme.config.top.above.enable_above}">
|
||||
function scrollToPost(){
|
||||
setTimeout(()=>{
|
||||
btf.scrollToDest(0, 500);
|
||||
},1000)
|
||||
}
|
||||
</script>
|
||||
</nav>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,13 @@
|
|||
<a th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
|
||||
<span class="recent-post-top-text"
|
||||
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'">荐</span>
|
||||
<img class="post_bg" loading="lazy"
|
||||
<img class="post_bg"
|
||||
th:with=' img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
|
||||
th:alt="${post.spec.title}"
|
||||
th:src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -36,9 +40,13 @@
|
|||
<a th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
|
||||
<span class="recent-post-top-text"
|
||||
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'">荐</span>
|
||||
<img class="post_bg" loading="lazy"
|
||||
<img class="post_bg"
|
||||
th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
|
||||
th:alt="${post.spec.title}"
|
||||
th:src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
|
||||
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@
|
|||
<div class="bber-container-img" th:if="${#strings.contains(content.medium,'PHOTO')}">
|
||||
<img th:each="momentItem : ${content.medium}"
|
||||
th:if="${momentItem.type.name == 'PHOTO'}"
|
||||
th:src="${momentItem.url}" title="瞬间配图">
|
||||
th:src="${isLazyload ? loadingImg : momentItem.url}"
|
||||
th:data-lazy-src="${ isLazyload ? momentItem.url : ''}"
|
||||
title="瞬间配图">
|
||||
<div class="bber-content-noimg"></div>
|
||||
<div class="bber-content-noimg"></div>
|
||||
<div class="bber-content-noimg"></div>
|
||||
|
|
|
|||
|
|
@ -124,7 +124,10 @@
|
|||
<div th:class="${postCursor.hasPrevious()==true && postCursor.hasNext()==false} ? 'prev-post2 pull-left postcarnepre' : 'prev-post pull-left'">
|
||||
<a th:if="${postCursor.hasPrevious()}" th:href="@{${postCursor.previous.status.permalink}}">
|
||||
<img alt="cover" id="preimg" class="nolazyload"
|
||||
th:src="${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}">
|
||||
th:with="img = ${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}"
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||||
<div class="pagination-info">
|
||||
<div class="label">上一篇</div>
|
||||
<div class="prev_info" th:text="${postCursor.previous.spec.title}"></div>
|
||||
|
|
@ -134,7 +137,9 @@
|
|||
<div th:class="${postCursor.hasPrevious()==false && postCursor.hasNext()==true} ? 'next-post2 pull-right postcarnepre':'next-post pull-right'">
|
||||
<a th:if="${postCursor.hasNext()}" th:href="@{${postCursor.next.status.permalink}}">
|
||||
<img alt="cover" id="preimg" class="nolazyload"
|
||||
th:src="${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}">
|
||||
th:with="img = ${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}"
|
||||
th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||||
<div class="pagination-info">
|
||||
<div class="label">下一篇</div>
|
||||
<div class="next_info" th:text="${postCursor.next.spec.title}"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue