docs/about/geren.md

@@ -19,7 +19,6 @@ status: new
        style="width: 270px; border-radius: 50%; display: block; margin: 0 auto;">
 </center>
 
-
 <!-- <center>  
 
 ![](https://picx.zhimg.com/v2-fb22186d2490043435a72876950492f5_1440w.jpg#only-light){style="width: 270px; border-radius: 50%;"}  
@@ -32,7 +31,7 @@ status: new
 
 <center><font size=6 color= #757575>
 观史知今，当思进退，读书明志可识春秋
-<br>
+
 ——Wcowin </font></center>  
 
 ---
@@ -159,7 +158,7 @@ status: new
                         </div>
                         <div>
                             <h3 class="qualification__title">未完待续</h3>
-                            <span class="qualification__subtitle">于道各努力，千里自同风</span>
+                            <span class="qualification__subtitle">在路上，永远热泪盈眶</span>
                             <div class="qualification__calendar">
                                 <font color= #757575><iconify-icon icon="tabler:calendar"></iconify-icon>
                                 Before - After</font>

docs/about/resume.md

@@ -26,7 +26,7 @@ comments: false
 
     ---
 
-    <iframe src="../个人简历2.pdf" width="100%" height="800px" style="border: 1px solid #ccc; overflow: auto;">
+    <iframe src="../个人简历.pdf" width="100%" height="800px" style="border: 1px solid #ccc; overflow: auto;">
     </iframe>
     
 

docs/about/sty/portfolio.css

@@ -1,63 +1,69 @@
 :root {
-  --header-height: 3rem;
+    --header-height: 3rem;
 
-  /*========== Colors ==========*/
+    /*========== Colors ==========*/
-  --first-color: #608DBD;
+    --first-color: #608DBD;
-  --first-color-second: #608DBD;
+    --first-color-second: #608DBD;
-  --first-color-alt: #608DBD;
+    --first-color-alt: #608DBD;
-  --first-color-lighter: #608DBD;
+    --first-color-lighter: #608DBD;
 
-  --title-color: #608DBD;
+    --title-color: #608DBD;
-  --text-color: #757575;
+    --text-color: #080505;
-  /* --text-color-light: #f5ab17; */
+    --text-color-light: #f5ab17;
 
-  --input-color: #F5EEE3;
+    --input-color: #F5EEE3;
-  /* --body-color: #FDFBF8;
+    --body-color: #FDFBF8;
-  --container-color: #FFFFFF; */
+    --container-color: #FFFFFF;
 
-  /*========== Font and typography ==========*/
+    /*========== Font and typography ==========*/
-  --big-font-size: 2rem;
+    --big-font-size: 2rem;
-  --h1-font-size: 1.5rem;
+    --h1-font-size: 1.5rem;
-  --h2-font-size: 1.25rem;
+    --h2-font-size: 1.25rem;
-  --h3-font-size: 1.125rem;
+    --h3-font-size: 1.125rem;
-  --normal-font-size: .938rem;
+    --normal-font-size: .938rem;
-  --small-font-size: .813rem;
+    --small-font-size: .813rem;
-  --smaller-font-size: .70rem;
+    --smaller-font-size: .70rem;
 
-  /*========== Font weight ==========*/
+    /*========== Font weight ==========*/
-  --font-medium: 500;
+    --font-medium: 500;
-  --font-semi-bold: 600;
+    --font-semi-bold: 600;
 
-  /*========== Margenes Bottom ==========*/
+    /*========== Margenes Bottom ==========*/
-  --mb-0-25: .25rem;
+    --mb-0-25: .25rem;
-  --mb-0-5: .5rem;
+    --mb-0-5: .5rem;
-  --mb-0-75: .75rem;
+    --mb-0-75: .75rem;
-  --mb-1: 1rem;
+    --mb-1: 1rem;
-  --mb-1-5: 1.5rem;
+    --mb-1-5: 1.5rem;
-  --mb-2: 2rem;
+    --mb-2: 2rem;
-  --mb-2-5: 2.5rem;
+    --mb-2-5: 2.5rem;
-  --mb-3: 3rem;
+    --mb-3: 3rem;
 
-  /*========== z index ==========*/
+    /*========== z index ==========*/
-  --z-tooltip: 10;
+    --z-tooltip: 10;
-  --z-fixed: 100;
+    --z-fixed: 100;
-  --z-modal: 1000;
+    --z-modal: 1000;
 }
 
 /* Font size for large devices */
 @media screen and (min-width: 968px) {
-  :root {
+    :root {
-    --big-font-size: 3rem;
+        --big-font-size: 3rem;
-    --h1-font-size: 2.25rem;
+        --h1-font-size: 2.25rem;
-    --h2-font-size: 1.5rem;
+        --h2-font-size: 1.5rem;
-    --h3-font-size: 1.25rem;
+        --h3-font-size: 1.25rem;
-    --normal-font-size: 1rem;
+        --normal-font-size: 1rem;
-    --small-font-size: .875rem;
+        --small-font-size: .875rem;
-    --smaller-font-size: .813rem;
+        --smaller-font-size: .813rem;
-  }
+    }
 }
 
 /*==================== BASE ====================*/
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
 html {
   scroll-behavior: smooth;
 }
@@ -110,18 +116,18 @@ h1, h2, h3, h4 {
   gap: 1rem;
 }
 
-.home__content {
+.home__content{
   grid-template-columns: .5fr 3fr;
   padding-top: 3.5rem;
   align-items: center;
 }
 
-.home__social {
+.home__social{
   grid-template-columns: max-content;
   row-gap: 1rem;
 }
 
-.home__social-icon {
+.home__social-icon{
   font-size: 1.25rem;
 }
 
@@ -129,23 +135,23 @@ h1, h2, h3, h4 {
   color: var(--first-color-alt);
 }
 
-.home__title {
+.home__title{
   font-size: var(--big-font-size);
 }
 
-.home__subtitle {
+.home__subtitle{
   margin-bottom: var(--h3-font-size);
   color: var(--text-color);
   font-weight: var(--font-medium);
   margin-bottom: var(--mb-0-75);
 }
 
-.home__description {
+.home__description{
   margin-bottom: var(--mb-2);
 }
 
 /*==================== BUTTONS ====================*/
-.button {
+.button{
   display: inline-block;
   background-color: var(--first-color-alt);
   color: #fff;
@@ -158,23 +164,23 @@ h1, h2, h3, h4 {
   background-color: var(--first-color-alt);
 }
 
-.button__icon {
+.button__icon{
   font-size: 1.25rem;
   margin-right: var(--mb-0-5);
   transition: .3s;
   color: #FFF;
 }
 
-.button--flex {
+.button--flex{
   display: inline-flex;
   align-items: center;
 }
 
-.button--small {
+.button--small{
   padding: .75rem 1rem;
 }
 
-.button--link {
+.button--link{
   padding: 0;
   background-color: transparent;
   color: var(--first-color);
@@ -186,41 +192,41 @@ h1, h2, h3, h4 {
 }
 
 /*==================== ABOUT ====================*/
-.about__img {
+.about__img{
   width: 400px;
   border-radius: .5rem;
   justify-self: center;
   align-self: center;
 }
 
-.about__description {
+.about__description{
   text-align: center;
   margin-bottom: var(--mb-2-5);
 }
 
-.about__info {
+.about__info{
   display: flex;
   justify-content: space-evenly;
   margin-bottom: var(--mb-2-5);
 }
 
-.about__info-title {
+.about__info-title{
   font-size: var(--h2-font-size);
   font-weight: var(--font-semi-bold);
   color: var(--title-color);
 }
 
-.about__info-name {
+.about__info-name{
   font-size: var(--smaller-font-size);
 }
 
 .about__info-title,
-.about__info-name {
+.about__info-name{
   display: block;
   text-align: center;
 }
 
-.about__buttons {
+.about__buttons{
   margin: 0 auto;
   display: flex;
   justify-content: center;
@@ -228,11 +234,11 @@ h1, h2, h3, h4 {
 }
 
 /*==================== SKILLS ====================*/
-.skills__container {
+.skills__container{
   row-gap: 0;
 }
 
-.skills__header {
+.skills__header{
   display: flex;
   align-items: center;
   margin-bottom: var(--mb-2-5);
@@ -240,130 +246,130 @@ h1, h2, h3, h4 {
 }
 
 .skills__icon,
-.skills__arrow {
+.skills__arrow{
   font-size: 2rem;
-  color: #757575;
+  color: var(--md-primary-fg-color);
 }
 
-.skills__icon {
+.skills__icon{
   margin-right: var(--mb-0-75);
 }
 
-.skills__title {
+.skills__title{
   font-size: var(--h3-font-size);
 }
 
-.skills_subtitle {
+.skills_subtitle{
   font-size: var(--small-font-size);
   color: var(--text-color-light);
 }
 
-.skills__arrow {
+.skills__arrow{
   margin-left: auto;
   transition: .4s;
 }
 
-.skills__list {
+.skills__list{
   row-gap: 1.5rem;
   padding-left: 2.7rem;
 }
 
-.skills__titles {
+.skills__titles{
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--mb-0-5);
 }
 
-.skills__name {
+.skills__name{
   font-size: var(--normal-font-size);
   font-weight: var(--font-medium);
 }
 
-.skills__number {
+.skills__number{
   margin-top: var(--mb-2-5);
 }
 
 .skills__bar,
-.skills__percentage {
+.skills__percentage{
   height: 5px;
   border-radius: .25rem;
 }
 
-.skills__bar {
+.skills__bar{
   background-color: var(--first-color-lighter);
 }
 
-.skills__percentage {
+.skills__percentage{
   display: block;
   background-color: var(--first-color);
 }
 
-.skills__fastapi {
+.skills__fastapi{
   width: 90%;
 }
 
-.skills__django {
+.skills__django{
   width: 85%;
 }
 
-.skills__flask {
+.skills__flask{
   width: 75%;
 }
 
-.skills__spring {
+.skills__spring{
   width: 75%;
 }
 
-.skills__androidjava {
+.skills__androidjava{
   width: 70%;
 }
 
-.skills__androidkotlin {
+.skills__androidkotlin{
   width: 60%;
 }
 
-.skills__flutter {
+.skills__flutter{
   width: 60%;
 }
 
-.skills__aws {
+.skills__aws{
   width: 80%;
 }
 
-.skills__azure {
+.skills__azure{
   width: 75%;
 }
 
-.skills__oc {
+.skills__oc{
   width: 70%;
 }
 
-.skills__cicd {
+.skills__cicd{
   width: 75%;
 }
 
-.skills__close .skills__list {
+.skills__close .skills__list{
   height: 0;
   overflow: hidden;
 }
 
-.skills__open .skills__list {
+.skills__open .skills__list{
   height: max-content;
   margin-bottom: var(--mb-2-5);
 }
 
-.skills__open .skills__arrow {
+.skills__open .skills__arrow{
   transform: rotate(-180deg);
 }
 
 /*==================== QUALIFICATION ====================*/
-.qualification__tabs {
+.qualification__tabs{
   display: flex;
   justify-content: space-evenly;
   margin-bottom: var(--mb-2);
 }
 
-.qualification__button {
+.qualification__button{
   font-size: var(--h3-font-size);
   font-weight: var(--font-medium);
   cursor: pointer;
@@ -373,42 +379,34 @@ h1, h2, h3, h4 {
   color: var(--first-color);
 }
 
-.qualification__icon {
+.qualification__icon{
   font-size: 1.8rem;
   margin-right: var(--mb-0-25);
 }
 
-.qualification__data {
+.qualification__data{
   display: grid;
-  grid-template-columns: 1fr max-content 1fr;
+  grid-template-columns: 1.5fr max-content 1.5fr;
-  column-gap: 0.5rem;
+  column-gap: 1.5rem;
 }
 
-.qualification__data > div:first-child {
+.qualification__title{
-  text-align: center;
-}
-.qualification__data > div:last-child {
-  text-align: center;
-}
-
-
-.qualification__title {
   font-size: var(--normal-font-size);
   font-weight: var(--font-medium);
 }
 
-.qualification__subtitle {
+.qualification__subtitle{
   display: inline-block;
   font-size: var(--smaller-font-size);
   margin-bottom: var(--mb-1);
 }
 
-.qualification__calendar {
+.qualification__calendar{
   font-size: var(--smaller-font-size);
   color: var(--md-primary-fg-color--dark);
 }
 
-.qualification__rounder {
+.qualification__rounder{
   display: inline-block;
   width: 13px;
   height: 13px;
@@ -416,7 +414,7 @@ h1, h2, h3, h4 {
   border-radius: 50%;
 }
 
-.qualification__line {
+.qualification__line{
   display: block;
   width: 1px;
   height: 100%;
@@ -424,54 +422,51 @@ h1, h2, h3, h4 {
   transform: translate(6px, -7px);
 }
 
-.qualification [data-content] {
+.qualification [data-content]{
   display: none;
 }
 
-.qualification__active[data-content] {
+.qualification__active[data-content]{
   display: block;
 }
 
-.qualification__button.qualification__active {
+.qualification__button.qualification__active{
   color: var(--first-color);
 }
 
 /*==================== MEDIA QUERIES ====================*/
 /* For small devices */
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 350px){
-  .container {
+  .container{
     margin-left: var(--mb-1);
     margin-right: var(--mb-1);
   }
 
-  .home__content {
+  .home__content{
     grid-template-columns: .25fr 3fr;
   }
-
+  .home__blob{
-  .home__blob {
     width: 180px;
   }
 
-  .skills__title {
+  .skills__title{
     font-size: var(--normal-font-size);
   }
 
-  .qualification__data {
+  .qualification__data{
     gap: .5rem;
   }
 }
 
 /* For medium devices */
-@media screen and (min-width: 568px) {
+@media screen and (min-width: 568px){
-  .home__content {
+  .home__content{
     grid-template-columns: max-content 1fr 1fr;
   }
-
+  .home__data{
-  .home__data {
     grid-column: initial;
   }
-
+  .home__img{
-  .home__img {
     order: 1;
     justify-self: center;
   }
@@ -479,115 +474,102 @@ h1, h2, h3, h4 {
   .skills__container,
   .about__container,
   .portfolio__content,
-  .project__container {
+  .project__container{
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .qualification__sections {
+  .qualification__sections{
     display: grid;
     grid-template-columns: 6fr;
     justify-content: center;
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 768px){
-  .container {
+  .container{
     margin-left: auto;
     margin-right: auto;
   }
 
-  body {
+  body{
     margin: 0;
   }
 
-  .section {
+  .section{
     padding: 6rem 0 2rem;
   }
-
+  .section__subtitle{
-  .section__subtitle {
     margin-bottom: 4rem;
   }
 
-  .header {
+  .header{
     top: 0;
     bottom: initial;
   }
 
   .header,
-  .main {
+  .main{
     padding: 0 1rem;
   }
 
-  .home__container {
+  .home__container{
     row-gap: 5rem;
   }
-
+  .home__content{
-  .home__content {
     padding-top: 5.5rem;
     column-gap: 2rem;
   }
-
+  .home__blob{
-  .home__blob {
     width: 270px;
   }
-
+  .home__scroll{
-  .home__scroll {
     display: block;
   }
-
+  .home__scroll-button{
-  .home__scroll-button {
     margin-left: 3rem;
   }
 
-  .about__container {
+  .about__container{
     column-gap: 5rem;
   }
-
+  .about__img{
-  .about__img {
     width: 350px;
   }
-
+  .about__description{
-  .about__description {
     text-align: initial;
   }
-
+  .about__info{
-  .about__info {
     justify-content: space-between;
   }
-
+  .about__buttons{
-  .about__buttons {
     justify-content: initial;
   }
 
-  .qualification__tabs {
+  .qualification__tabs{
     justify-content: center;
   }
-
+  .qualification__button{
-  .qualification__button {
     margin: 0 var(--mb-1);
   }
-
+  .qualification__sections{
-  .qualification__sections {
     grid-template-columns: .5fr;
   }
 }
 
 /* For large devices */
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1024px){
   .header,
-  .main {
+  .main{
     padding: 0;
   }
 
-  .home__blob {
+  .home__blob{
     width: 320px;
   }
-
+  .home__social{
-  .home__social {
     transform: translateX(-6rem);
   }
-
+  .qualification__sections{
-  .qualification__sections {
     display: grid;
     grid-template-columns: 6fr;
     justify-content: center;

docs/blog/websitebeauty/accelerate.md

@@ -1,44 +0,0 @@
----
-title: 加速网站访问的一些心得
-tags:
-  - Mkdocs
----
-
-# 加速网站访问的一些心得  
-
-在使用 MkDocs 构建网站时，为了提高访问速度，我们可以采取以下一些措施：
-## 1. 优化图片
-使用合适的图片格式，如 WebP、JPEG2000 等，减少图片文件大小，从而加快加载速度。
-
-可以使用在线工具进行图片压缩，如：
-
-- [freeconvert](https://www.freeconvert.com/zh/webp-converter)
-
-## 2. JS/CSS使用 CDN
-使用内容分发网络（CDN）来加速网站的访问，将静态资源（如图片、CSS、JS）缓存到全球各地的服务器上，用户就近访问，减少延迟。
-
-这里推荐  
-
-- [jsDelivr CDN 加速 GitHub 文件](https://www.jsdelivr.com/github)  
-
-## 3.加速本地渲染
-
-优化 git 插件的 enabled 配置  
-比如我配置里有 git-revision-date-localized 和 git-committers 插件，这些插件会在每次渲染时读取所有文件的 git 历史，导致本地预览变慢。  
-推荐做法是在本地开发时禁用它们，仅在 CI/CD 或线上构建时启用。  
-具体写法如下：  
-
-```yaml hl_lines="3 5"
-plugins:
-  - git-revision-date-localized:
-      enabled: !ENV [CI, false]  # 只有在CI环境变量为true时才启用
-  - git-committers:
-      enabled: !ENV [CI, false]
-
-```  
-
----
-
-检验加速效果是否生效可以使用lighthouse进行测试，具体可以参考：  
-
-[使用lighthouse进行网站性能测试](../../develop/lighthouse.md)

docs/blog/websitebeauty/footer.md

@@ -1,134 +0,0 @@
----
-title: 页脚设置
-hide:
-  #  - navigation # 显示右
-  #  - toc #显示左
-  #  - footer
-  #  - feedback  
-tags:
-  - Mkdocs
-comments: false
----
-
-## 页脚设置  
-
-MkDocs 支持自定义页脚。
-
-![](https://s1.imagehub.cc/images/2024/02/02/73179baf6402e27c92afc51eb59645a6.png)
-
-在docs/overrides/partials/footer.html中（没有该文件时，创建footer.html文件）添加以下代码：
-
-```html hl_lines="71-86"
-<!-- Footer -->
-<footer class="md-footer">
-
-  <!-- Link to previous and/or next page -->
-  {% if "navigation.footer" in features %}
-    {% if page.previous_page or page.next_page %}
-      {% if page.meta and page.meta.hide %}
-        {% set hidden = "hidden" if "footer" in page.meta.hide %}
-      {% endif %}
-      <nav
-        class="md-footer__inner md-grid"
-        aria-label="{{ lang.t('footer') }}"
-        {{ hidden }}
-      >
-
-        <!-- Link to previous page -->
-        {% if page.previous_page %}
-          {% set direction = lang.t("footer.previous") %}
-          <a
-            href="{{ page.previous_page.url | url }}"
-            class="md-footer__link md-footer__link--prev"
-            aria-label="{{ direction }}: {{ page.previous_page.title | e }}"
-          >
-            <div class="md-footer__button md-icon">
-              {% set icon = config.theme.icon.previous or "material/arrow-left" %}
-              {% include ".icons/" ~ icon ~ ".svg" %}
-            </div>
-            <div class="md-footer__title">
-              <span class="md-footer__direction">
-                {{ direction }}
-              </span>
-              <div class="md-ellipsis">
-                {{ page.previous_page.title }}
-              </div>
-            </div>
-            
-          </a>
-        {% endif %}
-
-        <!-- Link to next page -->
-        {% if page.next_page %}
-          {% set direction = lang.t("footer.next") %}
-          <a
-            href="{{ page.next_page.url | url }}"
-            class="md-footer__link md-footer__link--next"
-            aria-label="{{ direction }}: {{ page.next_page.title | e }}"
-          >
-            <div class="md-footer__title">
-              <span class="md-footer__direction">
-                {{ direction }}
-              </span>
-              <div class="md-ellipsis">
-                {{ page.next_page.title }}
-              </div>
-            </div>
-            <div class="md-footer__button md-icon">
-              {% set icon = config.theme.icon.next or "material/arrow-right" %}
-              {% include ".icons/" ~ icon ~ ".svg" %}
-            </div>
-          </a>
-        {% endif %}
-      </nav>
-    {% endif %}
-  {% endif %}
-
-  <!-- Further information -->
-  <div class="md-footer-meta md-typeset">
-    <div class="md-footer-meta__inner md-grid">
-      {% include "partials/copyright.html" %}
-   
-    <font color="#B9B9B9">
-      <div class="footer-visit-count" style="display: flex; justify-content: center; align-items: center;">
-    本站访问量：<script async src="//finicounter.eu.org/finicounter.js"></script>
-    <span id="finicount_views"></span>    &nbsp;|&nbsp;
-    <footer>
-      <a href="https://icp.gov.moe/?keyword=20230640" target="_blank">萌ICP备20230640号</a>
-    </footer>
-  </div>
-      </font>
-
-      <style>
-        .footer-visit-count {
-            height: fit-content;
-            min-height: 55px; /* 根据实际情况调整此高度 */
-        }
-        </style>
-      {% if config.extra.social %}
-        {% include "partials/social.html" %}
-      {% endif %}
-    </div>
-  </div>
-</footer>
-
-
-```
-
-高亮部分自行修改即可
-
-## 页脚版权设置
-
-mkdocs.yml中添加：
-```yaml
-
-copyright: Copyright &copy; 2022~2025 Wcowin # 左下角的版权声明
-
-```
-
-如果想删除页脚显示“Made with Material for MkDocs”(不建议)
-
-```yaml
-extra:
-  generator: false  #删除页脚显示“使用 MkDocs 材料制造”
-```

docs/blog/websitebeauty/mkdocsfont.md

@@ -158,8 +158,9 @@ font-weight: normal;
 } */
 ```
 
+四选一，mkdocs.yml和extra.css相互对应  
 
-不懂extra_css的用法的可以看一下我写的[extra_css部分](../Mkdocs/mkdocs2.md/#extra_javascriptextra_css)教程
+不懂extra_css的用法的可以看一下我写的[extra_css部分](../Mkdocs/mkdocs2.md)教程
 
 !!!tip
     切换字体后可能返回顶部按钮会在个别浏览器显示异常

docs/index.md

@@ -118,11 +118,11 @@ ____    __    ____  ______   ______   ____    __    ____  __  .__   __.
 - 简单易上手，小白配置
 - 𝕙𝕒𝕧𝕖 𝕒 𝕘𝕠𝕠𝕕 𝕥𝕚𝕞𝕖 ! -->
 
-<!-- 视频教程(1) 联系我(2)
+视频教程(1) 联系我(2)
 { .annotate }
 
 1. 点击右下角[:simple-bilibili:](https://space.bilibili.com/1407028951/lists/4566631?type=series)图标查看视频教程.
-2. TEL:18939533255(微信号) -->
+2. TEL:18939533255(微信号)
 
 ***  
 

docs/javascripts/extra.js

@@ -19,15 +19,15 @@ anime.timeline({loop: true})
 
 
 //全屏视频
-// var video = document.getElementById("video1");
+var video = document.getElementById("video1");
-// var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 
-// if (isMobile) {
+if (isMobile) {
-//   video.style.display = "none";
+  video.style.display = "none";
-//   video.muted = true;
+  video.muted = true;
-// } else {
+} else {
-//   video.volume = 0.5; // 或者根据需要设置适当的音量值，例如 0.5 表示 50% 的音量
+  video.volume = 0.5; // 或者根据需要设置适当的音量值，例如 0.5 表示 50% 的音量
-// }
+}
 
 // 优化
 // const container = document.querySelector('.container');

docs/overrides/home.html

@@ -0,0 +1,29 @@
+{#-
+  This file was automatically generated - do not edit
+-#}
+{% extends "main.html" %}
+{% block tabs %}
+  {{ super() }}
+  <style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}}</style>
+  <section class="mdx-container">
+    <div class="md-grid md-typeset">
+      <div class="mdx-hero">
+        <div class="mdx-hero__image">
+          <img src="assets/images/illustration.png" alt="" width="1659" height="1200" draggable="false">
+        </div>
+        <div class="mdx-hero__content">
+          <h1>Technical documentation that just works</h1>
+          <p>{{ config.site_description }}. Set up in 5 minutes.</p>
+          <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | e }}" class="md-button md-button--primary">
+            Quick start
+          </a>
+          <a href="{{ 'insiders/' | url }}" title="Material for MkDocs Insiders" class="md-button">
+            Get Insiders
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endblock %}
+{% block content %}{% endblock %}
+{% block footer %}{% endblock %}

docs/stylesheets/customize.css

@@ -1,34 +1,10 @@
 :root {
   --admonition-border-left-width: 0.2rem;
   --base-border-radius: 0.5rem;
-  --card-hover-shadow: 0 0 0.2rem #ffffff40;
 }
 
-/* 卡片圆角与悬浮阴影 */
+/* Change font family of filename present on top of code block. */
-.md-typeset .grid.cards > ul > li,
+/* .highlight span.filename {
-.md-typeset .md-button,
-.md-typeset table:not([class]) {
-  border-radius: var(--base-border-radius);
-}
-.md-typeset .grid.cards > ul > li:hover {
-  box-shadow: var(--card-hover-shadow);
-}
-
-/* 页脚社交图标高度 */
-.md-social__link svg {
-  max-height: 1rem;
-}
-
-/* 搜索框及下拉结果圆角 */
-.md-search__form,
-[data-md-toggle="search"]:checked ~ .md-header .md-search__form,
-[dir="ltr"] .md-search__output {
-  border-radius: var(--base-border-radius);
-}
-
-/* 可选：如需恢复代码块、警告框等样式，取消注释即可 */
-/*
-.highlight span.filename {
   border-bottom: none;
   border-radius: var(--base-border-radius);
   display: inline;
@@ -38,33 +14,234 @@
   margin-bottom: 5px;
   text-align: center;
 }
-.highlight span.filename + pre > code,
+.highlight span.filename + pre > code {
-.md-typeset pre > code {
   border-radius: var(--base-border-radius);
   border-top-left-radius: 0;
 }
-.md-typeset .admonition {
+.md-typeset pre > code {
+  border-radius: var(--base-border-radius);
+} */
+
+/* Customize admonition layout */
+/* .md-typeset .admonition {
   border-width: 0px;
   border-left-width: var(--admonition-border-left-width);
 }
+
 [dir="ltr"] .md-typeset blockquote {
   border-radius: 0.2rem;
   border-left-width: var(--admonition-border-left-width);
-}
+} */
-*/
+
+/* Grid Cards */
+.md-typeset .grid.cards > ul > li {
+  border-radius: var(--base-border-radius);
+}
+.md-typeset .grid.cards > ul > li:hover {
+  box-shadow: 0 0 0.2rem #ffffff40;
+}
+
+/* Markdown Button */
+.md-typeset .md-button {
+  border-radius: var(--base-border-radius);
+}
+
+/* Footer: Social Links */
+.md-social__link svg {
+  max-height: 1rem;
+}
+
+
+/* Forms */
+.md-search__form {
+  border-radius: var(--base-border-radius);
+}
+
+[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
+  border-top-right-radius: var(--base-border-radius);
+  border-top-left-radius: var(--base-border-radius);
+}
+
+[dir="ltr"] .md-search__output {
+  border-bottom-right-radius: var(--base-border-radius);
+  border-bottom-left-radius: var(--base-border-radius);
+}
+
+/* Blog - index.md */
+/* div.md-content header {
+  display: none;
+}
 
-/* 可选：博客相关样式，按需启用 */
-/*
 .md-post--excerpt {
   background-color: var(--md-accent-fg-color--transparent);
   box-shadow: 0 0 0 1rem var(--md-accent-fg-color--transparent);
   border-radius: var(--base-border-radius);
 }
+
 .md-post--excerpt .md-post__header {
-  justify-content: left;
+  justify-content: center;
 }
+
 .md-post--excerpt .md-post__content > h2,
 .md-post__action {
-  text-align: left;
+  text-align: center;
+} */
+
+/* Table */
+.md-typeset table:not([class]) {
+  border-radius: var(--base-border-radius);
+}
+
+
+
+
+
+.carousel {
+  width: 60%;
+  height: 100%;
+
+  border-radius: 0.4rem;
+  overflow: hidden;
+  position: relative;
+
+  /* 居中 */
+  margin-left: auto;
+  margin-right: auto;
+
+  border: 0.075rem solid #7b7b7b7a;
+  box-shadow: var(--md-shadow-z1);
+}
+
+.carousel-container {
+  width: 100%;
+  height: 100%;
+
+  position: relative;
+  left: 0;
+
+  display: flex;
+
+  /* 过渡动画 1s */
+  transition: all 1s;
+}
+
+.carousel-hover {
+  height: 100%;
+  width: 10%;
+  position: absolute;
+  top: 0;
+
+  /* 子元素垂直居中 */
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.carousel-hover.left {
+  left: 0;
+}
+.carousel-hover.right {
+  right: 0;
+}
+
+.carousel-hover button {
+  background-color: var(--md-accent-fg-color);
+  border-radius: 50%;
+
+  cursor: pointer;
+
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.carousel-hover button::after {
+  display: block;
+  height: 1.5rem;
+  width: 1.5rem;
+
+  background-color: white;
+  content: "";
+  mask-position: center;
+  -webkit-mask-position: center;
+}
+.carousel-hover.left button::after {
+  mask-image: var(--md-tabbed-icon--prev);
+  -webkit-mask-image: var(--md-tabbed-icon--prev);
+}
+.carousel-hover.right button::after {
+  mask-image: var(--md-tabbed-icon--next);
+  -webkit-mask-image: var(--md-tabbed-icon--next);
+}
+
+/* hover 外层 */
+.carousel-hover:hover button {
+  opacity: 0.5;
+  transition: opacity 0.3s;
+}
+/* hover 内层 */
+.carousel-hover button:hover {
+  opacity: 0.8;
+  transition: opacity 0.3s;
+}
+
+.carousel-container a {
+  width: 100%;
+  height: 100%;
+
+  flex-shrink: 0;
+}
+
+.carousel-container img {
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
+  display: block;
+}
+
+.carousel-bottom {
+  position: absolute;
+  /* 宽度等同于内容宽度 */
+  width: 100%;
+  padding: 20px;
+
+  bottom: 0;
+
+  display: flex;
+  justify-content: center;
+  /* 指示器间距 */
+  gap: 10px;
+
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.carousel-bottom:hover {
+  opacity: 0.8;
+  transition: opacity 0.3s;
+}
+
+.carousel-bottom .indicator {
+  height: 5px;
+  width: 20px;
+
+  background-color: var(--md-accent-fg-color);
+
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.carousel:hover .bottom .indicator {
+  opacity: 1;
+}
+.carousel:hover .shift .btn {
+  opacity: 1;
+}
+
+@media screen and (max-width: 600px) {
+  .carousel {
+      width: 100%;
+  }
+
+  .carousel-hover button {
+      opacity: 1;
+  }
 }
-*/

docs/stylesheets/extra.css

@@ -146,7 +146,7 @@ img {
 /* 滚动条 */
 
 
-/* ::-webkit-scrollbar {
+::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 }
@@ -183,7 +183,7 @@ background-color: #49b1f5;
 ::-webkit-scrollbar:hover {
 width: 7px;
 height: 7px;
-} */
+}
 
 /*bilbili*/
 /*哔哩哔哩视频适配*/

mkdocs.yml

@@ -88,8 +88,6 @@ nav:
           - 相对地址的一些问题: blog/websitebeauty/Relativeaddress.md
           - 添加404页面: blog/websitebeauty/404.md
           - 为MKdocs添加文章修订时间戳: blog/websitebeauty/time.md
-          - 页脚设置: blog/websitebeauty/footer.md
-          - 加速网站访问的一些心得: blog/websitebeauty/accelerate.md
   - 建设MKdocs技能指北:
       - Markdown:
           - Markdown指南: develop/Markdown/markdown.md
@@ -286,8 +284,7 @@ extra_javascript:
   - https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/javascripts/view.js
 
 extra_css:
-  # - stylesheets/extra.css # 自定义CSS
+  - stylesheets/extra.css # 自定义CSS
-  - https://cdn.jsdelivr.net/gh/Wcowin/Mkdocs-Wcowin@main/docs/stylesheets/extra.css
   # - stylesheets/link.css #友链配置
   - https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/stylesheets/link.css  #友链CDN
   # - stylesheets/customize.css # 搜索圆角优化