🔀 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,28 +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/start.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 .
-$ mv config.toml config.toml.backup
+$ cp themes/hugo-theme-next/exampleSite/hugo.yaml .
+$ mv hugo.toml hugo.toml.backup
+```
+
+Or use `Hugo module` to lead into the theme, see below commands:
+
+```shell
+$ cd hugo-next-example
+$ hugo mod init hugo-next-example
+$ wget -O hugo.yaml https://github.com/hugo-next/hugo-theme-next/raw/main/exampleSite/hugo.yaml
+$ sed -i 's/hugo-theme-next/github.com\/hugo-next\/hugo-theme-next\/v4/' hugo.yaml
+$ mv hugo.toml hugo.toml.backup
 ```
 
 ### 💻 Preview on Local
 
 ```shell
-$ cd hugo-next-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 }}"
@@ -112,10 +142,12 @@ tags:
 #expand: true
 # It's means that will redirecting to external links
 #extlink:
-# Switch to enabled or disabled comment plugins in this post
+# Disabled comment plugins in this post
 #comment:
 # enable: false
-# Enable table of content
+# Disable table of content int this post
+# Notice: By default will automatic build table of content 
+# with h2-h4 title in post and without other settings
 #toc: false
 # Absolute link for visit
 #url: "{{ lower .Name }}.html"
@@ -156,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)
@@ -168,11 +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 |
-| :-------: | ------ | ------ | ---- | ---- |
-| 2022.09.30 | *軒 | wechat pay | ¥66.66 | Hope it could help more people. |
-| 2022.09.30 | N*l | wechat pay | ¥20.00 | / |
-| 2022.07.09 | *风 | wechat pay | ¥10.00 | / |
-| 2022.05.08 | *泉 | wechat pay | ¥6.60 | Good luck with next develop. |
-| 2022.02.28 | *娇 | wechat pay | ¥5.00 | / |
-| 2021.12.21 | z*y | wechat pay | ¥18.88 | / |
+| Donation time | Donors | Donation mode | Donation content | Message                                                                    |
+| :-----------: | ------ | ------------- | ---------------- | -------------------------------------------------------------------------- |
+|  2024.05.11  | *祥    | alipay        | RMB 66.66        | Thank you for creating such a great theme.                                 |
+|  2023.07.25  | *五    | alipay        | RMB 50.00        | I really like the 'Next' theme, thank you, let me buy you a cup of coffee. |
+|  2023.06.01  | **霖   | alipay        | RMB 10.00        | /                                                                          |
+|  2022.11.15  | f888   | xianyu        | RMB 6.20         | Good luck.                                                                 |
+|  2022.09.30  | *軒    | wechat pay    | RMB 66.66        | Hope it could help more people.                                            |
+|  2022.09.30  | N*l    | wechat pay    | RMB 20.00        | /                                                                          |
+|  2022.07.09  | *风    | wechat pay    | RMB 10.00        | /                                                                          |
+|  2022.05.08  | *泉    | wechat pay    | RMB 6.60         | Good luck with next develop.                                               |
+|  2022.02.28  | *娇    | wechat pay    | RMB 5.00         | /                                                                          |
+|  2021.12.21  | z*y    | wechat pay    | RMB 18.88        | /                                                                          |
+

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 .
-$ mv config.toml config.toml.backup
+$ cp themes/hugo-theme-next/exampleSite/hugo.yaml .
+$ mv hugo.toml hugo.toml.backup
+```
+
+或通过 `Hugo module` 模式引用本主题，参考如下命令：
+
+```shell
+$ cd hugo-next-example
+$ hugo mod init hugo-next-example
+$ wget -O hugo.yaml https://github.com/hugo-next/hugo-theme-next/raw/main/exampleSite/hugo.yaml
+$ sed -i 's/hugo-theme-next/github.com\/hugo-next\/hugo-theme-next\/v4/' hugo.yaml
+$ mv hugo.toml hugo.toml.backup
 ```
 
 ### 💻 本地预览
 
 ```shell
-$ cd hugo-next-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
 ---
 # 文章标题
@@ -120,10 +150,11 @@ tags:
 #expand: true
 # 外部链接地址，访问时直接跳转
 #extlink:
-# 在当前页面开启或关闭评论功能
+# 在当前页面关闭评论功能
 #comment:
 # enable: false
-# 开启文章目录功能
+# 关闭当前页面目录功能
+# 注意：正常情况下文章中有H2-H4标题会自动生成目录，无需额外配置
 #toc: false
 # 绝对访问路径
 #url: "{{ lower .Name }}.html"
@@ -166,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)
@@ -178,11 +213,16 @@ Copyright (c) 2022， hugo-next 团队
 
 以下是打赏名单列表（按时间倒序）：
 
-| 打赏时间 | 打赏者 | 打赏方式 | 打赏内容 | 留言 |
-| :-------: | ------ | ------ | ---- | ---- |
-| 2022.09.30 | *軒 | 微信支付 | ¥66.66 | 愿项目造福更多人！ |
-| 2022.09.30 | N*l | 微信支付 | ¥20.00 | / |
-| 2022.07.09 | *风 | 微信支付 | ¥10.00 | / |
-| 2022.05.08 | *泉 | 微信支付 | ¥6.60 | 祝开发next顺利 |
-| 2022.02.28 | *娇 | 微信支付 | ¥5.00 | / |
-| 2021.12.21 | z*y | 微信支付 | ¥18.88 | / |
+|  打赏时间  | 打赏者 | 打赏方式 | 打赏内容 | 留言                             |
+| :--------: | ------ | -------- | -------- | -------------------------------- |
+| 2024.05.11 | *祥    | 支付宝   | ￥66.66  | 感谢创作这么好的主题             |
+| 2023.07.25 | *五    | 微信支付 | ￥50.00  | 很喜欢next主题，感谢，请你喝咖啡 |
+| 2023.06.01 | **霖   | 支付宝   | ¥10.00  | /                                |
+| 2022.11.15 | f888   | 咸鱼     | ¥6.20   | 聊表心意                         |
+| 2022.09.30 | *軒    | 微信支付 | ¥66.66  | 愿项目造福更多人！               |
+| 2022.09.30 | N*l    | 微信支付 | ¥20.00  | /                                |
+| 2022.07.09 | *风    | 微信支付 | ¥10.00  | /                                |
+| 2022.05.08 | *泉    | 微信支付 | ¥6.60   | 祝开发next顺利                   |
+| 2022.02.28 | *娇    | 微信支付 | ¥5.00   | /                                |
+| 2021.12.21 | z*y    | 微信支付 | ¥18.88  | /                                |
+

VERSION

@@ -1 +1 @@
-4.3.1
+4.7.2

archetypes/default.md

@@ -27,12 +27,12 @@ tags:
 # 外部链接地址，访问时直接跳转
 # It's means that will redirecting to external links
 #extlink:
-# 在当前页面开启或关闭评论功能
-# Switch to enabled or disabled comment plugins in this post
+# 在当前页面关闭评论功能
+# Disabled comment plugins in this post
 #comment:
 #  enable: false
-# 开启文章目录功能
-# Enable table of content
+# 关闭文章目录功能
+# Disable table of content
 #toc: false
 # 绝对访问路径
 # Absolute link for visit

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/3rd/search.scss

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

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

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

assets/css/_common/components/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/categories.scss

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

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

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

assets/css/_common/components/post/index.scss

@@ -24,13 +24,13 @@
   }
 
   @if $motion_trans_post_header {
-    .post-header {
+    .post-header, .flinks-header {
       visibility: hidden;
     }
   }
 
   @if $motion_trans_post_body {
-    .post-body {
+    .post-body, .flinks-body  {
       visibility: hidden;
     }
   }
@@ -42,6 +42,7 @@
   }
 }
 
+@if $toc_number {
 .autonumber {
   h2 {
     counter-reset: h3;
@@ -67,6 +68,7 @@
     }
   }
 }
+} 
 
 @import 'post-collapse';
 @import 'post-body';

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

@@ -0,0 +1,36 @@
+
+@mixin alert-styles($type, $color) {
+  .post-alert-#{$type} {
+    padding: 0 0 0 10px;
+    border-left: 6px solid $color;
+    font-size: 0.825em;
+    color: $color;
+  }
+}
+
+@each $key, $color in $post_alert_colors {
+  @include alert-styles(#{$key}, $color);
+}
+
+.post-alert-title, .post-expired-title {
+
+  display: flex;
+  align-items: center;
+  line-height: 1.5;
+  margin: 0;
+
+  i {
+    font-size: 1.25em;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  span {
+    margin: 0 0 0 8px;
+    letter-spacing: 0.08em;
+  }
+}
+
+.post-alert-content, .post-expired-content {
+  color: var(--text-color);
+}

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

@@ -80,4 +80,66 @@
   svg {
     max-width: 98%;
   }
+
+  // For read more post content anchor
+  #more {
+    visibility: hidden;
+  }
+
+  /** Defined speical border properties for top card of post **/
+  $speical-border-width: 5px;
+  $speical-border-radius: 8px;
+  .post-expired-tip {
+
+    $expired-color: #4A90E2;
+
+    font-size: var(--font-size-small);
+    border: 1px solid #4A90E2;
+    border-radius: $speical-border-radius;
+    border-left: $speical-border-width solid #4A90E2;
+    border-top:  $speical-border-width solid #4A90E2;
+    box-shadow: .6rem .5rem 0.3rem var(--body-bg-color);
+    margin: 0 0 0.85em 0;
+    padding: 0.65em 0.15em 0.65em 0.95em;
+    display: none;
+
+    .post-expired-title {
+      color: #4A90E2;
+      font-weight: bold;
+    }
+
+    .post-expired-times {
+      font-weight: bold;
+      font-size: 1.15em;
+      color: #e5534b;
+      margin: 0 3px;
+    }
+  }
+
+  .post-summary-wrapper {
+    $summary-color: #ea6733;
+
+    margin: 0 0 .85em 0;
+    border-radius: $speical-border-radius;
+    border: 1px solid $summary-color;
+    border-right: $speical-border-width solid $summary-color;
+    border-bottom: $speical-border-width solid $summary-color;
+    box-shadow: .6rem .5rem 0.3rem var(--body-bg-color);
+
+    .summary-title {
+      margin: .65em .93em 0 .93em;
+      color: $summary-color;
+      font-weight: bold;
+    }
+
+    .summary-content {
+      background-color: var(--card-bg-color);
+      border-radius: $speical-border-radius;
+      box-shadow: .08rem .06rem 0.03rem var(--body-bg-color);
+      margin: .85em;
+      padding: .85em .95em;
+    }
+  }
+
+  @import 'post-alert';
 }

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

@@ -59,6 +59,10 @@
       @include post-card();
       border: none;
       background: none;
+
+      li {
+        word-break: break-all;
+      }
     }
   }
 
@@ -87,3 +91,21 @@
     }
   }
 }
+
+@if $post_share_enable {
+  .post-share-tools {
+    display: flex;
+    justify-content: center;
+
+    a {
+      border: 0px;
+    }
+  }
+
+  @if $post_sharethis_set {
+    .st-cmp-settings {
+      display: none;
+    }
+  }
+}
+

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

@@ -113,3 +113,8 @@
   flex-basis: 100%;
   height: 0;
 }
+
+#comments-count {
+  cursor: pointer;
+  border-bottom: 1px solid $link-decoration-color;
+}

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/third-party/waline.scss

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

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

@@ -2,9 +2,12 @@
 
   @include sidebar-toggle();
   background: none;
-  bottom: 55px;
+  bottom: 58px;
   filter: alpha(opacity=0);
-  font-size: 12px;
+  font-size: $font-size-smaller;
+  @include mobile() {
+    font-size: $font-size-smallest;
+  }
 
   .button {
     display: block;
@@ -15,7 +18,6 @@
     background-color: $tool-btn-bg;
     color: $tool-btn-color;
     text-align: center;
-    font-size: $font-size-larger;
     line-height: 35px;
     padding: 0;
     outline: 0;
@@ -25,6 +27,13 @@
     opacity: $tool-btn-opacity;
     touch-action: manipulation;
 
+    @include mobile() {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      border-radius: 3px;
+    }
+
     &:hover {
       color: $tool-btn-hover-fore-color;
       opacity: $tool-btn-opacity-hover;
@@ -32,17 +41,12 @@
   }
 
   .goto-comments {
-      display: none;
-  }
-
-  .goto-comments-on {
-    display: block;
+    display: none;
   }
 }
 
 @if $back2top_enable {
   .back-to-top {
-    font-size: $font-size-smaller;
 
     @if not $back2top_scrollpercent {
       span {
@@ -51,7 +55,7 @@
     }
 
     @if $back2top_sidebar {
-      margin: 20px - $sidebar-offset -10px -20px;
+      margin: 20px -$sidebar-offset -10px -20px;
       opacity: 0;
       transition: opacity $transition-ease;
 

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

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

@@ -27,6 +27,8 @@
 
   img {
     display: inline-block;
+    max-width: 120px;
+    max-height: 42px;
   }
 }
 

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

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

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

@@ -2,6 +2,10 @@
   font-size: $font-size-small;
   padding: 0 8px;
 
+  .active-current {
+    color: $orange;
+  }
+
   ul {
 
     list-style: none;
@@ -15,7 +19,7 @@
 
       > ul {
         border-left: 1px solid;
-        margin-left: 6px;
+        margin-left: 4px;
 
         li {
           position: relative;
@@ -26,7 +30,7 @@
             content: ' ';
             top: 0.14em;
             left: -0.75em;
-            width: 0.68em;
+            width: 0.65em;
             height: 0.815em;
             border-style: none none dashed none;
             border-width: 0.05em;
@@ -42,10 +46,11 @@
     a {
       transition: all $transition-ease;
       border: none;
-
-      &:before {
-        content: counters(item, ".") ". ";
-        counter-increment: item;
+      @if $toc_number {
+        &:before {
+          content: counters(item, ".") ". ";
+          counter-increment: item;
+        }
       }
 
       &:hover {

assets/css/_common/scaffolding/base.scss

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

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

@@ -3,86 +3,182 @@
 
   background: var(--highlight-background);
   margin-bottom: 26px;
+  line-height: 1.25;
 
-  //TODO  Need fixed the copy button show position.
-  div:first-child {
-    overflow-x: auto;
-  }
+  > .code-header {
+    color:#f8f8f2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .25rem 0;
+    width: 100%;
 
-  pre {
-    position: relative;
-    overflow-x: auto;
-  }
+    &:hover {
+      cursor: pointer;
+    }
 
-  table tbody tr {
-    //TODO Fixed the too long code line over
-    // layout background color.
-    background: #272822;    
-  }
+    .code-lang {
+      width: 100%;
+      text-align: center;
+      font-weight: bold;
 
-  /* pre > code span {
-    white-space: break-spaces;
-    overflow: hidden;
-    word-break: break-all;
-    word-wrap: break-word;
-  } */
-}
+      &::after {
+        content: "Code";
+      }
+    }
 
-@if $codeblock_copy_btn_enable {
+    .collapse-btn {
+      font-family: "Font Awesome 6 Free";
+      font-weight: 900;
+      text-align: center;
+      width: 1.25em;
+      display: inline-block;
+      font-style: normal;
+      font-variant: normal;
+      line-height: 1;
+      text-rendering: auto;
+      padding-right: .25rem;      
+      transition: content 1s ease-in-out;
       
-  .highlight:hover .copy-btn, pre:hover .copy-btn {
-    opacity: 1;
-  }
+      &::before {
+        content: "\f102";
+      }
 
-  .copy-btn {
-    color: $black-dim;
-    cursor: pointer;
-    line-height: 1.6;
-    opacity: 0;
-    padding: 2px 6px;
-    position: absolute;
-    right: 8px;
-    top: 4px;
-    transition: opacity $transition-ease;
-    background: var(--highlight-background);
+      &.collapse::before {
+        content: "\f103";
+      }
+    }
 
-    @if $codeblock_style == 'flat' {
-      background: white;
-      border: 0;
-      font-size: $font-size-smaller;
-      
-    } @else if $codeblock_style == 'mac' {
-      color: var(--highlight-foreground);
-      font-size: 14px;
-      border-radius: 3px;
-    } @else {
-      background-color: $gainsboro;
-      background-image: linear-gradient(#fcfcfc, $gainsboro);
-      border: 1px solid #d5d5d5;
-      border-radius: 3px;
-      font-size: $font-size-smaller;
+    @each $type, $text in $code-type-list {
+      &.#{$type} .code-lang::after {
+        content: $text;
+      }
+    }
 
+    .ellipses-btn {
+      padding-right: .45rem;
     }
   }
-}
 
-@if $codeblock_style == 'mac' {
-  .highlight {
+  > .chroma {
+    position: relative;
+    max-height: 500px;
+    opacity: 1;
+    visibility: visible;
+    transition: max-height 0.8s ease-in-out, opacity 0.7s ease-in-out; 
+
+    &.hidden-code {
+      max-height: 0;
+      opacity: 0;
+      visibility: hidden;
+
+      animation-name: slideInUp;
+      animation-duration: 1s;
+    }
+    
+    pre {
+      padding: .45rem 0;
+    }
+
+    .lntd:first-child {
+      min-width: 1.6rem;
+      text-align: right;
+      background-color: #272822; 
+
+      a {
+        border-bottom: none;
+      }
+    }
+
+    .lntd:last-child {
+      width: 100%;
+
+      pre {
+        overflow-wrap: break-word;
+        white-space: pre-wrap;
+        line-break: anywhere;
+        word-break: break-all; 
+        overflow-x: auto;
+      }
+    }
+
+    > code > span {
+      overflow-wrap: break-word;
+      white-space: pre-wrap;
+      line-break: anywhere;
+      word-break: break-all; 
+    }
+
+    @if $codeblock_copy_btn_enable {
+
+      &:hover .copy-btn {
+        opacity: 1;
+      }
+    
+      .copy-btn {
+        color: $black-dim;
+        cursor: pointer;
+        line-height: 1.6;
+        opacity: 0;
+        padding: 2px 6px;
+        position: absolute;
+        right: 8px;
+        top: 4px;
+        border-radius: 3px;
+        font-size: $font-size-medium;
+        transition: opacity $transition-ease;
+        background: var(--highlight-background);
+        
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        text-align: center;
+        width: 1.25em;
+        display: inline-block;
+        font-style: normal;
+        font-variant: normal;
+        text-rendering: auto;
+
+        &::before {
+          content: "\f0c5";
+        }
+
+        &.copied::before {
+          content: "\f058";
+        }
+
+        &.uncopied::before {
+          content: "\f057";
+        }
+    
+        @if $codeblock_style == 'flat' {
+          background: white;
+          border: 0;
+        } @else if $codeblock_style == 'mac' {
+          color: var(--highlight-foreground);
+        } @else {
+          background-color: $gainsboro;
+          background-image: linear-gradient(#fcfcfc, $gainsboro);
+          border: 1px solid #d5d5d5;
+        }
+      }
+    }
+  }
+
+  
+  @if $codeblock_style == 'mac' {
+  
     border-radius: 5px;
     box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
-    padding-top: 30px;
 
-    .table-container {
-      border-radius: 0 0 5px 5px;
-    }
+    .code-header {
     
-    &::before {
-      background: #fc625d;
-      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
-      margin-top: -20px;
-      margin-left: 10px;
-      position: absolute;
-      @include round-icon(12px);
+      &::before {
+        background: #fc625d;
+        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+        margin-left: 10px;
+        @include round-icon(12px);
+      }
     } 
   }
+  
 }

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

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

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

@@ -0,0 +1,87 @@
+/** monokai highlight style **/
+  /* Background */ .bg { color:#f8f8f2;background-color:#272822; }
+  /* PreWrapper */ .chroma { color:#f8f8f2;background-color:#272822; }
+  /* Other */ .chroma .x {  }
+  /* Error */ .chroma .err { color:#960050;background-color:#1e0010 }
+  /* CodeLine */ .chroma .cl {  }
+  /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+  /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+  /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+  /* LineHighlight */ .chroma .hl { background-color:#3c3d38 }
+  /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+  /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+  /* Line */ .chroma .line { display:flex; }
+  /* Keyword */ .chroma .k { color:#66d9ef }
+  /* KeywordConstant */ .chroma .kc { color:#66d9ef }
+  /* KeywordDeclaration */ .chroma .kd { color:#66d9ef }
+  /* KeywordNamespace */ .chroma .kn { color:#f92672 }
+  /* KeywordPseudo */ .chroma .kp { color:#66d9ef }
+  /* KeywordReserved */ .chroma .kr { color:#66d9ef }
+  /* KeywordType */ .chroma .kt { color:#66d9ef }
+  /* Name */ .chroma .n {  }
+  /* NameAttribute */ .chroma .na { color:#a6e22e }
+  /* NameBuiltin */ .chroma .nb {  }
+  /* NameBuiltinPseudo */ .chroma .bp {  }
+  /* NameClass */ .chroma .nc { color:#a6e22e }
+  /* NameConstant */ .chroma .no { color:#66d9ef }
+  /* NameDecorator */ .chroma .nd { color:#a6e22e }
+  /* NameEntity */ .chroma .ni {  }
+  /* NameException */ .chroma .ne { color:#a6e22e }
+  /* NameFunction */ .chroma .nf { color:#a6e22e }
+  /* NameFunctionMagic */ .chroma .fm {  }
+  /* NameLabel */ .chroma .nl {  }
+  /* NameNamespace */ .chroma .nn {  }
+  /* NameOther */ .chroma .nx { color:#a6e22e }
+  /* NameProperty */ .chroma .py {  }
+  /* NameTag */ .chroma .nt { color:#f92672 }
+  /* NameVariable */ .chroma .nv {  }
+  /* NameVariableClass */ .chroma .vc {  }
+  /* NameVariableGlobal */ .chroma .vg {  }
+  /* NameVariableInstance */ .chroma .vi {  }
+  /* NameVariableMagic */ .chroma .vm {  }
+  /* Literal */ .chroma .l { color:#ae81ff }
+  /* LiteralDate */ .chroma .ld { color:#e6db74 }
+  /* LiteralString */ .chroma .s { color:#e6db74 }
+  /* LiteralStringAffix */ .chroma .sa { color:#e6db74 }
+  /* LiteralStringBacktick */ .chroma .sb { color:#e6db74 }
+  /* LiteralStringChar */ .chroma .sc { color:#e6db74 }
+  /* LiteralStringDelimiter */ .chroma .dl { color:#e6db74 }
+  /* LiteralStringDoc */ .chroma .sd { color:#e6db74 }
+  /* LiteralStringDouble */ .chroma .s2 { color:#e6db74 }
+  /* LiteralStringEscape */ .chroma .se { color:#ae81ff }
+  /* LiteralStringHeredoc */ .chroma .sh { color:#e6db74 }
+  /* LiteralStringInterpol */ .chroma .si { color:#e6db74 }
+  /* LiteralStringOther */ .chroma .sx { color:#e6db74 }
+  /* LiteralStringRegex */ .chroma .sr { color:#e6db74 }
+  /* LiteralStringSingle */ .chroma .s1 { color:#e6db74 }
+  /* LiteralStringSymbol */ .chroma .ss { color:#e6db74 }
+  /* LiteralNumber */ .chroma .m { color:#ae81ff }
+  /* LiteralNumberBin */ .chroma .mb { color:#ae81ff }
+  /* LiteralNumberFloat */ .chroma .mf { color:#ae81ff }
+  /* LiteralNumberHex */ .chroma .mh { color:#ae81ff }
+  /* LiteralNumberInteger */ .chroma .mi { color:#ae81ff }
+  /* LiteralNumberIntegerLong */ .chroma .il { color:#ae81ff }
+  /* LiteralNumberOct */ .chroma .mo { color:#ae81ff }
+  /* Operator */ .chroma .o { color:#f92672 }
+  /* OperatorWord */ .chroma .ow { color:#f92672 }
+  /* Punctuation */ .chroma .p {  }
+  /* Comment */ .chroma .c { color:#75715e }
+  /* CommentHashbang */ .chroma .ch { color:#75715e }
+  /* CommentMultiline */ .chroma .cm { color:#75715e }
+  /* CommentSingle */ .chroma .c1 { color:#75715e }
+  /* CommentSpecial */ .chroma .cs { color:#75715e }
+  /* CommentPreproc */ .chroma .cp { color:#75715e }
+  /* CommentPreprocFile */ .chroma .cpf { color:#75715e }
+  /* Generic */ .chroma .g {  }
+  /* GenericDeleted */ .chroma .gd { color:#f92672 }
+  /* GenericEmph */ .chroma .ge { font-style:italic }
+  /* GenericError */ .chroma .gr {  }
+  /* GenericHeading */ .chroma .gh {  }
+  /* GenericInserted */ .chroma .gi { color:#a6e22e }
+  /* GenericOutput */ .chroma .go {  }
+  /* GenericPrompt */ .chroma .gp {  }
+  /* GenericStrong */ .chroma .gs { font-weight:bold }
+  /* GenericSubheading */ .chroma .gu { color:#75715e }
+  /* GenericTraceback */ .chroma .gt {  }
+  /* GenericUnderline */ .chroma .gl {  }
+  /* TextWhitespace */ .chroma .w {  }

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

@@ -0,0 +1,16 @@
+.bilibili-video {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 50%;
+  margin: auto;
+  text-align: center;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+}

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

@@ -2,7 +2,7 @@
 @import 'group-pictures';
 @import 'label';
 @import 'link-grid';
-@import 'mermaid';
 @import 'note';
 @import 'pdf';
 @import 'tabs';
+@import 'bilibili'

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

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

assets/css/_mixins.scss

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

assets/css/_schemes/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
 // --------------------------------------------------
@@ -296,7 +354,7 @@ $b2t-opacity-hover            : 1;
 $b2t-position-bottom          : -100px;
 $b2t-position-bottom-on       : 19px;
 $b2t-position-right           : 30px;
-$b2t-position-right-mobile    : 20px;
+$b2t-position-right-mobile    : 16px;
 $b2t-font-size                : 12px;
 $b2t-color                    : white;
 $b2t-bg-color                 : $black-deep;

assets/css/gt.scss

@@ -1,892 +0,0 @@
-:root {
-  --gt-blue: #2640b2;
-  --gt-border: #d1d5db;
-}
-
-@keyframes "goog-te-spinner-rotator" {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(270deg);
-  }
-}
-@keyframes "goog-te-spinner-dash" {
-  0% {
-    stroke-dashoffset: 187;
-  }
-  50% {
-    stroke-dashoffset: 46.75;
-    transform: rotate(135deg);
-  }
-  100% {
-    stroke-dashoffset: 187;
-    transform: rotate(450deg);
-  }
-}
-.goog-te-banner-frame {
-  left: 0px;
-  top: 0px;
-  height: 39px;
-  width: 100%;
-  z-index: 10000001;
-  position: fixed;
-  border: none;
-  border-bottom: 1px solid #6b90da;
-  margin: 0;
-  box-shadow: 0 0 8px 1px #999999;
-  _position: absolute;
-}
-.goog-te-menu-frame {
-  z-index: 10000002;
-  position: fixed;
-  box-shadow: 0.5rem 0.875rem 2.375rem rgba(39, 44, 49, 0.06), 0.0625rem 0.1875rem 0.5rem rgba(39, 44, 49, 0.03);
-  _position: absolute;
-}
-.goog-te-ftab-frame {
-  z-index: 10000000;
-  border: none;
-  margin: 0;
-}
-.goog-te-gadget {
-  font-family: arial;
-  font-size: 11px;
-  color: #666;
-  white-space: nowrap;
-  display: inline-flex;
-  img {
-    vertical-align: middle;
-    border: none;
-    display: inline-block;
-  }
-  .goog-te-combo {
-    margin: 4px 0;
-  }
-
-  div:first-child {
-    margin: 0 10px;
-  }
-}
-.goog-te-gadget-simple {
-  background-color: #fff;
-  border-left: 1px solid #d5d5d5;
-  border-top: 1px solid #9b9b9b;
-  border-bottom: 1px solid #e8e8e8;
-  border-right: 1px solid #d5d5d5;
-  font-size: 10pt;
-  display: inline-block;
-  padding-top: 1px;
-  padding-bottom: 2px;
-  cursor: pointer;
-  zoom: 1;
-  *display: inline;
-  .goog-te-menu-value {
-    color: #000;
-    span {
-      text-decoration: none;
-    }
-  }
-}
-.goog-te-gadget-icon {
-  margin-left: 2px;
-  margin-right: 2px;
-  width: 19px;
-  height: 19px;
-  border: none;
-  vertical-align: middle;
-}
-.goog-te-combo {
-  margin-left: 4px;
-  margin-right: 4px;
-  vertical-align: baseline;
-  *vertical-align: middle;
-  font-family: arial;
-  font-size: 10pt;
-}
-.goog-logo-link {
-  font-size: 12px;
-  font-weight: bold;
-  color: #444;
-  text-decoration: none;
-  margin: 0 5px;
-  border-bottom: 0;
-  &:link {
-    font-size: 12px;
-    font-weight: bold;
-    color: #444;
-    text-decoration: none;
-  }
-  &:visited {
-    font-size: 12px;
-    font-weight: bold;
-    color: #444;
-    text-decoration: none;
-  }
-  &:hover {
-    font-size: 12px;
-    font-weight: bold;
-    color: #444;
-    text-decoration: none;
-  }
-  &:active {
-    font-size: 12px;
-    font-weight: bold;
-    color: #444;
-    text-decoration: none;
-  }
-}
-.goog-te-banner {
-  .goog-logo-link {
-    display: block;
-    margin: 0px 10px;
-    padding-top: 2px;
-    padding-left: 4px;
-  }
-  * {
-    font-family: arial;
-    font-size: 10pt;
-  }
-  margin: 0;
-  background-color: #fff;
-  overflow: hidden;
-  img {
-    border: none;
-  }
-  table {
-    tbody {
-      tr {
-        td {
-          &:nth-child(2) {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
-.goog-close-link {
-  display: block;
-  margin: 0px 10px;
-}
-.goog-te-ftab {
-  * {
-    font-family: arial;
-    font-size: 10pt;
-  }
-  margin: 0px;
-  background-color: #fff;
-  white-space: nowrap;
-}
-.goog-te-menu {
-  * {
-    font-family: arial;
-    font-size: 10pt;
-  }
-  background-color: #ffffff;
-  text-decoration: none;
-  border: 2px solid #c3d9ff;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.goog-te-menu2 {
-  * {
-    font-family: arial;
-    font-size: 10pt;
-  }
-  background-color: #ffffff;
-  text-decoration: none;
-  overflow: hidden;
-  padding: 4px;
-  border: 1px solid var(--gt-border);
-  border-radius: 4px;
-}
-.goog-te-balloon {
-  * {
-    font-family: arial;
-    font-size: 10pt;
-  }
-  background-color: #ffffff;
-  overflow: hidden;
-  padding: 8px;
-  border: none;
-  border-radius: 10px;
-  img {
-    border: none;
-  }
-}
-.goog-te-banner-content {
-  color: #000;
-  img {
-    vertical-align: middle;
-  }
-}
-.goog-te-banner-info {
-  color: #666;
-  vertical-align: top;
-  margin-top: 0px;
-  font-size: 7pt;
-}
-.goog-te-banner-margin {
-  width: 8px;
-}
-.goog-te-button {
-  div {
-    border: 1px solid var(--gt-border);
-    height: 20px;
-  }
-  button {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    height: 20px;
-    overflow: hidden;
-    margin: 0;
-    vertical-align: top;
-    white-space: nowrap;
-    &:active {
-      background: none repeat scroll 0 0 #cccccc;
-    }
-  }
-}
-.goog-te-ftab-link {
-  text-decoration: none;
-  font-weight: bold;
-  font-size: 10pt;
-  border: 1px outset #888;
-  padding: 6px 10px;
-  white-space: nowrap;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  img {
-    margin-left: 2px;
-    margin-right: 2px;
-    width: 19px;
-    height: 19px;
-    border: none;
-    vertical-align: middle;
-  }
-  span {
-    text-decoration: underline;
-    margin-left: 2px;
-    margin-right: 2px;
-    vertical-align: middle;
-  }
-}
-.goog-float-top {
-  .goog-te-ftab-link {
-    padding: 2px 2px;
-    border-top-width: 0px;
-  }
-}
-.goog-float-bottom {
-  .goog-te-ftab-link {
-    padding: 2px 2px;
-    border-bottom-width: 0px;
-  }
-}
-.goog-te-menu-value {
-  text-decoration: none;
-  color: var(--gt-blue);
-  white-space: nowrap;
-  margin-left: 4px;
-  margin-right: 4px;
-  span {
-    text-decoration: underline;
-    &::after {
-      content: "▼";
-    }
-  }
-  img {
-    margin-left: 2px;
-    margin-right: 2px;
-    display: none;
-  }
-}
-.goog-te-menu-item {
-  padding: 3px;
-  text-decoration: none;
-  color: var(--gt-blue);
-  background: #ffffff;
-  &:link {
-    color: var(--gt-blue);
-    background: #ffffff;
-  }
-  &:visited {
-    color: #551a8b;
-  }
-  &:hover {
-    background: #c3d9ff;
-  }
-  &:active {
-    color: var(--gt-blue);
-  }
-}
-.goog-te-menu2-colpad {
-  width: 16px;
-}
-.goog-te-menu2-separator {
-  margin: 6px 0;
-  height: 1px;
-  background-color: var(--gt-border);
-  overflow: hidden;
-}
-.goog-te-menu2-item {
-  div {
-    padding: 4px;
-    color: var(--gt-blue);
-    background: #ffffff;
-  }
-  .indicator {
-    display: none;
-  }
-  text-decoration: none;
-  &:link {
-    div {
-      color: var(--gt-blue);
-      background: #ffffff;
-    }
-  }
-  &:visited {
-    div {
-      color: var(--gt-blue);
-      background: #ffffff;
-    }
-  }
-  &:active {
-    div {
-      color: var(--gt-blue);
-      background: #ffffff;
-    }
-  }
-  &:hover {
-    div {
-      color: #ffffff;
-      background: #3366cc;
-      border-radius: 2px;
-    }
-  }
-}
-.goog-te-menu2-item-selected {
-  div {
-    padding: 4px;
-    color: #000;
-    font-weight: bold;
-  }
-  .indicator {
-    display: auto;
-  }
-  .text {
-    padding-left: 4px;
-    padding-right: 4px;
-  }
-  text-decoration: none;
-  &:link {
-    div {
-      color: #000;
-      font-weight: bold;
-    }
-  }
-  &:visited {
-    div {
-      color: #000;
-      font-weight: bold;
-    }
-  }
-  &:hover {
-    div {
-      color: #000;
-      font-weight: bold;
-    }
-  }
-  &:active {
-    div {
-      color: #000;
-      font-weight: bold;
-    }
-  }
-}
-.goog-te-balloon-frame {
-  background-color: #ffffff;
-  border: 1px solid #6b90da;
-  box-shadow: 0.5rem 0.875rem 2.375rem rgba(39, 44, 49, 0.06), 0.0625rem 0.1875rem 0.5rem rgba(39, 44, 49, 0.03);
-  border-radius: 8px;
-}
-.goog-te-balloon-text {
-  margin-top: 6px;
-}
-.goog-te-balloon-zippy {
-  margin-top: 6px;
-  white-space: nowrap;
-  * {
-    vertical-align: middle;
-  }
-  .minus {
-    background-image: url(//www.google.com/images/zippy_minus_sm.gif);
-  }
-  .plus {
-    background-image: url(//www.google.com/images/zippy_plus_sm.gif);
-  }
-  span {
-    color: #00c;
-    text-decoration: underline;
-    cursor: pointer;
-    margin: 0 4px;
-  }
-}
-.goog-te-balloon-form {
-  margin: 6px 0 0 0;
-  form {
-    margin: 0;
-    textarea {
-      margin-bottom: 4px;
-      width: 100%;
-    }
-  }
-}
-.goog-te-balloon-footer {
-  margin: 6px 0 4px 0;
-}
-.goog-te-spinner-pos {
-  z-index: 1000;
-  position: fixed;
-  transition-delay: 0.6s;
-  left: -1000px;
-  top: -1000px;
-}
-.goog-te-spinner-animation {
-  background: #ccc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 104px;
-  height: 104px;
-  border-radius: 50px;
-  background: #fff url(//www.gstatic.com/images/branding/product/2x/translate_24dp.png) 50% 50% no-repeat;
-  transition: all 0.6s ease-in-out;
-  transform: scale(0.4);
-  opacity: 0;
-}
-.goog-te-spinner-animation-show {
-  transform: scale(0.5);
-  opacity: 1;
-}
-.goog-te-spinner {
-  margin: 2px 0 0 2px;
-  animation: goog-te-spinner-rotator 1.4s linear infinite;
-}
-.goog-te-spinner-path {
-  stroke-dasharray: 187;
-  stroke-dashoffset: 0;
-  stroke: #4285f4;
-  transform-origin: center;
-  animation: goog-te-spinner-dash 1.4s ease-in-out infinite;
-}
-#goog-gt-tt {
-  color: #222;
-  background-color: #ffffff;
-  border: 1px solid #eee;
-  box-shadow: 0 4px 16px rgba(0,0,0,.2);
-  display: none;
-  font-family: arial;
-  font-size: 10pt;
-  width: 420px;
-  padding: 12px;
-  position: absolute;
-  z-index: 10000;
-  .original-text {
-    clear: both;
-    font-size: 10pt;
-    position: relative;
-    text-align: justify;
-    width: 100%;
-  }
-  .title {
-    color: #999;
-    font-family: arial,sans-serif;
-    margin: 4px 0;
-    text-align: left;
-  }
-  .close-button {
-    display: none;
-  }
-  .logo {
-    float: left;
-    margin: 0px;
-  }
-  .activity-links {
-    display: inline-block;
-  }
-  .started-activity-container {
-    display: none;
-    width: 100%;
-  }
-  .activity-root {
-    margin-top: 20px;
-  }
-  .left {
-    float: left;
-  }
-  .right {
-    float: right;
-  }
-  .bottom {
-    min-height: 15px;
-    position: relative;
-    height: 1%;
-  }
-  .status-message {
-    background: linear-gradient(top,#29910d 0%,#20af0e 100%);
-    background: #29910d;
-    border-radius: 4px;
-    box-shadow: inset 0px 2px 2px #1e6609;
-    color: white;
-    font-size: 9pt;
-    font-weight: bolder;
-    margin-top: 12px;
-    padding: 6px;
-    text-shadow: 1px 1px 1px #1e6609;
-  }
-  .activity-link {
-    color: #1155cc;
-    cursor: pointer;
-    font-family: arial;
-    font-size: 11px;
-    margin-right: 15px;
-    text-decoration: none;
-  }
-  textarea {
-    font-family: arial;
-    resize: vertical;
-    width: 100%;
-    margin-bottom: 10px;
-    border-radius: 1px;
-    border: 1px solid #d9d9d9;
-    border-top: 1px solid silver;
-    font-size: 13px;
-    height: auto;
-    overflow-y: auto;
-    padding: 1px;
-    &:focus {
-      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-      border: 1px solid #4d90fe;
-      outline: none;
-    }
-  }
-  .activity-cancel {
-    margin-right: 10px;
-  }
-  .translate-form {
-    min-height: 25px;
-    vertical-align: middle;
-    padding-top: 8px;
-    .activity-form {
-      margin-bottom: 5px;
-      margin-bottom: 0px;
-      input {
-        display: inline-block;
-        min-width: 54px;
-        *min-width: 70px;
-        border: 1px solid #dcdcdc;
-        border: 1px solid rgba(0,0,0,0.1);
-        text-align: center;
-        color: #444;
-        font-size: 11px;
-        font-weight: bold;
-        height: 27px;
-        outline: 0;
-        padding: 0 8px;
-        vertical-align: middle;
-        line-height: 27px;
-        margin: 0 16px 0 0;
-        box-shadow: 0 1px 2px rgba(0,0,0,.1);
-        border-radius: 2px;
-        transition: all 0.218s;
-        background-color: #f5f5f5;
-        background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        cursor: default;
-        &:hover {
-          border: 1px solid #c6c6c6;
-          color: #222;
-          transition: all 0.0s;
-          background-color: #f8f8f8;
-          background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
-          border-color: #3079ed;
-        }
-        &:active {
-          border: 1px solid #c6c6c6;
-          color: #333;
-          background-color: #f6f6f6;
-          background-image: linear-gradient(top,#f6f6f6,#f1f1f1);
-          border-color: #3079ed;
-        }
-        &:focus {
-          #goog-gt-tt {
-            .translate-form {
-              .activity-form {
-                input.focus {
-                  #goog-gt-tt {
-                    .translate-form {
-                      .activity-form {
-                        input {
-                          &:active {
-                            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-          &:active {
-            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
-          }
-          outline: none;
-          border: 1px solid #4d90fe;
-          z-index: 4 !important;
-          border-color: #3079ed;
-        }
-        &.focus {
-          &:active {
-            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
-          }
-        }
-      }
-      input.focus {
-        outline: none;
-        border: 1px solid #4d90fe;
-        z-index: 4 !important;
-        border-color: #3079ed;
-      }
-      input.selected {
-        background-color: #eeeeee;
-        background-image: linear-gradient(top,#eeeeee,#e0e0e0);
-        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
-        border: 1px solid #ccc;
-        color: #333;
-      }
-      input.activity-submit {
-        color: white;
-        border-color: #3079ed;
-        background-color: #4d90fe;
-        background-image: linear-gradient(top,#4d90fe,#4787ed);
-        &:hover {
-          #goog-gt-tt {
-            .translate-form {
-              .activity-form {
-                input.activity-submit {
-                  &:focus {
-                    border-color: #3079ed;
-                    background-color: #357ae8;
-                    background-image: linear-gradient(top,#4d90fe,#357ae8);
-                  }
-                }
-              }
-            }
-          }
-          box-shadow: inset 0 0 0 1px #fff,0px 1px 1px rgba(0,0,0,0.1);
-          border-color: #3079ed;
-        }
-        &:focus {
-          border-color: #3079ed;
-        }
-        &:active {
-          border-color: #3079ed;
-        }
-      }
-      input.activity-submit.focus {
-        #goog-gt-tt {
-          .translate-form {
-            .activity-form {
-              input.activity-submit {
-                &:active {
-                  border-color: #3079ed;
-                  background-color: #357ae8;
-                  background-image: linear-gradient(top,#4d90fe,#357ae8);
-                }
-              }
-            }
-          }
-        }
-        border-color: #3079ed;
-      }
-    }
-  }
-  .gray {
-    color: #999;
-    font-family: arial,sans-serif;
-  }
-  .alt-helper-text {
-    color: #999;
-    font-size: 11px;
-    font-family: arial,sans-serif;
-    margin: 15px 0px 5px 0px;
-  }
-  .alt-error-text {
-    color: #800;
-    display: none;
-    font-size: 9pt;
-  }
-  .alt-menu.goog-menu {
-    background: #ffffff;
-    border: 1px solid #dddddd;
-    box-shadow: 0px 2px 4px #99a;
-    min-width: 0;
-    outline: none;
-    padding: 0;
-    position: absolute;
-    z-index: 2000;
-  }
-  .alt-menu {
-    .goog-menuitem {
-      cursor: pointer;
-      padding: 2px 5px 5px;
-      margin-right: 0px;
-      border-style: none;
-      h1 {
-        font-size: 100%;
-        font-weight: bold;
-        margin: 4px 0px;
-      }
-      strong {
-        color: #345aad;
-      }
-    }
-    div.goog-menuitem {
-      &:hover {
-        background: #ddd;
-      }
-    }
-  }
-  .goog-submenu-arrow {
-    text-align: right;
-    position: absolute;
-    right: 0;
-    left: auto;
-  }
-  .goog-menuitem-rtl {
-    .goog-submenu-arrow {
-      text-align: left;
-      position: absolute;
-      left: 0;
-      right: auto;
-    }
-  }
-  .gt-hl-text {
-    background-color: #f1ea00;
-    border-radius: 4px;
-    box-shadow: rgba(0,0,0,.5) 3px 3px 4px;
-    box-sizing: border-box;
-    color: #f1ea00;
-    cursor: pointer;
-    margin: -2px -2px -2px -3px;
-    padding: 2px 2px 2px 3px;
-    position: relative;
-  }
-  .trans-target-highlight {
-    background-color: #f1ea00;
-    border-radius: 4px;
-    box-shadow: rgba(0,0,0,.5) 3px 3px 4px;
-    box-sizing: border-box;
-    color: #f1ea00;
-    cursor: pointer;
-    margin: -2px -2px -2px -3px;
-    padding: 2px 2px 2px 3px;
-    position: relative;
-    color: #222;
-  }
-  .gt-hl-layer {
-    color: white;
-    position: absolute !important;
-  }
-  .trans-target {
-    background-color: #c9d7f1;
-    border-radius: 4px 4px 0px 0px;
-    box-shadow: rgba(0,0,0,.5) 3px 3px 4px;
-    box-sizing: border-box;
-    cursor: pointer;
-    margin: -2px -2px -2px -3px;
-    padding: 2px 2px 3px 3px;
-    position: relative;
-    .trans-target-highlight {
-      background-color: #c9d7f1;
-      border-radius: 4px 4px 0px 0px;
-      box-shadow: rgba(0,0,0,.5) 3px 3px 4px;
-      box-sizing: border-box;
-      cursor: pointer;
-      margin: -2px -2px -2px -3px;
-      padding: 2px 2px 3px 3px;
-      position: relative;
-    }
-  }
-  .trans-edit {
-    background-color: transparent;
-    border: 1px solid #4d90fe;
-    border-radius: 0em;
-    margin: -2px;
-    padding: 1px;
-  }
-  .gt-trans-highlight-l {
-    border-left: 2px solid red;
-    margin-left: -2px;
-  }
-  .gt-trans-highlight-r {
-    border-right: 2px solid red;
-    margin-right: -2px;
-  }
-  #alt-input {
-    padding: 2px;
-  }
-  #alt-input-text {
-    font-size: 11px;
-    padding: 2px 2px 3px;
-    margin: 0;
-    background-color: #fff;
-    color: #333;
-    border: 1px solid #d9d9d9;
-    border-top: 1px solid #c0c0c0;
-    display: inline-block;
-    vertical-align: top;
-    height: 21px;
-    box-sizing: border-box;
-    &:hover {
-      border: 1px solid #b9b9b9;
-      border-top: 1px solid #a0a0a0;
-      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
-    }
-    &:focus {
-      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
-      outline: none;
-      border: 1px solid #4d90fe;
-    }
-  }
-  #alt-input-submit {
-    font-size: 11px;
-    padding: 2px 6px 3px;
-    margin: 0 0 0 2px;
-    height: 21px;
-  }
-}
-div#goog-gt-tt {
-  padding: 10px 14px;
-}
-.gt-hl-layer {
-  clear: both;
-  font-size: 10pt;
-  position: relative;
-  text-align: justify;
-  width: 100%;
-}
-.goog-text-highlight {
-  background-color: #c9d7f1;
-  box-shadow: 2px 2px 4px #9999aa;
-  box-sizing: border-box;
-  position: relative;
-}

assets/css/main.scss

@@ -1,13 +1,12 @@
 // CSS Style Guide          : https://codeguide.co/#css
 // All variables from site's config content.
-{{- $P := .Site.Params }}
+{{ $P := .Site.Params }}
 // Base
 $scheme                     : {{ $P.scheme }};
 $darkmode                   : {{ $P.darkmode }};
 
 $body_scrollbar_overlay     : {{ $P.bodyScrollbar.overlay }};
 $body_scrollbar_stable      : {{ $P.bodyScrollbar.stable }};
-$mermaid_enable             : {{ $P.mermaid.enable }};
 $mobile_layout_economy      : {{ $P.mobileLayoutEconomy }};
 $theme_color_dark           : {{ $P.themeColor.dark }};
 $theme_color_light          : {{ $P.themeColor.light }};
@@ -70,6 +69,7 @@ $social_icons_only          : {{ $P.socialIcons.iconsOnly }};
 $social_icons_transition    : {{ $P.socialIcons.transition }};
 $links_settings_layout      : {{ $P.linksSets.layout }};
 $toc_enable                 : {{ $P.toc.enable }};
+$toc_number                 : {{ $P.toc.number }};
 $toc_expand_all             : {{ $P.toc.expandAll }};
 $toc_wrap                   : {{ $P.toc.wrap }};
 
@@ -84,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 }};
@@ -128,18 +131,18 @@ $disqusjs_enable            : false;
 $livere_enable              : {{ isset $P "livere" }};
 $utterances_enable          : {{ isset $P "utterances" }};
 $waline_enable              : {{ isset $P "waline" }};
-{{- with .Site.Params.comments }}
-{{- $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }}
+{{ with .Site.Params.comments }}
+{{ $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }}
 $two_comments_enable        : {{ $tce }};
-{{- if $tce }}
-{{- $sortNav  := sort .nav "weight" }}
+{{ if $tce }}
+{{ $sortNav  := sort .nav "weight" }}
 $two_comments_actived       : {{ .active }};
 $first_comment_color        : {{ (index $sortNav 0).color }};
 $first_comment_name         : {{ lower (index $sortNav 0).name }};
 $second_comment_color       : {{ (index $sortNav 1).color }};
 $second_comment_name        : {{ lower (index $sortNav 1).name }};
-{{- end }}
-{{- end }}
+{{ end }}
+{{ end }}
 
 // 
 // Variables Layer
@@ -175,8 +178,3 @@ $second_comment_name        : {{ lower (index $sortNav 1).name }};
 // Schemes Layer
 // --------------------------------------------------
 {{ printf "@import '_schemes/%s/';" $P.scheme }}
-
-// Custom Layer
-// TODO 
-// --------------------------------------------------
-// @import 'theme.injects.style';

assets/css/noscript.scss

@@ -3,10 +3,13 @@ body { margin-top: 2rem; }
 .use-motion .menu-item,
 .use-motion .sidebar,
 .use-motion .post-block,
+.use-motion .flinks-block,
 .use-motion .pagination,
 .use-motion .comments,
 .use-motion .post-header,
+.use-motion .flinks-header,
 .use-motion .post-body,
+.use-motion .flinks-body,
 .use-motion .collection-header {
   visibility: visible;
 }

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

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

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

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

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

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

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

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

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

@@ -1,14 +1,12 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+/* Waline comment plugin */
+NexT.plugins.comments.waline = function() {
   const element = '.waline-container';
-  if (!NexT.CONFIG.page.comments 
-    || !NexT.CONFIG.waline
+  if (!NexT.CONFIG.waline
     || !NexT.utils.checkDOMExist(element)) return; 
   
   const {
     emoji, 
     imguploader, 
-    pageview, 
     placeholder, 
     sofa,
     requiredmeta, 
@@ -19,10 +17,6 @@ document.addEventListener('DOMContentLoaded', () => {
     reactiontitle
   } = NexT.CONFIG.waline.cfg;
 
-
-  const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
-  NexT.utils.getStyle(waline_css, null);
-
   const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline.js);
 
   let locale = {
@@ -35,15 +29,14 @@ document.addEventListener('DOMContentLoaded', () => {
     locale['reaction'+index] = value;
   });
 
-  NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(waline_js, {
-    }))
-    .then(() => {
+  NexT.utils.lazyLoadComponent(element, function () {    
+    NexT.utils.getScript(waline_js, function(){
+      const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
+      NexT.utils.getStyle(waline_css, 'before');
 
       Waline.init({
         locale,
         el            : element,
-        pageview      : pageview,
         emoji         : emoji,
         imageUploader : imguploader,
         wordLimit     : wordlimit,
@@ -55,5 +48,6 @@ document.addEventListener('DOMContentLoaded', () => {
       });
 
       NexT.utils.hiddeLodingCmp(element);
+    })
   });
-});
+}

assets/js/3rd/comments/waline3.js

@@ -0,0 +1,60 @@
+/* Waline3 comment plugin */
+NexT.plugins.comments.waline3 = function () {
+  const element = '.waline3-container';
+  if (!NexT.CONFIG.waline3
+    || !NexT.utils.checkDOMExist(element)) return;
+    
+  const {
+    emoji,
+    search,
+    imguploader,
+    placeholder,
+    sofa,
+    requiredmeta,
+    serverurl,
+    wordlimit,
+    reaction,
+    reactiontext,
+    reactiontitle
+  } = NexT.CONFIG.waline3.cfg;
+
+  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline3.js);
+
+  NexT.utils.lazyLoadComponent(element, () => {
+    
+    const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline3.css);
+    NexT.utils.getStyle(waline_css, 'before');
+   
+    let waline_script = `
+      let locale = {
+        placeholder   : '${placeholder}',
+        sofa          : '${sofa}',
+        reactionTitle : '${reactiontitle}'
+      };
+
+      let recatt = ${JSON.stringify(reactiontext)}
+      recatt.forEach(function(value, index){
+        locale['reaction'+index] = value;
+      });
+    
+      import('${waline_js}').then((Waline) => {
+        Waline.init({
+          locale,
+          el            : '${element}',
+          emoji         : ${emoji},
+          search        : ${search},
+          imageUploader : ${imguploader},
+          wordLimit     : ${wordlimit},
+          requiredMeta  : ${JSON.stringify(requiredmeta)},
+          reaction      : ${reaction},
+          serverURL     : '${serverurl}',
+          dark          : 'html[data-theme="dark"]'
+        });
+
+        NexT.utils.hiddeLodingCmp('${element}');
+      });
+    `;
+    
+    NexT.utils.getScript(null, { module: true, textContent: waline_script });
+  });
+}

assets/js/3rd/others/clipboard.js

@@ -0,0 +1,57 @@
+/* clipboard plugin */
+NexT.plugins.others.clipboard = function () {
+
+  let chromaDiv = document.querySelectorAll('div.highlight div.chroma');
+  if (chromaDiv.length === 0) return;
+
+  chromaDiv.forEach(element => {
+    // Add copy button DOM.
+    let codeblock = element.querySelector('code[class]:not([class=""]');
+    let lang = codeblock.className;
+    let copyBtn = document.createElement('div');
+    copyBtn.classList.add('copy-btn');
+    codeblock.parentNode.appendChild(copyBtn);
+
+    element.addEventListener('mouseleave', () => {
+      setTimeout(() => {
+        copyBtn.classList.remove('copied','uncopied');
+      }, 300);
+    });
+
+    // Add code header show
+    var ch = document.createElement('div');
+    ch.classList.add('code-header');
+    ch.classList.add(lang);
+    ch.insertAdjacentHTML('afterbegin', 
+      '<span class="code-lang"></span><span class="collapse-btn"></span>');
+    ch.addEventListener('click', function () {       
+      element.classList.toggle('hidden-code');       
+      ch.querySelector('.collapse-btn').classList.toggle('collapse');
+    }, false);
+
+    element.parentNode.insertBefore(ch, element);
+  });
+
+  if (!NexT.CONFIG.copybtn || !NexT.CONFIG.page.clipboard) return;
+
+  const clipboard_js = NexT.utils.getCDNResource(NexT.CONFIG.page.clipboard.js);
+  NexT.utils.getScript(clipboard_js, function () {   
+    // Register the clipboard event. 
+    var clipboard = new ClipboardJS('.copy-btn', {
+      text: function (trigger) {
+        // TODO: Why there clipboard default text content with enter?
+        return trigger.previousElementSibling.textContent.trim();
+      }
+    });
+
+    clipboard.on('success', function (e) {
+      e.clearSelection();
+      e.trigger.classList.add('copied');
+    });
+
+    clipboard.on('error', function (e) {
+      console.error('Copy failed:', e);      
+      e.trigger.classList.add('uncopied');
+    });
+  }); 
+}

assets/js/3rd/others/counter.js

@@ -0,0 +1,66 @@
+/* Page's view & comment counter plugin */
+NexT.plugins.others.counter = function () {
+  let pageview_js = undefined;
+  let comment_js = undefined;
+
+  const post_meta = NexT.CONFIG.postmeta;
+
+  const views = post_meta.views;
+  if (views != undefined && views.enable) {
+    let pageview_el = '#pageview-count';
+
+    switch (views.plugin) {
+      case 'waline':
+        pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.pagecnt);
+        NexT.utils.getScript(pageview_js, function () {
+          Waline.pageviewCount({
+            selector : pageview_el,
+            serverURL: NexT.CONFIG.waline.cfg.serverurl
+          });
+        });
+        break;
+      case 'waline3':
+        pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline3.pagecnt);
+
+        let pageview_script = `
+          import('${pageview_js}').then((Waline) => {
+            Waline.pageviewCount({             
+              selector : '${pageview_el}',
+              serverURL: '${NexT.CONFIG.waline3.cfg.serverurl}'
+            })
+          });
+          `;
+        NexT.utils.getScript(null, { module: true, textContent: pageview_script });
+        break;
+    }
+
+  }
+
+  const comments = post_meta.comments;
+  if (comments != undefined && comments.enable) {
+    let comments_el = '#comments-count';
+    switch (comments.plugin) {
+      case 'waline':
+        comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.commentcnt);
+        NexT.utils.getScript(comment_js, function () {
+          Waline.commentCount({
+            selector : comments_el,
+            serverURL: NexT.CONFIG.waline.cfg.serverurl
+          });
+        });
+        break;
+      case 'waline3':
+        comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline3.commentcnt);
+        let comment_script = `
+          import('${comment_js}').then((Waline) => {
+            Waline.commentCount({             
+              selector : '${comments_el}',
+              serverURL: '${NexT.CONFIG.waline3.cfg.serverurl}'
+            })
+          });
+          `;
+        NexT.utils.getScript(null, { module: true, textContent: comment_script });
+        break;
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+/* 51La sidebar data widget */
+NexT.plugins.others.lawidget = function() {
+
+  if (!NexT.CONFIG.lawidget ) {
+    return;
+  }
+
+  const element = '#siteinfo-card-widget';
+  const lawt_js = NexT.CONFIG.lawidget.js.replace('laId', NexT.CONFIG.lawidget.id);
+  
+  NexT.utils.lazyLoadComponent(element, function () {    
+    NexT.utils.getScript(lawt_js,{
+      attributes: {
+        id: 'LA-DATA-WIDGET',
+        crossorigin: 'anonymous',
+        charset: 'UTF-8',
+        defer: true
+      },
+      parentNode: document.getElementById('la-siteinfo-widget')
+    }, NexT.utils.fmtLaWidget());
+  });
+}

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

@@ -0,0 +1,49 @@
+/* Math render plugin */
+NexT.plugins.others.math = function() {
+  const render = NexT.CONFIG.page.math.render;
+  
+  if (render === 'mathjax') {
+    const render_js = NexT.utils.getCDNResource(NexT.CONFIG.page.math.js);
+    const mathjaxCfg = `
+      window.MathJax = {
+        // 自定义内联数学公式的分隔符号
+        tex: {
+          inlineMath: [['$', '$'], ['\\(', '\\)']]
+        },
+        // SVG 渲染配置为全局共享字体缓存
+        svg: {
+          fontCache: 'global'
+        },
+        // 排除特定的HTML标签，避免过度渲染
+        options: {
+          skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "footer"],
+        }
+      };
+    `;
+    NexT.utils.getScript(null, { textContent: mathjaxCfg });
+    NexT.utils.getScript(render_js, { attributes: { id: "MathJax-script", "async": true }});
+  }
+
+  if (render === 'katex') {
+    const render_css = NexT.utils.getCDNResource(NexT.CONFIG.page.math.css);
+    NexT.utils.getStyle(render_css);
+    const render_js_list = NexT.CONFIG.page.math.js;    
+    render_js_list.forEach(js => {
+      const js_loader = NexT.utils.getScript(NexT.utils.getCDNResource(js));
+      if(js.name === 'auto-render') {
+        js_loader.then(function(){
+          renderMathInElement(document.body, {
+            delimiters: [
+                {left: '$$', right: '$$', display: true},
+                {left: '$', right: '$', display: false},
+                {left: '\\(', right: '\\)', display: false},
+                {left: '\\[', right: '\\]', display: true}
+            ],
+            
+            throwOnError : false
+          })
+        });
+      }
+    });
+  }
+}

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

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

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

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

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

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

assets/js/3rd/share/addtoany.js

@@ -0,0 +1,24 @@
+/* Addtoany share plugin */
+NexT.plugins.share.addtoany = function() {
+  const element = '.a2a_kit';
+  if (!NexT.CONFIG.share.enable || !NexT.utils.checkDOMExist(element)) return; 
+
+  const addtoany = NexT.CONFIG.share.addtoany;
+
+  if (!addtoany) return;
+
+  NexT.utils.lazyLoadComponent(element, function() {
+    let addtoany_cfg = `
+      var a2a_config = a2a_config || {};
+      a2a_config.onclick = 1;
+      a2a_config.locale = "${addtoany.locale}";
+      a2a_config.num_services = ${addtoany.num};
+    `;
+
+    NexT.utils.getScript(null, {
+      textContent: addtoany_cfg
+    });   
+    
+    NexT.utils.getScript(addtoany.js, () => { NexT.utils.hiddeLodingCmp(element); });
+  });
+}

assets/js/3rd/share/sharethis.js

@@ -0,0 +1,21 @@
+/* Sharethis share plugin */
+NexT.plugins.share.sharethis = function() {
+  const element = '.sharethis-inline-share-buttons';
+  if (!NexT.CONFIG.share.enable || !NexT.utils.checkDOMExist(element)) return; 
+
+  const sharethis = NexT.CONFIG.share.sharethis;
+
+  if (!sharethis) return;
+
+  const sharethis_js = sharethis.js.replace(/id/, sharethis.id);
+
+  NexT.utils.lazyLoadComponent(element, function() {
+    NexT.utils.getScript(sharethis_js, {
+      attributes: {
+        async: 'async'
+      }
+    });
+
+    NexT.utils.hiddeLodingCmp(element);
+  });
+}

assets/js/config.js

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

assets/js/motion.js

@@ -95,10 +95,10 @@ NexT.motion.middleWares = {
       });
     }
 
-    animate(postblock, '.post-block,.flinks-block, .pagination, .post-comments');
+    animate(postblock, '.post-block, .flinks-block, .pagination, .post-comments');
     animate(collheader, '.collection-header');
-    animate(postheader, '.post-header');
-    animate(postbody, '.post-body');
+    animate(postheader, '.post-header, .flinks-header');
+    animate(postbody, '.post-body, .flinks-body');
 
     return sequence;
   },

assets/js/next-boot.js

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

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

@@ -1,173 +0,0 @@
-(function () {
-    var gtConstEvalStartTime = new Date();
-    var h = this || self,
-        l = /^[\w+/_-]+[=]{0,2}$/,
-        m = null;
-    function n(a) {
-        return (a = a.querySelector && a.querySelector("script[nonce]")) && (a = a.nonce || a.getAttribute("nonce")) &&
-            l.test(a) ? a : ""
-    }
-    function p(a, b) {
-        function c() {}
-        c.prototype = b.prototype;
-        a.i = b.prototype;
-        a.prototype = new c;
-        a.prototype.constructor = a;
-        a.h = function (g, f, k) {
-            for (var e = Array(arguments.length - 2), d = 2; d < arguments.length; d++) e[d - 2] = arguments[d];
-            return b.prototype[f].apply(g, e)
-        }
-    }
-    function q(a) {
-        return a
-    };
-    function r(a) {
-        if (Error.captureStackTrace) Error.captureStackTrace(this, r);
-        else {
-            var b = Error().stack;
-            b && (this.stack = b)
-        }
-        a && (this.message = String(a))
-    }
-    p(r, Error);
-    r.prototype.name = "CustomError";
-    function u(a, b) {
-        a = a.split("%s");
-        for (var c = "", g = a.length - 1, f = 0; f < g; f++) c += a[f] + (f < b.length ? b[f] : "%s");
-        r.call(this, c + a[g])
-    }
-    p(u, r);
-    u.prototype.name = "AssertionError";
-    function v(a, b) {
-        throw new u("Failure" + (a ? ": " + a : ""), Array.prototype.slice.call(arguments, 1));
-    };
-    var w;
-    function x(a, b) {
-        this.g = b === y ? a : ""
-    }
-    x.prototype.toString = function () {
-        return this.g + ""
-    };
-    var y = {};
-    function z(a) {
-        var b = document.getElementsByTagName("head")[0];
-        b || (b = document.body.parentNode.appendChild(document.createElement("head")));
-        b.appendChild(a)
-    }
-    function _loadJs(a) {
-        var b = document;
-        var c = "SCRIPT";
-        "application/xhtml+xml" === b.contentType && (c = c.toLowerCase());
-        c = b.createElement(c);
-        c.type = "text/javascript";
-        c.charset = "UTF-8";
-        if (void 0 === w) {
-            b = null;
-            var g = h.trustedTypes;
-            if (g && g.createPolicy) {
-                try {
-                    b = g.createPolicy("goog#html", {
-                        createHTML: q,
-                        createScript: q,
-                        createScriptURL: q
-                    })
-                } catch (t) {
-                    h.console && h.console.error(t.message)
-                }
-                w = b
-            } else w = b
-        }
-        a = (b = w) ? b.createScriptURL(a) : a;
-        a = new x(a, y);
-        a: {
-            try {
-                var f = c && c.ownerDocument,
-                    k = f && (f.defaultView || f.parentWindow);
-                k = k || h;
-                if (k.Element && k.Location) {
-                    var e = k;
-                    break a
-                }
-            } catch (t) {}
-            e = null
-        }
-        if (e && "undefined" != typeof e.HTMLScriptElement && (!c || !(c instanceof e.HTMLScriptElement) && (c instanceof e
-                .Location || c instanceof e.Element))) {
-            e = typeof c;
-            if ("object" == e && null != c || "function" == e) try {
-                var d = c.constructor.displayName || c.constructor.name || Object.prototype.toString.call(c)
-            } catch (t) {
-                d = "<object could not be stringified>"
-            } else d = void 0 === c ? "undefined" : null === c ? "null" : typeof c;
-            v("Argument is not a %s (or a non-Element, non-Location mock); got: %s",
-                "HTMLScriptElement", d)
-        }
-        a instanceof x && a.constructor === x ? d = a.g : (d = typeof a, v(
-            "expected object of type TrustedResourceUrl, got '" + a + "' of type " + ("object" != d ? d : a ?
-                Array.isArray(a) ? "array" : d : "null")), d = "type_error:TrustedResourceUrl");
-        c.src = d;
-        (d = c.ownerDocument && c.ownerDocument.defaultView) && d != h ? d = n(d.document) : (null === m && (m = n(
-            h.document)), d = m);
-        d && c.setAttribute("nonce", d);
-        z(c)
-    }
-    function _loadCss(a) {
-        var b = document.createElement("link");
-        b.type = "text/css";
-        b.rel = "stylesheet";
-        b.charset = "UTF-8";
-        b.href = a;
-        z(b)
-    }
-    function _isNS(a) {
-        a = a.split(".");
-        for (var b = window, c = 0; c < a.length; ++c)
-            if (!(b = b[a[c]])) return !1;
-        return !0
-    }
-    function _setupNS(a) {
-        a = a.split(".");
-        for (var b = window, c = 0; c < a.length; ++c) b.hasOwnProperty ? b.hasOwnProperty(a[c]) ? b = b[a[c]] : b =
-            b[a[c]] = {} : b = b[a[c]] || (b[a[c]] = {});
-        return b
-    }
-    window.addEventListener && "undefined" == typeof document.readyState && window.addEventListener(
-        "DOMContentLoaded",
-        function () {
-            document.readyState = "complete"
-        }, !1);
-    if (_isNS('google.translate.Element')) {
-        return
-    }(function () {
-        var c = _setupNS('google.translate._const');
-        c._cest = gtConstEvalStartTime;
-        gtConstEvalStartTime = undefined;
-        c._cl = navigator.language || navigator.userLanguage;
-        c._cuc = 'googleTranslateElementInit';
-        c._cac = '';
-        c._cam = '';
-        c._ctkk = '449649.3822363247';
-        var h = 'translate.googleapis.com';
-        var s = (true ? 'https' : window.location.protocol == 'https:' ? 'https' : 'http') + '://';
-        var b = s + h;
-        c._pah = h;
-        c._pas = s;
-        // c._pbi = b + '/translate_static/img/te_bk.gif';
-        c._pbi = '';
-        c._pci = b + '/translate_static/img/te_ctrl3.gif';
-        c._pli = b + '/translate_static/img/loading.gif';
-        c._plla = h + '/translate_a/l';
-        c._pmi = b + '/translate_static/img/mini_google.png';
-        c._ps = window.translateelement_styles;
-        c._puh = 'translate.google.cn';
-        _loadCss(c._ps);
-        _loadJs(b + `/translate_static/js/element/main_${navigator.language || navigator.userLanguage}.js`);
-    })();
-})();
-
-function googleTranslateElementInit(){
-  new google.translate.TranslateElement({
-    includedLanguages: 'zh-CN,zh-TW,en,ru',
-    autoDisplay:false
-  },'google_translate_element');
-}

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

@@ -1,16 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-
-  const element = '.addthis_inline_share_toolbox';
-  if (!NexT.CONFIG.addthis || !NexT.utils.checkDOMExist(element)) return; 
-
-  const addthis_js = NexT.CONFIG.addthis.js + '?pubid=' + NexT.CONFIG.addthis.cfg.pubid;
-
-  NexT.utils.loadComments(element).then(() => {
-    NexT.utils.getScript(addthis_js, {
-      attributes: {
-        async: true
-      },
-      parentNode: document.querySelector(element)
-    });
-  });
-});

assets/js/utils.js

@@ -1,103 +1,136 @@
-/* global NexT, CONFIG */
+/* util tools */
 
-HTMLElement.prototype.wrap = function(wrapper) {
+HTMLElement.prototype.wrap = function (wrapper) {
   this.parentNode.insertBefore(wrapper, this);
   this.parentNode.removeChild(this);
   wrapper.appendChild(this);
 };
 
-(function() {
-  const onPageLoaded = () => document.dispatchEvent(
-    new Event('page:loaded', {
-      bubbles: true
-    })
-  );
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('readystatechange', onPageLoaded, { once: true });
-  } else {
-    onPageLoaded();
-  }
-  document.addEventListener('pjax:success', onPageLoaded);
-})();
-
 NexT.utils = {
+  registerAPlayer: function () {
+    this.getStyle(
+      NexT.utils.getCDNResource(NexT.CONFIG.page.music.css)
+    );
     
-  regSwitchThemeBtn: function() {
-    const switchThemeBtn = document.getElementById('switch-theme');
-    if (!switchThemeBtn) return;
-    switchThemeBtn.addEventListener('click', () => {
-      const colorTheme = document.documentElement.getAttribute('data-theme');
-      NexT.utils.toggleDarkMode(!(colorTheme == 'dark'));
-
+    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"]');
 
-  activeThemeMode: function() {
+    if (postLastmodTime != null) postTime = postLastmodTime.getAttribute("datetime");
 
-    const useDark = window.matchMedia("(prefers-color-scheme: dark)");
-    let darkModeState = NexT.CONFIG.darkmode || useDark.matches;
-    const localState = NexT.utils.getLocalStorage('theme');
-    if (localState == 'light' 
-      || (localState == undefined && !NexT.CONFIG.darkmode)) {
-      darkModeState = false;
-    }
-    NexT.utils.toggleDarkMode(darkModeState);
+    let expiredTip = '';
+    const expireCfg = NexT.CONFIG.page.expiredTips;
+    let expiredTime = this.diffDate(postTime, 2);
 
-    useDark.addListener(function(evt) {
-      toggleDarkMode(evt.matches);
-    });
-  },
-
-  toggleDarkMode: function(state) {
-    if(state) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-      NexT.utils.setLocalStorage('theme', 'dark', 2);
+    if (expiredTime.indexOf(NexT.CONFIG.i18n.ds_years) > -1) {
+      expiredTip = expireCfg.warn.split('#');
     } else {
-      document.documentElement.setAttribute('data-theme', 'light');
-      NexT.utils.setLocalStorage('theme', 'light', 2);
+      let days = parseInt(expiredTime.replace(NexT.CONFIG.i18n.ds_days, '').trim(), 10);
+      if (days < 180)  return; 
+      expiredTip = expireCfg.info.split('#');
     }
 
-    const theme = state ? 'dark' : 'light';
-    NexT.utils.toggleGiscusDarkMode(theme);
+    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;
 
-  toggleGiscusDarkMode: function(theme) {
-    const iframe = document.querySelector('iframe.giscus-frame');
-    if (iframe) {
-      const config = { setConfig: { theme: theme } };
-      iframe.contentWindow.postMessage({ giscus: config }, 'https://giscus.app');
-    }
+      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');
 
-  setLocalStorage: function(key, value, ttl) {
-    if (ttl === 0) return;
-    const now = new Date();
-    const expiryDay = ttl * 86400000;
-    const item = {
-      value: value,
-      expiry: now.getTime() + expiryDay
+    const callback = (entries) => {
+      entries.forEach(item => {
+        if (item.intersectionRatio > 0) {
+          let ele = item.target;
+          let imgSrc = ele.getAttribute('data-src');
+          if (imgSrc) {
+            let img = new Image();
+            img.addEventListener('load', function () {
+              ele.src = imgSrc;
+            }, false);
+            ele.src = imgSrc;
+            // Prevent load image again
+            ele.removeAttribute('data-src');
+          }
+        }
+      })
     };
-    localStorage.setItem(key, JSON.stringify(item));
+
+    const observer = new IntersectionObserver(callback);
+    images.forEach(img => {
+      observer.observe(img);
+    });
   },
 
-  getLocalStorage: function(key) {
-    const itemStr = localStorage.getItem(key);
-    if (!itemStr) {
-      return undefined;
+  registerImageViewer: function () {
+    const post_body = document.querySelector('.post-body');
+    if (post_body) {
+      new Viewer(post_body, { navbar: 2, toolbar: 2 });
     }
-
-    const item = JSON.parse(itemStr);
-    const now = new Date();
-
-    if (now.getTime() > item.expiry) {
-      localStorage.removeItem(key);
-      return undefined;
-    }
-    return item.value;
   },
 
-  domAddClass: function(selector, cls) {
+  registerToolButtons: function () {
+    const buttons = document.querySelector('.tool-buttons');
+
+    const scrollbar_buttons = buttons.querySelectorAll('div:not(#toggle-theme)');
+    scrollbar_buttons.forEach(button => {
+      let targetId = button.id;
+      if (targetId != '') {
+        targetId = targetId.substring(5);
+      }
+      button.addEventListener('click', () => {
+        this.slidScrollBarAnime(targetId);
+      });
+    });
+
+    buttons.querySelector('div#toggle-theme').addEventListener('click', () => {
+      const cur_theme = document.documentElement.getAttribute('data-theme');
+      window.theme.toggle(cur_theme === 'dark' ? 'light' : 'dark');
+    });
+  },
+
+  slidScrollBarAnime: function (targetId, easing = 'linear', duration = 500) {
+    const targetObj = document.getElementById(targetId);
+
+    window.anime({
+      targets: document.scrollingElement,
+      duration: duration,
+      easing: easing,
+      scrollTop: targetId == '' || !targetObj ? 0 : targetObj.getBoundingClientRect().top + window.scrollY
+    });
+  },
+
+  domAddClass: function (selector, cls) {
     const doms = document.querySelectorAll(selector);
     if (doms) {
       doms.forEach(dom => {
@@ -106,18 +139,18 @@ NexT.utils = {
     }
   },
 
-  calSiteInfo: function() {
+  fmtSiteInfo: function () {
     const runtimeCount = document.getElementById('runTimes');
     if (runtimeCount) {
       const publishDate = runtimeCount.getAttribute('data-publishDate');
-      const runTimes = NexT.utils.diffDate(publishDate, 2);
+      const runTimes = this.diffDate(publishDate, 2);
       runtimeCount.innerText = runTimes;
     }
 
     const wordsCount = document.getElementById('wordsCount');
     if (wordsCount) {
       const words = wordsCount.getAttribute('data-count');
-      wordsCount.innerText = NexT.utils.numberFormat(words);
+      wordsCount.innerText = this.numberFormat(words);
     }
 
     const readTimes = document.getElementById('readTimes');
@@ -132,7 +165,7 @@ NexT.utils = {
 
       let timesLabel;
       if (daysCount >= 1) {
-        timesLabel = daysCount + NexT.CONFIG.i18n.ds_days + parseInt((times - daysCount * day)/hour) + NexT.CONFIG.i18n.ds_hours;
+        timesLabel = daysCount + NexT.CONFIG.i18n.ds_days + parseInt((times - daysCount * day) / hour) + NexT.CONFIG.i18n.ds_hours;
       } else if (hoursCount >= 1) {
         timesLabel = hoursCount + NexT.CONFIG.i18n.ds_hours + (times - hoursCount * hour) + NexT.CONFIG.i18n.ds_mins;
       } else {
@@ -144,35 +177,39 @@ NexT.utils = {
 
     const lastPushDate = document.getElementById('last-push-date');
     if (lastPushDate) {
-      const pushDateVal = NexT.utils.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1);
+      const pushDateVal = this.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1);
       lastPushDate.innerText = pushDateVal;
     }
+  },
 
-    const statisWidget = document.querySelectorAll('#la-siteinfo-widget span');
-    if (statisWidget.length > 0) {
-      const valIds = [0,2,4,6];
-      const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv']
-      for (var i in valIds) {
-        let pv = NexT.utils.numberFormat(statisWidget[valIds[i]].innerText);
-        document.getElementById(domIds[i]).innerText = pv;
+  fmtLaWidget: function () {
+    setTimeout(function () {
+      const laWidget = document.querySelectorAll('#la-siteinfo-widget span');
+      if (laWidget.length > 0) {
+        const valIds = [0, 2, 4, 6];
+        const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv']
+        for (let i in valIds) {
+          let pv = NexT.utils.numberFormat(laWidget[valIds[i]].innerText);
+          document.getElementById(domIds[i]).innerText = pv;
+        }
       }
-    }
-
-    setTimeout(()=>{ NexT.utils.fmtBusuanzi(); }, 500);
+    }, 800);
   },
 
-  fmtBusuanzi: function() {
-    const bszUV = document.getElementById('busuanzi_value_site_uv');
-    if (bszUV) {
-      bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
-    }
-    const bszPV = document.getElementById('busuanzi_value_site_pv');
-    if (bszPV) {
-      bszPV.innerText = NexT.utils.numberFormat(bszPV.innerText);
-    }
+  fmtBusuanzi: function () {
+    setTimeout(function () {
+      const bszUV = document.getElementById('busuanzi_value_site_uv');
+      if (bszUV) {
+        bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
+      }
+      const bszPV = document.getElementById('busuanzi_value_site_pv');
+      if (bszPV) {
+        bszPV.innerText = NexT.utils.numberFormat(bszPV.innerText);
+      }
+    }, 800);
   },
 
-  numberFormat: function(number) {
+  numberFormat: function (number) {
     let result;
     if (number.indexOf(',') > 0) {
       number = number.replaceAll(",", "");
@@ -188,7 +225,7 @@ NexT.utils = {
     return result;
   },
 
-  diffDate: function(date, mode = 0) {
+  diffDate: function (date, mode = 0) {
     const dateNow = new Date();
     const datePost = new Date(date);
     const dateDiff = dateNow.getTime() - datePost.getTime();
@@ -221,10 +258,10 @@ NexT.utils = {
     } else if (mode == 2) {
       const yearCount = parseInt(dateDiff / year);
       if (yearCount >= 1) {
-        const dayCount = parseInt((dateDiff - (yearCount * year))/day);
+        const dayCount = parseInt((dateDiff - (yearCount * year)) / day);
         result = yearCount + NexT.CONFIG.i18n.ds_years + dayCount + NexT.CONFIG.i18n.ds_days;
       } else {
-        const dayCount = parseInt(dateDiff/day);
+        const dayCount = parseInt(dateDiff / day);
         result = dayCount + NexT.CONFIG.i18n.ds_days;
       }
     } else {
@@ -234,69 +271,92 @@ NexT.utils = {
     return result;
   },
 
-  checkDOMExist: function(selector) {
+  checkDOMExist: function (selector) {
     return document.querySelector(selector) != null;
   },
 
-  getCDNResource: function(res) {
-    let { plugins, router } = NexT.CONFIG.vendor;
-    let { name, version, file, alias } = res;
+  getCDNResource: function (res) {
+
+    let router = NexT.CONFIG.vendor.router;
+    let { name, version, file, alias, alias_name } = res;
 
-    let npm_name = name;
     let res_src = '';
-    switch(plugins) {
-      case 'cdnjs':
-        let cdnjs_name = alias || name;
-        let cdnjs_file = file.replace(/\.js$/, '.min.js').replace(/^(dist|lib|source\/js|)\/(browser\/|)/, '');
-        res_src = `${router}/${cdnjs_name}/${version}/${cdnjs_file}`
+
+    switch (router.type) {
+      case "modern":
+        if (alias_name) name = alias_name;
+        let alias_file = file.replace(/^(dist|lib|source|\/js|)\/(browser\/|)/, '');
+        if (alias_file.indexOf('min') == -1) {
+          alias_file = alias_file.replace(/\.js$/, '.min.js');
+        }
+        res_src = `${router.url}/${name}/${version}/${alias_file}`;
         break;
       default:
-        res_src = `${router}/${npm_name}@${version}/${file}`
+        if (alias) name = alias;
+        res_src = `${router.url}/${name}@${version}/${file}`;
+        break;
     }
 
     return res_src;
   },
 
-  replacePostCRLink: function() {
-    if (NexT.CONFIG.hostname.startsWith('http')) return;
-    // Try to support mutli domain without base URL sets.
-    let href = window.location.href;
-    if (href.indexOf('#')>-1){
-      href = href.split('#')[0];
-    }
-    let postLink = document.getElementById('post-cr-link');
-    if (!postLink) return;
-    postLink.text = href;
-    postLink.href = href;
-  },
-
   /**
    * One-click copy code support.
    */
-  registerCopyCode: function() {
+  registerCopyCode: function () {
     if (!NexT.CONFIG.copybtn) return;
 
-    let figure = document.querySelectorAll('.highlight pre');
+   /** let figure = document.querySelectorAll('.highlight pre');
     if (figure.length === 0 || !NexT.CONFIG.copybtn) return;
     figure.forEach(element => {
       let cn = element.querySelector('code').className;      
-      // TODO seems hard code need find other ways fixed it.
-      if (cn == '') return;
-      element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
+      if (cn === '') return;
+      element.children[0].insertAdjacentHTML('beforebegin', '<div class="copy-btn" data-clipboard-snippe><i class="fa fa-copy fa-fw"></i></div>');
+      var clipboard = new ClipboardJS(element.children[0],
+        { 
+          text: function(trigger) {
+            return trigger.nextElementSibling.textContent.trim();
+          }
+        });
+      clipboard.on('success', function (e) {
+        e.clearSelection();
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        button.querySelector('i').className = 'fa fa-check-circle fa-fw';
+      });
+      clipboard.on('error', function (e) {
+        console.error('复制失败:', e);
+        button.querySelector('i').className = 'fa fa-times-circle fa-fw';
+      });
       const button = element.querySelector('.copy-btn');
-      button.addEventListener('click', () => {
+      element.addEventListener('mouseleave', () => {
+        setTimeout(() => {
+          button.querySelector('i').className = 'fa fa-copy fa-fw';
+        }, 300);
+      });
+    });**/
+   /** figure.forEach(element => {
+      let cn = element.querySelector('code').className;      
+      if (cn === '') return;
+     element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
+      // element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
+      const button = element.querySelector('.copy-btn');
+      button.addEventListener('click', async () => {
         const lines = element.querySelector('.code') || element.querySelector('code');
-        const code = lines.innerText;
+        let code = lines.textContent.trim();
+        console.log('尝试复制代码:', code);
+
         if (navigator.clipboard) {
-          // https://caniuse.com/mdn-api_clipboard_writetext
           navigator.clipboard.writeText(code).then(() => {
+            console.log('复制成功');
             button.querySelector('i').className = 'fa fa-check-circle fa-fw';
-          }, () => {
+          }).catch((err) => {
+            console.error('复制失败:', err);
             button.querySelector('i').className = 'fa fa-times-circle fa-fw';
           });
         } else {
           const ta = document.createElement('textarea');
-          ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
+          ta.style.top = window.scrollY + 'px';
           ta.style.position = 'absolute';
           ta.style.opacity = '0';
           ta.readOnly = true;
@@ -304,23 +364,25 @@ NexT.utils = {
           document.body.append(ta);
           ta.select();
           ta.setSelectionRange(0, code.length);
-          ta.readOnly = false;
-          const result = document.execCommand('copy');
-          button.querySelector('i').className = result ? 'fa fa-check-circle fa-fw' : 'fa fa-times-circle fa-fw';
-          ta.blur(); // For iOS
-          button.blur();
+          try {
+            const successful = document.execCommand('copy');
+            if (!successful) throw new Error('复制命令执行失败');
+          } catch (err) {
+            console.error('复制失败:', err);
+          }
           document.body.removeChild(ta);
         }
+       
       });
       element.addEventListener('mouseleave', () => {
         setTimeout(() => {
           button.querySelector('i').className = 'fa fa-copy fa-fw';
         }, 300);
       });
-    });
+    });**/
   },
 
-  wrapTableWithBox: function() {
+  wrapTableWithBox: function () {
     document.querySelectorAll('table').forEach(element => {
       const box = document.createElement('div');
       box.className = 'table-container';
@@ -328,7 +390,7 @@ NexT.utils = {
     });
   },
 
-  registerVideoIframe: function() {
+  registerVideoIframe: function () {
     document.querySelectorAll('iframe').forEach(element => {
       const supported = [
         'www.youtube.com',
@@ -350,7 +412,7 @@ NexT.utils = {
     });
   },
 
-  registerScrollPercent: function() {
+  registerScrollPercent: function () {
     const backToTop = document.querySelector('.back-to-top');
     const readingProgressBar = document.querySelector('.reading-progress-bar');
     // For init back to top in sidebar if page was scrolled after page refresh.
@@ -379,21 +441,12 @@ NexT.utils = {
       }
       this.activateNavByIndex(index);
     }, { passive: true });
-
-    backToTop && backToTop.addEventListener('click', () => {
-      window.anime({
-        targets  : document.scrollingElement,
-        duration : 500,
-        easing   : 'linear',
-        scrollTop: 0
-      });
-    });
   },
 
   /**
    * Tabs tag listener (without twitter bootstrap).
    */
-  registerTabsTag: function() {
+  registerTabsTag: function () {
     // Binding `nav-tabs` & `tab-content` by real time permalink changing.
     document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
       element.addEventListener('click', event => {
@@ -408,7 +461,7 @@ NexT.utils = {
         // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
         const tActive = document.getElementById(element.querySelector('a').getAttribute('href').replace('#', ''));
         [...tActive.parentNode.children].forEach(target => {
-        // Array.prototype.slice.call(tActive.parentNode.children).forEach(target => {
+          // Array.prototype.slice.call(tActive.parentNode.children).forEach(target => {
           target.classList.toggle('active', target === tActive);
         });
         // Trigger event
@@ -418,9 +471,9 @@ NexT.utils = {
         if (!NexT.CONFIG.stickytabs) return;
         const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
         window.anime({
-          targets  : document.scrollingElement,
-          duration : 500,
-          easing   : 'linear',
+          targets: document.scrollingElement,
+          duration: 500,
+          easing: 'linear',
           scrollTop: offset
         });
       });
@@ -429,7 +482,7 @@ NexT.utils = {
     window.dispatchEvent(new Event('tabs:register'));
   },
 
-  registerCanIUseTag: function() {
+  registerCanIUseTag: function () {
     // Get responsive height passed from iframe.
     window.addEventListener('message', ({ data }) => {
       if (typeof data === 'string' && data.includes('ciu_embed')) {
@@ -446,36 +499,78 @@ NexT.utils = {
       const isSubPath = !NexT.CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
       target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
     });
-  },
-
-  registerLangSelect: function() {
-    const selects = document.querySelectorAll('.lang-select');
-    selects.forEach(sel => {
-      sel.value = NexT.CONFIG.page.lang;
-      sel.addEventListener('change', () => {
-        const target = sel.options[sel.selectedIndex];
-        document.querySelectorAll('.lang-select-label span').forEach(span => {
-          span.innerText = target.text;
-        });
-        // Disable Pjax to force refresh translation of menu item
-        window.location.href = target.dataset.href;
-      });
-    });
   },*/
 	
-  registerSidebarTOC: function() {
-    this.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => {
+  registerLangSelect: function() {
+    let selects = document.getElementById('lang-select');
+    if (!selects) return;
+
+    let selected = selects.querySelector('#lang-selected');
+    let selectedVal = selected.querySelectorAll('span');
+    let flagIcon = selectedVal[0];
+    let langName = selectedVal[1];
+    let selectIcon = selected.querySelector('i');
+   
+
+    let options = selects.querySelectorAll('#lang-options>div');
+    let optionsDom = options[0].parentNode;
+    options.forEach(option => {
+      option.addEventListener('click', () => {
+        let langCode = option.getAttribute('lang-code');
+        flagIcon.className = 'flag-icon flag-icon-'+langCode;
+        langName.innerHTML = option.getAttribute('lang-name');
+        selectIcon.className = 'fa fa-chevron-down';
+        optionsDom.style.opacity = '0';
+        optionsDom.style.transform = 'translateY(-10px)';
+
+        let url = option.getAttribute('lang-url');
+        
+        setTimeout(() => {
+          optionsDom.style.display = 'none';
+          window.location.href = url;
+        }, 300);
+      });
+    }); 
+
+    selected.addEventListener('mouseenter', function() {
+      selectIcon.className = 'fa fa-chevron-up';
+      optionsDom.style.display = 'block';
+      optionsDom.style.opacity = '1';
+      optionsDom.style.transform = 'translateY(0)';
+      
+    });
+
+    optionsDom.addEventListener('mouseleave', function() {
+      selectIcon.className = 'fa fa-chevron-down';
+      optionsDom.style.opacity = '0';
+      optionsDom.style.transform = 'translateY(-10px)';
+      
+      setTimeout(() => {
+        optionsDom.style.display = 'none';
+      }, 300);
+    });
+    
+  },
+
+  registerSidebarTOC: function () {
+    const toc = document.getElementById('TableOfContents');
+    if (!toc.hasChildNodes()) {
+      const tocActive = document.querySelector('.sidebar-inner');
+      tocActive.classList.remove('sidebar-nav-active', 'sidebar-toc-active');
+      tocActive.classList.add('sidebar-overview-active');
+    }
+    this.sections = [...document.querySelectorAll('.post-toc li a')].map(element => {
       const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
       // TOC item animation navigate.
       element.addEventListener('click', event => {
         event.preventDefault();
         const offset = target.getBoundingClientRect().top + window.scrollY;
         window.anime({
-          targets  : document.scrollingElement,
-          duration : 500,
-          easing   : 'linear',
+          targets: document.scrollingElement,
+          duration: 500,
+          easing: 'linear',
           scrollTop: offset,
-          complete : () => {
+          complete: () => {
             history.pushState(null, document.title, element.href);
           }
         });
@@ -484,7 +579,7 @@ NexT.utils = {
     });
   },
 
-  registerPostReward: function() {
+  registerPostReward: function () {
     const button = document.querySelector('.reward-container button');
     if (!button) return;
     button.addEventListener('click', () => {
@@ -492,22 +587,22 @@ NexT.utils = {
     });
   },
 
-  initCommontesDispaly: function(){   
+  initCommontesDispaly: function () {
     const comms = document.querySelectorAll('.comment-wrap > div');
-    if (comms.length<=1) return;
-    comms.forEach(function(item){
-      var dis = window.getComputedStyle(item, null).display;
+    if (comms.length <= 1) return;
+    comms.forEach(function (item) {
+      let dis = window.getComputedStyle(item, null).display;
       item.style.display = dis;
     });
   },
 
-  registerCommonSwitch: function() {
+  registerCommonSwitch: function () {
     const button = document.querySelector('.comment-switch .switch-btn');
     if (!button) return;
     const comms = document.querySelectorAll('.comment-wrap > div');
     button.addEventListener('click', () => {
       button.classList.toggle('move');
-      comms.forEach(function(item){        
+      comms.forEach(function (item) {
         if (item.style.display === 'none') {
           item.style.cssText = "display: block; animation: tabshow .8s";
         } else {
@@ -517,17 +612,13 @@ NexT.utils = {
     });
   },
 
-  hideCommontes:function() {
-    document.querySelector('.post-comments').style.display = 'none';
-  },
-
-  hiddeLodingCmp: function(selector) {
+  hiddeLodingCmp: function (selector) {
     const loadding = document.querySelector(selector).previousElementSibling;
     loadding.style.display = 'none';
   },
 
-  activateNavByIndex: function(index) {
-    const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
+  activateNavByIndex: function (index) {
+    const target = document.querySelectorAll('.post-toc li a')[index];
     if (!target || target.classList.contains('active-current')) return;
 
     document.querySelectorAll('.post-toc .active').forEach(element => {
@@ -543,14 +634,14 @@ NexT.utils = {
     const tocElement = document.querySelector('.sidebar-panel-container');
     if (!tocElement.parentNode.classList.contains('sidebar-toc-active')) return;
     window.anime({
-      targets  : tocElement,
-      duration : 200,
-      easing   : 'linear',
+      targets: tocElement,
+      duration: 200,
+      easing: 'linear',
       scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
     });
   },
 
-  updateSidebarPosition: function() {
+  updateSidebarPosition: function () {
     if (window.innerWidth < 992 || NexT.CONFIG.scheme === 'Pisces' || NexT.CONFIG.scheme === 'Gemini') return;
     // Expand sidebar on post detail page by default, when post has a toc.
     const hasTOC = document.querySelector('.post-toc');
@@ -564,7 +655,7 @@ NexT.utils = {
     }
   },
 
-  activateSidebarPanel: function(index) {
+  activateSidebarPanel: function (index) {
     const duration = 200;
     const sidebar = document.querySelector('.sidebar-inner');
     const panel = document.querySelector('.sidebar-panel-container');
@@ -574,41 +665,49 @@ NexT.utils = {
 
     window.anime({
       duration,
-      targets   : panel,
-      easing    : 'linear',
-      opacity   : 0,
+      targets: panel,
+      easing: 'linear',
+      opacity: 0,
       translateY: [0, -20],
-      complete  : () => {
+      complete: () => {
         // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
         sidebar.classList.replace(activeClassName[1 - index], activeClassName[index]);
         window.anime({
           duration,
-          targets   : panel,
-          easing    : 'linear',
-          opacity   : [0, 1],
+          targets: panel,
+          easing: 'linear',
+          opacity: [0, 1],
           translateY: [-20, 0]
         });
       }
     });
   },
 
-  getStyle: function(src, parent) {    
+  getStyle: function (src, position = 'after', parent) {
     const link = document.createElement('link');
     link.setAttribute('rel', 'stylesheet');
     link.setAttribute('type', 'text/css');
     link.setAttribute('href', src);
 
-    (parent || document.head).appendChild(link);
+    const head = (parent || document.head);
+    if (position === 'before') {
+      head.prepend(link);
+    } else {
+      head.append(link);
+    }
   },
 
-  getScript: function(src, options = {}, legacyCondition) {
+  getScript: function (src, options = {}, legacyCondition) {
     if (typeof options === 'function') {
       return this.getScript(src, {
         condition: legacyCondition
       }).then(options);
     }
+
     const {
       condition = false,
+      module = false,
+      textContent = undefined,
       attributes: {
         id = '',
         async = false,
@@ -628,6 +727,8 @@ NexT.utils = {
 
         if (id) script.id = id;
         if (crossOrigin) script.crossOrigin = crossOrigin;
+        if (module) script.type = 'module';
+        if (textContent != undefined) script.textContent = textContent;
         script.async = async;
         script.defer = defer;
         Object.assign(script.dataset, dataset);
@@ -638,24 +739,27 @@ NexT.utils = {
         script.onload = resolve;
         script.onerror = reject;
 
-        if (typeof src === 'object') {
-          const { url, integrity } = src;
-          script.src = url;
-          if (integrity) {
-            script.integrity = integrity;
-            script.crossOrigin = 'anonymous';
+        if (src != null && src != undefined) {
+          if (typeof src === 'object') {
+            const { url, integrity } = src;
+            script.src = url;
+            if (integrity) {
+              script.integrity = integrity;
+              script.crossOrigin = 'anonymous';
+            }
+          } else {
+            script.src = src;
           }
-        } else {
-          script.src = src;
         }
+
         (parentNode || document.head).appendChild(script);
       }
     });
   },
 
-  loadComments: function(selector, legacyCallback) {
+  lazyLoadComponent: function (selector, legacyCallback) {
     if (legacyCallback) {
-      return this.loadComments(selector).then(legacyCallback);
+      return this.lazyLoadComponent(selector).then(legacyCallback);
     }
     return new Promise(resolve => {
       const element = document.querySelector(selector);

data/config.yaml

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

data/resources.yaml

@@ -1,27 +1,81 @@
 # CDN 公共资源商列表
 # Public CDN vendor list
 vendors: 
-  cdnjs: "https://cdnjs.cloudflare.com/ajax/libs"
-  unpkg: "https://unpkg.com"
+  - name: cdnjs
+    home: "https://cdnjs.com"
+    logo: "https://cdnjs.com/_/f7a2ebfb819c118086546e481876aef6.svg"
+    type: "modern"
+    url: "https://cdnjs.cloudflare.com/ajax/libs"
+
+  - name: unpkg
+    home: "https://unpkg.com"
+    logo: "https://unpkg.fly.dev/_client/b870d5fb04d2854d.png"
+    type: "nodejs"
+    url: "https://unpkg.com"
+
+  - name: bootcdn
+    home: "https://www.bootcdn.cn"
+    logo: "https://www.bootcdn.cn/assets/img/logo.png"
+    type: "modern"
+    url: "https://cdn.bootcdn.net/ajax/libs"
+
+  - name: staticfile
+    home: "https://staticfile.net/"
+    logo: "https://www.staticfile.net/images/logo.png"
+    type: "modern"
+    url: "https://cdn.staticfile.net"
+
+  - name: 7ed
+    home: "https://www.7ed.net"
+    logo: "https://github.com/7ednet/homepage/raw/main/_images/logo.svg"
+    type: "modern"
+    url: "https://use.sevencdn.com/ajax/libs"
+
+  - name: zstatic
+    home: "https://www.zstatic.net"
+    logo: "https://www.zstatic.net/logo.png"
+    type: "modern"
+    url: "https://s4.zstatic.net/ajax/libs"
+
+  - name: zeyao
+    home: "https://cdn.jsdmirror.com/"
+    logo: "https://img.cuteapi.com/2023/08/29/Background.png"
+    type: "nodejs" 
+    url: "https://cdn.jsdmirror.com/npm"
+
+  - name: jsdelivr
+    home: "https://www.jsdelivr.com/"
+    logo: "https://www.jsdelivr.com/assets/0c183396fdb0079ea31849b02bc5e3429f1740de/img/jsdelivr-horizontal-regular.svg"
+    type: "nodejs"
+    url: "https://cdn.jsdelivr.net/npm"
 
 # JavaScript 资源
 # JavaScript Resources
 js:
   - name: animejs
-    version: 3.2.1
+    version: 3.2.2
     file: lib/anime.min.js
 
+  - name: viewerjs
+    version: 1.11.6
+    file: dist/viewer.min.js
+
 # CSS 资源
 # CSS Resources
 css:
-  - name: '@fortawesome/fontawesome-free'
-    version: 6.1.2
+  - name: font-awesome
+    version: 6.7.2
     file: css/all.min.css
-    alias: font-awesome
+    alias: '@fortawesome/fontawesome-free'
+
   - name: animate.css
     version: 3.1.1
     file: animate.min.css
 
+  - name: viewerjs
+    version: 1.11.6
+    file: dist/viewer.min.css
+
 # 第三方服务组件资源
 # 3rd servcies Resource
 
@@ -36,32 +90,51 @@ analytics:
 
 # 文章分享
 # Share
-addthis:
-  js: https://s7.addthis.com/js/300/addthis_widget.js
+share:
+  sharethis:
+    js: https://platform-api.sharethis.com/js/sharethis.js#property=id&product=inline-share-buttons&source=platform
+
+  addtoany:
+    js: https://static.addtoany.com/menu/page.js
 
 # 评论组件
 # Comment component
 waline:
   js:
-    name: '@waline/client'
-    version: 2.11.3
+    name: waline
+    version: 2.15.8
     file: dist/waline.js
-    alias: waline
+    alias: "@waline/client"
+
   css:
-    name: '@waline/client'
-    version: 2.11.3
+    name: waline
+    version: 2.15.8
     file: dist/waline.css
-    alias: waline
+    alias: "@waline/client"
+
+waline3:
+  js:
+    name: waline
+    version: 3.3.0
+    file: dist/waline.js
+    alias: "@waline/client"
+
+  css:
+    name: waline
+    version: 3.3.0
+    file: dist/waline.min.css
+    alias: "@waline/client"
 
 artalk:
   js:
     name: artalk
-    version: 2.3.4
-    file: dist/Artalk.js
+    version: 2.6.4
+    file: dist/Artalk.min.js
+
   css:
     name: artalk
-    version: 2.3.4
-    file: dist/Artalk.css
+    version: 2.6.4
+    file: dist/Artalk.min.css
 
 giscus:
   js: https://giscus.app/client.js
@@ -72,42 +145,97 @@ utterances:
 livere:
   js: https://cdn-city.livere.com/js/embed.dist.js
 
+
 # 全文搜索
 # Full text search
 algolia:
   name: algoliasearch
-  version: 4.13.0
+  version: 4.24.0
   file: dist/algoliasearch-lite.umd.js
+
 instant:
   name: instantsearch.js
-  version: 4.40.5
+  version: 4.73.2
   file: dist/instantsearch.production.min.js
 
 plugins:
   # 数学公式渲染
   mathjax:
     js:
-      - name: mathjax
-        version: 3.2.0
-        file: es5/tex-mml-chtml.js
+      name: mathjax
+      version: 3.2.2
+      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
-        alias2: katex
-        version: 0.16.0
+        alias: katex
+        alias_name: KaTeX
+        version: 0.16.15
         file: dist/contrib/auto-render.min.js
+
     css:
-      - name: katex
-        version: 0.16.0
-        file: dist/katex.min.css
+      name: katex
+      alias_name: KaTeX
+      version: 0.16.15
+      file: dist/katex.min.css
+
   # 画图渲染
   mermaid:
     js:
-      - name: mermaid
-        version: 9.1.7
-        file: dist/mermaid.min.js
+      name: mermaid
+      version: 10.9.1
+      file: dist/mermaid.min.js
+  # 文章访问/评论统计
+  waline:
+    js:
+      - name: pageview
+        alias_name: waline
+        version: 2.15.8
+        file: dist/pageview.js
+        alias: "@waline/client" 
 
+      - name: comment
+        alias_name: waline
+        version: 2.15.8
+        file: dist/comment.js
+        alias: "@waline/client"
+  waline3:
+    js:
+      - name: pageview
+        alias_name: waline
+        version: 3.3.0
+        file: dist/pageview.js
+        alias: "@waline/client" 
 
+      - name: comment
+        alias_name: waline
+        version: 3.3.0
+        file: dist/comment.js
+        alias: "@waline/client"
+  # 音乐播放器
+  music:
+    js:
+      - name: aplayer
+        version: 1.10.1
+        file: dist/APlayer.min.js
+      
+      - name: meting
+        version: 2.0.1
+        file: dist/Meting.min.js
+
+    css:
+      name: aplayer
+      version: 1.10.1
+      file: dist/APlayer.min.css
+  # 复制到剪贴板
+  clipboard:
+    js: 
+      name: clipboard
+      version: 2.0.11
+      file: dist/clipboard.min.js

exampleSite/content/about/index.en-us.md

@@ -0,0 +1,29 @@
+---
+title: "About Hugo NexT Organization"
+
+date: 2025-01-25T18:00:52+08:00
+lastmod: 2025-01-25T18:00:52+08:00
+
+share: false
+followme: false
+nav: false
+copyright: false
+url: about.html
+---
+
+The `Hugo NexT` organization is jointly established by numerous friends from around the world who are fond of the `NexT` theme and style. The aim is to continue promoting and enhancing this theme within the `Hugo` engine. We warmly welcome you to join us!
+
+# Our Vision
+
+Continuing the classic black-and-white color scheme of `NexT`, it maintains simple usability and powerful functionality.
+
+# Usage Feedback
+
+- Join the online discussions on [GitHub Discussions](https://github.com/hugo-next/hugo-theme-next/discussions) or [Gitter](https://gitter.im/hugo-next/community) :beers:
+- [GitHub Issues](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Bug&template=bug-report.md) Submit a bug report :bug:
+- [GitHub Feature](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Feature+Request&template=feature-request.md) to propose new feature ideas :sparkles:
+
+> [!INFO]
+> Chinese's users can also join the QQ group for communication: 604710815
+
+{{< music url="/music/sky.mp3" name="City of the Sky" artist="Hayao Miyazaki" cover="/music/gongqijun.jpg" autoplay="true" >}}

exampleSite/content/about/index.md

@@ -1,6 +1,5 @@
 ---
 title: "关于 Hugo NexT 组织"
-description: "Hugo NexT 组织介绍说明。"
 
 date: 2022-06-09T20:12:52+08:00
 lastmod: 2022-06-09T20:12:52+08:00
@@ -24,4 +23,7 @@ url: about.html
 - [GitHub Issues](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Bug&template=bug-report.md) 提交错误报告 :bug:
 - [GitHub Feature](https://github.com/hugo-next/hugo-theme-next/issues/new?labels=Feature+Request&template=feature-request.md) 表新功能的想法 :sparkles:
 
+> [!INFO]
 > 同时国内用户也可加入 QQ 群交流： 604710815
+
+{{< music url="/music/sky.mp3" name="天空之城" artist="宫崎骏" cover="/music/gongqijun.jpg" autoplay="true" >}}

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

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

exampleSite/content/flinks/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

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

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

@@ -0,0 +1,36 @@
+--- 
+title:  "Welcome to the Hugo NexT organization"
+description: "Hugo NexT is a theme specifically designed for the Hugo engine, maintaining simplicity, ease of use, and powerful functionality! "
+Keywords: "Hugo, NexT, organization"
+
+date: 2025-01-25T20:59:12+08:00
+lastmod: 2025-01-25T20:59:12+08:00
+
+categories:
+  - Example
+tags:
+  - Hugo
+  - NexT
+
+expand: true
+extlink:  https://gitee.com/hugo-next/hugo-theme-next/
+
+weight: 1
+---
+
+Welcome to the Hugo NexT documentation site! It is from [Theme NexT](https://theme-next.js.org/) The transplanted one is [Hugo](https://gohugo.io/) The high-quality and elegant theme created maintains its easy-to-use features and powerful functionality.
+
+
+
+## User Guide
+
+Setting up a NexT theme is easy. Simply follow the documentation to quickly create your personal website!
+
+## Feedback
+
+- Visit the Awesome NexT list to share plugins and tutorials with other users.
+- Join our Gitter chat.
+- Add or improve translations within seconds.
+- Report one in GitHub Issues :bug: .
+- Apply for a new feature on GitHub.
+- Request a vote for the most popular feature.

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

@@ -7,17 +7,14 @@ date: 2022-06-01T15:59:41+08:00
 lastmod: 2022-06-01T15:59:41+08:00
 
 categories:
- - 示例
+ - 示例文章
 tags:
  - Hugo
  - NexT
 
 expand: true
 extlink: https://gitee.com/hugo-next/hugo-theme-next/
-#comment:
-# enable: false
-#toc: false
-#url: "external-link.html"
+
 weight: 1
 ---
 

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

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

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

@@ -7,17 +7,19 @@ lastmod: 2022-06-03T11:52:18+08:00
 publishDate: 2022-06-03T11:52:18+08:00
 
 author: Mainroad
-originLink: https://mainroad-demo.netlify.app/post/basic-elements/
+originLink: https://mainroad-demo.netlify.app/demo/basic-elements/
 
 categories:
- - 示例
+ - 示例文章
+ - Markdown语法
+ 
 tags:
  - Markdown
  - 语法
 
 toc: false
 draft: false
-url: post/markdown-syntax.html
+url: demo/markdown-syntax.html
 ---
 
 仅以此篇文章来测试下在 `NexT` 主题中在通过 `Hugo` 引擎来建站时，是否支持 `Markdown` 文件内容中所写的各种语法，并展示下实际的效果。
@@ -38,7 +40,7 @@ url: post/markdown-syntax.html
 
 ## 段落格式
 
-根据[ W3C ](https://www.w3.org/)定义的[ HTML5 规范](https://www.w3.org/TR/html5/dom.html#elements)，**HTML 文档由元素和文本组成**。每个元素的组成都由一个[开始标记](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags)表示，例如： `<body>` ，和[结束标记](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags)表示，例如： `</body>` 。（*某些开始标记和结束标记在某些情况下可以省略，并由其他标记暗示。*）
+根据[W3C](https://www.w3.org/)定义的[HTML5 规范](https://www.w3.org/TR/html5/dom.html#elements)，**HTML 文档由元素和文本组成**。每个元素的组成都由一个[开始标记](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags)表示，例如： `<body>` ，和[结束标记](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags)表示，例如： `</body>` 。（*某些开始标记和结束标记在某些情况下可以省略，并由其他标记暗示。*）
 元素可以具有属性，这些属性控制元素的工作方式。例如：超链接是使用 `a` 元素及其 `href` 属性形成的。
 
 ### Markdown 语法
@@ -46,14 +48,14 @@ url: post/markdown-syntax.html
 ```markdown
 ![图像说明](图像地址)
 ```
-![hugo-next-primary](//lisenhui.gitee.io/imgs/hugo-next/logo/hugo-next-primary.png)
+![hugo-next-primary](//hugo-next.github.io/imgs/logo/hugo-next-primary.png)
 
 ### HTML IMG 标签
 
 ```html
 <img src="图像地址" width="宽度" height="高度" />
 ```
-<img src="//lisenhui.gitee.io/imgs/hugo-next/logo/hugo-next-secondary.png" width="150"/>
+<img src="//hugo-next.github.io/imgs/logo/hugo-next-secondary.png" width="150"/>
 
 ### SVG 格式
 
@@ -111,7 +113,7 @@ url: post/markdown-syntax.html
 <dl>
   <dt>Hugo 目录结构</dt>
   <dd>assets</dd>
-  <dd>config.toml</dd>
+  <dd>hugo.toml</dd>
   <dd>content</dd>
   <dd>data</dd>
   <dd>theme</dd>
@@ -165,6 +167,8 @@ url: post/markdown-syntax.html
 
 ## Code
 
+使用 Markdown 语法书写代码块：
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -178,7 +182,9 @@ url: post/markdown-syntax.html
 </html>
 ```
 
-{{< highlight html >}}
+使用Hugo自带的 `highlight` 短语标注代码块：
+
+{{< highlight html "hl_lines=2 5-7, linenostart=44" >}}
 <!DOCTYPE html>
 <html lang="en">
 <head>

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

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

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

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

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

@@ -0,0 +1,66 @@
+---
+title: "Article Catalog Navigation"
+description: "Describe the navigation effect of the article directory under NexT theme."
+keywords: "Article, Table of Contents, Navigation"
+
+date: 2025-01-25T20:58:52+08:00
+lastmod: 2025-01-25T20:58:52+08:00
+
+categories:
+ - Example
+tags:
+  - Table of Contents
+  - Navigation
+  - Blog
+
+toc: true
+url: demo/table-of-content.html
+---
+
+General Patton once said, "The measure of a person's success is not by standing at the peak, but by the rebound force after falling from the peak." Chu Shijian's life was like this: he became wealthy in middle age, gained both fame and fortune, and then fell to the bottom again. He started his own business at the age of 74, returned with Chu Cheng 10 years later, and made a comeback with billions of wealth. His development trajectory was a process of rebound.
+
+<!--more-->
+
+![Old Man](https://wfqqreader-1252317822.image.myqcloud.com/cover/568/814568/t6_814568.jpg)
+
+## Early stories
+### Starting from
+
+In the spring of 2014, at the border of Huaning County and Yiliang County in Yunnan Province, a small mountain village called Yize had an old courtyard house with a history of over a hundred years demolished. The village committee is leading the villagers in the construction of a "beautiful countryside". In one year, the old village houses will no longer be visible, replaced by new reinforced concrete residential buildings. Just like the transformation of Chinese cities 10 or 20 years ago, this small village surrounded by mountains has also begun to fall into the "construction site mode".
+
+#### Childhood waves
+
+Almost all children who grow up by the river have an undeniable talent: good at water. Chu Shijian is no exception. Not only has he developed excellent swimming skills in the Nanpan River and flower ponds since childhood, but at the age of five or six, he can already dive far with a fierce spear. Moreover, he has been able to catch fish in the ponds on the Nanpan River and riverbanks since the age of seven or eight.
+
+### Youth stories
+
+Chu Shijian's more than ten years of living freely in the countryside were actually more than ten years of turbulent Chinese society. Especially after the Lugou Bridge Incident in 1937, the Japanese launched a full-scale invasion of China, and in just two or three years, most of China's territory fell one after another
+
+## Ten Years of Passionate Youth
+### Becoming a guerrilla fighter
+
+In the summer of 1948, Chu Shijian returned to his hometown and became a teacher at Lufeng Railway Station Primary School. At the same time, he continued to maintain contact with the Communist Party organization with Chu Shiren and Chu Shijie, and did some work of transmitting intelligence
+
+#### War is raging
+
+Due to the significant disparity in combat effectiveness, guerrilla forces can only rely on exchanging one shot for another, specifically targeting weak areas of the enemy to attack, but more often than not, they are defending and shifting positions.
+
+### Embrace liberation
+
+In December 1949, Lu Han, the Chairman of the Nationalist Party in Yunnan Province, announced an uprising in Kunming, marking the official beginning of Yunnan's liberation. On February 20, 1950, Chen Gong, Song Renqiong, and Zhou Baozhong led the Fourth Corps of the Second Field Army of the People's Liberation Army into Kunming. On February 24, Chen Gong declared the liberation of the entire Yunnan province.
+
+## The discontinuity of life
+### Falling into the bottom of life
+
+The people who were overthrown in the "anti rightist" movement had only one way to go after their "rightist" identity was determined: to be demoted to the farm. A farm is truly a place for farming, where one must live the same life as a farmer.
+
+## Conclusion
+### Time is like a river
+
+In 2015, it was the 60th anniversary of Chu Shijian and Ma Jingfen's marriage, known as the commemorative year of the "diamond wedding". This is simply a reward in life. With the increasing divorce rate in China, a 60 year marriage is almost like a dream from a past life. With the companionship of a child, Chu Shijian and Ma Jingfen have experienced various storms of the country and individuals, and faced life and death together. They are not only husband and wife, but also a pair of comrades in arms. Although Ma Jingfen occasionally complains about Chu Shijian's carelessness when he was young, in the end, she would say, "Without me, there would be no him, and without him, there would be no me
+
+## Author thanks
+
+This book started interviewing in early summer 2014 and has been completed today, taking 18 months. The 'author' on the cover can only be my name, but only I know that this book contains the hearts and minds of too many people. Of course, I would like to first thank Mr. Wang Shi. Without him, there would be no book. Upon careful consideration, I realize that without Mr. Wang Shi's constant urging and encouragement, and without my writing work today. Since I started working as a professional writer in 2006, he has created many opportunities for me to write and has generously shared his life and learning experiences and insights with me. Thank you very much for your kindness.
+
+Finally, I would like to express my greatest gratitude to Mr. Chu Shijian. Not only because he was generous and candid in facing my various questions, but more importantly, in the process of listening to his story, his prosperous life experience, strong vitality, and his pure heart towards life and career also enriched my thinking about my own life.

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

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

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

@@ -7,20 +7,19 @@ date: 2022-09-10T21:02:32+08:00
 lastmod: 2022-09-10T21:02:32+08:00
 
 categories:
-  - 示例
+  - 示例文章
+
 tags:
   - 自定义
   - 个性化
   - 布局
 
-url: "post/custom-files.html"
+url: "demo/custom-files.html"
 toc: true
 ---
 
 对于熟悉前端开发的用户来说，可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。其中布局方面主要是支持左侧边栏的站点概览部分，以及站点底部2个位置，但样式的重置可以是整个站点的任意位置。
 
-<!--more-->
-
 ## 打开配置参数
 
 首先要明确在配置文件的 `params` 区域中有配置如下参数：
@@ -38,7 +37,7 @@ customFilePath:
 
 {{< /note >}}
 
-然后在站点的根目录下创建 `layouts/partials` 2个目录，用于存放自定布局设计文件，另外在站点根目录下创建 `statics/css` 2个目录，用于存放自定义 CSS 样式文件。一切就绪后，就可以参考如下的步骤，完成自己的设计想法。
+然后在站点的根目录下创建 `layouts/partials` 2个目录，用于存放自定布局设计文件，另外在站点根目录下创建 `static/css` 2个目录，用于存放自定义 CSS 样式文件。一切就绪后，就可以参考如下的步骤，完成自己的设计想法。
 
 ## 侧边栏设计
 
@@ -64,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

@@ -0,0 +1,45 @@
+---
+title: "没有H1-6标题头和评论的文章"
+description: "用于测试在没有H1-6标题头时，文章的目录导航是否会直接关闭，并关闭评论功能。"
+keywords: "toc,header"
+
+date: 2022-10-06T09:02:26+08:00
+lastmod: 2022-10-30T21:03:16+08:00
+
+categories:
+  - 示例文章
+tags:
+  - toc
+  - 标题
+
+comment:
+  enable: false
+url: "demo/no-header-title.html"
+expired: true
+---
+
+刘慈欣2018克拉克奖获奖感言（部分内容节选）。
+
+> [!INFO]
+> 用于测试在没有H1-6标题头时，文章的目录导航是否会直接关闭，并关闭评论功能。
+
+<!--more-->
+
+先生们、女士们，晚上好，
+
+很荣幸获得Clarke Award for Imagination in Service to Society Award。
+
+这个奖项是对想象力的奖励，而想象力是人类所拥有的一种似乎只应属于神的能力，它存在的意义也远超出我们的想象。有历史学家说过，人类之所以能够超越地球上的其它物种建立文明，主要是因为他们能够在自己的大脑中创造出现实中不存在的东西。在未来，当人工智能拥有超过人类的智力时，想象力也许是我们对于它们所拥有的惟一优势。
+
+科幻小说是基于想象力的文学，而最早给我留下深刻印象的是Arthur . Clarke的作品。除了Jules Verne和George Wells外，Clarke的作品是最早进入中国的西方现代科幻小说。在上世纪八十年代初，中国出版了他的《2001:A Space Odyssey》和《Rendezvous With Rama》。当时文革刚刚结束，旧的生活和信仰已经崩塌，新的还没有建立起来，我和其他年轻人一样，心中一片迷茫。这两本书第一次激活了我想象力，思想豁然开阔许多，有小溪流进大海的感觉。读完《2001:A Space Odyssey》的那天深夜，我走出家门仰望星空，那时的中国的天空还没有太多的污染，能够看到银河，在我的眼中，星空与过去完全不一样了，我第一次对宇宙的宏大与神秘产生了敬畏感，这是一种宗教般的感觉。而后来读到的《Rendezvous With Rama》，也让我惊叹如何可以用想象力构造一个栩栩如生的想象世界。正是Clarke带给我的这些感受，让我后来成为一名科幻作家。
+
+现在，三十多年过去了，我渐渐发现，我们这一代在上世纪六十年代出生于中国的人，很可能是人类历史上最幸运的人，因为之前没有任何一代人，像我们这样目睹周围的世界发生了如此巨大的变化，我们现在生活的世界，与我们童年的世界已经完全是两个不同的世界，而这种变化还在加速发生着。中国是一个充满着未来感的国度，中国的未来可能充满着挑战和危机，但从来没有像现在这样具有吸引力，这就给科幻小说提供了肥沃的土壤，使其在中国受到了空前的关注，作为一个在六十年代出生在中国的科幻小说家，则是幸运中的幸运。
+
+我期待有那么一天，像那些曾经描写过信息时代的科幻小说一样，描写太空航行的科幻小说也变的平淡无奇了，那时的火星和小行星带都是乏味的地方，有无数的人在那里谋生；木星和它众多的卫星已成为旅游胜地，阻止人们去那里的唯一障碍就是昂贵的价格。
+
+但即使在这个时候，宇宙仍是一个大的无法想象的存在，距我们最近的恒星仍然遥不可及。浩瀚的星空永远能够承载我们无穷的想象力。
+
+谢谢大家。
+
+
+> [点击阅读全文](https://weread.qq.com/web/reader/ce032b305a9bc1ce0b0dd2akecc32f3013eccbc87e4b62e)

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

@@ -7,13 +7,14 @@ date: 2022-06-07T19:09:52+08:00
 lastmod: 2022-06-07T19:09:52+08:00
 
 categories:
- - 示例
+ - 示例文章
+ - 语法
 tags:
   - 语法
   - 高亮
   - Chroma
 
-url: post/syntax-highlighting.html
+url: demo/syntax-highlighting.html
 ---
 
 Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用 Chroma 作为代码块高亮支持，它内置在 Go 语言当中，速度是真的非常、非常快，而且最为重要的是它也兼容之前我们使用的 Pygments 方式。
@@ -26,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 {
@@ -47,14 +65,14 @@ func GetTitleFunc(style string) func(s string) string {
 import javax.swing.JFrame;  //Importing class JFrame
 import javax.swing.JLabel;  //Importing class JLabel
 public class HelloWorld {
-    public static void main(String[] args) {
-        JFrame frame = new JFrame();           //Creating frame
-        frame.setTitle("Hi!");                 //Setting title frame
-        frame.add(new JLabel("Hello, world!"));//Adding text to frame
-        frame.pack();                          //Setting size to smallest
-        frame.setLocationRelativeTo(null);     //Centering frame
-        frame.setVisible(true);                //Showing frame
-    }
+  public static void main(String[] args) {
+    JFrame frame = new JFrame();           //Creating frame
+    frame.setTitle("Hi!");                 //Setting title frame
+    frame.add(new JLabel("Hello, world!"));//Adding text to frame
+    frame.pack();                          //Setting size to smallest
+    frame.setLocationRelativeTo(null);     //Centering frame
+    frame.setVisible(true);                //Showing frame
+  }
 }
 ```
 
@@ -66,7 +84,7 @@ print "Hello, world!"
 
 ### Git 对比
 
-``` diff {hl_lines=[4,"6-7"]， linenos=true}
+```diff {hl_lines=[4,"6-7"], linenos=true}
 *** /path/to/original ''timestamp''
 --- /path/to/new  ''timestamp''
 ***************
@@ -142,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脚本等各主流的代码语言高亮显示，可自行测试效果。