3 月のこと、私は別の全く異なるサイド プロジェクト (wp テーマ) に取り組んでいることに気付きました。私は Eddie Jaoude YT Stream を見ていて、そのことを Eddie に知らせましたが、彼の反応が私を再び作業に戻すことになりました。専門用語.dev

かなり多くのサイドプロジェクトをお持ちですね...どれがどれかわかりません。

この発言を聞いて、私は真剣に考えるようになりました。そのため、多くのサイド プロジェクトをすべて中止し、すぐに重要なプロジェクトに集中することにしました。jargons.dev のことがすぐに頭に浮かびました。

この時点で、私はすでに Astro にある程度慣れていました。コンテンツ駆動型 Web アプリのフレームワークであり、非常にシンプルなファイル システムを備え、i18n 対応で、優れた SEO (プロジェクトにとって重要) を備えた SSG を備え、パフォーマンスが高く、アイランドを備えた ReactJS のような他のフロントエンド ライブラリのサポート (特にこれが気に入っています)。それは、jargons.dev を構築するために天国で作られたツールでした。

さて、私はすぐに次の空いている週末に取りかかり、プロジェクトの基本辞書部分に取り組む必要がありました。

基本辞書

このプロジェクト用に新しい Astro プロジェクトを初期化しました。以下のコマンドを実行してプロンプトに従うだけです...

npm create astro@latest

スタイリングのために tailwindcss 統合も追加しました。コンテンツの mdx 統合。これも、それぞれコマンドを実行するだけで非常に簡単に設定できました

npx astro add tailwindnpx astro add mdx

続けて次のタスクを完了しました

この機能を使用すると、jargons.dev/word/[word] ルートで辞書の単語を表示できるようになりました。これは、ファイル tuple.mdx が src/pages/word/ ディレクトリに存在する場合、jargons.dev/word/tuple

にアクセスすると、そのページにアクセスして辞書の単語を表示できることを意味します。

PR

\\\"Building 特技: 基本辞書を実装する #4

\\\"Building
おしゃべり 投稿日:

このプル リクエストは、AstroJS を使用して基本辞書アプリを実装します

変更内容

  • 新しいアストロプロジェクトを開始しました
  • ホームページを作成しました
  • 2つのレイアウトを実装しました
    • Base - すべてのページとレイアウトのメインのプライマリ ラッパー
    • Word - Word ページで使用するレイアウト
  • ホームページと Word レイアウトに静的検索フォーム トリガーを実装しました

スクリーンショット

ホームページ

\\\"Building

単語ページ

\\\"Building

GitHub で表示
","image":"http://www.luping.net/uploads/20240822/172430892466c6ddbc69a12.png","datePublished":"2024-08-22T14:42:04+08:00","dateModified":"2024-08-22T14:42:04+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > Building jargons.dev [# 基本辞書

Building jargons.dev [# 基本辞書

2024 年 8 月 22 日に公開
ブラウズ:630

jargons.dev シリーズの第 2 回へようこそ!

さあ、始めましょう!

最初のコミットに続いて、私は「フォーク スクリプト」の作業を開始しました (これは何だろう?? このシリーズの後半でわかります ?) しかし、告白しなければなりません。コミット履歴でわかるように、 jargons.dev の作業から長い休暇 (3 か月) を取りました。この間に、プロジェクトにとって素晴らしいことだった潜在意識を振り返る機会がいくつかありました。

反省の機会

私は、jargons.dev での作業をしばらく停止しました。意図的にではなく、Hearts で行っていた作業に没頭していたため、jargons.dev のことさえ考えていませんでした。さて、その数か月の間に新年が到来し (もちろん新しい目標を掲げて)、私はいくつかの新しいテクノロジーを経験し、触れるようになりました。私にとって印象に残ったテクノロジーが 1 つありました。それは Astro でした。

Astro 専門用語と共鳴する.dev

1 月、私は「ドキュメントで新しいテクノロジーを学ぶ」という目標を立てました。これは、Astro について素晴らしい話を聞いた後、Astro を使い始めるきっかけとなった挑戦でした。

3 月のこと、私は別の全く異なるサイド プロジェクト (wp テーマ) に取り組んでいることに気付きました。私は Eddie Jaoude YT Stream を見ていて、そのことを Eddie に知らせましたが、彼の反応が私を再び作業に戻すことになりました。専門用語.dev

かなり多くのサイドプロジェクトをお持ちですね...どれがどれかわかりません。

この発言を聞いて、私は真剣に考えるようになりました。そのため、多くのサイド プロジェクトをすべて中止し、すぐに重要なプロジェクトに集中することにしました。jargons.dev のことがすぐに頭に浮かびました。

この時点で、私はすでに Astro にある程度慣れていました。コンテンツ駆動型 Web アプリのフレームワークであり、非常にシンプルなファイル システムを備え、i18n 対応で、優れた SEO (プロジェクトにとって重要) を備えた SSG を備え、パフォーマンスが高く、アイランドを備えた ReactJS のような他のフロントエンド ライブラリのサポート (特にこれが気に入っています)。それは、jargons.dev を構築するために天国で作られたツールでした。

さて、私はすぐに次の空いている週末に取りかかり、プロジェクトの基本辞書部分に取り組む必要がありました。

基本辞書

このプロジェクト用に新しい Astro プロジェクトを初期化しました。以下のコマンドを実行してプロンプトに従うだけです...

npm create astro@latest

スタイリングのために tailwindcss 統合も追加しました。コンテンツの mdx 統合。これも、それぞれコマンドを実行するだけで非常に簡単に設定できました

npx astro add tailwind
npx astro add mdx

続けて次のタスクを完了しました

  • 静的検索フォームを備えた定型ホームページを作成しました
  • 辞書内の各単語を mdx ファイルとして保持するディレクトリとして src/pages/word ディレクトリを設定することが一時的に解決されました。
  • word.astro レイアウトを実装しました。これは、src/pages/word/ ディレクトリ内の単語のすべての .mdx ファイルのコンテンツを、frontmatter を使用してレンダリングできるフレームとして機能します。
  • また、静的なミニ検索フォームを Word レイアウト ナビゲーションバーに追加しました。

この機能を使用すると、jargons.dev/word/[word] ルートで辞書の単語を表示できるようになりました。これは、ファイル tuple.mdx が src/pages/word/ ディレクトリに存在する場合、jargons.dev/word/tuple

にアクセスすると、そのページにアクセスして辞書の単語を表示できることを意味します。

PR

Building jargons.dev [# The Base Dictionary 特技: 基本辞書を実装する #4

Building jargons.dev [# The Base Dictionary
おしゃべり 投稿日:

このプル リクエストは、AstroJS を使用して基本辞書アプリを実装します

変更内容

  • 新しいアストロプロジェクトを開始しました
  • ホームページを作成しました
  • 2つのレイアウトを実装しました
    • Base - すべてのページとレイアウトのメインのプライマリ ラッパー
    • Word - Word ページで使用するレイアウト
  • ホームページと Word レイアウトに静的検索フォーム トリガーを実装しました

スクリーンショット

ホームページ

Building jargons.dev [# The Base Dictionary

単語ページ

Building jargons.dev [# The Base Dictionary

GitHub で表示
リリースステートメント この記事は次の場所に転載されています: https://dev.to/babblebey/building-jargonsdev-1-the-base-dictionary-3ei3?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>
  • バッファ: Node.js
    バッファ: Node.js
    Node.js のバッファーの簡単なガイド Node.js の A Buffer は、生のバイナリ データを処理するために使用されます。これは、ストリーム、ファイル、またはネットワーク データを操作するときに役立ちます。 バッファの作成方法 文字列から: co...
    プログラミング 2024 年 11 月 5 日に公開
  • Node.js でのバージョン管理をマスターする
    Node.js でのバージョン管理をマスターする
    開発者として、私たちは異なる Node.js バージョンを必要とするプロジェクトに頻繁に遭遇します。このシナリオは、Node.js プロジェクトに定期的に関与していない新人開発者と経験豊富な開発者の両方にとって落とし穴です。各プロジェクトに正しい Node.js バージョンが使用されていることを確認...
    プログラミング 2024 年 11 月 5 日に公開
  • トラブルシューティングのために Go バイナリに Git リビジョン情報を埋め込む方法
    トラブルシューティングのために Go バイナリに Git リビジョン情報を埋め込む方法
    Go バイナリでの Git リビジョンの決定コードをデプロイするとき、バイナリをビルド元の Git リビジョンに関連付けると便利です。トラブルシューティングの目的。ただし、リビジョン番号を使用してソース コードを直接更新することは、ソースが変更されるため現実的ではありません。解決策: ビルド フラグ...
    プログラミング 2024 年 11 月 5 日に公開
  • 一般的な HTML タグ: 視点
    一般的な HTML タグ: 視点
    HTML (HyperText Markup Language) は Web 開発の基礎を形成し、インターネット上のすべての Web ページの構造として機能します。 2024 年には、最も一般的な HTML タグとその高度な使用法を理解することで、開発者はより効率的でアクセスしやすく、視覚的に魅力的...
    プログラミング 2024 年 11 月 5 日に公開
  • CSSメディアクエリ
    CSSメディアクエリ
    Web サイトがさまざまなデバイス間でシームレスに機能することを保証することが、これまで以上に重要になっています。ユーザーがデスクトップ、ラップトップ、タブレット、スマートフォンから Web サイトにアクセスするようになったため、レスポンシブ デザインが必須となっています。レスポンシブ デザインの中...
    プログラミング 2024 年 11 月 5 日に公開
  • JavaScript でのホイスティングを理解する: 包括的なガイド
    JavaScript でのホイスティングを理解する: 包括的なガイド
    JavaScript でのホイスティング ホイストは、変数と関数の宣言が、含まれるスコープ (グローバル スコープまたは関数スコープ) の先頭に移動 (または「ホイスト」) される動作です。コードが実行されます。これは、コード内で実際に宣言される前に変数や関数を使用できることを意味...
    プログラミング 2024 年 11 月 5 日に公開
  • Stripe を単一製品の Django Python ショップに統合する
    Stripe を単一製品の Django Python ショップに統合する
    In the first part of this series, we created a Django online shop with htmx. In this second part, we'll handle orders using Stripe. What We'll...
    プログラミング 2024 年 11 月 5 日に公開
  • Laravel でキューに入れられたジョブをテストするためのヒント
    Laravel でキューに入れられたジョブをテストするためのヒント
    Laravel アプリケーションを使用する場合、コマンドが負荷の高いタスクを実行する必要があるシナリオに遭遇するのが一般的です。メインプロセスのブロックを避けるために、キューで処理できるジョブにタスクをオフロードすることを決定することもできます。 例を見てみましょう。コマンド app:import-...
    プログラミング 2024 年 11 月 5 日に公開
  • 人間レベルの自然言語理解 (NLU) システムを作成する方法
    人間レベルの自然言語理解 (NLU) システムを作成する方法
    Scope: Creating an NLU system that fully understands and processes human languages in a wide range of contexts, from conversations to literature. ...
    プログラミング 2024 年 11 月 5 日に公開
  • JSTL を使用して HashMap 内で ArrayList を反復するにはどうすればよいですか?
    JSTL を使用して HashMap 内で ArrayList を反復するにはどうすればよいですか?
    JSTL を使用した HashMap 内の ArrayList の反復Web 開発では、JSTL (JavaServer Pages Standard Tag Library) は、JSP での一般的なタスクを簡素化するためのタグのセットを提供します ( Javaサーバーページ)。そのようなタスクの...
    プログラミング 2024 年 11 月 5 日に公開
  • Encore.ts — ElysiaJS や Hono よりも高速
    Encore.ts — ElysiaJS や Hono よりも高速
    数か月前、私たちは TypeScript 用のオープンソース バックエンド フレームワークである Encore.ts をリリースしました。 すでに多くのフレームワークが存在するため、私たちが行った珍しい設計上の決定のいくつかと、それがどのようにして驚くべきパフォーマンス数値につながるのかを共有したい...
    プログラミング 2024 年 11 月 5 日に公開
  • + を使用した文字列連結が文字列リテラルで失敗するのはなぜですか?
    + を使用した文字列連結が文字列リテラルで失敗するのはなぜですか?
    文字列リテラルと文字列の連結C では、演算子を使用して文字列と文字列リテラルを連結できます。ただし、この機能には混乱を招く可能性のある制限があります。質問の中で、作成者は文字列リテラル「Hello」、「,world」、および「!」を連結しようとしています。 2つの異なる方法で。最初の例:const ...
    プログラミング 2024 年 11 月 5 日に公開
  • React の再レンダリング: 最適なパフォーマンスのためのベスト プラクティス
    React の再レンダリング: 最適なパフォーマンスのためのベスト プラクティス
    React の効率的なレンダリング メカニズムは、その人気の主な理由の 1 つです。ただし、アプリケーションが複雑になるにつれて、コンポーネントの再レンダリングの管理がパフォーマンスを最適化するために重要になります。 React のレンダリング動作を最適化し、不必要な再レンダリングを回避するためのベ...
    プログラミング 2024 年 11 月 5 日に公開
  • 条件付き列の作成を実現する方法: Pandas DataFrame で If-Elif-Else を探索する?
    条件付き列の作成を実現する方法: Pandas DataFrame で If-Elif-Else を探索する?
    条件付き列の作成: Pandas の If-Elif-Else指定された問題では、新しい列を DataFrame に追加することが求められます一連の条件付き基準に基づいて決定されます。課題は、コードの効率性と可読性を維持しながらこれらの条件を実装することにあります。関数アプリケーションを使用したソリ...
    プログラミング 2024 年 11 月 5 日に公開
  • 秋さんのご紹介です!
    秋さんのご紹介です!
    Qiu のリリースを発表できることを嬉しく思います。これは、生の SQL を再び楽しくするために設計された、実用的な SQL クエリ ランナーです。正直に言うと、ORM にはその役割がありますが、単純な SQL を書きたいだけの場合は、少し圧倒されてしまう可能性があります。私は生の SQL クエリ...
    プログラミング 2024 年 11 月 5 日に公開

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3