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

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,
getEleTop: ele => {
@ -183,16 +179,6 @@ const btf = {
}
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>
<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">

2
templates/index.html
View File

@ -1,5 +1,5 @@
<!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">

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

@ -1,8 +1,33 @@
<!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 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>

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

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

2
templates/page.html
View File

@ -1,5 +1,5 @@
<!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">

2
templates/post.html
View File

@ -1,5 +1,5 @@
<!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">
<div class="post" id="body-wrap">

2
templates/tag.html
View File

@ -1,5 +1,5 @@
<!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">