Wie verlinke ich direkt zu einem bestimmten TEIL eines Blogposts oder eines Online-Artikels? (zB zu einem Absatz oder einer Überschrift)


7

Ich möchte auf einen wirklich coolen TEIL eines Artikels verlinken, wie diesen Blog-Beitrag, in dem unter anderem das Altern der Karten in Trello angekündigt wird .

Was kann ich verwenden, um mit Google Chrome oder in einem beliebigen Browser im Allgemeinen eine URL zu erstellen, die beim Klicken direkt auf diese Überschrift verweist? Wenn ein Benutzer dem Link folgt, sollte er Folgendes sehen:

  • Blog-Seite

1
Für Chrome-Nutzer habe ich eine Erweiterung ( hier verfügbar ) geschrieben, die einen unverankerten Link neben jedem Header erstellt, dem eine ID zugewiesen wurde (oder jedem Header mit einem untergeordneten Element, dem eine ID zugewiesen wurde). Es könnte einige Verbesserungen gebrauchen, wie die Unterstützung des nameAttributs, aber es funktioniert gut genug. Sie können den Quellcode auch anzeigen , wenn Sie interessiert sind.
Grant

Antworten:


9

In HTML können Sie durch Anhängen #FRAGMENTan die URL, wobei FRAGMENTder Wert eines idAttributs (für ein beliebiges Element) oder eines nameAttributs (für ein aoder ein areaElement) angegeben ist, auf Fragmente verweisen . Der HTML-Autor muss diese Attribute bereitstellen.

So finden Sie diese manuell: Markieren Sie den gesamten Inhalt, zu dem Sie einen Link erstellen möchten, überprüfen Sie den Quellcode (in der Regel mit der rechten Maustaste und dann "Quellcode anzeigen") und Ctrl+ ffür id=und name=.

XPointer ist eine Spezifikation, die es ermöglicht, auf einen beliebigen Teil eines XHTML-Dokuments zu verweisen, selbst wenn der Autor keine Fragment-IDs angegeben hat. Derzeit benötigen Sie wahrscheinlich ein Browser-Add-On (und das, zu dem Sie den Link geben möchten), um die XPointer-Unterstützung zu aktivieren.

Für alte Versionen von Firefox gibt es FXPointer :

Wie oft haben Sie einem Freund oder Kollegen gesagt, dass Sie http://example.com/some/docnach XXXX suchen sollen? Eigentlich mache ich viel. Tatsächlich wird dies immer wichtiger, da das mobile Internet immer schneller wird und kleine Bildschirme mit schwerer zu bedienenden Tastaturen immer häufiger werden. Ich möchte damit beginnen, in meinen Dokumenten und Blog-Posts Links zu erstellen, die genau auf einen Absatz auf der Seite verweisen. Ich hoffe die FXPointer Firefox Erweiterung wird helfen.


Tolle! Hat für mich gearbeitet.
Iram Bukhari

Dies ist ein Beispiel für eine hervorragende Antwort
Damián Rafael Lattenero

1

Das kannst du nicht (auf dieser speziellen Seite). Das Verknüpfen mit einem bestimmten Unterabschnitt (sodass der Browser eines Benutzers automatisch zu diesem führt) erfordert die Verwendung von HTML-Ankern für jeden Abschnitt, über den diese Seite nicht verfügt. Genauer gesagt müsste die Überschrift Folgendes enthalten oder in der Nähe haben:

  • Ein A(Anker-) Tag
  • Mit einem idoder nameEigentum

Wenn diese Kriterien erfüllt sind, können Sie einen Link zu erstellen

http://example.com/webpage.html#anchorName

Wo anchorNameist der Wert der nameoder idEigenschaft.

Diese Trello-Seite hat nur einen Header:

<h2>Card Aging</h2>

Es kann also nicht verknüpft werden. Wenn sie stattdessen verwendet hätten:

<h2><a name="aging">Card Aging</a></h2>

dann könnten Sie wie folgt darauf verlinken:

http://blog.trello.com/introducing-power-ups-calendar-card-aging-and-more/#aging

Wie ich vermutet habe; Ich denke, ein Dienst, der eine bestimmte Menge von Daten zu "statischen" Inhalten mit einem XPath oder etwas anderem adressiert, wäre wirklich nützlich. Das Beste, was Sie tun können, ist, einen Abschnitt mit der Maus zu markieren und diesen Teilbaum in Anwendungen wie Evernote zu speichern. dann teilen Sie es auf diese Weise. Ich hoffe, jemand schafft Abhilfe für diese Situation ...!
Fatuhoku

Es liegt ganz beim Site-Entwickler.
Darth Android

Beachten Sie, dass das idAttribut nicht nur für Elemente verwendet werden kann a.
oder
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.