github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化调整 js css （未调整完）

This commit is contained in:
liuzhihang 2022-11-05 08:56:01 +08:00
parent fb2653ecc8
commit ac4d909356
2 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
templates/assets/zhheo/blogex.js
View File

@ -16,23 +16,24 @@ function coverColor() {
var path = document.getElementById("post-cover")?.src; var path = document.getElementById("post-cover")?.src;
// console.log(path); // console.log(path);
if (path !== undefined) { if (path !== undefined) {
var httpRequest = new XMLHttpRequest(); //第一步：建立所需的对象
httpRequest.open('GET', path + '?imageAve', true); //第二步：打开连接 将请求参数写在url中 ps:"./Ptest.php?name=test&nameone=testone" // 获取颜色 https://github.com/fast-average-color/fast-average-color
httpRequest.send(); //第三步：发送请求 将请求参数写在URL中 const fac = new FastAverageColor();
fac.getColorAsync(path,{
// 忽略白色
ignoredColor: [255, 255, 255, 255]
})
.then(color => {
/** /**
* 获取数据后的处理程序 * 获取数据后的处理程序
*/ */
httpRequest.onreadystatechange = function () { var value = color.hex;
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var json = httpRequest.responseText; //获取到json字符串，还需解析
var obj = eval('(' + json + ')');
var value = obj.RGB;
value = "#" + value.slice(2)
// console.log(value); // 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'); // document.styleSheets[0].addRule('#page-header:before','background: '+ value +'!important');
if (getContrastYIQ(value) == "light") { if (getContrastYIQ(value) === "light") {
value = LightenDarkenColor(colorHex(value), -40) value = LightenDarkenColor(colorHex(value), -40)
} }
@ -42,8 +43,11 @@ function coverColor() {
document.styleSheets[0].addRule(':root', '--heo-main-none:' + value + '00!important'); document.styleSheets[0].addRule(':root', '--heo-main-none:' + value + '00!important');
heo.initThemeColor() heo.initThemeColor()
document.getElementById("coverdiv").classList.add("loaded"); document.getElementById("coverdiv").classList.add("loaded");
} })
}; .catch(e => {
console.log(e);
});
} else { } else {
// document.styleSheets[0].addRule('#page-header:before','background: none!important'); // document.styleSheets[0].addRule('#page-header:before','background: none!important');
document.styleSheets[0].addRule(':root', '--heo-main: var(--heo-theme)!important'); document.styleSheets[0].addRule(':root', '--heo-main: var(--heo-theme)!important');
@ -161,7 +165,7 @@ function getContrastYIQ(hexcolor) {
//导航栏文章 //导航栏文章
function navTitle() { function navTitle() {
var titlevalue = document.title; var titlevalue = document.title;
var simptitle = titlevalue.replace(' | 张洪Heo', '') var simptitle = titlevalue.replace(' | XXXX', '')
document.getElementById("page-name-text").innerHTML = simptitle; document.getElementById("page-name-text").innerHTML = simptitle;
} }

14
templates/assets/zhheo/zhheoblog.css
View File

@ -323,12 +323,12 @@ template {
.article-sort-item-title, .article-sort-item-title,
.limit-more-line, .limit-more-line,
.relatedPosts > .relatedPosts-list .content .title, .relatedPosts > .relatedPosts-list .content .title,
figure.gallery-group .gallery-group-name, /*figure.gallery-group .gallery-group-name,*/
figure.gallery-group p { /*figure.gallery-group p {*/
display: -webkit-box; /* display: -webkit-box;*/
overflow: hidden; /* overflow: hidden;*/
-webkit-box-orient: vertical; /* -webkit-box-orient: vertical;*/
} /*}*/
#article-container h1::before, #article-container h1::before,
#article-container h2::before, #article-container h2::before,
@ -11223,7 +11223,7 @@ strong {
#article-container.post-content h2, #article-container.post-content h2,
#article-container.post-content h3, #article-container.post-content h3,
#article-container.post-content h4 { #article-container.post-content h4 {
display: flex; /*display: flex;*/
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-direction: row-reverse; flex-direction: row-reverse;