.

_config.yml

@@ -6,7 +6,7 @@ language: zh-cn
 menu:
   首页: /
   存档: /archives
-  扩展: /extends
+  扩展: https://huhu.ciduid.top
   nginx文档: /nginx-docs
   IPV6: /ipv6
   传送门: /teleport-public

layout/includes/_partials/button.pug

@@ -1,8 +1,10 @@
 mixin button (target_href, active, text)
   .button-component  
-    .button-component-box
     .button-container 
-        a.button-anchor(href=target_href)
+      a.button-anchor(
+        href=active ? undefined : target_href 
+        class=active ? 'active' : ''
+      )
         .button-anchor-box
-            .button-item-icon 
+          .button-icon 
           = text

layout/includes/_partials/header.pug

@@ -4,4 +4,7 @@ include ./button.pug
   .menu-items-container
     include ./left_declaration.pug
     each target, name in theme.menu
-      +button(target, true, name)
+      - var targetPath = target.substr(1)
+      - var currPath = page.path
+      - var active = (!is_home() && targetPath === '') ? false : currPath.startsWith(targetPath)
+      +button(target, active, name)

layout/includes/layout.pug

@@ -8,7 +8,7 @@
 - pageTitle += ' [ ' + config.title + ' ]'
 
 doctype html
-html(lang='zh-cn')
+html(lang=config.language)
   head
     meta(charset='UTF-8')
     title= pageTitle
@@ -21,16 +21,16 @@ html(lang='zh-cn')
       header#header.header 
         .header-box 
           include ./_partials/header.pug
-        hr
+
       .bottom-declaration
+        .bottom-declaration-line
+        .bottom-declaration-dotted
 
       main#main.main 
         .main-box 
           #content.content 
             block content
 
-
-
       footer#footer.footer 
         .footer-box
           include ./_partials/footer.pug

source/css/_partials/button.styl

@@ -1,19 +1,18 @@
 .button-component 
   width: 100%
-  .button-component-box
   .button-container
-      padding: 0px;
+    a.active
-      width: 100%;
+      background-position: -100% center;
-      height: 100%;
+      padding-bottom: 1.75rem;
-      background-color: transparent;
+      color: rgb(180, 175, 154) !important;
-      display: flex;
+      &:hover::before
-      flex-direction: column;
+        content: none !important;
-      gap: 5px;
+      &:hover::after
-      border: none;
+        content: none !important;
+      .button-anchor-box .button-icon
+        background-position: -100% center;
+
     a.button-anchor
-        font-size: 1rem;
-        height: 100%;
-        width: 100%;
       text-decoration: none;
       display: flex;
       flex-direction: column;
@@ -22,7 +21,7 @@
       background-image: linear-gradient(90deg, rgb(180, 175, 154) 50%, rgb(180, 175, 154) 50%, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 100%);
       background-size: 200%;
       transition: all 0.2s linear 0s;
-        z-index: 2;
+      cursor: default;
       &:hover
         background-position: -100% center;
         color: rgb(180, 175, 154);
@@ -51,18 +50,18 @@
         transform: translate(0px, 8px);
         pointer-events: none;
 
+      &:hover .button-anchor-box .button-icon
+        background-position: -100% center;
       .button-anchor-box
-          padding: 10px;
+        padding: 8px;
         display: flex;
-          flex-direction: row;
         gap: 10px;
         -webkit-box-align: center;
         align-items: center;
-          color: inherit;
         font-family: Manrope, sans-serif;
         font-weight: 500;
         font-size: 18px;
-          .button-item-icon
+        .button-icon
           width: 5%;
           height: 5%;
           min-width: 20px;
@@ -70,5 +69,4 @@
           background-image: linear-gradient(90deg, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 50%, rgb(218, 212, 187) 50%, rgb(218, 212, 187) 100%);
           background-size: 200%;
           transition: all 0.1s linear 0s;
-        &:hover .button-anchor-box .button-item-icon
+
-            background-position: -100% center;

source/css/common.styl

@@ -6,19 +6,23 @@ body
     linear-gradient(90deg, #c6c2a5 2px, rgba(255 255 255 0) 0), 
     linear-gradient(180deg, #c6c2a5 2px, rgb(209 205 178) 0);
   background-size: .4rem .4rem
+  margin: 0
 
 #container
   padding: 1.5% 2% 2% 2%
-  hr
+
-    border: 1.3px solid #000;
+.bottom-declaration
-    margin-left: -4.4%;
+    // container左右各有2%的padding
-    margin-right: 4%;
+    // 要突破这个container，所以要先往左边拉2%，然后width+=2%*2，也就是104%
+    margin-left: -2%;
     margin-top: 1.5em;
-    width: 107%;
+    width: 104%;
-  .bottom-declaration
+  .bottom-declaration-line
+    border: 1.3px solid #000;
+  .bottom-declaration-dotted
     background-image: linear-gradient(90deg,#333 14%,hsla(0,0%,100%,0) 0);
     background-repeat: repeat-x;
-    background-size: 72px 4px;
+    background-size: 100px 4px;
     width: 100%;
     height: 4px;
 

source/img/svg.svg

@@ -0,0 +1,9 @@
+<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg">
+
+ <g>
+  <title>Layer 1</title>
+  <ellipse stroke="#000" ry="32" rx="32" id="svg_2" cy="65.72726" cx="126.1818" fill="#000000"/>
+  <ellipse stroke="#000" ry="32" rx="32" id="svg_3" cy="182.72726" cx="179.1818" fill="#000000"/>
+  <ellipse stroke="#000" ry="32" rx="32" id="svg_4" cy="182.72726" cx="78.1818" fill="#000000"/>
+ </g>
+</svg>