Logo

Coolibrí
Logo

Visualizar Archivos

Esta función ayuda a visualizar archivos de cualquier tipo, que pueda contener código u otro tipo de contenido que no sea imagen, tal como:

  • JSON
  • YAML
  • TXT
  • CSV

La estructura de la función se muestra a continuación:


    {{ < dataDetails alt="<nombre>" url="<ruta>" > }}

Se aclara que los símbolos {{, <, >, }} no deben tener espacios entre sí, es decir, se debe escribir: {{< … >}}

Parametros

alt: Corresponde a una palabra o frase a la cual irá ligada el archivo, puede ser el nombre del mismo.

url: Corresponde a la ruta relativa donde se ubica el archivo que se quiere visualizar.

Esta función genera una widget de revelación a través del cual el usuario puede obtener información adicional, siendo el contenido del archivo lo que se visualiza; además cuenta con un icono para descargar el archivo si lo desea el usuario.

Se tomará como ejemplo el siguiente directorio:

|--documentacion
    |--configtemas
        |--_index.md
        |--README_CopyTheme.md
        |--README_themeZero.md

    |--images
        |--hugo_logo.png

    |--layout
        |--data
            |--html
                |--ejemplo.html
            |--json
                |--marcadores1.json

    |--shortcodes
        |--data
            |--json
                |--colores1.json
            |--text
                |--marcadores.txt
            |--yaml
                |--discography.yaml
        |--_index.md
        |--referenciarDoc.md
        |--visualizarArchivos.md

Si nos encontramos ubicados en el archivo “_index.md” del directorio “shortcodes” y queremos visualizar el archivo “colores1.json” ubicado en la ruta “data/json” del mismo directorio, basta con citar el archivo indicando la ruta, dado a que nos encontramos en el mismo directorio:


    {{ < dataDetails alt="colores 1" url="data/json/colores1.json" > }}

A continuación se observa la ejecución de la función:

colores 1

Descargar colores 1

 
                
                    {
    "arrayColores": [
        {
            "nombreColor": "rojo",
            "valorHexadec": "#f00"
        },
        {
            "nombreColor": "verde",
            "valorHexadec": "#0f0"
        },
        {
            "nombreColor": "azul",
            "valorHexadec": "#00f"
        },
        {
            "nombreColor": "cyan",
            "valorHexadec": "#0ff"
        },
        {
            "nombreColor": "magenta",
            "valorHexadec": "#f0f"
        },
        {
            "nombreColor": "amarillo",
            "valorHexadec": "#ff0"
        },
        {
            "nombreColor": "negro",
            "valorHexadec": "#000"
        }
    ]
}

Por otro lado, si nos encontramos ubicados en el mismo archivo “_index.md” del directorio “shortcodes” y queremos visualizar el archivo “ejemplo.html” ubicado en el directorio “layout” en la ruta “layout/data/html/ejemplo.html”, se debe poner “../” ó “/” antes de la ruta para que la función pueda hacer la busqueda en directorios de más alto nivel. Si se desea retrodecer más de un nivel, se debe poner “../” el número de niveles a retornar.


    {{ < dataDetails alt="Ejemplo HTML" url="../layout/data/html/ejemplo.html" > }}

A continuación se observa la ejecución de la función:

Ejemplo HTML

Descargar Ejemplo HTML

 
                
                    <html>
	<head>
		<title>Mi página de ejemplo</title>
	</head>
	<body>
	Aquí va el contenido
	</body>
</html>

Referencias: