そのため、イラスト付きの書籍をオンラインで公開して、追加および書き換えができるようにし、読者に通知する必要がありました。 迅速でエレガントなソリューション。
最初は、WYSIWYGエディターを備えた本格的な管理パネルを作成する予定でした。このエディターには、優れたスペルチェッカー、便利なインターフェイス、および録画にアニメーションを添付する機能が必要です。 計画は、フィールドで鉛筆スケッチの描画をアニメーション化することでした。 少し先を見て、彼らはvivusを使用して自分で絵を描いたと言います。
一般に、私たちはドメインを購入しましたが、サーバー側の開発は決して進みませんでした。それは、役に立つもの以上のものを持っているかさばるフリークであることが判明しました。 たぶん、1つの製品（jekyll）の説明に出会わなかったなら、それがすべて残っていたでしょう。そこでは、データベースの欠如などの利点がありました。 その本が
そして、偶然にも、本をgithubでホストし、ページをマークダウンすることが決定されました。幸い、著者が愛する言葉のために、この形式（ Writage ）で保存するプラグインがすぐに見つかりました。 まあ、それをhtmlに変換するために、 ShowDownライブラリが現れました
十分に早く考え出されました。 この本は、.md形式のページファイルと.jsonファイルで構成されています。このファイルには、何が来るのか、どのアニメーションを読み込むのか、それが必要かどうかがリストされています。
設定ファイルは次のようになります。
[{ "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" }]
実際には、スクロールおよびハッシュタグの実行時にページ自体が非同期にロードされるため、ユーザーは停止した同じ場所から読み続けることができます。 ページをロードするとき、ハッシュタグがあればそれを使用して前のエントリがロードされるため、これが本の始まりであるとは思われません。
同期Ajaxブラウザーの使用を許可しませんでしたが、より良い場合があります。 これを実行しました。最初に、id = hashtagのブロックが作成され、次にページをダイレクトするリクエストが送信されます。 したがって、どのリクエストが完了するのが速いかに関係なく、リクエストされたすべてのページが所定の位置に収まります。
構成ファイルおよびオプションのパラメーターからページオブジェクトを受け取るページ読み込み関数は次のとおりです：ページのハッシュを変更する必要があるかどうか、現在のページの前または前にこのページを追加するかどうか、読み込み後に新しいページにスクロールするかどうか。 オプションは、バックグラウンドページの読み込みを有効にします。
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('<div id="' + page.hash + '"></div>'); } else { $("#content").prepend('<div id="' + page.hash + '"></div>'); } $("#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('<div id="animation-'+page.hash+'" style="'+page.animation.style+'"></div>'); 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'); } } }); } }
実際、それはすべて魔法です。 著者は落ち着いて本を書き、数回クリックするだけで出版します（彼はjsonファイルの編集にも対応しました）。
完成した本（英語）をここで読むことができ、githubのコードで内部をより詳細に検討できます。
お時間をいただきありがとうございます、無駄になっていないことを願っています！