目次
行われた変更
スクリーンキャスト/スクリーンショット
ホームページ ウェブフロントエンド jsチュートリアル jargons.dev の構築 [# Word Editor スクリプト

jargons.dev の構築 [# Word Editor スクリプト

Dec 13, 2024 am 08:07 AM

Building jargons.dev [# The Word Editor Script

「Word Editor」を覚えていますか?これは、ユーザー インターフェイスを介してユーザーのフォークされたリポジトリに変更を書き込むことを可能にするエンドツーエンドの機能を実装するスクリプトです。

機能的故障

スクリプトによって強化された Word Editor は、いくつかの特定の手順を実行して 2 つの機能を実行する必要があります

  1. 新しい単語を書く - 基本的には新しい単語を辞書に追加します。これは次の手順で行います...
    • すでに作成されている Word テンプレート (.md) ファイルを取得します
    • 収集した単語のタイトルとコンテンツをテンプレートのプレースホルダーに入力して、適切な単語ディレクトリ src/pages/browse に word.mdx ファイルを作成します。
    • ユーザーのフォークされたリポジトリ上に確立された変更ブランチ/参照に変更をコミットします
  2. 既存の単語の編集/更新 - 辞書内の既存の単語を変更します。これは次の手順で行われます...
    • 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

jargons.dev の構築 [# Word Editor スクリプト 特技: `word-editor` スクリプトを実装する #18

jargons.dev の構築 [# Word Editor スクリプト
おしゃべり 投稿日:

このプル リクエストはワードエディタ スクリプトを実装しています。このスクリプトの主な機能は、新しい単語の追加、プロジェクトの 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 に追加された別の定数から辞書ワード ファイルを生成するコンテンツを書き込むのに役立ちます。

スクリーンキャスト/スクリーンショット

これのスクリーンキャストを録画するのは面倒です ?、でも信じてください ? うまくいきます ?‍?

GitHub で表示

以上がjargons.dev の構築 [# Word Editor スクリプトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

Python vs. JavaScript:学習曲線と使いやすさ Python vs. JavaScript:学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

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

JavaScriptとWeb:コア機能とユースケース JavaScriptとWeb:コア機能とユースケース Apr 18, 2025 am 12:19 AM

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

JavaScript in Action:実際の例とプロジェクト JavaScript in Action:実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

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

JavaScriptエンジンの理解:実装の詳細 JavaScriptエンジンの理解:実装の詳細 Apr 17, 2025 am 12:05 AM

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

Python vs. JavaScript:コミュニティ、ライブラリ、リソース Python vs. JavaScript:コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

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

Python vs. JavaScript:開発環境とツール Python vs. JavaScript:開発環境とツール Apr 26, 2025 am 12:09 AM

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

JavaScript通訳者とコンパイラにおけるC/Cの役割 JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

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

Python vs. JavaScript:ユースケースとアプリケーションと比較されます Python vs. JavaScript:ユースケースとアプリケーションと比較されます Apr 21, 2025 am 12:01 AM

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

See all articles