Merge branch 'master' into dev

README.md

@@ -44,9 +44,8 @@ Github Pages: [https://dy.ttentau.top/](https://dy.ttentau.top/)
 
 【模仿抖音系列】一：[200行代码实现类似Swiper.js的轮播组件](https://juejin.cn/post/7360512664317018146)  
 【模仿抖音系列】二：[实现抖音 “视频无限滑动“效果](https://juejin.cn/post/7361614921519054883)  
-【模仿抖音系列】三：[Vue 路由使用介绍以及添加转场动画](https://juejin.cn/post/7362528152777130025) 
-
-更多文章正在准备中...
+【模仿抖音系列】三：[Vue 路由使用介绍以及添加转场动画](https://juejin.cn/post/7362528152777130025)  
+【模仿抖音系列】四：[Vue 有条件路由缓存，就像传统新闻网站一样](https://juejin.cn/post/7365334891473240101)
 
 ## 运行
 注意：本项目仅适用于学习和研究，不得用于商业使用

docs/README.de.md

@@ -25,8 +25,9 @@
 
 ## Online-Zugang
 
-Gitee-Seiten:<https://zyronon.gitee.io/douyin/>(Es wird empfohlen, diese Adresse in China zu besuchen)  
-Hinweis: Gitee-Seiten können derzeit nicht aktualisiert werden, da der Code nicht aktuell ist. Wenn Sie die Firewall umgehen können, empfehle ich den Besuch der folgenden Adresse:
+[//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址)   "
+
+[//]: # "注意：Gitee Pages现在无法更新，代码不是最新的。如果你能翻墙推荐访问下面地址  "
 
 Github-Seiten:<https://dy.ttentau.top/>
 
@@ -48,9 +49,8 @@ Github-Seiten:<https://dy.ttentau.top/>
 
 \[Imitation Douyin-Serie] 1:[200 Codezeilen zur Implementierung einer Karussellkomponente ähnlich Swiper.js](https://juejin.cn/post/7360512664317018146)  
 \[Imitation Douyin-Serie] 2:[Verwirklichen Sie den „unendlich gleitenden Video“-Effekt auf Douyin](https://juejin.cn/post/7361614921519054883)  
-\[Imitation Douyin-Serie] Drei:[Einführung in die Verwendung von Vue-Routing und das Hinzufügen von Übergangsanimationen](https://juejin.cn/post/7362528152777130025)
-
-Weitere Artikel sind in Vorbereitung...
+\[Imitation Douyin-Serie] Drei:[Einführung in die Verwendung des Vue-Routings und das Hinzufügen von Übergangsanimationen](https://juejin.cn/post/7362528152777130025)  
+\[Imitation Douyin-Serie] Vier:[Bedingtes Routen-Caching von Vue, genau wie bei herkömmlichen Nachrichtenseiten](https://juejin.cn/post/7365334891473240101)
 
 ## laufen
 
@@ -60,8 +60,20 @@ Hinweis: Dieses Projekt ist nur für Studien- und Forschungszwecke geeignet, nic
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
 
+### Auf Docker bereitstellen
+
+```bash
+# pull Docker image
+docker pull ghcr.io/zyronon/douyin-vue:latest
+
+# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+```
+
 ### lokale Entwicklung
 
+**Hinweis: Der Git-Befehl muss geklont werden, damit er ausgeführt werden kann. Das Herunterladen des ZIP-Pakets ist nicht möglich. Wenn die Klongeschwindigkeit zu langsam ist, wird empfohlen, die Gitee-Adresse zu verwenden**
+
 ```bash
 git clone https://gitee.com/zyronon/douyin.git (中国使用)
           https://github.com/zyronon/douyin.git 

docs/README.en.md

@@ -4,7 +4,7 @@
 
 <p align="center">
  <a href="README.en.md">English</a> | <a href="README.es.md">Spanish</a> | <a href="README.de.md">German</a> | 
-<a href="README.fr.md">French</a> | <a href="../README.md">简体中文</a> |  <a href="README.ja.md">日本語</a> 
+<a href="README.fr.md">French</a> | <a href="README.md">简体中文</a> |  <a href="README.ja.md">日本語</a> 
 </p>
 
 <p align="center">
@@ -16,17 +16,18 @@
 `douyin-vue`is a parody`抖音|TikTok`mobile short video project.`Vue`"Best practices" on the mobile side, comparable to native`App`Silky and smooth experience. Used the latest`Vue`technology stack, based on[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)accomplish. The data is saved locally in the project through[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)The library intercepts the API and returns local json data to simulate real backend requests.
 
 <div>
-<img width="150px" src='imgs/1.gif' />
-<img width="150px" src='imgs/2.gif' />
-<img width="150px" src='imgs/3.gif' />
-<img width="150px" src='imgs/4.gif' />
-<img width="150px" src='imgs/5.gif' />
+<img width="150px" src='docs/imgs/1.gif' />
+<img width="150px" src='docs/imgs/2.gif' />
+<img width="150px" src='docs/imgs/3.gif' />
+<img width="150px" src='docs/imgs/4.gif' />
+<img width="150px" src='docs/imgs/5.gif' />
 </div>
 
 ## Online access
 
-Gitee Pages:<https://zyronon.gitee.io/douyin/>(It is recommended to visit this address in China)  
-Note: Gitee Pages cannot be updated now, the code is not up to date. If you can circumvent the firewall, I recommend visiting the following address:
+[//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址)   "
+
+[//]: # "注意：Gitee Pages现在无法更新，代码不是最新的。如果你能翻墙推荐访问下面地址  "
 
 Github Pages:<https://dy.ttentau.top/>
 
@@ -48,9 +49,8 @@ Github Pages:<https://dy.ttentau.top/>
 
 \[Imitation Douyin Series] 1:[200 lines of code to implement a carousel component similar to Swiper.js](https://juejin.cn/post/7360512664317018146)  
 \[Imitation Douyin Series] 2:[Realize the "infinite sliding video" effect on Douyin](https://juejin.cn/post/7361614921519054883)  
-\[Imitation Douyin Series] Three:[Introduction to using Vue routing and adding transition animations](https://juejin.cn/post/7362528152777130025)
-
-More articles are in preparation...
+\[Imitation Douyin Series] Three:[Introduction to using Vue routing and adding transition animations](https://juejin.cn/post/7362528152777130025)  
+\[Imitation Douyin Series] Four:[Vue conditional route caching, just like traditional news sites](https://juejin.cn/post/7365334891473240101)
 
 ## run
 
@@ -60,8 +60,20 @@ Note: This project is only suitable for study and research, not for commercial u
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
 
+### Deploy to Docker
+
+```bash
+# pull Docker image
+docker pull ghcr.io/zyronon/douyin-vue:latest
+
+# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+```
+
 ### local development
 
+**Note: The git command must be cloned to run. Downloading the zip package cannot run. If the clone speed is too slow, it is recommended to use the gitee address**
+
 ```bash
 git clone https://gitee.com/zyronon/douyin.git (中国使用)
           https://github.com/zyronon/douyin.git 
@@ -101,7 +113,7 @@ The above content is all public information on the Internet
 The project is currently in the early stages of development, and new features are being added continuously. If you have any features or suggestions for the software, please feel free to contact us.`Issues`raised in
 If you also like the design ideas of this software, please submit it`PR`, thank you very much for your support!
 
-## 联系我
+## contact me
 
 You can contact my email<a href="mailto:zyronon@163.com">zyronon@163.com</a>
 

docs/README.es.md

@@ -4,7 +4,7 @@
 
 <p align="center">
  <a href="README.en.md">English</a> | <a href="README.es.md">Spanish</a> | <a href="README.de.md">German</a> | 
-<a href="README.fr.md">French</a> | <a href="../README.md">简体中文</a> |  <a href="README.ja.md">日本語</a> 
+<a href="README.fr.md">French</a> | <a href="README.md">简体中文</a> |  <a href="README.ja.md">日本語</a> 
 </p>
 
 <p align="center">
@@ -16,17 +16,18 @@
 `douyin-vue`es una parodia`抖音|TikTok`Proyecto de vídeo corto móvil.`Vue`"Mejores prácticas" en el lado móvil, comparables a las nativas`App`Experiencia sedosa y suave. Usado lo último`Vue`pila de tecnología, basada en[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)lograr. Los datos se guardan localmente en el proyecto a través de[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)La biblioteca intercepta la API y devuelve datos json locales para simular solicitudes de backend reales.
 
 <div>
-<img width="150px" src='imgs/1.gif' />
-<img width="150px" src='imgs/2.gif' />
-<img width="150px" src='imgs/3.gif' />
-<img width="150px" src='imgs/4.gif' />
-<img width="150px" src='imgs/5.gif' />
+<img width="150px" src='docs/imgs/1.gif' />
+<img width="150px" src='docs/imgs/2.gif' />
+<img width="150px" src='docs/imgs/3.gif' />
+<img width="150px" src='docs/imgs/4.gif' />
+<img width="150px" src='docs/imgs/5.gif' />
 </div>
 
 ## Acceso en linea
 
-Páginas de casas rurales:<https://zyronon.gitee.io/douyin/>(Se recomienda visitar esta dirección en China)  
-Nota: Las páginas de Gitee no se pueden actualizar ahora, el código no está actualizado. Si puede eludir el firewall, le recomiendo visitar la siguiente dirección:
+[//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址)   "
+
+[//]: # "注意：Gitee Pages现在无法更新，代码不是最新的。如果你能翻墙推荐访问下面地址  "
 
 Páginas de Github:<https://dy.ttentau.top/>
 
@@ -48,9 +49,8 @@ Páginas de Github:<https://dy.ttentau.top/>
 
 \[Serie Imitación Douyin] 1:[200 líneas de código para implementar un componente carrusel similar a Swiper.js](https://juejin.cn/post/7360512664317018146)  
 \[Serie Imitación Douyin] 2:[Realice el efecto de "vídeo deslizante infinito" en Douyin](https://juejin.cn/post/7361614921519054883)  
-\[Serie Imitación Douyin] Tres:[Introducción al uso del enrutamiento de Vue y la adición de animaciones de transición](https://juejin.cn/post/7362528152777130025)
-
-Más artículos están en preparación...
+\[Serie Imitación Douyin] Tres:[Introducción al uso del enrutamiento de Vue y la adición de animaciones de transición](https://juejin.cn/post/7362528152777130025)  
+\[Serie Imitación Douyin] Cuatro:[Almacenamiento en caché de rutas condicionales de Vue, al igual que los sitios de noticias tradicionales](https://juejin.cn/post/7365334891473240101)
 
 ## correr
 
@@ -60,8 +60,20 @@ Nota: Este proyecto sólo es apto para estudio e investigación, no para uso com
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
 
+### Implementar en Docker
+
+```bash
+# pull Docker image
+docker pull ghcr.io/zyronon/douyin-vue:latest
+
+# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+```
+
 ### desarrollo local
 
+**Nota: El comando git debe clonarse para ejecutarse. No se puede ejecutar la descarga del paquete zip. Si la velocidad de clonación es demasiado lenta, se recomienda utilizar la dirección del albergue**
+
 ```bash
 git clone https://gitee.com/zyronon/douyin.git (中国使用)
           https://github.com/zyronon/douyin.git 

docs/README.fr.md

@@ -25,8 +25,9 @@
 
 ## Accès en ligne
 
-Pages du gîte :<https://zyronon.gitee.io/douyin/>(Il est recommandé de visiter cette adresse en Chine)  
-Remarque : Les pages Gitee ne peuvent pas être mises à jour pour le moment, le code n'est pas à jour. Si vous pouvez contourner le pare-feu, je vous recommande de visiter l'adresse suivante :
+[//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址)   "
+
+[//]: # "注意：Gitee Pages现在无法更新，代码不是最新的。如果你能翻墙推荐访问下面地址  "
 
 Pages GitHub :<https://dy.ttentau.top/>
 
@@ -48,9 +49,8 @@ Pages GitHub :<https://dy.ttentau.top/>
 
 \[Série Imitation Douyin] 1 :[200 lignes de code pour implémenter un composant carrousel similaire à Swiper.js](https://juejin.cn/post/7360512664317018146)  
 \[Série Imitation Douyin] 2 :[Réaliser l'effet "vidéo coulissante infinie" sur Douyin](https://juejin.cn/post/7361614921519054883)  
-\[Série Imitation Douyin] Trois :[Introduction à l'utilisation du routage Vue et à l'ajout d'animations de transition](https://juejin.cn/post/7362528152777130025)
-
-D'autres articles sont en préparation...
+\[Série Imitation Douyin] Trois :[Introduction à l'utilisation du routage Vue et à l'ajout d'animations de transition](https://juejin.cn/post/7362528152777130025)  
+\[Série Imitation Douyin] Quatre :[Mise en cache des routes conditionnelles Vue, tout comme les sites d'information traditionnels](https://juejin.cn/post/7365334891473240101)
 
 ## courir
 
@@ -60,8 +60,20 @@ Remarque : ce projet convient uniquement à l'étude et à la recherche, et non
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
 
+### Déployer sur Docker
+
+```bash
+# pull Docker image
+docker pull ghcr.io/zyronon/douyin-vue:latest
+
+# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+```
+
 ### développement local
 
+**Remarque : La commande git doit être clonée pour s'exécuter. Le téléchargement du package zip ne peut pas s'exécuter. Si la vitesse de clonage est trop lente, il est recommandé d'utiliser l'adresse du gîte**
+
 ```bash
 git clone https://gitee.com/zyronon/douyin.git (中国使用)
           https://github.com/zyronon/douyin.git 

docs/README.ja.md

@@ -4,7 +4,7 @@
 
 <p align="center">
  <a href="README.en.md">English</a> | <a href="README.es.md">Spanish</a> | <a href="README.de.md">German</a> | 
-<a href="README.fr.md">French</a> | <a href="../README.md">简体中文</a> |  <a href="README.ja.md">日本語</a> 
+<a href="README.fr.md">French</a> | <a href="README.md">简体中文</a> |  <a href="README.ja.md">日本語</a> 
 </p>
 
 <p align="center">
@@ -16,17 +16,18 @@
 `douyin-vue`パロディです`抖音|TikTok`モバイルショートビデオプロジェクト。`Vue`ネイティブと同等のモバイル側の「ベスト プラクティス」`App`シルキーで滑らかな使い心地。最新のものを使用しました`Vue`テクノロジースタック、に基づく[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)成し遂げる。データはプロジェクト内でローカルに保存されます。[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)ライブラリは API をインターセプトし、ローカルの JSON データを返して、実際のバックエンド リクエストをシミュレートします。
 
 <div>
-<img width="150px" src='imgs/1.gif' />
-<img width="150px" src='imgs/2.gif' />
-<img width="150px" src='imgs/3.gif' />
-<img width="150px" src='imgs/4.gif' />
-<img width="150px" src='imgs/5.gif' />
+<img width="150px" src='docs/imgs/1.gif' />
+<img width="150px" src='docs/imgs/2.gif' />
+<img width="150px" src='docs/imgs/3.gif' />
+<img width="150px" src='docs/imgs/4.gif' />
+<img width="150px" src='docs/imgs/5.gif' />
 </div>
 
 ## オンラインアクセス
 
-ジーティーページ:[ｈっｔｐｓ：／／ｚｙろのん。ぎてえ。いお／どうｙいん／](https://zyronon.gitee.io/douyin/)(中国ではこのアドレスにアクセスすることをお勧めします)  
-注: コードが最新ではないため、現在 Gitee ページを更新できません。ファイアウォールを回避できる場合は、次のアドレスにアクセスすることをお勧めします。
+[//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址)   "
+
+[//]: # "注意：Gitee Pages现在无法更新，代码不是最新的。如果你能翻墙推荐访问下面地址  "
 
 Github ページ:[ｈっｔｐｓ：／／ｄｙ。ってんたう。とｐ／](https://dy.ttentau.top/)
 
@@ -48,9 +49,8 @@ Github ページ:[ｈっｔｐｓ：／／ｄｙ。ってんたう。とｐ／](
 
 【模倣同音シリーズ】 1:[Swiper.js に似たカルーセル コンポーネントを実装するための 200 行のコード](https://juejin.cn/post/7360512664317018146)  
 【模倣同音シリーズ】２：[Douyinで「無限スライドビデオ」効果を実現](https://juejin.cn/post/7361614921519054883)  
-【模倣同音シリーズ】その３：[Vue ルーティングの使用とトランジション アニメーションの追加の概要](https://juejin.cn/post/7362528152777130025)
-
-さらなる記事も準備中です...
+【模倣同音シリーズ】その３：[Vue ルーティングの使用とトランジション アニメーションの追加の概要](https://juejin.cn/post/7362528152777130025)  
+【模倣同音シリーズ】 4：[従来のニュースサイトと同様に、Vue の条件付きルート キャッシュ](https://juejin.cn/post/7365334891473240101)
 
 ## 走る
 
@@ -60,8 +60,20 @@ Github ページ:[ｈっｔｐｓ：／／ｄｙ。ってんたう。とｐ／](
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
 
+### Dockerへのデプロイ
+
+```bash
+# pull Docker image
+docker pull ghcr.io/zyronon/douyin-vue:latest
+
+# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+```
+
 ### 地域開発
 
+**注: git コマンドを実行するには、クローンを作成する必要があります。zip パッケージのダウンロードは実行できません。クローン速度が遅すぎる場合は、gitee アドレスを使用することをお勧めします。**
+
 ```bash
 git clone https://gitee.com/zyronon/douyin.git (中国使用)
           https://github.com/zyronon/douyin.git 
@@ -87,7 +99,7 @@ npm run dev
 -   `小霸宠牛排 🥩`：[ｈっｔｐｓ：／／ｖ。どうｙいん。こｍ／いＹＲそｓＶＢ／](https://v.douyin.com/iYRSosVB/)
 -   `奶茶妹 ◕🌱`：[ｈっｔｐｓ：／／ｖ。どうｙいん。こｍ／いＹらＣＫｈＰ／](https://v.douyin.com/iYRACKhP/)
 -   `我才是岚岚`：[ｈっｔｐｓ：／／ｖ。どうｙいん。こｍ／いＹらＱＭ１Ｃ／](https://v.douyin.com/iYRAQM1C/)
--   `周憬艺 ziran`：[ｈっｔｐｓ：／／ｖ。どうｙいん。こｍ／いＹらＱｓ４ｈ／](https://v.douyin.com/iYRAQs4h/)
+-   `周憬艺 ziran`: [ｈっｔｐｓ：／／ｖ。どうｙいん。こｍ／いＹらＱｓ４ｈ／](https://v.douyin.com/iYRAQs4h/)
 -   `刘思瑶 nice`：[ｈっｔｐｓ：／／ｖ。どうｙいん。こｍ／いＹらあえＲん／](https://v.douyin.com/iYRAaERn/)
 -   `彭十六 elf`：[ｈっｔｐｓ：／／ｖ。どうｙいん。こｍ／いＹらＨｒＶＧ／](https://v.douyin.com/iYRAHrVG/)
 -   `李子柒`：[ｈっｔｐｓ：／／ｖ。どうｙいん。こｍ／いＹら５Ｂ８８／](https://v.douyin.com/iYRA5B88/)
@@ -98,7 +110,7 @@ npm run dev
 
 ## 特徴と提案
 
-プロジェクトは現在開発の初期段階にあり、新しい機能が継続的に追加されています。ソフトウェアに関する機能や提案がありましたら、お気軽にお問い合わせください。`Issues`で育ちました
+プロジェクトは現在開発の初期段階にあり、ソフトウェアの新機能や提案があれば、お気軽にお問い合わせください。`Issues`で育ちました
 このソフトウェアのデザインアイデアも気に入っていただけましたら、ぜひ送信してください`PR`、 ご支援ありがとうございました！
 
 ## 私に連絡して