Eleventyで独自のBragdocを作成します

開発者として、私たちの業績は大小を問わず、私たちの専門的な成長に大きく貢献しています。しかし、これらの成果は、他のタスクの中で気付かれず、失われたことがよくあります。ライアン・T・ハーターが彼の講演で「目に見えない仕事の信用を得る」で説明されているように、この「目に見えない作品」は、特にパフォーマンスのレビュー中に簡単に忘れられます。

ジュリア・エヴァンスの「自慢文書」の維持に関する記事は、解決策を提供します。ブラグ文書は、プロジェクトの関与、同僚への支援、プロセスの改善、プレゼンテーション、ワークショップ、学習体験、課外活動（ブログ、個人プロジェクト）、賞、キャリアの進歩など、貴重な貢献の記録にすぎません。

bragdocs.comなどの自慢のドキュメントを作成するためのさまざまなツールが存在しますが、独自のカスタマイズを提供することができます。このチュートリアルでは、静的サイトジェネレーターを使用してbragdocs.comのようなサイトを再現する方法を示しています。最小限のJavaScriptとCSSを使用すると、独自のパーソナライズされた自慢のドキュメントを作成できます。

自慢のドキュメントを作成します

このチュートリアルの結果は、bragdocs.comを反映しており、独自のブラッグドキュメントの基盤を提供します。ライブデモはこちらから入手できます。

前提条件

• node.js（バージョン10以降）およびnpm。
• HTMLおよびCSSに精通しています。
• Markdown、Nunjucksテンプレート、JavaScriptの理解（役立つが厳密には必要ありません）。
• 基本的なプログラミングの概念（ステートメント、ループ、JSON変数へのアクセスの場合）。

110の紹介

Eleventyは静的サイトジェネレーターです。フルスタック開発とは異なり、さまざまなテンプレート言語（HTML、マークダウン、リキッド、ヌンジャックなど）を使用して柔軟なコンテンツ作成が可能になります。このコンテンツをプロセスして、簡単にホスティングするために静的HTMLページを生成します。

あなたの110のプロジェクトを設定します

このチュートリアルでは、リポジトリEleventy-Bragdocを使用しています。

1. プロジェクトの作成： Node用のREADME.mdと.gitignoreファイルを使用して、githubリポジトリ（例えば、 eleventy-bragdoc ）を作成します。

2. 初期化：端末のeleventy-bragdocディレクトリに移動して実行します： npm init -yこれにより、 package.jsonファイルが作成されます。

3. インストール110： npm： npm install @11ty/eleventy

4. configuration（ package.json ）： package.jsonのscriptsセクションを更新します：

 {
  // ...
  「スクリプト」：{
    「start」： "lewent -serve"、
    「ビルド」：「Eleventy」
  }、
  // ...
}

5. eleventy configuration file（ .eleventy.js ）：入力ディレクトリと出力ディレクトリを指定するために、 .eleventy.jsファイルを作成します。

 module.exports = function（eleventyconfig）{
  戻る {
    dir：{
      入力：「SRC」、
      出力：「パブリック」
    }
  }
}

6. コンテンツの作成： srcディレクトリを作成し、 index.mdファイル（最初のページ）を追加します。 110はさまざまなテンプレート言語をサポートしています。この例では、マークダウンを使用しています。

7. テンプレートの作成： src/_includes/layoutsディレクトリを作成し、 base.njkファイル（nunjucksを使用したベーステンプレート）を追加します。

8. CSSと画像の接続： src/cssおよびsrc/imagesディレクトリを作成します。更新.eleventy.js ：

 module.exports = function（eleventyconfig）{
  eleventyconfig.addwatchtarget（ "./ src/css/"）
  eleventyconfig.addwatchtarget（ "./ src/images/"）
  Eleventyconfig.addpassthroughcopy（ "./ src/css/"）
  eleventyconfig.addpassthroughcopy（ "./ src/images/"）
  // ...
}

残りの手順では、コレクション、データ処理、スタイリング、展開など、Bragdoc機能の構築について詳しく説明しています。各ステップの完全なコードと詳細な説明は、元のテキストで入手できます。

以上がEleventyで独自のBragdocを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。