ホームページ > ウェブフロントエンド > CSSチュートリアル > Eleventyで独自のBragdocを作成します

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

Joseph Gordon-Levitt
リリース: 2025-03-18 11:23:23
オリジナル
137 人が閲覧しました

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.jsonscriptsセクションを更新します:

 {
  // ...
  「スクリプト」:{
    「start」: "lewent -serve"、
    「ビルド」:「Eleventy」
  }、
  // ...
}
ログイン後にコピー
  1. eleventy configuration file( .eleventy.js ):入力ディレクトリと出力ディレクトリを指定するために、 .eleventy.jsファイルを作成します。
 module.exports = function(eleventyconfig){
  戻る {
    dir:{
      入力:「SRC」、
      出力:「パブリック」
    }
  }
}
ログイン後にコピー
  1. コンテンツの作成: srcディレクトリを作成し、 index.mdファイル(最初のページ)を追加します。 110はさまざまなテンプレート言語をサポートしています。この例では、マークダウンを使用しています。

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

  3. 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート