🔀 Merge branch 'hotfix_v4.7.2'

fixed #136  category name: .Page.Title => .Name

.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.)

.gitignore

@@ -1,25 +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
 
-# Exclude special files in data folder
-!exampleSite/data
-
-# Exclude special files in static folder
-!exampleSite/static
-
-# Exclude special files
-!exampleSite/config.yaml
-!exampleSite/start.sh
-
-data/*
-!data/config.yaml
-!data/resources.yaml
 
+# vscode
+.vscode/

README.md

@@ -1,7 +1,7 @@
-[中文](README.zh.md) | [English](#)
+[中文](https://github.com/hugo-next/hugo-theme-next/blob/main/README.zh.md) | [English](#)
 
 <a title="Hugo NexT Website" href="https://preview.hugo-next.eu.org">
-  <img align="right" alt="NexT logo" width="266" src="https://lisenhui.gitee.io/imgs/hugo-next/logo/hugo-next-primary.png">
+<img align="right" alt="NexT logo" width="266" src="images/hugo-next-primary.png">
 </a>
 
 ## Hugo NexT
@@ -10,49 +10,101 @@
 
 > 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)](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&label=gh-pg&logo=GitHub)](https://github.com/hugo-next/hugo-theme-next) [![Repos Size](https://img.shields.io/github/repo-size/hugo-next/hugo-theme-next?style=flat-square&color=%23FFBF3B&logo=Files)](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)](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)
 
-## 4 Scheme
+![Screenshot](images/screenshot.png)
+
+## 🎨 4 Scheme
 
 * :heart_decoration: Muse
 * :six_pointed_star: Mist
 * :pisces: Pisces
 * :gemini: Gemini (**default**)
 
-## Live Preview
+## 👀 Live Preview
 
-| Environment | :gemini: (**Default**) | :heart_decoration: | :six_pointed_star: | :pisces: | Status |
-| :---: | :---: | :---: | :---: | :---: | :---: |
+| Environment |           :gemini: (**Default**)           |               :heart_decoration:               |               :six_pointed_star:               |                      :pisces:                      |                                               Status                                               |
+| :---------: | :-----------------------------------------: | :--------------------------------------------: | :--------------------------------------------: | :------------------------------------------------: | :-------------------------------------------------------------------------------------------------: |
 | Preliminary | [Gemini](https://preview.hugo-next.eu.org/) | [Muse](https://preview.hugo-next.eu.org/muse/) | [Mist](https://preview.hugo-next.eu.org/mist/) | [Pisces](https://preview.hugo-next.eu.org/pisces/) | ![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=preview-hugo-next&style=for-the-badge) |
-| Production | [Gemini](https://hugo-next.eu.org/) | [Muse](https://hugo-next.eu.org/muse/) | [Mist](https://hugo-next.eu.org/mist/) | [Pisces](https://hugo-next.eu.org/pisces/) | ![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=hugo-next&style=for-the-badge) |
+| Production |     [Gemini](https://hugo-next.eu.org/)     |     [Muse](https://hugo-next.eu.org/muse/)     |     [Mist](https://hugo-next.eu.org/mist/)     |     [Pisces](https://hugo-next.eu.org/pisces/)     |     ![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=hugo-next&style=for-the-badge)     |
 
 > - Preliminary: all new feature developments will be previewed as soon as possible.
 > - Production: Only the features that are tested stably and meet the requirements will be officially released.
 
-## Quick Start
+## 👣 Quick Start
 
-Before use `Hugo NexT` theme, please make sure installed `Git` & `Hugo Extened` software in your PC, then use `submodule` to lead into the theme, see below commands:
+Before use `Hugo NexT` theme, please make sure installed `Git` & `Hugo Extened` software in your PC.
+
+### 📦 Install Hugo
+
+If you want to quickly preview the actual effect of the theme, you can directly clone the repository code of the current theme and run the example site:
 
 ```shell
-$ hugo new site hugo-next-exmaple
-$ cd hugo-next-exmaple
-$ git init
+$ git clone --single-branch -b main https://github.com/hugo-next/hugo-theme-next.git hugo-theme-next
+$ cd hugo-theme-next/exampleSite/
+$ sh startup.sh
+```
+
+Open a computer browser and enter `http://127.0.0.1:1414/`, then you can access and view it.
+
+### 📰 Use Template
+
+If there your first time build blog site, Recommended use template of `Github` which can easily create your site code. Click & visit this repository: [hugo-theme-next-starter](https://github.com/hugo-next/hugo-theme-next-starter), then click the green button which name call `Use this template` upper right corner on the page. Just like below image:
+
+![Use Template](images/use-hugo-next-starter.png)
+
+After do that click the green button which name call `Create repository from template`, then will create your site code automatic, and clone it on your PC environment.
+
+### 📐 Direct Reference
+
+If you had a blog site, then use `submodule` to lead into the theme, see below commands:
+
+```shell
+$ cd hugo-next-example
 $ git submodule add https://github.com/hugo-next/hugo-theme-next.git themes/hugo-theme-next
-$ cp -r themes/hugo-theme-next/exampleSite/* .
-$ rm -rf config.toml
+$ cp themes/hugo-theme-next/exampleSite/hugo.yaml .
+$ mv hugo.toml hugo.toml.backup
+```
+
+Or use `Hugo module` to lead into the theme, see below commands:
+
+```shell
+$ cd hugo-next-example
+$ hugo mod init hugo-next-example
+$ wget -O hugo.yaml https://github.com/hugo-next/hugo-theme-next/raw/main/exampleSite/hugo.yaml
+$ sed -i 's/hugo-theme-next/github.com\/hugo-next\/hugo-theme-next\/v4/' hugo.yaml
+$ mv hugo.toml hugo.toml.backup
+```
+
+### 💻 Preview on Local
+
+```shell
+$ cd hugo-next-example
 $ hugo server
 ```
 
 Done that input adrress http://127.0.0.1:1313/ on browser will see the effect & good luck for you! :tada::tada::tada:
 
+> **Note**
+> Don't use `hugo server` command deploy your site and enable internet visit, it just used to preview when you develop on local environment. Recommended use `hugo` command build static files all site, then deploy them into Web server such as `Nginx`.
+
+### 🔄 Upgrade Theme
+
 Execute command as below in your site directory when the theme upgrade.
 
 ```shell
-$ cd hugo-next-exmaple
+$ cd hugo-next-example
 $ git submodule update --remote
 ```
 
-## New Post
+Execute command as below if you are using `Hugo module`:
+
+```shell
+$ cd hugo-next-example
+$ hugo mod get -u
+```
+
+## 📝 New Post
 
 There had ready a new post template for you,  It is recommended to use the following Hugo command to quickly create a new post:
 
@@ -60,8 +112,10 @@ There had ready a new post template for you,  It is recommended to use the follo
 $ hugo new posts/hello-world.md
 ```
 
-All front matter parameters's description in post as below:
+> **Note**
+> By defalut `hugo new` command will create new post under `content` root directory, so in here `posts` were you custom subfolder in `content` directory.
 
+All front matter parameters's description in post as below:
 
 ```yml
 ---
@@ -88,41 +142,78 @@ tags:
 #expand: true
 # It's means that will redirecting to external links
 #extlink:
-# Switch to enabled or disabled comment plugins in this post
+# Disabled comment plugins in this post
 #comment:
 # enable: false
-# Enable table of content
+# Disable table of content int this post
+# Notice: By default will automatic build table of content 
+# with h2-h4 title in post and without other settings
 #toc: false
 # Absolute link for visit
 #url: "{{ lower .Name }}.html"
 # Sticky post set-top in home page and the smaller nubmer will more forward.
 #weight: 1
+# Support Math Formulas render, options: mathjax, katex
+#math: mathjax
+# Enable chart render, such as: flow, sequence, classes etc
+#mermaid: true
 ---
 ```
 
-## Feedback
+## 🎉 User's Cases
+
+- [Hugo Docs & Demo](https://hugo-next.eu.org/)
+- [凡梦星尘空间站](https://lisenhui.cn/)
+- [阿哈吉](https://a.happy2008.top/)
+- [研究僧](https://yuanlucas.com/)
+- [Zero's Record](https://izeroo.cn/)
+- [More Cases](https://hugo-next.eu.org/flinks.html)
+
+Hope could submmit your site information in this file [flinks.yaml](https://github.com/hugo-next/hugo-next-docs/blob/develop/data/flinks.yaml) end line such as below code sytle when you use `Hugo NexT` theme, thanks.
+
+```yaml
+- name: NexT 主题
+  desc: 保持简单的易用性和强大的功能
+  avatar: https://hugo-next.eu.org/imgs/hugo_next_avatar.png
+  link: https://hugo-next.eu.org
+```
+
+## 🙋 Feedback
 
 - Join us [GitHub Discussions](https://github.com/hugo-next/hugo-theme-next/discussions) or [Gitter](https://gitter.im/hugo-next/community) to chat :beers:
 - [GitHub Issues](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Bug&template=bug-report.md) submit a new bug :bug:
 - [GitHub Feature](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Feature+Request&template=feature-request.md) tell me your ideas :sparkles:
 
-## Join us
+## 👨‍👩‍👧‍👦 Join us
 
 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.
 
-## License
+[![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)
 
 Copyright (c) 2022, hugo-next teams.
 
-## Thanks
+## 💖 Thanks
 
 That's my hobby to develop `Hugo NexT` theme, thanks all people who gived the donate, and let we follow it growth up.
 
-List of Donors(Order by Date):
+List of Donors(Order desc by Date):
+
+| Donation time | Donors | Donation mode | Donation content | Message                                                                    |
+| :-----------: | ------ | ------------- | ---------------- | -------------------------------------------------------------------------- |
+|  2024.05.11  | *祥    | alipay        | RMB 66.66        | Thank you for creating such a great theme.                                 |
+|  2023.07.25  | *五    | alipay        | RMB 50.00        | I really like the 'Next' theme, thank you, let me buy you a cup of coffee. |
+|  2023.06.01  | **霖   | alipay        | RMB 10.00        | /                                                                          |
+|  2022.11.15  | f888   | xianyu        | RMB 6.20         | Good luck.                                                                 |
+|  2022.09.30  | *軒    | wechat pay    | RMB 66.66        | Hope it could help more people.                                            |
+|  2022.09.30  | N*l    | wechat pay    | RMB 20.00        | /                                                                          |
+|  2022.07.09  | *风    | wechat pay    | RMB 10.00        | /                                                                          |
+|  2022.05.08  | *泉    | wechat pay    | RMB 6.60         | Good luck with next develop.                                               |
+|  2022.02.28  | *娇    | wechat pay    | RMB 5.00         | /                                                                          |
+|  2021.12.21  | z*y    | wechat pay    | RMB 18.88        | /                                                                          |
 
-| Donation time | Donors | Donation mode | Donation content | Message |
-| ------- | ------ | ------ | ---- | ---- |
-| 2021.12.21 | z*y | wechat pay | RMB 18.88 |  / |
-| 2022.05.08 | *泉 | wechat pay | RMB 6.60 | Good luck with next develop. |

README.zh.md

@@ -1,7 +1,7 @@
-[中文](#) | [English](README.md)
+[中文](#) | [English](https://github.com/hugo-next/hugo-theme-next/blob/main/README.md)
 
 <a title="Hugo NexT 站点" href="https://preview.hugo-next.eu.org">
-  <img align="right" alt="NexT logo" width="266" src="https://lisenhui.gitee.io/imgs/hugo-next/logo/hugo-next-primary.png">
+<img align="right" alt="NexT logo" width="266" src="images/hugo-next-primary.png">
 </a>
 
 ## Hugo NexT
@@ -10,50 +10,104 @@
 
 > 本主题的所有页面设计和配置项都与原来 `Hexo` 引擎的 `NexT` 主题保持了良好的兼容性，可以非常平滑的从 `Hexo` 迁移至 `Hugo` 引擎，欢迎大家使用并反馈。
 
-[![Gitter](https://img.shields.io/gitter/room/hugo-next/hugo-them-next?logo=gitter&style=flat-square)](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&label=gh-pg&logo=GitHub)](https://github.com/hugo-next/hugo-theme-next) [![Repos Size](https://img.shields.io/github/repo-size/hugo-next/hugo-theme-next?style=flat-square&color=%23FFBF3B&logo=Files)](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)](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)
 
-## 4 种页面模式
+![截图](images/screenshot.png)
+
+## 🎨 4 种页面模式
 
 * :heart_decoration: 冥想 (Muse)
 * :six_pointed_star: 迷雾 (Mist)
 * :pisces: 双鱼座 (Pisces)
 * :gemini: 双子座 (Gemini) (**默认**)
 
-## 在线预览
+## 👀 在线预览
 
-| 环境 | :gemini: (**Default**) | :heart_decoration: | :six_pointed_star: | :pisces: | 状态 |
-| :---: | :---: | :---: | :---: | :---: | :---: |
+|   环境   |           :gemini: (**Default**)           |               :heart_decoration:               |               :six_pointed_star:               |                      :pisces:                      |                                            状态                                            |
+| :------: | :-----------------------------------------: | :--------------------------------------------: | :--------------------------------------------: | :------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
 | 开发版本 | [双子座](https://preview.hugo-next.eu.org/) | [冥想](https://preview.hugo-next.eu.org/muse/) | [迷雾](https://preview.hugo-next.eu.org/mist/) | [双鱼座](https://preview.hugo-next.eu.org/pisces/) | ![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=hugo-next&style=for-the-badge) |
-| 正式版本 | [双子座](https://hugo-next.eu.org/) | [冥想](https://hugo-next.eu.org/muse/) | [迷雾](https://hugo-next.eu.org/mist/) | [双鱼座](https://hugo-next.eu.org/pisces/) | ![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=hugo-next&style=for-the-badge) |
+| 正式版本 |     [双子座](https://hugo-next.eu.org/)     |     [冥想](https://hugo-next.eu.org/muse/)     |     [迷雾](https://hugo-next.eu.org/mist/)     |     [双鱼座](https://hugo-next.eu.org/pisces/)     | ![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=hugo-next&style=for-the-badge) |
 
 > - 开发版本： 所有的新功能开发都会在此第一时间发布预览
 > - 正式版本： 只有测试稳定且符合要求的功能才会正式发布
 
-## 快速开始
+## 👣 快速开始
 
-在使用 `Hugo NexT` 主题之前，请确认你的电脑上已经安装 `Git` 和 `Hugo Extened` 两款软件，然后通过 `submodule` 模式引用本主题，参考如下命令：
+在使用 `Hugo NexT` 主题之前，请确认你的电脑上已经安装 `Git` 和 `Hugo Extened` 两款软件。
+
+### 📦 快速预览
+
+如想快速预览主题实际效果，可直接克隆当前主题的仓库代码，然后运行示例站点：
 
 ```shell
-$ hugo new site hugo-next-exmaple
-$ cd hugo-next-exmaple
-$ git init
+$ git clone --single-branch -b main https://github.com/hugo-next/hugo-theme-next.git hugo-theme-next
+$ cd hugo-theme-next/exampleSite/
+$ sh startup.sh
+```
+
+打开电脑浏览器输入`http://127.0.0.1:1414/`即可访问查看。
+
+### 📰 使用模板
+
+如果你是初次建站的话，可以使用 `Github` 的模板功能，一键生成你的站点仓库代码。访问 [hugo-theme-next-starter](https://github.com/hugo-next/hugo-theme-next-starter) 点击右上角的 `Use this template` 绿色按钮然后填写代码仓库的相关信息，参考如下：
+
+![使用模板创建](images/use-hugo-next-starter.png)
+
+最后点击 `Create repository from template` 绿色按钮，会直接在你的空间中生成站点代码，再把它克隆到本地进行创作。
+
+### 📐 直接引用
+
+如果你已经有站点，可通过 `submodule` 模式引用本主题，参考如下命令：
+
+```shell
+$ cd hugo-next-example
 $ git submodule add https://github.com/hugo-next/hugo-theme-next.git themes/hugo-theme-next
-$ cp -r themes/hugo-theme-next/exampleSite/* .
-$ rm -rf config.toml
+$ cp themes/hugo-theme-next/exampleSite/hugo.yaml .
+$ mv hugo.toml hugo.toml.backup
+```
+
+或通过 `Hugo module` 模式引用本主题，参考如下命令：
+
+```shell
+$ cd hugo-next-example
+$ hugo mod init hugo-next-example
+$ wget -O hugo.yaml https://github.com/hugo-next/hugo-theme-next/raw/main/exampleSite/hugo.yaml
+$ sed -i 's/hugo-theme-next/github.com\/hugo-next\/hugo-theme-next\/v4/' hugo.yaml
+$ mv hugo.toml hugo.toml.backup
+```
+
+### 💻 本地预览
+
+```shell
+$ cd hugo-next-example
 $ hugo server
 ```
+
 打开浏览器，在地址栏输入 http://127.0.0.1:1313/ 查看主题效果，祝你好运！:tada::tada::tada:
 
+> **Note**
+> 要注意下 `hugo server` 命令只是用于本地开发或写文章时预览，并非是将其直接对外网开放访问。在正式发布时，可通过 `hugo` 命令生成全站静态文件，然后部署到类似 `Nginx` 的 Web 服务器即可。
+
+### 🔄 主题更新
+
 后续更新主题只需要在你的站点目录中，执行如下命令：
 
 ```shell
-$ cd hugo-next-exmaple
+$ cd hugo-next-example
 $ git submodule update --remote
 ```
 
+如使用 `Hugo module`，执行如下命令：
+
+```shell
+$ cd hugo-next-example
+$ hugo mod get -u
+```
+
+> **Note**
 > 本主题的代码同时也同步到 `Gitee` 仓库，在国内环境可切换用 [https://gitee.com/hugo-next/hugo-theme-next.git](https://gitee.com/hugo-next/hugo-theme-next.git) 镜像速度更快，也更稳定。
 
-## 发表新文章
+## 📝 发表新文章
 
 主题已经配置了默认的文章模板，建议使用如下 Hugo 命令快速创建新的文章：
 
@@ -61,8 +115,10 @@ $ git submodule update --remote
 $ hugo new posts/hello-world.md
 ```
 
-关于文章头部那些参数作用的说明参考如下：
+> **Note**
+> 其中 `posts` 路径是 `content` 根目录下的子文件夹，可依据自己的文件管理形态调整。
 
+关于文章头部那些参数作用的说明参考如下：
 
 ```yml
 ---
@@ -94,19 +150,42 @@ tags:
 #expand: true
 # 外部链接地址，访问时直接跳转
 #extlink:
-# 在当前页面开启或关闭评论功能
+# 在当前页面关闭评论功能
 #comment:
 # enable: false
-# 开启文章目录功能
+# 关闭当前页面目录功能
+# 注意：正常情况下文章中有H2-H4标题会自动生成目录，无需额外配置
 #toc: false
 # 绝对访问路径
 #url: "{{ lower .Name }}.html"
 # 开启文章置顶，数字越小越靠前
 #weight: 1
+# 开启数学公式渲染，可选值： mathjax, katex
+#math: mathjax
+# 开启各种图渲染，如流程图、时序图、类图等
+#mermaid: true
 ---
 ```
 
-## 使用反馈
+## 🎉 用户案例
+
+- [Hugo Docs & Demo](https://hugo-next.eu.org/)
+- [凡梦星尘空间站](https://lisenhui.cn/)
+- [阿哈吉](https://a.happy2008.top/)
+- [研究僧](https://yuanlucas.com/)
+- [Zero's Record](https://izeroo.cn/)
+- [更多案例上线](https://hugo-next.eu.org/flinks.html)
+
+如你也正在使用 `Hugo NexT` 主题，欢迎在 [flinks.yaml](https://github.com/hugo-next/hugo-next-docs/blob/develop/data/flinks.yaml)  文件底部提交贵站的名称、描述、头像、链接等信息，具体格式内容参考如下：
+
+```yaml
+- name: NexT 主题
+  desc: 保持简单的易用性和强大的功能
+  avatar: https://hugo-next.eu.org/imgs/hugo_next_avatar.png
+  link: https://hugo-next.eu.org
+```
+
+## 🙋 使用反馈
 
 - 加入 [GitHub Discussions](https://github.com/hugo-next/hugo-theme-next/discussions) 或 [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) 提交错误报告 :bug:
@@ -114,23 +193,36 @@ tags:
 
 > 国内用户也可加入 QQ 群交流： 604710815
 
-## 欢迎加入
+## 👨‍👩‍👧‍👦 欢迎加入
 
 关于本主题的开发进度和后续的发展路线图，可访问 [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)
 
 Copyright (c) 2022， hugo-next 团队
 
-## 致谢
+## 💖 致谢
 
 开发 `Hugo NexT` 主题原本是个人的业余爱好，但没想到网友们这么的热情，感谢有你们的支持，让我们一起来见证它的成长。
 
-以下是捐助名单列表（按时间顺序）：
+以下是打赏名单列表（按时间倒序）：
+
+|  打赏时间  | 打赏者 | 打赏方式 | 打赏内容 | 留言                             |
+| :--------: | ------ | -------- | -------- | -------------------------------- |
+| 2024.05.11 | *祥    | 支付宝   | ￥66.66  | 感谢创作这么好的主题             |
+| 2023.07.25 | *五    | 微信支付 | ￥50.00  | 很喜欢next主题，感谢，请你喝咖啡 |
+| 2023.06.01 | **霖   | 支付宝   | ¥10.00  | /                                |
+| 2022.11.15 | f888   | 咸鱼     | ¥6.20   | 聊表心意                         |
+| 2022.09.30 | *軒    | 微信支付 | ¥66.66  | 愿项目造福更多人！               |
+| 2022.09.30 | N*l    | 微信支付 | ¥20.00  | /                                |
+| 2022.07.09 | *风    | 微信支付 | ¥10.00  | /                                |
+| 2022.05.08 | *泉    | 微信支付 | ¥6.60   | 祝开发next顺利                   |
+| 2022.02.28 | *娇    | 微信支付 | ¥5.00   | /                                |
+| 2021.12.21 | z*y    | 微信支付 | ¥18.88  | /                                |
 
-| 捐助时间 | 捐助者 | 捐助方式 | 捐助内容 | 留言 |
-| :-------: | ------ | ------ | ---- | ---- |
-| 2021.12.21 | z*y | 微信支付 | ¥18.88 | / |
-| 2022.05.08 | *泉 | 微信支付 | ¥6.60 | 祝开发next顺利 |顺利 |

VERSION

@@ -1 +1 @@
-4.2.0
+4.7.2

archetypes/default.md

@@ -27,12 +27,12 @@ tags:
 # 外部链接地址，访问时直接跳转
 # It's means that will redirecting to external links
 #extlink:
-# 在当前页面开启或关闭评论功能
-# Switch to enabled or disabled comment plugins in this post
+# 在当前页面关闭评论功能
+# Disabled comment plugins in this post
 #comment:
 #  enable: false
-# 开启文章目录功能
-# Enable table of content
+# 关闭文章目录功能
+# Disable table of content
 #toc: false
 # 绝对访问路径
 # Absolute link for visit
@@ -40,6 +40,12 @@ tags:
 # 开启文章置顶，数字越小越靠前
 # Sticky post set-top in home page and the smaller nubmer will more forward.
 #weight: 1
+# 开启数学公式渲染，可选值： mathjax, katex
+# Support Math Formulas render, options: mathjax, katex
+#math: mathjax
+# 开启各种图渲染，如流程图、时序图、类图等
+# Enable chart render, such as: flow, sequence, classes etc
+#mermaid: true
 ---
 
 {{ .Name }}

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};
@@ -26,51 +30,56 @@
   --highlight-gutter-background: #{$highlight-gutter-background};
   --highlight-gutter-foreground: #{$highlight-gutter-foreground};
 
+  --highlight-img-fill: brightness(1) invert(0);
+
   color-scheme: light;
 }
 
-@if $darkmode {
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --body-bg-color: #{$body-bg-color-dark};
-      --content-bg-color: #{$content-bg-color-dark};
-      --card-bg-color: #{$card-bg-color-dark};
-      --text-color: #{$text-color-dark};
-      --blockquote-color: #{$blockquote-color-dark};
-      --link-color: #{$link-color-dark};
-      --link-hover-color: #{$link-hover-color-dark};
-      --brand-color: #{$brand-color-dark};
-      --brand-hover-color: #{$brand-hover-color-dark};
-      --table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
-      --table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
-      --menu-item-bg-color: #{$menu-item-bg-color-dark};
-      --theme-color: #{$theme-color-dark};
+:root[data-theme="dark"] {
+  --body-bg-color: #{$body-bg-color-dark};
+  --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};
+  --brand-color: #{$brand-color-dark};
+  --brand-hover-color: #{$brand-hover-color-dark};
+  --table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
+  --table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
+  --menu-item-bg-color: #{$menu-item-bg-color-dark};
+  --theme-color: #{$theme-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};
-      --btn-default-hover-bg: #{$btn-default-hover-bg-dark};
-      --btn-default-hover-color: #{$btn-default-hover-color-dark};
-      --btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
+  --border-color: #{$border-color-dark};
 
-      --highlight-background: #{$highlight-background-dark};
-      --highlight-foreground: #{$highlight-foreground-dark};
-      --highlight-gutter-background: #{$highlight-gutter-background-dark};
-      --highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
+  --btn-default-bg: #{$btn-default-bg-dark};
+  --btn-default-color: #{$btn-default-color-dark};
+  --btn-default-border-color: #{$btn-default-border-color-dark};
+  --btn-default-hover-bg: #{$btn-default-hover-bg-dark};
+  --btn-default-hover-color: #{$btn-default-hover-color-dark};
+  --btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
 
-      color-scheme: dark;
-    }
+  --highlight-background: #{$highlight-background-dark};
+  --highlight-foreground: #{$highlight-foreground-dark};
+  --highlight-gutter-background: #{$highlight-gutter-background-dark};
+  --highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
 
-    img {
-      opacity: .75;
+  --highlight-img-fill: brightness(0) invert(1);
 
-      &:hover {
-        opacity: .9;
-      }
-    }
+  color-scheme: dark;
+}
 
-    iframe {
-      color-scheme: light;
-    }
+img[data-theme="dark"] {
+  opacity: .75;
+  filter: brightness(1) invert(0);
+
+  &:hover {
+    opacity: .9;
   }
 }
+
+iframe[data-theme="dark"] {
+  color-scheme: light;
+}

assets/css/_common/components/3rd/index.scss

@@ -3,7 +3,6 @@
 @import 'utterances';
 @import 'search';
 @import 'related-posts';
-@import 'math';
 @import 'gitter';
 @import 'livere';
 @import 'waline';

assets/css/_common/components/3rd/search.scss

@@ -24,7 +24,7 @@
   .search-popup {
     background: var(--card-bg-color);
     border-radius: 5px;
-    height: 80%;
+    height: 65%;
     margin: auto;
     transform: scale(0);
     transition: transform .4s;
@@ -55,12 +55,7 @@
     }
 
     .search-header {
-      background: $gainsboro;
-      @if $darkmode {
-        @media (prefers-color-scheme: dark) {
-          background: $grey-dim;
-        }
-      }
+      background: var(--content-bg-color);      
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
       display: flex;
@@ -72,6 +67,7 @@
       border: 0;
       outline: 0;
       width: 100%;
+      color: var(--text-color);
 
       &::-webkit-search-cancel-button {
         display: none;
@@ -81,15 +77,46 @@
     .search-result-container {
       height: calc(100% - 55px);
       overflow: auto;
-      padding: 5px 25px;
+      padding: 0px 25px;
+    }
 
-      hr {
-        margin: 5px 0 10px;
+    .search-footer {
+      background: var(--content-bg-color);
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      padding: 0 5px;
+      color: var(--text-color);
 
-        &:first-child {
-          display: none;
+      .search-meta-info {
+        height: 26px;
+        display: flex;
+        padding: 5px 0;
+        
+        .search-hit-stats {
+          font-size: $font-size-smaller;
+          width: 65%;
+          padding: 2px 8px;
+        }
+
+        .search-vendor {
+          width: 34%;
+          text-align: right;
+          font-size: $font-size-small;
+          font-weight: bold;
+          
+          img {
+            width: 68px;
+            margin: 5px;
+            vertical-align: middle;
+            display: inline;
+          } 
+
+          a {
+            border: none;
+          }     
         }
       }
+
     }
 
     .search-result-list {
@@ -137,9 +164,16 @@
 
   .algolia-pagination {
     // Override default style of ul
-    margin: 40px 0;
+    //margin: 40px 0;
     opacity: 1;
     padding: 0;
+    font-size: $font-size-smallest;
+    margin-bottom: -16px;
+
+    .pagination {
+      visibility: visible;
+      margin: 0;
+    }
 
     .pagination-item {
       display: inline-block;

assets/css/_common/components/3rd/waline.scss

@@ -0,0 +1,18 @@
+@if $waline_enable {
+  .wl-actions>button:nth-child(3) {
+    display: none
+  }
+  
+  @include mobile() {
+    .wl-reaction-img {   
+      width: 28px;
+      height: 28px;    
+    }
+    .wl-reaction-votes {
+      padding: 0.85px;
+      font-weight: 500;
+      font-size: .65em;
+      line-height: .85;
+    }
+  }
+}

assets/css/_common/components/back-to-top.scss

@@ -1,45 +0,0 @@
-@if $back2top_enable {
-  .back-to-top {
-    font-size: $b2t-font-size;
-
-    @if not $back2top_scrollpercent {
-      span {
-        display: none;
-      }
-    }
-
-    @if $back2top_sidebar {
-      margin: 20px - $sidebar-offset -10px -20px;
-      opacity: 0;
-      transition: opacity $transition-ease;
-
-      &.back-to-top-on {
-        cursor: pointer;
-        opacity: $b2t-opacity;
-
-        &:hover {
-          opacity: $b2t-opacity-hover;
-        }
-      }
-    } @else {
-      bottom: $b2t-position-bottom;
-      box-sizing: border-box;
-      color: $b2t-color;
-      padding: 0 6px;
-      transition: bottom $transition-ease;
-      @include sidebar-toggle();
-
-      @if not $back2top_scrollpercent {
-        width: 24px;
-      }
-
-      &:hover {
-        color: $sidebar-highlight;
-      }
-
-      &.back-to-top-on {
-        bottom: $b2t-position-bottom-on;
-      }
-    }
-  }
-}

assets/css/_common/components/index.scss

@@ -12,9 +12,17 @@
   z-index: $zindex-5;
 }
 
-@import 'back-to-top';
+.hidden {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
+@import 'tool-buttons';
 @import 'reading-progress';
 
 @import 'post';
 @import 'pages';
-@import 'third-party';
+@import '3rd';

assets/css/_common/components/pages/categories.scss

@@ -15,14 +15,23 @@
     list-style: none;
     margin: 0;
     padding: 0;
-  }
 
-  .category-list-item {
-    margin: 5px 10px;
+    .category-list-item:before {
+      font-family: var(--fa-style-family,"Font Awesome 6 Free");
+      font-weight: var(--fa-style,900);
+      content: "\f07c";
+      margin-right: 5px;
+    }
+  
+    .category-list-item {
+      margin: 5px 10px;
+      font-weight: bold;
+    }
   }
 
   .category-list-count {
     color: $grey;
+    padding: 0 2px;
 
     &::before {
       content: ' (';
@@ -33,7 +42,19 @@
     }
   }
 
-  .category-list-child {
-    padding-left: 10px;
+  .category-children-list {
+    padding-left: 38px;
+    list-style: none;
+
+    .category-children-list-item:before {
+      font-family: var(--fa-style-family,"Font Awesome 6 Free");
+      font-weight: var(--fa-style,900);
+      content: "\f0ae";
+      margin-right: 5px;
+    }
+
+    .category-children-list-item {
+      font-size: 0.925em;
+    }
   }
 }

assets/css/_common/components/pages/flinks.scss

@@ -1,6 +1,6 @@
 .flinks-block {
 
-  .flinks-block-title {
+  .flinks-header {
     text-align: center;
     font-weight: bold;
   }

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;
     }
   }
@@ -42,6 +42,34 @@
   }
 }
 
+@if $toc_number {
+.autonumber {
+  h2 {
+    counter-reset: h3;
+    &:before{
+      counter-increment: h2; 
+      content: counter(h2) ". ";
+    }
+  }
+
+  h3 {
+    counter-reset: h4;
+    &:before{
+      counter-increment: h3; 
+      content: counter(h2) ". " counter(h3) ". ";
+    }
+  }
+
+  h4 {
+    counter-reset: h5;
+    &:before{
+      counter-increment: h4; 
+      content: counter(h2) "." counter(h3) "." counter(h4) ". ";
+    }
+  }
+}
+} 
+
 @import 'post-collapse';
 @import 'post-body';
 @import 'post-gallery';

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);
+}

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';
 }

assets/css/_common/components/post/post-footer.scss

@@ -59,6 +59,10 @@
       @include post-card();
       border: none;
       background: none;
+
+      li {
+        word-break: break-all;
+      }
     }
   }
 
@@ -87,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;
+    }
+  }
+}
+

assets/css/_common/components/post/post-header.scss

@@ -114,8 +114,7 @@
   height: 0;
 }
 
-@if $busuanzi_post_views {
-  #busuanzi_container_page_pv {
-    display: inline-block;
-  }
+#comments-count {
+  cursor: pointer;
+  border-bottom: 1px solid $link-decoration-color;
 }

assets/css/_common/components/third-party/math.scss

@@ -1,9 +0,0 @@
-@if $math_mathjax_enable {
-  mjx-container[jax='CHTML'][display='true'], .has-jax {
-    overflow: auto hidden;
-  }
-
-  mjx-container[display='true'] + br {
-    display: none;
-  }
-}

assets/css/_common/components/third-party/waline.scss

@@ -1,5 +0,0 @@
-@if $waline_enable {
-  .wl-actions>button:nth-child(3) {
-    display: none
-  }
-}

assets/css/_common/components/tool-buttons.scss

@@ -0,0 +1,91 @@
+.tool-buttons {
+
+  @include sidebar-toggle();
+  background: none;
+  bottom: 58px;
+  filter: alpha(opacity=0);
+  font-size: $font-size-smaller;
+  @include mobile() {
+    font-size: $font-size-smallest;
+  }
+
+  .button {
+    display: block;
+    margin-bottom: 5px;
+    width: 36px;
+    height: 36px;
+    border-radius: 5px;
+    background-color: $tool-btn-bg;
+    color: $tool-btn-color;
+    text-align: center;
+    line-height: 35px;
+    padding: 0;
+    outline: 0;
+    border: none;
+    text-transform: none;
+    cursor: pointer;
+    opacity: $tool-btn-opacity;
+    touch-action: manipulation;
+
+    @include mobile() {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      border-radius: 3px;
+    }
+
+    &:hover {
+      color: $tool-btn-hover-fore-color;
+      opacity: $tool-btn-opacity-hover;
+    }
+  }
+
+  .goto-comments {
+    display: none;
+  }
+}
+
+@if $back2top_enable {
+  .back-to-top {
+
+    @if not $back2top_scrollpercent {
+      span {
+        display: none;
+      }
+    }
+
+    @if $back2top_sidebar {
+      margin: 20px -$sidebar-offset -10px -20px;
+      opacity: 0;
+      transition: opacity $transition-ease;
+
+      &.back-to-top-on {
+        cursor: pointer;
+        opacity: $b2t-opacity;
+
+        &:hover {
+          opacity: $b2t-opacity-hover;
+        }
+      }
+    } @else {
+      bottom: $b2t-position-bottom;
+      box-sizing: border-box;
+      color: $b2t-color;
+      padding: 0 6px;
+      transition: bottom $transition-ease;
+      @include sidebar-toggle();
+
+      @if not $back2top_scrollpercent {
+        width: 24px;
+      }
+
+      &:hover {
+        color: $sidebar-highlight;
+      }
+
+      &.back-to-top-on {
+        bottom: $b2t-position-bottom-on;
+      }
+    }
+  }
+}

assets/css/_common/outline/footer/index.scss

@@ -29,6 +29,152 @@
     font-size: $font-size-smallest;
   }
 
+  .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 {
+      font-size: $font-size-larger;
+      margin: auto 0;
+      line-height: normal;
+    }
+  } */
+
   @if $footer_vendors_enable {
     .vendors-list {
       a {
@@ -37,6 +183,18 @@
 
       img {
         display: inline-block;
+        max-width: 48px;
+        min-width: 14px;
+        max-height: 16px;
+
+        @include mobile() {
+          max-width: 40px;
+        }
+        
+        // Only work for svg image
+        &[src$=".svg"] {
+          filter: var(--highlight-img-fill);
+        }
       }
       
       $footer_vendors_imgs_len: length($footer_vendors_imgs_width);
@@ -97,16 +255,3 @@
     vertical-align: middle;
   }
 }
-
-.busuanzi-count {
-  @if $busuanzi_visitors {
-    #busuanzi_container_site_uv {
-      display: none;
-    }
-  }
-  @if $busuanzi_views {
-    #busuanzi_container_site_pv {
-      display: none;
-    }
-  }
-}

assets/css/_common/outline/header/menu.scss

@@ -1,12 +1,26 @@
 // Menu
 // --------------------------------------------------
-.menu {
+.menu, .menu-children {
   margin: 0;
   padding: 1em 0;
   text-align: center;
 }
 
-.menu-item {
+.menu-children {
+  max-height: 0;
+  padding: 0; 
+  overflow: hidden;
+  transition: max-height 1.5s ease-out;
+}
+
+ .menu-children {
+  &.expand {
+    max-height: 400px; 
+    transition: max-height 1.5s ease-in;
+  }
+}
+
+.menu-item, .menu-child-item {
   display: inline-block;
   list-style: none;
   margin: 0 10px;
@@ -33,6 +47,8 @@
 
   .fa, .fab, .far, .fas {
     margin-right: 8px;
+    width: 16px;
+    text-align: center;
   }
 
   .badge {
@@ -49,6 +65,15 @@
       margin-left: 0;
     }
   }
+
+  .menu-item-shrink-icon {
+    float: right;
+  }
+}
+
+.menu-child-item {
+  display: block;
+  margin: 0;
 }
 
 .use-motion .menu-item {

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;
     }

assets/css/_common/outline/sidebar/index.scss

@@ -1,4 +1,4 @@
-.sidebar-inner {
+.sidebar-inner, .sidebar-card-widget {
   color: $grey-dark;
   // Init Sidebar & TOC inner dimensions on all pages and for all schemes.
   $offset : if(($scheme == 'Pisces') or ($scheme == 'Gemini'), $sidebar-offset, $sidebar-padding);
@@ -27,6 +27,8 @@
 
   img {
     display: inline-block;
+    max-width: 120px;
+    max-height: 42px;
   }
 }
 
@@ -39,3 +41,4 @@
 @import 'sidebar-toggle';
 @import 'sidebar-toc';
 @import 'site-state';
+@import 'sidebar-card-widget';

assets/css/_common/outline/sidebar/sidebar-author.scss

@@ -1,6 +1,7 @@
 .site-author-image {
   border: $site-author-image-border-width solid $site-author-image-border-color;
-  max-width: $site-author-image-width;
+  width: $site-author-image-width;
+  height: $site-author-image-width;
   padding: 2px;
 
   @if $avatar_rounded {

assets/css/_common/outline/sidebar/sidebar-card-widget.scss

@@ -0,0 +1,60 @@
+.sidebar-card-widget {
+  background: var(--content-bg-color);
+  @if ($scheme == 'Pisces') or ($scheme == 'Gemini'){
+    border-radius: $border-radius;
+    box-shadow: $box-shadow;
+  }
+  box-sizing: border-box;
+  color: var(--text-color);
+  margin-top: $sidebar-offset;
+
+  .item-headline {
+    text-align: left;
+    font-size: $font-size-small;
+    font-weight: bold;
+
+    span {
+      margin-left: 8px;
+    }
+  }
+
+  .siteinfo {
+    font-size: $font-size-small;
+    text-align: left;
+
+    .siteinfo-item {
+      display: flex;
+      -webkit-box-align: center;
+      align-items: center;
+      padding: 2px 10px 0;
+
+      i {
+        width: 16px;
+        height: 16px;
+        text-align: center;
+        margin-right: 4px;
+      }
+
+
+      div:first-child {
+        -webkit-box-flex: 1;
+        -moz-box-flex: 1;
+        -o-box-flex: 1;
+        box-flex: 1;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        padding-right: 20px;
+      }
+    }
+  }
+}
+
+.back-to-top-card {
+  margin: 0;
+  padding: 0;
+
+  div:first-child {
+    margin: 0;
+  }
+}

assets/css/_common/outline/sidebar/sidebar-nav.scss

@@ -22,6 +22,7 @@
 
     &:hover {
       color: $sidebar-nav-hover-color;
+      border-bottom-color: $sidebar-highlight;
     }
   }
 }
@@ -29,6 +30,7 @@
 .sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview {
   border-bottom-color: $sidebar-highlight;
   color: $sidebar-highlight;
+  font-weight: bold;
 
   &:hover {
     color: $sidebar-highlight;

assets/css/_common/outline/sidebar/sidebar-toc.scss

@@ -1,61 +1,102 @@
-@if $toc_enable {
-  .post-toc {
-    font-size: $font-size-small;
-    padding: 0 8px;
+.post-toc {
+  font-size: $font-size-small;
+  padding: 0 8px;
 
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0 2px 5px 10px;
-      text-align: left;
+  .active-current {
+    color: $orange;
+  }
 
-      > li {
-        padding-left: 0;
-      }
+  ul {
 
-      a {
-        transition: all $transition-ease;
-      }
-    }
+    list-style: none;
+    margin: 0;
+    padding: 0 2px 5px 10px;
+    text-align: left;
+    counter-reset: item;
 
-    .nav-item {
-      line-height: 1.8;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    >li {
 
-      @if not $toc_wrap {
-        white-space: nowrap;
-      }
-    }
 
-    .nav {
-      .nav-child {
-        display: if($toc_expand_all, block, none);
-      }
+      > ul {
+        border-left: 1px solid;
+        margin-left: 4px;
 
-      .active > .nav-child {
-        display: block;
-      }
+        li {
+          position: relative;
+          padding-left: 0;
           
-      .active-current > .nav-child {
-        display: block;
-
-        > .nav-item {
-          display: block;
+          &:before {
+            position: absolute;
+            content: ' ';
+            top: 0.14em;
+            left: -0.75em;
+            width: 0.65em;
+            height: 0.815em;
+            border-style: none none dashed none;
+            border-width: 0.05em;
+          }          
         }
       }
 
-      .active > a {
-        border-bottom-color: $sidebar-highlight;
-        color: $sidebar-highlight;
+
+    }
+
+
+
+    a {
+      transition: all $transition-ease;
+      border: none;
+      @if $toc_number {
+        &:before {
+          content: counters(item, ".") ". ";
+          counter-increment: item;
+        }
       }
 
-      .active-current > a {
-        color: $sidebar-highlight;
+      &:hover {
+        text-decoration: underline;
+        color: $orange;
+      }
+    }
+  }
 
-        &:hover {
-          color: $sidebar-highlight;
-        }
+  .nav-item {
+    line-height: 1.8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @if not $toc_wrap {
+      white-space: nowrap;
+    }
+  }
+
+  .nav {
+    .nav-child {
+      display: if($toc_expand_all, block, none);
+    }
+
+    .active>.nav-child {
+      display: block;
+    }
+
+    .active-current>.nav-child {
+      display: block;
+
+      >.nav-item {
+        display: block;
+      }
+    }
+
+    .active>a {
+      border-bottom-color: $sidebar-highlight;
+      color: $sidebar-highlight;
+    }
+
+    .active-current>a {
+      color: $sidebar-highlight;
+
+      &:hover {
+        color: $sidebar-highlight;
       }
     }
   }

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 {

assets/css/_common/scaffolding/highlight/copy-code.scss

@@ -3,85 +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;
-  }
+    &: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 {
+    .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;
       
-  .highlight:hover .copy-btn, pre:hover .copy-btn {
-    opacity: 1;
-  }
+      &::before {
+        content: "\f102";
+      }
 
-  .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);
+      &.collapse::before {
+        content: "\f103";
+      }
+    }
 
-    @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;
+    @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;
-    }
+    .code-header {
     
-    &::before {
-      background: #fc625d;
-      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
-      margin-top: -20px;
-      margin-left: 10px;
-      position: absolute;
-      @include round-icon(12px);
+      &::before {
+        background: #fc625d;
+        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+        margin-left: 10px;
+        @include round-icon(12px);
+      }
     } 
   }
+  
 }

assets/css/_common/scaffolding/highlight/index.scss

@@ -1,4 +1,5 @@
 @import 'copy-code';
+@import 'monokai';
 
 %code-inline {
   background: var(--highlight-background);

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 {  }

assets/css/_common/scaffolding/normalize.scss

@@ -17,6 +17,7 @@ html {
  */
 body {
   margin: 0;
+  counter-reset: h2;
 }
 
 /**

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;
+  }
+}

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'

assets/css/_common/scaffolding/tags/mermaid.scss

@@ -1,6 +0,0 @@
-@if $mermaid_enable {
-  .mermaid {
-    margin-bottom: 20px;
-    text-align: center;
-  }
-}

assets/css/_mixins.scss

@@ -1,6 +1,6 @@
 @mixin mobile-smallest() {
   @media (max-width: 413px) {
-    @content;;
+    @content;
   }
 }
 
@@ -99,7 +99,7 @@
   @if $icon {
     content: $icon;
   }
-  font-family: 'Font Awesome 5 Free';
+  font-family: 'Font Awesome 6 Free';
   font-weight: 900;
 }
 

assets/css/_schemes/Gemini/index.scss

@@ -70,7 +70,7 @@
     border-bottom: 1px solid $body-bg-color;
   }
 
-  h3 {
+  h3, h4 {
     border-bottom: 1px dotted $body-bg-color;
   }
 }

assets/css/_schemes/Mist/_menu.scss

@@ -34,6 +34,10 @@
       }
     }
 
+    // a + ul {
+    //   top: calc(30% + 5px); 
+    // }
+
     .badge {
       background: white;
       border-radius: 10px;
@@ -41,5 +45,24 @@
       padding: 1px 4px;
       text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
     }
+
+    .menu-item-shrink-icon {
+      margin-left: 5px;
+    }
+  }
+}
+
+.menu-children {
+  display: none;
+  transition: transform 1s ease-in-out;
+  transform: translateY(-100%);
+  // position: absolute;
+  // z-index: 999;
+
+  &.expand {
+    display: block;
+    max-height: 400px; 
+    transition: transform 1.5s ease-in;
+    transform: translateY(-100%);
   }
 }

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
 // --------------------------------------------------
@@ -283,13 +341,20 @@ $site-state-item-name-color           : inherit;
 
 // Components
 // --------------------------------------------------
+// Tool buttons
+$tool-btn-bg               : $black-deep;
+$tool-btn-color            : white;
+$tool-btn-hover-fore-color : $orange;
+$tool-btn-opacity          : .8;
+$tool-btn-opacity-hover    : 1;
+
 // Back to top
 $b2t-opacity                  : .8;
 $b2t-opacity-hover            : 1;
 $b2t-position-bottom          : -100px;
 $b2t-position-bottom-on       : 19px;
 $b2t-position-right           : 30px;
-$b2t-position-right-mobile    : 20px;
+$b2t-position-right-mobile    : 16px;
 $b2t-font-size                : 12px;
 $b2t-color                    : white;
 $b2t-bg-color                 : $black-deep;

assets/css/gemini/style.css

@@ -1,176 +0,0 @@
-/** User-defined style. **/
-{{ $P := .Site.Params -}}
-
-{{- with $P.sidebar -}}
-{{- $width := (int (math.Max .width 240)) -}}
-{{- $offset := (int (math.Max .offset 12)) -}}
-{{- $padding := (int (math.Max .padding 18)) -}}
-{{- $positPad := (add $width $offset) }}
-.main {
-{{ if eq .position "right" }}
-  flex-direction: row-reverse;
-{{- end }}
-}
-.header-inner {
-  width: {{ $width }}px;
-}
-.main-inner {
-  width: calc(100% - {{ $positPad }}px);
-}
-.sidebar {
-  width: {{ $width }}px;
-  visibility: inherit;
-}
-.sidebar-inner {
-  padding: {{ $padding }}px 10px;
-}
-.footer-inner {
-  padding-{{ .position }}: {{ $positPad }}px;
-}
-{{- end }}
-
-.site-author-image {
-{{- if $P.avatar.rounded }}
-  border-radius:50%;
-{{- end }}
-{{- if $P.avatar.rotated }}
-  transition: transform 1s ease-out;
-{{- end }}
-}
-
-.site-author-image:hover {
-  transform: rotateZ(360deg);
-}
-
-.site-state-item {
-  border-left: 1px solid #eee;
-}
-.site-state-item:first-child {
-  border-left: none;
-}
-
-.rss-link {
-  border-top: 1px dotted #ccc;
-  border-bottom: 1px dotted #ccc;
-  text-align: center;
-  margin: 10px 0 0 0;
-}
-
-.rss-link a {
-  display: block;
-  color: #fc6423;
-  border-bottom: none;
-}
-
-.rss-link a:hover {
-  animation-name: wobble-vertical;
-  animation-duration: 2s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: 1;
-}
-
-.rss-link a:hover > i {
-  -webkit-transform: scaleY(-1);
-  transform: scaleY(-1);
-}
-
-.links-of-social a {
-  font-size: 0.8125em;
-}
-.links-of-social .fa,
-.links-of-social .fab,
-.links-of-social .far,
-.links-of-social .fas {
-  margin-right: 2px;
-}
-.links-of-social {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.links-of-social-item {
-  margin: 5px 0 0;
-{{- if and $P.socialIcons.enable (not $P.socialIcons.iconsOnly) }}
-  width: 50%;
-{{- end }}
-}
-.links-of-social-item a {
-  box-sizing: border-box;
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  padding: 0 5px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.links-of-social-item a {
-  border-bottom: 0;
-  border-radius: 4px;
-  display: block;
-}
-.links-of-social-item a:hover {
-  background: var(--body-bg-color);
-}
-
-.cc-license {
-{{ if eq $P.creativeCommons.size "big" }}
-  margin-top: 10px;
-{{ else }}
-  margin-top: 5px;
-{{- end }}
-}
-
-.back-to-top {
-  bottom: 30px;
-}
-
-.posts-expand .post-meta-container {
-  margin: 10px auto;
-}
-
-.post-meta-item-icon {
-  margin: 0 0 0 -5px;
-}
-
-:not(.post-meta-break) + .post-meta-item::before {
-    content: '|';
-    margin: 0 0.3em;
-}
-
-.post-meta-catg:not(:last-child)::after {
-  content: ';';
-  margin: 0px;
-}
-
-.posts-expand .post-header {
-  margin: 0;
-}
-
-.posts-expand .post-body {
-  margin: 28px 0;
-}
-
-.post-footer-btn {
-  text-align: center;
-}
-
-.beian img {
-  display: inline-block;
-  margin: 0 3px;
-  vertical-align: middle;
-}
-
-.with-love {
-{{- with $P.footer.icon.color }}
-  color: {{ $P.footer.icon.color  }};
-{{- end }}
-{{- if $P.footer.icon.animated }}
-  animation: icon-animate 1.33s ease-in-out infinite;
-{{- end }}
-}
-
-/* Font Awesome */
-.fa-spin {
-  -webkit-animation: fa-spin .8s infinite linear;
-  animation: fa-spin .8s infinite linear;
-} 

assets/css/main.scss

@@ -1,13 +1,12 @@
 // CSS Style Guide          : https://codeguide.co/#css
 // All variables from site's config content.
-{{- $P := .Site.Params }}
+{{ $P := .Site.Params }}
 // Base
 $scheme                     : {{ $P.scheme }};
 $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 }};
@@ -33,11 +32,6 @@ $footer_vendors_enable      : {{ isset $P.footer "vendors" }};
 {{ printf "$footer_vendors_imgs_width:%s;" (delimit (after 1 $width) ", ") }}
 {{ end }}
 
-// Counter
-$busuanzi_visitors          : {{ $P.busuanzi.visitors }};
-$busuanzi_views             : {{ $P.busuanzi.views }};
-$busuanzi_post_views        : {{ $P.busuanzi.postViews }};
-
 // Font
 $font_enable                : {{ $P.font.enable }};
 $font_global_size           : {{ default $P.font.global.size 1 }};
@@ -70,11 +64,12 @@ $back2top_sidebar           : {{ $P.backTop.sidebar }};
 $avatar_rotated             : {{ $P.avatar.rotated }};
 $avatar_rounded             : {{ $P.avatar.rounded }};
 $avatar_rounded             : {{ $P.avatar.rounded }};
-$site_state                 : {{ $P.siteState }};
+$site_state                 : {{ $P.siteState.basic }};
 $social_icons_only          : {{ $P.socialIcons.iconsOnly }};
 $social_icons_transition    : {{ $P.socialIcons.transition }};
 $links_settings_layout      : {{ $P.linksSets.layout }};
 $toc_enable                 : {{ $P.toc.enable }};
+$toc_number                 : {{ $P.toc.number }};
 $toc_expand_all             : {{ $P.toc.expandAll }};
 $toc_wrap                   : {{ $P.toc.wrap }};
 
@@ -89,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 }};
@@ -112,7 +110,6 @@ $reading_progress_position  : {{ $P.readingProgress.position }};
 $reading_progress_reversed  : {{ $P.readingProgress.reversed }};
 
 // Thirdparty
-$math_mathjax_enable        : {{ $P.math.mathjax.enable }};
 // TODO
 //$related_posts_enable       : {{ $P.relatedPosts.enable }};
 $related_posts_enable       : false;
@@ -134,18 +131,18 @@ $disqusjs_enable            : false;
 $livere_enable              : {{ isset $P "livere" }};
 $utterances_enable          : {{ isset $P "utterances" }};
 $waline_enable              : {{ isset $P "waline" }};
-{{- with .Site.Params.comments }}
-{{- $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }}
+{{ with .Site.Params.comments }}
+{{ $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }}
 $two_comments_enable        : {{ $tce }};
-{{- if $tce }}
-{{- $sortNav  := sort .nav "weight" }}
+{{ if $tce }}
+{{ $sortNav  := sort .nav "weight" }}
 $two_comments_actived       : {{ .active }};
 $first_comment_color        : {{ (index $sortNav 0).color }};
 $first_comment_name         : {{ lower (index $sortNav 0).name }};
 $second_comment_color       : {{ (index $sortNav 1).color }};
 $second_comment_name        : {{ lower (index $sortNav 1).name }};
-{{- end }}
-{{- end }}
+{{ end }}
+{{ end }}
 
 // 
 // Variables Layer
@@ -181,8 +178,3 @@ $second_comment_name        : {{ lower (index $sortNav 1).name }};
 // Schemes Layer
 // --------------------------------------------------
 {{ printf "@import '_schemes/%s/';" $P.scheme }}
-
-// Custom Layer
-// TODO 
-// --------------------------------------------------
-// @import 'theme.injects.style';

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;
 }

assets/js/3rd/comments/artalk.js

@@ -1,13 +1,9 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+/* Artalk comment plugin */
+NexT.plugins.comments.artalk = function() {
   const element = '.artalk-container';
-  if (!NexT.CONFIG.page.comments 
-    || !NexT.CONFIG.artalk
+  if (!NexT.CONFIG.artalk
     || !NexT.utils.checkDOMExist(element)) return; 
 
-  const artalk_css = NexT.utils.getCDNResource(NexT.CONFIG.artalk.css);
-  NexT.utils.getStyle(artalk_css, null);
-
   const artalk_js = NexT.utils.getCDNResource(NexT.CONFIG.artalk.js);
   const {
     site,
@@ -15,10 +11,10 @@ document.addEventListener('DOMContentLoaded', () => {
     server,
   } = NexT.CONFIG.artalk.cfg;
 
-  NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(artalk_js, {
-    }))
-    .then(() => {
+  NexT.utils.lazyLoadComponent(element, function() {
+    NexT.utils.getScript(artalk_js, function(){
+      const artalk_css = NexT.utils.getCDNResource(NexT.CONFIG.artalk.css);
+      NexT.utils.getStyle(artalk_css);
 
       new Artalk({
         el          : element,
@@ -30,7 +26,8 @@ document.addEventListener('DOMContentLoaded', () => {
         placeholder : placeholder,
         darkMode    : 'auto'
       });      
+    });
 
-      NexT.utils.hiddeLodingCmp(element);
+    NexT.utils.hiddeLodingCmp(element);
   });
-});
+}

assets/js/3rd/comments/giscus.js

@@ -1,5 +1,5 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+/* Giscus comment plugin */
+NexT.plugins.comments.giscus = function() {
   const element = '.giscus-container';
   if (!NexT.CONFIG.page.comments 
     || !NexT.CONFIG.giscus
@@ -17,8 +17,8 @@ document.addEventListener('DOMContentLoaded', () => {
     theme } = NexT.CONFIG.giscus.cfg;
 
 
-  NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(NexT.CONFIG.giscus.js, {
+  NexT.utils.lazyLoadComponent(element, function() {
+    NexT.utils.getScript(NexT.CONFIG.giscus.js, {
       attributes: {
         'async'                  : true,
         'crossorigin'            : 'anonymous',
@@ -35,7 +35,8 @@ document.addEventListener('DOMContentLoaded', () => {
         'data-loading'           : 'lazy'
       },
       parentNode: document.querySelector(element)
-    }));
+    });   
     
     NexT.utils.hiddeLodingCmp(element);
-});
+  });      
+}

assets/js/3rd/comments/livere.js

@@ -1,11 +1,10 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+/* LiveRe comment plugin */
+NexT.plugins.comments.livere = function() {
   const element = '#lv-container';
-  if (!NexT.CONFIG.page.comments 
-    || !NexT.CONFIG.livere
+  if (!NexT.CONFIG.livere
     || !NexT.utils.checkDOMExist(element)) return; 
 
-  NexT.utils.loadComments(element).then(() => {
+  NexT.utils.lazyLoadComponent(element, function() {
     NexT.utils.getScript(NexT.CONFIG.livere.js, {
       attributes: {
         async: true
@@ -15,4 +14,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
     NexT.utils.hiddeLodingCmp(element);
   });
-});
+}

assets/js/3rd/comments/utterances.js

@@ -1,8 +1,7 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+/* Utterances comment plugin */
+NexT.plugins.comments.utterances = function() {
   const element = '.utterances-container';
-  if (!NexT.CONFIG.page.comments 
-    || !NexT.CONFIG.utterances
+  if (!NexT.CONFIG.utterances
     || !NexT.utils.checkDOMExist(element)) return;
 
   const { 
@@ -11,17 +10,19 @@ document.addEventListener('DOMContentLoaded', () => {
     label, 
     theme } = NexT.CONFIG.utterances.cfg;
 
-  NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(NexT.CONFIG.utterances.js, {
+  NexT.utils.lazyLoadComponent(element, function() {
+    NexT.utils.getScript(NexT.CONFIG.utterances.js, {
       attributes: {
         'async'       : true,
         'crossorigin' : 'anonymous',
         'repo'        : repo,
         'issue-term'  : issueterm,
+        'label'       : label,
         'theme'       : theme
       },
       parentNode: document.querySelector(element)
-    }));
+    });
 
     NexT.utils.hiddeLodingCmp(element);
-});
+  }); 
+}

assets/js/3rd/comments/waline.js

@@ -0,0 +1,53 @@
+/* Waline comment plugin */
+NexT.plugins.comments.waline = function() {
+  const element = '.waline-container';
+  if (!NexT.CONFIG.waline
+    || !NexT.utils.checkDOMExist(element)) return; 
+  
+  const {
+    emoji, 
+    imguploader, 
+    placeholder, 
+    sofa,
+    requiredmeta, 
+    serverurl, 
+    wordlimit,
+    reaction,
+    reactiontext,
+    reactiontitle
+  } = NexT.CONFIG.waline.cfg;
+
+  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline.js);
+
+  let locale = {
+    placeholder   : placeholder,
+    sofa          : sofa,
+    reactionTitle : reactiontitle
+  };
+
+  reactiontext.forEach(function(value, index){
+    locale['reaction'+index] = value;
+  });
+
+  NexT.utils.lazyLoadComponent(element, function () {    
+    NexT.utils.getScript(waline_js, function(){
+      const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
+      NexT.utils.getStyle(waline_css, 'before');
+
+      Waline.init({
+        locale,
+        el            : element,
+        emoji         : emoji,
+        imageUploader : imguploader,
+        wordLimit     : wordlimit,
+        requiredMeta  : requiredmeta,
+        reaction      : reaction,
+        serverURL     : serverurl,
+        lang          : NexT.CONFIG.lang,
+        dark          : 'html[data-theme="dark"]'
+      });
+
+      NexT.utils.hiddeLodingCmp(element);
+    })
+  });
+}

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 });
+  });
+}

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');
+    });
+  }); 
+}

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;
+    }
+  }
+}

assets/js/3rd/others/lawidget.js

@@ -0,0 +1,22 @@
+/* 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);
+  
+  NexT.utils.lazyLoadComponent(element, function () {    
+    NexT.utils.getScript(lawt_js,{
+      attributes: {
+        id: 'LA-DATA-WIDGET',
+        crossorigin: 'anonymous',
+        charset: 'UTF-8',
+        defer: true
+      },
+      parentNode: document.getElementById('la-siteinfo-widget')
+    }, NexT.utils.fmtLaWidget());
+  });
+}

assets/js/3rd/others/math.js

@@ -0,0 +1,49 @@
+/* Math render plugin */
+NexT.plugins.others.math = function() {
+  const render = NexT.CONFIG.page.math.render;
+  
+  if (render === 'mathjax') {
+    const render_js = NexT.utils.getCDNResource(NexT.CONFIG.page.math.js);
+    const mathjaxCfg = `
+      window.MathJax = {
+        // 自定义内联数学公式的分隔符号
+        tex: {
+          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') {
+    const render_css = NexT.utils.getCDNResource(NexT.CONFIG.page.math.css);
+    NexT.utils.getStyle(render_css);
+    const render_js_list = NexT.CONFIG.page.math.js;    
+    render_js_list.forEach(js => {
+      const js_loader = NexT.utils.getScript(NexT.utils.getCDNResource(js));
+      if(js.name === 'auto-render') {
+        js_loader.then(function(){
+          renderMathInElement(document.body, {
+            delimiters: [
+                {left: '$$', right: '$$', display: true},
+                {left: '$', right: '$', display: false},
+                {left: '\\(', right: '\\)', display: false},
+                {left: '\\[', right: '\\]', display: true}
+            ],
+            
+            throwOnError : false
+          })
+        });
+      }
+    });
+  }
+}

assets/js/3rd/others/mermaid.js

@@ -0,0 +1,15 @@
+/* Mermaid plugin */
+NexT.plugins.others.mermaid = function() {
+  const mermaid_js = NexT.utils.getCDNResource(NexT.CONFIG.page.mermaid.js);
+
+  NexT.utils.getScript(mermaid_js, function(){
+    mermaid.initialize({
+      sequence: { 
+        showSequenceNumbers: true,
+        actorMargin: 50, 
+        diagramMarginX:10, 
+        diagramMarginY:10
+      }
+    });
+  });
+}

assets/js/3rd/search/algolia.js

@@ -1,12 +1,11 @@
-/* global instantsearch, algoliasearch, CONFIG, pjax */
+/* Algolia search engine */
+NexT.plugins.search.algolia = function() {
 
-document.addEventListener('DOMContentLoaded', () => {
-
-  const algoiajs = NexT.utils.getCDNResource(NexT.CONFIG.algolia.js);
+  const algoliajs = NexT.utils.getCDNResource(NexT.CONFIG.algolia.js);
   const instantschjs = NexT.utils.getCDNResource(NexT.CONFIG.algolia.instantjs);
 
-  NexT.utils.getScript(algoiajs, {});
-  NexT.utils.getScript(instantschjs, {}).then(() => {
+  NexT.utils.getScript(algoliajs);
+  NexT.utils.getScript(instantschjs, function() {
     
     const { indexname, appid, apikey, hits } = NexT.CONFIG.algolia.cfg;
     const indexName = indexname;
@@ -56,7 +55,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const stats = NexT.CONFIG.i18n.hits_time
               .replace('${hits}', data.nbHits)
               .replace('${time}', data.processingTimeMS);
-            return `<span>${stats}</span><img src="/imgs/algolia-logo.svg" alt="Algolia">`;
+            return `${stats}`;
           }
         },
         cssClasses: {
@@ -138,7 +137,6 @@ document.addEventListener('DOMContentLoaded', () => {
         onPopupClose();
       }
     });
-  });;
+  });
 
-
-});
+}

assets/js/3rd/search/local.js

@@ -1,4 +1,4 @@
-/* global CONFIG, pjax, LocalSearch */
+/* LocalSearch engine */
 class LocalSearch {
   constructor({
     path = '',
@@ -227,7 +227,7 @@ class LocalSearch {
   }
 }
 
-document.addEventListener('DOMContentLoaded', () => {
+NexT.plugins.search.localsearch = function() {
   if (! NexT.CONFIG.localSearch.path) {
     // Search DB path
     console.warn('`search indexes file` is not configurate!');
@@ -323,4 +323,4 @@ document.addEventListener('DOMContentLoaded', () => {
       onPopupClose();
     }
   });
-});
+}

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); });
+  });
+}

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);
+  });
+}

assets/js/config.js

@@ -1,4 +1,52 @@
-if (!window.NexT) window.NexT = {};
+/* global NexT, boot, CONFIG */
+window.NexT = {};
+NexT.boot = {};
+NexT.plugins = {};
+
+// Defined comment component & add register event
+NexT.plugins.comments = {};
+NexT.plugins.comments.register = function() {
+  if (!NexT.CONFIG.page.comments) return;
+  for(var c in NexT.plugins.comments) { 
+    if (c === 'register') continue;
+    eval('NexT.plugins.comments.'+c)();
+  };
+}
+
+// Defined search engine & add register event
+NexT.plugins.search = {}
+NexT.plugins.search.register = function() {
+  for(var s in NexT.plugins.search) { 
+    if (s === 'register') continue;
+    eval('NexT.plugins.search.'+s)();
+  };
+}
+
+// Defined share plugin & add register event
+NexT.plugins.share = {}
+NexT.plugins.share.register = function() {
+  for(var s in NexT.plugins.share) { 
+    if (s === 'register') continue;
+    eval('NexT.plugins.share.'+s)();
+  };
+}
+
+// Defined other plugin & add register event
+NexT.plugins.others = {}
+NexT.plugins.others.register = function() {
+  for(var o in NexT.plugins.others) { 
+    if (o === 'register') continue;
+    eval('NexT.plugins.others.'+o)();
+  };
+}
+
+// Add event to register all third party plugins
+NexT.plugins.register = function() {
+  for(var p in NexT.plugins) {
+    if (p === 'register') continue;
+    eval('NexT.plugins.'+p+'.register')();
+  }
+};
 
 (function() {
   const className = 'next-config';

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;
   },

assets/js/next-boot.js

@@ -1,11 +1,37 @@
-/* global NexT, CONFIG */
+/* boot starup */
 
-NexT.boot = {};
+(function () {
+  const onPageLoaded = () => document.dispatchEvent(
+    new Event('page:loaded', {
+      bubbles: true
+    })
+  );
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('readystatechange', onPageLoaded, { once: true });
+  } else {
+    onPageLoaded();
+  }
+  document.addEventListener('pjax:success', onPageLoaded);
+})();
 
 NexT.boot.registerEvents = function() {
 
+  NexT.utils.registerMenuClick();
+  NexT.utils.registerImageLoadEvent();
   NexT.utils.registerScrollPercent();
   // NexT.utils.registerCanIUseTag();
+  NexT.utils.registerToolButtons();
+  // Register comment's components
+  NexT.plugins.register();
+
+  // Register comment counter click event
+  const commentCnt = document.querySelector('#comments-count');
+  if (commentCnt && NexT.CONFIG.page.isPage) {
+    commentCnt.addEventListener('click',  event => {
+      NexT.utils.slidScrollBarAnime('comments');
+    });
+  }
 
   // Mobile top menu bar.
   document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {
@@ -33,17 +59,27 @@ NexT.boot.registerEvents = function() {
 
 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.replacePostCRLink();
-  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', 'show');
   } else {
-    NexT.utils.hideCommontes();
+    NexT.utils.domAddClass('#goto-comments', 'hidden');
   }
 
   //TODO

assets/js/third-party/comments/waline.js

@@ -1,48 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-
-  const element = '.waline-container';
-  if (!NexT.CONFIG.page.comments 
-    || !NexT.CONFIG.waline
-    || !NexT.utils.checkDOMExist(element)) return; 
-  
-  const {
-    emoji, 
-    imguploader, 
-    pageview, 
-    placeholder, 
-    requiredmeta, 
-    serverurl, 
-    wordlimit
-  } = NexT.CONFIG.waline.cfg;
-
-
-  const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
-  NexT.utils.getStyle(waline_css, null);
-
-  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline.js);
-
-  const locale = {
-    placeholder: placeholder
-  };
-
-  NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(waline_js, {
-    }))
-    .then(() => {
-
-      Waline.init({
-        locale,
-        el            : element,
-        pageview      : pageview,
-        emoji         : emoji,
-        imageUploader : imguploader,
-        wordLimit     : wordlimit,
-        requiredMeta  : requiredmeta,
-        serverURL     : serverurl,
-        lang          : NexT.CONFIG.lang,
-        dark          : "auto"
-      });
-
-      NexT.utils.hiddeLodingCmp(element);
-  });
-});

assets/js/third-party/share/addthis.js

@@ -1,16 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-
-  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.loadComments(element).then(() => {
-    NexT.utils.getScript(addthis_js, {
-      attributes: {
-        async: true
-      },
-      parentNode: document.querySelector(element)
-    });
-  });
-});

assets/js/utils.js

@@ -1,91 +1,362 @@
-/* global NexT, CONFIG */
+/* util tools */
 
-HTMLElement.prototype.wrap = function(wrapper) {
+HTMLElement.prototype.wrap = function (wrapper) {
   this.parentNode.insertBefore(wrapper, this);
   this.parentNode.removeChild(this);
   wrapper.appendChild(this);
 };
 
-(function() {
-  const onPageLoaded = () => document.dispatchEvent(
-    new Event('page:loaded', {
-      bubbles: true
-    })
-  );
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('readystatechange', onPageLoaded, { once: true });
-  } else {
-    onPageLoaded();
-  }
-  document.addEventListener('pjax:success', onPageLoaded);
-})();
-
 NexT.utils = {
+  registerAPlayer: function () {
+    this.getStyle(
+      NexT.utils.getCDNResource(NexT.CONFIG.page.music.css)
+    );
     
-  checkDOMExist: function(selector) {
+    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) {
+      const icon = item.querySelector('span > i');
+      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';
+        } else {
+          icon.className = 'fa fa-angle-right';
+        }
+      });
+
+      var cCls = ul.querySelectorAll('.menu-item-active');
+      if (cCls != null && cCls.length > 0) {
+        item.click();
+      }
+    });
+  },
+  registerImageLoadEvent: function () {
+    const images = document.querySelectorAll('.sidebar img, .post-block img, .vendors-list img');
+
+    const callback = (entries) => {
+      entries.forEach(item => {
+        if (item.intersectionRatio > 0) {
+          let ele = item.target;
+          let imgSrc = ele.getAttribute('data-src');
+          if (imgSrc) {
+            let img = new Image();
+            img.addEventListener('load', function () {
+              ele.src = imgSrc;
+            }, false);
+            ele.src = imgSrc;
+            // Prevent load image again
+            ele.removeAttribute('data-src');
+          }
+        }
+      })
+    };
+
+    const observer = new IntersectionObserver(callback);
+    images.forEach(img => {
+      observer.observe(img);
+    });
+  },
+
+  registerImageViewer: function () {
+    const post_body = document.querySelector('.post-body');
+    if (post_body) {
+      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;
+      if (targetId != '') {
+        targetId = targetId.substring(5);
+      }
+      button.addEventListener('click', () => {
+        this.slidScrollBarAnime(targetId);
+      });
+    });
+
+    buttons.querySelector('div#toggle-theme').addEventListener('click', () => {
+      const cur_theme = document.documentElement.getAttribute('data-theme');
+      window.theme.toggle(cur_theme === 'dark' ? 'light' : 'dark');
+    });
+  },
+
+  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
+    });
+  },
+
+  domAddClass: function (selector, cls) {
+    const doms = document.querySelectorAll(selector);
+    if (doms) {
+      doms.forEach(dom => {
+        dom.classList.add(cls);
+      });
+    }
+  },
+
+  fmtSiteInfo: function () {
+    const runtimeCount = document.getElementById('runTimes');
+    if (runtimeCount) {
+      const publishDate = runtimeCount.getAttribute('data-publishDate');
+      const runTimes = this.diffDate(publishDate, 2);
+      runtimeCount.innerText = runTimes;
+    }
+
+    const wordsCount = document.getElementById('wordsCount');
+    if (wordsCount) {
+      const words = wordsCount.getAttribute('data-count');
+      wordsCount.innerText = this.numberFormat(words);
+    }
+
+    const readTimes = document.getElementById('readTimes');
+    if (readTimes) {
+      const times = readTimes.getAttribute('data-times');
+
+      const hour = 60;
+      const day = hour * 24;
+
+      const daysCount = parseInt(times / day);
+      const hoursCount = parseInt(times / hour);
+
+      let timesLabel;
+      if (daysCount >= 1) {
+        timesLabel = daysCount + NexT.CONFIG.i18n.ds_days + parseInt((times - daysCount * day) / hour) + NexT.CONFIG.i18n.ds_hours;
+      } else if (hoursCount >= 1) {
+        timesLabel = hoursCount + NexT.CONFIG.i18n.ds_hours + (times - hoursCount * hour) + NexT.CONFIG.i18n.ds_mins;
+      } else {
+        timesLabel = times + NexT.CONFIG.i18n.ds_mins;
+      }
+
+      readTimes.innerText = timesLabel;
+    }
+
+    const lastPushDate = document.getElementById('last-push-date');
+    if (lastPushDate) {
+      const pushDateVal = this.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1);
+      lastPushDate.innerText = pushDateVal;
+    }
+  },
+
+  fmtLaWidget: function () {
+    setTimeout(function () {
+      const laWidget = document.querySelectorAll('#la-siteinfo-widget span');
+      if (laWidget.length > 0) {
+        const valIds = [0, 2, 4, 6];
+        const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv']
+        for (let i in valIds) {
+          let pv = NexT.utils.numberFormat(laWidget[valIds[i]].innerText);
+          document.getElementById(domIds[i]).innerText = pv;
+        }
+      }
+    }, 800);
+  },
+
+  fmtBusuanzi: function () {
+    setTimeout(function () {
+      const bszUV = document.getElementById('busuanzi_value_site_uv');
+      if (bszUV) {
+        bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
+      }
+      const bszPV = document.getElementById('busuanzi_value_site_pv');
+      if (bszPV) {
+        bszPV.innerText = NexT.utils.numberFormat(bszPV.innerText);
+      }
+    }, 800);
+  },
+
+  numberFormat: function (number) {
+    let result;
+    if (number.indexOf(',') > 0) {
+      number = number.replaceAll(",", "");
+    }
+
+    if (number > 10000) {
+      result = (number / 10000.0).toFixed(2) + ' w';
+    } else if (number > 1000) {
+      result = (number / 1000.0).toFixed(2) + ' k';
+    } else {
+      result = number;
+    }
+    return result;
+  },
+
+  diffDate: function (date, mode = 0) {
+    const dateNow = new Date();
+    const datePost = new Date(date);
+    const dateDiff = dateNow.getTime() - datePost.getTime();
+    const minute = 1000 * 60;
+    const hour = minute * 60;
+    const day = hour * 24;
+    const month = day * 30;
+    const year = month * 12;
+
+    let result;
+    if (mode == 1) {
+      const monthCount = dateDiff / month;
+      const dayCount = dateDiff / day;
+      const hourCount = dateDiff / hour;
+      const minuteCount = dateDiff / minute;
+
+      if (monthCount > 12) {
+        result = datePost.toLocaleDateString().replace(/\//g, '-');
+      } else if (monthCount >= 1) {
+        result = parseInt(monthCount) + NexT.CONFIG.i18n.ds_month;
+      } else if (dayCount >= 1) {
+        result = parseInt(dayCount) + NexT.CONFIG.i18n.ds_day;
+      } else if (hourCount >= 1) {
+        result = parseInt(hourCount) + NexT.CONFIG.i18n.ds_hour;
+      } else if (minuteCount >= 1) {
+        result = parseInt(minuteCount) + NexT.CONFIG.i18n.ds_min;
+      } else {
+        result = NexT.CONFIG.i18n.ds_just;
+      }
+    } else if (mode == 2) {
+      const yearCount = parseInt(dateDiff / year);
+      if (yearCount >= 1) {
+        const dayCount = parseInt((dateDiff - (yearCount * year)) / day);
+        result = yearCount + NexT.CONFIG.i18n.ds_years + dayCount + NexT.CONFIG.i18n.ds_days;
+      } else {
+        const dayCount = parseInt(dateDiff / day);
+        result = dayCount + NexT.CONFIG.i18n.ds_days;
+      }
+    } else {
+      result = parseInt(dateDiff / day);
+    }
+
+    return result;
+  },
+
+  checkDOMExist: function (selector) {
     return document.querySelector(selector) != null;
   },
 
-  getCDNResource: function(res) {
-    let { plugins, router } = NexT.CONFIG.vendor;
-    let { name, version, file, alias } = res;
+  getCDNResource: function (res) {
+
+    let router = NexT.CONFIG.vendor.router;
+    let { name, version, file, alias, alias_name } = res;
 
-    let npm_name = name;
     let res_src = '';
-    switch(plugins) {
-      case 'cdnjs':
-        let cdnjs_name = alias || name;
-        let cdnjs_file = file.replace(/\.js$/, '.min.js').replace(/^(dist|lib|source\/js|)\/(browser\/|)/, '');
-        res_src = `${router}/${cdnjs_name}/${version}/${cdnjs_file}`
+
+    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) {
+          alias_file = alias_file.replace(/\.js$/, '.min.js');
+        }
+        res_src = `${router.url}/${name}/${version}/${alias_file}`;
         break;
       default:
-        res_src = `${router}/${npm_name}@${version}/${file}`
+        if (alias) name = alias;
+        res_src = `${router.url}/${name}@${version}/${file}`;
+        break;
     }
 
     return res_src;
   },
 
-  replacePostCRLink: function() {
-    if (NexT.CONFIG.hostname.startsWith('http')) return;
-    // Try to support mutli domain without base URL sets.
-    let href = window.location.href;
-    if (href.indexOf('#')>-1){
-      href = href.split('#')[0];
-    }
-    let postLink = document.getElementById('post-cr-link');
-    if (!postLink) return;
-    postLink.text = href;
-    postLink.href = href;
-  },
-
   /**
    * One-click copy code support.
    */
-  registerCopyCode: function() {
+  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>');
+      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;
+        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;
@@ -93,23 +364,25 @@ 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() {
+  wrapTableWithBox: function () {
     document.querySelectorAll('table').forEach(element => {
       const box = document.createElement('div');
       box.className = 'table-container';
@@ -117,7 +390,7 @@ NexT.utils = {
     });
   },
 
-  registerVideoIframe: function() {
+  registerVideoIframe: function () {
     document.querySelectorAll('iframe').forEach(element => {
       const supported = [
         'www.youtube.com',
@@ -139,7 +412,7 @@ NexT.utils = {
     });
   },
 
-  registerScrollPercent: function() {
+  registerScrollPercent: function () {
     const backToTop = document.querySelector('.back-to-top');
     const readingProgressBar = document.querySelector('.reading-progress-bar');
     // For init back to top in sidebar if page was scrolled after page refresh.
@@ -148,8 +421,10 @@ NexT.utils = {
         const contentHeight = document.body.scrollHeight - window.innerHeight;
         const scrollPercent = contentHeight > 0 ? Math.min(100 * window.scrollY / contentHeight, 100) : 0;
         if (backToTop) {
-          backToTop.classList.toggle('back-to-top-on', Math.round(scrollPercent) >= 5);
-          backToTop.querySelector('span').innerText = Math.round(scrollPercent) + '%';
+          const scrollPercentRound = Math.round(scrollPercent)
+          const isShow = scrollPercentRound >= 5;
+          backToTop.classList.toggle('back-to-top-on', isShow);
+          backToTop.querySelector('span').innerText = scrollPercentRound + '%';
         }
         if (readingProgressBar) {
           readingProgressBar.style.setProperty('--progress', scrollPercent.toFixed(2) + '%');
@@ -166,21 +441,12 @@ NexT.utils = {
       }
       this.activateNavByIndex(index);
     }, { passive: true });
-
-    backToTop && backToTop.addEventListener('click', () => {
-      window.anime({
-        targets  : document.scrollingElement,
-        duration : 500,
-        easing   : 'linear',
-        scrollTop: 0
-      });
-    });
   },
 
   /**
    * Tabs tag listener (without twitter bootstrap).
    */
-  registerTabsTag: function() {
+  registerTabsTag: function () {
     // Binding `nav-tabs` & `tab-content` by real time permalink changing.
     document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
       element.addEventListener('click', event => {
@@ -195,7 +461,7 @@ NexT.utils = {
         // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
         const tActive = document.getElementById(element.querySelector('a').getAttribute('href').replace('#', ''));
         [...tActive.parentNode.children].forEach(target => {
-        // Array.prototype.slice.call(tActive.parentNode.children).forEach(target => {
+          // Array.prototype.slice.call(tActive.parentNode.children).forEach(target => {
           target.classList.toggle('active', target === tActive);
         });
         // Trigger event
@@ -205,9 +471,9 @@ NexT.utils = {
         if (!NexT.CONFIG.stickytabs) return;
         const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
         window.anime({
-          targets  : document.scrollingElement,
-          duration : 500,
-          easing   : 'linear',
+          targets: document.scrollingElement,
+          duration: 500,
+          easing: 'linear',
           scrollTop: offset
         });
       });
@@ -216,7 +482,7 @@ NexT.utils = {
     window.dispatchEvent(new Event('tabs:register'));
   },
 
-  registerCanIUseTag: function() {
+  registerCanIUseTag: function () {
     // Get responsive height passed from iframe.
     window.addEventListener('message', ({ data }) => {
       if (typeof data === 'string' && data.includes('ciu_embed')) {
@@ -233,36 +499,78 @@ 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;
-      });
-    });
   },*/
 	
-  registerSidebarTOC: function() {
-    this.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => {
+  registerLangSelect: function() {
+    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');
+    if (!toc.hasChildNodes()) {
+      const tocActive = document.querySelector('.sidebar-inner');
+      tocActive.classList.remove('sidebar-nav-active', 'sidebar-toc-active');
+      tocActive.classList.add('sidebar-overview-active');
+    }
+    this.sections = [...document.querySelectorAll('.post-toc li a')].map(element => {
       const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
       // TOC item animation navigate.
       element.addEventListener('click', event => {
         event.preventDefault();
         const offset = target.getBoundingClientRect().top + window.scrollY;
         window.anime({
-          targets  : document.scrollingElement,
-          duration : 500,
-          easing   : 'linear',
+          targets: document.scrollingElement,
+          duration: 500,
+          easing: 'linear',
           scrollTop: offset,
-          complete : () => {
+          complete: () => {
             history.pushState(null, document.title, element.href);
           }
         });
@@ -271,7 +579,7 @@ NexT.utils = {
     });
   },
 
-  registerPostReward: function() {
+  registerPostReward: function () {
     const button = document.querySelector('.reward-container button');
     if (!button) return;
     button.addEventListener('click', () => {
@@ -279,22 +587,22 @@ NexT.utils = {
     });
   },
 
-  initCommontesDispaly: function(){   
+  initCommontesDispaly: function () {
     const comms = document.querySelectorAll('.comment-wrap > div');
-    if (comms.length<=1) return;
-    comms.forEach(function(item){
-      var dis = window.getComputedStyle(item, null).display;
+    if (comms.length <= 1) return;
+    comms.forEach(function (item) {
+      let dis = window.getComputedStyle(item, null).display;
       item.style.display = dis;
     });
   },
 
-  registerCommonSwitch: function() {
+  registerCommonSwitch: function () {
     const button = document.querySelector('.comment-switch .switch-btn');
     if (!button) return;
     const comms = document.querySelectorAll('.comment-wrap > div');
     button.addEventListener('click', () => {
       button.classList.toggle('move');
-      comms.forEach(function(item){        
+      comms.forEach(function (item) {
         if (item.style.display === 'none') {
           item.style.cssText = "display: block; animation: tabshow .8s";
         } else {
@@ -304,17 +612,13 @@ NexT.utils = {
     });
   },
 
-  hideCommontes:function() {
-    document.querySelector('.post-comments').style.display = 'none';
-  },
-
-  hiddeLodingCmp: function(selector) {
+  hiddeLodingCmp: function (selector) {
     const loadding = document.querySelector(selector).previousElementSibling;
     loadding.style.display = 'none';
   },
 
-  activateNavByIndex: function(index) {
-    const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
+  activateNavByIndex: function (index) {
+    const target = document.querySelectorAll('.post-toc li a')[index];
     if (!target || target.classList.contains('active-current')) return;
 
     document.querySelectorAll('.post-toc .active').forEach(element => {
@@ -330,14 +634,14 @@ NexT.utils = {
     const tocElement = document.querySelector('.sidebar-panel-container');
     if (!tocElement.parentNode.classList.contains('sidebar-toc-active')) return;
     window.anime({
-      targets  : tocElement,
-      duration : 200,
-      easing   : 'linear',
+      targets: tocElement,
+      duration: 200,
+      easing: 'linear',
       scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
     });
   },
 
-  updateSidebarPosition: function() {
+  updateSidebarPosition: function () {
     if (window.innerWidth < 992 || NexT.CONFIG.scheme === 'Pisces' || NexT.CONFIG.scheme === 'Gemini') return;
     // Expand sidebar on post detail page by default, when post has a toc.
     const hasTOC = document.querySelector('.post-toc');
@@ -351,7 +655,7 @@ NexT.utils = {
     }
   },
 
-  activateSidebarPanel: function(index) {
+  activateSidebarPanel: function (index) {
     const duration = 200;
     const sidebar = document.querySelector('.sidebar-inner');
     const panel = document.querySelector('.sidebar-panel-container');
@@ -361,41 +665,49 @@ NexT.utils = {
 
     window.anime({
       duration,
-      targets   : panel,
-      easing    : 'linear',
-      opacity   : 0,
+      targets: panel,
+      easing: 'linear',
+      opacity: 0,
       translateY: [0, -20],
-      complete  : () => {
+      complete: () => {
         // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
         sidebar.classList.replace(activeClassName[1 - index], activeClassName[index]);
         window.anime({
           duration,
-          targets   : panel,
-          easing    : 'linear',
-          opacity   : [0, 1],
+          targets: panel,
+          easing: 'linear',
+          opacity: [0, 1],
           translateY: [-20, 0]
         });
       }
     });
   },
 
-  getStyle: function(src, parent) {    
+  getStyle: function (src, position = 'after', parent) {
     const link = document.createElement('link');
     link.setAttribute('rel', 'stylesheet');
     link.setAttribute('type', 'text/css');
     link.setAttribute('href', src);
 
-    (parent || document.head).appendChild(link);
+    const head = (parent || document.head);
+    if (position === 'before') {
+      head.prepend(link);
+    } else {
+      head.append(link);
+    }
   },
 
-  getScript: function(src, options = {}, legacyCondition) {
+  getScript: function (src, options = {}, legacyCondition) {
     if (typeof options === 'function') {
       return this.getScript(src, {
         condition: legacyCondition
       }).then(options);
     }
+
     const {
       condition = false,
+      module = false,
+      textContent = undefined,
       attributes: {
         id = '',
         async = false,
@@ -415,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);
@@ -425,24 +739,27 @@ 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);
       }
     });
   },
 
-  loadComments: function(selector, legacyCallback) {
+  lazyLoadComponent: function (selector, legacyCallback) {
     if (legacyCallback) {
-      return this.loadComments(selector).then(legacyCallback);
+      return this.lazyLoadComponent(selector).then(legacyCallback);
     }
     return new Promise(resolve => {
       const element = document.querySelector(selector);

data/config.yaml

@@ -1,4 +1,5 @@
 # Hugo NexT theme's custom config
-# 
 
-version: 4.2.0
+version: 4.7.2
+
+domain: hugo-next.eu.org

data/resources.yaml

@@ -1,31 +1,81 @@
 # CDN 公共资源商列表
 # Public CDN vendor list
 vendors: 
-  cdnjs: "https://cdnjs.cloudflare.com/ajax/libs"
-  unpkg: "https://unpkg.com"
+  - name: cdnjs
+    home: "https://cdnjs.com"
+    logo: "https://cdnjs.com/_/f7a2ebfb819c118086546e481876aef6.svg"
+    type: "modern"
+    url: "https://cdnjs.cloudflare.com/ajax/libs"
+
+  - name: unpkg
+    home: "https://unpkg.com"
+    logo: "https://unpkg.fly.dev/_client/b870d5fb04d2854d.png"
+    type: "nodejs"
+    url: "https://unpkg.com"
+
+  - name: bootcdn
+    home: "https://www.bootcdn.cn"
+    logo: "https://www.bootcdn.cn/assets/img/logo.png"
+    type: "modern"
+    url: "https://cdn.bootcdn.net/ajax/libs"
+
+  - name: staticfile
+    home: "https://staticfile.net/"
+    logo: "https://www.staticfile.net/images/logo.png"
+    type: "modern"
+    url: "https://cdn.staticfile.net"
+
+  - name: 7ed
+    home: "https://www.7ed.net"
+    logo: "https://github.com/7ednet/homepage/raw/main/_images/logo.svg"
+    type: "modern"
+    url: "https://use.sevencdn.com/ajax/libs"
+
+  - name: zstatic
+    home: "https://www.zstatic.net"
+    logo: "https://www.zstatic.net/logo.png"
+    type: "modern"
+    url: "https://s4.zstatic.net/ajax/libs"
+
+  - name: zeyao
+    home: "https://cdn.jsdmirror.com/"
+    logo: "https://img.cuteapi.com/2023/08/29/Background.png"
+    type: "nodejs" 
+    url: "https://cdn.jsdmirror.com/npm"
+
+  - name: jsdelivr
+    home: "https://www.jsdelivr.com/"
+    logo: "https://www.jsdelivr.com/assets/0c183396fdb0079ea31849b02bc5e3429f1740de/img/jsdelivr-horizontal-regular.svg"
+    type: "nodejs"
+    url: "https://cdn.jsdelivr.net/npm"
 
 # JavaScript 资源
 # JavaScript Resources
 js:
   - name: animejs
-    version: 3.2.1
+    version: 3.2.2
     file: lib/anime.min.js
-  # TODO
-  #- name: mathjax
-  #  version: 3.2.0
-  #  file: es5/tex-mml-chtml.js
+
+  - name: viewerjs
+    version: 1.11.6
+    file: dist/viewer.min.js
 
 # CSS 资源
 # CSS Resources
 css:
-  - name: '@fortawesome/fontawesome-free'
-    version: 6.1.2
+  - name: font-awesome
+    version: 6.7.2
     file: css/all.min.css
-    alias: font-awesome
+    alias: '@fortawesome/fontawesome-free'
+
   - name: animate.css
     version: 3.1.1
     file: animate.min.css
 
+  - name: viewerjs
+    version: 1.11.6
+    file: dist/viewer.min.css
+
 # 第三方服务组件资源
 # 3rd servcies Resource
 
@@ -33,35 +83,58 @@ css:
 # Site analytics engine
 analytics:
   la: https://sdk.51.la/js-sdk-pro.min.js
+  laWidget: https://v6-widget.51.la/v6/laId/quote.js?theme=0&col=true&f=12&display=0,0,0,1,0,1,1,1
+  baidu: https://hm.baidu.com/hm.js?
+  google: https://www.googletagmanager.com/gtag/js?id=
+  busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
 
 # 文章分享
 # 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
 waline:
   js:
-    name: '@waline/client'
-    version: 2.6.1
+    name: waline
+    version: 2.15.8
     file: dist/waline.js
-    alias: waline
+    alias: "@waline/client"
+
   css:
-    name: '@waline/client'
-    version: 2.6.1
+    name: waline
+    version: 2.15.8
     file: dist/waline.css
-    alias: waline
+    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
-    version: 2.3.4
-    file: dist/Artalk.js
+    version: 2.6.4
+    file: dist/Artalk.min.js
+
   css:
     name: artalk
-    version: 2.3.4
-    file: dist/Artalk.css
+    version: 2.6.4
+    file: dist/Artalk.min.css
 
 giscus:
   js: https://giscus.app/client.js
@@ -72,13 +145,97 @@ utterances:
 livere:
   js: https://cdn-city.livere.com/js/embed.dist.js
 
+
 # 全文搜索
 # Full text search
 algolia:
   name: algoliasearch
-  version: 4.13.0
+  version: 4.24.0
   file: dist/algoliasearch-lite.umd.js
+
 instant:
   name: instantsearch.js
-  version: 4.40.5
+  version: 4.73.2
   file: dist/instantsearch.production.min.js
+
+plugins:
+  # 数学公式渲染
+  mathjax:
+    js:
+      name: mathjax
+      version: 3.2.2
+      file: es5/tex-mml-svg.js
+
+  katex:
+    js:
+      - name: katex
+        alias_name: KaTeX
+        version: 0.16.15
+        file: dist/katex.min.js
+        
+      - name: auto-render
+        alias: katex
+        alias_name: KaTeX
+        version: 0.16.15
+        file: dist/contrib/auto-render.min.js
+
+    css:
+      name: katex
+      alias_name: KaTeX
+      version: 0.16.15
+      file: dist/katex.min.css
+
+  # 画图渲染
+  mermaid:
+    js:
+      name: mermaid
+      version: 10.9.1
+      file: dist/mermaid.min.js
+  # 文章访问/评论统计
+  waline:
+    js:
+      - name: pageview
+        alias_name: waline
+        version: 2.15.8
+        file: dist/pageview.js
+        alias: "@waline/client" 
+
+      - name: comment
+        alias_name: waline
+        version: 2.15.8
+        file: dist/comment.js
+        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

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" >}}

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:
 
+> [!INFO]
 > 同时国内用户也可加入 QQ 群交流： 604710815
+
+{{< music url="/music/sky.mp3" name="天空之城" artist="宫崎骏" cover="/music/gongqijun.jpg" autoplay="true" >}}

exampleSite/content/archives/_index.en-us.md

@@ -0,0 +1,3 @@
+---
+date: 2025-01-25T20:46:25+08:00
+---

exampleSite/content/flinks.md

@@ -1,16 +0,0 @@
----
-title: "站点示例"
-type: flinks
-url: flinks.html
----
-
-如想要交换友情链接，请在评论区留下你的站点信息，格式参考如下：
-
-{{< note success no-icon >}}
-
- **名称：** NexT 主题 <br/>
- **说明：** 保持简单的易用性和强大的功能。 <br/>
- **站标：** https://hugo-next.eu.org/imgs/hugo_next_avatar.png <br/>
- **网址：** https://hugo-next.eu.org <br/>
-
-{{< /note >}}

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
+```

exampleSite/content/flinks/index.md

@@ -0,0 +1,14 @@
+---
+title: "站点示例"
+type: flinks
+url: flinks.html
+---
+
+如想交换本站友情链接，请在评论区留下你的站点信息，格式参考如下：
+
+```yaml
+- name: Hugo-NexT
+  desc: Hugo NexT 官方预览网站。
+  avatar: https://hugo-next.eu.org/imgs/hugo_next_avatar.png
+  link: https://hugo-next.eu.org
+```

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!

exampleSite/content/post/01-hello-world/index.md

@@ -6,12 +6,14 @@ lastmod: 2022-06-03T16:43:23+08:00
 date: 2022-06-02T11:52:03+08:00
 
 categories:
- - 博客
-tags:
- - Hugo
- - 开始
+- 开始建站
 
-url: post/hello-world.html
+tags:
+  - Hugo
+  - 开始
+
+url: demo/hello-world.html
+toc: true
 weight: 2
 ---
 

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.

exampleSite/content/post/02-external-link/index.md

@@ -7,17 +7,14 @@ date: 2022-06-01T15:59:41+08:00
 lastmod: 2022-06-01T15:59:41+08:00
 
 categories:
- - 示例
+ - 示例文章
 tags:
  - Hugo
  - NexT
 
 expand: true
 extlink: https://gitee.com/hugo-next/hugo-theme-next/
-#comment:
-# enable: false
-#toc: false
-#url: "external-link.html"
+
 weight: 1
 ---
 
@@ -25,11 +22,11 @@ weight: 1
 
 
 
-# 用户指南
+## 用户指南
 
 设置 NexT 主题很容易。只需遵循文档，就可快速创建您的个人网站！
 
-# 反馈
+## 反馈
 
 - 访问 Awesome NexT 列表，与其他用户分享插件和教程。
 - 加入我们的 Gitter 聊天。

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

exampleSite/content/post/03-markdown-syntax/index.md

@@ -7,17 +7,19 @@ lastmod: 2022-06-03T11:52:18+08:00
 publishDate: 2022-06-03T11:52:18+08:00
 
 author: Mainroad
-originLink: https://mainroad-demo.netlify.app/post/basic-elements/
+originLink: https://mainroad-demo.netlify.app/demo/basic-elements/
 
 categories:
- - 示例
+ - 示例文章
+ - Markdown语法
+ 
 tags:
  - Markdown
  - 语法
 
 toc: false
 draft: false
-url: post/markdown-syntax.html
+url: demo/markdown-syntax.html
 ---
 
 仅以此篇文章来测试下在 `NexT` 主题中在通过 `Hugo` 引擎来建站时，是否支持 `Markdown` 文件内容中所写的各种语法，并展示下实际的效果。
@@ -38,7 +40,7 @@ url: post/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 语法
@@ -46,14 +48,14 @@ url: post/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 格式
 
@@ -111,7 +113,7 @@ url: post/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>
@@ -165,6 +167,8 @@ url: post/markdown-syntax.html
 
 ## Code
 
+使用 Markdown 语法书写代码块：
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -178,7 +182,9 @@ url: post/markdown-syntax.html
 </html>
 ```
 
-{{< highlight html >}}
+使用Hugo自带的 `highlight` 短语标注代码块：
+
+{{< highlight html "hl_lines=2 5-7, linenostart=44" >}}
 <!DOCTYPE html>
 <html lang="en">
 <head>

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` |  |  |

exampleSite/content/post/04-emoji-support/index.md

@@ -7,13 +7,16 @@ date: 2022-06-04T19:46:45+08:00
 lastmod: 2022-06-04T19:46:45+08:00
 
 categories:
- - 示例
+ - 示例文章
+ - 语法
+
 tags:
  - 表情
- - emoji
+ - Emoji
 
-toc: false
-url: "post/emoji-support.html"
+toc: true
+
+url: "demo/emoji-support.html"
 ---
 
 Emoji 可以通过多种方式在 Hugo 项目中启用。
@@ -25,7 +28,7 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 
 <!--more-->
 
-它们以**冒号**开头和结尾，并且包含 emoji 的 **代码**：
+它们以**冒号**开头和结尾，并且包含 emoji 的 **简短代码**：
 
 ```markdown
 去露营啦! {:}tent: 很快就回来.
@@ -35,9 +38,8 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 
 呈现的输出效果如下:
 
-去露营啦! :tent: 很快就回来。
-
-真开心! :joy:
+> 去露营啦! :tent: 很快就回来。<br/>
+> 真开心! :joy:
 
 以下**符号清单**是 emoji 代码的非常有用的参考。
 
@@ -53,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` |  |  |
 
 ### 爱意表情
 
@@ -69,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: | |
 
 
 ### 国家和地区旗帜
@@ -199,4 +201,4 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 | :samoa: | `samoa` | :kosovo: | `kosovo` |
 | :yemen: | `yemen` | :mayotte: | `mayotte` |
 | :south_africa: | `south_africa` | :zambia: | `zambia` |
-| :zimbabwe: | `zimbabwe` | | |
+| :zimbabwe: | `zimbabwe` |  |  |

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.

exampleSite/content/post/05-table-of-content/index.md

@@ -7,14 +7,14 @@ date: 2022-06-08T21:12:52+08:00
 lastmod: 2022-06-08T21:12:52+08:00
 
 categories:
- - 示例
+ - 示例文章
 tags:
   - 目录
   - 导航
   - 博客
 
 toc: true
-url: post/table-of-content.html
+url: demo/table-of-content.html
 ---
 
 巴顿将军说过：“衡量一个人是否成功，不是看他站到顶峰，而是从顶峰跌落之后的反弹力”，褚时健的人生便是如此，中年发家致富，名利双收，之后又跌落到谷底，等到74岁再创业，10年后带着褚橙归来，东山再起收获亿万财富，他的发展轨迹就是反弹的过程。
@@ -23,38 +23,48 @@ url: post/table-of-content.html
 
 ![禇老](https://wfqqreader-1252317822.image.myqcloud.com/cover/568/814568/t6_814568.jpg)
 
-# 早年的故事
+## 早年的故事
 
-## 起始
+### 起始
 
 2014年的春天，在云南省华宁县和宜良县的交界处，一座名叫矣则的小山村里，一处已经有上百年历史的古旧四合院宅子被拆掉。村委会正带领村民们进行“美丽乡村”的建设，一年以后，旧有村居将再也看不到，代之而起的是钢筋混凝土的新式民居。就像10年、20年前中国大小城市的改造一样，这个群山围绕的小村子也开始陷入“工地模式”。
 
-### 童年浪花
+#### 童年浪花
 
 在江河边长大的孩子几乎都有一个当仁不让的特长：善水。褚时健也不例外，他不仅从小就在南盘江和花鱼塘里扑腾出了上佳的游泳技术，五六岁已经可以一个猛子扎出老远，而且从七八岁就可以在南盘江和河滩上的鱼塘里捉鱼了。
 
-## 少年故事
+### 少年故事
 
 褚时健在乡村自由自在生活的十多年，其实正是中国社会风雨飘摇的十多年。特别是1937年卢沟桥事变后，日本人发动全面侵华战争，短短两三年间，中国的大部分国土相继沦陷
 
-# 激情的青春十年
+## 激情的青春十年
 
-## 当上了游击队员
+### 当上了游击队员
 
 1948年夏天，褚时健回乡，在禄丰车站小学做了一名老师，同时也和褚时仁、褚时杰一起继续保持与共产党组织的联系，做一些传递情报的工作
 
-### 战火纷飞
+#### 战火纷飞
 
 因为战斗力相较悬殊，所以游击队只能是靠打一枪换一个地方的办法，专找敌人薄弱的地方攻击，但更多时候，都是在防御和转移阵地。
 
-# 生活的断层
+### 迎来解放
 
-## 跌入生活底层
+1949年12月，国民党云南省主席卢汉在昆明宣布起义，云南正式拉开解放的序幕。1950年2月20日，陈赓、宋任穷、周保中率解放军第二野战军第四兵团进入昆明，24日，陈赓宣布云南全境解放。
+
+## 生活的断层
+
+### 跌入生活底层
 
 “反右”运动中被打倒的人在“右派”身份确定后，只有一条路可走：下放到农场。农场名副其实，就是干农活儿的地方，必须过和农民一样的生活。
 
-# 尾声
+## 尾声
 
-## 岁月像一条河
+### 岁月像一条河
 
 2015年，是褚时健和马静芬结婚60周年，被称为“钻石婚”的纪念年份。这简直是一份人生的奖赏,在中国离婚率愈益升高的当下，60年的婚姻，几乎就像一个前世之梦。一个甲子的相伴相随，褚时健和马静芬共同经历了国家和个人的各种风浪，共同面对过生死。他们两人已经不仅是夫妻，更是一对战友。尽管马静芬偶尔会对褚时健年轻时候的粗心抱怨上两句，但说到最后，她会说一句：“没有我就没有他，没有他也就没有我。”
+
+## 作者致谢
+
+这本书从2014年初夏开始采访，到今天完稿，历时18个月。封面上“作者”只能是我一个人的名字，但也只有我自己知道，这本书，包含了太多人的心力和体力。我当然首先要致谢王石先生，没有他就没有这本书。我自己细想下来，没有王石先生一直的鞭策和鼓励，也没有我写作工作的今天。从2006年我开始从事专业写作工作以来，他给我创造了很多写作的机会，并且不吝自己诸多人生和学习的体会和感悟，一一传递予我。知遇之恩，感谢非常。
+
+最后，我当然要把最大的感谢致予褚时健先生。不仅是因为他慷慨、坦率面对我的各种提问，更重要的是，在倾听他的故事的过程里，他繁盛的人生经历，他的强大生命力，他对生活、对事业的一片赤子之心，也丰富了我对自己人生的思考。

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)

exampleSite/content/post/06-image-viewer/index.md

@@ -0,0 +1,40 @@
+---
+title: "图像浏览工具 "
+description: "默认会对文章内的图片， 进行图片浏览，点击图片可以查看大图，点击空白处可以关闭。"
+keywords: "image,图像,浏览器,相册"
+
+date: 2024-07-21T10:28:12+08:00
+lastmod: 2024-07-21T10:28:12+08:00
+
+categories:
+  - 示例文章
+
+tags:
+  - 图像
+  - 相册
+  - 浏览
+
+url: "/demo/image-viewer.html"
+toc: false
+expired: true
+---
+
+本主题自带图像浏览器功能，支持对文章区域内出现的图片进行浏览，点击图片可以查看大图，点击空白处可以关闭。不需要配置任何参数，只要在文章里面相应的位置添加图片信息即可 。
+
+<!--more-->
+
+图像浏览器引用了 [fengyuanchen](https://fengyuanchen.github.io/) 开发的 [viewerjs](https://fengyuanchen.github.io/viewerjs/)，支持显示图像名称，尺寸，旋转，缩放，播放等功能。可点击如下的示例图像查看体验：
+
+## 动物
+
+![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](/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)