优化Nginx原生目录索引

优化nginx的原生目录索引可以以外挂CSS的方式实现

在nginx的server块中添加

# 在页面里“插代码”
    add_before_body /_hidden/header.html;
    
    # 根目录（静态 HTML 站点）
    index index.html index.htm default.html default.htm;
    autoindex on;  # 启用目录列表
    autoindex_exact_size off;  # 显示人类可读的文件大小
    autoindex_format html;  # 以 HTML 方式渲染列表
    autoindex_localtime on;  # 显示本地时间
    charset utf-8;  # 让 Nginx 正确解析中文和日文
    add_header Content-Disposition inline;  # 让浏览器直接播放
    add_header Accept-Ranges bytes;  # 允许拖动进度条
    add_header Access-Control-Allow-Origin *;  # 允许跨域访问（可选）



    #隐藏header.html
    location /_hidden/ {
        internal;
    }

之后在_hidden里新建header.html文件并应用以下代码。

<style>
body {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    background: #f7f7f7;
    margin: 20px;
}

/* 标题 */
h1 {
    font-size: 22px;
    margin-bottom: 20px;
}

/* 链接样式 */
a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #007bff;
}

/* 列表排版 */
pre {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    line-height: 1.8;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

pre a {
    display: inline-block;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

/* 整体正文加粗 */
body {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;       /* ← 这里让正文加粗 */
}

/* 文件列表链接加粗 */
pre a {
    font-weight: bold;       /* 每个文件名加粗 */
}

/* 标题加粗（如果你自己加了h1） */
h1 {
    font-weight: bold;
}
</style>

标题加粗，文件夹字号加大，显示日期和文件大小版

<style>
body {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    background: #f7f7f7;
    margin: 20px;
}

/* 标题加粗 */
h1 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* 链接 */
a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #007bff;
}

/* 列表容器 */
pre {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    line-height: 1.8;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow-x: auto;
}

/* 默认文件 */
pre a {
    font-weight: 500;
}

/* 文件夹（关键） */
pre a[href$="/"] {
    font-size: 16px;      /* 字号更大 */
    font-weight: bold;    /* 加粗 */
    color: #000;
}

/* 普通文件 */
pre a:not([href$="/"]) {
    font-size: 14px;
}

/* hover */
pre a:hover {
    color: #007bff;
}
</style>