添加网站头

_config/css/styles.css

@@ -50,6 +50,7 @@ section.cover .cover-main {
   align-items: center;
   flex-direction: column;
   margin: 0;
+  margin-top: 80px;
   /* padding: 0px 16px 0; */
 }
 
@@ -478,7 +479,7 @@ body .sidebar-toggle span:nth-child(3) {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 10%;
+  margin: 80px 10% 0;  /* 添加上边距，避免被固定头部遮挡 */
 }
 
 /* .luckday-video-skying {
@@ -500,9 +501,32 @@ body .sidebar-toggle span:nth-child(3) {
 
 .header {
   display: flex;
-  justify-content: space-between;
   width: 100%;
   padding: 20px 10%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #ffffffa6;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  z-index: 1000;
+}
+
+.header-left, .header-right {
+  display: flex;
+  align-items: center;
+}
+
+.header-jump {
+  display: flex;
+  align-items: center;
+  margin-right: 28px;
+}
+
+.header-jump img {
+  width: 22px !important;
+  height: 32px;
+  margin-right: 8px;
 }
 
 /* .doc {

_config/js/header-scroll.js

@@ -0,0 +1,35 @@
+// 等待 docsify 完成页面渲染后执行
+window.$docsify.plugins = [].concat(window.$docsify.plugins || [], function(hook) {
+  hook.ready(function() {
+    let lastScrollTop = 0;
+    let scrolling = false;
+
+    // 创建一个获取 header 的函数
+    function getHeader() {
+      return document.querySelector('.header');
+    }
+
+    window.addEventListener('scroll', function() {
+      if (!scrolling) {
+        window.requestAnimationFrame(function() {
+          const header = getHeader();
+          if (!header) return; // 如果没有找到 header，直接返回
+
+          let currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+          
+          if (currentScrollTop > lastScrollTop && currentScrollTop > 50) { // 添加一个最小滚动距离
+            // 向下滚动
+            header.style.transform = 'translateY(-100%)';
+          } else {
+            // 向上滚动
+            header.style.transform = 'translateY(0)';
+          }
+          
+          lastScrollTop = currentScrollTop;
+          scrolling = false;
+        });
+        scrolling = true;
+      }
+    });
+  });
+});

_coverpage.md

@@ -1,7 +1,17 @@
-<!-- <div class="header">
+<div class="header">
-  <div class="header-left">首页</div>
+  <div class="header-left">
-  <div class="header-right">文档</div>
+    <a class="header-jump" href="/">
-</div> -->
+      <img src="_media/svg/home.svg" />
+      <span>首页</span>
+    </a>
+  </div>
+  <div class="header-right">
+    <a class="header-jump" href="#/README">
+      <img src="_media/svg/doc.svg" />
+      <span>文档</span>
+    </a>
+  </div>
+</div>
 
 <!-- <div class="doc">
   <a href="#/README">

_media/svg/home.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760194618936" class="icon" viewBox="0 0 1064 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2750" xmlns:xlink="http://www.w3.org/1999/xlink" width="207.8125" height="200"><path d="M1047.53152 458.91584c-0.28672-12.75904-8.25344-29.61408-17.73568-37.4784L553.10336 26.39872c-9.48224-7.8848-25.02656-7.8848-34.5088 0L41.96352 421.43744c-9.48224 7.8848-17.44896 24.73984-17.73568 37.4784l-2.51904 125.68576c-0.22528 12.75904 7.29088 16.6912 16.75264 8.74496L511.05792 197.38624c9.48224-7.94624 25.02656-8.06912 34.57024-0.28672l487.44448 396.53376c9.54368 7.76192 17.18272 3.70688 16.91648-9.05216l-2.4576-125.66528z" fill="red" p-id="2751"></path><path d="M550.01088 303.57504c-9.66656-7.63904-25.47712-7.5776-35.14368 0.06144L170.31168 576.36864c-9.66656 7.63904-17.57184 24.33024-17.57184 37.08928V967.8848c0 12.75904 9.89184 23.18336 21.95456 23.18336h208.81408c12.0832 0 21.95456-10.42432 21.95456-23.18336V746.25024c0-12.75904 9.89184-23.18336 21.95456-23.18336h211.1488c12.0832 0 21.95456 10.42432 21.95456 23.18336v219.3408c0 12.75904 9.89184 23.18336 21.95456 23.18336h212.25472c12.0832 0 21.95456-10.42432 21.95456-23.18336V615.89504c0-12.75904-7.96672-29.45024-17.63328-37.08928L550.01088 303.57504z" fill="red" p-id="2752"></path></svg>

index.html

@@ -56,6 +56,7 @@
     <script src="./_config/js/prism-php.min.js"></script>
     <script src="./_config/js/prism-java.min.js"></script>
     <script src="./_config/js/prism-python.min.js"></script>
+    <script src="./_config/js/header-scroll.js"></script>
 
     <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>