Online-Buch zum Selbermachen mit JavaScript

    Bild

    Daher war es erforderlich, ein Buch mit Abbildungen online zu veröffentlichen, damit es hinzugefügt und umgeschrieben werden konnte, und die Leser darüber zu informieren. Schnelle und elegante Lösung unter dem Schnitt.

    Ursprünglich war geplant, ein vollwertiges Admin-Panel mit einem WYSIWYG-Editor zu schreiben, das eine gute Rechtschreibprüfung, eine komfortable Benutzeroberfläche und die Möglichkeit zum Anhängen von Animationen an die Aufzeichnung aufweisen muss. Die Pläne waren, das Zeichnen von Bleistiftskizzen auf den Feldern zu animieren. Mit Blick auf die Zukunft sage ich, dass sie selbst mit vivus gezeichnet haben .

    Im Allgemeinen haben wir eine Domain gekauft, aber die Entwicklung der Serverseite verlief in keiner Weise: Es stellte sich heraus, dass einige große Freaks mehr hatten als das, was nützlich war. Vielleicht wäre alles so geblieben, wenn ich nicht auf eine Beschreibung eines Produkts gestoßen wäre (Jekyll), bei dem die Vorteile unter anderem das Fehlen einer Datenbank waren. Damals wurde mir klar, dass das Buch keine Datenbank als Kuhsattel benötigt .

    Und es kehrte sich um: Es wurde beschlossen, das Buch auf Github zu hosten und den Seiten-Markdown abzuschreiben, der Vorteil für das Lieblingswort des Autors. Ein Plugin zum Speichern in diesem Format ( Writage ) wurde schnell gefunden . Nun, um es in HTML zu konvertieren, ist die ShowDown- Bibliothek aufgetaucht

    Schnell genug gedacht wurde realisiert. Das Buch besteht aus Auslagerungsdateien im .md-Format und einer .json-Datei, in der aufgeführt ist, was für was kommt, welche Animation geladen werden muss und ob dies überhaupt erforderlich ist.

    So sieht die Konfigurationsdatei aus:

    [{
        "file": "имяфайла.md",
        "hash": "хештег",
        "animation": {
            "svg": "анимация.svg",
            "duration": 2000,//Продолжительность анимации в милисекундах
            "style": "width:400px;height:300px;opacity:0.5;float:right;margin-right:20px;"//Стиль для блока анимации, чтобы было понятно где его размещать
        },
    {
        "file": "имяфайла2.md",
        "hash": "хештег2"
    }]
    

    Tatsächlich werden die Seiten selbst beim Scrollen und beim Hashtag asynchron geladen, sodass der Benutzer an derselben Stelle, an der er angehalten hat, weiterlesen kann. Beim Laden einer Seite wird der vorherige Eintrag mithilfe des Hashtags geladen, sofern vorhanden, sodass dies nicht der Anfang des Buches zu sein scheint.

    Ich habe nicht zugelassen, dass ich den synchronen Ajax-Browser verwende, aber es kann besser sein. Ich habe dies getan: Zuerst werden Blöcke mit id = hashtag erstellt, dann werden Anfragen an direkte Seiten gesendet. Auf diese Weise werden alle angeforderten Seiten eingefügt, unabhängig davon, welche der Anforderungen schneller ausgeführt werden kann.

    Hier ist die Seitenladefunktion, das das Seitenobjekt aus der Konfigurationsdatei und optionale Parameter akzeptiert: ob der Hash der Seite geändert werden soll, ob diese Seite nach der aktuellen oder vor der Seite hinzugefügt werden soll und ob nach dem Laden ein Bildlauf zu einer neuen Seite durchgeführt werden soll. Optionen ermöglichen das Laden von Hintergrundseiten.

    function loadPage(page, options = {}) {
        if (options.changeHash === undefined) {
            options.changeHash = true;
        }
        if (options.next === undefined) {
            options.next = true;
        }
        if (options.scroll === undefined) {
            options.scroll = true;
        }
        if (options.changeHash) {
            document.location.hash = "#" + page.hash;
        }
        if ($("#" + page.hash).size() == 0) {
            if (options.next) {
                $("#content").append('
    '); } else { $("#content").prepend('
    '); } $("#loader").show(); jQuery.ajax({ url: "/book/" + page.file, success: function(result) { //Преобразуем markdown в html var converter = new showdown.Converter(); var html = converter.makeHtml(result); $("#" + page.hash).html(html); if(page.animation!==undefined){ //Рисуем иллюстрацию, если она есть $("#" + page.hash).prepend('
    '); var vivus=new Vivus('animation-'+page.hash, {duration: page.animation.duration, file: '/svg/'+page.animation.svg, type:'oneByOne'}, finishedDrawing); } $("#loader").fadeOut(); if (options.scroll) { //Ползем к загруженной странице, если нужно $('html,body').animate({ scrollTop: $("#" + page.hash).offset().top }, 300, 'swing'); } } }); } }

    Eigentlich ist das alles Magie. Der Autor schreibt sich ruhig ein Buch und veröffentlicht es mit ein paar Klicks (er hat auch die Bearbeitung der JSON-Datei selbst erledigt).

    Sie können das fertige Buch hier lesen (es ist auf Englisch) und die Insides im Code auf Github genauer betrachten .

    Vielen Dank für Ihre Zeit, ich hoffe, Sie fanden es nicht verschwendet!

    Jetzt auch beliebt: