New Crowdin updates

docs/en/friendly/index.md

@@ -18,6 +18,14 @@ const members = [
       { icon: 'rss', link: 'http://nhui.top/' },
     ]
   },
+  {
+    avatar: '/xiangcai.png',
+    name: '香菜',
+    title: '香菜的博客',
+    links: [
+      { icon: 'rss', link: 'https://mdzz.pro/' },
+    ]
+  },
 ]
 </script>
 

docs/en/tips/devops/certbot.md

@@ -0,0 +1,58 @@
+---
+title: Certbot Automatic SSL Certificate Acquisition
+author: Lee
+---
+
+## Installation
+
+```bash
+sudo apt update
+sudo apt install certbot
+```
+
+If using nginx, also install the plugin:
+
+```bash
+sudo apt install certbot python3-certbot-nginx
+```
+
+If applying for a wildcard certificate using DNS, install the plugin:
+
+```bash
+sudo apt install python3-certbot-dns-cloudflare
+```
+
+## Request Certificate
+
+No web server used:
+
+```bash
+sudo certbot certonly -d yourdomain
+```
+
+### Using nginx
+
+```bash
+sudo certbot --nginx -d yourdomain
+```
+
+### Using DNS
+
+Taking Cloudflare as an example:
+
+1. Cloudflare management account > Account API Tokens > API Token Templates > Edit Zone DNS
+2. Install plugin `sudo apt install python3-certbot-dns-cloudflare`
+3. Create the file `etc/letsencrypt/cloudflare.ini` and place the parameter inside: `dns_cloudflare_api_token = yourtoken`
+4. Run `sudo certbot certonly -d yourdomain` and choose DNS authentication when prompted.
+
+> It is not recommended to remove `cloudflare.ini` after applying. Certbot needs this file for automatic renewal.
+
+## Using the Certificate
+
+After configuration, the terminal will display the paths for the certificate and private key, which can be set in `ssl_certificate` and `ssl_certificate_key` for use.
+
+For other configuration parts, refer to [nginx reverse proxy basics](./nginx.md)
+
+## Note
+
+Certbot will automatically add relevant configurations to nginx's `etc/nginx/sites-available/default` file. This may conflict with your site configuration file. You can comment out lines marked with `# managed by Certbot`.

docs/en/tips/devops/hass.md

@@ -0,0 +1,121 @@
+---
+title: Home Assistant Reverse Proxy + Access Whitelist
+author: Lee
+---
+
+## Installation
+
+Refer to the official documentation: <https://www.home-assistant.io/installation>
+
+I installed using Docker Compose and recommend this method.[Official documentation](https://www.home-assistant.io/installation/linux#docker-compose)
+
+## Reverse Proxy
+
+Home Assistant's security policy disables reverse proxy by default. Modify `configuration.yaml`.
+
+```yaml
+# configuration.yaml
+http:
+  # It is recommended to configure SSL only in nginx; there is no need for two layers of SSL for internal reverse proxies
+  #ssl_certificate: [.crt file]
+  #ssl_key: [.key file]
+  use_x_forwarded_for: true
+  trusted_proxies: #Reverse proxy whitelist. If not this IP, change it accordingly.
+    - 127.0.0.1
+    - ::1
+  server_host: 127.0.0.1 #Listen only to access from this IP, optional: restrict access to only via reverse proxy
+```
+
+## nginx Configuration
+
+Installation: See [Beginner's Guide to nginx Reverse Proxy](https://leetfs.com/tips/nginx)
+
+Get certificate: [Certbot Automated SSL Certificates](https://leetfs.com/tips/certbot)
+
+### WebSocket
+
+WebSocket must be enabled or access will not work properly
+
+```
+    # Reverse proxy configuration
+    location / {
+        # Required WebSocket headers
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+
+        # Read and write timeout settings
+        proxy_read_timeout 86400;
+        proxy_send_timeout 86400;
+
+        # Prevent Nginx from caching WebSocket data
+        proxy_buffering off;
+```
+
+### Example
+
+```
+server {
+    listen 443 ssl; # SSL listen
+    listen [::]:443 ssl;
+
+    server_name your_domain;
+
+    # SSL certificate path
+    ssl_certificate /etc/letsencrypt/live/;
+    ssl_certificate_key /etc/letsencrypt/live/;
+
+    # Security optimization
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_prefer_server_ciphers on;
+    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305';
+    ssl_session_cache shared:SSL:10m;
+
+    # HSTS (optional, enforces HTTPS)
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+
+    # Limit file upload size
+    client_max_body_size 20G;
+
+    # Reverse proxy configuration
+    location / {
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto https;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Host $server_name;
+
+        proxy_pass http://127.0.0.1:8123; # Backend service address
+
+        # Enhance proxy security
+        proxy_set_header X-Frame-Options SAMEORIGIN;
+        proxy_set_header X-XSS-Protection "1; mode=block";
+        proxy_set_header X-Content-Type-Options nosniff;
+
+        # Required WebSocket headers
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+
+        # Read and write timeout settings
+        proxy_read_timeout 86400;
+        proxy_send_timeout 86400;
+
+        # Prevent Nginx from caching WebSocket data
+        proxy_buffering off;
+
+        # Restrict access, only allow access from LAN
+        # allow ip_here;  # hk
+        # allow ip_here_as_well;    #jp
+        # deny all;              # deny all other requests
+    }
+}
+server {
+    listen 80;
+    listen [::]:80;
+
+    server_name your_domain;
+
+    return 301 https://$host$request_uri; # Permanently redirect to HTTPS
+}
+```

docs/en/tips/devops/index.md

@@ -0,0 +1,8 @@
+---
+title: DevOps
+author: Lee
+---
+
+## Table of Contents
+
+<ArticlesMenu />

docs/en/tips/devops/nginx.md

@@ -0,0 +1,127 @@
+---
+title: nginx Reverse Proxy Introduction
+author: Lee
+---
+
+## Overview
+
+This tutorial is based on Debian, using nginx as a reverse proxy example for Docker containers already running.
+
+### Why use a reverse proxy?
+
+The following is information found online:
+
+A reverse proxy is a type of server that receives client requests, forwards them to web servers, and then returns the results to the client, as if the proxy server had directly handled the request itself.
+
+A reverse proxy proxies for servers, standing on the same side as the web servers.The real servers are invisible to clients.That is why it is called "reverse".
+
+Reverse proxy can be used for:
+
+Protecting servers by hiding their real IP addresses.
+Load balancing: distributing requests among different servers according to traffic and server load.
+Caching static content and handling large volumes of short-lived dynamic requests.
+Serving as an application layer firewall for protection.
+Encrypting/decrypting SSL communication.
+
+### For example
+
+For example, if we need to run three websites (a, b, c) on a server, all needing port 443, but the server has only one IP and can’t allocate three 443 ports.
+
+At this point, reverse proxy appears: nginx takes over port 443, and routes users accessing a.leetfs.com to site a, users accessing b.leetfs.com to site b, and similarly for c.
+
+## Installation
+
+1. Update the system index: `sudo apt update`
+2. Install nginx: `sudo apt install nginx`
+
+After installation is complete, Nginx will automatically start and be set to launch on boot. You can check Nginx’s status with `sudo systemctl status nginx`.
+
+## Configure nginx
+
+- Default configuration file: `/etc/nginx/nginx.conf`
+- Website configuration directory: `/etc/nginx/sites-available/`
+- Directory storing enabled configuration files: `/etc/nginx/sites-enabled/`
+
+Next, we will configure nginx by modifying files in the `/etc/nginx/sites-available/` directory.
+
+## Reverse proxy to docker
+
+Our host runs the Weblate service via Docker. It would not be ideal for the container to directly take over the server's port 443, as this would restrict the port to only one service on the server.
+
+> You need to have some understanding of docker to read this section.
+
+### Configure the dockerfile
+
+Let's look at the container's dockerfile. `- 443:4443` under ports means the container listens on the server's port 443 and forwards received requests to port 4443 used by the docker container.
+
+```yaml
+services:
+  weblate:
+    ports:
+      - 443:4443
+    environment:
+# ...more below
+```
+
+First, we change port 443, the standard https port, to another unused port on the server, e.g. `- 4443:4443`. After modifying, reload the container to apply the changes.
+
+## Modify nginx configuration file
+
+Switch to the website configuration directory: `/etc/nginx/sites-available/`. Create a new configuration file, named `weblate` in this example.
+
+Refer to the following code for the configuration file content:
+
+```nginx
+server {
+    listen 443 ssl; # ssl means ssl encryption is used
+    listen [::]:443 ssl;
+
+    server_name leetfs.com; # the domain to be reverse proxied
+
+    ssl_certificate /var/lib/docker/volumes/weblate-docker_weblate-data/_data/ssl/fullchain.pem; # ssl certificate
+    ssl_certificate_key /var/lib/docker/volumes/weblate-docker_weblate-data/_data/ssl/privkey.pem; # ssl private key
+
+    ssl_protocols TLSv1.2 TLSv1.3;  # Enable TLSv1.2 and TLSv1.3, disable SSLv3 and outdated protocols
+    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256';  # Recommended cipher suites
+    ssl_prefer_server_ciphers on;  # Prefer server cipher suites
+
+    location / {
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto https;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Host $server_name;
+
+        proxy_pass https://127.0.0.1:4443; # The reverse proxy destination, set to 4443 because we set the docker port above. 127.0.0.1 means the server itself.
+
+        # Enhance proxy security
+        proxy_set_header X-Frame-Options SAMEORIGIN;
+        proxy_set_header X-XSS-Protection "1; mode=block";
+        proxy_set_header X-Content-Type-Options nosniff;
+    }
+}
+
+```
+
+After modifying the configuration file, create a symbolic link to enable it (remember to change 'weblate' to your own file name).
+
+```bash
+sudo ln -s /etc/nginx/sites-available/weblate /etc/nginx/sites-enabled/
+```
+
+- Test if the configuration file is correct: `sudo nginx -t`
+- Reload Nginx configuration: `sudo systemctl reload nginx`
+
+### Obtain the certificate
+
+For the `ssl_certificate` and `ssl_certificate_key` above, you need to fill in the certificate and private key paths. Refer to [Certbot: Automatically Obtain SSL Certificates](https://leetfs.com/tips/certbot).
+
+## Disable site configuration
+
+If you want to disable a site's configuration, you only need to delete the symbolic link, without deleting the actual file. This makes it easy to reuse later.
+
+```bash
+sudo rm /etc/nginx/sites-enabled/filename
+```
+
+After finishing, remember to reload the Nginx configuration: `sudo systemctl reload nginx`

docs/en/tips/front/cha-jian.md

@@ -0,0 +1,11 @@
+---
+title: Recommended Practical Plugins
+author: Lee
+---
+
+## LocatorJS
+
+Click on a component to go to its code, compatible with Vue, React, and more.
+
+Official Site: <https://www.locatorjs.com/>\
+GitHub: <https://github.com/infi-pc/locatorjs>

docs/en/tips/front/index.md

@@ -0,0 +1,8 @@
+---
+title: Frontend
+author: Lee
+---
+
+## Table of Contents
+
+<ArticlesMenu />

docs/en/tips/front/vp-font.md

@@ -0,0 +1,22 @@
+---
+title: Vitepress Custom Font
+author: Lee
+---
+
+## Method
+
+Place the font file in the `public` or `assets` folder.
+
+Edit `.vitepress/theme/style.css` and add the following at the end:
+
+```css
+@font-face {
+  font-family: 'FontName';
+  src: url('PathToFontFile') format('truetype');
+}
+
+:root {
+--vp-font-family-base: "FontName";/* Other text font */
+--vp-font-family-mono: "FontName";/* Code block font */
+}
+```