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会员

    goproxy的大佬??

  • kosakakosaka 话题数:17会员, 大佬

    @000HbXn 说道:
    goproxy的大佬??

    也是更久远的 goagent 的作者

  • mixoolmixool 话题数:30会员
    社长好!
  • 91yun91yun 话题数:223管理员

    66666

  • CYRO4SCYRO4S 话题数:40会员, 大佬
    收藏。
  • singhighsinghigh 话题数:373管理员

    @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会员, 大佬

    貌似你的 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管理员

    @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会员, 大佬

    重构了一把,代码风格变得好看一些了。(其实并不重要)

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

  • singhighsinghigh 话题数:373管理员

    @phuslu 说道:
    重构了一把,代码风格变得好看一些了。(其实并不重要)

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

    666

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

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

  • bash99bash99 话题数:14会员

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

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

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

    而功能和界面没有变化。

  • lisonfanlisonfan 话题数:8会员

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

  • phusluphuslu 话题数:23会员, 大佬

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

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

  • bobbyac01bobbyac01 话题数:19会员

    2333
    參觀源碼觀摩學習

登录注册后才能评论。