Panda wiki:分享一下wiki界面实现美化自由的方案
用 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" "自定义名称"; # 内容注入：在页面</body>标签前插入美化代码（无需修改） sub_filter '</body>' '$inject_font$inject_css_core$inject_js</body>'; } } # 重启命令提示（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 ' <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"> <style>body { font-family: "Noto Sans SC", sans-serif !important; }</style> '; # 2. 核心CSS美化（替换为你的样式代码） set $inject_css_core ' <style> /* 示例：修改导航栏颜色 */ .navbar { background-color: #f8f9fa !important; border-bottom: 1px solid #e9ecef; } /* 示例：优化内容区间距 */ .content { padding: 20px !important; max-width: 1200px; margin: 0 auto; } /* 此处省略其他CSS样式... */ </style> '; # 3. JS功能增强（可选，如添加返回顶部、暗色模式等） set $inject_js ' <script> // 示例：返回顶部按钮 window.onscroll = function() { const btn = document.createElement("button"); btn.innerText = "回到顶部"; btn.style.position = "fixed"; btn.style.bottom = "20px"; btn.style.right = "20px"; btn.style.padding = "8px 16px"; btn.style.cursor = "pointer"; btn.onclick = () => window.scrollTo({ top: 0, behavior: "smooth" }); document.body.appendChild(btn); }; // 此处省略其他JS代码... </script> '; 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
长亭PandaWiki 知识库搭建系统
test
```bash #!/bin/bash echo "Hello, world!"
示例应用22
333
示例应用3
3
示例应用
测试发帖
77777
示例应用爱拉屎的蒯鱼2
蒯鱼为什么喜欢拉屎？？ `就是喜欢拉屎`
模型广场爱吃饭的蒯鱼
33
示例应用
OO Test
OO Test
示例应用爱吃饭的蒯鱼
CC
示例应用测试帖子1
测试帖子1
示例应用什么是百智云？
什么是百智云？
示例应用发帖
订单
长亭PandaWiki 知识库搭建系统发一个
test
长亭PandaWiki 知识库搭建系统有图片的文章
## 这是一篇有图片的文章  你好蒯鱼
长亭PandaWiki 知识库搭建系统爱拉屎的蒯鱼
拉屎的蒯鱼
模型广场