Gehaxelts Blog

IT-Security & Hacking

Octopress - Anker Plugin

Man kann es vielleicht von einigen Seiten her, dass man mit Anker-Links innerhalb eines Dokuments verlinken kann.

Eine solche Funktion, aufgehübscht mit ein wenig jQuery, wollte ich nun Octopress verpassen :)

Dazu habe ich erstmal das Pluginscript geschrieben, welches man unter dem Namen “anker.rb” im Pluginordner von Octopress speichert.

Der Code

DSIW war so freundlich den Code noch etwas zu überarbeiten. Man kann nun folgende Funktionen nutzen:

  • Ankertyp selbst setzen (h1/h2/h3/span/p/…)

  • Ankername selbst setzen (#anker1 / #blaanker)

  • Ankertitel selbst setzen (Hallo Welt / Testanker)

Danke dafür :)

Vorbereitungen

Man muss noch einige Vorbeireitungen treffen, bevor man das Plugin vollständig nutzen kann. Dazu müssen wir die head.html im Ordner source/_includes/custom bearbeiten, und folgenden Inhalt anfügen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
        jQuery('a[href*=#]').bind("click", function(event) {
                event.preventDefault();
                var ziel = jQuery(this).attr("href");

                if (jQuery.browser.opera) {
                    var target = 'html';
                }else{
                    var target = 'html,body';
                }

                jQuery(target).animate({
                        scrollTop: jQuery(ziel).offset().top
                }, 1000 , function (){location.hash = ziel;});
});
return false;
});
</script>

Übernommen und abgeändert

Nutzung

Man hat nun zwei Befehle in der Hand, mit denen man die Anker setzen und nutzen kann.

Einen Anker setzt man mit

1
{ % setanker h3 #anker Titel % }

Der Anker ist dann eine H2-Überschrift, aber das kann man gerne auch im Script oben noch abändern.

Möchte man nun dahin verlinken, muss man folgenden Tag nutzen:

1
{ % goanker #anker Das ist ein Ankerlink % }

Dabei muss man darauf achten, dass der Parameter [anker] identisch sind, sonst passiert nichts.

Einmal klicken und nach oben scrollen .

Update

DSIW hat den Code nochmal überarbeitet. Siehe oben.

Gruß

gehaxelt

Texttutorials

« Shell-Webbrowser lynx Squid-Proxy auf dem Uberspace »