[New] Pjax 测试

Hamud-Lang · Mar 13, 2024 · e78be32 · e78be32
1 parent d69e017
commit e78be32
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 132 deletions.
diff --git a/assets/SetPjax.js b/assets/SetPjax.js
@@ -0,0 +1,20 @@
+var pjax = new Pjax({
+    selectors: [
+        "head title",
+        "head meta",
+        ".theme-popup",
+        ".chapter",
+        ".content",
+        ".pjax-reload"
+    ],
+});
+
+// 包含一些 Pjax 加载后需要重新执行的函数
+function pjax_reload() {
+    SetupGiscus(getCurrentLanguage(), getCurrentTheme());
+}
+
+// 监听 Pjax 完成后，重新加载上面的函数
+document.addEventListener("pjax:complete", function () {
+    pjax_reload();
+});
diff --git a/assets/giscus.js b/assets/giscus.js
@@ -1,62 +1,71 @@
-// 若当前 mdbook 主题为 Light 或 Rust ，则将 giscus 主题设置为 light
-var theme = "transparent_dark";
-const themeClass = document.getElementsByTagName("html")[0].className;
-if (themeClass.indexOf("light") != -1 || themeClass.indexOf("rust") != -1) {
-    theme = "light"
-}
-
-// 获取用户使用的语种。
-var lang = translate.language.getCurrent();
-var giscus_lang = "zh-CN";
-switch (lang) {
-	case "chinese_traditional":
-		giscus_lang = "zh-TW";
-		break;
-	case "english":
-		giscus_lang = "en";
-		break;
-	case "spanish":
-		giscus_lang = "es";
-		break;
-	case "japanese":
-		giscus_lang = "ja";
-		break;
-	case "korean":
-		giscus_lang = "ko";
-		break;
-	case "french":
-		giscus_lang = "fr";
-		break;
-	case "arabic":
-		giscus_lang = "ar";
-		break;
-	default:
-		giscus_lang = "zh-CN";
-		break;
-}
-
-var giscus = function () {
-	const script = document.createElement("script");
-	script.type = "text/javascript";
-	script.src = "https://giscus.app/client.js";
-
-
-	script.setAttribute("data-repo", "Hamud-Lang/Hamud_Book");
-	script.setAttribute("data-repo-id", "R_kgDOKAX-uw");
-	script.setAttribute("data-category", "Announcements");
-	script.setAttribute("data-category-id", "DIC_kwDOKAX-u84CYRSk");
-
-	script.setAttribute("data-mapping", "title");
-	script.setAttribute("data-strict", "1");
-	script.setAttribute("data-reactions-enabled", "1");
-	script.setAttribute("data-emit-metadata", "0");
-	script.setAttribute("data-input-position", "top");
-	script.setAttribute("data-theme", theme);
-	script.setAttribute("data-lang", giscus_lang);
-
-	script.crossOrigin = "anonymous";
-	script.async = true;
-	document.getElementById("giscus-container").appendChild(script);
-};
-
-window.addEventListener('load', giscus);
+// 若当前 mdbook 主题为 Light 或 Rust ，则将 giscus 主题设置为 light
+const getCurrentTheme = function () {
+	var theme = "transparent_dark";
+	const themeClass = document.getElementsByTagName("html")[0].className;
+	if (themeClass.indexOf("light") != -1 || themeClass.indexOf("rust") != -1) {
+		theme = "light"
+	}
+	return theme;
+}
+
+// 获取用户使用的语种。
+const getCurrentLanguage = function () {
+	var lang = translate.language.getCurrent();
+	var giscus_lang = "zh-CN";
+	switch (lang) {
+		case "chinese_traditional":
+			giscus_lang = "zh-TW";
+			break;
+		case "english":
+			giscus_lang = "en";
+			break;
+		case "spanish":
+			giscus_lang = "es";
+			break;
+		case "japanese":
+			giscus_lang = "ja";
+			break;
+		case "korean":
+			giscus_lang = "ko";
+			break;
+		case "french":
+			giscus_lang = "fr";
+			break;
+		case "arabic":
+			giscus_lang = "ar";
+			break;
+		default:
+			giscus_lang = "zh-CN";
+			break;
+	}
+	return giscus_lang;
+};
+
+var SetupGiscus = function (giscus_lang, theme) {
+	const script = document.createElement("script");
+	script.type = "text/javascript";
+	script.src = "https://giscus.app/client.js";
+
+
+	script.setAttribute("data-repo", "Hamud-Lang/Hamud_Book");
+	script.setAttribute("data-repo-id", "R_kgDOKAX-uw");
+	script.setAttribute("data-category", "Announcements");
+	script.setAttribute("data-category-id", "DIC_kwDOKAX-u84CYRSk");
+
+	script.setAttribute("data-mapping", "title");
+	script.setAttribute("data-strict", "1");
+	script.setAttribute("data-reactions-enabled", "1");
+	script.setAttribute("data-emit-metadata", "0");
+	script.setAttribute("data-input-position", "top");
+	script.setAttribute("data-theme", theme);
+	script.setAttribute("data-lang", giscus_lang);
+	script.setAttribute("data-loading", "lazy");
+
+	script.crossOrigin = "anonymous";
+	script.async = true;
+	if (document.getElementById("giscus-container") != null) {
+		document.getElementById("giscus-container").appendChild(script);
+	}
+};
+
+window.addEventListener('load', () => SetupGiscus(getCurrentLanguage(), getCurrentTheme()));
diff --git a/assets/load_ani.js b/assets/load_ani.js
@@ -0,0 +1,40 @@
+var loadingBar = document.querySelector(".loading-bar");
+var progress = document.querySelector(".loading-bar .progress");
+var timer = null;
+
+// Pjax 开始时执行的函数
+document.addEventListener("pjax:send", function () {
+  // 进度条默认已经加载 20%
+  var loadingBarWidth = 20;
+  // 进度条的最大增加宽度
+  var MAX_LOADING_WIDTH = 95;
+
+  // 显示进度条
+  loadingBar.classList.add("loading");
+  // 初始化进度条的宽度
+  progress.style.width = loadingBarWidth + "%";
+
+  clearInterval(timer);
+  timer = setInterval(function () {
+    // 进度条的增加速度（可以改为一个随机值，显得更加真实）
+    loadingBarWidth += 3;
+
+    // 当进度条到达 95% 后停止增加
+    if (loadingBarWidth > MAX_LOADING_WIDTH) {
+      loadingBarWidth = MAX_LOADING_WIDTH;
+    }
+
+    progress.style.width = loadingBarWidth + "%";
+  }, 500);
+});
+
+// Pjax 完成之后执行的函数
+document.addEventListener("pjax:complete", function () {
+  clearInterval(timer);
+  progress.style.width = "100%";
+  loadingBar.classList.remove("loading");
+
+  setTimeout(function () {
+    progress.style.width = 0;
+  }, 400);
+});
diff --git a/assets/loading.css b/assets/loading.css
@@ -1,31 +1,61 @@
-#hmd-loading {
-	position: fixed;
-	background-color: #424242;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
-	z-index: 1000000
-}
-
-#hmd-loading_bg{
-	background-color: rgba(0,0,0,0.7);
-}
-
-.hmd-loader {
-	line-height: 50px;
-	text-align: center;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	-webkit-transform: translate(-50%, -50%);
-	transform: translate(-50%, -50%);
-	font-family: helvetica, arial, sans-serif;
-	text-transform: uppercase;
-	font-weight: 900;
-	color: #0277BD;
-	letter-spacing: 0.2em;
-}
-
-@media screen and (max-width: 980px){.hmd-loader{width:80%}}
-@media screen and (min-width: 980px){.hmd-loader{width:25rem}}
+/* #hmd-loading {
+	position: fixed;
+	background-color: #424242;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	z-index: 1000000
+}
+
+#hmd-loading_bg{
+	background-color: rgba(0,0,0,0.7);
+}
+
+.hmd-loader {
+	line-height: 50px;
+	text-align: center;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	font-family: helvetica, arial, sans-serif;
+	text-transform: uppercase;
+	font-weight: 900;
+	color: #0277BD;
+	letter-spacing: 0.2em;
+}
+
+@media screen and (max-width: 980px){.hmd-loader{width:80%}}
+@media screen and (min-width: 980px){.hmd-loader{width:25rem}} */
+
+/* 加载进度条 */
+.loading-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99999;
+    opacity: 0;
+    transition: opacity .4s linear;
+
+    .progress {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 4px;
+      background-color: #007bff;
+      box-shadow: 0 0 10px rgba(119, 182, 255, .7);
+    }
+
+    &.loading {
+      opacity: 1;
+      transition: none;
+
+      .progress {
+        transition: width .4s ease;
+      }
+    }
+  }
+/* 加载进度条结束 */
diff --git a/assets/loading.js b/assets/loading.js
@@ -1,37 +1,37 @@
-// const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
-const position = document.getElementById('hmd-loading');
-
-document.onreadystatechange=function () {
-    if (window.location.href.indexOf("print.html") === -1) {
-        position.style.display = 'block';
-        if (document.readyState=="complete"){
-            loadingFade();
-        }
-    } else {
-        position.style.display = 'none';
-    }
-}
-
-function startLoading() {
-    var loadingBackground=document.getElementById('hmd-loading_bg');
-    position.style.display = 'block';
-    loadingBackground.style.opacity=1;
-    setTimeout(() => loadingFade(), 30000)
-}
-
-function loadingFade() {
-    var opacity=1;
-    //  var loadingPage=document.getElementById('loading');
-    var loadingBackground=document.getElementById('hmd-loading_bg');
-    var time=setInterval(function () {
-        if (opacity<=0){
-            clearInterval(time);
-            //  loadingPage.remove();
-            //  $('#loading').remove();
-            position.style.display = 'none';
-        }
-
-        loadingBackground.style.opacity=opacity;
-        opacity-=0.4;
-    },100);
+// const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
+const position = document.getElementById('hmd-loading');
+
+// document.onreadystatechange=function () {
+//     if (window.location.href.indexOf("print.html") === -1) {
+//         position.style.display = 'block';
+//         if (document.readyState=="complete"){
+//             loadingFade();
+//         }
+//     } else {
+//         position.style.display = 'none';
+//     }
+// }
+
+function startLoading() {
+    var loadingBackground=document.getElementById('hmd-loading_bg');
+    position.style.display = 'block';
+    loadingBackground.style.opacity=1;
+    setTimeout(() => loadingFade(), 30000)
+}
+
+function loadingFade() {
+    var opacity=1;
+    //  var loadingPage=document.getElementById('loading');
+    var loadingBackground=document.getElementById('hmd-loading_bg');
+    var time=setInterval(function () {
+        if (opacity<=0){
+            clearInterval(time);
+            //  loadingPage.remove();
+            //  $('#loading').remove();
+            position.style.display = 'none';
+        }
+
+        loadingBackground.style.opacity=opacity;
+        opacity-=0.4;
+    },100);
 }
diff --git a/book.toml b/book.toml
@@ -11,8 +11,10 @@ default-theme = "rust"
 preferred-dark-theme = "navy"
 mathjax-support = false
 site-url = "/zh-Hans-CN/"
-additional-css = ["assets/loading.css", "assets/title_fix.css", "assets/translate.css"]
-additional-js = ["assets/loading.js", "assets/translate_lib.js", "assets/giscus.js"]
+# additional-css = ["assets/loading.css", "assets/title_fix.css", "assets/translate.css"]
+# additional-js = ["assets/loading.js", "assets/translate_lib.js", "assets/giscus.js", "assets/SetPjax.js", "assets/load_ani.js"]
+additional-css = ["assets/title_fix.css", "assets/loading.css", "assets/translate.css"]
+additional-js = ["assets/translate_lib.js", "assets/giscus.js", "assets/SetPjax.js", "assets/load_ani.js"]
 git-repository-url = "https://github.com/Hamud-Lang/Hamud_Book/tree/zh-Hans-CN"
 edit-url-template = "https://github.com/Hamud-Lang/Hamud_Book/edit/zh-Hans-CN/{path}"
 

diff --git a/theme b/theme