用 Nginx 反向代理美化 Wiki 站：实现无本地代码注入的干净界面

版本号： 1.12.1
界面需求： 追求无冗余、轻量化的干净访问体验

一、核心原理

实现逻辑非常简洁，核心两步即可达成 “美化代码不落地” 的效果：

通过 Nginx 反向代理指向 Wiki 站的原始地址（优先使用「服务器 IP + 端口」，稳定性更高）
在代理过程中，自动注入外部 CSS/JS 代码，直接在浏览器渲染层完成界面美化，无需修改 Wiki 站本地文件

二、操作步骤（全流程）

1. 前置：安装 Nginx

不同操作系统的安装命令差异较大，此处不展开细节，提供主流系统参考方向：

CentOS/RHEL： yum install nginx -y
Ubuntu/Debian： apt update && apt install nginx -y
Windows/macOS： 建议通过官方安装包或包管理工具（如 Homebrew）安装

2. 域名解析与端口规划

这一步是代理访问的 “入口基础”，需注意两个关键点：

域名解析： 将你的域名（如 wiki.yourdomain.com）解析到运行 Nginx 的服务器 IP（A 记录或 AAAA 记录）
端口选择： 为该域名分配一个未被占用的端口（建议选用 8100 以后的端口，如 8181、8282，降低与其他服务的冲突概率）

3. 核心：配置 Nginx 代理规则

这是最关键的一步，需严格按路径和提示修改配置！

3.1 找到配置文件路径

默认 Nginx 的自定义配置目录为：/etc/nginx/conf.d
在该目录下新建配置文件，命名格式建议为「域名.conf」（如 wiki.yourdomain.com.conf），避免后续混淆。

3.2 填入代理配置代码

将以下代码复制到新建的.conf 文件中，必须按标注修改带「自定义」的参数！

# 全局缓存配置（http级，保留便于后续启用）
# 注意：需手动创建缓存目录，命令示例：mkdir -p /var/cache/nginx/自定义缓存名
proxy_cache_path /var/cache/nginx/自定义一个缓存名# 例：/var/cache/nginx/wiki_cache
levels=1:2 # 缓存目录层级，无需修改
keys_zone=自定义一个缓存名_cache:10m # 例：wiki_cache_cache:10m（需与上一行"缓存名"一致）
max_size=100m # 缓存最大容量，可按需调整
inactive=60m # 缓存过期时间，60分钟无访问则清理
use_temp_path=off; # 禁用临时目录，提升性能

server {
# 基础配置：监听端口与域名（必须修改！）
listen 自定义端口; # 例：8181（需与步骤2规划的端口一致）
server_name 你的域名; # 例：wiki.yourdomain.com（需与解析的域名一致）

# 缓存控制：禁用浏览器缓存，防止旧美化代码残留（无需修改）
add_header Cache-Control "no-store, no-cache, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";

# Gzip压缩配置：提升页面加载速度（无需修改）
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 5;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/javascript text/xml application/xml application/xml+rss;

# SSL安全配置：代理后端为HTTPS时生效（无需修改）
proxy_ssl_server_name on;
proxy_ssl_protocols TLSv1.2 TLSv1.3;

# 外部内容注入配置：关联美化代码文件（无需修改，后续配置inject.conf即可）
set $inject_font ""; # 字体注入变量
set $inject_css_core ""; # 核心CSS注入变量
set $inject_js ""; # JS注入变量
# 关键引用：美化代码统一放在inject.conf，后续更新只需改这个文件！
include /etc/nginx/conf.d/inject/inject.conf;

# 核心路由配置：匹配所有Wiki访问请求（重点！）
location / {
# 反向代理目标：填写Wiki站的原始地址（必须修改！）
proxy_pass http://wiki站所在的服务器IP:端口; # 例：http://192.168.1.100:8080/

# 代理请求：传递客户端真实信息，避免Wiki站记录错误IP（无需修改）
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Accept-Encoding ""; # 禁用后端压缩，确保注入代码正常生效

# 代理缓存：引用上方定义的缓存规则（需与"自定义缓存名"一致）
proxy_cache 自定义一个缓存名_cache; # 例：wiki_cache_cache
proxy_cache_valid 200 304 10m; # 200/304状态码缓存10分钟
proxy_cache_bypass $http_pragma;
proxy_cache_revalidate on;

# 品牌关键词替换：本着尊重开发者的原则，不要启用以下注释掉的代码
sub_filter_once off;
# sub_filter "pandawiki" "自定义名称";
# sub_filter "Pandawiki" "自定义名称";
# sub_filter "PANDAWIKI" "自定义名称";

# 内容注入：在页面标签前插入美化代码（无需修改）
sub_filter "" "inject_css_core$inject_js";
}
}

# 重启命令提示（Ubuntu/Debian专用，其他系统需自查）
# sudo systemctl restart nginx

4. 配置：注入美化代码（CSS/JS）

为了方便后续更新美化效果，我们将 CSS/JS 代码统一放在独立文件中，无需修改代理配置。

4.1 创建美化代码目录与文件

新建 inject 目录：执行命令 mkdir -p /etc/nginx/conf.d/inject（路径需与步骤 3 配置中的include路径一致）
在 inject 目录下新建inject.conf文件：touch /etc/nginx/conf.d/inject/inject.conf

4.2 填入美化代码

将你的 CSS/JS 美化代码写入inject.conf，格式示例如下（可参考PiKa 丘_Leo 的美化代码）：

# inject.conf：美化代码注入配置
# 1. 字体注入（可选，如引入Noto Sans SC）
set $inject_font "


";

# 2. 核心CSS美化（替换为你的样式代码）
set $inject_css_core "

";

# 3. JS功能增强（可选，如添加返回顶部、暗色模式等）
set $inject_js "

";

5. 测试：验证代理与美化效果

重启 Nginx： 确保配置生效
Ubuntu/Debian：sudo systemctl restart nginx
CentOS/RHEL：systemctl restart nginx
验证配置是否正确： nginx -t（无报错则正常）
访问测试： 在浏览器输入 http:// 你的域名：自定义端口（例：http://wiki.yourdomain.com:8181）
效果检查： 若页面能正常打开且样式符合预期，说明配置成功！

6. 优化：为域名申请 SSL 证书（实现 HTTPS）

当代理访问正常后，建议为域名配置 SSL 证书，提升安全性（浏览器显示 “小绿锁”）：

推荐使用免费证书： Let’s Encrypt（通过 Certbot 工具快速申请）
配置步骤： 参考 Certbot 官方文档（https://certbot.eff.org/），选择 Nginx 和对应的操作系统，按命令执行即可

关联内容： 感谢 @PiKa丘_Leo 提供的美化代码参考，如需CSS代码请点击 https://baizhi.cloud/discussion/post/yIGh72Dffl

讨论详情

共1条评论

文章概览

内容大纲

相似内容