hexo-theme-shokax 0.2.0-rc3 → 0.2.0-rc5

package/_config.yml

@@ -28,6 +28,8 @@ experiments:
   debug: false # 使用debug模式启动
   disableThemeComment: false # 禁用主题评论系统(一般用于关闭评论或让插件接管评论系统)
   usingRelative: false # _image.yml 使用相对路径
+  optimizeLongPosts: false # 优化长文章，这能让长文章的FPS提升70%-150%并解决假死问题，但存在一些副作用
+  # 具体见https://docs.kaitaku.xyz/guide/theme.html#%E9%95%BF%E6%96%87%E7%AB%A0%E4%BC%98%E5%8C%96
 
 # 优化性能区
 performance:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hexo-theme-shokax",
-    "version": "0.2.0-rc3",
+    "version": "0.2.0-rc5",
     "description": "a hexo theme based on shoka",
     "main": "index.js",
     "repository": "https://github.com/zkz098/hexo-theme-shokaX",

package/scripts/generaters/script.js

@@ -1,6 +1,5 @@
 /* global hexo */
 const fs = require('hexo-fs')
-// const url = require('url')
 
 hexo.extend.generator.register('script', function (locals) {
   const log = hexo.log || console.log
@@ -77,6 +76,11 @@ hexo.extend.generator.register('script', function (locals) {
     }
   }
   if (theme.fireworks && theme.fireworks.enable) {
+    if (fs.existsSync('themes/shokaX/source/js/_app/fireworks.js')) {
+      text += fs.readFileSync('themes/shokaX/source/js/_app/fireworks.js').toString()
+    } else {
+      text += fs.readFileSync('node_modules/hexo-theme-shokax/source/js/_app/fireworks.js').toString()
+    }
     siteConfig.fireworks = theme.fireworks.color || ['rgba(255,182,185,.9)', 'rgba(250,227,217,.9)', 'rgba(187,222,214,.9)', 'rgba(138,198,209,.9)']
   }
 

package/source/css/_common/components/post/expand.styl

@@ -13,21 +13,12 @@
   img,
   .tabs,
   .links {
-    content-visibility: auto;
-    contain-intrinsic-size: 979px 1.1em;
     &:last-child {
       margin-bottom: 0;
     }
   }
 
-  span {
-    content-visibility: auto;
-    contain-intrinsic-size: 979px 1.1em;
-  }
-
   ul, dd, ol {
-    content-visibility: auto;
-    contain-intrinsic-size: 979px 3.5em;
     ul, ol {
       margin-top: 0;
     }

package/source/css/_common/outline/header/image.styl

@@ -8,7 +8,9 @@
   min-height: 25rem;
   z-index: -9;
   background-color: #363636;
-
+  content-visibility: auto;
+  contain-intrinsic-size: 100vw 70vh;
+  
   img {
     width: 100%;
     height: 100%;

package/source/css/_common/outline/header/waves.styl

@@ -5,9 +5,12 @@
   min-height: 3.125rem;
   max-height: 9.375rem;
   position:relative;
+  content-visibility: auto;
+  contain-intrinsic-size: 100vw 15vh;
 
   +mobile() {
     height: 10vh;
+    contain-intrinsic-size: 100vw 10vh;
   }
 }
 /* Animation */

package/source/css/app.styl

@@ -33,4 +33,6 @@ if $custom = hexo-config('style.custom')
 for $inject_style in hexo-config('injects.style')
   @import $inject_style;
 
+if $optimize = hexo-config('experiments.optimizeLongPosts')
+  @import "optimize.styl"
 

package/source/css/optimize.styl

@@ -0,0 +1,6 @@
+.md {
+  span:not(.katex), p, pre, li, a {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 1em;
+  }
+}

package/source/js/_app/components.js

@@ -1,132 +1,3 @@
-const canvasEl = document.createElement('canvas');
-canvasEl.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:9999999';
-document.body.appendChild(canvasEl);
-const ctx = canvasEl.getContext('2d');
-const numberOfParticules = 30;
-let pointerX = 0;
-let pointerY = 0;
-const tap = 'click';
-const colors = CONFIG.fireworks;
-function setCanvasSize() {
-    canvasEl.width = window.innerWidth * 2;
-    canvasEl.height = window.innerHeight * 2;
-    canvasEl.style.width = window.innerWidth + 'px';
-    canvasEl.style.height = window.innerHeight + 'px';
-    canvasEl.getContext('2d').scale(2, 2);
-}
-function updateCoords(e) {
-    pointerX = e.clientX || (e.touches && e.touches[0].clientX);
-    pointerY = e.clientY || (e.touches && e.touches[0].clientY);
-}
-function setParticuleDirection(p) {
-    const angle = anime.random(0, 360) * Math.PI / 180;
-    const value = anime.random(50, 180);
-    const radius = [-1, 1][anime.random(0, 1)] * value;
-    return {
-        x: p.x + radius * Math.cos(angle),
-        y: p.y + radius * Math.sin(angle)
-    };
-}
-function createParticule(x, y) {
-    const p = {
-        x: undefined,
-        y: undefined,
-        color: undefined,
-        radius: undefined,
-        endPos: undefined,
-        draw: undefined
-    };
-    p.x = x;
-    p.y = y;
-    p.color = colors[anime.random(0, colors.length - 1)];
-    p.radius = anime.random(16, 32);
-    p.endPos = setParticuleDirection(p);
-    p.draw = function () {
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
-        ctx.fillStyle = p.color;
-        ctx.fill();
-    };
-    return p;
-}
-function createCircle(x, y) {
-    const p = {
-        x: undefined,
-        y: undefined,
-        color: undefined,
-        radius: undefined,
-        endPos: undefined,
-        alpha: undefined,
-        lineWidth: undefined,
-        draw: undefined
-    };
-    p.x = x;
-    p.y = y;
-    p.color = '#FFF';
-    p.radius = 0.1;
-    p.alpha = 0.5;
-    p.lineWidth = 6;
-    p.draw = function () {
-        ctx.globalAlpha = p.alpha;
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
-        ctx.lineWidth = p.lineWidth;
-        ctx.strokeStyle = p.color;
-        ctx.stroke();
-        ctx.globalAlpha = 1;
-    };
-    return p;
-}
-function renderParticule(anim) {
-    for (let i = 0; i < anim.animatables.length; i++) {
-        anim.animatables[i].target.draw();
-    }
-}
-function animateParticules(x, y) {
-    const circle = createCircle(x, y);
-    const particules = [];
-    for (let i = 0; i < numberOfParticules; i++) {
-        particules.push(createParticule(x, y));
-    }
-    anime.timeline().add({
-        targets: particules,
-        x: function (p) {
-            return p.endPos.x;
-        },
-        y: function (p) {
-            return p.endPos.y;
-        },
-        radius: 0.1,
-        duration: anime.random(1200, 1800),
-        easing: 'easeOutExpo',
-        update: renderParticule
-    }).add({
-        targets: circle,
-        radius: anime.random(80, 160),
-        lineWidth: 0,
-        alpha: {
-            value: 0,
-            easing: 'linear',
-            duration: anime.random(600, 800)
-        },
-        duration: anime.random(1200, 1800),
-        easing: 'easeOutExpo',
-        update: renderParticule
-    }, 0);
-}
-const render = anime({
-    duration: Infinity,
-    update: function () {
-        ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
-    }
-});
-document.addEventListener(tap, function (e) {
-    render.play();
-    updateCoords(e);
-    animateParticules(pointerX, pointerY);
-}, false);
-setCanvasSize();
-window.addEventListener('resize', setCanvasSize, false);
 const sideBarToggleHandle = function (event, force) {
     if (sideBar.hasClass('on')) {
         sideBar.removeClass('on');

package/source/js/_app/fireworks.js

@@ -0,0 +1,129 @@
+const canvasEl = document.createElement('canvas');
+canvasEl.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:9999999';
+document.body.appendChild(canvasEl);
+const ctx = canvasEl.getContext('2d');
+const numberOfParticules = 30;
+let pointerX = 0;
+let pointerY = 0;
+const tap = 'click';
+const colors = CONFIG.fireworks;
+function setCanvasSize() {
+    canvasEl.width = window.innerWidth * 2;
+    canvasEl.height = window.innerHeight * 2;
+    canvasEl.style.width = window.innerWidth + 'px';
+    canvasEl.style.height = window.innerHeight + 'px';
+    canvasEl.getContext('2d').scale(2, 2);
+}
+function updateCoords(e) {
+    pointerX = e.clientX || (e.touches && e.touches[0].clientX);
+    pointerY = e.clientY || (e.touches && e.touches[0].clientY);
+}
+function setParticuleDirection(p) {
+    const angle = anime.random(0, 360) * Math.PI / 180;
+    const value = anime.random(50, 180);
+    const radius = [-1, 1][anime.random(0, 1)] * value;
+    return {
+        x: p.x + radius * Math.cos(angle),
+        y: p.y + radius * Math.sin(angle)
+    };
+}
+function createParticule(x, y) {
+    const p = {
+        x: undefined,
+        y: undefined,
+        color: undefined,
+        radius: undefined,
+        endPos: undefined,
+        draw: undefined
+    };
+    p.x = x;
+    p.y = y;
+    p.color = colors[anime.random(0, colors.length - 1)];
+    p.radius = anime.random(16, 32);
+    p.endPos = setParticuleDirection(p);
+    p.draw = function () {
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
+        ctx.fillStyle = p.color;
+        ctx.fill();
+    };
+    return p;
+}
+function createCircle(x, y) {
+    const p = {
+        x: undefined,
+        y: undefined,
+        color: undefined,
+        radius: undefined,
+        endPos: undefined,
+        alpha: undefined,
+        lineWidth: undefined,
+        draw: undefined
+    };
+    p.x = x;
+    p.y = y;
+    p.color = '#FFF';
+    p.radius = 0.1;
+    p.alpha = 0.5;
+    p.lineWidth = 6;
+    p.draw = function () {
+        ctx.globalAlpha = p.alpha;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
+        ctx.lineWidth = p.lineWidth;
+        ctx.strokeStyle = p.color;
+        ctx.stroke();
+        ctx.globalAlpha = 1;
+    };
+    return p;
+}
+function renderParticule(anim) {
+    for (let i = 0; i < anim.animatables.length; i++) {
+        anim.animatables[i].target.draw();
+    }
+}
+function animateParticules(x, y) {
+    const circle = createCircle(x, y);
+    const particules = [];
+    for (let i = 0; i < numberOfParticules; i++) {
+        particules.push(createParticule(x, y));
+    }
+    anime.timeline().add({
+        targets: particules,
+        x: function (p) {
+            return p.endPos.x;
+        },
+        y: function (p) {
+            return p.endPos.y;
+        },
+        radius: 0.1,
+        duration: anime.random(1200, 1800),
+        easing: 'easeOutExpo',
+        update: renderParticule
+    }).add({
+        targets: circle,
+        radius: anime.random(80, 160),
+        lineWidth: 0,
+        alpha: {
+            value: 0,
+            easing: 'linear',
+            duration: anime.random(600, 800)
+        },
+        duration: anime.random(1200, 1800),
+        easing: 'easeOutExpo',
+        update: renderParticule
+    }, 0);
+}
+const render = anime({
+    duration: Infinity,
+    update: function () {
+        ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+    }
+});
+document.addEventListener(tap, function (e) {
+    render.play();
+    updateCoords(e);
+    animateParticules(pointerX, pointerY);
+}, false);
+setCanvasSize();
+window.addEventListener('resize', setCanvasSize, false);