2012-04-18 8 views
11

Al compilar un sitio HTML estático, puede establecer la url base como <base url="http://localhost:8888/mysite" />. Se supone que al insertar, por ejemplo, una imagen, puede hacerlo desde la URL base como por lo <img src="/img/logo.png" />, lo que equivale a <img src="http://localhost:8888/mysite/img/logo.png" />¿Cómo creo enlaces relacionados con la raíz en un sitio estático?

Mi problema es que estos vínculos relativos no funcionan cuando muevo el sitio alrededor, lo cual es un dolor porque estoy tratando de compartirlo con alguien en Dropbox. Pensé que podría cambiar la url base a <base url="http://dl.dropbox.com/u/xxxxxxxx/mysite" />, pero los enlaces de imagen están buscando aquí: <img src="http://dl.dropbox.com/img/logo.png" /> en lugar de la URL base completa que establecí en el encabezado.

¿Por qué es esto?

+0

¿por qué no eliminas esa cosa '' base url' y simplemente mueves la carpeta principal ...? (Dado que no es un sitio dinámico, no lo entiendo ... su url base es donde reside su archivo actual ...) –

+0

Eso es lo que yo también pensaba, pero si elimino la etiqueta base y arrastro mi sitio web a una carpeta arbitraria como el escritorio y coloque el cursor sobre un enlace, lo busca en 'http: // localhost/assets/img'. Debería ser algo así como '~/Desktop/web_folder/assets/img'. –

+0

No importa en qué nivel de jerarquía esté en el sitio, quiero poder llamar a una imagen de '/ assets/img/foo.png'. Si considero cada página como su propia base, tendré que crear vínculos relativos y tener que preocuparme por esta situación: '../../../../../ assets/img/foo.png' . –

Respuesta

15

Pierde el principal / para que sea una dirección URL relativa:

<img src="img/logo.png" /> 

Hay 3 tipos de URL:

  • totalmente calificado, por ejemplo http://example.org/path/to/file

  • Absoluto, p. Ej. /path/to/file (suponiendo que el enlace proviene de cualquier página del dominio example.org)

  • Relativo, p. Ej. path/to/file (suponiendo que el enlace proviene de la raíz (/) "carpeta" o si hay una URL base http://example.org/) o to/file (suponiendo que el enlace viene desde dentro de la carpeta "" 'camino' o la URL base es http://example.org/path/)

+0

El uso de URL relativas se vuelve mucho peor cuando se crea un sitio con una jerarquía compleja. Dependiendo de la página, tendría que usar 'ruta/a/archivo' o' ../ ruta/a/archivo' o '../../ ruta/a/archivo', que me gustaría evitar. Estoy usando [Middleman] (http://middlemanapp.com) como un generador de sitios estáticos para obtener los enlaces para el navegador principal, por lo que deben buscar el nombre en cada página del sitio. –

+3

Siempre escuché las URL con una barra diagonal ('/') llamada _root relative urls_. Además, hay _protocol relative_ (a veces llamado esquema relativo) urls: '

2

Soy consciente de que llego un poco tarde al juego en este caso, pero realmente debería estar usando etiquetas de activos de Rails en lugar de HTML sin procesar aquí.

Por ejemplo, en lugar de utilizar:

<img src="/img/logo.png" /> 

que puedes usar:

<%= image_tag 'logo.png' %> 

Suponiendo que:

  1. Estás usando .erb archivos para sus páginas fuente
  2. Ha establecido la ruta del elemento de imagen a /img/ en yo ur archivo config.rb

Como alternativa, podría hacer referencia a CSS con:

<%= stylesheet_link_tag 'file.css' %> 

archivos Javascript pueden ser incluidos con:

<%= javascript_include_tag 'file.js' %> 

Desde Intermediario le permite controlar si o no activos se referencian relativamente (al quitar algunas líneas en config.rb), el uso de etiquetas de activos de Rails tiene mucho más sentido que las HTML estáticas. Recomiendo cambiar si aún no lo has hecho. Si tiene más preguntas sobre una de estas etiquetas o la sintaxis de ERB, ¡no dude en preguntar aquí!

Cuestiones relacionadas