Merge branch 'release_v4.7.0'

2025-01-30 15:39:34 +08:00 · 2025-01-30 15:39:34 +08:00 · 495ac97dbd
commit 495ac97dbd
parent 67b5ae3a3a af3de3609d
286 changed files with 4158 additions and 1122 deletions
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@ -12,7 +12,7 @@ labels: bug

 > 请确认如下情况已检查，并将 [ ] 换成 [x] 来选择 (Change [ ] to [x] to selected which your could make sure)

- [ ] 已使用 Hugo Extended 0.86.0 或更高的版本 (I'm using Hugo Extended version 0.86.0 or later)
+- [ ] 已使用 Hugo Extended 0.134.0 或更高的版本 (I'm using Hugo Extended version 0.134.0 or later)
 - [ ] 已使用 Hugo NexT 4.0 或更高的版本 (I'm using Hugo NexT version 4.0 or later)
 - [ ] 已阅读 [Hugo 故障排除](https://gohugo.io/troubleshooting/)并尝试修复无果 (I had already read the [Troubleshooting page of Hugo](https://gohugo.io/troubleshooting/))
 - [ ] 已搜索过当前所有[已知问题](https://github.com/hugo-next/hugo-theme-next/issues)和[讨论区](https://github.com/hugo-next/hugo-theme-next/discussions/categories/q-a) ，但没有找到帮助 (I had already searched for current [Issues](https://github.com/hugo-next/hugo-theme-next/issues) and [Q & A](https://github.com/hugo-next/hugo-theme-next/discussions/categories/q-a), which does not help me.)
--- a/.gitignore
+++ b/.gitignore
@ -1,31 +1,14 @@
 # Ignore files in Hugo NexT theme

-exampleSite/*
+# Special files in content folder
+exampleSite/public/
+exampleSite/resources/
+exampleSite/.hugo_build.lock
+exampleSite/config.dev.yaml
+exampleSite/config.release.yaml
+exampleSite/dev-startup.sh

-# Exclude special files in content folder
-exampleSite/content/**/
-!exampleSite/content
-!exmapleSite/content/about.md
-!exampleSite/content/archives
-!exampleSite/content/post
-!exampleSite/content/post/image-viewer

-# Exclude special files in data folder
-!exampleSite/data
-
-# Exclude special files in layouts folder
-!exampleSite/layouts
-
-# Exclude special files in static folder
-!exampleSite/static
-
-# Exclude special files
-!exampleSite/config.yaml
-!exampleSite/startup.sh
-
-data/*
-!data/config.yaml
-!data/resources.yaml

 # vscode
 .vscode/
--- a/README.md
+++ b/README.md
@ -10,7 +10,7 @@

 > All page designs & configuration compatibility with Hexo NexT, it's very easy migrate your site from Hexo to Hugo and enjoy yourself.

-[![Gitter](https://img.shields.io/gitter/room/hugo-next/hugo-them-next?logo=gitter&style=flat-square&label=Gitter)](https://gitter.im/hugo-next/community) [![Build Hugo Version](https://img.shields.io/badge/Hugo-%3E=0.89.0-red?style=flat-square&logo=hugo&color=%23FF4088&&label=Hugo%20Extended)](https://github.com/gohugoio/hugo/releases/latest) [![GitHub deployments](https://img.shields.io/github/deployments/hugo-next/hugo-next.github.io/github-pages?style=flat-square&logo=GitHub&label=Github%20Pages)](https://github.com/hugo-next/hugo-theme-next)  [![Contributors](https://img.shields.io/github/contributors/hugo-next/hugo-theme-next?style=flat-square&color=%235E0D73&logo=contributorcovenant&label=Contributors)](https://github.com/hugo-next/hugo-theme-next/graphs/contributors) [![Latest Release](https://img.shields.io/github/v/release/hugo-next/hugo-theme-next?include_prereleases&style=flat-square&color=%23DD2C00&logo=semanticrelease&label=Latest%20Release)](https://github.com/hugo-next/hugo-theme-next/releases)  [![Repos Size](https://img.shields.io/github/repo-size/hugo-next/hugo-theme-next?style=flat-square&color=%23FFBF3B&logo=Files&label=Repo%20Size)](https://github.com/hugo-next/hugo-theme-next/find/main) [![GitHub](https://img.shields.io/github/license/hugo-next/hugo-theme-next?logo=webauthn&style=flat-square&label=License)](https://github.com/hugo-next/hugo-theme-next/blob/main/LICENSE)
+[![Gitter](https://img.shields.io/gitter/room/hugo-next/hugo-them-next?logo=gitter&style=flat-square&label=Gitter)](https://app.gitter.im/#/room/#hugo-next_community:gitter.im) [![Build Hugo Version](https://img.shields.io/badge/Hugo-%3E=0.134.0-red?style=flat-square&logo=hugo&color=%23FF4088&&label=Hugo%20Extended)](https://github.com/gohugoio/hugo/releases/latest) [![GitHub deployments](https://img.shields.io/github/deployments/hugo-next/hugo-next.github.io/github-pages?style=flat-square&logo=GitHub&label=Github%20Pages)](https://github.com/hugo-next/hugo-theme-next)  [![Contributors](https://img.shields.io/github/contributors/hugo-next/hugo-theme-next?style=flat-square&color=%235E0D73&logo=contributorcovenant&label=Contributors)](https://github.com/hugo-next/hugo-theme-next/graphs/contributors) [![Latest Release](https://img.shields.io/github/v/release/hugo-next/hugo-theme-next?include_prereleases&style=flat-square&color=%23DD2C00&logo=semanticrelease&label=Latest%20Release)](https://github.com/hugo-next/hugo-theme-next/releases)  [![Repos Size](https://img.shields.io/github/repo-size/hugo-next/hugo-theme-next?style=flat-square&color=%23FFBF3B&logo=Files&label=Repo%20Size)](https://github.com/hugo-next/hugo-theme-next/find/main) [![GitHub](https://img.shields.io/github/license/hugo-next/hugo-theme-next?logo=webauthn&style=flat-square&label=License)](https://github.com/hugo-next/hugo-theme-next/blob/main/LICENSE)

 ![Screenshot](images/screenshot.png)

@ -176,6 +176,10 @@ Hope could submmit your site information in this file [flinks.yaml](https://gith

 All features development progress and new request in [Hugo NexT V4 Roadmap](https://github.com/hugo-next/hugo-theme-next/issues/9), welcome to join us and compelete it together.

+[![Contributors](https://contrib.rocks/image?repo=hugo-next/hugo-theme-next)](https://github.com/hugo-next/hugo-theme-next/graphs/contributors)
+
+[![HugoNexT Stars](https://starchart.cc/hugo-next/hugo-theme-next.svg?variant=adaptive)](https://github.com/hugo-next/hugo-theme-next/stargazers)
+
 ## 📜 License

 [MIT License](LICENSE)
--- a/README.zh.md
+++ b/README.zh.md
@ -10,7 +10,7 @@

 > 本主题的所有页面设计和配置项都与原来 `Hexo` 引擎的 `NexT` 主题保持了良好的兼容性，可以非常平滑的从 `Hexo` 迁移至 `Hugo` 引擎，欢迎大家使用并反馈。

-[![Gitter](https://img.shields.io/gitter/room/hugo-next/hugo-them-next?logo=gitter&style=flat-square&label=Gitter)](https://gitter.im/hugo-next/community) [![Build Hugo Version](https://img.shields.io/badge/Hugo-%3E=0.89.0-red?style=flat-square&logo=hugo&color=%23FF4088&&label=Hugo%20Extended)](https://github.com/gohugoio/hugo/releases/latest) [![GitHub deployments](https://img.shields.io/github/deployments/hugo-next/hugo-next.github.io/github-pages?style=flat-square&logo=GitHub&label=Github%20Pages)](https://github.com/hugo-next/hugo-theme-next)  [![Contributors](https://img.shields.io/github/contributors/hugo-next/hugo-theme-next?style=flat-square&color=%235E0D73&logo=contributorcovenant&label=Contributors)](https://github.com/hugo-next/hugo-theme-next/graphs/contributors) [![Latest Release](https://img.shields.io/github/v/release/hugo-next/hugo-theme-next?include_prereleases&style=flat-square&color=%23DD2C00&logo=semanticrelease&label=Latest%20Release)](https://github.com/hugo-next/hugo-theme-next/releases)  [![Repos Size](https://img.shields.io/github/repo-size/hugo-next/hugo-theme-next?style=flat-square&color=%23FFBF3B&logo=Files&label=Repo%20Size)](https://github.com/hugo-next/hugo-theme-next/find/main) [![GitHub](https://img.shields.io/github/license/hugo-next/hugo-theme-next?logo=webauthn&style=flat-square&label=License)](https://github.com/hugo-next/hugo-theme-next/blob/main/LICENSE)
+[![Gitter](https://img.shields.io/gitter/room/hugo-next/hugo-them-next?logo=gitter&style=flat-square&label=Gitter)](https://app.gitter.im/#/room/#hugo-next_community:gitter.im) [![Build Hugo Version](https://img.shields.io/badge/Hugo-%3E=0.134.0-red?style=flat-square&logo=hugo&color=%23FF4088&&label=Hugo%20Extended)](https://github.com/gohugoio/hugo/releases/latest) [![GitHub deployments](https://img.shields.io/github/deployments/hugo-next/hugo-next.github.io/github-pages?style=flat-square&logo=GitHub&label=Github%20Pages)](https://github.com/hugo-next/hugo-theme-next)  [![Contributors](https://img.shields.io/github/contributors/hugo-next/hugo-theme-next?style=flat-square&color=%235E0D73&logo=contributorcovenant&label=Contributors)](https://github.com/hugo-next/hugo-theme-next/graphs/contributors) [![Latest Release](https://img.shields.io/github/v/release/hugo-next/hugo-theme-next?include_prereleases&style=flat-square&color=%23DD2C00&logo=semanticrelease&label=Latest%20Release)](https://github.com/hugo-next/hugo-theme-next/releases)  [![Repos Size](https://img.shields.io/github/repo-size/hugo-next/hugo-theme-next?style=flat-square&color=%23FFBF3B&logo=Files&label=Repo%20Size)](https://github.com/hugo-next/hugo-theme-next/find/main) [![GitHub](https://img.shields.io/github/license/hugo-next/hugo-theme-next?logo=webauthn&style=flat-square&label=License)](https://github.com/hugo-next/hugo-theme-next/blob/main/LICENSE)

 ![截图](images/screenshot.png)

@ -185,6 +185,10 @@ tags:

 关于本主题的开发进度和后续的发展路线图，可访问 [Hugo NexT V4 Roadmap](https://github.com/hugo-next/hugo-theme-next/issues/9) 查看详情，也欢迎大家参与一起来完善。

+[![Contributors](https://contrib.rocks/image?repo=hugo-next/hugo-theme-next)](https://github.com/hugo-next/hugo-theme-next/graphs/contributors)
+
+[![HugoNexT Stars](https://starchart.cc/hugo-next/hugo-theme-next.svg?variant=adaptive)](https://github.com/hugo-next/hugo-theme-next/stargazers)
+
 ## 📜 许可证

 [MIT License](LICENSE)
--- a/2
+++ b/2
@ -1 +1 @@
-4.6.3
+4.7.0
--- a/assets/css/_colors.scss
+++ b/assets/css/_colors.scss
@ -4,6 +4,8 @@
  --content-bg-color: #{$content-bg-color};
  --card-bg-color: #{$card-bg-color};
  --text-color: #{$text-color};
+  --selection-bg: #{$grey-lighter};
+  --selection-color: #{$black-deep};
  --blockquote-color: #{$blockquote-color};
  --link-color: #{$link-color};
  --link-hover-color: #{$link-hover-color};
@ -14,6 +16,8 @@
  --menu-item-bg-color: #{$menu-item-bg-color};
  --theme-color: #{$theme-color};

+  --border-color: #{$border-color};
+
  --btn-default-bg: #{$btn-default-bg};
  --btn-default-color: #{$btn-default-color};
  --btn-default-border-color: #{$btn-default-border-color};
@ -36,6 +40,8 @@
  --content-bg-color: #{$content-bg-color-dark};
  --card-bg-color: #{$card-bg-color-dark};
  --text-color: #{$text-color-dark};
+  --selection-bg: #{$gainsboro};
+  --selection-color: #{$black-dim};
  --blockquote-color: #{$blockquote-color-dark};
  --link-color: #{$link-color-dark};
  --link-hover-color: #{$link-hover-color-dark};
@ -46,6 +52,8 @@
  --menu-item-bg-color: #{$menu-item-bg-color-dark};
  --theme-color: #{$theme-color-dark};

+  --border-color: #{$border-color-dark};
+
  --btn-default-bg: #{$btn-default-bg-dark};
  --btn-default-color: #{$btn-default-color-dark};
  --btn-default-border-color: #{$btn-default-border-color-dark};
--- a/assets/css/_common/components/third-party/disqusjs.scss
+++ b/assets/css/_common/components/third-party/disqusjs.scss
--- a/assets/css/_common/components/third-party/gitalk.scss
+++ b/assets/css/_common/components/third-party/gitalk.scss
--- a/assets/css/_common/components/third-party/gitter.scss
+++ b/assets/css/_common/components/third-party/gitter.scss
--- a/assets/css/_common/components/third-party/index.scss
+++ b/assets/css/_common/components/third-party/index.scss
@ -6,7 +6,6 @@
@import 'gitter';
@import 'livere';
@import 'waline';
-@import 'mermaid';

 .use-motion .animated {
  // Fix issue #48 #55
--- a/assets/css/_common/components/third-party/livere.scss
+++ b/assets/css/_common/components/third-party/livere.scss
--- a/assets/css/_common/components/third-party/related-posts.scss
+++ b/assets/css/_common/components/third-party/related-posts.scss
--- a/assets/css/_common/components/third-party/search.scss
+++ b/assets/css/_common/components/third-party/search.scss
--- a/assets/css/_common/components/third-party/utterances.scss
+++ b/assets/css/_common/components/third-party/utterances.scss
--- a/assets/css/_common/components/third-party/waline.scss
+++ b/assets/css/_common/components/third-party/waline.scss
--- a/assets/css/_common/components/index.scss
+++ b/assets/css/_common/components/index.scss
@ -12,9 +12,17 @@
  z-index: $zindex-5;
 }

+.hidden {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
@import 'tool-buttons';
@import 'reading-progress';

@import 'post';
@import 'pages';
-@import 'third-party';
+@import '3rd';
--- a/assets/css/_common/components/pages/flinks.scss
+++ b/assets/css/_common/components/pages/flinks.scss
@ -1,6 +1,6 @@
 .flinks-block {

-  .flinks-block-title {
+  .flinks-header {
    text-align: center;
    font-weight: bold;
  }
--- a/assets/css/_common/components/post/index.scss
+++ b/assets/css/_common/components/post/index.scss
@ -24,13 +24,13 @@
  }

  @if $motion_trans_post_header {
-    .post-header {
+    .post-header, .flinks-header {
      visibility: hidden;
    }
  }

  @if $motion_trans_post_body {
-    .post-body {
+    .post-body, .flinks-body  {
      visibility: hidden;
    }
  }
@ -78,4 +78,4 @@
@import 'post-footer';
@import 'post-widgets';
@import 'post-reward';
-@import 'post-followme';
+@import 'post-followme';
--- a/assets/css/_common/components/post/post-alert.scss
+++ b/assets/css/_common/components/post/post-alert.scss
@ -0,0 +1,36 @@
+
+@mixin alert-styles($type, $color) {
+  .post-alert-#{$type} {
+    padding: 0 0 0 10px;
+    border-left: 6px solid $color;
+    font-size: 0.825em;
+    color: $color;
+  }
+}
+
+@each $key, $color in $post_alert_colors {
+  @include alert-styles(#{$key}, $color);
+}
+
+.post-alert-title, .post-expired-title {
+
+  display: flex;
+  align-items: center;
+  line-height: 1.5;
+  margin: 0;
+
+  i {
+    font-size: 1.25em;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  span {
+    margin: 0 0 0 8px;
+    letter-spacing: 0.08em;
+  }
+}
+
+.post-alert-content, .post-expired-content {
+  color: var(--text-color);
+}
--- a/assets/css/_common/components/post/post-body.scss
+++ b/assets/css/_common/components/post/post-body.scss
@ -80,4 +80,66 @@
  svg {
    max-width: 98%;
  }
+
+  // For read more post content anchor
+  #more {
+    visibility: hidden;
+  }
+
+  /** Defined speical border properties for top card of post **/
+  $speical-border-width: 5px;
+  $speical-border-radius: 8px;
+  .post-expired-tip {
+
+    $expired-color: #4A90E2;
+
+    font-size: var(--font-size-small);
+    border: 1px solid #4A90E2;
+    border-radius: $speical-border-radius;
+    border-left: $speical-border-width solid #4A90E2;
+    border-top:  $speical-border-width solid #4A90E2;
+    box-shadow: .6rem .5rem 0.3rem var(--body-bg-color);
+    margin: 0 0 0.85em 0;
+    padding: 0.65em 0.15em 0.65em 0.95em;
+    display: none;
+
+    .post-expired-title {
+      color: #4A90E2;
+      font-weight: bold;
+    }
+
+    .post-expired-times {
+      font-weight: bold;
+      font-size: 1.15em;
+      color: #e5534b;
+      margin: 0 3px;
+    }
+  }
+
+  .post-summary-wrapper {
+    $summary-color: #ea6733;
+
+    margin: 0 0 .85em 0;
+    border-radius: $speical-border-radius;
+    border: 1px solid $summary-color;
+    border-right: $speical-border-width solid $summary-color;
+    border-bottom: $speical-border-width solid $summary-color;
+    box-shadow: .6rem .5rem 0.3rem var(--body-bg-color);
+
+    .summary-title {
+      margin: .65em .93em 0 .93em;
+      color: $summary-color;
+      font-weight: bold;
+    }
+
+    .summary-content {
+      background-color: var(--card-bg-color);
+      border-radius: $speical-border-radius;
+      box-shadow: .08rem .06rem 0.03rem var(--body-bg-color);
+      margin: .85em;
+      padding: .85em .95em;
+    }
+  }
+
+  @import 'post-alert';
 }
--- a/assets/css/_common/components/post/post-footer.scss
+++ b/assets/css/_common/components/post/post-footer.scss
@ -91,3 +91,21 @@
    }
  }
 }
+
+@if $post_share_enable {
+  .post-share-tools {
+    display: flex;
+    justify-content: center;
+
+    a {
+      border: 0px;
+    }
+  }
+
+  @if $post_sharethis_set {
+    .st-cmp-settings {
+      display: none;
+    }
+  }
+}
+
--- a/assets/css/_common/components/third-party/mermaid.scss
+++ b/assets/css/_common/components/third-party/mermaid.scss
@ -1,3 +0,0 @@
-.post-block .post-body .mermaid {
-  background: var(--highlight-foreground);
-}
--- a/assets/css/_common/components/tool-buttons.scss
+++ b/assets/css/_common/components/tool-buttons.scss
@ -43,10 +43,6 @@
  .goto-comments {
    display: none;
  }
-
-  .goto-comments-on {
-    display: block;
-  }
 }

@if $back2top_enable {
--- a/assets/css/_common/outline/footer/index.scss
+++ b/assets/css/_common/outline/footer/index.scss
@ -29,7 +29,143 @@
    font-size: $font-size-smallest;
  }

-  .google-translate {
+  .i18n-translate {
+    display: flex;
+    justify-content: center;
+
+    .fa {      
+      font-size: $font-size-largest;
+      margin: auto 0;
+      line-height: normal;
+    }
+
+    .lang-select, .lang-options {
+
+      .flag-icon {          
+        background-size: cover;
+        width: 30px;
+        height: 20px;   
+        display: none;     
+      }
+
+      .flag-icon-zh-cn  {
+        background-image: url("/imgs/flags/zh-cn.svg");
+      }
+  
+      .flag-icon-en-us {
+        background-image: url("/imgs/flags/en-us.svg");
+      }
+  
+      .flag-icon-fr-fr {
+        background-image: url("/imgs/flags/fr-fr.svg");
+      }
+    }
+
+    .lang-select {
+
+      .flag-icon {      
+        display: block;     
+      }
+    }
+
+    .lang-select {
+      margin-left: 16px;
+      position: relative;
+      display: inline-block;
+      line-height: 1.25;
+
+      .fa {
+        font-size: $font-size-large;
+      }
+
+      .selected-option {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        padding: 5px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        justify-content: center;
+        width: 140px;
+
+        /* &:hover {
+          + .lang-options {
+            display: block;
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }   */
+        
+        .selected-language {
+          margin: 0 10px;
+        }
+      }
+
+      .lang-options {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        border: 1px solid var(--border-color);
+        border-top: none;
+        border-radius: 0 0 4px 4px;
+        background-color: #ffffff;
+        opacity: 0;
+        transform: translateY(-10px);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        z-index: 1;
+
+        &:hover {
+          display: block;
+          opacity: 1;
+          transform: translateY(0);
+        }
+
+        .lang-option {
+          padding: 5px;
+          cursor: pointer;
+          display: flex;
+          justify-content: left;
+          padding-left: 14px;
+          
+          &:hover {
+            background-color: var(--selection-bg);
+          }
+
+          .lang-name {
+            margin: 0 16px 0 8px;
+          }
+        }
+      }
+    }
+  }
+
+   /*  select {
+      margin-left: 10px;
+
+      option {
+        font-size: $font-size-small;
+        background-repeat: no-repeat;
+        background-position: right center;
+        padding-right: 30px; 
+        background-size: cover;
+      }
+    }
+
+    .flag-icon-zh-cn  {
+      background-image: url("../imgs/flags/zh-CN.png");
+    }
+
+    .flag-icon-en-us {
+      background-image: url("../imgs/flags/en-US.png");
+    }
+
+    .flag-icon-fr-fr {
+      background-image: url("../imgs/flags/fr-FR.png");
+    }
+  } */
+  /* .google-translate {
    display: flex;
    justify-content: center;
    .fa {
@ -37,7 +173,7 @@
      margin: auto 0;
      line-height: normal;
    }
-  }
+  } */

  @if $footer_vendors_enable {
    .vendors-list {
@ -47,14 +183,17 @@

      img {
        display: inline-block;
-        max-width: 50px;
-        filter: var(--highlight-img-fill);
+        max-width: 48px;
+        min-width: 14px;
+        max-height: 16px;
+
        @include mobile() {
          max-width: 40px;
        }
-
-        &:last-child {
-          max-height: 18px;
+        
+        // Only work for svg image
+        &[src$=".svg"] {
+          filter: var(--highlight-img-fill);
        }
      }
      
--- a/assets/css/_common/outline/mobile.scss
+++ b/assets/css/_common/outline/mobile.scss
@ -20,7 +20,10 @@
    }

    .post-block {
-      margin-top: initial !important;
+      //margin-top: initial !important;
+      // https://github.com/hugo-next/hugo-theme-next/issues/154
+      // make the post block more clear in small screen
+      margin-top: 5px !important;
      // Inside posts blocks content padding (default 40px).
      padding: $content-mobile-padding 18px $content-mobile-padding !important;
    }
--- a/assets/css/_common/scaffolding/base.scss
+++ b/assets/css/_common/scaffolding/base.scss
@ -1,6 +1,7 @@
 ::selection {
-  background: $selection-bg;
-  color: $selection-color;
+  background: var(--selection-bg);
+  color: var(--selection-color);
+
 }

 html, body {
--- a/assets/css/_common/scaffolding/highlight/copy-code.scss
+++ b/assets/css/_common/scaffolding/highlight/copy-code.scss
@ -3,86 +3,182 @@

  background: var(--highlight-background);
  margin-bottom: 26px;
+  line-height: 1.25;

-  //TODO  Need fixed the copy button show position.
-  div:first-child {
-    overflow-x: auto;
-  }
+  > .code-header {
+    color:#f8f8f2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .25rem 0;
+    width: 100%;

-  pre {
-    position: relative;
-    overflow-x: auto;
-  }
+    &:hover {
+      cursor: pointer;
+    }

-  table tbody tr {
-    //TODO Fixed the too long code line over
-    // layout background color.
-    background: #272822;    
-  }
+    .code-lang {
+      width: 100%;
+      text-align: center;
+      font-weight: bold;

-  /* pre > code span {
-    white-space: break-spaces;
-    overflow: hidden;
-    word-break: break-all;
-    word-wrap: break-word;
-  } */
-}
+      &::after {
+        content: "Code";
+      }
+    }

-@if $codeblock_copy_btn_enable {
-
-  .highlight:hover .copy-btn, pre:hover .copy-btn {
-    opacity: 1;
-  }
-
-  .copy-btn {
-    color: $black-dim;
-    cursor: pointer;
-    line-height: 1.6;
-    opacity: 0;
-    padding: 2px 6px;
-    position: absolute;
-    right: 8px;
-    top: 4px;
-    transition: opacity $transition-ease;
-    background: var(--highlight-background);
-
-    @if $codeblock_style == 'flat' {
-      background: white;
-      border: 0;
-      font-size: $font-size-smaller;
-      
-    } @else if $codeblock_style == 'mac' {
-      color: var(--highlight-foreground);
-      font-size: 14px;
-      border-radius: 3px;
-    } @else {
-      background-color: $gainsboro;
-      background-image: linear-gradient(#fcfcfc, $gainsboro);
-      border: 1px solid #d5d5d5;
-      border-radius: 3px;
-      font-size: $font-size-smaller;
+    .collapse-btn {
+      font-family: "Font Awesome 6 Free";
+      font-weight: 900;
+      text-align: center;
+      width: 1.25em;
+      display: inline-block;
+      font-style: normal;
+      font-variant: normal;
+      line-height: 1;
+      text-rendering: auto;
+      padding-right: .25rem;      
+      transition: content 1s ease-in-out;
      
+      &::before {
+        content: "\f102";
+      }
+
+      &.collapse::before {
+        content: "\f103";
+      }
+    }
+
+    @each $type, $text in $code-type-list {
+      &.#{$type} .code-lang::after {
+        content: $text;
+      }
+    }
+
+    .ellipses-btn {
+      padding-right: .45rem;
    }
  }
-}

-@if $codeblock_style == 'mac' {
-  .highlight {
+  > .chroma {
+    position: relative;
+    max-height: 500px;
+    opacity: 1;
+    visibility: visible;
+    transition: max-height 0.8s ease-in-out, opacity 0.7s ease-in-out; 
+
+    &.hidden-code {
+      max-height: 0;
+      opacity: 0;
+      visibility: hidden;
+
+      animation-name: slideInUp;
+      animation-duration: 1s;
+    }
+    
+    pre {
+      padding: .45rem 0;
+    }
+
+    .lntd:first-child {
+      min-width: 1.6rem;
+      text-align: right;
+      background-color: #272822; 
+
+      a {
+        border-bottom: none;
+      }
+    }
+
+    .lntd:last-child {
+      width: 100%;
+
+      pre {
+        overflow-wrap: break-word;
+        white-space: pre-wrap;
+        line-break: anywhere;
+        word-break: break-all; 
+        overflow-x: auto;
+      }
+    }
+
+    > code > span {
+      overflow-wrap: break-word;
+      white-space: pre-wrap;
+      line-break: anywhere;
+      word-break: break-all; 
+    }
+
+    @if $codeblock_copy_btn_enable {
+
+      &:hover .copy-btn {
+        opacity: 1;
+      }
+    
+      .copy-btn {
+        color: $black-dim;
+        cursor: pointer;
+        line-height: 1.6;
+        opacity: 0;
+        padding: 2px 6px;
+        position: absolute;
+        right: 8px;
+        top: 4px;
+        border-radius: 3px;
+        font-size: $font-size-medium;
+        transition: opacity $transition-ease;
+        background: var(--highlight-background);
+        
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        text-align: center;
+        width: 1.25em;
+        display: inline-block;
+        font-style: normal;
+        font-variant: normal;
+        text-rendering: auto;
+
+        &::before {
+          content: "\f0c5";
+        }
+
+        &.copied::before {
+          content: "\f058";
+        }
+
+        &.uncopied::before {
+          content: "\f057";
+        }
+    
+        @if $codeblock_style == 'flat' {
+          background: white;
+          border: 0;
+        } @else if $codeblock_style == 'mac' {
+          color: var(--highlight-foreground);
+        } @else {
+          background-color: $gainsboro;
+          background-image: linear-gradient(#fcfcfc, $gainsboro);
+          border: 1px solid #d5d5d5;
+        }
+      }
+    }
+  }
+
+  
+  @if $codeblock_style == 'mac' {
+  
    border-radius: 5px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
-    padding-top: 30px;

-    .table-container {
-      border-radius: 0 0 5px 5px;
-    }
-
-    &::before {
-      background: #fc625d;
-      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
-      margin-top: -20px;
-      margin-left: 10px;
-      position: absolute;
-      @include round-icon(12px);
-    }
+    .code-header {
+    
+      &::before {
+        background: #fc625d;
+        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+        margin-left: 10px;
+        @include round-icon(12px);
+      }
+    } 
  }
+  
 }
--- a/assets/css/_common/scaffolding/highlight/index.scss
+++ b/assets/css/_common/scaffolding/highlight/index.scss
@ -1,4 +1,5 @@
@import 'copy-code';
+@import 'monokai';

 %code-inline {
  background: var(--highlight-background);
@ -8,7 +9,7 @@
 pre {
  padding: 18px;
  margin: 0;
-}
+} 

 p > code, li > code {
  @extend %code-inline;
--- a/assets/css/_common/scaffolding/highlight/monokai.scss
+++ b/assets/css/_common/scaffolding/highlight/monokai.scss
@ -0,0 +1,87 @@
+/** monokai highlight style **/
+  /* Background */ .bg { color:#f8f8f2;background-color:#272822; }
+  /* PreWrapper */ .chroma { color:#f8f8f2;background-color:#272822; }
+  /* Other */ .chroma .x {  }
+  /* Error */ .chroma .err { color:#960050;background-color:#1e0010 }
+  /* CodeLine */ .chroma .cl {  }
+  /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+  /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+  /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+  /* LineHighlight */ .chroma .hl { background-color:#3c3d38 }
+  /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+  /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+  /* Line */ .chroma .line { display:flex; }
+  /* Keyword */ .chroma .k { color:#66d9ef }
+  /* KeywordConstant */ .chroma .kc { color:#66d9ef }
+  /* KeywordDeclaration */ .chroma .kd { color:#66d9ef }
+  /* KeywordNamespace */ .chroma .kn { color:#f92672 }
+  /* KeywordPseudo */ .chroma .kp { color:#66d9ef }
+  /* KeywordReserved */ .chroma .kr { color:#66d9ef }
+  /* KeywordType */ .chroma .kt { color:#66d9ef }
+  /* Name */ .chroma .n {  }
+  /* NameAttribute */ .chroma .na { color:#a6e22e }
+  /* NameBuiltin */ .chroma .nb {  }
+  /* NameBuiltinPseudo */ .chroma .bp {  }
+  /* NameClass */ .chroma .nc { color:#a6e22e }
+  /* NameConstant */ .chroma .no { color:#66d9ef }
+  /* NameDecorator */ .chroma .nd { color:#a6e22e }
+  /* NameEntity */ .chroma .ni {  }
+  /* NameException */ .chroma .ne { color:#a6e22e }
+  /* NameFunction */ .chroma .nf { color:#a6e22e }
+  /* NameFunctionMagic */ .chroma .fm {  }
+  /* NameLabel */ .chroma .nl {  }
+  /* NameNamespace */ .chroma .nn {  }
+  /* NameOther */ .chroma .nx { color:#a6e22e }
+  /* NameProperty */ .chroma .py {  }
+  /* NameTag */ .chroma .nt { color:#f92672 }
+  /* NameVariable */ .chroma .nv {  }
+  /* NameVariableClass */ .chroma .vc {  }
+  /* NameVariableGlobal */ .chroma .vg {  }
+  /* NameVariableInstance */ .chroma .vi {  }
+  /* NameVariableMagic */ .chroma .vm {  }
+  /* Literal */ .chroma .l { color:#ae81ff }
+  /* LiteralDate */ .chroma .ld { color:#e6db74 }
+  /* LiteralString */ .chroma .s { color:#e6db74 }
+  /* LiteralStringAffix */ .chroma .sa { color:#e6db74 }
+  /* LiteralStringBacktick */ .chroma .sb { color:#e6db74 }
+  /* LiteralStringChar */ .chroma .sc { color:#e6db74 }
+  /* LiteralStringDelimiter */ .chroma .dl { color:#e6db74 }
+  /* LiteralStringDoc */ .chroma .sd { color:#e6db74 }
+  /* LiteralStringDouble */ .chroma .s2 { color:#e6db74 }
+  /* LiteralStringEscape */ .chroma .se { color:#ae81ff }
+  /* LiteralStringHeredoc */ .chroma .sh { color:#e6db74 }
+  /* LiteralStringInterpol */ .chroma .si { color:#e6db74 }
+  /* LiteralStringOther */ .chroma .sx { color:#e6db74 }
+  /* LiteralStringRegex */ .chroma .sr { color:#e6db74 }
+  /* LiteralStringSingle */ .chroma .s1 { color:#e6db74 }
+  /* LiteralStringSymbol */ .chroma .ss { color:#e6db74 }
+  /* LiteralNumber */ .chroma .m { color:#ae81ff }
+  /* LiteralNumberBin */ .chroma .mb { color:#ae81ff }
+  /* LiteralNumberFloat */ .chroma .mf { color:#ae81ff }
+  /* LiteralNumberHex */ .chroma .mh { color:#ae81ff }
+  /* LiteralNumberInteger */ .chroma .mi { color:#ae81ff }
+  /* LiteralNumberIntegerLong */ .chroma .il { color:#ae81ff }
+  /* LiteralNumberOct */ .chroma .mo { color:#ae81ff }
+  /* Operator */ .chroma .o { color:#f92672 }
+  /* OperatorWord */ .chroma .ow { color:#f92672 }
+  /* Punctuation */ .chroma .p {  }
+  /* Comment */ .chroma .c { color:#75715e }
+  /* CommentHashbang */ .chroma .ch { color:#75715e }
+  /* CommentMultiline */ .chroma .cm { color:#75715e }
+  /* CommentSingle */ .chroma .c1 { color:#75715e }
+  /* CommentSpecial */ .chroma .cs { color:#75715e }
+  /* CommentPreproc */ .chroma .cp { color:#75715e }
+  /* CommentPreprocFile */ .chroma .cpf { color:#75715e }
+  /* Generic */ .chroma .g {  }
+  /* GenericDeleted */ .chroma .gd { color:#f92672 }
+  /* GenericEmph */ .chroma .ge { font-style:italic }
+  /* GenericError */ .chroma .gr {  }
+  /* GenericHeading */ .chroma .gh {  }
+  /* GenericInserted */ .chroma .gi { color:#a6e22e }
+  /* GenericOutput */ .chroma .go {  }
+  /* GenericPrompt */ .chroma .gp {  }
+  /* GenericStrong */ .chroma .gs { font-weight:bold }
+  /* GenericSubheading */ .chroma .gu { color:#75715e }
+  /* GenericTraceback */ .chroma .gt {  }
+  /* GenericUnderline */ .chroma .gl {  }
+  /* TextWhitespace */ .chroma .w {  }
--- a/assets/css/_common/scaffolding/tags/bilibili.scss
+++ b/assets/css/_common/scaffolding/tags/bilibili.scss
@ -0,0 +1,16 @@
+.bilibili-video {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 50%;
+  margin: auto;
+  text-align: center;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+}
--- a/assets/css/_common/scaffolding/tags/index.scss
+++ b/assets/css/_common/scaffolding/tags/index.scss
@ -2,7 +2,7 @@
@import 'group-pictures';
@import 'label';
@import 'link-grid';
-@import 'mermaid';
@import 'note';
@import 'pdf';
@import 'tabs';
+@import 'bilibili'
--- a/assets/css/_common/scaffolding/tags/mermaid.scss
+++ b/assets/css/_common/scaffolding/tags/mermaid.scss
@ -1,6 +0,0 @@
-@if $mermaid_enable {
-  .mermaid {
-    margin-bottom: 20px;
-    text-align: center;
-  }
-}
--- a/assets/css/_variables/base.scss
+++ b/assets/css/_variables/base.scss
@ -13,6 +13,7 @@ $grey-lighter : #ddd;
 $grey-light   : #ccc;
 $grey         : #bbb;
 $grey-dark    : #999;
+$grey-cnt     : #5c5c5c;
 $grey-dim     : #666;
 $black-light  : #555;
 $black-dim    : #333;
@ -49,7 +50,8 @@ $blockquote-color             : $grey-dim;
 $blockquote-color-dark        : $grey;

 // Global border color.
-$border-color                 : $grey-light;
+$border-color                 : $grey-dark;
+$border-color-dark            : $grey-lighter;

 // Background color for <body>
 $body-bg-color                : white;
@ -58,8 +60,10 @@ $content-bg-color             : white;
 $content-bg-color-dark        : $black-dim;

 // Selection
-$selection-bg                 : $blue-deep;
+$selection-bg                 : rgba(53, 166, 247, 0.25) !default;
+$selection-bg-dark            : rgba(50, 112, 194, 0.4) !default;
 $selection-color              : $gainsboro;
+$selection-color-dark         : $grey-dark;

 // Dark mode color
 $card-bg-color                : $whitesmoke;
@ -171,6 +175,60 @@ $highlight-foreground-dark        : $highlight_dark_foreground;
 $highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
 $highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);

+// Code type list
+$code-type-list:
+  "language-bash" "Bash",
+  "language-c" "C",
+  "language-cs" "C#",
+  "language-cpp" "C++",
+  "language-clojure" "Clojure",
+  "language-coffeescript" "CoffeeScript",
+  "language-css" "CSS",
+  "language-dart" "Dart",
+  "language-diff" "Diff",
+  "language-erlang" "Erlang",
+  "language-go" "Go",
+  "language-go-html-template" "Go HTML Template",
+  "language-groovy" "Groovy",
+  "language-haskell" "Haskell",
+  "language-html" "HTML",
+  "language-http" "HTTP",
+  "language-xml" "XML",
+  "language-java" "Java",
+  "language-js" "JavaScript",
+  "language-javascript" "JavaScript",
+  "language-json" "JSON",
+  "language-kotlin" "Kotlin",
+  "language-latex" "LaTeX",
+  "language-less" "Less",
+  "language-lisp" "Lisp",
+  "language-lua" "Lua",
+  "language-makefile" "Makefile",
+  "language-markdown" "Markdown",
+  "language-matlab" "Matlab",
+  "language-objectivec" "Objective-C",
+  "language-php" "PHP",
+  "language-perl" "Perl",
+  "language-powershell" "PowerShell",
+  "language-posh" "PowerShell",
+  "language-pwsh" "PowerShell",
+  "language-python" "Python",
+  "language-r" "R",
+  "language-ruby" "Ruby",
+  "language-rust" "Rust",
+  "language-scala" "Scala",
+  "language-scss" "Scss",
+  "language-shell" "Shell",
+  "language-sql" "SQL",
+  "language-swift" "Swift",
+  "language-tex" "TeX",
+  "language-toml" "TOML",
+  "language-ts" "TypeScript",
+  "language-typescript" "TypeScript",
+  "language-vue" "Vue",
+  "language-yml" "YAML",
+  "language-yaml" "YAML",
+  !default;

 // Buttons
 // --------------------------------------------------
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@ -7,7 +7,6 @@ $darkmode                   : {{ $P.darkmode }};

 $body_scrollbar_overlay     : {{ $P.bodyScrollbar.overlay }};
 $body_scrollbar_stable      : {{ $P.bodyScrollbar.stable }};
-$mermaid_enable             : {{ $P.mermaid.enable }};
 $mobile_layout_economy      : {{ $P.mobileLayoutEconomy }};
 $theme_color_dark           : {{ $P.themeColor.dark }};
 $theme_color_light          : {{ $P.themeColor.light }};
@ -85,6 +84,9 @@ $post_edit_enable           : {{ $P.postEdit.enable }};
 $post_meta_item_text        : {{ $P.postMeta.itemText }};
 $reward_settings_animation  : {{ $P.rewardSets.animation }};
 $post_end_tag_icon          : {{ $P.postFooter.tagIcon }};
+$post_share_enable          : {{ $P.share.enable }};
+$post_sharethis_set         : {{ isset $P.share "sharethis" }};
+$post_alert_colors          : ({{ range $key, $value := $P.postAlerts }} {{ $key }}: {{ $value.color }}, {{ end }});

 // TODO find the paramters
 $text_align_desktop         : {{ $P.textAlign.desktop }};
--- a/assets/css/noscript.scss
+++ b/assets/css/noscript.scss
@ -3,10 +3,13 @@ body { margin-top: 2rem; }
 .use-motion .menu-item,
 .use-motion .sidebar,
 .use-motion .post-block,
+.use-motion .flinks-block,
 .use-motion .pagination,
 .use-motion .comments,
 .use-motion .post-header,
+.use-motion .flinks-header,
 .use-motion .post-body,
+.use-motion .flinks-body,
 .use-motion .collection-header {
  visibility: visible;
 }
--- a/assets/js/third-party/comments/artalk.js
+++ b/assets/js/third-party/comments/artalk.js
--- a/assets/js/third-party/comments/giscus.js
+++ b/assets/js/third-party/comments/giscus.js
--- a/assets/js/third-party/comments/livere.js
+++ b/assets/js/third-party/comments/livere.js
--- a/assets/js/third-party/comments/utterances.js
+++ b/assets/js/third-party/comments/utterances.js
--- a/assets/js/third-party/comments/waline.js
+++ b/assets/js/third-party/comments/waline.js
@ -5,10 +5,8 @@ NexT.plugins.comments.waline = function() {
    || !NexT.utils.checkDOMExist(element)) return; 
  
  const {
-    comment,
    emoji, 
    imguploader, 
-    pageview, 
    placeholder, 
    sofa,
    requiredmeta, 
@ -39,8 +37,6 @@ NexT.plugins.comments.waline = function() {
      Waline.init({
        locale,
        el            : element,
-        pageview      : pageview,
-        comment       : comment,
        emoji         : emoji,
        imageUploader : imguploader,
        wordLimit     : wordlimit,
--- a/assets/js/3rd/comments/waline3.js
+++ b/assets/js/3rd/comments/waline3.js
@ -0,0 +1,60 @@
+/* Waline3 comment plugin */
+NexT.plugins.comments.waline3 = function () {
+  const element = '.waline3-container';
+  if (!NexT.CONFIG.waline3
+    || !NexT.utils.checkDOMExist(element)) return;
+    
+  const {
+    emoji,
+    search,
+    imguploader,
+    placeholder,
+    sofa,
+    requiredmeta,
+    serverurl,
+    wordlimit,
+    reaction,
+    reactiontext,
+    reactiontitle
+  } = NexT.CONFIG.waline3.cfg;
+
+  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline3.js);
+
+  NexT.utils.lazyLoadComponent(element, () => {
+    
+    const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline3.css);
+    NexT.utils.getStyle(waline_css, 'before');
+   
+    let waline_script = `
+      let locale = {
+        placeholder   : '${placeholder}',
+        sofa          : '${sofa}',
+        reactionTitle : '${reactiontitle}'
+      };
+
+      let recatt = ${JSON.stringify(reactiontext)}
+      recatt.forEach(function(value, index){
+        locale['reaction'+index] = value;
+      });
+    
+      import('${waline_js}').then((Waline) => {
+        Waline.init({
+          locale,
+          el            : '${element}',
+          emoji         : ${emoji},
+          search        : ${search},
+          imageUploader : ${imguploader},
+          wordLimit     : ${wordlimit},
+          requiredMeta  : ${JSON.stringify(requiredmeta)},
+          reaction      : ${reaction},
+          serverURL     : '${serverurl}',
+          dark          : 'html[data-theme="dark"]'
+        });
+
+        NexT.utils.hiddeLodingCmp('${element}');
+      });
+    `;
+    
+    NexT.utils.getScript(null, { module: true, textContent: waline_script });
+  });
+}
--- a/assets/js/3rd/others/clipboard.js
+++ b/assets/js/3rd/others/clipboard.js
@ -0,0 +1,57 @@
+/* clipboard plugin */
+NexT.plugins.others.clipboard = function () {
+
+  let chromaDiv = document.querySelectorAll('div.highlight div.chroma');
+  if (chromaDiv.length === 0) return;
+
+  chromaDiv.forEach(element => {
+    // Add copy button DOM.
+    let codeblock = element.querySelector('code[class]:not([class=""]');
+    let lang = codeblock.className;
+    let copyBtn = document.createElement('div');
+    copyBtn.classList.add('copy-btn');
+    codeblock.parentNode.appendChild(copyBtn);
+
+    element.addEventListener('mouseleave', () => {
+      setTimeout(() => {
+        copyBtn.classList.remove('copied','uncopied');
+      }, 300);
+    });
+
+    // Add code header show
+    var ch = document.createElement('div');
+    ch.classList.add('code-header');
+    ch.classList.add(lang);
+    ch.insertAdjacentHTML('afterbegin', 
+      '<span class="code-lang"></span><span class="collapse-btn"></span>');
+    ch.addEventListener('click', function () {       
+      element.classList.toggle('hidden-code');       
+      ch.querySelector('.collapse-btn').classList.toggle('collapse');
+    }, false);
+
+    element.parentNode.insertBefore(ch, element);
+  });
+
+  if (!NexT.CONFIG.copybtn || !NexT.CONFIG.page.clipboard) return;
+
+  const clipboard_js = NexT.utils.getCDNResource(NexT.CONFIG.page.clipboard.js);
+  NexT.utils.getScript(clipboard_js, function () {   
+    // Register the clipboard event. 
+    var clipboard = new ClipboardJS('.copy-btn', {
+      text: function (trigger) {
+        // TODO: Why there clipboard default text content with enter?
+        return trigger.previousElementSibling.textContent.trim();
+      }
+    });
+
+    clipboard.on('success', function (e) {
+      e.clearSelection();
+      e.trigger.classList.add('copied');
+    });
+
+    clipboard.on('error', function (e) {
+      console.error('Copy failed:', e);      
+      e.trigger.classList.add('uncopied');
+    });
+  }); 
+}
--- a/assets/js/3rd/others/counter.js
+++ b/assets/js/3rd/others/counter.js
@ -0,0 +1,66 @@
+/* Page's view & comment counter plugin */
+NexT.plugins.others.counter = function () {
+  let pageview_js = undefined;
+  let comment_js = undefined;
+
+  const post_meta = NexT.CONFIG.postmeta;
+
+  const views = post_meta.views;
+  if (views != undefined && views.enable) {
+    let pageview_el = '#pageview-count';
+
+    switch (views.plugin) {
+      case 'waline':
+        pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.pagecnt);
+        NexT.utils.getScript(pageview_js, function () {
+          Waline.pageviewCount({
+            selector : pageview_el,
+            serverURL: NexT.CONFIG.waline.cfg.serverurl
+          });
+        });
+        break;
+      case 'waline3':
+        pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline3.pagecnt);
+
+        let pageview_script = `
+          import('${pageview_js}').then((Waline) => {
+            Waline.pageviewCount({             
+              selector : '${pageview_el}',
+              serverURL: '${NexT.CONFIG.waline3.cfg.serverurl}'
+            })
+          });
+          `;
+        NexT.utils.getScript(null, { module: true, textContent: pageview_script });
+        break;
+    }
+
+  }
+
+  const comments = post_meta.comments;
+  if (comments != undefined && comments.enable) {
+    let comments_el = '#comments-count';
+    switch (comments.plugin) {
+      case 'waline':
+        comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.commentcnt);
+        NexT.utils.getScript(comment_js, function () {
+          Waline.commentCount({
+            selector : comments_el,
+            serverURL: NexT.CONFIG.waline.cfg.serverurl
+          });
+        });
+        break;
+      case 'waline3':
+        comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline3.commentcnt);
+        let comment_script = `
+          import('${comment_js}').then((Waline) => {
+            Waline.commentCount({             
+              selector : '${comments_el}',
+              serverURL: '${NexT.CONFIG.waline3.cfg.serverurl}'
+            })
+          });
+          `;
+        NexT.utils.getScript(null, { module: true, textContent: comment_script });
+        break;
+    }
+  }
+}
--- a/assets/js/third-party/others/lawidget.js
+++ b/assets/js/third-party/others/lawidget.js
@ -1,5 +1,10 @@
 /* 51La sidebar data widget */
 NexT.plugins.others.lawidget = function() {
+
+  if (!NexT.CONFIG.lawidget ) {
+    return;
+  }
+
  const element = '#siteinfo-card-widget';
  const lawt_js = NexT.CONFIG.lawidget.js.replace('laId', NexT.CONFIG.lawidget.id);
  
--- a/assets/js/third-party/others/math.js
+++ b/assets/js/third-party/others/math.js
@ -4,13 +4,24 @@ NexT.plugins.others.math = function() {
  
  if (render === 'mathjax') {
    const render_js = NexT.utils.getCDNResource(NexT.CONFIG.page.math.js);
-    NexT.utils.getScript(render_js, function(){
+    const mathjaxCfg = `
      window.MathJax = {
+        // 自定义内联数学公式的分隔符号
        tex: {
-          inlineMath: [["$", "$"]],
+          inlineMath: [['$', '$'], ['\\(', '\\)']]
+        },
+        // SVG 渲染配置为全局共享字体缓存
+        svg: {
+          fontCache: 'global'
+        },
+        // 排除特定的HTML标签，避免过度渲染
+        options: {
+          skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "footer"],
        }
      };
-    });
+    `;
+    NexT.utils.getScript(null, { textContent: mathjaxCfg });
+    NexT.utils.getScript(render_js, { attributes: { id: "MathJax-script", "async": true }});
  }

  if (render === 'katex') {
--- a/assets/js/third-party/others/mermaid.js
+++ b/assets/js/third-party/others/mermaid.js
--- a/assets/js/third-party/search/algolia.js
+++ b/assets/js/third-party/search/algolia.js
--- a/assets/js/third-party/search/local.js
+++ b/assets/js/third-party/search/local.js
--- a/assets/js/3rd/share/addtoany.js
+++ b/assets/js/3rd/share/addtoany.js
@ -0,0 +1,24 @@
+/* Addtoany share plugin */
+NexT.plugins.share.addtoany = function() {
+  const element = '.a2a_kit';
+  if (!NexT.CONFIG.share.enable || !NexT.utils.checkDOMExist(element)) return; 
+
+  const addtoany = NexT.CONFIG.share.addtoany;
+
+  if (!addtoany) return;
+
+  NexT.utils.lazyLoadComponent(element, function() {
+    let addtoany_cfg = `
+      var a2a_config = a2a_config || {};
+      a2a_config.onclick = 1;
+      a2a_config.locale = "${addtoany.locale}";
+      a2a_config.num_services = ${addtoany.num};
+    `;
+
+    NexT.utils.getScript(null, {
+      textContent: addtoany_cfg
+    });   
+    
+    NexT.utils.getScript(addtoany.js, () => { NexT.utils.hiddeLodingCmp(element); });
+  });
+}
--- a/assets/js/3rd/share/sharethis.js
+++ b/assets/js/3rd/share/sharethis.js
@ -0,0 +1,21 @@
+/* Sharethis share plugin */
+NexT.plugins.share.sharethis = function() {
+  const element = '.sharethis-inline-share-buttons';
+  if (!NexT.CONFIG.share.enable || !NexT.utils.checkDOMExist(element)) return; 
+
+  const sharethis = NexT.CONFIG.share.sharethis;
+
+  if (!sharethis) return;
+
+  const sharethis_js = sharethis.js.replace(/id/, sharethis.id);
+
+  NexT.utils.lazyLoadComponent(element, function() {
+    NexT.utils.getScript(sharethis_js, {
+      attributes: {
+        async: 'async'
+      }
+    });
+
+    NexT.utils.hiddeLodingCmp(element);
+  });
+}
--- a/assets/js/motion.js
+++ b/assets/js/motion.js
@ -95,10 +95,10 @@ NexT.motion.middleWares = {
      });
    }

-    animate(postblock, '.post-block,.flinks-block, .pagination, .post-comments');
+    animate(postblock, '.post-block, .flinks-block, .pagination, .post-comments');
    animate(collheader, '.collection-header');
-    animate(postheader, '.post-header');
-    animate(postbody, '.post-body');
+    animate(postheader, '.post-header, .flinks-header');
+    animate(postbody, '.post-body, .flinks-body');

    return sequence;
  },
--- a/assets/js/next-boot.js
+++ b/assets/js/next-boot.js
@ -61,19 +61,26 @@ NexT.boot.refresh = function() {

  NexT.utils.fmtSiteInfo();

+  if (NexT.CONFIG.isMultiLang) {
+    NexT.utils.registerLangSelect();
+  }
+
  if (!NexT.CONFIG.page.isPage) return;
 
-  NexT.utils.registerSidebarTOC();
-  NexT.utils.registerCopyCode();
+  if (NexT.CONFIG.page.toc) NexT.utils.registerSidebarTOC();
+  if (NexT.CONFIG.page.expired) NexT.utils.calPostExpiredDate();
+  if (NexT.CONFIG.page.music) NexT.utils.registerAPlayer();
+
+  NexT.utils.registerImageViewer();
  NexT.utils.registerPostReward();
+
  if(NexT.CONFIG.page.comments) {    
    NexT.utils.initCommontesDispaly();
    NexT.utils.registerCommonSwitch();
-    NexT.utils.domAddClass('#goto-comments', 'goto-comments-on');
+    NexT.utils.domAddClass('#goto-comments', 'show');
  } else {
-    NexT.utils.hideComments();
+    NexT.utils.domAddClass('#goto-comments', 'hidden');
  }
-  NexT.utils.registerImageViewer();

  //TODO
   /**
--- a/assets/js/third-party/others/counter.js
+++ b/assets/js/third-party/others/counter.js
@ -1,31 +0,0 @@
-/* Page's view & comment counter plugin */
-NexT.plugins.others.counter = function() {
-    let pageview_js = undefined;
-    let comment_js = undefined;
-
-    const post_meta = NexT.CONFIG.postmeta;
-
-    const views = post_meta.views;
-    if(views != undefined && views.enable) {
-      if (views.plugin == 'waline') {
-        pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.js[0]);
-        NexT.utils.getScript(pageview_js, function(){
-          Waline.pageviewCount({
-            serverURL: NexT.CONFIG.waline.cfg.serverurl
-          });
-        });
-      }
-    }
-
-    const comments = post_meta.comments;
-    if (comments != undefined && comments.enable) {
-      if (comments.plugin == 'waline') {
-        comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.js[1]);
-        NexT.utils.getScript(comment_js, function(){
-          Waline.commentCount({
-            serverURL: NexT.CONFIG.waline.cfg.serverurl
-          });
-        });
-      }
-    }
-}
--- a/assets/js/third-party/others/translate.js
+++ b/assets/js/third-party/others/translate.js
@ -1,9 +0,0 @@
-/* Google translate plugin */
-NexT.plugins.others.translate = function() {
-  const element = '#gtranslate';
-  if (!NexT.utils.checkDOMExist(element)) return;
-  NexT.utils.lazyLoadComponent(element, function() { 
-    window.translateelement_styles='/css/google-translate.min.css'; 
-    NexT.utils.getScript('/js/third-party/google-translate.min.js');
-  });
-}
--- a/assets/js/third-party/share/addthis.js
+++ b/assets/js/third-party/share/addthis.js
@ -1,16 +0,0 @@
-/* AddThis share plugin */
-NexT.plugins.share.addthis = function() {
-  const element = '.addthis_inline_share_toolbox';
-  if (!NexT.CONFIG.addthis || !NexT.utils.checkDOMExist(element)) return; 
-
-  const addthis_js = NexT.CONFIG.addthis.js + '?pubid=' + NexT.CONFIG.addthis.cfg.pubid;
-
-  NexT.utils.lazyLoadComponent(element, function() {
-    NexT.utils.getScript(addthis_js, {
-      attributes: {
-        async: false
-      },
-      parentNode: document.querySelector(element)
-    });
-  });
-}
--- a/assets/js/utils.js
+++ b/assets/js/utils.js
@ -7,15 +7,50 @@ HTMLElement.prototype.wrap = function (wrapper) {
 };

 NexT.utils = {
-  registerMenuClick: function() {
+  registerAPlayer: function () {
+    this.getStyle(
+      NexT.utils.getCDNResource(NexT.CONFIG.page.music.css)
+    );
+    
+    NexT.CONFIG.page.music.js.forEach(function(js) {
+      NexT.utils.getScript(NexT.utils.getCDNResource(js), true);
+    });
+    
+  },
+  calPostExpiredDate: function() {
+    const postMetaDom = document.querySelector('.post-meta-container');
+    let postTime = postMetaDom.querySelector('time[itemprop="dateCreated datePublished"]').getAttribute("datetime");
+    let postLastmodTime = postMetaDom.querySelector('time[itemprop="dateModified dateLastmod"]');
+
+    if (postLastmodTime != null) postTime = postLastmodTime.getAttribute("datetime");
+
+    let expiredTip = '';
+    const expireCfg = NexT.CONFIG.page.expiredTips;
+    let expiredTime = this.diffDate(postTime, 2);
+
+    if (expiredTime.indexOf(NexT.CONFIG.i18n.ds_years) > -1) {
+      expiredTip = expireCfg.warn.split('#');
+    } else {
+      let days = parseInt(expiredTime.replace(NexT.CONFIG.i18n.ds_days, '').trim(), 10);
+      if (days < 180)  return; 
+      expiredTip = expireCfg.info.split('#');
+    }
+
+    let expiredTipPre = expiredTip[0];
+    let expiredTipSuf = expiredTip[1];
+    expiredTip = expiredTipPre + '<span class="post-expired-times">' + expiredTime + '</span>' + expiredTipSuf;
+    document.getElementById('post-expired-content').innerHTML = expiredTip;
+    this.domAddClass('#post-expired-tip', 'show');
+  },
+  registerMenuClick: function () {
    const pMenus = document.querySelectorAll('.main-menu > li > a.menus-parent');
-    pMenus.forEach(function(item) {
+    pMenus.forEach(function (item) {
      const icon = item.querySelector('span > i');
-      var ul = item.nextElementSibling;  
-      
-      item.addEventListener('click', function(e) {
+      var ul = item.nextElementSibling;
+
+      item.addEventListener('click', function (e) {
        e.preventDefault();
-        
+
        ul.classList.toggle('expand');
        if (ul.classList.contains('expand')) {
          icon.className = 'fa fa-angle-down';
@ -30,9 +65,9 @@ NexT.utils = {
      }
    });
  },
-  registerImageLoadEvent: function() {
+  registerImageLoadEvent: function () {
    const images = document.querySelectorAll('.sidebar img, .post-block img, .vendors-list img');
-			
+
    const callback = (entries) => {
      entries.forEach(item => {
        if (item.intersectionRatio > 0) {
@ -40,7 +75,7 @@ NexT.utils = {
          let imgSrc = ele.getAttribute('data-src');
          if (imgSrc) {
            let img = new Image();
-            img.addEventListener('load', function() {
+            img.addEventListener('load', function () {
              ele.src = imgSrc;
            }, false);
            ele.src = imgSrc;
@ -50,23 +85,23 @@ NexT.utils = {
        }
      })
    };
-      
+
    const observer = new IntersectionObserver(callback);
    images.forEach(img => {
      observer.observe(img);
    });
  },

-  registerImageViewer: function() {
+  registerImageViewer: function () {
    const post_body = document.querySelector('.post-body');
    if (post_body) {
-      new Viewer(post_body,{ navbar:2, toolbar:2 });
+      new Viewer(post_body, { navbar: 2, toolbar: 2 });
    }
  },

  registerToolButtons: function () {
    const buttons = document.querySelector('.tool-buttons');
-    
+
    const scrollbar_buttons = buttons.querySelectorAll('div:not(#toggle-theme)');
    scrollbar_buttons.forEach(button => {
      let targetId = button.id;
@ -86,12 +121,12 @@ NexT.utils = {

  slidScrollBarAnime: function (targetId, easing = 'linear', duration = 500) {
    const targetObj = document.getElementById(targetId);
-   
+
    window.anime({
      targets: document.scrollingElement,
      duration: duration,
      easing: easing,
-      scrollTop:  targetId == '' || !targetObj ? 0 : targetObj.getBoundingClientRect().top + window.scrollY
+      scrollTop: targetId == '' || !targetObj ? 0 : targetObj.getBoundingClientRect().top + window.scrollY
    });
  },

@ -147,8 +182,8 @@ NexT.utils = {
    }
  },

-  fmtLaWidget: function(){
-    setTimeout(function(){
+  fmtLaWidget: function () {
+    setTimeout(function () {
      const laWidget = document.querySelectorAll('#la-siteinfo-widget span');
      if (laWidget.length > 0) {
        const valIds = [0, 2, 4, 6];
@ -162,8 +197,8 @@ NexT.utils = {
  },

  fmtBusuanzi: function () {
-    setTimeout(function(){
-      const bszUV = document.getElementById('busuanzi_value_site_uv');    
+    setTimeout(function () {
+      const bszUV = document.getElementById('busuanzi_value_site_uv');
      if (bszUV) {
        bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
      }
@ -171,7 +206,7 @@ NexT.utils = {
      if (bszPV) {
        bszPV.innerText = NexT.utils.numberFormat(bszPV.innerText);
      }
-    }, 800);  
+    }, 800);
  },

  numberFormat: function (number) {
@ -244,14 +279,14 @@ NexT.utils = {

    let router = NexT.CONFIG.vendor.router;
    let { name, version, file, alias, alias_name } = res;
-   
+
    let res_src = '';
-  
+
    switch (router.type) {
      case "modern":
        if (alias_name) name = alias_name;
        let alias_file = file.replace(/^(dist|lib|source|\/js|)\/(browser\/|)/, '');
-        if (alias_file.indexOf('min') == -1) {          
+        if (alias_file.indexOf('min') == -1) {
          alias_file = alias_file.replace(/\.js$/, '.min.js');
        }
        res_src = `${router.url}/${name}/${version}/${alias_file}`;
@ -271,27 +306,57 @@ NexT.utils = {
  registerCopyCode: function () {
    if (!NexT.CONFIG.copybtn) return;

-    let figure = document.querySelectorAll('.highlight pre');
+   /** let figure = document.querySelectorAll('.highlight pre');
    if (figure.length === 0 || !NexT.CONFIG.copybtn) return;
    figure.forEach(element => {
-      let cn = element.querySelector('code').className;
-      // TODO seems hard code need find other ways fixed it.
-      if (cn == '') return;
-      element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
+      let cn = element.querySelector('code').className;      
+      if (cn === '') return;
+      element.children[0].insertAdjacentHTML('beforebegin', '<div class="copy-btn" data-clipboard-snippe><i class="fa fa-copy fa-fw"></i></div>');
+      var clipboard = new ClipboardJS(element.children[0],
+        { 
+          text: function(trigger) {
+            return trigger.nextElementSibling.textContent.trim();
+          }
+        });
+      clipboard.on('success', function (e) {
+        e.clearSelection();
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        button.querySelector('i').className = 'fa fa-check-circle fa-fw';
+      });
+      clipboard.on('error', function (e) {
+        console.error('复制失败:', e);
+        button.querySelector('i').className = 'fa fa-times-circle fa-fw';
+      });
      const button = element.querySelector('.copy-btn');
-      button.addEventListener('click', () => {
+      element.addEventListener('mouseleave', () => {
+        setTimeout(() => {
+          button.querySelector('i').className = 'fa fa-copy fa-fw';
+        }, 300);
+      });
+    });**/
+   /** figure.forEach(element => {
+      let cn = element.querySelector('code').className;      
+      if (cn === '') return;
+     element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
+      // element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
+      const button = element.querySelector('.copy-btn');
+      button.addEventListener('click', async () => {
        const lines = element.querySelector('.code') || element.querySelector('code');
-        const code = lines.innerText.replace(/(\n{2,})/g, '\n');
+        let code = lines.textContent.trim();
+        console.log('尝试复制代码:', code);
+
        if (navigator.clipboard) {
-          // https://caniuse.com/mdn-api_clipboard_writetext
          navigator.clipboard.writeText(code).then(() => {
+            console.log('复制成功');
            button.querySelector('i').className = 'fa fa-check-circle fa-fw';
-          }, () => {
+          }).catch((err) => {
+            console.error('复制失败:', err);
            button.querySelector('i').className = 'fa fa-times-circle fa-fw';
          });
        } else {
          const ta = document.createElement('textarea');
-          ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
+          ta.style.top = window.scrollY + 'px';
          ta.style.position = 'absolute';
          ta.style.opacity = '0';
          ta.readOnly = true;
@ -299,20 +364,22 @@ NexT.utils = {
          document.body.append(ta);
          ta.select();
          ta.setSelectionRange(0, code.length);
-          ta.readOnly = false;
-          const result = document.execCommand('copy');
-          button.querySelector('i').className = result ? 'fa fa-check-circle fa-fw' : 'fa fa-times-circle fa-fw';
-          ta.blur(); // For iOS
-          button.blur();
+          try {
+            const successful = document.execCommand('copy');
+            if (!successful) throw new Error('复制命令执行失败');
+          } catch (err) {
+            console.error('复制失败:', err);
+          }
          document.body.removeChild(ta);
        }
+       
      });
      element.addEventListener('mouseleave', () => {
        setTimeout(() => {
          button.querySelector('i').className = 'fa fa-copy fa-fw';
        }, 300);
      });
-    });
+    });**/
  },

  wrapTableWithBox: function () {
@ -432,22 +499,58 @@ NexT.utils = {
      const isSubPath = !NexT.CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
      target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
    });
-  },
+  },*/
 	
  registerLangSelect: function() {
-    const selects = document.querySelectorAll('.lang-select');
-    selects.forEach(sel => {
-      sel.value = NexT.CONFIG.page.lang;
-      sel.addEventListener('change', () => {
-        const target = sel.options[sel.selectedIndex];
-        document.querySelectorAll('.lang-select-label span').forEach(span => {
-          span.innerText = target.text;
-        });
-        // Disable Pjax to force refresh translation of menu item
-        window.location.href = target.dataset.href;
+    let selects = document.getElementById('lang-select');
+    if (!selects) return;
+
+    let selected = selects.querySelector('#lang-selected');
+    let selectedVal = selected.querySelectorAll('span');
+    let flagIcon = selectedVal[0];
+    let langName = selectedVal[1];
+    let selectIcon = selected.querySelector('i');
+   
+
+    let options = selects.querySelectorAll('#lang-options>div');
+    let optionsDom = options[0].parentNode;
+    options.forEach(option => {
+      option.addEventListener('click', () => {
+        let langCode = option.getAttribute('lang-code');
+        flagIcon.className = 'flag-icon flag-icon-'+langCode;
+        langName.innerHTML = option.getAttribute('lang-name');
+        selectIcon.className = 'fa fa-chevron-down';
+        optionsDom.style.opacity = '0';
+        optionsDom.style.transform = 'translateY(-10px)';
+
+        let url = option.getAttribute('lang-url');
+        
+        setTimeout(() => {
+          optionsDom.style.display = 'none';
+          window.location.href = url;
+        }, 300);
      });
+    }); 
+
+    selected.addEventListener('mouseenter', function() {
+      selectIcon.className = 'fa fa-chevron-up';
+      optionsDom.style.display = 'block';
+      optionsDom.style.opacity = '1';
+      optionsDom.style.transform = 'translateY(0)';
+      
    });
-  },*/
+
+    optionsDom.addEventListener('mouseleave', function() {
+      selectIcon.className = 'fa fa-chevron-down';
+      optionsDom.style.opacity = '0';
+      optionsDom.style.transform = 'translateY(-10px)';
+      
+      setTimeout(() => {
+        optionsDom.style.display = 'none';
+      }, 300);
+    });
+    
+  },

  registerSidebarTOC: function () {
    const toc = document.getElementById('TableOfContents');
@ -509,13 +612,6 @@ NexT.utils = {
    });
  },

-  hideComments: function () {
-    let postComments = document.querySelector('.post-comments');
-    if (postComments !== null) {
-        postComments.style.display = 'none';
-    }
-  },
-
  hiddeLodingCmp: function (selector) {
    const loadding = document.querySelector(selector).previousElementSibling;
    loadding.style.display = 'none';
@ -587,7 +683,7 @@ NexT.utils = {
    });
  },

-  getStyle: function (src, position='after', parent) {
+  getStyle: function (src, position = 'after', parent) {
    const link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');
@ -607,8 +703,11 @@ NexT.utils = {
        condition: legacyCondition
      }).then(options);
    }
+
    const {
      condition = false,
+      module = false,
+      textContent = undefined,
      attributes: {
        id = '',
        async = false,
@ -628,6 +727,8 @@ NexT.utils = {

        if (id) script.id = id;
        if (crossOrigin) script.crossOrigin = crossOrigin;
+        if (module) script.type = 'module';
+        if (textContent != undefined) script.textContent = textContent;
        script.async = async;
        script.defer = defer;
        Object.assign(script.dataset, dataset);
@ -638,22 +739,25 @@ NexT.utils = {
        script.onload = resolve;
        script.onerror = reject;

-        if (typeof src === 'object') {
-          const { url, integrity } = src;
-          script.src = url;
-          if (integrity) {
-            script.integrity = integrity;
-            script.crossOrigin = 'anonymous';
+        if (src != null && src != undefined) {
+          if (typeof src === 'object') {
+            const { url, integrity } = src;
+            script.src = url;
+            if (integrity) {
+              script.integrity = integrity;
+              script.crossOrigin = 'anonymous';
+            }
+          } else {
+            script.src = src;
          }
-        } else {
-          script.src = src;
        }
+
        (parentNode || document.head).appendChild(script);
      }
    });
  },

-  lazyLoadComponent: function(selector, legacyCallback) {
+  lazyLoadComponent: function (selector, legacyCallback) {
    if (legacyCallback) {
      return this.lazyLoadComponent(selector).then(legacyCallback);
    }
--- a/data/config.yaml
+++ b/data/config.yaml
@ -1,5 +1,5 @@
 # Hugo NexT theme's custom config

-version: 4.6.3
+version: 4.7.0

 domain: hugo-next.eu.org
--- a/data/resources.yaml
+++ b/data/resources.yaml
@ -33,7 +33,7 @@ vendors:

  - name: zstatic
    home: "https://www.zstatic.net"
-    logo: "https://www.zstatic.net/favicon/favicon-16x16.png"
+    logo: "https://www.zstatic.net/logo.png"
    type: "modern"
    url: "https://s4.zstatic.net/ajax/libs"

@ -64,12 +64,12 @@ js:
 # CSS Resources
 css:
  - name: font-awesome
-    version: 6.6.0
+    version: 6.7.2
    file: css/all.min.css
    alias: '@fortawesome/fontawesome-free'

  - name: animate.css
-    version: 4.1.1
+    version: 3.7.2
    file: animate.min.css

  - name: viewerjs
@ -90,8 +90,12 @@ analytics:

 # 文章分享
 # Share
-addthis:
-  js: https://s7.addthis.com/js/300/addthis_widget.js
+share:
+  sharethis:
+    js: https://platform-api.sharethis.com/js/sharethis.js#property=id&product=inline-share-buttons&source=platform
+
+  addtoany:
+    js: https://static.addtoany.com/menu/page.js

 # 评论组件
 # Comment component
@ -108,6 +112,19 @@ waline:
    file: dist/waline.css
    alias: "@waline/client"

+waline3:
+  js:
+    name: waline
+    version: 3.3.0
+    file: dist/waline.js
+    alias: "@waline/client"
+
+  css:
+    name: waline
+    version: 3.3.0
+    file: dist/waline.min.css
+    alias: "@waline/client"
+
 artalk:
  js:
    name: artalk
@ -128,6 +145,7 @@ utterances:
 livere:
  js: https://cdn-city.livere.com/js/embed.dist.js

+
 # 全文搜索
 # Full text search
 algolia:
@ -146,25 +164,25 @@ plugins:
    js:
      name: mathjax
      version: 3.2.2
-      file: es5/tex-mml-chtml.js
+      file: es5/tex-mml-svg.js

  katex:
    js:
      - name: katex
        alias_name: KaTeX
-        version: 0.16.9
+        version: 0.16.15
        file: dist/katex.min.js
        
      - name: auto-render
        alias: katex
        alias_name: KaTeX
-        version: 0.16.9
+        version: 0.16.15
        file: dist/contrib/auto-render.min.js

    css:
      name: katex
      alias_name: KaTeX
-      version: 0.16.9
+      version: 0.16.15
      file: dist/katex.min.css

  # 画图渲染
@ -186,4 +204,38 @@ plugins:
        alias_name: waline
        version: 2.15.8
        file: dist/comment.js
-        alias: "@waline/client"
+        alias: "@waline/client"
+  waline3:
+    js:
+      - name: pageview
+        alias_name: waline
+        version: 3.3.0
+        file: dist/pageview.js
+        alias: "@waline/client" 
+
+      - name: comment
+        alias_name: waline
+        version: 3.3.0
+        file: dist/comment.js
+        alias: "@waline/client"
+  # 音乐播放器
+  music:
+    js:
+      - name: aplayer
+        version: 1.10.1
+        file: dist/APlayer.min.js
+      
+      - name: meting
+        version: 2.0.1
+        file: dist/Meting.min.js
+
+    css:
+      name: aplayer
+      version: 1.10.1
+      file: dist/APlayer.min.css
+  # 复制到剪贴板
+  clipboard:
+    js: 
+      name: clipboard
+      version: 2.0.11
+      file: dist/clipboard.min.js
--- a/exampleSite/content/about/index.en-us.md
+++ b/exampleSite/content/about/index.en-us.md
@ -0,0 +1,29 @@
+---
+title: "About Hugo NexT Organization"
+
+date: 2025-01-25T18:00:52+08:00
+lastmod: 2025-01-25T18:00:52+08:00
+
+share: false
+followme: false
+nav: false
+copyright: false
+url: about.html
+---
+
+The `Hugo NexT` organization is jointly established by numerous friends from around the world who are fond of the `NexT` theme and style. The aim is to continue promoting and enhancing this theme within the `Hugo` engine. We warmly welcome you to join us!
+
+# Our Vision
+
+Continuing the classic black-and-white color scheme of `NexT`, it maintains simple usability and powerful functionality.
+
+# Usage Feedback
+
+- Join the online discussions on [GitHub Discussions](https://github.com/hugo-next/hugo-theme-next/discussions) or [Gitter](https://gitter.im/hugo-next/community) :beers:
+- [GitHub Issues](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Bug&template=bug-report.md) Submit a bug report :bug:
+- [GitHub Feature](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Feature+Request&template=feature-request.md) to propose new feature ideas :sparkles:
+
+> [!INFO]
+> Chinese's users can also join the QQ group for communication: 604710815
+
+{{< music url="/music/sky.mp3" name="City of the Sky" artist="Hayao Miyazaki" cover="/music/gongqijun.jpg" autoplay="true" >}}
--- a/exampleSite/content/about/index.md
+++ b/exampleSite/content/about/index.md
@ -1,6 +1,5 @@
 ---
 title: "关于 Hugo NexT 组织"
-description: "Hugo NexT 组织介绍说明。"

 date: 2022-06-09T20:12:52+08:00
 lastmod: 2022-06-09T20:12:52+08:00
@ -24,4 +23,7 @@ url: about.html
 - [GitHub Issues](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Bug&template=bug-report.md) 提交错误报告 :bug:
 - [GitHub Feature](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Feature+Request&template=feature-request.md) 表新功能的想法 :sparkles:

-> 同时国内用户也可加入 QQ 群交流： 604710815
+> [!INFO]
+> 同时国内用户也可加入 QQ 群交流： 604710815
+
+{{< music url="/music/sky.mp3" name="天空之城" artist="宫崎骏" cover="/music/gongqijun.jpg" autoplay="true" >}}
--- a/exampleSite/content/archives/_index.en-us.md
+++ b/exampleSite/content/archives/_index.en-us.md
@ -0,0 +1,3 @@
+---
+date: 2025-01-25T20:46:25+08:00
+---
--- a/exampleSite/content/flinks/index.en-us.md
+++ b/exampleSite/content/flinks/index.en-us.md
@ -0,0 +1,14 @@
+---
+title: "Demo Sites"
+type: flinks
+url: flinks.html
+---
+
+If you want to exchange friendly links on this site, please leave your site information in the comment section. The format reference is as follows:
+
+```yaml
+- name: Hugo-NexT
+  desc: Hugo NexT Official Site.
+  avatar: https://hugo-next.eu.org/imgs/hugo_next_avatar.png
+  link: https://hugo-next.eu.org
+```
--- a/exampleSite/content/flinks/index.md
+++ b/exampleSite/content/flinks/index.md
--- a/exampleSite/content/post/01-hello-world/index.en-us.md
+++ b/exampleSite/content/post/01-hello-world/index.en-us.md
@ -0,0 +1,60 @@
+---
+title:  "Hello world"
+description:  "Quickly describe the basic usage of Hugo website building."
+
+date: 2025-01-25T19:12:32+08:00
+lastmod: 2025-01-25T19:12:32+08:00
+
+categories:
+  - StartBuilSite
+
+tags:
+  - Hugo
+  - Start now
+
+url: demo/hello-world.html
+toc: true
+weight: 2
+---
+
+> Use the keyword `weight` to top the article.
+
+[Hugo](https://gohugo.io/), It is currently the fastest website construction framework in the world and one of the most popular open-source static site generators. With its astonishing speed and flexibility, Hugo has once again made website construction interesting.
+
+<!--more-->
+
+## Quick Start
+
+### Publish a new article
+
+```shell
+$ hugo new hello-world.md
+```
+
+More information: [Content format](https://gohugo.io/content-management/formats/)
+
+### Start service
+
+```shell
+$ hugo server
+```
+
+More information: [Hugo Service Command Line](https://gohugo.io/commands/hugo_server/)
+
+### Generate static files
+
+```shell
+$ hugo
+```
+
+More information: [Hugo website building](https://gohugo.io/commands/hugo/)
+
+### Deploy to server
+
+```language
+$ hugo deploy
+```
+
+More information: [Hugo Release](https://gohugo.io/commands/hugo_deploy/)
+
+Good luck, I believe you will love Hugo's journey of building a website!
--- a/exampleSite/content/post/01-hello-world/index.md
+++ b/exampleSite/content/post/01-hello-world/index.md
--- a/exampleSite/content/post/02-external-link/index.en-us.md
+++ b/exampleSite/content/post/02-external-link/index.en-us.md
@ -0,0 +1,36 @@
+--- 
+title:  "Welcome to the Hugo NexT organization"
+description: "Hugo NexT is a theme specifically designed for the Hugo engine, maintaining simplicity, ease of use, and powerful functionality! "
+Keywords: "Hugo, NexT, organization"
+
+date: 2025-01-25T20:59:12+08:00
+lastmod: 2025-01-25T20:59:12+08:00
+
+categories:
+  - Example
+tags:
+  - Hugo
+  - NexT
+
+expand: true
+extlink:  https://gitee.com/hugo-next/hugo-theme-next/
+
+weight: 1
+---
+
+Welcome to the Hugo NexT documentation site! It is from [Theme NexT](https://theme-next.js.org/) The transplanted one is [Hugo](https://gohugo.io/) The high-quality and elegant theme created maintains its easy-to-use features and powerful functionality.
+
+
+
+## User Guide
+
+Setting up a NexT theme is easy. Simply follow the documentation to quickly create your personal website!
+
+## Feedback
+
+- Visit the Awesome NexT list to share plugins and tutorials with other users.
+- Join our Gitter chat.
+- Add or improve translations within seconds.
+- Report one in GitHub Issues :bug: .
+- Apply for a new feature on GitHub.
+- Request a vote for the most popular feature.
--- a/exampleSite/content/post/02-external-link/index.md
+++ b/exampleSite/content/post/02-external-link/index.md
@ -14,10 +14,7 @@ tags:

 expand: true
 extlink: https://gitee.com/hugo-next/hugo-theme-next/
-#comment:
-# enable: false
-#toc: false
-#url: "external-link.html"
+
 weight: 1
 ---

--- a/exampleSite/content/post/03-markdown-syntax/index.en-us.md
+++ b/exampleSite/content/post/03-markdown-syntax/index.en-us.md
@ -0,0 +1,222 @@
+---
+Title: "Markdown Syntax Support"
+description:  Describe the various markdown syntax and effect displays supported by NexT themes
+isCJKLanguage: false
+
+publishDate: 2025-01-25T20:52:18+08:00
+lastmod: 2025-01-25T20:52:18+08:00
+
+author: Mainroad
+originLink:  https://mainroad-demo.netlify.app/demo/basic-elements/
+
+categories:
+  - Example
+  - MarkdownSyntax
+ 
+tags:
+  - Markdown
+  - Grammar
+
+toc: false
+draft: false
+url: demo/markdown-syntax.html
+---
+
+Only use this article to test whether the various syntax written in the content of the `Markdown` file is supported when building a website using the `Hugo` engine in the `NexT` theme, and demonstrate the actual effect.
+
+<!--more-->
+
+## Title Style
+
+Let's start with all possible headings, where the `<h1>` - `<h6>` elements in HTML represent six different levels of heading styles, with `<h1>` being the maximum heading`< H6>` is the minimum title, with the following effect:
+
+# Title 1
+## Title 2
+### Title 3
+#### Title 4
+##### Title 5
+###### Title 6
+
+
+## Paragraph format
+
+According to [W3C](https://www.w3.org/)Defined [HTML5 Specification](https://www.w3.org/TR/html5/dom.html#elements)，**HTML documents consist** of elements and text. The composition of each element consists of a [Start marker](https://www.w3.org/TR/html5/syntax.html#syntax), for example:`<body>` ， And [End Mark](https://www.w3.org/TR/html5/syntax.html#syntax), for example:`</body>` . 
+
+(*Some start and end markers may be omitted in certain situations and implied by other markers*.)
+
+Elements can have attributes that control how they work. For example, hyperlinks are formed using the `a` element and its `ref` attribute.
+
+### Markdown syntax
+
+```markdown
+! [Image Description] (Image Address)
+```
+![hugo-next-primary](//hugo-next.github.io/imgs/logo/hugo-next-primary.png)
+
+### HTML IMG tags
+
+```html
+<img src="Image Address" width="Width" height="Height"/>
+```
+
+<img src="//hugo-next.github.io/imgs/logo/hugo-next-secondary.png" width="150"/>
+
+### SVG format
+
+```html
+<svg>xxxxxx</svg>
+```
+
+<svg class="canon" xmlns=" http://www.w3.org/2000/svg " overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
+
+## List type
+
+### Ordered List
+
+1. The first element
+2. The second element
+3. The third element
+
+### Unordered List
+
+* List elements
+* Another element
+* And other elements
+
+### Nested List
+
+Using HTML's `ul` element to implement.
+
+<ul>
+  <li>First item</li>
+  <li>Second item
+    <ul>
+      <li>Second item First subitem</li>
+      <li>Second item second subitem
+        <ul>
+          <li>Second item Second subitem First sub-subitem</li>
+          <li>Second item Second subitem Second sub-subitem</li>
+          <li>Second item Second subitem Third sub-subitem</li>
+        </ul>
+      </li>
+      <li>Second item Third subitem
+        <ol>
+          <li>Second item Third subitem First sub-subitem</li>
+          <li>Second item Third subitem Second sub-subitem</li>
+          <li>Second item Third subitem Third sub-subitem</li>
+        </ol>
+    </ul>
+  </li>
+  <li>Third item</li>
+</ul>
+
+### Custom List
+
+Custom lists (table lists) are also supported through HTML's `dl` element.
+
+<dl>
+  <dt>Hugo directory structure</dt>
+  <dd>assets</dd>
+  <dd>hugo.toml</dd>
+  <dd>content</dd>
+  <dd>data</dd>
+  <dd>theme</dd>
+  <dd>static</dd>
+  <dt>Hugo Template</dt>
+  <dd>Basic Template</dd>
+  <dd>List Template</dd>
+  <dd>Single page template</dd>
+</dl>
+
+## Block reference
+
+
+The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
+
+> Quoted text.
+> This line is part of the same quote.
+> Also you can *put* **Markdown** into a blockquote.
+
+Blockquote with a citation.
+
+<blockquote>
+  <p>My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.</p>
+  <footer>— <cite>Steve Wozniak</cite></footer>
+</blockquote>
+
+According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success.</q>
+
+## Table
+
+Tables aren't part of the core `Markdown` spec, but `Hugo` supports them.
+
+| ID  | Make      | Model   | Year |
+| --- | --------- | ------- | ---- |
+| 1   | Honda     | Accord  | 2009 |
+| 2   | Toyota    | Camry   | 2012 |
+| 3   | Hyundai   | Elantra | 2010 |
+
+Colons can be used to align columns.
+
+| Tables      | Are           | Cool         |
+|:----------- |:-------------:| ------------:|
+| align: left | align: center | align: right |
+| align: left | align: center | align: right |
+| align: left | align: center | align: right |
+
+You can also use inline Markdown.
+
+| Inline     | Markdown  | In                | Table      |
+| ---------- | --------- | ----------------- | ---------- |
+| *italics*  | **bold**  | ~~strikethrough~~ | `code`     |
+
+## Code
+
+Use Markdown syntax to write code blocks:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Example HTML5 Document</title>
+</head>
+<body>
+<p>Test</p>
+</body>
+</html>
+```
+
+Use Hugo's `highlight` shortcode to write code blocks:
+
+{{< highlight html "hl_lines=2 5-7, linenostart=44" >}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Example HTML5 Document</title>
+</head>
+<body>
+<p>Test</p>
+</body>
+</html>
+{{< /highlight >}}
+
+
+## Other stuff — abbr, sub, sup, kbd, etc.
+
+<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
+
+H<sub>2</sub>O
+
+C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Press <kbd>X</kbd> to win. Or press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>F</kbd></kbd> to show FPS counter.
+
+<mark>As a unit of information in information theory, the bit has alternatively been called a shannon</mark>, named after Claude Shannon, the founder of field of information theory.
+
+Reference resources:
+
+- Refert from **Mainroad** theme [Basic Elements](https://mainroad-demo.netlify.app/post/basic-elements/)Content
--- a/exampleSite/content/post/03-markdown-syntax/index.md
+++ b/exampleSite/content/post/03-markdown-syntax/index.md
@ -40,7 +40,7 @@ url: demo/markdown-syntax.html

 ## 段落格式

-根据[ W3C ](https://www.w3.org/)定义的[ HTML5 规范](https://www.w3.org/TR/html5/dom.html#elements)，**HTML 文档由元素和文本组成**。每个元素的组成都由一个[开始标记](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags)表示，例如： `<body>` ，和[结束标记](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags)表示，例如： `</body>` 。（*某些开始标记和结束标记在某些情况下可以省略，并由其他标记暗示。*）
+根据[W3C](https://www.w3.org/)定义的[HTML5 规范](https://www.w3.org/TR/html5/dom.html#elements)，**HTML 文档由元素和文本组成**。每个元素的组成都由一个[开始标记](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags)表示，例如： `<body>` ，和[结束标记](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags)表示，例如： `</body>` 。（*某些开始标记和结束标记在某些情况下可以省略，并由其他标记暗示。*）
 元素可以具有属性，这些属性控制元素的工作方式。例如：超链接是使用 `a` 元素及其 `href` 属性形成的。

 ### Markdown 语法
@ -48,14 +48,14 @@ url: demo/markdown-syntax.html
 ```markdown
 ![图像说明](图像地址)
 ```
-![hugo-next-primary](//lisenhui.gitee.io/imgs/hugo-next/logo/hugo-next-primary.png)
+![hugo-next-primary](//hugo-next.github.io/imgs/logo/hugo-next-primary.png)

 ### HTML IMG 标签

 ```html
 <img src="图像地址" width="宽度" height="高度" />
 ```
-<img src="//lisenhui.gitee.io/imgs/hugo-next/logo/hugo-next-secondary.png" width="150"/>
+<img src="//hugo-next.github.io/imgs/logo/hugo-next-secondary.png" width="150"/>

 ### SVG 格式

@ -113,7 +113,7 @@ url: demo/markdown-syntax.html
 <dl>
  <dt>Hugo 目录结构</dt>
  <dd>assets</dd>
-  <dd>config.toml</dd>
+  <dd>hugo.toml</dd>
  <dd>content</dd>
  <dd>data</dd>
  <dd>theme</dd>
@ -167,6 +167,8 @@ url: demo/markdown-syntax.html

 ## Code

+使用 Markdown 语法书写代码块：
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@ -180,7 +182,9 @@ url: demo/markdown-syntax.html
 </html>
 ```

-{{< highlight html >}}
+使用Hugo自带的 `highlight` 短语标注代码块：
+
+{{< highlight html "hl_lines=2 5-7, linenostart=44" >}}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@ -208,4 +212,4 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 <mark>比特作为信息论中的信息单位，也被称为 shannon </mark>，以信息论领域的创始人 Claude shannon 的名字命名。

 参考：
- 来自 **Mainroad** 主题的 [Basic Elements](https://mainroad-demo.netlify.app/demo/basic-elements/) 内容
+- 来自 **Mainroad** 主题的 [Basic Elements](https://mainroad-demo.netlify.app/post/basic-elements/) 内容
--- a/exampleSite/content/post/04-emoji-support/index.en-us.md
+++ b/exampleSite/content/post/04-emoji-support/index.en-us.md
@ -0,0 +1,203 @@
+---
+title:  Support Emoji emojis
+Description: "Usage guide for emojis in Hugo and NexT. "
+keywords: "Hugo,NexT,Emoji"
+
+date: 2025-01-25T21:18:52+08:00
+lastmod: 2025-01-25T21:18:52+08:00
+
+categories:
+  - Example
+  - Grammar
+
+tags:
+ - Facial expressions
+ - Emoji
+
+toc: true
+
+url: "demo/emoji-support.html"
+---
+
+Emojis can be enabled in various ways in the Hugo project.
+
+[`emojify`]( https://gohugo.io/functions/emojify/)The method can be called directly in the template, or use [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates#inline -shortcodes).
+
+To use emojis globally, you need to [configure](https://gohugo.io/getting-started/configuration/) them on your website set `enableEmoji` to `true`,Then you can directly enter the emoji code in the article.
+
+<!--more-->
+
+They start and end with a **colon** and contain the Emoji **code**:
+
+```markdown
+Go camping! {:}tent:  I'll be back soon
+
+How happy! {:}joy:
+```
+
+The output effect presented is as follows:
+
+> Let's go camping :tent:  I'll be back soon.<br/>
+> I'm so happy :joy:
+
+The following symbol list is a very useful reference for emoji code.
+
+## Expressions and Emotions
+
+### Smiling face expression
+
+|Icon | Code | Icon | Code|
+| :-: | - | :-: | - |
+| :grinning: | `grinning` | :smiley: | `smiley` |
+| :smile: | `smile` | :grin: | `grin` |
+| :laughing: | `laughing` <br /> `satisfied` | :sweat_smile: | `sweat_smile` |
+| :rofl: | `rofl` | :joy: | `joy` |
+| :slightly_smiling_face: | `slightly_smiling_face` | :upside_down_face: | `upside_down_face` |
+| :wink: | `wink` | :blush: | `blush` |
+| :innocent: | `innocent` |  |  |
+
+### Love expression
+
+|Icon | Code | Icon | Code|
+| :-: | - | :-: | - |
+| :heart_eyes: | `heart_eyes` | :kissing_heart: | `kissing_heart` |
+| :kissing: | `kissing` | :relaxed: | `relaxed` |
+| :kissing_closed_eyes: | `kissing_closed_eyes` | :kissing_smiling_eyes: | `kissing_smiling_eyes` |
+
+### Tongue sticking expression
+
+|Icon | Code | Icon | Code|
+| :-: | - | :-: | - |
+| :yum: | `yum` | :stuck_out_tongue: | `stuck_out_tongue` |
+| :stuck_out_tongue_winking_eye: | `stuck_out_tongue_winking_eye` | :stuck_out_tongue_closed_eyes: | `stuck_out_tongue_closed_eyes` |
+| :money_mouth_face: | `money_mouth_face` | :money_mouth_face: | |
+
+
+### National and regional flags
+
+|Icon | Code | Icon | Code|
+| :-: | - | :-: | - |
+| :andorra: | `andorra` | :united_arab_emirates: | `united_arab_emirates` |
+| :afghanistan: | `afghanistan` | :antigua_barbuda: | `antigua_barbuda` |
+| :anguilla: | `anguilla` | :albania: | `albania` |
+| :armenia: | `armenia` | :angola: | `angola` |
+| :antarctica: | `antarctica` | :argentina: | `argentina` |
+| :american_samoa: | `american_samoa` | :austria: | `austria` |
+| :australia: | `australia` | :aruba: | `aruba` |
+| :aland_islands: | `aland_islands` | :azerbaijan: | `azerbaijan` |
+| :bosnia_herzegovina: | `bosnia_herzegovina` | :barbados: | `barbados` |
+| :bangladesh: | `bangladesh` | :belgium: | `belgium` |
+| :burkina_faso: | `burkina_faso` | :bulgaria: | `bulgaria` |
+| :bahrain: | `bahrain` | :burundi: | `burundi` |
+| :benin: | `benin` | :st_barthelemy: | `st_barthelemy` |
+| :bermuda: | `bermuda` | :brunei: | `brunei` |
+| :bolivia: | `bolivia` | :caribbean_netherlands: | `caribbean_netherlands` |
+| :brazil: | `brazil` | :bahamas: | `bahamas` |
+| :bhutan: | `bhutan` | :botswana: | `botswana` |
+| :belarus: | `belarus` | :belize: | `belize` |
+| :canada: | `canada` | :cocos_islands: | `cocos_islands` |
+| :congo_kinshasa: | `congo_kinshasa` | :central_african_republic: | `central_african_republic` |
+| :congo_brazzaville: | `congo_brazzaville` | :switzerland: | `switzerland` |
+| :cote_divoire: | `cote_divoire` | :cook_islands: | `cook_islands` |
+| :chile: | `chile` | :cameroon: | `cameroon` |
+| :cn: | `cn` | :colombia: | `colombia` |
+| :costa_rica: | `costa_rica` | :cuba: | `cuba` |
+| :cape_verde: | `cape_verde` | :curacao: | `curacao` |
+| :christmas_island: | `christmas_island` | :cyprus: | `cyprus` |
+| :czech_republic: | `czech_republic` | :de: | `de` |
+| :djibouti: | `djibouti` | :denmark: | `denmark` |
+| :dominica: | `dominica` | :dominican_republic: | `dominican_republic` |
+| :algeria: | `algeria` | :ecuador: | `ecuador` |
+| :estonia: | `estonia` | :egypt: | `egypt` |
+| :western_sahara: | `western_sahara` | :eritrea: | `eritrea` |
+| :es: | `es` | :ethiopia: | `ethiopia` |
+| :eu: | `eu` <br /> `european_union` | :finland: | `finland` |
+| :fiji: | `fiji` | :falkland_islands: | `falkland_islands` |
+| :micronesia: | `micronesia` | :faroe_islands: | `faroe_islands` |
+| :fr: | `fr` | :gabon: | `gabon` |
+| :gb: | `gb` <br /> `uk` | :grenada: | `grenada` |
+| :georgia: | `georgia` | :french_guiana: | `french_guiana` |
+| :guernsey: | `guernsey` | :ghana: | `ghana` |
+| :gibraltar: | `gibraltar` | :greenland: | `greenland` |
+| :gambia: | `gambia` | :guinea: | `guinea` |
+| :guadeloupe: | `guadeloupe` | :equatorial_guinea: | `equatorial_guinea` |
+| :greece: | `greece` | :south_georgia_south_sandwich_islands: | `south_georgia_south_sandwich_islands` |
+| :guatemala: | `guatemala` | :guam: | `guam` |
+| :guinea_bissau: | `guinea_bissau` | :guyana: | `guyana` |
+| :hong_kong: | `hong_kong` | :honduras: | `honduras` |
+| :croatia: | `croatia` | :haiti: | `haiti` |
+| :hungary: | `hungary` | :canary_islands: | `canary_islands` |
+| :indonesia: | `indonesia` | :ireland: | `ireland` |
+| :israel: | `israel` | :isle_of_man: | `isle_of_man` |
+| :india: | `india` | :british_indian_ocean_territory: | `british_indian_ocean_territory` |
+| :iraq: | `iraq` | :iran: | `iran` |
+| :iceland: | `iceland` | :it: | `it` |
+| :jersey: | `jersey` | :jamaica: | `jamaica` |
+| :jordan: | `jordan` | :jp: | `jp` |
+| :kenya: | `kenya` | :kyrgyzstan: | `kyrgyzstan` |
+| :cambodia: | `cambodia` | :kiribati: | `kiribati` |
+| :comoros: | `comoros` | :st_kitts_nevis: | `st_kitts_nevis` |
+| :north_korea: | `north_korea` | :kr: | `kr` |
+| :kuwait: | `kuwait` | :cayman_islands: | `cayman_islands` |
+| :kazakhstan: | `kazakhstan` | :laos: | `laos` |
+| :lebanon: | `lebanon` | :st_lucia: | `st_lucia` |
+| :liechtenstein: | `liechtenstein` | :sri_lanka: | `sri_lanka` |
+| :liberia: | `liberia` | :lesotho: | `lesotho` |
+| :lithuania: | `lithuania` | :luxembourg: | `luxembourg` |
+| :latvia: | `latvia` | :libya: | `libya` |
+| :morocco: | `morocco` | :monaco: | `monaco` |
+| :moldova: | `moldova` | :montenegro: | `montenegro` |
+| :madagascar: | `madagascar` | :marshall_islands: | `marshall_islands` |
+| :macedonia: | `macedonia` | :mali: | `mali` |
+| :myanmar: | `myanmar` | :mongolia: | `mongolia` |
+| :macau: | `macau` | :northern_mariana_islands: | `northern_mariana_islands` |
+| :martinique: | `martinique` | :mauritania: | `mauritania` |
+| :montserrat: | `montserrat` | :malta: | `malta` |
+| :mauritius: | `mauritius` | :maldives: | `maldives` |
+| :malawi: | `malawi` | :mexico: | `mexico` |
+| :malaysia: | `malaysia` | :mozambique: | `mozambique` |
+| :namibia: | `namibia` | :new_caledonia: | `new_caledonia` |
+| :niger: | `niger` | :norfolk_island: | `norfolk_island` |
+| :nigeria: | `nigeria` | :nicaragua: | `nicaragua` |
+| :netherlands: | `netherlands` | :norway: | `norway` |
+| :nepal: | `nepal` | :nauru: | `nauru` |
+| :niue: | `niue` | :new_zealand: | `new_zealand` |
+| :oman: | `oman` | :panama: | `panama` |
+| :peru: | `peru` | :french_polynesia: | `french_polynesia` |
+| :papua_new_guinea: | `papua_new_guinea` | :philippines: | `philippines` |
+| :pakistan: | `pakistan` | :poland: | `poland` |
+| :st_pierre_miquelon: | `st_pierre_miquelon` | :pitcairn_islands: | `pitcairn_islands` |
+| :puerto_rico: | `puerto_rico` | :palestinian_territories: | `palestinian_territories` |
+| :portugal: | `portugal` | :palau: | `palau` |
+| :paraguay: | `paraguay` | :qatar: | `qatar` |
+| :reunion: | `reunion` | :romania: | `romania` |
+| :serbia: | `serbia` | :ru: | `ru` |
+| :rwanda: | `rwanda` | :saudi_arabia: | `saudi_arabia` |
+| :solomon_islands: | `solomon_islands` | :seychelles: | `seychelles` |
+| :sudan: | `sudan` | :sweden: | `sweden` |
+| :singapore: | `singapore` | :st_helena: | `st_helena` |
+| :slovenia: | `slovenia` | :slovakia: | `slovakia` |
+| :sierra_leone: | `sierra_leone` | :san_marino: | `san_marino` |
+| :senegal: | `senegal` | :somalia: | `somalia` |
+| :suriname: | `suriname` | :south_sudan: | `south_sudan` |
+| :sao_tome_principe: | `sao_tome_principe` | :el_salvador: | `el_salvador` |
+| :sint_maarten: | `sint_maarten` | :syria: | `syria` |
+| :swaziland: | `swaziland` | :turks_caicos_islands: | `turks_caicos_islands` |
+| :chad: | `chad` | :french_southern_territories: | `french_southern_territories` |
+| :togo: | `togo` | :thailand: | `thailand` |
+| :tajikistan: | `tajikistan` | :tokelau: | `tokelau` |
+| :timor_leste: | `timor_leste` | :turkmenistan: | `turkmenistan` |
+| :tunisia: | `tunisia` | :tonga: | `tonga` |
+| :tr: | `tr` | :trinidad_tobago: | `trinidad_tobago` |
+| :tuvalu: | `tuvalu` | :taiwan: | `taiwan` |
+| :tanzania: | `tanzania` | :ukraine: | `ukraine` |
+| :uganda: | `uganda` | :us: | `us` |
+| :uruguay: | `uruguay` | :uzbekistan: | `uzbekistan` |
+| :vatican_city: | `vatican_city` | :st_vincent_grenadines: | `st_vincent_grenadines` |
+| :venezuela: | `venezuela` | :british_virgin_islands: | `british_virgin_islands` |
+| :us_virgin_islands: | `us_virgin_islands` | :vietnam: | `vietnam` |
+| :vanuatu: | `vanuatu` | :wallis_futuna: | `wallis_futuna` |
+| :samoa: | `samoa` | :kosovo: | `kosovo` |
+| :yemen: | `yemen` | :mayotte: | `mayotte` |
+| :south_africa: | `south_africa` | :zambia: | `zambia` |
+| :zimbabwe: | `zimbabwe` |  |  |
--- a/exampleSite/content/post/04-emoji-support/index.md
+++ b/exampleSite/content/post/04-emoji-support/index.md
@ -12,7 +12,9 @@ categories:

 tags:
 - 表情
- - emoji
+ - Emoji
+
+toc: true

 url: "demo/emoji-support.html"
 ---
@ -26,7 +28,7 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。

 <!--more-->

-它们以**冒号**开头和结尾，并且包含 emoji 的 **代码**：
+它们以**冒号**开头和结尾，并且包含 emoji 的 **简短代码**：

 ```markdown
 去露营啦! {:}tent: 很快就回来.
@ -36,9 +38,8 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。

 呈现的输出效果如下:

-去露营啦! :tent: 很快就回来。
-
-真开心! :joy:
+> 去露营啦! :tent: 很快就回来。<br/>
+> 真开心! :joy:

 以下**符号清单**是 emoji 代码的非常有用的参考。

@ -54,7 +55,7 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 | :rofl: | `rofl` | :joy: | `joy` |
 | :slightly_smiling_face: | `slightly_smiling_face` | :upside_down_face: | `upside_down_face` |
 | :wink: | `wink` | :blush: | `blush` |
-| :innocent: | `innocent` | | |
+| :innocent: | `innocent` |  |  |

 ### 爱意表情

@ -70,7 +71,7 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 | :-: | - | :-: | - |
 | :yum: | `yum` | :stuck_out_tongue: | `stuck_out_tongue` |
 | :stuck_out_tongue_winking_eye: | `stuck_out_tongue_winking_eye` | :stuck_out_tongue_closed_eyes: | `stuck_out_tongue_closed_eyes` |
-| :money_mouth_face: | `money_mouth_face` | | |
+| :money_mouth_face: | `money_mouth_face` | :money_mouth_face: | |


 ### 国家和地区旗帜
@ -200,4 +201,4 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 | :samoa: | `samoa` | :kosovo: | `kosovo` |
 | :yemen: | `yemen` | :mayotte: | `mayotte` |
 | :south_africa: | `south_africa` | :zambia: | `zambia` |
-| :zimbabwe: | `zimbabwe` | | |
+| :zimbabwe: | `zimbabwe` |  |  |
--- a/exampleSite/content/post/05-table-of-content/index.en-us.md
+++ b/exampleSite/content/post/05-table-of-content/index.en-us.md
@ -0,0 +1,66 @@
+---
+title: "Article Catalog Navigation"
+description: "Describe the navigation effect of the article directory under NexT theme."
+keywords: "Article, Table of Contents, Navigation"
+
+date: 2025-01-25T20:58:52+08:00
+lastmod: 2025-01-25T20:58:52+08:00
+
+categories:
+ - Example
+tags:
+  - Table of Contents
+  - Navigation
+  - Blog
+
+toc: true
+url: demo/table-of-content.html
+---
+
+General Patton once said, "The measure of a person's success is not by standing at the peak, but by the rebound force after falling from the peak." Chu Shijian's life was like this: he became wealthy in middle age, gained both fame and fortune, and then fell to the bottom again. He started his own business at the age of 74, returned with Chu Cheng 10 years later, and made a comeback with billions of wealth. His development trajectory was a process of rebound.
+
+<!--more-->
+
+![Old Man](https://wfqqreader-1252317822.image.myqcloud.com/cover/568/814568/t6_814568.jpg)
+
+## Early stories
+### Starting from
+
+In the spring of 2014, at the border of Huaning County and Yiliang County in Yunnan Province, a small mountain village called Yize had an old courtyard house with a history of over a hundred years demolished. The village committee is leading the villagers in the construction of a "beautiful countryside". In one year, the old village houses will no longer be visible, replaced by new reinforced concrete residential buildings. Just like the transformation of Chinese cities 10 or 20 years ago, this small village surrounded by mountains has also begun to fall into the "construction site mode".
+
+#### Childhood waves
+
+Almost all children who grow up by the river have an undeniable talent: good at water. Chu Shijian is no exception. Not only has he developed excellent swimming skills in the Nanpan River and flower ponds since childhood, but at the age of five or six, he can already dive far with a fierce spear. Moreover, he has been able to catch fish in the ponds on the Nanpan River and riverbanks since the age of seven or eight.
+
+### Youth stories
+
+Chu Shijian's more than ten years of living freely in the countryside were actually more than ten years of turbulent Chinese society. Especially after the Lugou Bridge Incident in 1937, the Japanese launched a full-scale invasion of China, and in just two or three years, most of China's territory fell one after another
+
+## Ten Years of Passionate Youth
+### Becoming a guerrilla fighter
+
+In the summer of 1948, Chu Shijian returned to his hometown and became a teacher at Lufeng Railway Station Primary School. At the same time, he continued to maintain contact with the Communist Party organization with Chu Shiren and Chu Shijie, and did some work of transmitting intelligence
+
+#### War is raging
+
+Due to the significant disparity in combat effectiveness, guerrilla forces can only rely on exchanging one shot for another, specifically targeting weak areas of the enemy to attack, but more often than not, they are defending and shifting positions.
+
+### Embrace liberation
+
+In December 1949, Lu Han, the Chairman of the Nationalist Party in Yunnan Province, announced an uprising in Kunming, marking the official beginning of Yunnan's liberation. On February 20, 1950, Chen Gong, Song Renqiong, and Zhou Baozhong led the Fourth Corps of the Second Field Army of the People's Liberation Army into Kunming. On February 24, Chen Gong declared the liberation of the entire Yunnan province.
+
+## The discontinuity of life
+### Falling into the bottom of life
+
+The people who were overthrown in the "anti rightist" movement had only one way to go after their "rightist" identity was determined: to be demoted to the farm. A farm is truly a place for farming, where one must live the same life as a farmer.
+
+## Conclusion
+### Time is like a river
+
+In 2015, it was the 60th anniversary of Chu Shijian and Ma Jingfen's marriage, known as the commemorative year of the "diamond wedding". This is simply a reward in life. With the increasing divorce rate in China, a 60 year marriage is almost like a dream from a past life. With the companionship of a child, Chu Shijian and Ma Jingfen have experienced various storms of the country and individuals, and faced life and death together. They are not only husband and wife, but also a pair of comrades in arms. Although Ma Jingfen occasionally complains about Chu Shijian's carelessness when he was young, in the end, she would say, "Without me, there would be no him, and without him, there would be no me
+
+## Author thanks
+
+This book started interviewing in early summer 2014 and has been completed today, taking 18 months. The 'author' on the cover can only be my name, but only I know that this book contains the hearts and minds of too many people. Of course, I would like to first thank Mr. Wang Shi. Without him, there would be no book. Upon careful consideration, I realize that without Mr. Wang Shi's constant urging and encouragement, and without my writing work today. Since I started working as a professional writer in 2006, he has created many opportunities for me to write and has generously shared his life and learning experiences and insights with me. Thank you very much for your kindness.
+
+Finally, I would like to express my greatest gratitude to Mr. Chu Shijian. Not only because he was generous and candid in facing my various questions, but more importantly, in the process of listening to his story, his prosperous life experience, strong vitality, and his pure heart towards life and career also enriched my thinking about my own life.
--- a/exampleSite/content/post/05-table-of-content/index.md
+++ b/exampleSite/content/post/05-table-of-content/index.md
--- a/exampleSite/content/post/06-image-viewer/index.en-us.md
+++ b/exampleSite/content/post/06-image-viewer/index.en-us.md
@ -0,0 +1,40 @@
+---
+title:  "Image Browsing Tool"
+description:  "By default, images within the article will be browsed. Clicking on an image will display a larger image, while clicking on a blank space will close it."
+Keywords: "image, image, browser, photo album"
+
+date: 2025-01-25T21:28:12+08:00
+lastmod: 2025-01-25T21:28:12+08:00
+
+categories:
+  - Example
+
+tags:
+  - Image
+  - Album
+  - Browse
+
+url: "demo/image-viewer.html"
+toc: false
+expired: true
+---
+
+This theme comes with an image browser function that supports browsing images that appear in the article area. Clicking on an image can view a larger image, while clicking on a blank space can close it. No need to configure any parameters, just add image information at the corresponding position in the article.
+
+<!--more-->
+
+The image browser referenced [fengyuanchen](https://fengyuanchen.github.io/) Developed [viewerjs](https://fengyuanchen.github.io/viewerjs/) Supports displaying image name, size, rotation, scaling, playback, and other functions. You can click on the following example image to view the experience:
+
+## Animals
+
+![cute-scottish-fold-cat](/demo/image-viewer/photos/preview_cute-scottish-fold-cat.jpg)
+![scottish-fold-kitten](/demo/image-viewer/photos/preview_scottish-fold-kitten.jpg)
+![hourses](/demo/image-viewer/photos/preview_horses.jpg)
+![owl-family-background](/demo/image-viewer/photos/preview_owl-family-background.jpg)
+
+## Scenery
+
+![luxury-resort-in-maldives](/demo/image-viewer/photos/preview_luxury-resort-in-maldives.jpg)
+![sea-shell](/demo/image-viewer/photos/preview_sea-shell.jpg)
+![the-arch-sunset](/demo/image-viewer/photos/preview_the-arch-sunset.jpg)
+![norway-autumn-landscape](/demo/image-viewer/photos/preview_norway-autumn-landscape.jpg)
--- a/exampleSite/content/post/06-image-viewer/index.md
+++ b/exampleSite/content/post/06-image-viewer/index.md
@ -14,8 +14,9 @@ tags:
  - 相册
  - 浏览

-url: "demo/image-viewer.html"
+url: "/demo/image-viewer.html"
 toc: false
+expired: true
 ---

 本主题自带图像浏览器功能，支持对文章区域内出现的图片进行浏览，点击图片可以查看大图，点击空白处可以关闭。不需要配置任何参数，只要在文章里面相应的位置添加图片信息即可 。
@ -26,15 +27,14 @@ toc: false

 ## 动物

-![cute-scottish-fold-cat](/post/image-viewer/preview_cute-scottish-fold-cat.jpg)
-![scottish-fold-kitten](/post/image-viewer/preview_scottish-fold-kitten.jpg)
-![hourses](/post/image-viewer/preview_horses.jpg)
-![owl-family-background](/post/image-viewer/preview_owl-family-background.jpg)
+![cute-scottish-fold-cat](/demo/image-viewer/photos/preview_cute-scottish-fold-cat.jpg)
+![scottish-fold-kitten](/demo/image-viewer/photos/photos/preview_scottish-fold-kitten.jpg)
+![hourses](/demo/image-viewer/photos/preview_horses.jpg)
+![owl-family-background](/demo/image-viewer/photos/preview_owl-family-background.jpg)

 ## 风景

-![luxury-resort-in-maldives](/post/image-viewer/preview_luxury-resort-in-maldives.jpg)
-![sea-shell](/post/image-viewer/preview_sea-shell.jpg)
-![the-arch-sunset](/post/image-viewer/preview_the-arch-sunset.jpg)
-![norway-autumn-landscape](/post/image-viewer/preview_norway-autumn-landscape.jpg)
-
+![luxury-resort-in-maldives](/demo/image-viewer/photos/preview_luxury-resort-in-maldives.jpg)
+![sea-shell](/demo/image-viewer/photos/preview_sea-shell.jpg)
+![the-arch-sunset](/demo/image-viewer/photos/preview_the-arch-sunset.jpg)
+![norway-autumn-landscape](/demo/image-viewer/photos/preview_norway-autumn-landscape.jpg)
--- a/exampleSite/content/post/06-image-viewer/photos/preview_cute-scottish-fold-cat.jpg
+++ b/exampleSite/content/post/06-image-viewer/photos/preview_cute-scottish-fold-cat.jpg
--- a/exampleSite/content/post/06-image-viewer/photos/preview_horses.jpg
+++ b/exampleSite/content/post/06-image-viewer/photos/preview_horses.jpg
--- a/exampleSite/content/post/06-image-viewer/photos/preview_luxury-resort-in-maldives.jpg
+++ b/exampleSite/content/post/06-image-viewer/photos/preview_luxury-resort-in-maldives.jpg
--- a/exampleSite/content/post/06-image-viewer/photos/preview_norway-autumn-landscape.jpg
+++ b/exampleSite/content/post/06-image-viewer/photos/preview_norway-autumn-landscape.jpg
--- a/exampleSite/content/post/06-image-viewer/photos/preview_owl-family-background.jpg
+++ b/exampleSite/content/post/06-image-viewer/photos/preview_owl-family-background.jpg
--- a/exampleSite/content/post/06-image-viewer/photos/preview_scottish-fold-kitten.jpg
+++ b/exampleSite/content/post/06-image-viewer/photos/preview_scottish-fold-kitten.jpg
--- a/exampleSite/content/post/06-image-viewer/photos/preview_sea-shell.jpg
+++ b/exampleSite/content/post/06-image-viewer/photos/preview_sea-shell.jpg
--- a/exampleSite/content/post/06-image-viewer/photos/preview_the-arch-sunset.jpg
+++ b/exampleSite/content/post/06-image-viewer/photos/preview_the-arch-sunset.jpg
--- a/exampleSite/content/post/07-custom-files/index.en-us.md
+++ b/exampleSite/content/post/07-custom-files/index.en-us.md
@ -0,0 +1,78 @@
+---
+title:  "Support user-defined design"
+description:  "Users can customize file configurations to achieve personalized adjustments to the style and layout of the site"
+keywords: "custom,files,layout"
+
+date: 2025-01-25T21:12:32+08:00
+lastmod: 2025-01-25T20:59:12+08:00
+
+categories:
+  - Example
+
+tags:
+  - Customize
+  - Personalization
+  - Layout
+
+url: "demo/custom-files.html"
+toc: true
+---
+
+For users familiar with front-end development, personalized adjustments can be made to the style and layout of the site through custom file configuration. In terms of layout, it mainly supports the site overview section in the left sidebar, as well as the two positions at the bottom of the site, but the style reset can be anywhere on the entire site.
+
+## Open configuration parameters
+
+Firstly, it is necessary to clarify that the following parameters are configured in the `params` area of the configuration file:
+
+```yaml
+customFilePath:
+sidebar: custom_sidebar.html
+footer: custom_footer.html
+style: /css/custom_style.css
+```
+
+> [!WARNING]
+> **Attention:** The file names of `sidebar` and `footer` cannot be the same as their parameter names, otherwise it will affect the default layout design of the system. Remember!!!: smile:
+
+
+Then create two directories, 'layouts/partitions', in the root directory of the site to store custom layout design files. Additionally, create two directories,' static/css', in the root directory of the site to store custom CSS style files. After everything is ready, you can refer to the following steps to complete your design idea.
+
+## Sidebar design
+
+Create a new file with the suffix 'html' in the 'partitions' directory earlier, where you can write the design or content you want to express, such as introducing some third-party component content. The example is as follows:
+
+```html
+<div class="mydefined animated" itemprop="custom">
+<span>Support custom CSS and Sidebar layout now 💄💄💄</ span>
+</div>
+```
+
+Configure the path of the file to the corresponding parameters, please refer to the effect at the bottom of the left sidebar for the effect.
+
+## Footer design
+
+Create a new file with the suffix 'html' in the 'partitions' directory earlier, where you can write the design or content you want to express, such as introducing some third-party component content. The example is as follows:
+
+```html
+<div class="custom-footer">
+Website source code <a href=" https://github.com/hugo-next/hugo-theme-next/tree/develop/exampleSite/layouts/partials/custom-footer.html " target="_blank">here</a>
+</div>
+```
+
+Configure the path of the file to the corresponding parameters, please refer to the effect at the bottom of the site for the effect.
+
+## Custom Style
+
+Create a new file with the suffix 'css' in the' css' directory earlier, and then redefine the style of the site or add some custom style designs to reference when writing articles. The example is as follows:
+
+```html
+.custom-head5 {
+font-size: 1.2em;
+color: #ed6c24;
+font-weight: bold;
+}
+```
+
+Configure the path of the file to the corresponding parameters, and the effect reference is as follows:
+
+<span class="custom-head5"> I am customizing the title style effect. </span>
--- a/exampleSite/content/post/07-custom-files/index.md
+++ b/exampleSite/content/post/07-custom-files/index.md
@ -20,8 +20,6 @@ toc: true

 对于熟悉前端开发的用户来说，可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。其中布局方面主要是支持左侧边栏的站点概览部分，以及站点底部2个位置，但样式的重置可以是整个站点的任意位置。

-<!--more-->
-
 ## 打开配置参数

 首先要明确在配置文件的 `params` 区域中有配置如下参数：
@ -65,7 +63,6 @@ Website source code <a href="https://github.com/hugo-next/hugo-theme-next/tree/d

 再把该文件的路径配置到相应的参数中，效果请查看站点底部的效果。

-
 ## 自定义样式

 在前面创建 `css` 目录中新一个后缀名为 `css` 的文件，然后可以在里面把站点的样式进行重定义，或是增加一些自己定义的样式设计，在写文章时进行引用，示例如下：
--- a/exampleSite/content/post/08-no-header-title/index.en-us.md
+++ b/exampleSite/content/post/08-no-header-title/index.en-us.md
@ -0,0 +1,45 @@
+---
+title:  "Articles without H1-6 header and comments"
+description:  "Used to test whether the directory navigation of an article will be directly closed and the comment function will be disabled without the H1-6 title header"
+keywords: "toc,header"
+
+date: 2025-01-29T19:45:16+08:00
+lastmod: 2025-01-29T19:45:16+08:00
+
+categories:
+  - Example
+tags:
+  - toc
+  - Title
+
+comment:
+enable: false
+url: "demo/no-header-title.html"
+expired: true
+---
+
+Liu Cixin's acceptance speech for the 2018 Clark Prize (excerpt from some content).
+
+> [!INFO]
+> Used to test whether the directory navigation of an article will be directly closed and the comment function will be disabled without the H1-6 title header.
+
+<!--more-->
+
+Good evening, gentlemen and ladies,
+
+I am honored to receive the Clarke Award for Imagination in Service to Society.
+
+This award is a reward for imagination, which is a human ability that seems to belong only to God, and its significance far exceeds our imagination. Historians have said that the reason why humans were able to establish civilization beyond other species on Earth is mainly because they were able to create things in their own brains that do not exist in reality. In the future, when artificial intelligence surpasses human intelligence, imagination may be our only advantage over them.
+
+Science fiction is a literature based on imagination, and the first one that left a deep impression on me was Arthur Clarke's works. Except for Jules Verne and George Wells, Clarke's works are the earliest Western modern science fiction novels to enter China. In the early 1980s, China published his works "2001: A Space Odyssey" and "Rendezvous With Rama". At that time, the Cultural Revolution had just ended, and the old life and beliefs had collapsed, while the new had not yet been established. Like other young people, I felt lost in my heart. These two books activated my imagination for the first time, and my thoughts suddenly became much broader, with the feeling of a small stream flowing into the sea. On the night I finished reading '2001: A Space Odyssey', I walked out of my house and looked up at the starry sky. At that time, the sky in China was not too polluted, and I could see the Milky Way. In my eyes, the starry sky was completely different from the past. For the first time, I had a sense of awe towards the vastness and mystery of the universe, which was a religious feeling. And later I read 'Rendezvous With Rama', which also amazed me at how imagination can be used to construct a vivid imaginary world. It was these feelings brought to me by Clarke that later made me a science fiction writer.
+
+Now, more than thirty years have passed, and I gradually realize that our generation born in China in the 1960s may be the luckiest people in human history, because there has never been a generation before that has witnessed such a huge change in the world around us. The world we live in now is completely different from the world we grew up in, and this change is accelerating. China is a country full of a sense of the future. China's future may be full of challenges and crises, but it has never been as attractive as it is now. This provides fertile soil for science fiction novels, which have received unprecedented attention in China. As a science fiction writer born in China in the 1960s, it is a stroke of luck.
+
+I look forward to one day, like those science fiction novels that once described the information age, science fiction novels that describe space travel will become mundane. At that time, Mars and the asteroid belt were boring places where countless people made a living; Jupiter and its numerous satellites have become tourist destinations, and the only obstacle preventing people from going there is the expensive price.
+
+But even at this time, the universe remains a vast and unimaginable existence, with the nearest stars still out of reach. The vast starry sky can always carry our infinite imagination.
+
+Thank you all.
+
+
+> [Click to read the full text](https://weread.qq.com/web/reader/ce032b305a9bc1ce0b0dd2akecc32f3013eccbc87e4b62e)
--- a/exampleSite/content/post/08-no-header-title/index.md
+++ b/exampleSite/content/post/08-no-header-title/index.md
@ -15,10 +15,12 @@ tags:
 comment:
  enable: false
 url: "demo/no-header-title.html"
+expired: true
 ---

 刘慈欣2018克拉克奖获奖感言（部分内容节选）。

+> [!INFO]
 > 用于测试在没有H1-6标题头时，文章的目录导航是否会直接关闭，并关闭评论功能。

 <!--more-->
--- a/exampleSite/content/post/09-syntax-highlighting/index.en-us.md
+++ b/exampleSite/content/post/09-syntax-highlighting/index.en-us.md
@ -0,0 +1,188 @@
+---
+Title: "Hugo's Built in Chroma Grammar Highlighting"
+description:  Describe the various syntax and highlighting effects supported by Chroma
+Keywords: "Chroma, syntax, highlighting"
+
+date: 2025-01-29T20:09:52+08:00
+lastmod: 2025-01-29T20:09:52+08:00
+
+categories:
+  - Example
+  - Grammar
+tags:
+  - Grammar
+  - Highlight
+  - Chroma
+
+url: demo/syntax-highlighting.html
+---
+
+Hugo provides very fast syntax highlighting through Chroma, and now uses Chroma as code block highlighting support in Hugo. It is built into the Go language, and the speed is really, really fast. Most importantly, it is also compatible with the Pygments method we used before.
+
+The following verifies the rendering effect of code blocks in different languages and their correct highlighting through Hugo's built-in short code 'highlight' and 'Markodown' code blocks. For more information on optimizing syntax highlighting, please refer to the [Hugo Documentation](https://gohugo.io/getting-started/configuration-markup#highlight).
+
+<!--more-->
+
+## Programming language
+
+### GO
+
+```makrdown
+{{</* highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" */>}}
+
+func GetTitleFunc(style string) func(s string) string {
+switch strings.ToLower(style) {
+case "go":
+return strings.Title
+case "chicago":
+return transform.NewTitleConverter(transform.ChicagoStyle)
+default:
+return transform.NewTitleConverter(transform.APStyle)
+}
+}
+
+{{</* / highlight */>}}
+```
+
+{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
+
+func GetTitleFunc(style string) func(s string) string {
+switch strings.ToLower(style) {
+case "go":
+return strings.Title
+case "chicago":
+return transform.NewTitleConverter(transform.ChicagoStyle)
+default:
+return transform.NewTitleConverter(transform.APStyle)
+}
+}
+
+{{< / highlight >}}
+
+### Java
+
+```java
+import javax.swing.JFrame;  // Importing class JFrame
+import javax.swing.JLabel;  // Importing class JLabel
+public class HelloWorld {
+public static void main(String[] args) {
+JFrame frame = new JFrame();           // Creating frame
+frame.setTitle("Hi!");                 // Setting title frame
+frame.add(new JLabel("Hello, world!"));// Adding text to frame
+frame.pack();                          // Setting size to smallest
+frame.setLocationRelativeTo(null);     // Centering frame
+frame.setVisible(true);                // Showing frame
+}
+}
+```
+
+### Python
+
+``` python
+print "Hello, world!"
+```
+
+### Git Comparison
+
+```diff {hl_lines=[4,"6-7"], linenos=true}
+*** /path/to/original ''timestamp''
+--- /path/to/new  ''timestamp''
+***************
+*** 1 ****
+! This is a line.
+--- 1 ---
+! This is a replacement line.
+It is important to spell
+-removed line
+new line
+```
+
+```diff {hl_lines=[4,"6-7"], linenos=false}
+*** /path/to/original ''timestamp''
+--- /path/to/new  ''timestamp''
+***************
+*** 1 ****
+! This is a line.
+--- 1 ---
+! This is a replacement line.
+It is important to spell
+-removed line
+new line
+```
+
+## File
+
+### Make file
+
+``` makefile {linenos=false}
+CC=gcc
+CFLAGS=-I.
+
+hellomake: hellomake.o hellofunc.o
+$(CC) -o hellomake hellomake.o hellofunc.o -I.
+```
+
+### Markdown document
+
+``` markdown
+**bold**
+*italics*
+[link](www.example.com)
+```
+
+## Data content
+
+### JSON data
+
+``` json
+{"employees":[
+{"firstName":"John", "lastName":"Doe"},
+]}
+```
+
+### XML Content
+
+``` xml
+<employees>
+<employee>
+<firstName>John</firstName> <lastName>Doe</lastName>
+</employee>
+</employees>
+```
+
+### SQL Query
+
+{{< highlight sql >}}
+
+SELECT column_name,column_name
+FROM
+Table
+WHERE column_name = "condition"
+{{< / highlight >}}
+
+### Auto guess code highlighted
+
+```
+.highlight {
+
+  //Other codes
+  ......
+
+  > .chroma {
+    position: relative;
+      
+    
+    //Fix code block overflow issue
+    pre {
+      overflow-wrap: break-word;
+      white-space: pre-wrap;
+      line-break: anywhere;
+      word-break: break-all; 
+      overflow-x: auto;
+    }
+  }
+}
+```
+
+
+In addition to the code highlighting listed above, it also supports highlighting in mainstream code languages such as C, C++, HTML, CSS, Shell scripts, etc., and can be tested for effectiveness on its own.
--- a/exampleSite/content/post/09-syntax-highlighting/index.md
+++ b/exampleSite/content/post/09-syntax-highlighting/index.md
@ -27,6 +27,23 @@ Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用

 ### GO

+```makrdown
+{{</* highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" */>}}
+
+func GetTitleFunc(style string) func(s string) string {
+  switch strings.ToLower(style) {
+  case "go":
+    return strings.Title
+  case "chicago":
+    return transform.NewTitleConverter(transform.ChicagoStyle)
+  default:
+    return transform.NewTitleConverter(transform.APStyle)
+  }
+}
+
+{{</* / highlight */>}}
+```
+
 {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}

 func GetTitleFunc(style string) func(s string) string {
@ -48,14 +65,14 @@ func GetTitleFunc(style string) func(s string) string {
 import javax.swing.JFrame;  //Importing class JFrame
 import javax.swing.JLabel;  //Importing class JLabel
 public class HelloWorld {
-    public static void main(String[] args) {
-        JFrame frame = new JFrame();           //Creating frame
-        frame.setTitle("Hi!");                 //Setting title frame
-        frame.add(new JLabel("Hello, world!"));//Adding text to frame
-        frame.pack();                          //Setting size to smallest
-        frame.setLocationRelativeTo(null);     //Centering frame
-        frame.setVisible(true);                //Showing frame
-    }
+  public static void main(String[] args) {
+    JFrame frame = new JFrame();           //Creating frame
+    frame.setTitle("Hi!");                 //Setting title frame
+    frame.add(new JLabel("Hello, world!"));//Adding text to frame
+    frame.pack();                          //Setting size to smallest
+    frame.setLocationRelativeTo(null);     //Centering frame
+    frame.setVisible(true);                //Showing frame
+  }
 }
 ```

@ -143,5 +160,29 @@ FROM
 WHERE column_name = "condition"
 {{< / highlight >}}

+### 自动猜测代码高亮显示
+
+```
+.highlight {
+
+  //Other codes
+  ......
+
+  > .chroma {
+    position: relative;
+      
+    
+    //Fix code block overflow issue
+    pre {
+      overflow-wrap: break-word;
+      white-space: pre-wrap;
+      line-break: anywhere;
+      word-break: break-all; 
+      overflow-x: auto;
+    }
+  }
+}
+```
+

 除以上列举的代码高亮显示外，还支持诸如：C 语言、C++、HTML、CSS、Shell脚本等各主流的代码语言高亮显示，可自行测试效果。
--- a/exampleSite/content/post/10-math-formula/index.en-us.md
+++ b/exampleSite/content/post/10-math-formula/index.en-us.md
@ -0,0 +1,259 @@
+---
+title:  Mathematical Formula Rendering
+description:  The theme supports mathematical formula rendering schemes for two different plugins, mathjs and katex
+keywords: "math,formula"
+
+date: 2025-01-29T20:50:02+08:00
+lastmod: 2025-01-29T20:50:02+08:00
+
+categories:
+  - ThirdParty
+  - Mathematical
+tags:
+  - Mathematical
+  - mathjax
+  - katex
+
+
+url: "demo/math-formula.html"
+math: mathjax
+---
+
+This theme supports two different schemes, `mathjax` and `katex`, and supports rendering mathematical formulas. You can choose according to your own needs.
+
+<!--more-->
+
+In the following example, [MathJax](https://www.mathjax.org/) will be used Plan to showcase rendering effects.
+
+{{< note info >}}
+
+- Create a new article using the `hugo new` command;
+- You can globally enable data formula rendering. Please configure the parameter `math: katex` or `math: mathjax` in the article front parameters;
+- Or configure the parameter to the header of the page where mathematical formulas need to be displayed.
+> reducing unnecessary resource loading consumption
+
+{{< /note >}}
+
+**Attention:** Use [Supported TeX Features](https://docs.mathjax.org/en/latest/input/tex/index.html) Online reference materials.
+
+## Example
+
+### Insider formula
+
+Quadratic formula:$ Ax ^ 2+bx+c=0 $(supports using ` \ $...)\$` Format of inline formulas
+
+Quadratic formula (line break display formula) $$ax ^ 2+bx+c=0$$
+
+The more complex formula is as follows:$ \lim^{x \to \infty}_{y \to 0}{\frac{x}{y}}$ 
+
+Other inline formulas display ( _score_ _expression_ ): \(\frac{1}{2}\) (Supports inline formula effects in `\(...\)` format)
+
+
+### Repeated scores
+
+$$
+\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
+$$
+
+
+### Sum mark
+
+$$
+\left(\sum_{k=1}^n a_k b_k \right)^2 \leq \left(\sum_{k=1}^n a_k^2 \right) \left(\sum_{k=1}^n b_k^2 \right)
+$$
+
+
+### Sum of geometric series
+
+I have divided the next two examples into several lines so that they perform better on mobile phones. That's why they contain '\ display style'. Alternatively, truncation can be performed using syntax similar to '\ showlines {x=a+b \ \ y=b+c}', as detailed in: [mathjax-issues2312](https://github.com/mathjax/MathJax/issues/2312)
+
+$$
+\displaystyle\sum_{i=1}^{k+1}i
+$$
+
+$$
+\displaystyle= \left(\sum_{i=1}^ {k}i \right) +(k+1)
+$$
+
+$$
+\displaystyle= \frac{k(k+1)}{2}+k+1
+$$
+
+$$
+\displaystyle= \frac{k(k+1)+2(k+1)}{2}
+$$
+
+$$
+\displaystyle= \frac{(k+1)(k+2)}{2}
+$$
+
+$$
+\displaystyle= \frac{(k+1)((k+1)+1)}{2}
+$$
+
+### Riding symbols
+
+$$
+\displaystyle 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = 
+$$
+
+$$
+\displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, 
+\displaystyle\text{ for }\lvert q\rvert < 1.
+$$
+
+
+### Random number formula
+
+These are some linear mathematics:$ k_{n+1} = n^2 + k_n^2 - k_{n-1} $ ，  Then there are more texts.
+
+
+### Greek alphabet
+
+$$
+\displaylines{\Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega
+\alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \\\\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi \ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi}
+$$
+
+### Arrow
+
+$$
+\gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow
+$$
+
+$$
+\displaylines{\Leftarrow\ \Rightarrow\ \leftrightarrow\ \Leftrightarrow\ \mapsto\ \hookleftarrow
+\leftharpoonup\ \leftharpoondown\ \\\\\ \rightleftharpoons\ \longleftarrow\ \Longleftarrow\ \longrightarrow}
+$$
+
+$$
+\Longrightarrow\ \longleftrightarrow\ \Longleftrightarrow\ \longmapsto\ \hookrightarrow\ \rightharpoonup
+$$
+
+$$
+\rightharpoondown\ \leadsto\ \nearrow\ \searrow\ \swarrow\ \nwarrow
+$$
+
+
+## Symbols
+
+$$
+\surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes\ \oslash\ \circledcirc\ \boxdot\ \bigtriangleup
+$$
+
+$$
+\bigtriangledown\ \dagger\ \diamond\ \star\ \triangleleft\ \triangleright\ \angle\ \infty\ \prime\ \triangle
+$$
+
+
+### Calculus
+
+$$
+\int u \frac{dv}{dx}\,dx=uv-\int \frac{du} {dx}v \, dx
+$$
+
+$$
+f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}
+$$
+
+$$
+\oint \vec{F} \cdot d\vec{s}=0
+$$
+
+
+### Lorenz equation
+
+$$
+\begin{aligned} \dot{x} & = \sigma(y-x) \\\\ \dot{y} & = \rho x - y - xz \\\\ \dot{z} & = -\beta z + xy \end{aligned}
+$$
+
+
+### Cross product
+
+This is feasible in KaTeX, but the separation of fractions is not very good in this environment.
+
+$$
+\mathbf {V}_1  \times \mathbf {V}_2  = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}
+$$
+
+Here is a solution: use additional classes of the "mfrac" class (no difference in the case of MathJax) to make the score smaller:
+
+$$
+\mathbf {V}_1  \times \mathbf {V}_2  = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}
+$$
+
+
+## Emphasize
+
+$$
+\hat{x}\ \vec{x}\ \ddot{x}
+$$
+
+
+### Elastic parentheses
+
+$$
+\left(\frac{x^2}{y^3}\right)
+$$
+
+
+### Scope of evaluation
+
+$$
+\left. \frac{x^3}{3}\right|_0^1
+$$
+
+
+### Diagnostic criteria
+
+$$
+f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\\\ 3n+1, & \text{if } n\text{ is odd} \end{cases}
+$$
+
+
+### Maxwell's equations system
+
+$$
+\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}
+$$
+
+
+## Statistics
+
+Fixed phrases:$$ \frac{n!}{k!(n-k)!} = {^n}C_k{n \choose k}$$
+
+### Score in Score
+
+$$
+\frac{\frac{1}{x}+\frac{1}{y}}{y-z}
+$$
+
+
+### Nth root
+
+$$
+\sqrt[n]{1+x+x^2+x^3+\ldots}
+$$
+
+
+### Matrix
+
+$$
+\begin{pmatrix} a_{11} & a_{12} & a_{13}\\\\ a_{21} & a_{22} & a_{23}\\\\ a_{31} & a_{32} & a_{33} \end{pmatrix}
+\begin{bmatrix} 0 & \cdots & 0 \\\\ \vdots & \ddots & \vdots \\\\ 0 & \cdots & 0 \end{bmatrix}
+$$
+
+
+## Punctuation marks
+
+$$
+f(x) = \sqrt{1+x} \quad (x \ge -1)
+f(x) \sim x^2 \quad (x\to\infty)
+$$
+
+Now use punctuation marks:
+
+$$
+f(x) = \sqrt{1+x}, \quad x \ge -1
+f(x) \sim x^2, \quad x\to\infty
+$$
--- a/exampleSite/content/post/10-math-formula/index.md
+++ b/exampleSite/content/post/10-math-formula/index.md
@ -4,7 +4,7 @@ description: "主题支持mathjs和katex两种不同插件的数学公式渲染
 keywords: "math,formula"

 date: 2022-09-11T10:16:02+08:00
-lastmod: 2022-09-11T10:16:02+08:00
+lastmod: 2024-12-12T18:48:32+08:00

 categories:
  - 第三方引入
@ -29,7 +29,7 @@ math: mathjax

 - 使用 `hugo new` 命令创建一篇新的文章
 - 可以全局启用数据公式渲染，请在项目配置参数 `math: katex` 或 `math: mathjax`
- 或是将该参数配置到需要显示数学公式的页面头部（减少不必要的加载消耗）
+- 或是将该参数配置到需要显示数学公式的页面头部（减少不必要的资源加载消耗）

 {{< /note >}}

@ -37,20 +37,33 @@ math: mathjax

 ## 例子

+### 内行公式
+
+二次公式： $ax^2 + bx + c = 0$ （支持用`\$....\$`格式的行内公式）
+
+二次公式（换行显示公式） $$ax^2 + bx + c = 0$$
+
+更加复杂公式是这样的: $\lim^{x \to \infty}_{y \to 0}{\frac{x}{y}}$ 
+
+其它内联公式显示（分数表达 ）：\(\frac{1}{2}\)（支持用`\(...\)`格式的行内公式效果）
+

 ### 重复的分数
+
 $$
 \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
 $$


 ### 总和记号
+
 $$
 \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
 $$


 ### 几何级数之和
+
 我把接下来的两个例子分成了几行，这样它在手机上表现得更好。这就是为什么它们包含 `\displaystyle`。或者可使用类似 `\displaylines{x = a + b \\\ y = b + c}` 语法进行截断，具体信息可见：[mathjax-issues2312](https://github.com/mathjax/MathJax/issues/2312)

 $$
@ -78,6 +91,7 @@ $$
 $$

 ### 乘记号
+
 $$
 \displaystyle 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = 
 $$
@ -89,17 +103,19 @@ $$


 ### 随文数式
-这是一些线性数学: $$ k_{n+1} = n^2 + k_n^2 - k_{n-1} $$ ， 然后是更多的文本。
+
+这是一些线性数学: $ k_{n+1} = n^2 + k_n^2 - k_{n-1} $ ， 然后是更多的文本。


 ### 希腊字母
+
 $$
 \displaylines{\Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega
 \alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \\\\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi \ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi}
 $$

-
 ### 箭头
+
 $$
 \gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow
 $$
@ -119,6 +135,7 @@ $$


 ## 符号
+
 $$
 \surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes\ \oslash\ \circledcirc\ \boxdot\ \bigtriangleup
 $$
@ -129,6 +146,7 @@ $$


 ### 微积分学
+
 $$
 \int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx
 $$
@ -143,12 +161,14 @@ $$


 ### 洛伦茨方程
+
 $$
 \begin{aligned} \dot{x} & = \sigma(y-x) \\\\ \dot{y} & = \rho x - y - xz \\\\ \dot{z} & = -\beta z + xy \end{aligned}
 $$


 ### 交叉乘积
+
 这在KaTeX中是可行的，但在这种环境中馏分的分离不是很好。

 $$
@ -163,56 +183,60 @@ $$


 ## 强调
+
 $$
 \hat{x}\ \vec{x}\ \ddot{x}
 $$


 ### 有弹性的括号
+
 $$
 \left(\frac{x^2}{y^3}\right)
 $$


 ### 评估范围
+
 $$
 \left.\frac{x^3}{3}\right|_0^1
 $$


 ### 诊断标准
+
 $$
 f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\\\ 3n+1, & \text{if } n\text{ is odd} \end{cases}
 $$


 ### 麦克斯韦方程组
+
 $$
 \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}
 $$


 ## 统计学
-固定词组：

-$$
-\frac{n!}{k!(n-k)!} = {^n}C_k
-{n \choose k}
-$$
+固定词组：$$\frac{n!}{k!(n-k)!} = {^n}C_k{n \choose k}$$

 ### 分数在分数
+
 $$
 \frac{\frac{1}{x}+\frac{1}{y}}{y-z}
 $$


 ### ｎ次方根
+
 $$
 \sqrt[n]{1+x+x^2+x^3+\ldots}
 $$


 ### 矩阵
+
 $$
 \begin{pmatrix} a_{11} & a_{12} & a_{13}\\\\ a_{21} & a_{22} & a_{23}\\\\ a_{31} & a_{32} & a_{33} \end{pmatrix}
 \begin{bmatrix} 0 & \cdots & 0 \\\\ \vdots & \ddots & \vdots \\\\ 0 & \cdots & 0 \end{bmatrix}
@ -220,6 +244,7 @@ $$


 ## 标点符号
+
 $$
 f(x) = \sqrt{1+x} \quad (x \ge -1)
 f(x) \sim x^2 \quad (x\to\infty)
--- a/exampleSite/content/post/11-mermaid-charts/index.en-us.md
+++ b/exampleSite/content/post/11-mermaid-charts/index.en-us.md
@ -0,0 +1,193 @@
+---
+Title: "Mermaid Support Flowchart"
+keywords: "mermaid,flow,chart"
+
+date: 2025-01-29T21:01:13+08:00
+lastmod: 2025-01-29T21:01:13+08:00
+
+categories:
+  - ThirdParty
+  - DiagramSequence
+tags:
+  - ProcessDiagram
+  - TimingDiagram
+
+url: "demo/mermaid-charts.html"
+toc: true
+---
+
+
+This theme now supports the use of `Mermaid` to draw flowcharts, sequence diagrams, Gantt charts, state diagrams, relationship diagrams, and more in plain text format. With the gradual development of `Mermaid`, various types of diagrams will be introduced in the future. For more types and usage methods, please follow its official website:[https://mermaid-js.github.io/](https://mermaid-js.github.io/).
+
+<!--more-->
+
+## Instructions for use
+
+{{< note info >}}
+
+- Create a new article using the `hugo new` command
+- Write various types of diagrams using short code, with 2 built-in parameters: Align and bc (background color) can refer to the following usage examples
+
+{{< /note >}}
+
+## Process diagram
+
+```shell
+{{</* mermaid align="left" */>}}
+graph TD;
+A-->B;
+A-->C;
+B-->D;
+C-->D;
+{{</* /mermaid */>}}
+```
+
+{{< mermaid align="left" >}}
+graph TD;
+A-->B;
+A-->C;
+B-->D;
+C-->D;
+{{< /mermaid >}}
+
+## Timing diagram
+
+```shell
+{{</* mermaid bc="#eee"  */>}}
+sequenceDiagram
+participant Alice
+participant Bob
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts <br/>prevail!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+{{</* /mermaid */>}}
+```
+
+{{< mermaid bc="#eee" >}}
+sequenceDiagram
+participant Alice
+participant Bob
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts <br/>prevail!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+{{< /mermaid >}}
+
+## Class diagram
+
+```shell
+{{</* mermaid */>}}
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+{{< /mermaid >}}
+
+## Gantt Chart
+
+```shell
+{{</* mermaid */>}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+{{< /mermaid >}}
+
+## Entity Relationship Diagram
+
+```shell
+{{</* mermaid */>}}
+erDiagram
+CUSTOMER ||--o{ ORDER : places
+ORDER ||--|{ LINE-ITEM : contains
+CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+erDiagram
+CUSTOMER ||--o{ ORDER : places
+ORDER ||--|{ LINE-ITEM : contains
+CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{< /mermaid >}}
+
+## User Journey
+
+```shell
+{{</* mermaid */>}}
+journey
+title My working day
+section Go to work
+Make tea: 5: Me
+Go upstairs: 3: Me
+Do work: 1: Me, Cat
+section Go home
+Go downstairs: 5: Me
+Sit down: 5: Me
+{{</* /mermaid */>}}
+```
+{{< mermaid >}}
+journey
+title My working day
+section Go to work
+Make tea: 5: Me
+Go upstairs: 3: Me
+Do work: 1: Me, Cat
+section Go home
+Go downstairs: 5: Me
+Sit down: 5: Me
+{{< /mermaid >}}
--- a/exampleSite/content/post/11-mermaid-charts/index.md
+++ b/exampleSite/content/post/11-mermaid-charts/index.md
@ -1,6 +1,5 @@
 ---
 title: "Mermaid支持流程图"
-description: "mermaid-flow-chart"
 keywords: "mermaid,flow,chart"

 date: 2022-09-18T20:58:13+08:00
@ -14,7 +13,6 @@ tags:
  - 时序图

 url: "demo/mermaid-charts.html"
-mermaid: true
 toc: true
 ---

@ -28,7 +26,6 @@ toc: true
 {{< note info >}}

 - 通过 `hugo new` 命令创建一篇新的文章
- 在文章头部配置 `mermaid: true`
 - 使用短代码书写各种类型的图，自带2个参数： align（对齐） 和 bc（背景色），可参考如下使用示例

 {{< /note >}}
--- a/exampleSite/content/post/12-shortcodes/index.en-us.md
+++ b/exampleSite/content/post/12-shortcodes/index.en-us.md
@ -0,0 +1,156 @@
+---
+title:  "Custom shortcode example"
+description:  "Set commonly used block references, label cards, buttons, and other information as short codes for quick referencing"
+Keywords: "short code, short code"
+
+date: 2025-01-29T21:08:50+08:00
+lastmod: 2025-01-29T21:08:50+08:00
+
+categories:
+  - Example
+  - Grammar
+tags:
+  - ShortCode
+  - Grammar
+url: "demo/shortcodes.html"
+toc: true
+---
+
+Although the `Markdown` syntax is already very rich and can meet the vast majority of our writing needs, in order to better layout the content of the article in a more friendly way, a set of custom phrases has been designed for citation, which can be quickly referenced when used.
+
+<!--more-->
+
+## Block reference
+
+When quoting some classic quotes, this phrase can be used. The grammar reference is as follows:
+
+```markdown
+{{</* quote */>}}
+
+###  block quote
+
+Write down the words you want to express!
+{{</* /quote */>}}
+```
+
+Actual effect:
+
+{{< quote >}}
+
+Hope is indifferent to existence, indifferent to nothingness, just like the road on earth.
+
+
+In fact, there is no road on the ground, and with more people walking, it becomes a road.
+
+**Lu Xun**
+
+{{< /quote >}}
+
+## Information Block
+
+Support 'default'` The presentation of five different effects, including info, success, warning, and danger, with the following syntax reference:
+
+```markdown
+{{</* note [class] [no-icon] */>}}
+Write and express information
+Support Markdown syntax
+{{</* /note */>}}
+```
+
+Actual effect:
+
+{{< note default no-icon >}}
+
+###  Default Header without icon
+
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note default >}}
+###  Default Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note primary >}}
+###  Primary Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note info >}}
+###  Info Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note success >}}
+###  Success Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note warning >}}
+###  Warning Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note danger >}}
+###  Danger Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+
+## Bilibili video
+
+```markdown
+{{</* bilibili BV1Sx411T7QQ */>}}
+perhaps
+{{</* bilibili id=BV1Sx411T7QQ */>}}
+```
+{{< bilibili id=BV1Sx411T7QQ >}}
+
+## Music player
+
+Based on [Player](https://github.com/DIYgod/APlayer) And [MatingJS](https://github.com/metowolf/MetingJS) The library implements a responsive music player embedded in the meeting, with automatically recognized music platform URLs, including:` Netease, Tencent, Kugou, Baidu, and Xiami platforms also support user-defined music sources. Other relevant parameter explanations are as follows:
+
+|Parameter Name | Default | Description|
+| :----: | :------: | :--- |
+| **id** | _Required_  | Music ID, which is the unique identifier of the music on the music platform |
+| **server** | _Required_  | Music platform, supports `netease`、 `tencent`、 `kugou`、 `baidu` and `xiami` |
+| **type** | _Required_  | Play type, currently supports `song` 、 `playlist`、 `album`、 `search` and `artist` |
+| **auto** | _Optional_  | Music address, only supports the platform in the server parameter |
+| **theme** | `#448aff`  | The theme color of the player defaults to `#448aff` |
+| **url** | Empty  |Custom music source URL, default to empty |
+| **name** | Empty | Music name, default to empty |
+| **artist** | Empty  | Music author, default to empty |
+| **cover** | Empty  | Music cover URL, default to empty |
+| **fixed** | `false` | Fixed player, default to `false` |
+| **mini** | `false`  | Display mini player, default to `false` |
+| **autoplay** | `false`  | Autoplay the music, default to `false` |
+| **loop** | `all`  | Loop playback, supports `all`、`one` and `none`，default to `all` |
+| **order** | `list`  | Play order `list` and `random`，default to `list` |
+| **volume** | `0.7`  | Volume, default is `0.7` |
+| **mutex** | `true` | When multiple pieces of music are playing, should only the current player be turned on，default to `true` |
+| **list-folded** | `false`  | List collapse, default is `false` |
+| **list-max-height** | `340px`  | The maximum height of the list is 340px by default |
+
+### Single playback
+
+```markdown
+{{</* music theme="#2980b9" server="tencent" type="song" id="002u4ZTb0CXmJA" mini="true" */>}}
+```
+
+{{< music theme="#2980b9" server="tencent" type="song" id="002u4ZTb0CXmJA" mini="true" >}}
+
+### List playback
+
+```markdown
+{{</* music server="netease" type="playlist" id="1982066521" list-max-height="140" */>}}
+```
+
+{{< music server="netease" type="playlist" id="1982066521" list-max-height="140" >}}
+
+### Customize music source
+
+```markdown
+{{</* music url="/music/sky.mp3" name="Sky City" artist="Hayao Miyazaki" cover="/music/gongqijun.jpg" autoplay="true" */>}}
+```
+
+{{< music url="/music/sky.mp3" name="City of the Sky" artist="Hayao Miyazaki" cover="/music/gongqijun.jpg" autoplay="true" >}}
--- a/exampleSite/content/post/12-shortcodes/index.md
+++ b/exampleSite/content/post/12-shortcodes/index.md
@ -0,0 +1,152 @@
+---
+title: "自定义短语示例"
+description: "将常用的块引用、标签卡、按钮等信息设置成短代码，便于快速引用"
+keywords: "shortcode,短代码"
+
+date: 2022-08-06T14:41:50+08:00
+lastmod: 2022-08-06T14:41:50+08:00
+
+categories:
+  - 示例文章
+  - 语法
+tags:
+  - 短代码
+  - 语法
+url: "demo/shortcodes.html"
+toc: true
+---
+
+虽然 `Markdown` 语法已经非常丰富能够满足我们写文章的绝大部分需求，但是为更好的对文章内容进行更友好的排版，为引设计一套自定义的短语，便于在使用时能够快速引用。
+
+<!--more-->
+
+## 块引用
+
+在引用一些经典名言名句时，可以采用此短语，语法参考如下：
+
+```markdown
+{{</* quote */>}}
+  ### block quote
+  写下你想表达的话语！
+{{</* /quote */>}}
+```
+
+实际效果：
+
+{{< quote >}}
+
+希望是无所谓有，无所谓无的，这正如地上的路。
+
+
+其实地上本没有路，走的人多了，也便成了路。
+
+**鲁迅**
+
+{{< /quote >}}
+
+## 信息块
+
+支持 `default`，`info`，`success`，`warning`，`danger` 等五种不同效果的展示，语法参考如下：
+
+```markdown
+{{</* note [class] [no-icon] */>}}
+  书写表达的信息
+  支持 Markdown 语法
+{{</* /note */>}}
+```
+
+实际效果：
+
+{{< note default no-icon >}}
+  ### Default Header without icon
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note default >}}
+  ### Default Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note primary >}}
+  ### Primary Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note info >}}
+  ### Info Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note success >}}
+  ### Success Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note warning >}}
+  ### Warning Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note danger >}}
+  ### Danger Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+
+## Bilibili 视频
+
+```markdown
+{{</* bilibili BV1Sx411T7QQ */>}}
+或者
+{{</* bilibili id=BV1Sx411T7QQ */>}}
+```
+{{< bilibili id=BV1Sx411T7QQ >}}
+
+## 音乐播放器
+
+基于[APlayer](https://github.com/DIYgod/APlayer)和[MetingJS](https://github.com/metowolf/MetingJS)库实现见面内嵌的响应式音乐播放器，自动识别的音乐平台URL，包括：`netease`、 `tencent`、 `kugou`、 `baidu` 和 `xiami` 平台，也可以支持用户自定义的音乐源。其他相关的参数说明如下：
+
+| 参数名  | 默认   | 说明  |
+| :----: | :------: | :--- |
+| **id** | _必选_  | 音乐 ID，即音乐在音乐平台的唯一标识符 |
+| **server** | _必选_  | 音乐平台，支持 `netease`、 `tencent`、 `kugou`、 `baidu` 和 `xiami` 平台 |
+| **type** | _必选_  | 播放类型，目前支持 `song` 、 `playlist`、 `album`、 `search` 和 `artist` 类型 |
+| **auto** | _可选_  | 音乐的地址，仅支持 server 参数中的平台 |
+| **theme** | `#448aff`  | 播放器的主题色，默认为 `#448aff` |
+| **url** | 空  | 自定的音乐源 URL，默认为空 |
+| **name** | 空 | 音乐名称，默认为空 |
+| **artist** | 空  | 音乐作者，默认为空 |
+| **cover** | 空  | 音乐封面 URL，默认为空 |
+| **fixed** | `false` | 固定播放器，默认为 `false` |
+| **mini** | `false`  | 显示小播放器，默认为 `false` |
+| **autoplay** | `false`  | 自动播放，默认为 `false` |
+| **loop** | `all`  | 循环播放，支持`all`、`one` 和 `none`，默认为 `all` |
+| **order** | `list`  | 播放顺序`list` 和 `random`，支持默认为 `list` |
+| **volume** | `0.7`  | 音量，默认为 `0.7` |
+| **mutex** | `true` | 有多个音乐播放时，是否只开启当前播放器，默认为 `true` |
+| **list-folded** | `false`  | 列表折叠，默认为 `false` |
+| **list-max-height** | `340px`  | 列表最大高度，默认为：340px |
+
+### 单曲播放 
+
+```markdown
+{{</* music theme="#2980b9" server="tencent" type="song" id="002u4ZTb0CXmJA" mini="true" */>}}
+```
+
+{{< music theme="#2980b9" server="tencent" type="song" id="002u4ZTb0CXmJA" mini="true" >}}
+
+### 列表播放
+
+```markdown
+{{</* music server="netease" type="playlist" id="1982066521" list-max-height="140" */>}}
+```
+
+{{< music server="netease" type="playlist" id="1982066521" list-max-height="140" >}}
+
+### 自定义音乐源
+
+```markdown
+{{</* music music url="/music/sky.mp3" name="天空之城" artist="宫崎骏" cover="/music/gongqijun.jpg" autoplay="true" */>}}
+```
+
+{{< music url="/music/sky.mp3" name="天空之城" artist="宫崎骏" cover="/music/gongqijun.jpg" autoplay="true" >}}
--- a/exampleSite/content/post/13-hugo-blockquote/index.en-us.md
+++ b/exampleSite/content/post/13-hugo-blockquote/index.en-us.md
@ -0,0 +1,148 @@
+---
+title:  "Support block information emphasis annotation in Markdown documents"
+description:  "Added rendering of blockquote style in the new version of Hugo framework, supports custom style design, and implements a warning style similar to Github"
+keywords: "hugo,block,quote"
+
+date: 2025-01-29T21:24:02+08:00
+lastmod: 2025-01-29T21:24:02+08:00
+
+categories:
+  - Example
+  - Grammar
+tags:
+  - blockquote
+  - Hugo
+
+url: "demo/hugo-blockquote.html"
+toc: true
+expired: true
+---
+
+In the past, the `Hugo NexT` theme used to annotate block information through custom phrases. Recently, it has been discovered that `Hugo` has been updated from [v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0). From the beginning of the version, it is possible to support rendering Blockquote styles in Markdown documents through hook mode (which needs to be implemented by oneself), achieving warning style styles similar to Github. So 7 different styles were added to the `Hugo NexT` theme for users to choose from, and they could also customize icons and color configurations.
+
+
+<!--more-->
+
+
+Users can find the positions of the following two configuration items and adjust them according to their preferred style and color:
+
+```yaml
+#Config. yaml or hugo.toml
+postAlerts:
+info:
+icon: "circle-info"
+color: "#4A90E2"
+note:
+icon: "bell"
+color: "#17A2B8"
+help:
+icon: "circle-question"
+color: "#967ADC"
+error:
+icon: "circle-xmark"
+color: "#DC3545"
+warning:
+icon: "triangle-exclamation"
+color: "#F39C12"
+success:
+icon: "circle-check"
+color: "#32CD32"
+important:
+icon: "circle-plus"
+color: "#007BFF"
+```
+
+```yaml
+# i18n/zh-cn.yaml
+PostAlert:
+info     :  Information
+note     :  Attention
+help     :  'Help'
+error    :  Error
+warning  :  Warning
+success  :  'Success'
+important:  'Important'
+```
+
+The writing style and specific implementation effects in the Maarkdown document are as follows:
+
+## Information prompt
+
+```markdown
+> [!INFO]
+> HugoNexT theme supports custom style design, allowing you to achieve personalized design for your own site.
+```
+
+> [!INFO]
+> HugoNexT theme supports custom style design, allowing you to achieve personalized design for your own site.
+
+## Attention to information
+
+```markdown
+> [!NOTE]
+> The latest version of the `Hugo NexT` theme supports Blockquote rendering for Markdown documents, with 7 different styles to choose from or customize.
+```
+
+> [!NOTE]
+> The latest version of the `Hugo NexT` theme supports Blockquote rendering for Markdown documents, with 7 different styles to choose from or customize.
+
+## Help Information
+
+```markdown
+> [!HELP]
+> The HugoNexT theme provides complete example usage instructions and source code, making it easier to get started and use.
+```
+
+> [!HELP]
+> The HugoNexT theme provides complete example usage instructions and source code, making it easier to get started and use.
+
+## Warning message
+
+```markdown
+> [!WARNING]
+> The HugoNexT theme uses SCSS precompilation and requires downloading the official Hugo extended version for use.
+```
+
+> [!WARNING]
+> The HugoNexT theme uses SCSS precompilation and requires downloading the official Hugo extended version for use.
+
+## Error message
+
+```markdown
+> [!ERROR]
+> The `Hugo NexT` theme is only supported in Hugo v0.132.0 and above versions.
+```
+
+> [!ERROR]
+> The `Hugo NexT` theme is only supported in Hugo v0.132.0 and above versions.
+
+## Success message
+
+```markdown
+> [!SUCCESS]
+> Congratulations on successfully deploying the `Hugo NexT` theme. Please feel free to start your creative work.
+```
+
+> [!SUCCESS]
+>Congratulations on successfully deploying the `Hugo NexT` theme. Please feel free to start your creative work.
+
+## Important information
+
+```markdown
+> [!IMPORTANT]
+> The HugoNexT theme supports the use of external CDN services, but please ensure that your network is functioning properly and accessible to CDN services at this time.
+```
+
+> [!IMPORTANT]
+> The HugoNexT theme supports the use of external CDN services, but please ensure that your network is functioning properly and accessible to CDN services at this time.
+
+
+## Custom Title
+
+```markdown
+> [!Info]+Custom Title Description
+> The HugoNexT theme provides very open and flexible configurations, allowing users to customize according to their own ideas.
+```
+
+> [!Info]+Custom Title Description
+> The HugoNexT theme provides very open and flexible configurations, allowing users to customize according to their own ideas.
--- a/exampleSite/content/post/13-hugo-blockquote/index.md
+++ b/exampleSite/content/post/13-hugo-blockquote/index.md
@ -0,0 +1,148 @@
+---
+title: "支持在Markdown文档中实现块信息强调标注"
+description: "在新版本Hugo框架中添加了对blockquote样式渲染，支持自定义样式设计，实现类似Github的警告风格样式。"
+keywords: "hugo,block,quote"
+
+date: 2025-01-02T16:08:02+08:00
+lastmod: 2025-01-02T19:08:02+08:00
+
+categories:
+  - 示例文章
+  - 语法
+tags:
+  - blockquote
+  - Hugo
+
+url: "demo/hugo-blockquote.html"
+toc: true
+expired: true
+---
+
+过去 `HugoNexT` 主题都是通过自定义短语来实现块信息的标注，近期发现 `Hugo` 从[v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0)版本开始便是可以支持通过hook方式渲染Markdown文档中的Blockquote样式（需要自己实现），实现类似Github的警告风格样式。于是便在 `HugoNexT` 主题中添加7种不同风格供用户可选择使用，还可以自定义图标与颜色配置。
+
+
+<!--more-->
+
+
+用户可以找到如下两处配置项的位置，然后根据自己喜欢的风格和颜色进行调整：
+
+```yaml
+# config.yaml 或 hugo.toml
+postAlerts:
+  info:
+    icon: "circle-info"
+    color: "#4A90E2"
+  note:
+    icon: "bell"
+    color: "#17A2B8"
+  help:
+    icon: "circle-question"
+    color: "#967ADC"
+  error:
+    icon: "circle-xmark"
+    color: "#DC3545"
+  warning:
+    icon: "triangle-exclamation"
+    color: "#F39C12"
+  success:
+    icon: "circle-check"
+    color: "#32CD32"
+  important:
+    icon: "circle-plus"
+    color: "#007BFF"
+```
+
+```yaml
+# i18n/zh-cn.yaml
+PostAlert:
+  info     : "信息"
+  note     : "注意"
+  help     : "帮助"
+  error    : "错误"
+  warning  : "警告"
+  success  : "成功"
+  important: "重要"
+```
+
+在Maarkdown文档中的写法和实现的具体效果参考如下：
+
+## 信息提示
+
+```markdown
+> [!INFO]
+> `HugoNexT` 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。
+```
+
+> [!INFO]
+> `HugoNexT` 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。
+
+## 注意信息
+
+```markdown
+> [!NOTE]
+> 最新版本的 `HugoNexT` 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。
+```
+
+> [!NOTE]
+> 最新版本的 `HugoNexT` 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。
+
+## 帮助信息
+
+```markdown
+> [!HELP]
+> `HugoNexT` 主题提供了完整的示例使用说明及源代码，上手更为简单易用。
+```
+
+> [!HELP]
+> `HugoNexT` 主题提供了完整的示例使用说明及源代码，上手更为简单易用。
+
+## 警告信息
+
+```markdown
+> [!WARNING]
+> `HugoNexT` 主题使用了SCSS 预编译，需要下载 Hugo 官方 `hugo-extended` 版本使用。
+```
+
+> [!WARNING]
+> `HugoNexT` 主题使用了SCSS 预编译，需要下载 Hugo 官方 `hugo-extended` 版本使用。
+
+## 错误信息
+
+```markdown
+> [!ERROR]
+> `HugoNexT` 主题只支持在 Hugo v0.132.0 及以上版本中使用。
+```
+
+> [!ERROR]
+> `HugoNexT` 主题只支持在 Hugo v0.132.0 及以上版本中使用。
+
+## 成功信息
+
+```markdown
+> [!SUCCESS]
+> 恭喜你已经成功部署 `HugoNexT` 主题，请尽情的开始你的创作吧。
+```
+
+> [!SUCCESS]
+> 恭喜你已经成功部署 `HugoNexT` 主题，请尽情的开始你的创作吧。
+
+## 重要信息
+
+```markdown
+> [!IMPORTANT]
+> `HugoNexT` 主题支持使用外部的CDN服务，但此时请确保你的网络是正常且可访问CDN服务。
+```
+
+> [!IMPORTANT]
+> `HugoNexT` 主题支持使用外部的CDN服务，但此时请确保你的网络是正常且可访问CDN服务。
+
+
+## 自定义标题
+
+```markdown
+> [!Info]+ 自定义标题说明 
+> `HugoNexT` 主题提供很开放的灵活配置，用户可按自己的想法改造。
+```
+
+> [!Info]+ 自定义标题说明 
+> `HugoNexT` 主题提供很开放的灵活配置，用户可按自己的想法改造。
--- a/exampleSite/content/post/shortcodes.md
+++ b/exampleSite/content/post/shortcodes.md
@ -1,92 +0,0 @@
---
-title: "自定义短语示例"
-description: "将常用的块引用、标签卡、按钮等信息设置成短代码，便于快速引用"
-keywords: "shortcode,短代码"
-
-date: 2022-08-06T14:41:50+08:00
-lastmod: 2022-08-06T14:41:50+08:00
-
-categories:
-  - 示例文章
-  - 语法
-tags:
-  - 短代码
-  - 语法
-url: "demo/shortcodes.html"
---
-
-虽然 `Markdown` 语法已经非常丰富能够满足我们写文章的绝大部分需求，但是为更好的对文章内容进行更友好的排版，为引设计一套自定义的短语，便于在使用时能够快速引用。
-
-<!--more-->
-
-## 块引用
-
-在引用一些经典名言名句时，可以采用此短语，语法参考如下：
-
-```markdown
-{{</* quote */>}}
-  ### block quote
-  写下你想表达的话语！
-{{</* /quote */>}}
-```
-
-实际效果：
-
-{{< quote >}}
-
-希望是无所谓有，无所谓无的，这正如地上的路。
-
-
-其实地上本没有路，走的人多了，也便成了路。
-
-**鲁迅**
-
-{{< /quote >}}
-
-## 信息块
-
-支持 `default`，`info`，`success`，`warning`，`danger` 等五种不同效果的展示，语法参考如下：
-
-```markdown
-{{</* note [class] [no-icon] */>}}
-  书写表达的信息
-  支持 Markdown 语法
-{{</* /note */>}}
-```
-
-实际效果：
-
-{{< note default no-icon >}}
-  ### Default Header without icon
-  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
-{{< /note >}}
-
-{{< note default >}}
-  ### Default Header
-  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
-{{< /note >}}
-
-{{< note primary >}}
-  ### Primary Header
-  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
-{{< /note >}}
-
-{{< note info >}}
-  ### Info Header
-  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
-{{< /note >}}
-
-{{< note success >}}
-  ### Success Header
-  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
-{{< /note >}}
-
-{{< note warning >}}
-  ### Warning Header
-  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
-{{< /note >}}
-
-{{< note danger >}}
-  ### Danger Header
-  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
-{{< /note >}}
--- a/exampleSite/data/flinks/en-us.yaml
+++ b/exampleSite/data/flinks/en-us.yaml
@ -0,0 +1,37 @@
+# 友情链接
+# Friend's links
+
+- FLinksTitle: Office Demo Site
+  FLinksDesc: Example content from the official theme.
+  FLinksList:
+    - name: Hugo
+      desc: The fastest website construction framework in the world!
+      avatar: https://gohugo.io/favicon-32x32.png
+      link: https://gohugo.io
+      timeout: 2
+      visible: true
+
+    - name: Hugo-NexT
+      desc: Hugo NexT Official Site
+      avatar: https://hugo-next.eu.org/imgs/hugo_next_avatar.png
+      link: https://hugo-next.eu.org
+      timeout: 2
+      visible: true
+
+    - name: Fanmeng Star Dust Space Station
+      desc: Even ordinary people have their own dreams!
+      avatar: https://elkan1788.github.io/imgs/avatar.png
+      link: https://lisenhui.cn
+      timeout: 2
+      visible: true
+
+    
+- FLinksTitle: Hugo NexT Fan Groups
+  FLinksDesc: Exciting presentation from Hugo NexT theme enthusiasts!
+  FLinksList:
+    - name: Ahaji
+      desc: The first Hugo NexT loyal fan user on the entire network!
+      avatar: https://a.happy2008.top/imgs/stayhome-small.png
+      link: https://a.happy2008.top/
+      timeout: 2
+      visible: true
--- a/exampleSite/data/flinks/zh-cn.yaml
+++ b/exampleSite/data/flinks/zh-cn.yaml
--- a/Show More
+++ b/Show More
 @ -1 +1 @@
 .6.3
 .7.0