Distillテンプレート：
美しいブログを作成する

かわいいインタラクティブなバナーがあると素敵ですね！

Distillブログテンプレートへようこそ！このフレームワークはdistill.pubのデザインに基づいており、美しくインタラクティブな技術ブログを簡単に作成できるように適応されています。機械学習、データサイエンス、物理学、またはその他の技術的なトピックについて書いているかどうかにかかわらず、このテンプレートは必要な構造とコンポーネントを提供します。

このテンプレートには、数式、インタラクティブな可視化、引用、脚注などのサポートが含まれています。このガイドでは、テンプレートの構造と、それをあなた自身のブログ用にカスタマイズする方法について説明します。

このテンプレートは、以下の機能を念頭に置いて構築されています：

1. 美しいタイポグラフィとレイアウト：このテンプレートは、デスクトップとモバイルの両方でうまく機能する、Distillのクリーンで読みやすいデザイン原則に従っています。

2. インタラクティブコンポーネントのサポート：以下に示すメモリウィジェットのような、インタラクティブな可視化を含めることができます：

テンプレートの使い方

このテンプレートを使用して独自のブログを作成する方法を見ていきましょう：

インストールとセットアップ

まず、リポジトリを複製してローカルマシンにクローンし、依存関係をインストールします：

git clone https://huggingface.co/spaces/lvwerra/distill-blog-template cd distill-blog-template npm install

開発サーバーを実行するには：

npm run dev

これにより、 http://localhost:8080 でローカルサーバーが起動し、編集しながらブログをプレビューできます。

フロントマターの編集

フロントマターには、タイトル、説明、著者情報などのブログ投稿に関するメタデータが含まれています。src/index.htmlの上部にある<d-front-matter>セクションを編集します：

<d-front-matter> <script id='distill-front-matter' type="text/json">{ "title": "あなたのブログタイトル", "description": "あなたのブログの簡単な説明", "published": "月 日, 年", "affiliation": {"name": "あなたの組織"}, "authors": [ { "author":"あなたの名前", "authorURL":"https://your-website.com" } ], "katex": { "delimiters": [ {"left": "$$", "right": "$$", "display": false} ] } } </script> </d-front-matter>

src/distill.jsのbylineTemplate内の対応するエントリも編集してください。

コンテンツの作成

メインコンテンツは<d-article>タグ内に配置します。いくつかの特別なDistillコンポーネントを持つ標準HTMLタグを使用できます：

数式

<d-math>x^2 + y^2 = z^2</d-math>を使用してインライン数式を含めることができ、x^2 + y^2 = z^2として表示されます。

ブロック方程式には、<d-math block>E = mc^2</d-math>を使用します：

E = mc^2

コード

ブログ投稿にコードサンプルを含めるのは素晴らしいことです。インラインでは<code>タグを使用できます。コードブロックには<d-code block language="clike">タグを使用できます。例えば、次のブロックを見てみましょう：

<d-code block language="python"> def print_hello_world(): print("hello world") </d-code>

これは次のように表示されます：

def print_hello_world(): print("hello world")

最後に、GitHubからコードを含めたい場合は、emgithub.comを使用して、例えばこのような折りたたみ可能なウィジェットを作成できます：

<details style="background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; margin: 1em 0;"> <summary style="padding: 12px; cursor: pointer; user-select: none; background: #f3f4f6; border-bottom: 1px solid #d0d7de;"> 👉 Picotronでのオーバーラップを持つナイーブなDP実装（クリックして展開） </summary> <div class="code-embed-container" style="margin: 0; border-radius: 0; overflow-x: scroll; width: max-content; min-width: 100%; font-size: 8px;"></div> <script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F0035cce0e04afd6192763b11efe50010d8ad0f71%2Fpicotron%2Fdata_parallel%2Fdata_parallel.py%23L10-L60&style=github&type=code&showBorder=off&showLineNumbers=on&showFileMeta=on&showCopy=on&showFullPath=on"> </script> </div> </details>

これは次のように表示されます：

👉 Picotronでのオーバーラップを持つナイーブなDP実装（クリックして展開）

補足説明

<aside>...</aside>タグを使用して、サイドノートを含めることができます：

図と画像

キャプション付きの図を含めます：

<figure> <img src="/assets/images/placeholder.png" alt="プレースホルダー画像"> <figcaption>あなたの図のキャプション</figcaption> </figure>

これは次のように表示されます：

プレースホルダー画像
あなたの図のキャプション

表

デフォルトのHTML形式を使用して、簡単に表を追加できます：

<table> <thead> <tr> <th><strong>モデル</strong></th> <th><strong>精度</strong></th> <th><strong>速度</strong></th> </tr> </thead> <tbody> <tr> <td>モデルA</td> <td>95%</td> <td>速い</td> </tr> <tr> <td>モデルB</td> <td>98%</td> <td>中程度</td> </tr> <tr> <td>モデルC</td> <td>99%</td> <td>遅い</td> </tr> </tbody> </table>

これは予想通り表として表示されます：

モデル 精度 速度
モデルA 95% 速い
モデルB 98% 中程度
モデルC 99% 遅い

引用

引用は<d-cite bibtex-key="example2023"></d-cite>タグと別の参考文献ファイルを使用して含めることができます：

論文で示されているように、このアプローチにはいくつかの利点があります。

ビルドとデプロイ

本番用にブログをビルドする準備ができたら：

npm run build

これにより、dist/ディレクトリに最適化されたファイルが作成されます。その後、変更をコミットしてスペースにプッシュし、結果を確認できます。

インタラクティブコンポーネント

例えば、HTMLフラグメントを作成することで、ブログにインタラクティブなPlotly可視化を含めることができます：

これらのチャートを生成するには、付属のPythonスクリプトを実行します：

pip install numpy plotly pandas python plotly_example.py

これにより、src/fragments/ディレクトリにHTMLフラグメントが作成され、フラグメント名に一致するid属性を使用してブログに含めることができます。

HTMLフラグメントの使用

このテンプレートはHTMLフラグメントをサポートしており、複雑な可視化やインタラクティブコンポーネントを含めるのに役立ちます：

  1. src/fragments/ディレクトリに新しいHTMLファイルを作成します。例：src/fragments/my-visualization.html
  2. {{{fragment-my-visualization}}}を使用してメインドキュメントに含めます

フラグメントにはHTML、CSS、JavaScriptを含めることができます。これらは非同期に読み込まれるため、メインドキュメントを軽量に保つのに役立ちます。

高度なカスタマイズ

スタイリング

src/style.cssを編集することで、ブログの外観をカスタマイズできます。テンプレートは色、フォント、間隔にCSSの変数を使用しているため、全体的な外観と雰囲気を簡単に調整できます。

JavaScriptの追加

インタラクティブコンポーネントについては、src/index.jsにJavaScriptコードを追加するか、新しいモジュールを作成してインポートします。テンプレートはwebpackを使用してJavaScriptファイルをバンドルします。

参考文献

src/bibliography.bibを編集して、BibTeX形式で引用を含めます。

ベストプラクティス

結論

このテンプレートは、美しくインタラクティブな技術ブログを作成するために必要なすべてを提供します。明確な文章とインタラクティブな可視化、数学的表記を組み合わせることで、複雑なアイデアを効果的に読者に伝えることができます。

より多くの例やインスピレーションについては、distill.pubをご覧ください。

引用

学術的な文脈での帰属については、この作品を以下のように引用してください

"Distillブログテンプレート", 2025.

BibTeX引用

@misc{distill_blog_template,
      title={Distillブログテンプレート},
      author={Some Authors et al},
      year={2025},
}