2024-9-6 修改论衍，新增CSS樣式
nginx 指定一個目錄提供文件列表和下載功能
原始的
nginx 配置文件
server {
listen 8443 ssl;
server_name download.yousite.com;
access_log /var/log/nginx/downloads_access.log;
# 證書
ssl_certificate /etc/letsencrypt/live/yousite.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yousit.com/privkey.pem;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
# 根目錄設置為 /www/mnt/downloads
root /www/mnt/downloads;
# 啟用目錄列表
location / {
autoindex on; # 啟用目錄列表
autoindex_exact_size off; # 以更人性化的格式顯示文件大小
autoindex_localtime on; # 以服務器本地時間顯示文件時間
charset utf-8; # 設置字符集為 UTF-8
try_files $uri $uri/ =404; # 確保請求的文件或目錄存在凹耙，否則返回 404
#阻止其他網站直接鏈接你的文件
valid_referers none blocked yousite.com *.yousite.com;
if ($invalid_referer) {
return 403;
}
}
# 禁止訪問上級目錄鞍时，防止目錄遍歷攻擊
location ~ /\.\./ {
deny all;
}
}
展示效果
原始效果.png
但是這個頁面比較難看奉件，特別是對于移動端瀏覽器很難用耗溜，文件都選不中突委，于是就想著修改一下
修改后的
不想使用其他的文件服務程序柏卤，就用 sub_filter 替換內容來實現(xiàn)引入一個CSS樣式文件
修改后的nginx配置
server {
listen 8443 ssl;
server_name download.yousite.com;
access_log /var/log/nginx/downloads_access.log;
# 證書
ssl_certificate /etc/letsencrypt/live/yousite.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yousite.com/privkey.pem;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
# 根目錄設置為 /www/mnt/downloads
root /www/mnt/downloads;
# 啟用目錄列表
location / {
autoindex on; # 啟用目錄列表
autoindex_exact_size off; # 以更人性化的格式顯示文件大小
autoindex_localtime on; # 以服務器本地時間顯示文件時間
charset utf-8; # 設置字符集為 UTF-8
try_files $uri $uri/ =404; # 確保請求的文件或目錄存在，否則返回 404
#內容替換
sub_filter '</head>' '<link rel="stylesheet" href="/css/download.css"></head>';
sub_filter '<title>Index of' '<title>目錄';
sub_filter '<h1>Index of' '<h1>目錄';
sub_filter '</body>' '<p>王某某的公開下載服務</p></body>';
sub_filter '<hr>' '';
sub_filter_once off;
#阻止其他網站直接鏈接你的文件
valid_referers none blocked yousite.com *.yousite.com;
if ($invalid_referer) {
return 403;
}
}
# 禁止訪問上級目錄匀油，防止目錄遍歷攻擊
location ~ /\.\./ {
deny all;
}
#配置自定義的CSS
location /css/download.css {
alias /www/mnt/service/download/download.css;
}
#favicon.ico
location /favicon.ico {
alias /www/mnt/service/download/favicon.ico;
}
}
主要是使用 sub_filter 替換內容缘缚，從而實現(xiàn)引入一個CSS 文件
download.css文件內容
body {
margin: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
body pre {
font-family: Microsoft YaHei;
font-size: 1rem;
width: 960px;
text-align: right;
padding-right: 20px;
margin-top: 0px;
}
a {
text-decoration: none;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 10px;
display: flex;
position: relative;
top: 26px;
left: 10px;
}
a:hover {
border-color: #000;
}
body p {
margin-top: auto;
margin-bottom: 10px;
}
/* 針對移動設備的 */
@media (max-width: 980px) {
body pre {
font-size: 1.4rem;
}
a {
top: 35px;
}
}
將CSS文件保存到上面指定的位置，如：/www/mnt/service/download/download.css;
展示效果
修改后的效果.png
手機端瀏覽器
手機端瀏覽.png
