nginx autoindex 现代化美化

参考链接:https://juejin.cn/post/7223226307059286074

用 nginx autoindex 可以极快速地提供一个文件服务器,太适合咱这种懒人了(x

但是!默认的页面!实在是太朴素了!

果然是得加一点东西吧

1. nginx 配置

location ^~ / {
    root /path-to-website/public;
    autoindex on;
    autoindex_exact_size off;
    autoindex_localtime on;
    charset utf_8;
    add_after_body /autoindex.html;
}

2. autoindex.html

这是一个……怎么说呢……模板文件?

抄自借鉴自参考文章,并改成了深色模式

还请记得更改 website_title!

<script>
    !function(){
        var website_title = ''
        var max_name_length = 60
        var datetime_format = '%Y-%m-%d %H:%M:%S'
        var enable_readme_md = true
        var enable_footer_js = true

        var dom = {
            element: null,
            get: function (o) {
                var obj = Object.create(this)
                obj.element = (typeof o == "object") ? o : document.createElement(o)
                return obj
            },
            add: function (o) {
                var obj = dom.get(o)
                this.element.appendChild(obj.element)
                return obj
            },
            text: function (t) {
                this.element.appendChild(document.createTextNode(t))
                return this
            },
            html: function (s) {
                this.element.innerHTML = s
                return this
            },
            attr: function (k, v) {
                this.element.setAttribute(k, v)
                return this
            }
        }

        head = dom.get(document.head)
        head.add('meta').attr('charset', 'utf-8')
        head.add('meta').attr('name', 'viewport').attr('content', 'width=device-width,initial-scale=1')



        var bodylines = document.body.innerHTML.split('\n')
        document.body.innerHTML = ''

        titlehtml = document.title.replace(/\/$/, '').split('/').slice(1).reduce(function(acc, v, i, a) {
            return acc + '<a href="/' + a.slice(0, i+1).join('/') + '/">' + v + '</a>/'
        }, '<a href="/">Index</a> of /')
        if (website_title) {
            document.title = website_title + ' - ' + document.title
        }
        head.add('meta').attr('name', 'description').attr('content', document.title)

        div = dom.get('body')
        div.add("header").add('h1').html(titlehtml)
        tbody = div.add('table').attr('class', 'table-hover').add('tbody')

        names = ['Name', 'Size', 'Modified']
        thead = tbody.add('tr')
        thead.add('th')
        for (i = 0; i < names.length; i++)
            thead.add('th').add('a').attr('href', 'javascript:sortby('+i+')').attr('class', 'octicon arrow-up').text(names[i]);
        thead.add('th')
        var insert = function(filename, datetime, size) {
            if (/\/$/.test(filename)) {
                css = 'file-directory'
                size = ''
            } else if (/\.(zip|7z|bz2|gz|tar|tgz|tbz2|xz|cab)$/.test(filename)) {
                css = 'file-zip'
            } else if (/\.(py|js|php|pl|rb|sh|bash|lua|sql|go|rs|java|c|h|cpp|cxx|hpp)$/.test(filename)) {
                css = 'file-code'
            } else if (/\.(jpg|png|bmp|gif|ico|webp)$/.test(filename)) {
                css = 'file-media'
            } else if (/\.(flv|mp4|mkv|avi|mkv|vp9)$/.test(filename)) {
                css = 'device-camera-video'
            } else {
                css = 'file'
            }

            displayname = decodeURIComponent(filename.replace(/\/$/, ''))
            if (displayname.length > max_name_length)
                displayname = displayname.substring(0, max_name_length-3) + '..>';

            if (!isNaN(Date.parse(datetime))) {
                d = new Date(datetime)
                pad = function (s) {return s < 10 ? '0' + s : s}
                mon = function (m) {return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][m]}
                datetime = datetime_format
                    .replace('%Y', d.getFullYear())
                    .replace('%m', pad(d.getMonth()+1))
                    .replace('%d', pad(d.getDate()))
                    .replace('%H', pad(d.getHours()))
                    .replace('%M', pad(d.getMinutes()))
                    .replace('%S', pad(d.getSeconds()))
                    .replace('%b', mon(d.getMonth()))
            }

            tr = tbody.add('tr')
            tr.add('td')
            tr.add('td').add('a').attr('class', 'octicon ' + css).attr('href', filename).text(displayname)
            tr.add('td').text(size)
            tr.add('td').text(datetime)
            tr.add('td')
        }

        var readme = '', footer = ''
        insert('../', '', '-')
        for (var i in bodylines) {
            if (m = /\s*<a href="(.+?)">(.+?)<\/a>\s+(\S+)\s+(\S+)\s+(\S+)\s*/.exec(bodylines[i])) {
                filename = m[1]
                datetime = m[3] + ' ' + m[4]
                size = m[5]
                insert(filename, datetime, size)
                switch (filename.toLowerCase()) {
                    case 'readme.md':
                        readme = filename
                        break
                    case 'footer.js':
                        footer = filename
                        break
                }
            }
        }

        document.documentElement.lang = navigator.language
        document.body.appendChild(div.element)

        if (enable_footer_js && footer !== '') {
            div.add('script').attr('src', footer)
        }
    }()

    function sortby(index) {
        rows = document.getElementsByClassName('table-hover')[0].rows
        link = rows[0].getElementsByTagName('a')[index]
        arrow = link.className == 'octicon arrow-down' ? 1 : -1
        link.className = 'octicon arrow-' + (arrow == 1 ? 'up' : 'down');
        [].slice.call(rows).slice(2).map(function (e, i) {
            type = e.getElementsByTagName('a')[0].className == 'octicon file-directory' ? 0 : 1
            text = e.getElementsByTagName('td')[index].innerText
            if (index === 0) {
                value = text
            } else if (index === 1) {
                value = new Date(text).getTime()
            } else if (index === 2) {
                m = {'G':1024*1024*1024, 'M':1024*1024, 'K':1024}
                value = parseInt(text || 0) * (m[text[text.search(/[KMG]B?$/)]] || 1)
            }
            return {type: type, value: value, index: i, html: e.innerHTML}
        }).sort(function (a, b) {
            if (a.type != b.type)
                return a.type - b.type
            if (a.value != b.value)
                return a.value < b.value ? -arrow : arrow
            return a.index < b.index ? -arrow : arrow
        }).forEach(function (e, i) {
            rows[2+i].innerHTML = e.html
        })
    }
</script>

<style>

    * { padding: 0; margin: 0; }

    html {
        filter: invert(1) hue-rotate(180deg);
    }
    
    html img{
        filter: invert(1) hue-rotate(180deg);
    }
    
    body {
        font-family: sans-serif;
        text-rendering: optimizespeed;
        background-color: #ffffff;
        
    }

    a {
        color: #006ed3;
        text-decoration: none;
    }

    a:hover,
    h1 a:hover {
        color: #319cff;
    }

    .octicon {
        background-position: center left;
        background-repeat: no-repeat;
        padding-left: 24px;
    }

    header,
    #summary {
        padding-left: 5%;
        padding-right: 5%;
    }

    th:first-child,
    td:first-child {
        width: 5%;
    }

    th:last-child,
    td:last-child {
        width: 5%;
    }

    header {
        padding-top: 25px;
        padding-bottom: 15px;
        background-color: #f2f2f2;
    }

    h1 {
        font-size: 20px;
        font-weight: normal;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        color: #999;
    }

    h1 a {
        color: #000;
        margin: 0 4px;
    }

    h1 a:hover {
        text-decoration: underline;
    }

    h1 a:first-child {
        margin: 0;
    }

    main {
        display: block;
    }

    .meta {
        font-size: 12px;
        font-family: Verdana, sans-serif;
        border-bottom: 1px solid #9C9C9C;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .meta-item {
        margin-right: 1em;
    }

    #filter {
        padding: 4px;
        border: 1px solid #CCC;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    tr {
        border-bottom: 1px dashed #dadada;
    }

    tbody tr:hover {
        background-color: #ffffec;
    }

    th,
    td {
        text-align: left;
        padding: 10px 0;
    }

    th {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 16px;
        white-space: nowrap;
    }

    th a {
        color: black;
    }

    th svg {
        vertical-align: middle;
    }

    td {
        white-space: nowrap;
        font-size: 14px;
    }

    td:nth-child(2) {
        width: 80%;
    }

    td:nth-child(3),
    th:nth-child(3) {
        padding: 0 20px 0 20px;
    }

    th:nth-child(4),
    td:nth-child(4) {
        text-align: right;
    }

    td:nth-child(2) svg {
        position: absolute;
    }

    td .name,
    td .goup {
        margin-left: 1.75em;
        word-break: break-all;
        overflow-wrap: break-word;
        white-space: pre-wrap;
    }

    .icon {
        margin-right: 5px;
    }

    .icon.sort {
        display: inline-block;
        width: 1em;
        height: 1em;
        position: relative;
        top: .2em;
    }

    .icon.sort .top {
        position: absolute;
        left: 0;
        top: -1px;
    }

    .icon.sort .bottom {
        position: absolute;
        bottom: -1px;
        left: 0;
    }

    footer {
        padding: 40px 20px;
        font-size: 12px;
        text-align: center;
    }

    @media (max-width: 600px) {
        .hideable {
            display: none;
        }

        td:nth-child(2) {
            width: auto;
        }

        th:nth-child(3),
        td:nth-child(3) {
            padding-right: 5%;
            text-align: right;
        }

        h1 {
            color: #000;
        }

        h1 a {
            margin: 0;
        }

        #filter {
            max-width: 100px;
        }
    }
    .file {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 12 16'%3E%3Cpath d='M6 5L2 5 2 4 6 4 6 5 6 5ZM2 8L9 8 9 7 2 7 2 8 2 8ZM2 10L9 10 9 9 2 9 2 10 2 10ZM2 12L9 12 9 11 2 11 2 12 2 12ZM12 4.5L12 14C12 14.6 11.6 15 11 15L1 15C0.5 15 0 14.6 0 14L0 2C0 1.5 0.5 1 1 1L8.5 1 12 4.5 12 4.5ZM11 5L8 2 1 2 1 14 11 14 11 5 11 5Z' fill='%237D94AE'/%3E%3C/svg%3E");
    }
    .file-directory {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 14 16'%3E%3Cpath d='M13 4L7 4 7 3C7 2.3 6.7 2 6 2L1 2C0.5 2 0 2.5 0 3L0 13C0 13.6 0.5 14 1 14L13 14C13.6 14 14 13.6 14 13L14 5C14 4.5 13.6 4 13 4L13 4ZM6 4L1 4 1 3 6 3 6 4 6 4Z' fill='%23FFD700'/%3E%3C/svg%3E");
    }
    .file-zip {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 12 16'%3E%3Cpath d='M8.5 1L1 1C0.4 1 0 1.4 0 2L0 14C0 14.6 0.4 15 1 15L11 15C11.6 15 12 14.6 12 14L12 4.5 8.5 1ZM11 14L1 14 1 2 4 2 4 3 5 3 5 2 8 2 11 5 11 14 11 14ZM5 4L5 3 6 3 6 4 5 4 5 4ZM4 4L5 4 5 5 4 5 4 4 4 4ZM5 6L5 5 6 5 6 6 5 6 5 6ZM4 6L5 6 5 7 4 7 4 6 4 6ZM5 8L5 7 6 7 6 8 5 8 5 8ZM4 9.3C3.4 9.6 3 10.3 3 11L3 12 7 12 7 11C7 9.9 6.1 9 5 9L5 8 4 8 4 9.3 4 9.3ZM6 10L6 11 4 11 4 10 6 10 6 10Z' fill='%237D94AE'/%3E%3C/svg%3E");
    }
    .file-code {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 12 16'%3E%3Cpath d='M8.5,1 L1,1 C0.45,1 0,1.45 0,2 L0,14 C0,14.55 0.45,15 1,15 L11,15 C11.55,15 12,14.55 12,14 L12,4.5 L8.5,1 L8.5,1 Z M11,14 L1,14 L1,2 L8,2 L11,5 L11,14 L11,14 Z M5,6.98 L3.5,8.5 L5,10 L4.5,11 L2,8.5 L4.5,6 L5,6.98 L5,6.98 Z M7.5,6 L10,8.5 L7.5,11 L7,10.02 L8.5,8.5 L7,7 L7.5,6 L7.5,6 Z' fill='%237D94AE' /%3E%3C/svg%3E");
    }
    .file-media {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 12 16'%3E%3Cpath d='M6 5L8 5 8 7 6 7 6 5 6 5ZM12 4.5L12 14C12 14.6 11.6 15 11 15L1 15C0.5 15 0 14.6 0 14L0 2C0 1.5 0.5 1 1 1L8.5 1 12 4.5 12 4.5ZM11 5L8 2 1 2 1 13 4 8 6 12 8 10 11 13 11 5 11 5Z' fill='%237D94AE'/%3E%3C/svg%3E");
    }
    .device-camera-video {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16'%3E%3Cpath d='M15.2,2.09 L10,5.72 L10,3 C10,2.45 9.55,2 9,2 L1,2 C0.45,2 0,2.45 0,3 L0,12 C0,12.55 0.45,13 1,13 L9,13 C9.55,13 10,12.55 10,12 L10,9.28 L15.2,12.91 C15.53,13.14 16,12.91 16,12.5 L16,2.5 C16,2.09 15.53,1.86 15.2,2.09 L15.2,2.09 Z' fill='%237D94AE' /%3E%3C/svg%3E");
    }
    .octicon-book {
        padding-left: 20px;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16'%3E%3Cpath d='M3,5 L7,5 L7,6 L3,6 L3,5 L3,5 Z M3,8 L7,8 L7,7 L3,7 L3,8 L3,8 Z M3,10 L7,10 L7,9 L3,9 L3,10 L3,10 Z M14,5 L10,5 L10,6 L14,6 L14,5 L14,5 Z M14,7 L10,7 L10,8 L14,8 L14,7 L14,7 Z M14,9 L10,9 L10,10 L14,10 L14,9 L14,9 Z M16,3 L16,12 C16,12.55 15.55,13 15,13 L9.5,13 L8.5,14 L7.5,13 L2,13 C1.45,13 1,12.55 1,12 L1,3 C1,2.45 1.45,2 2,2 L7.5,2 L8.5,3 L9.5,2 L15,2 C15.55,2 16,2.45 16,3 L16,3 Z M8,3.5 L7.5,3 L2,3 L2,12 L8,12 L8,3.5 L8,3.5 Z M15,3 L9.5,3 L9,3.5 L9,12 L15,12 L15,3 L15,3 Z' /%3E%3C/svg%3E");
    }
    .arrow-down {
        font-weight: bold;
        text-decoration: none !important;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 10 16'%3E%3Cpolygon id='Shape' points='7 7 7 3 3 3 3 7 0 7 5 13 10 7'%3E%3C/polygon%3E%3C/svg%3E");
    }
    .arrow-up {
        font-weight: bold;
        text-decoration: none !important;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 10 16'%3E%3Cpolygon id='Shape' points='5 3 0 9 3 9 3 13 7 13 7 9 10 9'%3E%3C/polygon%3E%3C/svg%3E");
    }
</style>

3. 然后……没了?

真的没了(

不过要记得,autoindex.html 得放在可以直接访问到的位置啊!

大概效果就是这样了

移动端访问也是比较优雅的啦

评论区
头像
文章目录