优化文档结构样式

sa-token-doc/static/docsify-plugins/progress.update.js

@@ -0,0 +1,76 @@
+// 显示文档阅读进度的进度条 
+// 
+// 修改于：https://github.com/HerbertHe/docsify-progress
+// 
+// 1、将最外层盒子的 z-index 值从 999 修改为 9999999999
+
+function plugin(hook, vm) {
+    let marginTop
+    hook.mounted(function () {
+        const content = document.getElementsByClassName("content")[0]
+        marginTop = parseFloat(
+            window.getComputedStyle(content).paddingTop.replace("px", "")
+        )
+
+        let insertDOM = `
+        <div style="position: fixed; width: 100%; z-index: 9999999999; height: ${
+            window.$docsify["progress"].height
+        };
+        ${
+            window.$docsify["progress"].position === "top"
+                ? "top: 0;"
+                : "bottom: 0;"
+        }">
+            <div id="progress-display" style="background-color: ${
+                window.$docsify["progress"].color
+            }; width: 0; border-radius: 2px; height: ${
+            window.$docsify["progress"].height
+        }; transition: width 0.3s;"></div>
+        </div>
+        `
+        const mainDOM = document.getElementsByTagName("body")[0]
+        mainDOM.innerHTML = mainDOM.innerHTML + insertDOM
+
+        function switcher() {
+            const body = document.getElementsByTagName("body")[0]
+            if (!body.classList.contains("close")) {
+                body.classList.add("close")
+            } else {
+                body.classList.remove("close")
+            }
+        }
+
+        const btn = document.querySelector("div.sidebar-toggle-button")
+        btn.addEventListener("click", function (e) {
+            e.stopPropagation()
+            switcher()
+        })
+    })
+    hook.ready(function () {
+        window.addEventListener("scroll", function (e) {
+            let totalHeight =
+                marginTop +
+                parseFloat(
+                    window
+                        .getComputedStyle(document.getElementById("main"))
+                        .height.replace("px", "")
+                )
+            let scrollTop =
+                document.body.scrollTop + document.documentElement.scrollTop
+            let remain = totalHeight - document.body.offsetHeight
+            document.getElementById("progress-display").style.width =
+                Math.ceil((scrollTop / remain) * 100) + "%"
+        })
+    })
+}
+
+// Docsify plugin options
+window.$docsify["progress"] = Object.assign(
+    {
+        position: "top",
+        color: "var(--theme-color,#42b983)",
+        height: "3px",
+    },
+    window.$docsify["progress"]
+)
+window.$docsify.plugins = [].concat(plugin, window.$docsify.plugins)

sa-token-doc/static/docsify-plugins/sub-nav-draw.js

@@ -0,0 +1,56 @@
+// 提取次级导航栏显示到右上角 
+// 
+
+// 是否都开右边菜单
+let isOpenRightSubTitle = false;
+
+		// 重新定位 active-rep 对应的菜单 
+function positioningVmActiveRep(vm) {
+	const vmPath = '#' + vm.route.path;
+	$('.sidebar-nav>ul>li>ul>li>a').each(function(item) {
+		if($(this).attr('href') === vmPath) {
+			// $(this).parent().attr('active-rep', true);
+			$(this).parent().addClass('active-rep')
+			// console.log($(this));
+		}
+	})
+}
+
+function subNavDraw(hook, vm) {
+	
+    // 钩子函数：每次路由切换时数据全部加载完成后调用，没有参数。
+    hook.doneEach(function () {
+		// 只在宽屏下展现，太小的屏幕不展现 
+		if(document.body.clientWidth < 1100) {
+			isOpenRightSubTitle = false;
+			return;
+		} else {
+			isOpenRightSubTitle = true;
+		}
+		
+		// 修改高度 
+		const $dom = $('.app-sub-sidebar');
+		$('.doc-right-more-item').css({ top: ($dom.height() + 80) + 'px' })
+		
+		// 重新定位 active-rep 对应的菜单 
+		positioningVmActiveRep(vm);
+    })
+	
+	
+	// 钩子函数：初始化并第一次加载完成数据后调用，没有参数。
+	hook.ready(function () {
+		
+	})
+	
+	
+}
+
+window.$docsify.plugins = [].concat(subNavDraw, window.$docsify.plugins)
+
+// 滚动时设置一下左侧滚动条高度，不要超出可视区域 
+$(document).scroll(function(){
+	if(isOpenRightSubTitle) {
+		const offsetTop = $('.active-rep').get(0).offsetTop;
+		$('.sidebar').scrollTop(offsetTop - ($('.sidebar').height() / 2))
+	}
+})