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

优化 js ，添加全局配置 gloabl_config

This commit is contained in:
liuzhihang 2022-10-29 20:17:18 +08:00
parent 090edab537
commit 9d47fe017b
9 changed files with 119 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
templates/assets/js/main.js
View File

@ -46,7 +46,6 @@ document.addEventListener("DOMContentLoaded", function () {
let initTop = 0; let initTop = 0;
let $header = document.getElementById("page-header"); let $header = document.getElementById("page-header");
let $cookies = document.getElementById("cookies-window");
window.scrollCollect = btf.throttle(function () { window.scrollCollect = btf.throttle(function () {
@ -66,7 +65,6 @@ document.addEventListener("DOMContentLoaded", function () {
} }
} }
$header.classList.add("nav-fixed") $header.classList.add("nav-fixed")
$cookies.classList.add("cw-hide")
} else { } else {
if (0 === currentTop) { if (0 === currentTop) {
$header.classList.remove("nav-fixed", "nav-visible") $header.classList.remove("nav-fixed", "nav-visible")
@ -80,30 +78,23 @@ document.addEventListener("DOMContentLoaded", function () {
// 滚动处理 // 滚动处理
const scrollFnToDo = function () { const scrollFnToDo = function () {
let $cardTocLayout = document.getElementById("card-toc"); let $cardTocLayout = document.getElementById("card-toc");
let $cardToc = $cardTocLayout.getElementsByClassName("toc-content")[0]; // let $cardToc = $cardTocLayout.getElementsByClassName("toc-content")[0];
let $tocLink = $cardToc.querySelectorAll(".toc-link"); // let $tocLink = $cardToc.querySelectorAll(".toc-link");
let $article = document.getElementById("article-container"); let $article = document.getElementById("article-container");
// let scrollPercent;
const scrollPercent = function (currentTop) { // if (GLOBAL_CONFIG.htmlType === 'post') {
const docHeight = $article.clientHeight; // scrollPercent = function (currentTop) {
const winHeight = document.documentElement.clientHeight; // const docHeight = $article.clientHeight;
const headerHeight = $article.offsetTop; // const winHeight = document.documentElement.clientHeight;
const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight) // const headerHeight = $article.offsetTop;
const scrollPercent = (currentTop - headerHeight) / (contentMath); // const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
const scrollPercentRounded = Math.round(100 * scrollPercent); // const scrollPercent = (currentTop - headerHeight) / (contentMath);
const percentage = 100 < scrollPercentRounded ? 100 : scrollPercentRounded <= 0 ? 0 : scrollPercentRounded; // const scrollPercentRounded = Math.round(100 * scrollPercent);
$cardToc.setAttribute("progress-percentage", percentage); // const percentage = 100 < scrollPercentRounded ? 100 : scrollPercentRounded <= 0 ? 0 : scrollPercentRounded;
} // $cardToc.setAttribute("progress-percentage", percentage);
// };
document.getElementById("mobile-toc-button") // }
.addEventListener("click", function () {
if ("0" === window.getComputedStyle($cardTocLayout).getPropertyValue("opacity")) {
window.mobileToc.open();
} else {
window.mobileToc.close();
}
});
window.mobileToc = { window.mobileToc = {
open: () => { open: () => {
@ -119,79 +110,79 @@ document.addEventListener("DOMContentLoaded", function () {
} }
// toc 元素点击 // toc 元素点击
$cardToc.addEventListener("click", e => { // $cardToc.addEventListener("click", e => {
e.preventDefault(); // e.preventDefault();
const target = e.target.classList.contains("toc-link") ? e.target : e.target.parentElement; // const target = e.target.classList.contains("toc-link") ? e.target : e.target.parentElement;
//
btf.scrollToDest( // btf.scrollToDest(
btf.getEleTop( // btf.getEleTop(
document.getElementById( // document.getElementById(
decodeURI(target.getAttribute("href")).replace("#", "") // decodeURI(target.getAttribute("href")).replace("#", "")
) // )
), // ),
300 // 300
); // );
if (window.innerWidth < 900) { // if (window.innerWidth < 900) {
window.mobileToc.close(); // window.mobileToc.close();
} // }
}); // });
// find head position & add active class // find head position & add active class
const list = $article.querySelectorAll("h1,h2,h3,h4,h5,h6"); // const list = $article.querySelectorAll("h1,h2,h3,h4,h5,h6");
let detectItem = ""; // let detectItem = "";
const findHeadPosition = function (top) { // const findHeadPosition = function (top) {
//
// if (0 === $tocLink.length || 0 === top) {
// return false
// }
//
// let currentId = "";
// let currentIndex = "";
//
// list.forEach(function (ele, index) {
// if (top > btf.getEleTop(ele) - 80) {
// currentId = "#" + encodeURI(ele.getAttribute("id"));
// currentIndex = index
// }
//
// })
// if (detectItem === currentIndex) {
// return
// }
//
// detectItem = currentIndex
//
// $cardToc.querySelectorAll(".active").forEach(i => {
// i.classList.remove("active")
// })
//
// if (currentId === "") {
// return
// }
//
// const currentActive = $tocLink[currentIndex]
// currentActive.classList.add("active")
//
// setTimeout(() => {
// autoScrollToc(currentActive)
// }, 0)
//
// if (isExpand) return
// let parent = currentActive.parentNode
//
// for (; !parent.matches(".toc"); parent = parent.parentNode) {
// if (parent.matches("li")) parent.classList.add("active")
// }
// }
if (0 === $tocLink.length || 0 === top) { // window.tocScrollFn = function () {
return false // return btf.throttle(function () {
} // let currentTop = window.scrollY || document.documentElement.scrollTop;
// // scrollPercent(currentTop)
let currentId = ""; // findHeadPosition(currentTop);
let currentIndex = ""; // }, 100)();
// };
list.forEach(function (ele, index) { // window.addEventListener("scroll", tocScrollFn);
if (top > btf.getEleTop(ele) - 80) {
currentId = "#" + encodeURI(ele.getAttribute("id"));
currentIndex = index
}
})
if (detectItem === currentIndex) {
return
}
detectItem = currentIndex
$cardToc.querySelectorAll(".active").forEach(i => {
i.classList.remove("active")
})
if (currentId === "") {
return
}
const currentActive = $tocLink[currentIndex]
currentActive.classList.add("active")
setTimeout(() => {
autoScrollToc(currentActive)
}, 0)
if (isExpand) return
let parent = currentActive.parentNode
for (; !parent.matches(".toc"); parent = parent.parentNode) {
if (parent.matches("li")) parent.classList.add("active")
}
}
window.tocScrollFn = function () {
return btf.throttle(function () {
let currentTop = window.scrollY || document.documentElement.scrollTop;
scrollPercent(currentTop)
findHeadPosition(currentTop);
}, 100)();
};
window.addEventListener("scroll", tocScrollFn);
}; };
const tabsFn = { const tabsFn = {

16
templates/assets/js/utils.js
View File

@ -167,10 +167,6 @@ const btf = {
} }
}, },
isJqueryLoad: function (e) {
"undefined" == typeof jQuery ? getScript(GLOBAL_CONFIG.source.jQuery).then(e) : e()
},
isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0, isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
getEleTop: ele => { getEleTop: ele => {
@ -183,16 +179,6 @@ const btf = {
} }
return actualTop return actualTop
}, }
updateAnchor: (anchor) => {
if (anchor !== window.location.hash) {
if (!anchor) anchor = location.pathname
const title = GLOBAL_CONFIG_SITE.title
window.history.replaceState({
url: location.href,
title: title
}, title, anchor)
}
}
}; };

2
templates/category.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org"> <html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category')" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="content"> <th:block th:fragment="content">

2
templates/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org"> <html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'index')" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="content"> <th:block th:fragment="content">

29
templates/modules/layouts/layout.html
View File

@ -1,8 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" th:fragment="layout(content)" xmlns:th="http://www.thymeleaf.org"> <html lang="en" th:fragment="layout(content, htmlType)" xmlns:th="http://www.thymeleaf.org">
<!-- head 中自定义的 --> <!-- head 中自定义的 -->
<head th:replace="modules/head :: head(metas = null,links = null, scripts = null)"></head> <head th:replace="modules/head :: head(metas = null, links = null, scripts = ~{::head/script})">
<!-- 声明一些公共信息 -->
<script th:inline="javascript">
const GLOBAL_CONFIG = {
siteTitle : [[${site.title}]],
// 页面类型 index,page,post,tag,category
htmlType: [[${htmlType}]],
postTitle: [[${htmlType == 'post' ? post.spec.title : ''}]],
Snackbar: {
chs_to_cht: "你已切换为繁体",
cht_to_chs: "你已切换为简体",
day_to_night: "你已切换为深色模式",
night_to_day: "你已切换为浅色模式",
bgLight: "#49b1f5",
bgDark: "#121212",
position: "top-center",
},
};
console.log(GLOBAL_CONFIG);
</script>
</head>
<body> <body>

1
templates/modules/widgets/aside/toc.html
View File

@ -7,6 +7,7 @@
<div class="item-headline"> <div class="item-headline">
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
<span>文章目录</span> <span>文章目录</span>
<span class="toc-percentage"></span>
</div> </div>
<!-- 目录容器 --> <!-- 目录容器 -->
<div class="toc-content"></div> <div class="toc-content"></div>

2
templates/page.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org"> <html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page')" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="content"> <th:block th:fragment="content">

2
templates/post.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org"> <html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'post')" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="content"> <th:block th:fragment="content">
<div class="post" id="body-wrap"> <div class="post" id="body-wrap">

2
templates/tag.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org"> <html lang="en" th:replace="modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'tag')" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="content"> <th:block th:fragment="content">