autoindex.html - 一行配置美化 nginx 目录成 github 风格。

phusluphuslu 话题数：23会员, 大佬
最后编辑于 July 2017 在 教程 #0

现状：

  1. nginx 的 autoindex 虽然速度比较快，但是美化不足，可以说巨丑。
  2. 类似 h5ai 解决方案这种又十分笨重，性能堪忧。

改进：

  1. 使用 nginx 的 autoindex 页脚(footer) 功能添加 javascript 来重新渲染并美化页面。
  2. 使用 twitter bootstrap 和 github octicons 做素材, 并适配移动端
  3. 检测当前页面 Readme.md 并渲染，和 github 保持一致。

演示：

  1. https://phuslu.github.io/

教程：

  1. 把 https://phuslu.github.io/autoindex.html 下载到网站 wwwroot 根目录。
  2. 在 nginx autoindex 指令下面添加 add_after_body /autoindex.html; 然后重启 nginx 即可
  3. 完整配置例子请见 https://phuslu.github.io/autoindex.html

评论

  • 000HbXn000HbXn 话题数：37会员
    #1

    goproxy的大佬？？

  • kosakakosaka 话题数：17会员, 大佬
    #2

    @000HbXn 说道：
    goproxy的大佬？？

    也是更久远的 goagent 的作者

  • mixoolmixool 话题数：30会员
    #3
    社长好!
  • 91yun91yun 话题数：223管理员
    #4

    66666

  • CYRO4SCYRO4S 话题数：40会员, 大佬
    #5
    收藏。
  • singhighsinghigh 话题数：373管理员
    #6

    @phuslu 说道：
    现状：

    1. nginx 的 autoindex 虽然速度比较快，但是美化不足，可以说巨丑。
    2. 类似 h5ai 解决方案这种又十分笨重，性能堪忧。

    改进：

    1. 使用 nginx 的 autoindex 页脚(footer) 功能添加 javascript 来重新渲染并美化页面。
    2. 使用 twitter bootstrap 和 github octicons 做素材, 并适配移动端
    3. 检测当前页面 Readme.md 并渲染，和 github 保持一致。

    演示：

    1. https://phuslu.github.io/

    教程：

    1. 把 https://phuslu.github.io/autoindex.html 下载到网站 wwwroot 根目录。
    2. 在 nginx autoindex 指令下面添加 add_after_body /autoindex.html; 然后重启 nginx 即可
    3. 完整配置例子请见 https://phuslu.github.io/autoindex.html
    Stoping nginx... nginx: [emerg] unknown directive "add_after_body" in /usr/local/nginx/conf/vhost/domain.com.conf:23
 failed. Use force-quit

    安装了下，报错，是什么情况呢？

  • phusluphuslu 话题数：23会员, 大佬
    #7

    貌似你的 nginx 不识别 add_after_body 指令。

    1. nginx 版本比较老。（不太可能，这个指令 0.8.9 就支持了)
    2. 你的 nginx 是自己编译的，没有带上 --with-http_addition_module 参数。

    见 http://nginx.org/en/docs/http/ngx_http_addition_module.html

  • singhighsinghigh 话题数：373管理员
    #8

    @phuslu 说道：
    貌似你的 nginx 不识别 add_after_body 指令。

    1. nginx 版本比较老。（不太可能，这个指令 0.8.9 就支持了)
    2. 你的 nginx 是自己编译的，没有带上 --with-http_addition_module 参数。

    见 http://nginx.org/en/docs/http/ngx_http_addition_module.html

    多谢，疑似lnmp.org的一键包都有这个问题了，重新编译了，pass！谢谢！

  • phusluphuslu 话题数：23会员, 大佬
    最后编辑于 July 2017 #9

    再附送一个探针，以针会友。

    比其他 lnmp 包的探针要好看也适配移动端：https://phuslu.github.io/tz.php

  • phusluphuslu 话题数：23会员, 大佬
    #10

    重构了一把，代码风格变得好看一些了。（其实并不重要）

    最主要的提升是代码体积减小了。推荐更新。

  • singhighsinghigh 话题数：373管理员
    #11

    @phuslu 说道：
    重构了一把，代码风格变得好看一些了。（其实并不重要）

    最主要的提升是代码体积减小了。推荐更新。

    666

  • phusluphuslu 话题数：23会员, 大佬
    最后编辑于 July 2017 #12

    又精简了一下，文件体积已经达到 7K 了

  • bash99bash99 话题数：14会员
    #13

    有啥办法直接服务端渲染任何MD文件吗？

  • phusluphuslu 话题数：23会员, 大佬
    #14
    用 caddy 服务器
  • phusluphuslu 话题数：23会员, 大佬
    最后编辑于 July 2017 #15

    又精简了一下，体积已经瘦身到 6.4K, 并且去掉了 bootstrap 依赖。
    目前 autoindex.html 已经不依赖任何外部资源 (css/js/images)。

    而功能和界面没有变化。

  • lisonfanlisonfan 话题数：8会员
    #16

    大佬，我的为什么是这样的
    snipaste_20170724_224626.png
    第一条那个是个文件夹

  • phusluphuslu 话题数：23会员, 大佬
    #17

    啊，处理长文件名字有个 bug, 已经修复了。请更新下面文件。

    https://raw.githubusercontent.com/phuslu/phuslu.github.io/master/autoindex.html

  • bobbyac01bobbyac01 话题数：19会员
    #18

    2333
    參觀源碼觀摩學習

登录或注册后才能评论。