Markdown ドキュメントを静的 HTML ページとして表示するための設定不要のスクリプト
Gumdropは、Markdown で記述された Web サイトやドキュメントを生成できる、使いやすいスタンドアロン スクリプトとして設計されています。 CDN (Markdown パーサーを含む) からすべての依存関係を動的にロードし、構成や初期化を必要としません。
Gumdrop はインストールの必要がなく、 scriptタグを使用して HTML ドキュメントにロードするだけで済みます。
< script src =" https://cdn.jsdelivr.net/npm/gumdrop@4 " > </ script > Markdown を使用して静的 Web サイトを作成するには、ファイル サーバー上に HTML テンプレート ( index.html ) を作成し、 Gumdrop を外部スクリプト ファイルとして追加するだけです。
< main > </ main >
< script src =" path/to/gumdrop.js " >
fileプロトコルはフェッチ リクエストをサポートしていないため、http/httpsプロトコルを介してファイルを提供する必要があることに注意してください。
pagesフォルダー内の Markdown ファイルを読み込むことができます。 Gumdrop はURL のハッシュ フラグメントを監視し、対応する Markdown ファイルをpagesフォルダーから読み込みます。解析された Markdown ファイルは、存在する場合は<main> HTML ノードにレンダリングされ、存在しない場合はbodyにレンダリングされます。ファイルが指定されていない場合にロードされるデフォルトのファイルは、 pages/index.mdです。 pagesフォルダー内の別のファイルへのリンクを作成するには、名前の先頭に#!/を付けたリンクを作成するだけです。
[ Link to about.md ] ( #!/about )静的リソース (画像など) は、ファイル サーバーによって提供される任意のフォルダーからロードできます。パスは、 index.htmlに対する相対パスです。さまざまな HTTP エラーのエラー ページをerrorsフォルダーに配置できます。各ファイルには、それが表す HTTP エラー コードに従って名前を付ける必要があります (例: errors/404.md )。
YAML Front Matter でドキュメントに追加のデータを指定できます。口ひげテンプレートを使用すると、どの Markdown ドキュメントでもこのデータにアクセスできます。
個別のファイルを使用してデータを保存し、これらのリソース ファイルを前付のドキュメントにリンクすることもできます。リソース ファイルには、YAML (デフォルト)、JSON、または Markdown タイプを使用できます。 !fileタイプの注釈が付けられた文書の前付けの値はすべて、ファイル リソースとみなされます。先頭の/で始まるファイル パスは、 index.htmlに対する相対パスです。先頭の/が欠落している場合は、 dataフォルダーがリソースの場所とみなされます。ファイル タイプ (拡張子) が指定されていない場合は、 .yaml拡張子が想定されます。 .mdリソース ファイルの場合、戻り値はレンダリングされた Markdown ドキュメントになります。
# data/todo.yaml
todos :
- title : First todo
text : Complete your first assignment
completed : true
- title : YAML
text : Learn more about YAML Front Matters
completed : false ---
todos: !file todo.yaml
---
{{#todos}}
- **{{title}}**: {{text}} {{#completed}}(✔){{/completed}}
{{/todos}}
フェンスで囲まれたコード ブロックは、Prism.js によって自動的に処理されます。サポートされている言語は、Prism.js バンドルのデフォルト言語です。構文を強調表示するには、 index.htmlにPrism.jsスタイルを含める必要があります。
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css " />Gumdrop は静的ファイル サーバーとして機能するため、GitHub Pages で使用できます。 GitHub Pages が Jekyll を使用してサイトを変換しようとするのを防ぐには、空の.nojekyllファイルをサイトのルートに追加します。
すべてのアイデア、推奨事項、バグレポート、プルリクエストを歓迎します。 ?