Octopress - Anker Plugin - Gehaxelts Blog

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 :)

#!/usr/bin/env ruby # encoding: utf-8 module Jekyll class SetAnker < Liquid::Tag HTML_TAGS = %w(h1 h2 h3 h4 h5 h6 p pre code li hr a em strong i b img) def initialize(name, params, tokens) super @msg = "Params of 'setanker' have to be [type] #[id] [title]" if params =~ /^\s*(\S+?)\s+#(\S+?)\s+(.+)\s*$/ if is_valide_html_tag?($1) @tag_type = $1 else raise ArgumentError, "Type of 'setanker' has to be one of #{HTML_TAGS.inspect}" end @id = $2 @title = $3 @id.gsub! /[^\w\d]/, '-' @title.strip! else raise ArgumentError, @msg end raise ArgumentError, @msg if [@tag_type, @id, @title].any? { |v| v.nil? or v.strip.empty? } end def render(context) %(<#{@tag_type} id="#{@id}">#{@title}</#{@tag_type}>) end private def is_valide_html_tag?(tag) HTML_TAGS.include? tag end end end Liquid::Template.register_tag('setanker', Jekyll::SetAnker) module Jekyll class GoAnker < Liquid::Tag def initialize(name, params, tokens) super @msg = "Params of 'goanker' have to be #[id] [title]" if params =~ /^\s*#(\S+?)\s+(.+)\s*$/ @id = $1 @title = $2 @id.gsub! /[^\w\d]/, '-' @title.strip! else raise ArgumentError, @msg end raise ArgumentError, @msg if [@id, @title].any? { |v| v.nil? or v.strip.empty? } end def render(context) %(<a href="\##{@id}">#{@title}</a>) end end end Liquid::Template.register_tag('goanker', Jekyll::GoAnker)

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:

<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

{ % 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:

{ % 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