From ac4d909356c1949e3455e9202e04a1f52862c94e Mon Sep 17 00:00:00 2001
From: liuzhihang <liuzhihangs@qq.com>
Date: Sat, 5 Nov 2022 08:56:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B0=83=E6=95=B4=20js=20css?=
 =?UTF-8?q?=20=EF=BC=88=E6=9C=AA=E8=B0=83=E6=95=B4=E5=AE=8C=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/assets/zhheo/blogex.js     | 38 +++++++++++++++-------------
 templates/assets/zhheo/zhheoblog.css | 14 +++++-----
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/templates/assets/zhheo/blogex.js b/templates/assets/zhheo/blogex.js
index 1799da5c..39ec2adc 100644
--- a/templates/assets/zhheo/blogex.js
+++ b/templates/assets/zhheo/blogex.js
@@ -16,23 +16,24 @@ function coverColor() {
     var path = document.getElementById("post-cover")?.src;
     // console.log(path);
     if (path !== undefined) {
-        var httpRequest = new XMLHttpRequest(); //第一步：建立所需的对象
-        httpRequest.open('GET', path + '?imageAve', true); //第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
-        httpRequest.send(); //第三步：发送请求  将请求参数写在URL中
-        /**
-         * 获取数据后的处理程序
-         */
-        httpRequest.onreadystatechange = function () {
-            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
-                var json = httpRequest.responseText; //获取到json字符串，还需解析
-                var obj = eval('(' + json + ')');
-                var value = obj.RGB;
-                value = "#" + value.slice(2)
+
+        // 获取颜色 https://github.com/fast-average-color/fast-average-color
+        const fac = new FastAverageColor();
+
+        fac.getColorAsync(path,{
+            // 忽略白色
+            ignoredColor: [255, 255, 255, 255]
+        })
+            .then(color => {
+                /**
+                 * 获取数据后的处理程序
+                 */
+                var value = color.hex;
                 // console.log(value);
-                //   document.getElementById('page-header').style.backgroundColor=value;
+                // document.getElementById('page-header').style.backgroundColor=value;
                 // document.styleSheets[0].addRule('#page-header:before','background: '+ value +'!important');
 
-                if (getContrastYIQ(value) == "light") {
+                if (getContrastYIQ(value) === "light") {
                     value = LightenDarkenColor(colorHex(value), -40)
                 }
 
@@ -42,8 +43,11 @@ function coverColor() {
                 document.styleSheets[0].addRule(':root', '--heo-main-none:' + value + '00!important');
                 heo.initThemeColor()
                 document.getElementById("coverdiv").classList.add("loaded");
-            }
-        };
+            })
+            .catch(e => {
+                console.log(e);
+            });
+
     } else {
         // document.styleSheets[0].addRule('#page-header:before','background: none!important');
         document.styleSheets[0].addRule(':root', '--heo-main: var(--heo-theme)!important');
@@ -161,7 +165,7 @@ function getContrastYIQ(hexcolor) {
 //导航栏文章
 function navTitle() {
     var titlevalue = document.title;
-    var simptitle = titlevalue.replace(' | 张洪Heo', '')
+    var simptitle = titlevalue.replace(' | XXXX', '')
     document.getElementById("page-name-text").innerHTML = simptitle;
 }
 
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index 2795b3be..9e2d7316 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@@ -323,12 +323,12 @@ template {
 .article-sort-item-title,
 .limit-more-line,
 .relatedPosts > .relatedPosts-list .content .title,
-figure.gallery-group .gallery-group-name,
-figure.gallery-group p {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-}
+/*figure.gallery-group .gallery-group-name,*/
+/*figure.gallery-group p {*/
+/*    display: -webkit-box;*/
+/*    overflow: hidden;*/
+/*    -webkit-box-orient: vertical;*/
+/*}*/
 
 #article-container h1::before,
 #article-container h2::before,
@@ -11223,7 +11223,7 @@ strong {
 #article-container.post-content h2,
 #article-container.post-content h3,
 #article-container.post-content h4 {
-    display: flex;
+    /*display: flex;*/
     align-items: center;
     justify-content: space-between;
     flex-direction: row-reverse;