diff --git a/404.html b/404.html
index 4aeea94..1904032 100644
--- a/404.html
+++ b/404.html
@@ -1,3 +1,5 @@
+---
+---
 <!doctype html>
 <html lang="en">
 
@@ -5,8 +7,8 @@
   <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
   <title>Asterinas - Not Found</title>
 
-  <link rel="stylesheet" href="/css/contributors.css" media="screen and (min-width: 769px)">
-  <link rel="stylesheet" href="/css/contributors-mobile.css" media="screen and (max-width: 768px)">
+  <link rel="stylesheet" href="{{ '/css/contributors.css' | relative_url }}" media="screen and (min-width: 769px)">
+  <link rel="stylesheet" href="{{ '/css/contributors-mobile.css' | relative_url }}" media="screen and (max-width: 768px)">
   <style type="text/css" media="screen">
     body {
       margin: 10px auto;
@@ -20,8 +22,8 @@
   <!-- 头部 -->
   <div class="header">
     <div class="hdImgBox">
-      <a href="/">
-        <img src="/assets/images/homeIcon.png" alt="img">
+      <a href="{{ '/' | relative_url }}">
+        <img src="{{ '/assets/images/homeIcon.png' | relative_url }}" alt="img">
       </a>
     </div>
     <div class="hdLink">
@@ -33,7 +35,7 @@
     </div>
     <div class="hdLinks">
       <div>
-        <img src="/assets/images/navigation.jpg" alt="img">
+        <img src="{{ '/assets/images/navigation.jpg' | relative_url }}" alt="img">
       </div>
       <div class="tabItem" flot="false">
         <div data-tab="1" class="tab">Home</div>
@@ -73,11 +75,11 @@
       tab.addEventListener('click', function () {
         var tabId = this.getAttribute('data-tab');
         if (tabId === '1') {
-          window.location.href = '/index.html';
+          window.location.href = "{{ '/index.html' | relative_url }}";
         } else if (tabId === '2') {
-          window.location.href = '/blog.html';
+          window.location.href = "{{ '/blog.html' | relative_url }}";
         } else if (tabId === '3') {
-          window.location.href = 'https://asterinas.github.io/book';
+          window.location.href = "{{ '/book' | relative_url }}";
         }
       });
 
@@ -154,4 +156,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/_config.yml b/_config.yml
index 5d5763f..2c3ecfa 100644
--- a/_config.yml
+++ b/_config.yml
@@ -22,7 +22,9 @@ title: Asterinas
 email: tate.thl@gmail.com
 description: >- # this means to ignore newlines until "baseurl:"
   Asterinas is an open-source community to advance Rust-based OSes
-baseurl: "" # the subpath of your site, e.g. /blog
+# For forks (e.g., `username/asterinas.github.io` hosted on GitHub Pages),
+# set `baseurl` to `/asterinas.github.io` to ensure all local links and assets resolve correctly.
+baseurl: "" # "/asterinas.github.io"
 url: asterinas.github.io
 github_username:  asterinas
 
diff --git a/_includes/site-nav.html b/_includes/site-nav.html
new file mode 100644
index 0000000..3a24aa2
--- /dev/null
+++ b/_includes/site-nav.html
@@ -0,0 +1,22 @@
+{% assign nav_active = include.active | default: '' %}
+<div class="site-nav">
+  <div class="hdImgBox">
+    <a href="{{ site.baseurl }}/">
+      <img src="{{ site.baseurl }}/assets/images/homeIcon.png" alt="img">
+    </a>
+  </div>
+  <button class="site-nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav-menu" aria-label="Toggle navigation menu">
+    <img src="{{ site.baseurl }}/assets/images/navigation.jpg" alt="img">
+  </button>
+  <div class="site-nav-menu" id="site-nav-menu">
+    <a class="tab{% if nav_active == 'home' %} is-active{% endif %}" href="{{ site.baseurl }}/index.html">
+      Home
+      {% if nav_active == 'home' %}<span class="dot"></span>{% endif %}
+    </a>
+    <a class="tab{% if nav_active == 'blog' %} is-active{% endif %}" href="{{ site.baseurl }}/blog.html">
+      Blog
+      {% if nav_active == 'blog' %}<span class="dot"></span>{% endif %}
+    </a>
+    <a class="tab" href="https://asterinas.github.io/book">Docs</a>
+  </div>
+</div>
diff --git a/_layouts/blog.html b/_layouts/blog.html
index 1095871..cd4666e 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -4,39 +4,16 @@
 <head>
   <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
   <title>{{ page.title }}</title>
-  <link rel="shortcut icon" type="image/x-icon" href="/assets/images/Asterinas icon (in blue).svg">
-  <link rel="stylesheet" href="/css/blog.css" media="screen and (min-width: 769px)">
-  <link rel="stylesheet" href="/css/blog-mobile.css" media="screen and (max-width: 768px)">
+  <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/Asterinas icon (in blue).svg">
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/blog.css" media="screen and (min-width: 769px)">
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/blog-mobile.css" media="screen and (max-width: 768px)">
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/site-nav.css">
 
 </head>
 
 <body>
   <div class="header">
-    <div class="hdImgBox">
-      <a href="/">
-        <img src="/assets/images/homeIcon.png" alt="img">
-      </a>
-    </div>
-    <div class="hdLink">
-      <div data-tab="1" class="tab">Home</div>
-      <div data-tab="2" class="tab" style="color:#fff">Blog
-        <div class="dot"></div>
-      </div>
-      <div data-tab="3" class="tab">Docs</div>
-    </div>
-    <div class="hdLinks">
-      <div style="cursor: pointer;">
-        <img src="/assets/images/navigation.jpg" alt="img">
-      </div>
-      <div class="tabItem" flot="false">
-        <div data-tab="1" class="tab">Home</div>
-        <div class="line"></div>
-        <div data-tab="2" class="tab" style="color:#fff;font-weight: 500;"><div class="dot"></div>Blog
-        </div>
-        <div class="line"></div>
-        <div data-tab="3" class="tab">Docs</div>
-      </div>
-    </div>
+    {% include site-nav.html active="blog" %}
   </div>
   <div class="tops">
     <div class="banner">
@@ -72,17 +49,17 @@ <h2>{{ year.name }}</h2>
     <div class="footer">
       <!-- <div class="footer-content">
         <div class="footer-img">
-          <a href="/">
-            <img class="footer-imgOne" src="/assets/images/twitter.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgOne" src="{{ site.baseurl }}/assets/images/twitter.png" alt="img">
           </a>
-          <a href="/">
-            <img class="footer-imgTwo" src="/assets/images/flow.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/flow.png" alt="img">
           </a>
-          <a href="/">
-            <img class="footer-imgTwo" src="/assets/images/photo.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/photo.png" alt="img">
           </a>
-          <a href="/">
-            <img class="footer-imgThree" src="/assets/images/email.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgThree" src="{{ site.baseurl }}/assets/images/email.png" alt="img">
           </a>
         </div>
         <div class="footer-title">
@@ -94,67 +71,6 @@ <h2>{{ year.name }}</h2>
   </div>
 </body>
 
-<script>
-  var tabs = document.querySelectorAll('.tab');
-  tabs.forEach(function (tab) {
-    tab.addEventListener('click', function () {
-      var tabId = this.getAttribute('data-tab');
-      if (tabId === '1') {
-        window.location.href = '/index.html';
-      } else if (tabId === '2') {
-        window.location.href = '/blog.html';
-      } else if (tabId === '3') {
-        window.location.href = 'https://asterinas.github.io/book';
-      }
-    });
-  })
-
-  window.addEventListener('DOMContentLoaded', function () {
-    const screenWidth = window.innerWidth;
-    const hdLink = document.querySelectorAll('.hdLink');
-    const hdLinks = document.querySelectorAll('.hdLinks');
-    console.log(screenWidth)
-    if (screenWidth > 768) {
-      console.log(111)
-      hdLink[0].style.display = 'flex';
-      hdLinks[0].style.display = 'none';
-    } else {
-      console.log(222)
-      hdLink[0].style.display = 'none';
-      hdLinks[0].style.display = 'block';
-    }
-
-    // 监听窗口大小变化事件
-    window.addEventListener('resize', function () {
-      const currentScreenWidth = window.innerWidth;
-      if (currentScreenWidth > 768) {
-        hdLink[0].style.display = 'flex';
-        hdLinks[0].style.display = 'none';
-      } else {
-        hdLink[0].style.display = 'none';
-        hdLinks[0].style.display = 'block';
-      }
-    })
-  });
-
-  const hdLinks = document.querySelectorAll('.hdLinks');
-  const tabItem = document.querySelectorAll('.tabItem');
-  hdLinks[0].addEventListener('click', function () {
-    if (tabItem[0].getAttribute('flot') === 'false') {
-      tabItem[0].style.display = 'block';
-      tabItem[0].setAttribute('flot', true);
-    } else {
-      tabItem[0].style.display = 'none';
-      tabItem[0].setAttribute('flot', 'false');
-    }
-  });
-
-  window.onclick = (event) => {
-    if (event.target !== tabItem[0] && event.target !== hdLinks[0].children[0].children[0]) {
-      tabItem[0].style.display = 'none';
-      tabItem[0].setAttribute('flot', 'false');
-    }
-  }
-</script>
+<script src="{{ site.baseurl }}/js/site-nav.js"></script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/_layouts/contributors.html b/_layouts/contributors.html
index 2542926..0637ed2 100644
--- a/_layouts/contributors.html
+++ b/_layouts/contributors.html
@@ -4,39 +4,17 @@
 <head>
     <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ page.title }}</title>
-    <link rel="shortcut icon" type="image/x-icon" href="/assets/images/Asterinas icon (in blue).svg">
-    <link rel="stylesheet" href="/css/contributors.css" media="screen and (min-width: 769px)">
-    <link rel="stylesheet" href="/css/contributors-mobile.css" media="screen and (max-width: 768px)">
+    <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/Asterinas icon (in blue).svg">
+    <link rel="stylesheet" href="{{ site.baseurl }}/css/contributors.css" media="screen and (min-width: 769px)">
+    <link rel="stylesheet" href="{{ site.baseurl }}/css/contributors-mobile.css" media="screen and (max-width: 768px)">
+    <link rel="stylesheet" href="{{ site.baseurl }}/css/site-nav.css">
 
 </head>
 
 <body>
     <!-- 头部 -->
     <div class="header">
-        <div class="hdImgBox">
-            <a href="/">
-                <img src="/assets/images/homeIcon.png" alt="img">
-            </a>
-        </div>
-        <div class="hdLink">
-            <div data-tab="1" class="tab">Home</div>
-            <div data-tab="2" class="tab" style="color:#fff">Blog<div class="dot"> </div>
-            </div>
-            <div data-tab="3" class="tab">Docs</div>
-        </div>
-        <div class="hdLinks">
-            <div style="cursor: pointer;">
-                <img src="/assets/images/navigation.jpg" alt="img">
-            </div>
-            <div class="tabItem" flot="false">
-                <div data-tab="1" class="tab">Home</div>
-                <div class="line"></div>
-                <div data-tab="2" class="tab">Blog
-                </div>
-                <div class="line"></div>
-                <div data-tab="3" class="tab">Docs</div>
-            </div>
-        </div>
+        {% include site-nav.html active="blog" %}
     </div>
     <!-- 中心具体内容框 -->
     <div class="banner">
@@ -141,17 +119,17 @@
     <div class="footer">
         <!-- <div class="footer-content">
             <div class="footer-img">
-                <a href="/">
-                    <img class="footer-imgOne" src="/assets/images/twitter.png" alt="img">
+                <a href="{{ site.baseurl }}/">
+                    <img class="footer-imgOne" src="{{ site.baseurl }}/assets/images/twitter.png" alt="img">
                 </a>
-                <a href="/">
-                    <img class="footer-imgTwo" src="/assets/images/flow.png" alt="img">
+                <a href="{{ site.baseurl }}/">
+                    <img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/flow.png" alt="img">
                 </a>
-                <a href="/">
-                    <img class="footer-imgTwo" src="/assets/images/photo.png" alt="img">
+                <a href="{{ site.baseurl }}/">
+                    <img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/photo.png" alt="img">
                 </a>
-                <a href="/">
-                    <img class="footer-imgThree" src="/assets/images/email.png" alt="img">
+                <a href="{{ site.baseurl }}/">
+                    <img class="footer-imgThree" src="{{ site.baseurl }}/assets/images/email.png" alt="img">
                 </a>
             </div>
             <div class="footer-title">
@@ -164,22 +142,6 @@
 
     <script>
 
-        var tabs = document.querySelectorAll('.tab');
-        tabs.forEach(function (tab) {
-            tab.addEventListener('click', function () {
-                var tabId = this.getAttribute('data-tab');
-                if (tabId === '1') {
-                    window.location.href = '/index.html';
-                } else if (tabId === '2') {
-                    window.location.href = '/blog.html';
-                } else if (tabId === '3') {
-                    window.location.href = 'https://asterinas.github.io/book';
-                }
-            });
-
-        })
-
-
         // 获取所有的选项卡头部和内容区域
         const headers = document.querySelectorAll('.data-select');
         const bodies = document.querySelectorAll('.rankingTable');
@@ -352,55 +314,8 @@
         linkPastMonth()
 
 
-        window.addEventListener('DOMContentLoaded', function () {
-            const screenWidth = window.innerWidth;
-            const hdLink = document.querySelectorAll('.hdLink');
-            const hdLinks = document.querySelectorAll('.hdLinks');
-            console.log(screenWidth)
-            if (screenWidth > 768) {
-                console.log(111)
-                hdLink[0].style.display = 'flex';
-                hdLinks[0].style.display = 'none';
-            } else {
-                console.log(222)
-                hdLink[0].style.display = 'none';
-                hdLinks[0].style.display = 'block';
-            }
-
-            // 监听窗口大小变化事件
-            window.addEventListener('resize', function () {
-                const currentScreenWidth = window.innerWidth;
-                if (currentScreenWidth > 768) {
-                    hdLink[0].style.display = 'flex';
-                    hdLinks[0].style.display = 'none';
-                } else {
-                    hdLink[0].style.display = 'none';
-                    hdLinks[0].style.display = 'block';
-                }
-            })
-        });
-
-        const hdLinks = document.querySelectorAll('.hdLinks');
-        const tabItem = document.querySelectorAll('.tabItem');
-        hdLinks[0].addEventListener('click', function () {
-            if (tabItem[0].getAttribute('flot') === 'false') {
-                tabItem[0].style.display = 'block';
-                tabItem[0].setAttribute('flot', true);
-            } else {
-                tabItem[0].style.display = 'none';
-                tabItem[0].setAttribute('flot', 'false');
-            }
-        });
-
-        window.onclick = (event) => {
-            if (event.target !== tabItem[0] && event.target !== hdLinks[0].children[0].children[0]) {
-                tabItem[0].style.display = 'none';
-                tabItem[0].setAttribute('flot', 'false');
-            }
-        }
-
-
     </script>
+    <script src="{{ site.baseurl }}/js/site-nav.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/_layouts/homes.html b/_layouts/homes.html
index 1d2c522..612bc55 100644
--- a/_layouts/homes.html
+++ b/_layouts/homes.html
@@ -5,38 +5,16 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ page.title }}</title>
-  <link rel="shortcut icon" type="image/x-icon" href="/assets/images/Asterinas icon (in blue).svg">
-  <link rel="stylesheet" href="/css/style.css" media="screen and (min-width: 769px)">
-  <link rel="stylesheet" href="/css/style-mobile.css" media="screen and (max-width: 768px)">
+  <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/Asterinas icon (in blue).svg">
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/style.css" media="screen and (min-width: 769px)">
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/style-mobile.css" media="screen and (max-width: 768px)">
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/site-nav.css">
 
 </head>
 
 <body>
   <div class="header">
-    <div class="hdImgBox">
-      <a href="/">
-        <img src="/assets/images/homeIcon.png" alt="img">
-      </a>
-    </div>
-    <div class="hdLink">
-      <div data-tab="1" class="tab" style="color:#fff">Home
-        <div class="dot"></div>
-      </div>
-      <div data-tab="2" class="tab">Blog</div>
-      <div data-tab="3" class="tab">Docs</div>
-    </div>
-    <div class="hdLinks">
-      <div style="cursor: pointer;">
-        <img src="/assets/images/navigation.jpg" alt="img">
-      </div>
-      <div class="tabItem" flot="false">
-        <div data-tab="1" class="tab" style="color:#fff;font-weight: 500;"><div class="dot"></div>Home</div>
-        <div class="line"></div>
-        <div data-tab="2" class="tab">Blog</div>
-        <div class="line"></div>
-        <div data-tab="3" class="tab">Docs</div>
-      </div>
-    </div>
+    {% include site-nav.html active="home" %}
   </div>
   <div class="tops">
     <div class="banner">
@@ -84,7 +62,7 @@
                       </p>
                       <div class="tb-feature">
                         <div class="tb-featureOne">
-                          <img src="/assets/images/Strong.png" alt="img">
+                          <img src="{{ site.baseurl }}/assets/images/Strong.png" alt="img">
                           <div class="tb-featureBox">
                             <div class="tb-feature-title">
                               Strong Security
@@ -98,7 +76,7 @@
 
                         </div>
                         <div class="tb-featureTwo">
-                          <img src="/assets/images/Excellent.png" alt="img">
+                          <img src="{{ site.baseurl }}/assets/images/Excellent.png" alt="img">
                           <div class="tb-featureBox">
                             <div class="tb-feature-title">
                               Excellent Performance
@@ -112,7 +90,7 @@
 
                         </div>
                         <div class="tb-featureThree">
-                          <img src="/assets/images/Broad.png" alt="img">
+                          <img src="{{ site.baseurl }}/assets/images/Broad.png" alt="img">
                           <div class="tb-featureBox">
                             <div class="tb-feature-title">
                               Broad Usage
@@ -126,7 +104,7 @@
 
                         </div>
                         <div class="tb-featureFour">
-                          <img src="/assets/images/Seamless.png" alt="img">
+                          <img src="{{ site.baseurl }}/assets/images/Seamless.png" alt="img">
                           <div class="tb-featureBox">
                             <div class="tb-feature-title">
                               Seamless Compatibility
@@ -168,25 +146,25 @@
                         <div class="ti-left">
                           <div class="tl-jump actives" data-tab="tabs1">
                             <div class="tl-jumpImg">
-                              <img style="width: 2rem;" src="/assets/images/jump.png" alt="img">
+                              <img style="width: 2rem;" src="{{ site.baseurl }}/assets/images/jump.png" alt="img">
                             </div>
                             Jump start
                           </div>
                           <div class="tl-jump" data-tab="tabs2">
                             <div class="tl-jumpImg">
-                              <img style="width: 1.3rem;" src="/assets/images/crate.png" alt="img">
+                              <img style="width: 1.3rem;" src="{{ site.baseurl }}/assets/images/crate.png" alt="img">
                             </div>
                             Crate reuse
                           </div>
                           <div class="tl-jump" data-tab="tabs3">
                             <div class="tl-jumpImg">
-                              <img style="width: 1.3rem;" src="/assets/images/rapid.png" alt="img">
+                              <img style="width: 1.3rem;" src="{{ site.baseurl }}/assets/images/rapid.png" alt="img">
                             </div>
                             Rapid testing
                           </div>
                           <div class="tl-jump" data-tab="tabs4">
                             <div class="tl-jumpImg">
-                              <img style="width: 1.3rem;" src="/assets/images/safe.png" alt="img">
+                              <img style="width: 1.3rem;" src="{{ site.baseurl }}/assets/images/safe.png" alt="img">
                             </div>
                             Safe coding
                           </div>
@@ -197,11 +175,11 @@
                               <div class="tl-jumps actives-mobile" data-tab="mobile-tabs1">
                                 <div class="ti-lefts-box">
                                   <div class="tl-jumpImgs" style="margin-left: -0.3rem; margin-right: .45rem;">
-                                    <img style="width: 2rem;" src="/assets/images/jump-mobile.png" alt="img">
+                                    <img style="width: 2rem;" src="{{ site.baseurl }}/assets/images/jump-mobile.png" alt="img">
                                   </div>
                                   Jump start
                                 </div>
-                                <img class="ti-direction" src="/assets/images/direction.png" alt="img">
+                                <img class="ti-direction" src="{{ site.baseurl }}/assets/images/direction.png" alt="img">
                               </div>
                               <!-- 第一个Jump start样式框 -->
                               <div class="ti-rights-box actives-mobile" id="mobile-tabs1">
@@ -245,11 +223,11 @@
                               <div class="tl-jumps" data-tab="mobile-tabs2">
                                 <div class="ti-lefts-box">
                                   <div class="tl-jumpImgs">
-                                    <img style="width: 1.3rem;" src="/assets/images/crate-mobile.png" alt="img">
+                                    <img style="width: 1.3rem;" src="{{ site.baseurl }}/assets/images/crate-mobile.png" alt="img">
                                   </div>
                                   Crate reuse
                                 </div>
-                                <img class="ti-direction" src="/assets/images/direction.png" alt="img">
+                                <img class="ti-direction" src="{{ site.baseurl }}/assets/images/direction.png" alt="img">
                               </div>
                               <!-- 第一个Rapid testing样式框 -->
                               <div class="ti-rights-box" id="mobile-tabs2">
@@ -261,7 +239,7 @@
                                       This fosters a more vibrant ecosystem of OS crates,
                                       reusable across different Rust OSes.
                                     </p>
-                                    <img class="acimg" style="margin-top: .4rem;" src="/assets/images/reusable.png"
+                                    <img class="acimg" style="margin-top: .4rem;" src="{{ site.baseurl }}/assets/images/reusable.png"
                                       alt="img">
                                   </div>
                                 </div>
@@ -271,11 +249,11 @@
                               <div class="tl-jumps" data-tab="mobile-tabs3">
                                 <div class="ti-lefts-box">
                                   <div class="tl-jumpImgs">
-                                    <img style="width: 1.3rem;" src="/assets/images/rapid-mobile.png" alt="img">
+                                    <img style="width: 1.3rem;" src="{{ site.baseurl }}/assets/images/rapid-mobile.png" alt="img">
                                   </div>
                                   Rapid testing
                                 </div>
-                                <img class="ti-direction" src="/assets/images/direction.png" alt="img">
+                                <img class="ti-direction" src="{{ site.baseurl }}/assets/images/direction.png" alt="img">
                               </div>
                               <!-- 第一个Rapid testing样式框 -->
                               <div class="ti-rights-box" id="mobile-tabs3">
@@ -312,11 +290,11 @@
                               <div class="tl-jumps" data-tab="mobile-tabs4">
                                 <div class="ti-lefts-box">
                                   <div class="tl-jumpImgs">
-                                    <img style="width: 1.3rem;" src="/assets/images/safe-mobile.png" alt="img">
+                                    <img style="width: 1.3rem;" src="{{ site.baseurl }}/assets/images/safe-mobile.png" alt="img">
                                   </div>
                                   Safe coding
                                 </div>
-                                <img class="ti-direction" src="/assets/images/direction.png" alt="img">
+                                <img class="ti-direction" src="{{ site.baseurl }}/assets/images/direction.png" alt="img">
                               </div>
                               <!-- 第一个Safe coding样式框 -->
                               <div class="ti-rights-box" id="mobile-tabs4">
@@ -419,7 +397,7 @@
                                   This fosters a more vibrant ecosystem of OS crates, reusable
                                   across different Rust OSes.
                                 </p>
-                                <img class="acimg" style="margin-top: .4rem;" src="/assets/images/reusable.png"
+                                <img class="acimg" style="margin-top: .4rem;" src="{{ site.baseurl }}/assets/images/reusable.png"
                                   alt="img">
                               </div>
                             </div>
@@ -452,8 +430,8 @@
                     </div>
                     <div>
                       <div>
-                        <div class="tb-seeBoxs">
-                        </div>
+                        <a class="tb-seeBoxs" href="{{ site.baseurl }}/contributors.html" aria-label="See individual contributors">
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -469,12 +447,12 @@
                     <div class="speed">
 
                       <span class="speed-span">
-                        <span><img class="speed-img" src="/assets/images/yinone.png" alt="img"></span>
+                        <span><img class="speed-img" src="{{ site.baseurl }}/assets/images/yinone.png" alt="img"></span>
                         The speed of a monolithic kernel, the security of a microkernel
-                        <span><img class="speed-img" src="/assets/images/yintow.png" alt="img"></span>
+                        <span><img class="speed-img" src="{{ site.baseurl }}/assets/images/yintow.png" alt="img"></span>
 
                       </span>
-                      <img class="speed-imgone" src="/assets/images/yinthree.png" alt="img">
+                      <img class="speed-imgone" src="{{ site.baseurl }}/assets/images/yinthree.png" alt="img">
                     </div>
                     <div class="tb-text">
                       Asterinas adopts the novel framekernel OS architecture, which unleashes the full power of Rust
@@ -489,57 +467,57 @@
                     </div>
                     <div class="tb-osBox">
                       <div class="tb-oscon">
-                        <img src="/assets/images/monolithic.png" alt="img">
+                        <img src="{{ site.baseurl }}/assets/images/monolithic.png" alt="img">
                         <div class="tb-oscon-intBox">
                           <div class="tb-oscon-introduce">
-                            <img class="tb-oscon-tcb" src="/assets/images/tcb.png" alt="img">
+                            <img class="tb-oscon-tcb" src="{{ site.baseurl }}/assets/images/tcb.png" alt="img">
                             <span>TCB</span>
                           </div>
                           <div class="tb-oscon-introduce" style="margin-right: .4rem;">
-                            <img class="tb-oscon-tcb" src="/assets/images/nontcb.png" alt="img">
+                            <img class="tb-oscon-tcb" src="{{ site.baseurl }}/assets/images/nontcb.png" alt="img">
                             <span>Non-TCB</span>
                           </div>
                         </div>
                       </div>
                       <div class="tb-oscon">
-                        <img src="/assets/images/microkernel.png" alt="img">
+                        <img src="{{ site.baseurl }}/assets/images/microkernel.png" alt="img">
                         <div class="tb-oscon-introduce">
-                          <img class="tb-oscon-slow" src="/assets/images/slow.png" alt="img">
+                          <img class="tb-oscon-slow" src="{{ site.baseurl }}/assets/images/slow.png" alt="img">
                           <span>Slow path (e.g., syscall, RPG)</span>
                         </div>
                       </div>
                       <div class="tb-oscon">
-                        <img src="/assets/images/framekernel.png" alt="img">
+                        <img src="{{ site.baseurl }}/assets/images/framekernel.png" alt="img">
                         <div class="tb-oscon-introduce">
-                          <img class="tb-oscon-fast" src="/assets/images/fast.png" alt="img">
+                          <img class="tb-oscon-fast" src="{{ site.baseurl }}/assets/images/fast.png" alt="img">
                           <span>Fast path (e.g., func call)</span>
                         </div>
                       </div>
                     </div>
                     <div class="tb-osBox-mobile">
                       <div id="carousel" class="carousel">
-                        <div class="carousel-item" ><img src="/assets/images/monolithic-mobile.png"
+                        <div class="carousel-item" ><img src="{{ site.baseurl }}/assets/images/monolithic-mobile.png"
                             alt="Image 1"></div>
-                        <div class="carousel-item" ><img src="/assets/images/frame-mobile.png"
+                        <div class="carousel-item" ><img src="{{ site.baseurl }}/assets/images/frame-mobile.png"
                             alt="Image 2"></div>
-                        <div class="carousel-item" ><img src="/assets/images/micro-mobile.png"
+                        <div class="carousel-item" ><img src="{{ site.baseurl }}/assets/images/micro-mobile.png"
                             alt="Image 3"></div>
                       </div>
                       <div class="tb-oscon-intBox">
                         <div class="tb-oscon-introduce">
-                          <img class="tb-oscon-tcb" src="/assets/images/tcb.png" alt="img">
+                          <img class="tb-oscon-tcb" src="{{ site.baseurl }}/assets/images/tcb.png" alt="img">
                           <span>TCB</span>
                         </div>
                         <div class="tb-oscon-introduce">
-                          <img class="tb-oscon-tcb" src="/assets/images/nontcb.png" alt="img">
+                          <img class="tb-oscon-tcb" src="{{ site.baseurl }}/assets/images/nontcb.png" alt="img">
                           <span>Non-TCB</span>
                         </div>
                         <div class="tb-oscon-introduce">
-                          <img class="tb-oscon-slow" src="/assets/images/slow.png" alt="img">
+                          <img class="tb-oscon-slow" src="{{ site.baseurl }}/assets/images/slow.png" alt="img">
                           <span>Slow path</span>
                         </div>
                         <div class="tb-oscon-introduce">
-                          <img class="tb-oscon-fast" src="/assets/images/fast.png" alt="img">
+                          <img class="tb-oscon-fast" src="{{ site.baseurl }}/assets/images/fast.png" alt="img">
                           <span>Fast path</span>
                         </div>
                       </div>
@@ -613,7 +591,7 @@
                           <div class="tb-get-texts">
                             <div>
                               We pride ourselves on providing comprehensive documentation.
-                              Check out <a href="/book">The Asterinas Book</a> to learn more about Asterinas's technical details.
+                              Check out <a href="{{ site.baseurl }}/book">The Asterinas Book</a> to learn more about Asterinas's technical details.
                             </div>
                           </div>
                           <div class="tb-get-text">
@@ -641,12 +619,12 @@
                       We express our heartfelt gratitude to the contributors who have made this project a reality.
                     </div>
                     <div class="tb-seeBox">
-                      <button class="tb-see">
+                      <a class="tb-see" href="{{ site.baseurl }}/contributors.html">
                         <div class="tb-see-title">
                           See individual contributors
                         </div>
-                        <img src="/assets/images/right.png" alt="img">
-                      </button>
+                        <img src="{{ site.baseurl }}/assets/images/right.png" alt="img">
+                      </a>
                     </div>
 
                     <div class="tb-text">
@@ -686,17 +664,17 @@
     <div class="footer">
       <!-- <div class="footer-content">
         <div class="footer-img">
-          <a href="/">
-            <img class="footer-imgOne" src="/assets/images/twitter.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgOne" src="{{ site.baseurl }}/assets/images/twitter.png" alt="img">
           </a>
-          <a href="/">
-            <img class="footer-imgTwo" src="/assets/images/flow.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/flow.png" alt="img">
           </a>
-          <a href="/">
-            <img class="footer-imgTwo" src="/assets/images/photo.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/photo.png" alt="img">
           </a>
-          <a href="/">
-            <img class="footer-imgThree" src="/assets/images/email.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgThree" src="{{ site.baseurl }}/assets/images/email.png" alt="img">
           </a>
         </div>
         <div class="footer-title">
@@ -709,22 +687,6 @@
 
   <script>
 
-    var tabs = document.querySelectorAll('.tab');
-    tabs.forEach(function (tab) {
-      tab.addEventListener('click', function () {
-        var tabId = this.getAttribute('data-tab');
-        if (tabId === '1') {
-          window.location.href = '/index.html';
-        } else if (tabId === '2') {
-          window.location.href = '/blog.html';
-        } else if (tabId === '3') {
-          window.location.href = 'https://asterinas.github.io/book';
-        }
-      });
-
-    })
-
-
     window.addEventListener('DOMContentLoaded', function () {
       const screenWidth = window.innerWidth;
       const overlay = document.querySelector('.overlay');
@@ -799,16 +761,6 @@
       });
     });
 
-    const seeBox = document.querySelectorAll('.tb-seeBox');
-    seeBox[0].addEventListener('click', function () {
-      window.location.href = '/contributors.html';
-    })
-
-    const seeBoxs = document.querySelectorAll('.tb-seeBoxs');
-    seeBoxs[0].addEventListener('click', function () {
-      window.location.href = '/contributors.html';
-    })
-
     // 获取所有的图片元素
     let carouselItems = document.querySelectorAll('.carousel-item');
 
@@ -860,55 +812,8 @@
       }
     }, false);
 
-
-    window.addEventListener('DOMContentLoaded', function () {
-      const screenWidth = window.innerWidth;
-      const hdLink = document.querySelectorAll('.hdLink');
-      const hdLinks = document.querySelectorAll('.hdLinks');
-      console.log(screenWidth)
-      if (screenWidth > 768) {
-        console.log(111)
-        hdLink[0].style.display = 'flex';
-        hdLinks[0].style.display = 'none';
-      } else {
-        console.log(222)
-        hdLink[0].style.display = 'none';
-        hdLinks[0].style.display = 'block';
-      }
-
-      // 监听窗口大小变化事件
-      window.addEventListener('resize', function () {
-        const currentScreenWidth = window.innerWidth;
-        if (currentScreenWidth > 768) {
-          hdLink[0].style.display = 'flex';
-          hdLinks[0].style.display = 'none';
-        } else {
-          hdLink[0].style.display = 'none';
-          hdLinks[0].style.display = 'block';
-        }
-      })
-    });
-
-    const hdLinks = document.querySelectorAll('.hdLinks');
-    const tabItem = document.querySelectorAll('.tabItem');
-    hdLinks[0].addEventListener('click', function () {
-      if (tabItem[0].getAttribute('flot') === 'false') {
-        tabItem[0].style.display = 'block';
-        tabItem[0].setAttribute('flot', true);
-      } else {
-        tabItem[0].style.display = 'none';
-        tabItem[0].setAttribute('flot', 'false');
-      }
-    });
-
-    window.onclick = (event) => {
-      if (event.target !== tabItem[0] && event.target !== hdLinks[0].children[0].children[0]) {
-        tabItem[0].style.display = 'none';
-        tabItem[0].setAttribute('flot', 'false');
-      }
-    }
-
   </script>
+  <script src="{{ site.baseurl }}/js/site-nav.js"></script>
 </body>
 
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
index 0e6f0e3..cf95fcf 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -5,37 +5,15 @@
 <head>
   <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
   <title>{{ page.title }}</title>
-  <link rel="shortcut icon" type="image/x-icon" href="/assets/images/Asterinas icon (in blue).svg">
-  <link rel="stylesheet" href="/css/post.css" media="screen and (min-width: 769px)">
-  <link rel="stylesheet" href="/css/post-mobile.css" media="screen and (max-width: 768px)">
+  <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/Asterinas icon (in blue).svg">
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/post.css" media="screen and (min-width: 769px)">
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/post-mobile.css" media="screen and (max-width: 768px)">
+  <link rel="stylesheet" href="{{ site.baseurl }}/css/site-nav.css">
 </head>
 
 <body>
   <div class="header">
-    <div class="hdImgBox">
-      <a href="/">
-        <img src="/assets/images/homeIcon.png" alt="img">
-      </a>
-    </div>
-    <div class="hdLink">
-      <div data-tab="1" class="tab">Home</div>
-      <div data-tab="2" class="tab" style="color:#fff">Blog<div class="dot"> </div>
-      </div>
-      <div data-tab="3" class="tab">Docs</div>
-    </div>
-    <div class="hdLinks">
-      <div style="cursor: pointer;">
-        <img src="/assets/images/navigation.jpg" alt="img">
-      </div>
-      <div class="tabItem" flot="false">
-        <div data-tab="1" class="tab">Home</div>
-        <div class="line"></div>
-        <div data-tab="2" class="tab" style="color:#fff;font-weight: 500;"><div class="dot"></div>Blog
-        </div>
-        <div class="line"></div>
-        <div data-tab="3" class="tab">Docs</div>
-      </div>
-    </div>
+    {% include site-nav.html active="blog" %}
   </div>
   <div class="tops">
     <div class="banner">
@@ -62,17 +40,17 @@ <h1>{{page.title}}</h1>
     <div class="footer">
       <!-- <div class="footer-content">
         <div class="footer-img">
-          <a href="/">
-            <img class="footer-imgOne" src="/assets/images/twitter.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgOne" src="{{ site.baseurl }}/assets/images/twitter.png" alt="img">
           </a>
-          <a href="/">
-            <img class="footer-imgTwo" src="/assets/images/flow.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/flow.png" alt="img">
           </a>
-          <a href="/">
-            <img class="footer-imgTwo" src="/assets/images/photo.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/photo.png" alt="img">
           </a>
-          <a href="/">
-            <img class="footer-imgThree" src="/assets/images/email.png" alt="img">
+          <a href="{{ site.baseurl }}/">
+            <img class="footer-imgThree" src="{{ site.baseurl }}/assets/images/email.png" alt="img">
           </a>
         </div>
         <div class="footer-title">
@@ -85,36 +63,16 @@ <h1>{{page.title}}</h1>
 </body>
 
 <script>
-  var tabs = document.querySelectorAll('.tab');
-  tabs.forEach(function (tab) {
-    tab.addEventListener('click', function () {
-      var tabId = this.getAttribute('data-tab');
-      if (tabId === '1') {
-        window.location.href = '/index.html';
-      } else if (tabId === '2') {
-        window.location.href = '/blog.html';
-      } else if (tabId === '3') {
-        window.location.href = 'https://asterinas.github.io/book';
-      }
-    });
-  })
-
   window.addEventListener('DOMContentLoaded', function () {
     const screenWidth = window.innerWidth;
-    const hdLink = document.querySelectorAll('.hdLink');
-    const hdLinks = document.querySelectorAll('.hdLinks');
     const blogTitle = document.querySelectorAll('.blogTitle');
     const postHeader1 = document.querySelectorAll('.postHeader1');
     const postHeader = document.querySelectorAll('.postHeader');
     if (screenWidth > 768) {
-      hdLink[0].style.display = 'flex';
-      hdLinks[0].style.display = 'none';
       blogTitle[0].style.display = 'block';
       postHeader[0].style.display = 'block';
       postHeader1[0].style.display = 'none';
     } else {
-      hdLink[0].style.display = 'none';
-      hdLinks[0].style.display = 'block';
       blogTitle[0].style.display = 'none';
       postHeader[0].style.display = 'none';
       postHeader1[0].style.display = 'block';
@@ -124,39 +82,17 @@ <h1>{{page.title}}</h1>
     window.addEventListener('resize', function () {
       const currentScreenWidth = window.innerWidth;
       if (currentScreenWidth > 768) {
-        hdLink[0].style.display = 'flex';
-        hdLinks[0].style.display = 'none';
         blogTitle[0].style.display = 'block';
         postHeader[0].style.display = 'block';
         postHeader1[0].style.display = 'none';
       } else {
-        hdLink[0].style.display = 'none';
-        hdLinks[0].style.display = 'block';
         blogTitle[0].style.display = 'none';
         postHeader[0].style.display = 'none';
         postHeader1[0].style.display = 'block';
       }
     })
   });
-
-  const hdLinks = document.querySelectorAll('.hdLinks');
-  const tabItem = document.querySelectorAll('.tabItem');
-  hdLinks[0].addEventListener('click', function () {
-    if (tabItem[0].getAttribute('flot') === 'false') {
-      tabItem[0].style.display = 'block';
-      tabItem[0].setAttribute('flot', true);
-    } else {
-      tabItem[0].style.display = 'none';
-      tabItem[0].setAttribute('flot', 'false');
-    }
-  });
-
-  window.onclick = (event) => {
-    if (event.target !== tabItem[0] && event.target !== hdLinks[0].children[0].children[0]) {
-      tabItem[0].style.display = 'none';
-      tabItem[0].setAttribute('flot', 'false');
-    }
-  }
 </script>
+<script src="{{ site.baseurl }}/js/site-nav.js"></script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/css/blog-mobile.css b/css/blog-mobile.css
index 6a7660a..b686069 100644
--- a/css/blog-mobile.css
+++ b/css/blog-mobile.css
@@ -1,3 +1,5 @@
+---
+---
 /**
  * Reset some basic elements
  */
@@ -208,6 +210,7 @@ a {
 }
 
 .tabItem .tab {
+    display: block;
     width: 7.65rem;
     height: 3.9rem;
     line-height: 3.9rem;
@@ -242,7 +245,7 @@ a {
 /* 页面背景 */
 .tops {
     width: 100%;
-    background-image: url("/assets/images/blog-mobile.png");
+    background-image: url("{{ '/assets/images/blog-mobile.png' | relative_url }}");
     background-size: 100% 16.6rem;
     background-repeat: no-repeat;
     background-position: 100% 0%;
@@ -382,4 +385,4 @@ h2 {
     /* 设置透明边框 */
     box-shadow: inset 0 0 0 1px rgba(0, 247, 255, 0.4971), inset 0 0 0 1px #1937FF;
     /* inset 阴影模拟边框 */
-}
\ No newline at end of file
+}
diff --git a/css/blog.css b/css/blog.css
index 7a56514..4b2dff6 100644
--- a/css/blog.css
+++ b/css/blog.css
@@ -1,3 +1,5 @@
+---
+---
 /**
  * Reset some basic elements
  */
@@ -159,7 +161,7 @@ a {
 .tops {
     width: 100%;
     max-width: 19.2rem;
-    background-image: url("/assets/images/posts.png");
+    background-image: url("{{ '/assets/images/posts.png' | relative_url }}");
     background-size: 75% 6.6rem;
     background-repeat: no-repeat;
     background-position: 50% 0%;
@@ -506,4 +508,4 @@ h2 {
     letter-spacing: 0px;
 
     color: #7F818C;
-}
\ No newline at end of file
+}
diff --git a/css/contributors-mobile.css b/css/contributors-mobile.css
index 30b8c94..0a6ed9d 100644
--- a/css/contributors-mobile.css
+++ b/css/contributors-mobile.css
@@ -1,3 +1,5 @@
+---
+---
 /**
  * Reset some basic elements
  */
@@ -210,6 +212,7 @@ a {
 }
 
 .tabItem .tab {
+    display: block;
     width: 7.65rem;
     height: 3.9rem;
     line-height: 3.9rem;
@@ -290,7 +293,7 @@ a {
 .img-title {
     height: 14.7rem;
     margin-top: 2rem;
-    background-image: url("/assets/images/xingxing.png");
+    background-image: url("{{ '/assets/images/xingxing.png' | relative_url }}");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     display: flex;
@@ -530,4 +533,4 @@ a {
     font-size: 1.05rem;
     color: #C3C6D5;
     border: none;
-}
\ No newline at end of file
+}
diff --git a/css/contributors.css b/css/contributors.css
index b64d6f3..bc35056 100644
--- a/css/contributors.css
+++ b/css/contributors.css
@@ -1,3 +1,5 @@
+---
+---
 /**
  * Reset some basic elements
  */
@@ -218,7 +220,7 @@ a {
     width: 100%;
     max-width: 11.58rem;
     height: 4.8rem;
-    background-image: url("/assets/images/xingxing.png");
+    background-image: url("{{ '/assets/images/xingxing.png' | relative_url }}");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     display: flex;
@@ -505,4 +507,4 @@ a {
     letter-spacing: 0px;
 
     color: #7F818C;
-}
\ No newline at end of file
+}
diff --git a/css/post-mobile.css b/css/post-mobile.css
index da291a7..e091761 100644
--- a/css/post-mobile.css
+++ b/css/post-mobile.css
@@ -1,3 +1,5 @@
+---
+---
 /**
  * Reset some basic elements
  */
@@ -227,6 +229,7 @@ a:hover {
 }
 
 .tabItem .tab {
+    display: block;
     width: 7.65rem;
     height: 3.9rem;
     line-height: 3.9rem;
@@ -261,7 +264,7 @@ a:hover {
 /* 页面背景 */
 .tops {
     width: 100%;
-    background-image: url("/assets/images/post-mobile.png");
+    background-image: url("{{ '/assets/images/post-mobile.png' | relative_url }}");
     background-size: 100% 18.538rem;
     background-repeat: no-repeat;
     background-position: center top -1.75rem;
@@ -786,4 +789,4 @@ p .language-plaintext {
     width: 100%;
     height: 100%;
     border: 0; /* Ensures no extra border from the iframe */
-}
\ No newline at end of file
+}
diff --git a/css/post.css b/css/post.css
index 53bed4a..0fb5ba7 100644
--- a/css/post.css
+++ b/css/post.css
@@ -1,3 +1,5 @@
+---
+---
 /**
  * Reset some basic elements
  */
@@ -230,7 +232,7 @@ a:hover {
 .tops {
   width: 100%;
   max-width: 19.2rem;
-  background-image: url("/assets/images/posts.png");
+  background-image: url("{{ '/assets/images/posts.png' | relative_url }}");
   background-size: 75% 6.6rem;
   background-repeat: no-repeat;
   height: 6.6rem;
@@ -831,4 +833,4 @@ p img {
     width: 100%;
     height: 100%;
     border: 0; /* Ensures no extra border from the iframe */
-}
\ No newline at end of file
+}
diff --git a/css/site-nav.css b/css/site-nav.css
new file mode 100644
index 0000000..0dedd3c
--- /dev/null
+++ b/css/site-nav.css
@@ -0,0 +1,145 @@
+.site-nav {
+    width: 100%;
+    max-width: 19.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.site-nav-menu {
+    margin-left: 2.07rem;
+    width: 4.68rem;
+    height: .64rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.site-nav .tab {
+    width: 1rem;
+    height: 1.04rem;
+    text-align: center;
+    line-height: 1.04rem;
+    font-size: .22rem;
+    color: #7F818C;
+    cursor: pointer;
+    position: relative;
+    text-decoration: none;
+}
+
+.site-nav .tab.is-active {
+    color: #fff;
+    font-weight: 500;
+}
+
+.site-nav .dot {
+    height: 0.1rem;
+    width: 0.1rem;
+    background: #00F7FF;
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+    bottom: -0.05rem;
+    left: 0.45rem;
+    z-index: 1000;
+}
+
+.site-nav-toggle {
+    display: none;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 768px) {
+    .header {
+        position: relative;
+    }
+
+    .site-nav {
+        display: block;
+        max-width: none;
+        width: 100%;
+        position: static;
+    }
+
+    .site-nav-toggle {
+        display: block;
+        margin: 0;
+        width: 1.8rem;
+        height: 1.45rem;
+        position: absolute;
+        top: 3.25rem;
+        right: 1.2rem;
+        z-index: 1002;
+    }
+
+    .site-nav-toggle img {
+        width: 100%;
+        height: 100%;
+    }
+
+    .site-nav-menu {
+        margin-left: 0;
+        width: 7.65rem;
+        height: auto;
+        display: none;
+        position: absolute;
+        right: 1.2rem;
+        top: calc(100% + 1.2rem);
+        border-radius: 1rem;
+        background-color: rgb(6, 42, 97);
+        flex-direction: column;
+        justify-content: flex-start;
+        z-index: 1001;
+    }
+
+    .site-nav-menu::after {
+        content: '';
+        position: absolute;
+        top: -0.55rem;
+        right: 0.55rem;
+        border-left: 0.55rem solid transparent;
+        border-right: 0.55rem solid transparent;
+        border-bottom: 0.55rem solid rgb(6, 42, 97);
+        width: 0;
+        height: 0;
+    }
+
+    .site-nav.is-open .site-nav-menu {
+        display: flex;
+    }
+
+    .site-nav .tab {
+        display: block;
+        width: 7.65rem;
+        height: 3.9rem;
+        line-height: 3.9rem;
+        color: #D8D8D8;
+        font-size: 1.4rem;
+        text-align: center;
+    }
+
+    .site-nav .tab + .tab {
+        border-top: 0.1rem solid;
+        border-image: linear-gradient(to right,
+                rgba(255, 255, 255, 0) 0%,
+                rgba(255, 255, 255, .5) 25%,
+                rgba(255, 255, 255, .5) 75%,
+                rgba(255, 255, 255, 0) 100%) 1;
+    }
+
+    .site-nav .tab.is-active {
+        color: #fff;
+    }
+
+    .site-nav .dot {
+        height: 0.4rem;
+        width: 0.4rem;
+        left: 1.1rem;
+        top: calc(50% - 0.2rem);
+        bottom: auto;
+    }
+}
diff --git a/css/style-mobile.css b/css/style-mobile.css
index 110b3d7..805a088 100644
--- a/css/style-mobile.css
+++ b/css/style-mobile.css
@@ -1,3 +1,5 @@
+---
+---
 /**
  * Reset some basic elements
  */
@@ -210,6 +212,7 @@ a {
 }
 
 .tabItem .tab {
+    display: block;
     width: 7.65rem;
     height: 3.9rem;
     cursor: pointer;
@@ -247,7 +250,7 @@ a {
 
 .tops {
     width: 100%;
-    background-image: url("/assets/images/ydbeijing.png");
+    background-image: url("{{ '/assets/images/ydbeijing.png' | relative_url }}");
     background-size: 100% 39.5rem;
     background-repeat: no-repeat;
     background-position: center top -7rem;
@@ -590,7 +593,7 @@ a {
 
 .tb-get-titleBox {
     width: 13.3rem;
-    background-image: url("/assets/images/unite.png");
+    background-image: url("{{ '/assets/images/unite.png' | relative_url }}");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     display: flex;
diff --git a/css/style.css b/css/style.css
index c357f5a..30d9f05 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,5 @@
+---
+---
 /**
  * Reset some basic elements
  */
@@ -160,7 +162,7 @@
  .tops {
      width: 100%;
      max-width: 19.2rem;
-     background-image: url("/assets/images/beijing.jpg");
+     background-image: url("{{ '/assets/images/beijing.jpg' | relative_url }}");
      background-size: 100% 10.34rem;
      background-repeat: no-repeat;
  }
@@ -651,7 +653,7 @@
  .tb-get-titleBox {
      width: 3.103rem;
      height: 5.66rem;
-     background-image: url("/assets/images/unite.png");
+     background-image: url("{{ '/assets/images/unite.png' | relative_url }}");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
diff --git a/js/site-nav.js b/js/site-nav.js
new file mode 100644
index 0000000..71dc963
--- /dev/null
+++ b/js/site-nav.js
@@ -0,0 +1,41 @@
+window.addEventListener('DOMContentLoaded', function () {
+  const nav = document.querySelector('.site-nav');
+  if (!nav) {
+    return;
+  }
+
+  const toggle = nav.querySelector('.site-nav-toggle');
+  const menu = nav.querySelector('.site-nav-menu');
+  if (!toggle || !menu) {
+    return;
+  }
+
+  const closeMenu = function () {
+    nav.classList.remove('is-open');
+    toggle.setAttribute('aria-expanded', 'false');
+  };
+
+  toggle.addEventListener('click', function (event) {
+    event.stopPropagation();
+    const isOpen = nav.classList.toggle('is-open');
+    toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+  });
+
+  menu.addEventListener('click', function (event) {
+    if (event.target.closest('a')) {
+      closeMenu();
+    }
+  });
+
+  document.addEventListener('click', function (event) {
+    if (!nav.contains(event.target)) {
+      closeMenu();
+    }
+  });
+
+  document.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') {
+      closeMenu();
+    }
+  });
+});
