🔀 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,30 +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 layouts folder
-!exampleSite/layouts
-
-# Exclude special files in static folder
-!exampleSite/static
-
-# Exclude special files
-!exampleSite/config.yaml
-!exampleSite/startup.sh
-
-data/*
-!data/config.yaml
-!data/resources.yaml
 
 # vscode
 .vscode/

README.md

@@ -1,7 +1,7 @@
 [中文](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,7 +10,9 @@
 
 > 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)
+
+![Screenshot](images/screenshot.png)
 
 ## 🎨 4 Scheme
 
@@ -21,10 +23,10 @@
 
 ## 👀 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.
@@ -33,12 +35,23 @@
 
 Before use `Hugo NexT` theme, please make sure installed `Git` & `Hugo Extened` software in your PC.
 
+### 📦 Install Hugo
 
-###  📰 Use Template
+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
+$ 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](https://imgs.lisenhui.cn/hugo-next/use-hugo-next-starter.png)
+![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.
 
@@ -47,16 +60,26 @@ After do that click the green button which name call `Create repository from tem
 If you had a blog site, then use `submodule` to lead into the theme, see below commands:
 
 ```shell
-$ cd hugo-next-exmaple
+$ cd hugo-next-example
 $ git submodule add https://github.com/hugo-next/hugo-theme-next.git themes/hugo-theme-next
-$ cp themes/hugo-theme-next/exampleSite/config.yaml .
+$ cp themes/hugo-theme-next/exampleSite/hugo.yaml .
-$ mv config.toml config.toml.backup
+$ 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-exmaple
+$ cd hugo-next-example
 $ hugo server
 ```
 
@@ -70,10 +93,17 @@ Done that input adrress http://127.0.0.1:1313/ on browser will see the effect &
 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
 ```
 
+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:
@@ -81,12 +111,12 @@ There had ready a new post template for you,  It is recommended to use the follo
 ```sh
 $ hugo new posts/hello-world.md
 ```
+
 > **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
 ---
 title: "{{ replace .Name "-" " " | title }}"
@@ -158,6 +188,10 @@ Hope could submmit your site information in this file [flinks.yaml](https://gith
 
 All features development progress and new request in [Hugo NexT V4 Roadmap](https://github.com/hugo-next/hugo-theme-next/issues/9), welcome to join us and compelete it together.
 
+[![Contributors](https://contrib.rocks/image?repo=hugo-next/hugo-theme-next)](https://github.com/hugo-next/hugo-theme-next/graphs/contributors)
+
+[![HugoNexT Stars](https://starchart.cc/hugo-next/hugo-theme-next.svg?variant=adaptive)](https://github.com/hugo-next/hugo-theme-next/stargazers)
+
 ## 📜 License
 
 [MIT License](LICENSE)
@@ -170,13 +204,16 @@ That's my hobby to develop `Hugo NexT` theme, thanks all people who gived the do
 
 List of Donors(Order desc by Date):
 
-| Donation time | Donors | Donation mode | Donation content | Message |
+| Donation time | Donors | Donation mode | Donation content | Message                                                                    |
-| :-------: | ------ | ------ | ---- | ---- |
+| :-----------: | ------ | ------------- | ---------------- | -------------------------------------------------------------------------- |
-| 2023.06.01 | **霖 | alipay | RMB 10.00 | / |
+|  2024.05.11  | *祥    | alipay        | RMB 66.66        | Thank you for creating such a great theme.                                 |
-| 2022.11.15 | f888 | xianyu | RMB 6.20 | Good luck. |
+|  2023.07.25  | *五    | alipay        | RMB 50.00        | I really like the 'Next' theme, thank you, let me buy you a cup of coffee. |
-| 2022.09.30 | *軒 | wechat pay | RMB 66.66 | Hope it could help more people. |
+|  2023.06.01  | **霖   | alipay        | RMB 10.00        | /                                                                          |
-| 2022.09.30 | N*l | wechat pay | RMB 20.00 | / |
+|  2022.11.15  | f888   | xianyu        | RMB 6.20         | Good luck.                                                                 |
-| 2022.07.09 | *风 | wechat pay | RMB 10.00 | / |
+|  2022.09.30  | *軒    | wechat pay    | RMB 66.66        | Hope it could help more people.                                            |
-| 2022.05.08 | *泉 | wechat pay | RMB 6.60 | Good luck with next develop. |
+|  2022.09.30  | N*l    | wechat pay    | RMB 20.00        | /                                                                          |
-| 2022.02.28 | *娇 | wechat pay | RMB 5.00 | / |
+|  2022.07.09  | *风    | wechat pay    | RMB 10.00        | /                                                                          |
-| 2021.12.21 | z*y | wechat pay | RMB 18.88 | / |
+|  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        | /                                                                          |
+

README.zh.md

@@ -1,7 +1,7 @@
 [中文](#) | [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://imgs.lisenhui.cn/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,7 +10,9 @@
 
 > 本主题的所有页面设计和配置项都与原来 `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)
+
+![截图](images/screenshot.png)
 
 ## 🎨 4 种页面模式
 
@@ -21,10 +23,10 @@
 
 ## 👀 在线预览
 
-| 环境 | :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) |
 
 > - 开发版本： 所有的新功能开发都会在此第一时间发布预览
 > - 正式版本： 只有测试稳定且符合要求的功能才会正式发布
@@ -33,11 +35,23 @@
 
 在使用 `Hugo NexT` 主题之前，请确认你的电脑上已经安装 `Git` 和 `Hugo Extened` 两款软件。
 
+### 📦 快速预览
+
+如想快速预览主题实际效果，可直接克隆当前主题的仓库代码，然后运行示例站点：
+
+```shell
+$ 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` 绿色按钮然后填写代码仓库的相关信息，参考如下：
 
-![使用模板创建](https://imgs.lisenhui.cn/hugo-next/use-hugo-next-starter.png)
+![使用模板创建](images/use-hugo-next-starter.png)
 
 最后点击 `Create repository from template` 绿色按钮，会直接在你的空间中生成站点代码，再把它克隆到本地进行创作。
 
@@ -46,16 +60,26 @@
 如果你已经有站点，可通过 `submodule` 模式引用本主题，参考如下命令：
 
 ```shell
-$ cd hugo-next-exmaple
+$ cd hugo-next-example
 $ git submodule add https://github.com/hugo-next/hugo-theme-next.git themes/hugo-theme-next
-$ cp themes/hugo-theme-next/exampleSite/config.yaml .
+$ cp themes/hugo-theme-next/exampleSite/hugo.yaml .
-$ mv config.toml config.toml.backup
+$ 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-exmaple
+$ cd hugo-next-example
 $ hugo server
 ```
 
@@ -69,10 +93,17 @@ $ hugo server
 后续更新主题只需要在你的站点目录中，执行如下命令：
 
 ```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) 镜像速度更快，也更稳定。
 
@@ -89,7 +120,6 @@ $ hugo new posts/hello-world.md
 
 关于文章头部那些参数作用的说明参考如下：
 
-
 ```yml
 ---
 # 文章标题
@@ -167,6 +197,10 @@ tags:
 
 关于本主题的开发进度和后续的发展路线图，可访问 [Hugo NexT V4 Roadmap](https://github.com/hugo-next/hugo-theme-next/issues/9) 查看详情，也欢迎大家参与一起来完善。
 
+[![Contributors](https://contrib.rocks/image?repo=hugo-next/hugo-theme-next)](https://github.com/hugo-next/hugo-theme-next/graphs/contributors)
+
+[![HugoNexT Stars](https://starchart.cc/hugo-next/hugo-theme-next.svg?variant=adaptive)](https://github.com/hugo-next/hugo-theme-next/stargazers)
+
 ## 📜 许可证
 
 [MIT License](LICENSE)
@@ -179,13 +213,16 @@ Copyright (c) 2022， hugo-next 团队
 
 以下是打赏名单列表（按时间倒序）：
 
-| 打赏时间 | 打赏者 | 打赏方式 | 打赏内容 | 留言 |
+|  打赏时间  | 打赏者 | 打赏方式 | 打赏内容 | 留言                             |
-| :-------: | ------ | ------ | ---- | ---- |
+| :--------: | ------ | -------- | -------- | -------------------------------- |
-| 2023.06.01 | **霖 | 支付宝 | ¥10.00 | / |
+| 2024.05.11 | *祥    | 支付宝   | ￥66.66  | 感谢创作这么好的主题             |
-| 2022.11.15 | f888 | 咸鱼 | ¥6.20 | 聊表心意 |
+| 2023.07.25 | *五    | 微信支付 | ￥50.00  | 很喜欢next主题，感谢，请你喝咖啡 |
-| 2022.09.30 | *軒 | 微信支付 | ¥66.66 | 愿项目造福更多人！ |
+| 2023.06.01 | **霖   | 支付宝   | ¥10.00  | /                                |
-| 2022.09.30 | N*l | 微信支付 | ¥20.00 | / |
+| 2022.11.15 | f888   | 咸鱼     | ¥6.20   | 聊表心意                         |
-| 2022.07.09 | *风 | 微信支付 | ¥10.00 | / |
+| 2022.09.30 | *軒    | 微信支付 | ¥66.66  | 愿项目造福更多人！               |
-| 2022.05.08 | *泉 | 微信支付 | ¥6.60 | 祝开发next顺利 |
+| 2022.09.30 | N*l    | 微信支付 | ¥20.00  | /                                |
-| 2022.02.28 | *娇 | 微信支付 | ¥5.00 | / |
+| 2022.07.09 | *风    | 微信支付 | ¥10.00  | /                                |
-| 2021.12.21 | z*y | 微信支付 | ¥18.88 | / |
+| 2022.05.08 | *泉    | 微信支付 | ¥6.60   | 祝开发next顺利                   |
+| 2022.02.28 | *娇    | 微信支付 | ¥5.00   | /                                |
+| 2021.12.21 | z*y    | 微信支付 | ¥18.88  | /                                |
+

VERSION

@@ -1 +1 @@
-4.5.2
+4.7.2

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,6 +30,8 @@
   --highlight-gutter-background: #{$highlight-gutter-background};
   --highlight-gutter-foreground: #{$highlight-gutter-foreground};
 
+  --highlight-img-fill: brightness(1) invert(0);
+
   color-scheme: light;
 }
 
@@ -34,6 +40,8 @@
   --content-bg-color: #{$content-bg-color-dark};
   --card-bg-color: #{$card-bg-color-dark};
   --text-color: #{$text-color-dark};
+  --selection-bg: #{$gainsboro};
+  --selection-color: #{$black-dim};
   --blockquote-color: #{$blockquote-color-dark};
   --link-color: #{$link-color-dark};
   --link-hover-color: #{$link-hover-color-dark};
@@ -44,6 +52,8 @@
   --menu-item-bg-color: #{$menu-item-bg-color-dark};
   --theme-color: #{$theme-color-dark};
 
+  --border-color: #{$border-color-dark};
+
   --btn-default-bg: #{$btn-default-bg-dark};
   --btn-default-color: #{$btn-default-color-dark};
   --btn-default-border-color: #{$btn-default-border-color-dark};
@@ -56,11 +66,14 @@
   --highlight-gutter-background: #{$highlight-gutter-background-dark};
   --highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
 
+  --highlight-img-fill: brightness(0) invert(1);
+
   color-scheme: dark;
 }
 
 img[data-theme="dark"] {
   opacity: .75;
+  filter: brightness(1) invert(0);
 
   &:hover {
     opacity: .9;

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

@@ -6,7 +6,6 @@
 @import 'gitter';
 @import 'livere';
 @import 'waline';
-@import 'mermaid';
 
 .use-motion .animated {
   // Fix issue #48 #55

assets/css/_common/components/index.scss

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

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

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

@@ -91,3 +91,21 @@
     }
   }
 }
+
+@if $post_share_enable {
+  .post-share-tools {
+    display: flex;
+    justify-content: center;
+
+    a {
+      border: 0px;
+    }
+  }
+
+  @if $post_sharethis_set {
+    .st-cmp-settings {
+      display: none;
+    }
+  }
+}
+

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

@@ -1,3 +0,0 @@
-.post-block .post-body .mermaid {
-  background: var(--highlight-foreground);
-}

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

@@ -43,10 +43,6 @@
   .goto-comments {
     display: none;
   }
-
-  .goto-comments-on {
-    display: block;
-  }
 }
 
 @if $back2top_enable {

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

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

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;
@@ -51,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/scaffolding/base.scss

@@ -1,6 +1,7 @@
 ::selection {
-  background: $selection-bg;
+  background: var(--selection-bg);
-  color: $selection-color;
+  color: var(--selection-color);
+
 }
 
 html, body {

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

@@ -3,86 +3,182 @@
 
   background: var(--highlight-background);
   margin-bottom: 26px;
+  line-height: 1.25;
 
-  //TODO  Need fixed the copy button show position.
+  > .code-header {
-  div:first-child {
+    color:#f8f8f2;
-    overflow-x: auto;
+    display: flex;
-  }
+    justify-content: space-between;
+    align-items: center;
+    padding: .25rem 0;
+    width: 100%;
 
-  pre {
+    &:hover {
-    position: relative;
+      cursor: pointer;
-    overflow-x: auto;
+    }
-  }
 
-  table tbody tr {
+    .code-lang {
-    //TODO Fixed the too long code line over
+      width: 100%;
-    // layout background color.
+      text-align: center;
-    background: #272822;    
+      font-weight: bold;
-  }
 
-  /* pre > code span {
+      &::after {
-    white-space: break-spaces;
+        content: "Code";
-    overflow: hidden;
+      }
-    word-break: break-all;
+    }
-    word-wrap: break-word;
-  } */
-}
 
-@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 {
+      &::before {
-    opacity: 1;
+        content: "\f102";
-  }
+      }
 
-  .copy-btn {
+      &.collapse::before {
-    color: $black-dim;
+        content: "\f103";
-    cursor: pointer;
+      }
-    line-height: 1.6;
+    }
-    opacity: 0;
-    padding: 2px 6px;
-    position: absolute;
-    right: 8px;
-    top: 4px;
-    transition: opacity $transition-ease;
-    background: var(--highlight-background);
 
-    @if $codeblock_style == 'flat' {
+    @each $type, $text in $code-type-list {
-      background: white;
+      &.#{$type} .code-lang::after {
-      border: 0;
+        content: $text;
-      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;
 
+    .ellipses-btn {
+      padding-right: .45rem;
     }
   }
-}
 
-@if $codeblock_style == 'mac' {
+  > .chroma {
-  .highlight {
+    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 {
+    .code-header {
-      border-radius: 0 0 5px 5px;
-    }
     
-    &::before {
+      &::before {
-      background: #fc625d;
+        background: #fc625d;
-      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
-      margin-top: -20px;
+        margin-left: 10px;
-      margin-left: 10px;
+        @include round-icon(12px);
-      position: absolute;
+      }
-      @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/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

@@ -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/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
 // --------------------------------------------------

assets/css/main.scss

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

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/waline.js

@@ -5,10 +5,8 @@ NexT.plugins.comments.waline = function() {
     || !NexT.utils.checkDOMExist(element)) return; 
   
   const {
-    comment,
     emoji, 
     imguploader, 
-    pageview, 
     placeholder, 
     sofa,
     requiredmeta, 
@@ -39,8 +37,6 @@ NexT.plugins.comments.waline = function() {
       Waline.init({
         locale,
         el            : element,
-        pageview      : pageview,
-        comment       : comment,
         emoji         : emoji,
         imageUploader : imguploader,
         wordLimit     : wordlimit,

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

@@ -1,5 +1,10 @@
 /* 51La sidebar data widget */
 NexT.plugins.others.lawidget = function() {
+
+  if (!NexT.CONFIG.lawidget ) {
+    return;
+  }
+
   const element = '#siteinfo-card-widget';
   const lawt_js = NexT.CONFIG.lawidget.js.replace('laId', NexT.CONFIG.lawidget.id);
   

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

@@ -4,13 +4,24 @@ NexT.plugins.others.math = function() {
   
   if (render === 'mathjax') {
     const render_js = NexT.utils.getCDNResource(NexT.CONFIG.page.math.js);
-    NexT.utils.getScript(render_js, function(){
+    const mathjaxCfg = `
       window.MathJax = {
+        // 自定义内联数学公式的分隔符号
         tex: {
-          inlineMath: [["$", "$"]],
+          inlineMath: [['$', '$'], ['\\(', '\\)']]
+        },
+        // SVG 渲染配置为全局共享字体缓存
+        svg: {
+          fontCache: 'global'
+        },
+        // 排除特定的HTML标签，避免过度渲染
+        options: {
+          skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "footer"],
         }
       };
-    });
+    `;
+    NexT.utils.getScript(null, { textContent: mathjaxCfg });
+    NexT.utils.getScript(render_js, { attributes: { id: "MathJax-script", "async": true }});
   }
 
   if (render === 'katex') {

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/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(postheader, '.post-header, .flinks-header');
-    animate(postbody, '.post-body');
+    animate(postbody, '.post-body, .flinks-body');
 
     return sequence;
   },

assets/js/next-boot.js

@@ -17,6 +17,7 @@
 
 NexT.boot.registerEvents = function() {
 
+  NexT.utils.registerMenuClick();
   NexT.utils.registerImageLoadEvent();
   NexT.utils.registerScrollPercent();
   // NexT.utils.registerCanIUseTag();
@@ -60,19 +61,26 @@ NexT.boot.refresh = function() {
 
   NexT.utils.fmtSiteInfo();
 
+  if (NexT.CONFIG.isMultiLang) {
+    NexT.utils.registerLangSelect();
+  }
+
   if (!NexT.CONFIG.page.isPage) return;
  
-  NexT.utils.registerSidebarTOC();
+  if (NexT.CONFIG.page.toc) NexT.utils.registerSidebarTOC();
-  NexT.utils.registerCopyCode();
+  if (NexT.CONFIG.page.expired) NexT.utils.calPostExpiredDate();
+  if (NexT.CONFIG.page.music) NexT.utils.registerAPlayer();
+
+  NexT.utils.registerImageViewer();
   NexT.utils.registerPostReward();
+
   if(NexT.CONFIG.page.comments) {    
     NexT.utils.initCommontesDispaly();
     NexT.utils.registerCommonSwitch();
-    NexT.utils.domAddClass('#goto-comments', 'goto-comments-on');
+    NexT.utils.domAddClass('#goto-comments', 'show');
   } else {
-    NexT.utils.hideComments();
+    NexT.utils.domAddClass('#goto-comments', 'hidden');
   }
-  NexT.utils.registerImageViewer();
 
   //TODO
    /**

assets/js/third-party/others/counter.js

@@ -1,31 +0,0 @@
-/* Page's view & comment counter plugin */
-NexT.plugins.others.counter = function() {
-    let pageview_js = undefined;
-    let comment_js = undefined;
-
-    const post_meta = NexT.CONFIG.postmeta;
-
-    const views = post_meta.views;
-    if(views != undefined && views.enable) {
-      if (views.plugin == 'waline') {
-        pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.js[0]);
-        NexT.utils.getScript(pageview_js, function(){
-          Waline.pageviewCount({
-            serverURL: NexT.CONFIG.waline.cfg.serverurl
-          });
-        });
-      }
-    }
-
-    const comments = post_meta.comments;
-    if (comments != undefined && comments.enable) {
-      if (comments.plugin == 'waline') {
-        comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.js[1]);
-        NexT.utils.getScript(comment_js, function(){
-          Waline.commentCount({
-            serverURL: NexT.CONFIG.waline.cfg.serverurl
-          });
-        });
-      }
-    }
-}

assets/js/third-party/others/translate.js

@@ -1,9 +0,0 @@
-/* Google translate plugin */
-NexT.plugins.others.translate = function() {
-  const element = '#gtranslate';
-  if (!NexT.utils.checkDOMExist(element)) return;
-  NexT.utils.lazyLoadComponent(element, function() { 
-    window.translateelement_styles='/css/google-translate.min.css'; 
-    NexT.utils.getScript('/js/third-party/google-translate.min.js');
-  });
-}

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

@@ -1,16 +0,0 @@
-/* AddThis share plugin */
-NexT.plugins.share.addthis = function() {
-  const element = '.addthis_inline_share_toolbox';
-  if (!NexT.CONFIG.addthis || !NexT.utils.checkDOMExist(element)) return; 
-
-  const addthis_js = NexT.CONFIG.addthis.js + '?pubid=' + NexT.CONFIG.addthis.cfg.pubid;
-
-  NexT.utils.lazyLoadComponent(element, function() {
-    NexT.utils.getScript(addthis_js, {
-      attributes: {
-        async: false
-      },
-      parentNode: document.querySelector(element)
-    });
-  });
-}

assets/js/utils.js

@@ -7,7 +7,65 @@ HTMLElement.prototype.wrap = function (wrapper) {
 };
 
 NexT.utils = {
-  registerImageLoadEvent: function() {
+  registerAPlayer: function () {
+    this.getStyle(
+      NexT.utils.getCDNResource(NexT.CONFIG.page.music.css)
+    );
+    
+    NexT.CONFIG.page.music.js.forEach(function(js) {
+      NexT.utils.getScript(NexT.utils.getCDNResource(js), true);
+    });
+    
+  },
+  calPostExpiredDate: function() {
+    const postMetaDom = document.querySelector('.post-meta-container');
+    let postTime = postMetaDom.querySelector('time[itemprop="dateCreated datePublished"]').getAttribute("datetime");
+    let postLastmodTime = postMetaDom.querySelector('time[itemprop="dateModified dateLastmod"]');
+
+    if (postLastmodTime != null) postTime = postLastmodTime.getAttribute("datetime");
+
+    let expiredTip = '';
+    const expireCfg = NexT.CONFIG.page.expiredTips;
+    let expiredTime = this.diffDate(postTime, 2);
+
+    if (expiredTime.indexOf(NexT.CONFIG.i18n.ds_years) > -1) {
+      expiredTip = expireCfg.warn.split('#');
+    } else {
+      let days = parseInt(expiredTime.replace(NexT.CONFIG.i18n.ds_days, '').trim(), 10);
+      if (days < 180)  return; 
+      expiredTip = expireCfg.info.split('#');
+    }
+
+    let expiredTipPre = expiredTip[0];
+    let expiredTipSuf = expiredTip[1];
+    expiredTip = expiredTipPre + '<span class="post-expired-times">' + expiredTime + '</span>' + expiredTipSuf;
+    document.getElementById('post-expired-content').innerHTML = expiredTip;
+    this.domAddClass('#post-expired-tip', 'show');
+  },
+  registerMenuClick: function () {
+    const pMenus = document.querySelectorAll('.main-menu > li > a.menus-parent');
+    pMenus.forEach(function (item) {
+      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) => {
@@ -17,7 +75,7 @@ NexT.utils = {
           let imgSrc = ele.getAttribute('data-src');
           if (imgSrc) {
             let img = new Image();
-            img.addEventListener('load', function() {
+            img.addEventListener('load', function () {
               ele.src = imgSrc;
             }, false);
             ele.src = imgSrc;
@@ -34,8 +92,11 @@ NexT.utils = {
     });
   },
 
-  registerImageViewer: function() {
+  registerImageViewer: function () {
-    new Viewer(document.querySelector('.post-body'),{ navbar:2, toolbar:2 });
+    const post_body = document.querySelector('.post-body');
+    if (post_body) {
+      new Viewer(post_body, { navbar: 2, toolbar: 2 });
+    }
   },
 
   registerToolButtons: function () {
@@ -65,7 +126,7 @@ NexT.utils = {
       targets: document.scrollingElement,
       duration: duration,
       easing: easing,
-      scrollTop:  targetId == '' || !targetObj ? 0 : targetObj.getBoundingClientRect().top + window.scrollY
+      scrollTop: targetId == '' || !targetObj ? 0 : targetObj.getBoundingClientRect().top + window.scrollY
     });
   },
 
@@ -121,8 +182,8 @@ NexT.utils = {
     }
   },
 
-  fmtLaWidget: function(){
+  fmtLaWidget: function () {
-    setTimeout(function(){
+    setTimeout(function () {
       const laWidget = document.querySelectorAll('#la-siteinfo-widget span');
       if (laWidget.length > 0) {
         const valIds = [0, 2, 4, 6];
@@ -136,7 +197,7 @@ NexT.utils = {
   },
 
   fmtBusuanzi: function () {
-    setTimeout(function(){
+    setTimeout(function () {
       const bszUV = document.getElementById('busuanzi_value_site_uv');
       if (bszUV) {
         bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
@@ -215,25 +276,25 @@ NexT.utils = {
   },
 
   getCDNResource: function (res) {
-    let { plugins, router } = NexT.CONFIG.vendor;
+
+    let router = NexT.CONFIG.vendor.router;
     let { name, version, file, alias, alias_name } = res;
 
-    let npm_name = name;
-    if (alias_name) npm_name = alias_name;
     let res_src = '';
-    switch (plugins) {
+
-      case 'cdnjs':
+    switch (router.type) {
-      case 'bootcdn':
+      case "modern":
-      case 'qiniu':
+        if (alias_name) name = alias_name;
-        let cdnjs_name = alias || name;
+        let alias_file = file.replace(/^(dist|lib|source|\/js|)\/(browser\/|)/, '');
-        let cdnjs_file = file.replace(/^(dist|lib|source|\/js|)\/(browser\/|)/, '');
+        if (alias_file.indexOf('min') == -1) {
-        if (cdnjs_file.indexOf('min') == -1) {          
+          alias_file = alias_file.replace(/\.js$/, '.min.js');
-          cdnjs_file = cdnjs_file.replace(/\.js$/, '.min.js');
         }
-        res_src = `${router}/${cdnjs_name}/${version}/${cdnjs_file}`
+        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;
@@ -245,27 +306,57 @@ NexT.utils = {
   registerCopyCode: function () {
     if (!NexT.CONFIG.copybtn) return;
 
-    let figure = document.querySelectorAll('.highlight pre');
+   /** let figure = document.querySelectorAll('.highlight pre');
     if (figure.length === 0 || !NexT.CONFIG.copybtn) return;
     figure.forEach(element => {
       let cn = element.querySelector('code').className;      
-      // TODO seems hard code need find other ways fixed it.
+      if (cn === '') return;
-      if (cn == '') return;
+      element.children[0].insertAdjacentHTML('beforebegin', '<div class="copy-btn" data-clipboard-snippe><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>');
+      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;
@@ -273,20 +364,22 @@ NexT.utils = {
           document.body.append(ta);
           ta.select();
           ta.setSelectionRange(0, code.length);
-          ta.readOnly = false;
+          try {
-          const result = document.execCommand('copy');
+            const successful = document.execCommand('copy');
-          button.querySelector('i').className = result ? 'fa fa-check-circle fa-fw' : 'fa fa-times-circle fa-fw';
+            if (!successful) throw new Error('复制命令执行失败');
-          ta.blur(); // For iOS
+          } catch (err) {
-          button.blur();
+            console.error('复制失败:', err);
+          }
           document.body.removeChild(ta);
         }
+       
       });
       element.addEventListener('mouseleave', () => {
         setTimeout(() => {
           button.querySelector('i').className = 'fa fa-copy fa-fw';
         }, 300);
       });
-    });
+    });**/
   },
 
   wrapTableWithBox: function () {
@@ -406,22 +499,58 @@ NexT.utils = {
       const isSubPath = !NexT.CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
       target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
     });
-  },
+  },*/
 	
   registerLangSelect: function() {
-    const selects = document.querySelectorAll('.lang-select');
+    let selects = document.getElementById('lang-select');
-    selects.forEach(sel => {
+    if (!selects) return;
-      sel.value = NexT.CONFIG.page.lang;
+
-      sel.addEventListener('change', () => {
+    let selected = selects.querySelector('#lang-selected');
-        const target = sel.options[sel.selectedIndex];
+    let selectedVal = selected.querySelectorAll('span');
-        document.querySelectorAll('.lang-select-label span').forEach(span => {
+    let flagIcon = selectedVal[0];
-          span.innerText = target.text;
+    let langName = selectedVal[1];
-        });
+    let selectIcon = selected.querySelector('i');
-        // Disable Pjax to force refresh translation of menu item
+   
-        window.location.href = target.dataset.href;
+
+    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');
@@ -483,13 +612,6 @@ NexT.utils = {
     });
   },
 
-  hideComments: function () {
-    let postComments = document.querySelector('.post-comments');
-    if (postComments !== null) {
-        postComments.style.display = 'none';
-    }
-  },
-
   hiddeLodingCmp: function (selector) {
     const loadding = document.querySelector(selector).previousElementSibling;
     loadding.style.display = 'none';
@@ -561,7 +683,7 @@ NexT.utils = {
     });
   },
 
-  getStyle: function (src, position='after', parent) {
+  getStyle: function (src, position = 'after', parent) {
     const link = document.createElement('link');
     link.setAttribute('rel', 'stylesheet');
     link.setAttribute('type', 'text/css');
@@ -581,8 +703,11 @@ NexT.utils = {
         condition: legacyCondition
       }).then(options);
     }
+
     const {
       condition = false,
+      module = false,
+      textContent = undefined,
       attributes: {
         id = '',
         async = false,
@@ -602,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);
@@ -612,22 +739,25 @@ NexT.utils = {
         script.onload = resolve;
         script.onerror = reject;
 
-        if (typeof src === 'object') {
+        if (src != null && src != undefined) {
-          const { url, integrity } = src;
+          if (typeof src === 'object') {
-          script.src = url;
+            const { url, integrity } = src;
-          if (integrity) {
+            script.src = url;
-            script.integrity = integrity;
+            if (integrity) {
-            script.crossOrigin = 'anonymous';
+              script.integrity = integrity;
+              script.crossOrigin = 'anonymous';
+            }
+          } else {
+            script.src = src;
           }
-        } else {
-          script.src = src;
         }
+
         (parentNode || document.head).appendChild(script);
       }
     });
   },
 
-  lazyLoadComponent: function(selector, legacyCallback) {
+  lazyLoadComponent: function (selector, legacyCallback) {
     if (legacyCallback) {
       return this.lazyLoadComponent(selector).then(legacyCallback);
     }

data/config.yaml

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

data/resources.yaml

@@ -1,33 +1,79 @@
 # CDN 公共资源商列表
 # Public CDN vendor list
 vendors: 
-  cdnjs: "https://cdnjs.cloudflare.com/ajax/libs"
+  - name: cdnjs
-  unpkg: "https://unpkg.com"
+    home: "https://cdnjs.com"
-  bootcdn: "https://cdn.bootcdn.net/ajax/libs"
+    logo: "https://cdnjs.com/_/f7a2ebfb819c118086546e481876aef6.svg"
-  qiniu: "https://cdn.staticfile.org"
+    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
+
   - name: viewerjs
-    version: 1.11.0
+    version: 1.11.6
     file: dist/viewer.min.js
 
 # CSS 资源
 # CSS Resources
 css:
-  - name: '@fortawesome/fontawesome-free'
+  - name: font-awesome
-    version: 6.1.2
+    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.0
+    version: 1.11.6
     file: dist/viewer.min.css
 
 # 第三方服务组件资源
@@ -44,32 +90,51 @@ analytics:
 
 # 文章分享
 # Share
-addthis:
+share:
-  js: https://s7.addthis.com/js/300/addthis_widget.js
+  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'
+    name: waline
-    version: 2.13.0
+    version: 2.15.8
     file: dist/waline.js
-    alias: waline
+    alias: "@waline/client"
+
   css:
-    name: '@waline/client'
+    name: waline
-    version: 2.13.0
+    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
+    version: 2.6.4
-    file: dist/Artalk.js
+    file: dist/Artalk.min.js
+
   css:
     name: artalk
-    version: 2.3.4
+    version: 2.6.4
-    file: dist/Artalk.css
+    file: dist/Artalk.min.css
 
 giscus:
   js: https://giscus.app/client.js
@@ -80,15 +145,17 @@ utterances:
 livere:
   js: https://cdn-city.livere.com/js/embed.dist.js
 
+
 # 全文搜索
 # Full text search
 algolia:
   name: algoliasearch
-  version: 4.14.2
+  version: 4.24.0
   file: dist/algoliasearch-lite.umd.js
+
 instant:
   name: instantsearch.js
-  version: 4.49.0
+  version: 4.73.2
   file: dist/instantsearch.production.min.js
 
 plugins:
@@ -96,37 +163,79 @@ plugins:
   mathjax:
     js:
       name: mathjax
-      version: 3.2.0
+      version: 3.2.2
-      file: es5/tex-mml-chtml.js
+      file: es5/tex-mml-svg.js
+
   katex:
     js:
       - name: katex
-        version: 0.16.0
+        alias_name: KaTeX
+        version: 0.16.15
         file: dist/katex.min.js
+        
       - name: auto-render
-        alias_name: katex
+        alias: katex
-        version: 0.16.0
+        alias_name: KaTeX
+        version: 0.16.15
         file: dist/contrib/auto-render.min.js
+
     css:
       name: katex
-      version: 0.16.0
+      alias_name: KaTeX
+      version: 0.16.15
       file: dist/katex.min.css
+
   # 画图渲染
   mermaid:
     js:
       name: mermaid
-      version: 9.1.7
+      version: 10.9.1
       file: dist/mermaid.min.js
   # 文章访问/评论统计
   waline:
     js:
       - name: pageview
-        alias_name: '@waline/client'
+        alias_name: waline
-        version: 2.13.0
+        version: 2.15.8
         file: dist/pageview.js
-        alias: waline 
+        alias: "@waline/client" 
+
       - name: comment
-        alias_name: '@waline/client'
+        alias_name: waline
-        version: 2.13.0
+        version: 2.15.8
         file: dist/comment.js
-        alias: waline
+        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/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/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

@@ -12,7 +12,7 @@ tags:
   - Hugo
   - 开始
 
-url: post/hello-world.html
+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

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

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,7 +7,7 @@ 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:
  - 示例文章
@@ -19,7 +19,7 @@ tags:
 
 toc: false
 draft: false
-url: post/markdown-syntax.html
+url: demo/markdown-syntax.html
 ---
 
 仅以此篇文章来测试下在 `NexT` 主题中在通过 `Hugo` 引擎来建站时，是否支持 `Markdown` 文件内容中所写的各种语法，并展示下实际的效果。
@@ -40,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 语法
@@ -48,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 格式
 
@@ -113,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>
@@ -167,6 +167,8 @@ url: post/markdown-syntax.html
 
 ## Code
 
+使用 Markdown 语法书写代码块：
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -180,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

@@ -12,9 +12,11 @@ categories:
 
 tags:
  - 表情
- - emoji
+ - Emoji
 
-url: "post/emoji-support.html"
+toc: true
+
+url: "demo/emoji-support.html"
 ---
 
 Emoji 可以通过多种方式在 Hugo 项目中启用。
@@ -26,7 +28,7 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 
 <!--more-->
 
-它们以**冒号**开头和结尾，并且包含 emoji 的 **代码**：
+它们以**冒号**开头和结尾，并且包含 emoji 的 **简短代码**：
 
 ```markdown
 去露营啦! {:}tent: 很快就回来.
@@ -36,9 +38,8 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 
 呈现的输出效果如下:
 
-去露营啦! :tent: 很快就回来。
+> 去露营啦! :tent: 很快就回来。<br/>
-
+> 真开心! :joy:
-真开心! :joy:
 
 以下**符号清单**是 emoji 代码的非常有用的参考。
 
@@ -54,7 +55,7 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 | :rofl: | `rofl` | :joy: | `joy` |
 | :slightly_smiling_face: | `slightly_smiling_face` | :upside_down_face: | `upside_down_face` |
 | :wink: | `wink` | :blush: | `blush` |
-| :innocent: | `innocent` | | |
+| :innocent: | `innocent` |  |  |
 
 ### 爱意表情
 
@@ -70,7 +71,7 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 | :-: | - | :-: | - |
 | :yum: | `yum` | :stuck_out_tongue: | `stuck_out_tongue` |
 | :stuck_out_tongue_winking_eye: | `stuck_out_tongue_winking_eye` | :stuck_out_tongue_closed_eyes: | `stuck_out_tongue_closed_eyes` |
-| :money_mouth_face: | `money_mouth_face` | | |
+| :money_mouth_face: | `money_mouth_face` | :money_mouth_face: | |
 
 
 ### 国家和地区旗帜
@@ -200,4 +201,4 @@ Emoji 可以通过多种方式在 Hugo 项目中启用。
 | :samoa: | `samoa` | :kosovo: | `kosovo` |
 | :yemen: | `yemen` | :mayotte: | `mayotte` |
 | :south_africa: | `south_africa` | :zambia: | `zambia` |
-| :zimbabwe: | `zimbabwe` | | |
+| :zimbabwe: | `zimbabwe` |  |  |

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

@@ -14,7 +14,7 @@ tags:
   - 博客
 
 toc: true
-url: post/table-of-content.html
+url: demo/table-of-content.html
 ---
 
 巴顿将军说过：“衡量一个人是否成功，不是看他站到顶峰，而是从顶峰跌落之后的反弹力”，褚时健的人生便是如此，中年发家致富，名利双收，之后又跌落到谷底，等到74岁再创业，10年后带着褚橙归来，东山再起收获亿万财富，他的发展轨迹就是反弹的过程。

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)

exampleSite/content/post/07-custom-files/index.en-us.md

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

exampleSite/content/post/07-custom-files/index.md

@@ -14,14 +14,12 @@ tags:
   - 个性化
   - 布局
 
-url: "post/custom-files.html"
+url: "demo/custom-files.html"
 toc: true
 ---
 
 对于熟悉前端开发的用户来说，可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。其中布局方面主要是支持左侧边栏的站点概览部分，以及站点底部2个位置，但样式的重置可以是整个站点的任意位置。
 
-<!--more-->
-
 ## 打开配置参数
 
 首先要明确在配置文件的 `params` 区域中有配置如下参数：
@@ -39,7 +37,7 @@ customFilePath:
 
 {{< /note >}}
 
-然后在站点的根目录下创建 `layouts/partials` 2个目录，用于存放自定布局设计文件，另外在站点根目录下创建 `statics/css` 2个目录，用于存放自定义 CSS 样式文件。一切就绪后，就可以参考如下的步骤，完成自己的设计想法。
+然后在站点的根目录下创建 `layouts/partials` 2个目录，用于存放自定布局设计文件，另外在站点根目录下创建 `static/css` 2个目录，用于存放自定义 CSS 样式文件。一切就绪后，就可以参考如下的步骤，完成自己的设计想法。
 
 ## 侧边栏设计
 
@@ -65,7 +63,6 @@ Website source code <a href="https://github.com/hugo-next/hugo-theme-next/tree/d
 
 再把该文件的路径配置到相应的参数中，效果请查看站点底部的效果。
 
-
 ## 自定义样式
 
 在前面创建 `css` 目录中新一个后缀名为 `css` 的文件，然后可以在里面把站点的样式进行重定义，或是增加一些自己定义的样式设计，在写文章时进行引用，示例如下：

exampleSite/content/post/08-no-header-title/index.en-us.md

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

exampleSite/content/post/08-no-header-title/index.md

@@ -14,11 +14,13 @@ tags:
 
 comment:
   enable: false
-url: "post/no-header-title.html"
+url: "demo/no-header-title.html"
+expired: true
 ---
 
 刘慈欣2018克拉克奖获奖感言（部分内容节选）。
 
+> [!INFO]
 > 用于测试在没有H1-6标题头时，文章的目录导航是否会直接关闭，并关闭评论功能。
 
 <!--more-->

exampleSite/content/post/09-syntax-highlighting/index.en-us.md

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

exampleSite/content/post/09-syntax-highlighting/index.md

@@ -14,7 +14,7 @@ tags:
   - 高亮
   - Chroma
 
-url: post/syntax-highlighting.html
+url: demo/syntax-highlighting.html
 ---
 
 Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用 Chroma 作为代码块高亮支持，它内置在 Go 语言当中，速度是真的非常、非常快，而且最为重要的是它也兼容之前我们使用的 Pygments 方式。
@@ -27,6 +27,23 @@ Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用
 
 ### GO
 
+```makrdown
+{{</* highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" */>}}
+
+func GetTitleFunc(style string) func(s string) string {
+  switch strings.ToLower(style) {
+  case "go":
+    return strings.Title
+  case "chicago":
+    return transform.NewTitleConverter(transform.ChicagoStyle)
+  default:
+    return transform.NewTitleConverter(transform.APStyle)
+  }
+}
+
+{{</* / highlight */>}}
+```
+
 {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
 
 func GetTitleFunc(style string) func(s string) string {
@@ -48,14 +65,14 @@ func GetTitleFunc(style string) func(s string) string {
 import javax.swing.JFrame;  //Importing class JFrame
 import javax.swing.JLabel;  //Importing class JLabel
 public class HelloWorld {
-    public static void main(String[] args) {
+  public static void main(String[] args) {
-        JFrame frame = new JFrame();           //Creating frame
+    JFrame frame = new JFrame();           //Creating frame
-        frame.setTitle("Hi!");                 //Setting title frame
+    frame.setTitle("Hi!");                 //Setting title frame
-        frame.add(new JLabel("Hello, world!"));//Adding text to frame
+    frame.add(new JLabel("Hello, world!"));//Adding text to frame
-        frame.pack();                          //Setting size to smallest
+    frame.pack();                          //Setting size to smallest
-        frame.setLocationRelativeTo(null);     //Centering frame
+    frame.setLocationRelativeTo(null);     //Centering frame
-        frame.setVisible(true);                //Showing frame
+    frame.setVisible(true);                //Showing frame
-    }
+  }
 }
 ```
 
@@ -143,5 +160,29 @@ FROM
 WHERE column_name = "condition"
 {{< / highlight >}}
 
+### 自动猜测代码高亮显示
+
+```
+.highlight {
+
+  //Other codes
+  ......
+
+  > .chroma {
+    position: relative;
+      
+    
+    //Fix code block overflow issue
+    pre {
+      overflow-wrap: break-word;
+      white-space: pre-wrap;
+      line-break: anywhere;
+      word-break: break-all; 
+      overflow-x: auto;
+    }
+  }
+}
+```
+
 
 除以上列举的代码高亮显示外，还支持诸如：C 语言、C++、HTML、CSS、Shell脚本等各主流的代码语言高亮显示，可自行测试效果。

exampleSite/content/post/10-math-formula/index.en-us.md

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

exampleSite/content/post/10-math-formula/index.md

@@ -4,7 +4,7 @@ description: "主题支持mathjs和katex两种不同插件的数学公式渲染
 keywords: "math,formula"
 
 date: 2022-09-11T10:16:02+08:00
-lastmod: 2022-09-11T10:16:02+08:00
+lastmod: 2024-12-12T18:48:32+08:00
 
 categories:
   - 第三方引入
@@ -15,7 +15,7 @@ tags:
   - katex
 
 
-url: "post/math-formula.html"
+url: "demo/math-formula.html"
 math: mathjax
 ---
 
@@ -29,7 +29,7 @@ math: mathjax
 
 - 使用 `hugo new` 命令创建一篇新的文章
 - 可以全局启用数据公式渲染，请在项目配置参数 `math: katex` 或 `math: mathjax`
-- 或是将该参数配置到需要显示数学公式的页面头部（减少不必要的加载消耗）
+- 或是将该参数配置到需要显示数学公式的页面头部（减少不必要的资源加载消耗）
 
 {{< /note >}}
 
@@ -37,20 +37,33 @@ math: mathjax
 
 ## 例子
 
+### 内行公式
+
+二次公式： $ax^2 + bx + c = 0$ （支持用`\$....\$`格式的行内公式）
+
+二次公式（换行显示公式） $$ax^2 + bx + c = 0$$
+
+更加复杂公式是这样的: $\lim^{x \to \infty}_{y \to 0}{\frac{x}{y}}$ 
+
+其它内联公式显示（分数表达 ）：\(\frac{1}{2}\)（支持用`\(...\)`格式的行内公式效果）
+
 
 ### 重复的分数
+
 $$
 \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
 $$
 
 
 ### 总和记号
+
 $$
 \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
 $$
 
 
 ### 几何级数之和
+
 我把接下来的两个例子分成了几行，这样它在手机上表现得更好。这就是为什么它们包含 `\displaystyle`。或者可使用类似 `\displaylines{x = a + b \\\ y = b + c}` 语法进行截断，具体信息可见：[mathjax-issues2312](https://github.com/mathjax/MathJax/issues/2312)
 
 $$
@@ -78,6 +91,7 @@ $$
 $$
 
 ### 乘记号
+
 $$
 \displaystyle 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = 
 $$
@@ -89,17 +103,19 @@ $$
 
 
 ### 随文数式
-这是一些线性数学: $$ k_{n+1} = n^2 + k_n^2 - k_{n-1} $$ ， 然后是更多的文本。
+
+这是一些线性数学: $ k_{n+1} = n^2 + k_n^2 - k_{n-1} $ ， 然后是更多的文本。
 
 
 ### 希腊字母
+
 $$
 \displaylines{\Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega
 \alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \\\\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi \ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi}
 $$
 
-
 ### 箭头
+
 $$
 \gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow
 $$
@@ -119,6 +135,7 @@ $$
 
 
 ## 符号
+
 $$
 \surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes\ \oslash\ \circledcirc\ \boxdot\ \bigtriangleup
 $$
@@ -129,6 +146,7 @@ $$
 
 
 ### 微积分学
+
 $$
 \int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx
 $$
@@ -143,12 +161,14 @@ $$
 
 
 ### 洛伦茨方程
+
 $$
 \begin{aligned} \dot{x} & = \sigma(y-x) \\\\ \dot{y} & = \rho x - y - xz \\\\ \dot{z} & = -\beta z + xy \end{aligned}
 $$
 
 
 ### 交叉乘积
+
 这在KaTeX中是可行的，但在这种环境中馏分的分离不是很好。
 
 $$
@@ -163,56 +183,60 @@ $$
 
 
 ## 强调
+
 $$
 \hat{x}\ \vec{x}\ \ddot{x}
 $$
 
 
 ### 有弹性的括号
+
 $$
 \left(\frac{x^2}{y^3}\right)
 $$
 
 
 ### 评估范围
+
 $$
 \left.\frac{x^3}{3}\right|_0^1
 $$
 
 
 ### 诊断标准
+
 $$
 f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\\\ 3n+1, & \text{if } n\text{ is odd} \end{cases}
 $$
 
 
 ### 麦克斯韦方程组
+
 $$
 \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}
 $$
 
 
 ## 统计学
-固定词组：
 
-$$
+固定词组：$$\frac{n!}{k!(n-k)!} = {^n}C_k{n \choose k}$$
-\frac{n!}{k!(n-k)!} = {^n}C_k
-{n \choose k}
-$$
 
 ### 分数在分数
+
 $$
 \frac{\frac{1}{x}+\frac{1}{y}}{y-z}
 $$
 
 
 ### ｎ次方根
+
 $$
 \sqrt[n]{1+x+x^2+x^3+\ldots}
 $$
 
 
 ### 矩阵
+
 $$
 \begin{pmatrix} a_{11} & a_{12} & a_{13}\\\\ a_{21} & a_{22} & a_{23}\\\\ a_{31} & a_{32} & a_{33} \end{pmatrix}
 \begin{bmatrix} 0 & \cdots & 0 \\\\ \vdots & \ddots & \vdots \\\\ 0 & \cdots & 0 \end{bmatrix}
@@ -220,6 +244,7 @@ $$
 
 
 ## 标点符号
+
 $$
 f(x) = \sqrt{1+x} \quad (x \ge -1)
 f(x) \sim x^2 \quad (x\to\infty)

exampleSite/content/post/11-mermaid-charts/index.en-us.md

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

exampleSite/content/post/11-mermaid-charts/index.md

@@ -1,6 +1,5 @@
 ---
 title: "Mermaid支持流程图"
-description: "mermaid-flow-chart"
 keywords: "mermaid,flow,chart"
 
 date: 2022-09-18T20:58:13+08:00
@@ -13,8 +12,7 @@ tags:
   - 流程图
   - 时序图
 
-url: "post/mermaid-charts.html"
+url: "demo/mermaid-charts.html"
-mermaid: true
 toc: true
 ---
 
@@ -28,7 +26,6 @@ toc: true
 {{< note info >}}
 
 - 通过 `hugo new` 命令创建一篇新的文章
-- 在文章头部配置 `mermaid: true`
 - 使用短代码书写各种类型的图，自带2个参数： align（对齐） 和 bc（背景色），可参考如下使用示例
 
 {{< /note >}}

exampleSite/content/post/12-shortcodes/index.en-us.md

@@ -0,0 +1,156 @@
+---
+title:  "Custom shortcode example"
+description:  "Set commonly used block references, label cards, buttons, and other information as short codes for quick referencing"
+Keywords: "short code, short code"
+
+date: 2025-01-29T21:08:50+08:00
+lastmod: 2025-01-29T21:08:50+08:00
+
+categories:
+  - Example
+  - Grammar
+tags:
+  - ShortCode
+  - Grammar
+url: "demo/shortcodes.html"
+toc: true
+---
+
+Although the `Markdown` syntax is already very rich and can meet the vast majority of our writing needs, in order to better layout the content of the article in a more friendly way, a set of custom phrases has been designed for citation, which can be quickly referenced when used.
+
+<!--more-->
+
+## Block reference
+
+When quoting some classic quotes, this phrase can be used. The grammar reference is as follows:
+
+```markdown
+{{</* quote */>}}
+
+###  block quote
+
+Write down the words you want to express!
+{{</* /quote */>}}
+```
+
+Actual effect:
+
+{{< quote >}}
+
+Hope is indifferent to existence, indifferent to nothingness, just like the road on earth.
+
+
+In fact, there is no road on the ground, and with more people walking, it becomes a road.
+
+**Lu Xun**
+
+{{< /quote >}}
+
+## Information Block
+
+Support 'default'` The presentation of five different effects, including info, success, warning, and danger, with the following syntax reference:
+
+```markdown
+{{</* note [class] [no-icon] */>}}
+Write and express information
+Support Markdown syntax
+{{</* /note */>}}
+```
+
+Actual effect:
+
+{{< note default no-icon >}}
+
+###  Default Header without icon
+
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note default >}}
+###  Default Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note primary >}}
+###  Primary Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note info >}}
+###  Info Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note success >}}
+###  Success Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note warning >}}
+###  Warning Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note danger >}}
+###  Danger Header
+**Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+
+## Bilibili video
+
+```markdown
+{{</* bilibili BV1Sx411T7QQ */>}}
+perhaps
+{{</* bilibili id=BV1Sx411T7QQ */>}}
+```
+{{< bilibili id=BV1Sx411T7QQ >}}
+
+## Music player
+
+Based on [Player](https://github.com/DIYgod/APlayer) And [MatingJS](https://github.com/metowolf/MetingJS) The library implements a responsive music player embedded in the meeting, with automatically recognized music platform URLs, including:` Netease, Tencent, Kugou, Baidu, and Xiami platforms also support user-defined music sources. Other relevant parameter explanations are as follows:
+
+|Parameter Name | Default | Description|
+| :----: | :------: | :--- |
+| **id** | _Required_  | Music ID, which is the unique identifier of the music on the music platform |
+| **server** | _Required_  | Music platform, supports `netease`、 `tencent`、 `kugou`、 `baidu` and `xiami` |
+| **type** | _Required_  | Play type, currently supports `song` 、 `playlist`、 `album`、 `search` and `artist` |
+| **auto** | _Optional_  | Music address, only supports the platform in the server parameter |
+| **theme** | `#448aff`  | The theme color of the player defaults to `#448aff` |
+| **url** | Empty  |Custom music source URL, default to empty |
+| **name** | Empty | Music name, default to empty |
+| **artist** | Empty  | Music author, default to empty |
+| **cover** | Empty  | Music cover URL, default to empty |
+| **fixed** | `false` | Fixed player, default to `false` |
+| **mini** | `false`  | Display mini player, default to `false` |
+| **autoplay** | `false`  | Autoplay the music, default to `false` |
+| **loop** | `all`  | Loop playback, supports `all`、`one` and `none`，default to `all` |
+| **order** | `list`  | Play order `list` and `random`，default to `list` |
+| **volume** | `0.7`  | Volume, default is `0.7` |
+| **mutex** | `true` | When multiple pieces of music are playing, should only the current player be turned on，default to `true` |
+| **list-folded** | `false`  | List collapse, default is `false` |
+| **list-max-height** | `340px`  | The maximum height of the list is 340px by default |
+
+### Single playback
+
+```markdown
+{{</* music theme="#2980b9" server="tencent" type="song" id="002u4ZTb0CXmJA" mini="true" */>}}
+```
+
+{{< music theme="#2980b9" server="tencent" type="song" id="002u4ZTb0CXmJA" mini="true" >}}
+
+### List playback
+
+```markdown
+{{</* music server="netease" type="playlist" id="1982066521" list-max-height="140" */>}}
+```
+
+{{< music server="netease" type="playlist" id="1982066521" list-max-height="140" >}}
+
+### Customize music source
+
+```markdown
+{{</* music url="/music/sky.mp3" name="Sky City" artist="Hayao Miyazaki" cover="/music/gongqijun.jpg" autoplay="true" */>}}
+```
+
+{{< music url="/music/sky.mp3" name="City of the Sky" artist="Hayao Miyazaki" cover="/music/gongqijun.jpg" autoplay="true" >}}

exampleSite/content/post/12-shortcodes/index.md

@@ -0,0 +1,152 @@
+---
+title: "自定义短语示例"
+description: "将常用的块引用、标签卡、按钮等信息设置成短代码，便于快速引用"
+keywords: "shortcode,短代码"
+
+date: 2022-08-06T14:41:50+08:00
+lastmod: 2022-08-06T14:41:50+08:00
+
+categories:
+  - 示例文章
+  - 语法
+tags:
+  - 短代码
+  - 语法
+url: "demo/shortcodes.html"
+toc: true
+---
+
+虽然 `Markdown` 语法已经非常丰富能够满足我们写文章的绝大部分需求，但是为更好的对文章内容进行更友好的排版，为引设计一套自定义的短语，便于在使用时能够快速引用。
+
+<!--more-->
+
+## 块引用
+
+在引用一些经典名言名句时，可以采用此短语，语法参考如下：
+
+```markdown
+{{</* quote */>}}
+  ### block quote
+  写下你想表达的话语！
+{{</* /quote */>}}
+```
+
+实际效果：
+
+{{< quote >}}
+
+希望是无所谓有，无所谓无的，这正如地上的路。
+
+
+其实地上本没有路，走的人多了，也便成了路。
+
+**鲁迅**
+
+{{< /quote >}}
+
+## 信息块
+
+支持 `default`，`info`，`success`，`warning`，`danger` 等五种不同效果的展示，语法参考如下：
+
+```markdown
+{{</* note [class] [no-icon] */>}}
+  书写表达的信息
+  支持 Markdown 语法
+{{</* /note */>}}
+```
+
+实际效果：
+
+{{< note default no-icon >}}
+  ### Default Header without icon
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note default >}}
+  ### Default Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note primary >}}
+  ### Primary Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note info >}}
+  ### Info Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note success >}}
+  ### Success Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note warning >}}
+  ### Warning Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+{{< note danger >}}
+  ### Danger Header
+  **Welcome** to [Hugo NexT!](https://preview.hugo-next.eu.org)
+{{< /note >}}
+
+
+## Bilibili 视频
+
+```markdown
+{{</* bilibili BV1Sx411T7QQ */>}}
+或者
+{{</* bilibili id=BV1Sx411T7QQ */>}}
+```
+{{< bilibili id=BV1Sx411T7QQ >}}
+
+## 音乐播放器
+
+基于[APlayer](https://github.com/DIYgod/APlayer)和[MetingJS](https://github.com/metowolf/MetingJS)库实现见面内嵌的响应式音乐播放器，自动识别的音乐平台URL，包括：`netease`、 `tencent`、 `kugou`、 `baidu` 和 `xiami` 平台，也可以支持用户自定义的音乐源。其他相关的参数说明如下：
+
+| 参数名  | 默认   | 说明  |
+| :----: | :------: | :--- |
+| **id** | _必选_  | 音乐 ID，即音乐在音乐平台的唯一标识符 |
+| **server** | _必选_  | 音乐平台，支持 `netease`、 `tencent`、 `kugou`、 `baidu` 和 `xiami` 平台 |
+| **type** | _必选_  | 播放类型，目前支持 `song` 、 `playlist`、 `album`、 `search` 和 `artist` 类型 |
+| **auto** | _可选_  | 音乐的地址，仅支持 server 参数中的平台 |
+| **theme** | `#448aff`  | 播放器的主题色，默认为 `#448aff` |
+| **url** | 空  | 自定的音乐源 URL，默认为空 |
+| **name** | 空 | 音乐名称，默认为空 |
+| **artist** | 空  | 音乐作者，默认为空 |
+| **cover** | 空  | 音乐封面 URL，默认为空 |
+| **fixed** | `false` | 固定播放器，默认为 `false` |
+| **mini** | `false`  | 显示小播放器，默认为 `false` |
+| **autoplay** | `false`  | 自动播放，默认为 `false` |
+| **loop** | `all`  | 循环播放，支持`all`、`one` 和 `none`，默认为 `all` |
+| **order** | `list`  | 播放顺序`list` 和 `random`，支持默认为 `list` |
+| **volume** | `0.7`  | 音量，默认为 `0.7` |
+| **mutex** | `true` | 有多个音乐播放时，是否只开启当前播放器，默认为 `true` |
+| **list-folded** | `false`  | 列表折叠，默认为 `false` |
+| **list-max-height** | `340px`  | 列表最大高度，默认为：340px |
+
+### 单曲播放 
+
+```markdown
+{{</* music theme="#2980b9" server="tencent" type="song" id="002u4ZTb0CXmJA" mini="true" */>}}
+```
+
+{{< music theme="#2980b9" server="tencent" type="song" id="002u4ZTb0CXmJA" mini="true" >}}
+
+### 列表播放
+
+```markdown
+{{</* music server="netease" type="playlist" id="1982066521" list-max-height="140" */>}}
+```
+
+{{< music server="netease" type="playlist" id="1982066521" list-max-height="140" >}}
+
+### 自定义音乐源
+
+```markdown
+{{</* music music url="/music/sky.mp3" name="天空之城" artist="宫崎骏" cover="/music/gongqijun.jpg" autoplay="true" */>}}
+```
+
+{{< music url="/music/sky.mp3" name="天空之城" artist="宫崎骏" cover="/music/gongqijun.jpg" autoplay="true" >}}

exampleSite/content/post/13-hugo-blockquote/index.en-us.md

@@ -0,0 +1,148 @@
+---
+title:  "Support block information emphasis annotation in Markdown documents"
+description:  "Added rendering of blockquote style in the new version of Hugo framework, supports custom style design, and implements a warning style similar to Github"
+keywords: "hugo,block,quote"
+
+date: 2025-01-29T21:24:02+08:00
+lastmod: 2025-01-29T21:24:02+08:00
+
+categories:
+  - Example
+  - Grammar
+tags:
+  - blockquote
+  - Hugo
+
+url: "demo/hugo-blockquote.html"
+toc: true
+expired: true
+---
+
+In the past, the `Hugo NexT` theme used to annotate block information through custom phrases. Recently, it has been discovered that `Hugo` has been updated from [v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0). From the beginning of the version, it is possible to support rendering Blockquote styles in Markdown documents through hook mode (which needs to be implemented by oneself), achieving warning style styles similar to Github. So 7 different styles were added to the `Hugo NexT` theme for users to choose from, and they could also customize icons and color configurations.
+
+
+<!--more-->
+
+
+Users can find the positions of the following two configuration items and adjust them according to their preferred style and color:
+
+```yaml
+#Config. yaml or hugo.toml
+postAlerts:
+info:
+icon: "circle-info"
+color: "#4A90E2"
+note:
+icon: "bell"
+color: "#17A2B8"
+help:
+icon: "circle-question"
+color: "#967ADC"
+error:
+icon: "circle-xmark"
+color: "#DC3545"
+warning:
+icon: "triangle-exclamation"
+color: "#F39C12"
+success:
+icon: "circle-check"
+color: "#32CD32"
+important:
+icon: "circle-plus"
+color: "#007BFF"
+```
+
+```yaml
+# i18n/zh-cn.yaml
+PostAlert:
+info     :  Information
+note     :  Attention
+help     :  'Help'
+error    :  Error
+warning  :  Warning
+success  :  'Success'
+important:  'Important'
+```
+
+The writing style and specific implementation effects in the Maarkdown document are as follows:
+
+## Information prompt
+
+```markdown
+> [!INFO]
+> HugoNexT theme supports custom style design, allowing you to achieve personalized design for your own site.
+```
+
+> [!INFO]
+> HugoNexT theme supports custom style design, allowing you to achieve personalized design for your own site.
+
+## Attention to information
+
+```markdown
+> [!NOTE]
+> The latest version of the `Hugo NexT` theme supports Blockquote rendering for Markdown documents, with 7 different styles to choose from or customize.
+```
+
+> [!NOTE]
+> The latest version of the `Hugo NexT` theme supports Blockquote rendering for Markdown documents, with 7 different styles to choose from or customize.
+
+## Help Information
+
+```markdown
+> [!HELP]
+> The HugoNexT theme provides complete example usage instructions and source code, making it easier to get started and use.
+```
+
+> [!HELP]
+> The HugoNexT theme provides complete example usage instructions and source code, making it easier to get started and use.
+
+## Warning message
+
+```markdown
+> [!WARNING]
+> The HugoNexT theme uses SCSS precompilation and requires downloading the official Hugo extended version for use.
+```
+
+> [!WARNING]
+> The HugoNexT theme uses SCSS precompilation and requires downloading the official Hugo extended version for use.
+
+## Error message
+
+```markdown
+> [!ERROR]
+> The `Hugo NexT` theme is only supported in Hugo v0.132.0 and above versions.
+```
+
+> [!ERROR]
+> The `Hugo NexT` theme is only supported in Hugo v0.132.0 and above versions.
+
+## Success message
+
+```markdown
+> [!SUCCESS]
+> Congratulations on successfully deploying the `Hugo NexT` theme. Please feel free to start your creative work.
+```
+
+> [!SUCCESS]
+>Congratulations on successfully deploying the `Hugo NexT` theme. Please feel free to start your creative work.
+
+## Important information
+
+```markdown
+> [!IMPORTANT]
+> The HugoNexT theme supports the use of external CDN services, but please ensure that your network is functioning properly and accessible to CDN services at this time.
+```
+
+> [!IMPORTANT]
+> The HugoNexT theme supports the use of external CDN services, but please ensure that your network is functioning properly and accessible to CDN services at this time.
+
+
+## Custom Title
+
+```markdown
+> [!Info]+Custom Title Description
+> The HugoNexT theme provides very open and flexible configurations, allowing users to customize according to their own ideas.
+```
+
+> [!Info]+Custom Title Description
+> The HugoNexT theme provides very open and flexible configurations, allowing users to customize according to their own ideas.

exampleSite/content/post/13-hugo-blockquote/index.md

@@ -0,0 +1,148 @@
+---
+title: "支持在Markdown文档中实现块信息强调标注"
+description: "在新版本Hugo框架中添加了对blockquote样式渲染，支持自定义样式设计，实现类似Github的警告风格样式。"
+keywords: "hugo,block,quote"
+
+date: 2025-01-02T16:08:02+08:00
+lastmod: 2025-01-02T19:08:02+08:00
+
+categories:
+  - 示例文章
+  - 语法
+tags:
+  - blockquote
+  - Hugo
+
+url: "demo/hugo-blockquote.html"
+toc: true
+expired: true
+---
+
+过去 `HugoNexT` 主题都是通过自定义短语来实现块信息的标注，近期发现 `Hugo` 从[v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0)版本开始便是可以支持通过hook方式渲染Markdown文档中的Blockquote样式（需要自己实现），实现类似Github的警告风格样式。于是便在 `HugoNexT` 主题中添加7种不同风格供用户可选择使用，还可以自定义图标与颜色配置。
+
+
+<!--more-->
+
+
+用户可以找到如下两处配置项的位置，然后根据自己喜欢的风格和颜色进行调整：
+
+```yaml
+# config.yaml 或 hugo.toml
+postAlerts:
+  info:
+    icon: "circle-info"
+    color: "#4A90E2"
+  note:
+    icon: "bell"
+    color: "#17A2B8"
+  help:
+    icon: "circle-question"
+    color: "#967ADC"
+  error:
+    icon: "circle-xmark"
+    color: "#DC3545"
+  warning:
+    icon: "triangle-exclamation"
+    color: "#F39C12"
+  success:
+    icon: "circle-check"
+    color: "#32CD32"
+  important:
+    icon: "circle-plus"
+    color: "#007BFF"
+```
+
+```yaml
+# i18n/zh-cn.yaml
+PostAlert:
+  info     : "信息"
+  note     : "注意"
+  help     : "帮助"
+  error    : "错误"
+  warning  : "警告"
+  success  : "成功"
+  important: "重要"
+```
+
+在Maarkdown文档中的写法和实现的具体效果参考如下：
+
+## 信息提示
+
+```markdown
+> [!INFO]
+> `HugoNexT` 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。
+```
+
+> [!INFO]
+> `HugoNexT` 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。
+
+## 注意信息
+
+```markdown
+> [!NOTE]
+> 最新版本的 `HugoNexT` 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。
+```
+
+> [!NOTE]
+> 最新版本的 `HugoNexT` 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。
+
+## 帮助信息
+
+```markdown
+> [!HELP]
+> `HugoNexT` 主题提供了完整的示例使用说明及源代码，上手更为简单易用。
+```
+
+> [!HELP]
+> `HugoNexT` 主题提供了完整的示例使用说明及源代码，上手更为简单易用。
+
+## 警告信息
+
+```markdown
+> [!WARNING]
+> `HugoNexT` 主题使用了SCSS 预编译，需要下载 Hugo 官方 `hugo-extended` 版本使用。
+```
+
+> [!WARNING]
+> `HugoNexT` 主题使用了SCSS 预编译，需要下载 Hugo 官方 `hugo-extended` 版本使用。
+
+## 错误信息
+
+```markdown
+> [!ERROR]
+> `HugoNexT` 主题只支持在 Hugo v0.132.0 及以上版本中使用。
+```
+
+> [!ERROR]
+> `HugoNexT` 主题只支持在 Hugo v0.132.0 及以上版本中使用。
+
+## 成功信息
+
+```markdown
+> [!SUCCESS]
+> 恭喜你已经成功部署 `HugoNexT` 主题，请尽情的开始你的创作吧。
+```
+
+> [!SUCCESS]
+> 恭喜你已经成功部署 `HugoNexT` 主题，请尽情的开始你的创作吧。
+
+## 重要信息
+
+```markdown
+> [!IMPORTANT]
+> `HugoNexT` 主题支持使用外部的CDN服务，但此时请确保你的网络是正常且可访问CDN服务。
+```
+
+> [!IMPORTANT]
+> `HugoNexT` 主题支持使用外部的CDN服务，但此时请确保你的网络是正常且可访问CDN服务。
+
+
+## 自定义标题
+
+```markdown
+> [!Info]+ 自定义标题说明 
+> `HugoNexT` 主题提供很开放的灵活配置，用户可按自己的想法改造。
+```
+
+> [!Info]+ 自定义标题说明 
+> `HugoNexT` 主题提供很开放的灵活配置，用户可按自己的想法改造。