Lista el contenido de tus directorios, con estilo!
Septiembre 6, 2008
Esto solo funciona en servidores que corren Apache, ya que lo que haremos son configuraciones usadas por este servidor HTTP.
El listado de directorios, conocido en el bajo mundo como "index of", es producido cuando en una subcarpeta encontrada en la raíz del directorio de nuestro servidor web, o en la misma raíz del directorio, no se encuentra algún archivo servido por Apache si se hace la petición al directorio.
Por ejemplo, nuestro servidor raíz se encuentra en /www/s/sinfocol.org/httdocs/, la configuración del apache que se encuentra en el archivo httpd.conf, contiene las siguientes líneas de código:
DirectoryIndex index.php index.html index.htm
</IfModule>
Por lo tanto, si hacemos una petición a www.sinfocol.org, lo que en realidad hace el servidor es, ir al directorio raíz, y luego buscar los archivos especificados por medio del DirectoryIndex, así que primero buscaría el archivo
Si no es encontrado, procede con el siguiente archivo; hace esto sucesivamente hasta llegar al último archivo especificado en la directiva. Si no se encuentra ningunos de esos archivos, entonces el apache por defecto lista todo el contenido de dicha carpeta, menos los archivos especificados en la directiva "IndexIgnore", cuando busca archivos dados por expresiones regulares y niega su acceso.
IndexIgnore:
Archivos a los cuales niega el acceso
Order allow,deny
Deny from all
</FilesMatch>
La siguiente, es una imagen con el listado de directorio que por defecto realiza el Apache:
Para darle estilo a nuestro listado, primero debemos crear un archivo con nombre .htaccess dentro del directorio donde queremos listar los archivos. Estos .htaccess, son archivos utilizados para proveer una manera de crear configuraciones sin tener que modificar el archivo principal de configuración del Apache, las configuraciones solo tienen efecto en la carpeta y en el resto de subcarpetas donde es creado el .htaccess
Mas información sobre el .htaccess
Para personalizar nuestro listado, primero debemos crear dos archivos. El primero de ellos contiene la cabecera del listado, y el segundo contiene el pie del listado.
Cabecera del listado, al cual llamaré header.shtml
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Index of <!--#echo var="REQUEST_URI" --> | Seguridad Informática Colombiana</title>
<link rel="stylesheet" href="http://www.sinfocol.org/style.css" type="text/css" media="screen" />
</head>
<body>
<center>
<h1>Index of <!--#echo var="REQUEST_URI" --></h1>
La extensión .shtml, se debe a que el contenido es dinámico, entonces como no estamos haciendo una página para cada directorio, con el .shtml podemos generar el nombre en el cual estamos ubicados. Para esto se usó la función echo REQUEST_URI (Es la ruta que contiene el URL que el usuario observa en su navegador).
En la cabecera podemos cambiar la hoja de estilo, que contiene el estilo de nuestro listado.
El pie del listado, al cual llamaré footer.html (Nótese que esta extensión ya no es .shtml, porque no es necesario que se interprete nada desde el lado del servidor)
</body>
</html>
El listado se hará entre el </h1> que encierra la ruta a la cual se hace petición, y el </center> del footer.html
Cuando hacemos esto, lo único que hará el Apache, es centrar el listado y añadirle la hoja de estilo que indicamos en el header.shtml
Lo único que faltaría es agregar opciones que se encuentran en este link http://httpd.apache.org/docs/2.2/mod/mod_autoindex.html, y añadir los iconos para que todo tenga una mejor apariencia.
Así que primero añadimos las opciones al .htaccess
Options +Indexes
IndexOptions FancyIndexing SuppressHTMLPreamble IconsAreLinks FoldersFirst SuppressRules IconHeight=16 IconWidth=16
Lo que hará este contenido será:
* Desactivar las reglas de sobreescritura.
* Habilitar el listado del directorio.
* Habilitar el listado personalizado.
* Suprimir el inicio del HTML. Hace necesario incluir un archivo el cuál se leera como el HTML inicial. Si no se encuentra este archivo, se dispone el contenido como usualmente se hace.
* Los iconos dirigen al archivo/directorio al cual se quiere acceder.
* Primero se listan los directorios, y luego los demás archivos. Solo funciona cuando FancyIndexing está activado.
* Suprime los <hr>.
* Hace que el tamaño de los iconos sea de 16x16 pixeles.
Ahora lo único que nos falta es añadir los iconos para cada carpeta y hacer que el Apache lea el header.shtml y el footer.html
AddIcon /iconos/pdf.png .pdf
AddIcon /iconos/binary.win.png .exe
AddIcon /iconos/binhex.png .hqx
AddIcon /iconos/deb.png .deb
AddIcon /iconos/diskimg.info.png .iso .img .nrg
AddIcon /iconos/tar.png .tar
AddIcon /iconos/world.png .wrl .wrl.gz .vrml .vrm .iv
AddIcon /iconos/compressed.png .Z .z .tgz .gz .zip .rar
AddIcon /iconos/a.png .ps .ai .eps
AddIcon /iconos/layout.png .html .shtml .htm
AddIcon /iconos/text.png .txt
AddIcon /iconos/c.png .c
AddIcon /iconos/php.png .php .php3 .phps .phtml
AddIcon /iconos/p.png .pl .py
AddIcon /iconos/f.png .for
AddIcon /iconos/dvi.png .dvi
AddIcon /iconos/uuencoded.png .uu .uue .uud
AddIcon /iconos/script.png .conf .sh .shar .csh .ksh .tcl
AddIcon /iconos/tex.png .tex
AddIcon /iconos/bomb.png core
AddIcon /iconos/back.png ..
AddIcon /iconos/hand.right.png README
AddIcon /iconos/folder.png ^^DIRECTORY^^
AddIcon /iconos/blank.png ^^BLANKICON^^
AddIconByEncoding (CMP,/iconos/compressed.png) x-compress x-gzip
AddIconByType (TXT,/iconos/text.png) text/*
AddIconByType (IMG,/iconos/image.png) image/*
AddIconByType (SND,/iconos/sound.png) audio/*
AddIconByType (VID,/iconos/movie.png) video/*
DefaultIcon /iconos/unknown.png
HeaderName /header.shtml
ReadmeName /footer.html
El directorio que se muestra en esta configuración, no es la ruta absoluta del sistema, sino el directorio raíz de nuestro servidor HTTP, en este caso /www/s/sinfocol.org/httdocs/.
Los iconos estarán entonces en /www/s/sinfocol.org/httdocs/iconos/, el header y el footer en /www/s/sinfocol.org/httdocs/.
El paquete completo se puede descargar de acá
La clave del comprimido es
Hay iconos que no estan asociados a las extensiones, pero es para configuraciones extra.
Finalmente nuestro directorio quedará con este aspecto:
http://www.sinfocol.org/archivos/
Si al intentar usar la configuración que doy acá, el servidor responde con error 500 (Internal Server Error), se puede quitar la línea del RewriteEngine off, que es la línea que posiblemente este ocasionando el problema.
Al igual, si el archivo header.shtml no es bien incluido, se debe cambiar la extensión a .html o bien agregar la siguiente línea al archivo .htaccess
Archivado en: Programación |
Muchas gracias, me ha sido muy útil este articulo... me interesaba darle un aire distinto al indexing del apache y su articulo me ha orientado muchísimo
Gracias también por el pack de iconos
Te pasastes loco buen dato.!!!
Hola, excelente articulo. Tengo una pregunta haber si me podeis echar una mano. Al indexar el directorio principal de mi web tambien aparece la carpeta "iconos" junto con el resto de carpetas y archivos que hay dentro de él. Hay alguna manera evitar que se indexe sin que por ello dejen de funcionar los iconos?. Gracias de antemano y un saludo...
Hola Edu, disculpa la demora al responder.
Se puede evitar que se indexen los archivos o carpetas haciendo uso de la directiva "indexIgnore"
Así que editamos nuestro .htaccess y colocamos algo de este tipo
IndexIgnore archivo1.png archivo2.bmp archivo3.txt icono
Así se estaría evitando que el servidor indexe el archivo1, archivo2, archivo3 y la carpeta "icono"
Muchisimas gracias por responder. Por fin ha desaparecido la molesta carpeta de iconos, que la verdad no tenia nada que ver con el resto de archivos y carpetas del directorio.
Enhorabuena por la web y saludos desde España.
Pues no lo consigo, subo todo el paquete completo en mi directorio y no se ve nada
Me sale: Internal Server Error
Puedes ayudarme?
Hola, muy buenos datos, no siempre se encuentra un blog de programacion hecha por Colombianos, gracias!!!! Lo malo es que no he podido descomprimir el archivo que subieron uso MAC y por alguna razon no he podido, Sale un mensaje de Error.. me podria enviar un zip sin clave por favor(supongo que es eso), Saludos!!!
Hola Giovanny, ya actualicé el archivo, intenta borrar el caché del navegador y descargarlo de nuevo, me avisas como te fue!
Hola me parece muy útil este blog y en especial muy bueno el paso a paso de la instalación.
Tengo 2 preguntas: 1. Donde debo colocar el css para que tome este mismo tipo de letra. 2. Hay alguna forma para que no trunque los nombres largos? ejemplo: HAMI_LCD_PC_MoiotorsQuotation-dear_Omar_on_091102_.pdf
Lo trunca a HAMI_LCD_PC_Moiotors..>
Gracias
En el código que se encuentra en header.shtml, en esta parte:
<link rel="stylesheet" href="http://www.sinfocol.org/style.css" type="text/css" media="screen" />
Ahí tienes que cambiar el atributo href por la dirección donde se encuentra tu hoja de estilos.
Para la segunda pregunta, para recortar el nombre del archivo N letras, en el .htaccess, en la misma línea del IndexOptions debes agregar esta directiva:
NameWidth=N
Donde N es el número de letras que queres que se vean.
Quedaría algo así:
IndexOptions FancyIndexing SuppressHTMLPreamble IconsAreLinks FoldersFirst SuppressRules IconHeight=16 IconWidth=16 NameWidth=20
El anterior ejemplo recorta todos los nombres a 20 letras.
Muchas gracias, me sirvio un monton el ejemplo, Quisiera saber como tengo que hacer para que los documentos word o excel se me abran en una ventana y no en el mismo frame.
Gracias
Adrian: La única forma en la que puedes lograr lo que quieres es usando JavaScript, puedes incluir el siguiente código en el archivo header.shtml dentro de la etiqueta <head>
<script type="text/javascript"> function addLinks() { var tags = document.getElementsByTagName("a"); var nombre = ""; var len = 0; for (var i = 0; i < tags.length; i++) { nombre = tags[i].getAttribute("href").toLowerCase(); len = nombre.length; if (len != 0 && (nombre.substr(len - 3) == "xls" || nombre.substr(len - 3) == "doc" || nombre.substr(len - 4) == "xlsx" || nombre.substr(len - 4) == "docx")) tags[i].target = "_blank"; } } window.onload = addLinks; </script>Gracias Sysroot, pude solucionarlo gracias a tu ayuda.
Saludos
Hola.
Muy bueno el how to! me funciona a la perfeccion.
Excelente el artículo. Lo de <!--#echo var="REQUEST_URI" --> no me corre. No muestra la url.
¿Necesito algún módulo adicional?
Gracias.
El módulo principal para manejar ese código es el mod_include (http://httpd.apache.org/docs/1.3/howto/ssi.html)
Incluye el código "Options +Includes" en el .htaccess para habilitar la inclusión de código.
Si tienes algún otro problema lo podemos ver con gusto.
Faltaba el módulo.
Muchas gracias,
M
eso seria si se tuviera un servidor dedicado o acceso a la carpeta PHP pero si se tuviera un hosting y quieres agregarle estilos a una carpeta como se haria ?
Maxterx: La configuración .htaccess sirve para tanto servidores dedicados como para servidores compartidos. Al menos con buenas configuraciones debería funcionar ya que la mayoría permite sobreescribir variables de Apache.
Buenas tardes muchachos!!!
Muy bien el miércoles!! Merecían ganar!!!
Al margen de los comentarios futboleros...
Podría alguien ayudarme? Seguí todo el tutorial pero no logro que tome el header.shtml ni el footer.html, continúa generando el default.
Un dato... Si pongo en el .htaccess la directiva "RewriteEngine Off" no puedo acceder directamente al directorio.
Muchísimas gracias por su ayuda
Saludos desde Argentina.
Viendo un poco más en detalle...
* Los módulos mod_autoindex y mod_include están activados.
* El header.shtml y footer.html se encuentran en el raiz de DocumentRoot
* El .htaccess está en el directorio a listar, toma bien los png para cada tipo de archivo y el indexado. El único inconveniente es que sigue generando el código html default, es decir, sin aplicar el estilo. Como si no encontrara el header y footer.
Me está volviendo loco!
=) ANDUVOOO!!!!! http://pryment.com.ar/descargas
El tema ahora es que no me reconoce la directiva SSI var="REQUEST URI" =(
Jaja gracias Cesar por el comentario futbolero
Disculpa que haya contestado tarde, acabo de entrar a tu sitio de descargas y parece que todo va perfecto, el REQUEST_URI es para mostrar la ruta actual del sistema y pues en estos momentos tu sitio lo muestra como tal, así que no creo que tengas problemas, igual si tienes alguna otra duda me puedes preguntar de nuevo
Excelente la informacion pero para mi caso era diferente al contrario de mostrar de una forma mas cool los directorios yo deseaba no mostrarlo ya que como es una aplicacion para doctores y cada doctor puede subir las imagnes de sus pacientes pues no era bueno que se listara el contenido de las carpetas imagenes por que todos ivan a ver todo por lo tanto esta fue mi solucion la cual esta desarrollada en cake
en la carpeta APP/ el htaccess debe de contener lo siguiente:
RewriteEngine on
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
Options -Indexes
y listo ya si ponia la direccion img/ ya me mada un error 404 por lo tanto ya no se listan las imagenes que deben de ser privadas ya nomas es de personalizar dicho error, gracias por el aporte
Hola, excelente articulo.
Simple y claro, muy útil.
Una consulta, yo cree una sub carpeta, donde subo archivos para descarga, dentro de mi servidor local. Hay alguna manera de indicar que no regrese (Parent Directory) a la carpeta raíz, que el nivel mas bajo de regreso sea el directorio especificado.
Ej.
localhost/test/descarga
Que el Parent Directoriy no llegue a test,se quede en descarga.
Un saludo.
Otra cosa, acabo de ver que No muestra nada.
En el muestra la linea tal cual, no la dirección.
Y en el Body, muestra Index Off
Sin carpeta...
¿Porque podría ser?
Se corto el texto... Lo pongo con espacios para ver si queda.
Parece que el filtro que tenes corta el código.
El request_URI es el tema, no muestra la dirección donde estoy ubicado.
Está buenísima esta página, pero si no es molestía para los "maestros", me podrían explicar como ver el directorio (dirección donde está alojado el archivo), cuando se arrima el puntero del mouse sobre el ícono de un programa que está en el escritorio. Tank you. Saludos desde Fsa.Capita (Argentina)
Daniel: No entiendo tu primera pregunta, disculpa la tardanza al contestar, el blog no me está enviando los correos de comentarios nuevos.
Irick: Si entiendo bien, esa función la podes hacer con Javascript, que se active el código cada vez que pasas el puntero sobre el ícono, algo similar a esto: http://www.willmaster.com/blog/css/floating-layer-at-cursor-position.php
Hola, no me funka
En primer lugar cuando pongo el link en el navegador donde tengo todo esto montado no me abre el archivo header.shtml y me muestra el de directorio apache.
cuando quiero abrir el header.shtml está el estilo todo vacío y en el log de apache lo siguiente:
[Tue Jun 12 16:17:44 2012] [warn] [client x.x.x.x] mod_include: Options +Includes (or IncludesNoExec) wasn't set, INCLUDES filter removed, referer: http://ipdemiserver/directorio_test/
esta es mi version de apache:
Apache/2.2.3 (CentOS)
El artículo me ha resultado muy interesante. Lo he aplicado en una intranet local y funciona bien. Pero mi problema es que lista de forma adecuada los archivos y carpetas que estan dentro del directorio raiz del servidor, pero funciona si quiero que se listen con ese estilo los directorios virtuales localizados fuera del directorio raiz. Aunque coloco en dicho directorio el .htaccess, header y footer, los directorios y archivos se listan al estilo que apache pone por defecto. ¿Cómo podría arreglarlo?
José: Verifica que en la configuración de Apache para los host virtuales, se establezca la directiva AllowOverride (Dependiendo de su necesidad, la configuración mínima debería ser AllowOverride Indexes, para cada host virtual). En este enlace encuentras más información: http://httpd.apache.org/docs/2.2/mod/core.html#allowoverride
Hola, Gracias por la aportación, ya veo que este post es viejo, pero no por ello es menos funcional, me a servido para lo que quería hacer, por lo que Gracias.
Quería saber si conoces la manera de que cuando localice los ficheros MP3 o del formato que sea, en el directorio de nuestro host, pueda aparecer a la izquierda un reproductor en HTML5 o similar, dada su compatibilidad, supongo que con algún script en Java, a ver si me puedes orientar un poco.
No se si contestarás dado la antigüedad del post, de todos modos, muchas gracias por el aporte.
Hola! puedes editar tu header.phtml y footer.phtml a gusto para que pueda soportar el uso de reproductores MP3, lo que puedes hacer es editar el header para que incluya algun script y que ponga un listener en todos los que terminen con .mp3.
Ok si es lo que estoy mirando, lo que pasa que de java estoy muy pez, no puedo ir uno a uno por que hay 150Gb clasificados por carpetas y claro ir uno a uno.... ufff
llevo 5 días mirando y lo que encuentro es lo tipico, meter la ruta entre los tags del html5, de todos modos, no me rindo, voy a echar un ojo al link que me indicas a ver si consigo algo, creo que utilizando el script que pusiste en javascript para los ficheros doc, xls etc, creo que puedo usar parte y adaptarlo.
un saludo.
Gracias, en serio, muchas gracias por las molestias
Hola KerllerNet, no es necesario hacerlo uno por uno, puedes hacerlo todo desde el header.phtml.
De esta forma:
$('a').mp3();
Solo debes buscar algo como MP3 jquery y aprender a usarlo.
Saludos,
Muchas gracias por las molestias y bueno ano nuevo