2012-04-18 4 views
11

Beim Erstellen einer statischen HTML-Site können Sie die Basis-URL wie folgt festlegen: <base url="http://localhost:8888/mysite" />. Angeblich soll beim Einfügen, sagen wir, ein Bild, können Sie so von dieser Basis-URL tun wie so <img src="/img/logo.png" />, die <img src="http://localhost:8888/mysite/img/logo.png" /> entsprichtWie erstelle ich Root-relative Links in einer statischen Site?

Mein Problem ist, dass diese relative Links funktionieren nicht, wenn ich die Seite bewegen, die ist ein Schmerz, weil ich versuche, es mit jemandem auf Dropbox zu teilen. Ich dachte, ich könnte einfach die Basis-URL auf <base url="http://dl.dropbox.com/u/xxxxxxxx/mysite" /> change, aber die Bild-Links suchen hier: <img src="http://dl.dropbox.com/img/logo.png" /> statt der vollständigen Basis-URL, die ich in den Kopf gesetzt.

Warum ist das?

+0

Warum eliminierst du nicht einfach diese seltsame '

+0

Das dachte ich auch, aber wenn ich das Basis-Tag entferne und meine Website ziehe in einen beliebigen Ordner wie den Desktop und den Mauszeiger über einen Link bewegen, sucht er in "http: // localhost/assets/img". Es sollte etwas wie ~ ~/Desktop/website_folder/assets/img' sein. –

+0

Egal auf welcher Hierarchieebene ich mich auf der Site befinde, ich möchte ein Bild von '/ assets/img/foo.png' aufrufen können. Wenn ich jede Seite als eigene Basis betrachte, muss ich relative Links erstellen und mich um diese Situation kümmern: '../../../../../assets/img/foo.png' . –

Antwort

15

verlieren die / führt es eine relative URL zu machen:

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

Es gibt 3 Arten von URL:

  • Fully Qualified, z.B. http://example.org/path/to/file

  • Absolut, z.B. /path/to/file (unter der Annahme, dass der Link von einer beliebigen Seite in der Domäne example.org stammt)

  • Relativ, z. path/to/file (kommt von der Wurzel der Verbindung unter der Annahme (/) „Ordner“, oder es ist eine Basis-URL http://example.org/) oder to/file (die Verbindung von innerhalb der ‚Pfad‘ „Ordner“ kommt unter der Annahme, oder die Basis-URL ist http://example.org/path/)

+0

Die Verwendung relativer URLs wird beim Erstellen einer Site mit einer komplexen Hierarchie viel stinkiger. Abhängig von der Seite müsste ich 'path/to/file' oder' ../ path/to/file' oder '../../ path/to/file' verwenden, was ich gerne vermeiden würde. Ich benutze [Middleman] (http://middlemanapp.com) als statischen Site-Generator, um die Links für das Haupt-Nav zu ziehen, also müssen sie den Namen auf jeder Seite der Site sehen. –

+3

Ich habe immer URLs mit einem führenden Schrägstrich ('/') namens _root relative URLs_ gehört. Darüber hinaus gibt es _protocol relative_ (manchmal als Schema relative) URLs: '

2

Ich bin mir bewusst, dass ich ein wenig zu spät zum Spiel auf diesem, aber Sie sollten wirklich Rails Asset-Tags anstelle von Raw HTML hier verwenden.

Zum Beispiel statt mit:

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

sollten Sie verwenden:

<%= image_tag 'logo.png' %> 

Unter der Annahme, dass:

  1. Sie verwenden .erb-Dateien für Ihre Quellseiten
  2. Sie haben den Bild-Asset-Pfad in yo auf /img/ gesetzt ur config.rb Datei

Alternativ können Sie CSS mit Referenz:

<%= stylesheet_link_tag 'file.css' %> 

Javascript-Dateien mit eingeschlossen werden können:

<%= javascript_include_tag 'file.js' %> 

Da Middleman Sie ob Assets steuern relativ referenziert werden (durch Auskommentierung einiger Zeilen in config.rb), ist die Verwendung von Rails-Asset-Tags viel sinnvoller als die von statischen HTML-Tags. Ich empfehle dringend zu wechseln, wenn Sie dies noch nicht getan haben. Wenn Sie weitere Fragen zu diesen Tags oder der ERB-Syntax haben, können Sie sich gerne hier erkundigen!

Verwandte Themen