jargons.dev の構築 [# Word Editor スクリプト
「Word Editor」を覚えていますか?これは、ユーザー インターフェイスを介してユーザーのフォークされたリポジトリに変更を書き込むことを可能にするエンドツーエンドの機能を実装するスクリプトです。
機能的故障
スクリプトによって強化された Word Editor は、いくつかの特定の手順を実行して 2 つの機能を実行する必要があります
- 新しい単語を書く - 基本的には新しい単語を辞書に追加します。これは次の手順で行います...
- すでに作成されている Word テンプレート (.md) ファイルを取得します
- 収集した単語のタイトルとコンテンツをテンプレートのプレースホルダーに入力して、適切な単語ディレクトリ src/pages/browse に word.mdx ファイルを作成します。
- ユーザーのフォークされたリポジトリ上に確立された変更ブランチ/参照に変更をコミットします
- 既存の単語の編集/更新 - 辞書内の既存の単語を変更します。これは次の手順で行われます...
- jargons.dev のユーザーのフォークから既存の単語を取得します (単語ディレクトリ src/pages/browse を調べます)
- コンテンツを解析し、必要な編集を行います
- そして、ユーザーのフォークされたリポジトリ上に確立された変更ブランチ/参照に変更をコミットします
この内訳は、次のヘルパー関数とユーティリティ関数の作成に影響を与えました。
- writeNewWord - ユーザーの GitHub 認証済みインスタンスを利用して、特に単語のタイトルとコンテンツを受け入れる関数で、書き込み操作を実行します。つまり、新しいファイル (word.mdx) をユーザーのアカウントでユーザーに代わって jargons.dev のフォークに書き込みます。 「PUT /repos/{owner}/{repo}/contents/{path}」エンドポイント経由。
-
getExistingWord - 編集に利用することを目的として、ユーザーのフォークされたリポジトリ上の既存の Word ファイルのコンテンツを単に取得する関数です。これは、単語を引数として受け取り、それをエンドポイント「GET /repos/{owner}」に対して行うリクエストのパス パラメーター (例 src/pages/browse/${normalizeAsUrl(word)}.mdx) に連結することによって行われます。 /{リポ}/コンテンツ/{パス}";消費上の理由から、このヘルパーから返されたデータにいくつかの調整を加える必要があることを述べておくことが重要です。調整は次のとおりです
- 追加された title プロパティ: エンドポイント「GET /repos/{owner}/{repo}/contents/{path}」へのクエリから取得される response.data オブジェクトには title プロパティがありません (これは単語自体);
-
content_decoded プロパティを追加しました。response.data.content プロパティは、取得した単語のメイン コンテンツを保持しますが、「base64」形式で提供されます。そこで、使用時に変換することなくすぐに使用できる、すぐに使用できる形式で機能が利用できればいいのにと思いました。これらは以下のコードで実行しました...
const { content, ...responseData } = response.data; return { title: word, content, content_decoded: Buffer.from(content, "base64").toString("utf-8"), ...responseData };
ログイン後にコピー
updateExistingWord - editExistingWord の初期名で、jargonsdev/jargons.dev#34 で現在の名前に変更されたこの関数は、writeNewWord と同様の操作を実行しますが、置換することで特定のファイル内の既存の Word コンテンツを上書きします。ファイルと更新された内容を持つ別のファイル。これは、ユーザーに代わって、「PUT /repos/{owner}/{repo}/contents/{path}」エンドポイントを通じてユーザーのアカウントを介して実行されます。
writeFileContent - このヘルパーは、名前に示されているように、1 つのことを行います。writeNewWord と updateExistingWord の両方によって GitHub API に行われたリクエストで送信された単語のファイル コンテンツを書き込みます。単語のタイトルを取得し、コンテンツ (単語の定義など) を変数として使用し、テンプレートからコンテンツを生成して、その中のプレースホルダーのコンテンツを置き換えます。
PR
特技: `word-editor` スクリプトを実装する
#18
このプル リクエストはワードエディタ スクリプトを実装しています。このスクリプトの主な機能は、新しい単語の追加、プロジェクトの src/pages/browse ディレクトリにある個々の .mdx ファイルである既存の単語の取得と更新を可能にすることです。このスクリプトは、この操作を実行するために必要なすべてのヘルパー関数を利用します。
行われた変更
- writeNewWord 関数を実装しました。この関数は 3 つのパラメータ、つまり userOctokit、forkedRepoDetails、および word を受け取ります。 userOctokit インスタンスを利用して書き込み操作を実行します。つまり、「PUT /repos/{owner}/{repo}/」を通じて、ユーザーに代わってユーザーのアカウント上のプロジェクトのフォークに新しいファイル (newWord.mdx) を書き込みます。 content/{path}" エンドポイント
- getExistingWord 関数を実装しました - この関数は、「GET /repos/{owner}/{repo}/contents/{path}」エンドポイントを呼び出すことで、ユーザーのアカウントのプロジェクトのフォークにある既存の単語のデータを取得するのに役立ちます。これは、私たちが最も関心のある次のプロパティを持つオブジェクトを返します...
- title - 既存の単語のタイトル - これは実際には、エンドポイントへの呼び出しからの response.data に追加されるカスタム データです
- path - 既存の Word ファイルへのパス
- sha - 既存の単語の一意の SHA
- editExistingWord 関数を実装しました - この関数は 3 つのパラメータ、つまり userOctokit、forkedRepoDetails、および word (プロパティ: path、sha、title、content を保持します) を受け取ります。 userOctokit インスタンスを利用して編集操作を実行します。つまり、同じ「PUT /repos/{owner}/{repo}/contents/{path}」を通じて、ユーザーに代わってユーザーのアカウント上のプロジェクトのフォークにある既存のファイルを更新します。 " エンドポイント
- writeFileContent ヘルパー関数を実装しました - この関数は、src/lib/template/word.md.js に追加された別の定数から辞書ワード ファイルを生成するコンテンツを書き込むのに役立ちます。
スクリーンキャスト/スクリーンショット
これのスクリーンキャストを録画するのは面倒です ?、でも信じてください ? うまくいきます ??
以上がjargons.dev の構築 [# Word Editor スクリプトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
