随着容器的应用越来越多，将nginx部署在容器中也是常有之事。可能事先创建容器时只暴露了一个端口给浏览器连接，后面又想根据添加多个应用，根据URL的不同来访问不同的应用。比如在暴露了主机的83端口给nginx容器的80端口，原来只有一个文件服务器，使用IP:83/files/来访问，现在可能需要再添加一个网页服务器，使用IP:83/docs/来访问。

这里就介绍一下如何搭建。这里文件服务器做一个 nginx文件服务器美化autoindex显示一样的，然后再做一个网页类的，比如博客，文档之类的站点。

一、创建nginx容器

1sudo podman run -itd -p 83:80 --name nginx nginx:latest

如果不加sudo，可能会出现：

1Error: rootlessport cannot expose privileged port 83, you can add 'net.ipv4.ip_unprivileged_port_start=83' to /etc/sysctl.conf (currently 1024), or choose a larger port number (>= 1024): listen tcp 0.0.0.0:83: bind: permission denied

运行成功后，使用下面的命令进入nginx容器：

1sudo podman exec -it nginx /bin/bash

二、配置nginx

nginx配置在/etc/nginx/目录下，需要修改的是nginx.conf以及在conf.d目录下修改或者添加自己的配置。 /etc/nginx/conf.d/default.conf文件是默认就有的，不过要做一些修改，它是整个nginx服务器的入口配置，它负责根据URL访问不同的应用。下面给出整个文件内容：

 1server {
 2    listen       80;
 3    listen  [::]:80;
 4    server_name  localhost;
 5    charset utf-8;
 6
 7    #access_log  /var/log/nginx/host.access.log  main;
 8
 9    server_name_in_redirect off;
10    proxy_set_header Host $host:$server_port;
11    proxy_set_header X-Real-IP $remote_addr;
12    proxy_set_header REMOTE-HOST $remote_addr;
13    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
14    proxy_connect_timeout 180000;
15    proxy_send_timeout 180000;
16    proxy_read_timeout 180000;
17
18    location /docs {
19        proxy_pass http://docs/;
20        #proxy_pass http://127.0.0.1:82; 这里不能使用这种方式，因为是在容器中，只暴露了一个80端口给外部。
21    }
22    location /files {
23        proxy_pass http://files/;
24    }
25
26    # error_page  404              /404.html;
27
28    # redirect server error pages to the static page /50x.html
29    #
30    error_page   500 502 503 504  /50x.html;
31    location = /50x.html {
32        root   /usr/share/nginx/html;
33    }
34}

/etc/nginx/conf.d/files.conf是需要自己创建的，主要是用于文件服务器，内容如下：

 1server {
 2    listen       83;
 3    listen  [::]:83;
 4    server_name  localhost;
 5    charset utf-8;
 6
 7    #access_log  /var/log/nginx/host.access.log  main;
 8
 9    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
10    add_header cache-control "no-cache";
11    add_header access-control-allow-origin "*";
12    add_header referrer-policy "no-referrer";
13    add_header x-content-type-options nosniff;
14    add_header x-xss-protection "1; mode=block";
15    add_header x-frame-options sameorigin;
16
17    location = /autoindex.html {
18        root   /html/files;
19    }
20
21    location / {
22        root   /home/nginx/files;
23        autoindex   on;
24        autoindex_exact_size off;
25        autoindex_localtime on;
26        add_after_body /autoindex.html;
27    }
28
29    location ~ \.(dis|md|ini|log|pac|keys|lua|json|yaml|toml|conf|cmd|sh|bash|h|c|cpp|hpp|py|go|service)$ {
30        root /home/nginx/files;
31        default_type text/plain;
32    }
33
34    #error_page  404              /404.html;
35
36    # redirect server error pages to the static page /50x.html
37    #
38    error_page   500 502 503 504  /50x.html;
39    location = /50x.html {
40        root   /usr/share/nginx/html;
41    }
42}

/etc/nginx/conf.d/docs.conf也是需要自己创建的，主要是用于网页服务器，内容如下：

 1server {
 2    listen       82;
 3    listen  [::]:82;
 4    server_name  localhost;
 5    charset utf-8;
 6
 7    #access_log  /var/log/nginx/host.access.log  main;
 8
 9    location / {
10        index  index.html index.htm;
11        root   /home/nginx/docs;
12    }
13
14    #error_page  404              /404.html;
15
16    # redirect server error pages to the static page /50x.html
17    #
18    error_page   500 502 503 504  /50x.html;
19    location = /50x.html {
20        root   /usr/share/nginx/html;
21    }
22}

/etc/nginx/nginx.conf文件中需要添加upstream来指定内部服务，全部内容如下：

 1user  nginx;
 2worker_processes  auto;
 3
 4error_log  /var/log/nginx/error.log notice;
 5pid        /var/run/nginx.pid;
 6
 7
 8events {
 9    worker_connections  1024;
10}
11
12
13http {
14    include       /etc/nginx/mime.types;
15    default_type  application/octet-stream;
16
17    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
18                      '$status $body_bytes_sent "$http_referer" '
19                      '"$http_user_agent" "$http_x_forwarded_for"';
20
21    access_log  /var/log/nginx/access.log  main;
22
23    sendfile        on;
24    #tcp_nopush     on;
25
26    keepalive_timeout  65;
27
28    #gzip  on;
29    
30    upstream docs{
31        server 127.0.0.1:82;
32    }
33
34    upstream files{
35        server 127.0.0.1:83;
36    }
37
38    include /etc/nginx/conf.d/*.conf;
39}

三、网页服务器

根据/etc/nginx/conf.d/docs.conf配置：

1location / {
2        index  index.html index.htm;
3        root   /home/nginx/docs;
4    }

只需要把整个网站的内容放到/home/nginx/docs目录下即可。

四、文件服务器

文件服务器前面写过 nginx文件服务器美化autoindex显示，里面有一个autoindex.html文件，为了方便扩展，把autoindex.html单独放在一个目录，比如/html/files/下，如果想再加一个文件服务器，比如更新服，可以创建一个/html/files/update，里面放一个autoindex.html，这样不会相互干扰。 可以看到/etc/nginx/conf.d/files.conf文件中

1location = /autoindex.html {
2        root   /html/files;
3    }

配置的就是这个目录。

nginx文件服务器美化autoindex显示，一文介绍的是使用URL的根目录，而这里只是一个子路径，所以为了正确访问文件，需要做一些修改。

autoindex.html 全部内容如下：

  1<script>
  2var marked_js = 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/marked/4.0.2/marked.min.js'
  3var github_markdown_css = 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/github-markdown-css/5.1.0/github-markdown-light.min.css'
  4!function(){
  5		// 这里只需要根据URL不同设置为不同的路径即可
  6        var website_rootURI = origin + "/files"
  7        var website_rootURL = website_rootURI + "/"
  8        
  9        var website_title = ''
 10        var max_name_length = 60
 11        var datetime_format = '%Y-%m-%d %H:%M'
 12        var enable_readme_md = true
 13        var enable_footer_js = true
 14
 15        var dom = {
 16                element: null,
 17                get: function (o) {
 18                        var obj = Object.create(this)
 19                        obj.element = (typeof o == "object") ? o : document.createElement(o)
 20                        return obj
 21                },
 22                add: function (o) {
 23                        var obj = dom.get(o)
 24                        this.element.appendChild(obj.element)
 25                        return obj
 26                },
 27                text: function (t) {
 28                        this.element.appendChild(document.createTextNode(t))
 29                        return this
 30                },
 31                html: function (s) {
 32                        this.element.innerHTML = s
 33                        return this
 34                },
 35                attr: function (k, v) {
 36                        this.element.setAttribute(k, v)
 37                        return this
 38                }
 39        }
 40
 41        head = dom.get(document.head)
 42        head.add('meta').attr('charset', 'utf-8')
 43        head.add('meta').attr('name', 'viewport').attr('content', 'width=device-width,initial-scale=1')
 44
 45        if (!document.title) {
 46                document.write(["<div class=\"container\">",
 47                "<h3>nginx.conf</h3>",
 48                "<textarea rows=8 cols=50>",
 49                "# download autoindex.html to /wwwroot/",
 50                "location ~ ^(.*)/$ {",
 51                "    charset utf-8;",
 52                "    autoindex on;",
 53                "    autoindex_localtime on;",
 54                "    autoindex_exact_size off;",
 55                "    add_after_body /autoindex.html;",
 56                "}",
 57                "</textarea>",
 58                "</div>"].join("\n"))
 59                return
 60        }
 61
 62        var bodylines = document.body.innerHTML.split('\n')
 63        document.body.innerHTML = ''
 64
 65        titlehtml = document.title.replace(/\/$/, '').split('/').slice(1).reduce(function(acc, v, i, a) {
 66                return acc + '<a href="'+ website_rootURL + a.slice(0, i+1).join('/') + '/">' + v + '</a>/'
 67        }, '<a href="' + website_rootURL + '">Index</a> of /')
 68        if (website_title) {
 69                document.title = website_title + ' - ' + document.title
 70        }
 71        head.add('meta').attr('name', 'description').attr('content', document.title)
 72
 73        div = dom.get('div').attr('class', 'container')
 74        div.add('table').add('tbody').add('tr').add('th').html(titlehtml)
 75        tbody = div.add('table').attr('class', 'table-hover').add('tbody')
 76
 77        names = ['Name', 'Date', 'Size']
 78        thead = tbody.add('tr')
 79        for (i = 0; i < names.length; i++)
 80                thead.add('td').add('a').attr('href', 'javascript:sortby('+i+')').attr('class', 'octicon arrow-up').text(names[i]);
 81        thead.add('td').attr('class', 'octicon').text('preview');
 82
 83        var insert = function(filename, datetime, size) {
 84                if (/\/$/.test(filename)) {
 85                        css = 'file-directory'
 86                        size = ''
 87                } else if (/\.(zip|7z|bz2|gz|tar|tgz|tbz2|xz|cab)$/.test(filename)) {
 88                        css = 'file-zip'
 89                } else if (/\.(py|js|php|pl|rb|sh|bash|lua|sql|go|rs|java|c|h|cpp|cxx|hpp)$/.test(filename)) {
 90                        css = 'file-code'
 91                } else if (/\.(jpg|png|bmp|gif|ico|webp)$/.test(filename)) {
 92                        css = 'file-media'
 93                } else if (/\.(flv|mp4|mkv|avi|mkv|vp9)$/.test(filename)) {
 94                        css = 'device-camera-video'
 95                } else {
 96                        css = 'file'
 97                }
 98
 99                displayname = decodeURIComponent(filename.replace(/\/$/, ''))
100                if (displayname.length > max_name_length)
101                        displayname = displayname.substring(0, max_name_length-3) + '..>';
102
103                if (!isNaN(Date.parse(datetime))) {
104                        d = new Date(datetime)
105                        pad = function (s) {return s < 10 ? '0' + s : s}
106                        mon = function (m) {return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][m]}
107                        datetime = datetime_format
108                                        .replace('%Y', d.getFullYear())
109                                        .replace('%m', pad(d.getMonth()+1))
110                                        .replace('%d', pad(d.getDate()))
111                                        .replace('%H', pad(d.getHours()))
112                                        .replace('%M', pad(d.getMinutes()))
113                                        .replace('%S', pad(d.getSeconds()))
114                                        .replace('%b', mon(d.getMonth()))
115                }
116
117                tr = tbody.add('tr')
118                if (filename == "../" && (document.URL == website_rootURI || document.URL == website_rootURL)){
119                        tr.add('td').add('a').attr('class', 'octicon ' + css).attr('href', website_rootURL).text(displayname)
120                }
121                else if (document.URL.endsWith('/')) {
122                        tr.add('td').add('a').attr('class', 'octicon ' + css).attr('href', document.URL+filename).text(displayname)
123                }else{
124                        tr.add('td').add('a').attr('class', 'octicon ' + css).attr('href', document.URL+"/"+filename).text(displayname)
125                }
126                tr.add('td').text(datetime)
127                tr.add('td').text(size)
128
129                if (/\.(md)$/.test(filename)) {
130                        tr.add('td').add('input').attr('type', 'button').attr('value','preview').attr('onclick', 'onPreview("' + filename +'")').attr('id', filename)
131                }
132                else {
133                        tr.add('td')
134                }
135        }
136
137        var readme = '', footer = ''
138        insert('../', '', '-')
139        for (var i in bodylines) {
140                if (m = /\s*<a href="(.+?)">(.+?)<\/a>\s+(\S+)\s+(\S+)\s+(\S+)\s*/.exec(bodylines[i])) {
141                        filename = m[1]
142                        datetime = m[3] + ' ' + m[4]
143                        size = m[5]
144                        insert(filename, datetime, size)
145                        switch (filename.toLowerCase()) {
146                        case 'readme.md':
147                                readme = filename
148                                break
149                        case 'footer.js':
150                                footer = filename
151                                break
152                        }
153                }
154        }
155
156        document.documentElement.lang = navigator.language
157        document.body.appendChild(div.element)
158
159        if (enable_readme_md && readme !== '') {
160                tbody = div.add('table').add('tbody');
161                tbody.add('tr').add('th').attr('class', 'octicon octicon-book').text(readme)
162                tbody.add('tr').add('td').add('div').attr('id', 'readme').attr('class', 'markdown-body')
163                xhr = new XMLHttpRequest()
164                xhr.open('GET', location.pathname.replace(/[^/]+$/, '')+readme, true)
165                xhr.onload = function() {
166                        if (xhr.status < 200 && xhr.status >= 400)
167                                return
168                        wait = function (name, callback) {
169                                var interval = 10; // ms
170                                window.setTimeout(function() {
171                                        if (window[name]) {
172                                                callback(window[name])
173                                        } else {
174                                                window.setTimeout(arguments.callee, interval)
175                                        }
176                                }, interval)
177                        }
178                        wait('marked', function() {
179                                document.getElementById("readme").innerHTML = marked.parse(xhr.responseText)
180                        })
181                }
182                xhr.send()
183
184                div.add('script').attr('src', marked_js)
185                div.add('link').attr('rel', 'stylesheet').attr('href', github_markdown_css)
186        }
187
188        if (enable_footer_js && footer !== '') {
189                div.add('script').attr('src', footer)
190        }
191}()
192
193function onPreview(filename) {
194        myWindow=window.open('','_blank','');
195        myWindow.document.write("<div id='markdown'></div");
196        myWindow.document.title=filename 
197        ele = myWindow.document.getElementById("markdown")
198
199        xhr = new XMLHttpRequest()
200        xhr.open('GET', location.pathname.replace(/[^/]+$/, '')+filename, true)
201        xhr.onload = function() {
202                if (xhr.status < 200 && xhr.status >= 400)
203                        return
204                wait = function (name, callback) {
205                        var interval = 10; // ms
206                        window.setTimeout(function() {
207                                if (window[name]) {
208                                        callback(window[name])
209                                } else {
210                                        window.setTimeout(arguments.callee, interval)
211                                }
212                        }, interval)
213                }
214                wait('marked', function() {
215                        myWindow.document.getElementById("markdown").innerHTML = marked.parse(xhr.responseText)
216                })
217        }
218        xhr.send()
219        div.add('script').attr('src', marked_js)
220        div.add('link').attr('rel', 'stylesheet').attr('href', github_markdown_css)
221        myWindow.focus();
222}
223
224function sortby(index) {
225        rows = document.getElementsByClassName('table-hover')[0].rows
226        link = rows[0].getElementsByTagName('a')[index]
227        arrow = link.className == 'octicon arrow-down' ? 1 : -1
228        link.className = 'octicon arrow-' + (arrow == 1 ? 'up' : 'down');
229        [].slice.call(rows).slice(2).map(function (e, i) {
230                type = e.getElementsByTagName('a')[0].className == 'octicon file-directory' ? 0 : 1
231                text = e.getElementsByTagName('td')[index].innerText
232                if (index === 0) {
233                        value = text
234                } else if (index === 1) {
235                        value = new Date(text).getTime()
236                } else if (index === 2) {
237                        m = {'G':1024*1024*1024, 'M':1024*1024, 'K':1024}
238                        value = parseInt(text || 0) * (m[text[text.search(/[KMG]B?$/)]] || 1)
239                }
240                return {type: type, value: value, index: i, html: e.innerHTML}
241        }).sort(function (a, b) {
242                if (a.type != b.type)
243                        return a.type - b.type
244                if (a.value != b.value)
245                        return a.value < b.value ? -arrow : arrow
246                return a.index < b.index ? -arrow : arrow
247        }).forEach(function (e, i) {
248                rows[2+i].innerHTML = e.html
249        })
250}
251</script>
252
253<style>
254body {
255        margin: 0;
256        font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
257}
258.container {
259        padding-right: 15px;
260        padding-left: 15px;
261        margin-right: auto;
262        margin-left: auto;
263}
264@media (min-width: 768px) {
265        .container {
266                max-width: 750px;
267        }
268}
269@media (min-width: 992px) {
270        .container {
271                max-width: 970px;
272        }
273}
274@media (min-width: 1200px) {
275        .container {
276                max-width: 1170px;
277        }
278}
279table {
280        width: 100%;
281        max-width: 100%;
282        margin-bottom: 20px;
283        border: 1px solid #ddd;
284        padding: 0;
285        border-collapse: collapse;
286}
287table th {
288        font-size: 14px;
289}
290table tr {
291        border: 1px solid #ddd;
292        padding: 5px;
293}
294table tr:nth-child(odd) {
295        background: #f9f9f9
296}
297table th, table td {
298        border: 1px solid #ddd;
299        font-size: 14px;
300        line-height: 20px;
301        padding: 3px;
302        text-align: left;
303}
304a {
305        color: #337ab7;
306        text-decoration: none;
307}
308a:hover, a:focus {
309        color: #2a6496;
310        text-decoration: underline;
311}
312table.table-hover > tbody > tr:hover > td,
313table.table-hover > tbody > tr:hover > th {
314        background-color: #f5f5f5;
315}
316.markdown-body {
317        float: left;
318        font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
319}
320/* octicons */
321.octicon {
322        background-position: center left;
323        background-repeat: no-repeat;
324        padding-left: 16px;
325}
326.file {
327        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' 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");
328}
329.file-directory {
330        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' 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='%237D94AE'/%3E%3C/svg%3E");
331}
332.file-zip {
333        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' 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");
334}
335.file-code {
336        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' 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");
337}
338.file-media {
339        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' 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");
340}
341.device-camera-video {
342        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' 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");
343}
344.octicon-book {
345        padding-left: 20px;
346        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' 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");
347}
348.arrow-down {
349        font-weight: bold;
350        text-decoration: none !important;
351        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' 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");
352}
353.arrow-up {
354        font-weight: bold;
355        text-decoration: none !important;
356        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' 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");
357}
358</style>

这样文件服务器就大功告成了！