Enlaces de páginas
Grav tiene una variedad de opciones flexibles de enlace que te permiten vincular desde una página a otra, e incluso a páginas remotas. Si alguna vez has enlazado archivos usando HTML o trabajado con un sistema de archivos usando línea de comandos, mucho de esto debería ser muy fácil de entender.
Veremos algunos ejemplos sencillos usando este modelo básico y simplificado de cómo podría verse el directorio Pages de un sitio Grav.
Usando esta estructura de directorios como ejemplo, veremos los diferentes tipos de enlaces que puedes usar en tu contenido.
Para comenzar, aquí hay un vistazo rápido a algunos de los componentes comunes de un enlace en Grav y lo que significan.
[Contenido Enlazado](../ruta/slug/pagina)
Cadena | Descripción |
---|---|
[] | Los corchetes se usan para envolver el texto o contenido alternativo que se enlaza. En HTML, este sería el contenido entre <a href=""> y </a> . |
() | Los paréntesis se usan para rodear el enlace en sí. Se colocan directamente después de los corchetes. |
../ | Cuando se usa en el enlace, indica subir un nivel en el directorio. |
Relativo por Slug
Grav no limita tus enlaces internos a nombres específicos dentro de tu estructura de archivos/directorios. También puede usar slugs asignados tanto en la cabecera del archivo como en el nombre de directorio por defecto. Esto hace que crear enlaces rápidos sea fácil, ya que no tienes que recordar el nombre específico del archivo, sino un slug fácil de recordar (y relevante).
El motor de plantillas de Grav usa nombres de archivo para determinar qué plantilla aplicarles. Por ejemplo, un blog podría usar el nombre de archivo estándar item.md
para cada entrada. La entrada en sí puede tener un slug asignado que tenga más sentido, como hierba
o la-hierba-es-verde
.
Los nombres de directorio también tienen números asignados que ayudan con el orden. No necesitas incluir estos números en los enlaces relativos por slug. Grav los ignora al crear el slug, por lo que la estructura de URLs de tu sitio es más limpia.
Aquí hay algunos ejemplos de enlaces relativos por slug.
En este ejemplo, subimos un directorio y cargamos la página por defecto ubicada en el directorio pages/01.blue/02.water/item.md
desde pages/01.blue/01.sky/item.md
. El archivo item.md
no tiene slug asignado, por lo que Grav usa el nombre del directorio.
[enlace](../water)
Este siguiente ejemplo hace algo muy similar, enlazando desde pages/01.blue/01.sky/item.md
a pages/02.green/02.tree/item.md
, pero al cargar el archivo item.md
, se le ha asignado un slug de tree-is-green
.
[enlace](../../green/tree-is-green)
El slug colocado en la cabecera de item.md
reemplaza el slug green
del nombre de carpeta por defecto.
Relativo por Directorio
Los enlaces Relativos por Directorio usan destinos establecidos relativos a la página actual. Esto puede ser tan simple como enlazar a otro archivo en el directorio actual, como un archivo de imagen, o tan complejo como subir varios niveles de directorio y luego bajar a la carpeta/archivo específico que necesitas mostrar.
Con enlaces relativos, la ubicación del archivo fuente es tan importante como la del destino. Si alguno de los archivos involucrados se mueve, cambiando la ruta entre ellos, el enlace puede romperse.
La ventaja de este tipo de estructura de enlaces es que puedes cambiar fácilmente entre un servidor de desarrollo local y un servidor en vivo con un nombre de dominio diferente y, mientras la estructura de archivos permanezca consistente, los enlaces deberían funcionar sin problemas.
Un enlace de archivo apunta a un archivo específico por nombre, en lugar de su directorio o slug. Si estuvieras creando un enlace desde pages/01.blue/01.sky/item.md
a /pages/02.green/01.grass/item.md
, usarías el siguiente comando.
[enlace](../../02.green/01.grass/item.md)
Este enlace sube dos carpetas, como indica ../../
, y luego baja dos carpetas, apuntando directamente a item.md
como destino.
A veces, solo quieres dirigir al usuario un directorio arriba, cargando la página por defecto. Como no se indica un archivo exacto, Grav elige cuál cargar. Para un sitio Grav bien organizado, esto no debería ser un problema.
En este ejemplo, enlazaremos pages/01.blue/01.sky/item.md
a /pages/02.green/
, lo que cargaría el archivo color.md
por defecto.
[enlace](../../02.green)
Si quieres enlazar a un directorio dos niveles arriba, puedes hacerlo usando este proceso.
El siguiente ejemplo es muy parecido al enlace de archivo que mostramos antes. En lugar de enlazar directamente al archivo, enlazamos a su directorio, que debería cargar el archivo que queremos de todos modos, ya que es el archivo por defecto. Si estuvieras creando un enlace desde pages/01.blue/01.sky/item.md
a /pages/02.green/01.grass/
, usarías el siguiente comando.
[enlace](../../02.green/01.grass)
Absoluto
Los enlaces absolutos son similares a los relativos, pero son relativos a la raíz del sitio. En Grav, esto normalmente se basa en tu directorio /user/pages/. Este tipo de enlace se puede hacer de dos maneras diferentes.
Puedes hacerlo de manera similar al estilo Relativo por Slug, que usa el slug o nombre de directorio en la ruta para simplificar. Este método elimina posibles problemas de que cambios de orden posteriores (cambiando el número al principio del nombre de la carpeta) rompan el enlace. Este sería el método más comúnmente usado para enlaces absolutos.
En un enlace absoluto, el enlace comienza con una /
. Aquí hay un ejemplo de un enlace absoluto hecho a pages/01.blue/01.sky/item.md
en el estilo Slug.
[enlace](/blue/sky)
El segundo método sigue el estilo Relativo por Directorio detallado anteriormente. Este método incluye elementos como los números de orden al principio de los nombres de directorio. Si bien esto añade el potencial de un enlace roto cuando se reordena el contenido, es más confiable cuando se usa con servicios como Github, donde los enlaces de contenido no se benefician de la flexibilidad de Grav. Aquí hay un ejemplo de un enlace absoluto hecho a pages/01.blue/01.sky/item.md
usando este estilo.
[enlace](/01.blue/01.sky)
Remoto
Los enlaces remotos te permiten enlazar directamente a casi cualquier archivo o documento externo a través de su URL. Esto no tiene que incluir el contenido de tu propio sitio, pero puede. Aquí hay un ejemplo de cómo enlazarías a la página principal de Google.
[enlace](http://www.google.com)
Puedes enlazar a casi cualquier URL directa, incluyendo enlaces HTTPS seguros. Por ejemplo:
[enlace](https://github.com)
Atributos de Enlace
Una gran nueva característica que puedes aprovechar es proporcionar atributos de enlace directamente a través de la sintaxis markdown. Esto te permite agregar fácilmente atributos HTML como class, id, rel y target sin necesidad de Markdown Extra.
Algunos ejemplos de esto son:
Atributo Class/Classes
[Botón Grande](../alguna-pagina?classes=boton,grande)
lo que resultará en HTML similar a:
<a href="/tus/paginas/alguna-pagina" class="boton grande">Botón Grande</a>
Atributo ID
[Botón Único](../alguna-pagina?id=boton-importante)
lo que resultará en HTML similar a:
<a href="/tus/paginas/alguna-pagina" id="boton-importante">Botón Único</a>
Atributo Rel
[Enlace NoFollow](../alguna-pagina?rel=nofollow)
lo que resultará en HTML similar a:
<a href="/tus/paginas/alguna-pagina" rel="nofollow">Enlace NoFollow</a>
Atributo Target
[Enlace en nueva pestaña](../alguna-pagina?target=_blank)
lo que resultará en HTML similar a:
<a href="/tus/paginas/alguna-pagina" target="_blank">Enlace en nueva pestaña</a>
Combinaciones de Atributos
[Combinaciones de Atributos](../alguna-pagina?target=_blank&classes=boton)
lo que resultará en HTML similar a:
<a href="/tus/paginas/alguna-pagina" target="_blank" class="boton">Combinaciones de Atributos</a>
Combinaciones de Atributos con Anclas
[Ancla de Elemento](../alguna-pagina?target=_blank&classes=boton#id-elemento)
lo que resultará en HTML similar a:
<a href="/tus/paginas/alguna-pagina#id-elemento" target="_blank" class="boton">Ancla de Elemento</a>
Enlaces de Ancla en la Misma Página
[Ancla de Elemento](?classes=boton#id-elemento)
lo que resultará en HTML similar a:
<a href="#id-elemento" class="boton">
Ten en cuenta que el ancla debe venir después de la consulta como se discute en Issue 1324
Paso de Atributos No Soportados
[Paso del atributo 'gato'](../alguna-pagina?classes=subrayado&gato=negro)
lo que resultará en HTML similar a:
<a href="/tus/paginas/alguna-pagina?gato=negro" class="subrayado">Paso del atributo 'gato'</a>
Omitir Todos los Atributos
[Omitir todos los atributos](../alguna-pagina?classes=subrayado&rel=nofollow&noprocess)
lo que resultará en HTML similar a:
<a href="/tus/paginas/alguna-pagina?rel=nofollow&classes=subrayado">Omitir todos los atributos</a>
Omitir Ciertos Atributos
[Omitir ciertos atributos](../alguna-pagina?id=mivariable&classes=subrayado&target=_blank&noprocess=id,classes)
lo que resultará en HTML similar a:
<a href="/tus/paginas/alguna-pagina?id=mivariable&classes=subrayado" target="_blank">Omitir ciertos atributos</a>
Esto es útil cuando intentas omitir 1 o más atributos específicos sin afectar a los demás.