搜尋
首頁web前端js教程建置 jargons.dev [# Word 編輯器腳本

Building jargons.dev [# The Word Editor Script

還記得「文字編輯器」嗎! ?這是負責實現其端到端功能的腳本,該功能允許透過使用者介面將變更寫入使用者的分叉儲存庫。

功能分解

由腳本授權的 Word 編輯器應執行兩 (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)來實現此目的/{repo}/contents/{path}";需要說明的是,出於消費原因,我不得不對此助手傳回的資料進行一些調整,調整如下

    • 新增了 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 類似的操作,但它透過替換來覆蓋特定檔案中的現有單字內容該文件與另一個包含更新內容的文件。這也可以透過「PUT /repos/{owner}/{repo}/contents/{path}」端點透過使用者帳戶代表他們完成。

  • writeFileContent - 這個助手正如其名稱所暗示的那樣,做了一件事- 它為writeNewWord 和updateExistingWord 向GitHub API 發出的請求中提交的單詞寫入文件內容,它通過獲取單詞標題和內容(即單字定義)會作為變數並從範本產生內容,可用於取代其中的佔位符內容。

公關

建置 jargons.dev [# Word 編輯器腳本 壯舉:實現“word-editor”腳本 #18

建置 jargons.dev [# Word 編輯器腳本
巴布爾貝 發佈於

此Pull 請求實作了文字編輯器腳本;該腳本的主要功能是允許新增單字、檢索和更新現有單字,這些單字是駐留在專案的src/pages/browse 目錄中的單獨.mdx文件。該腳本為我們提供了執行此操作所需的所有輔助函數。

做出的改變

  • 實作了writeNewWord 函數- 這個函數需要3 個參數,分別是userOctokit、forkedRepoDetails 和單字;它利用userOctokit 實例執行寫入操作,即透過「PUT /repos/{owner}/{repo}/」將新檔案(newWord.mdx) 代表使用者寫入使用者帳戶上的項目分支中內容/{路徑}”端點
  • 實作了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 編輯器腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:開發人員的比較分析Python vs. JavaScript:開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

Python vs. JavaScript:選擇合適的工具Python vs. JavaScript:選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript:了解每個的優勢Python和JavaScript:了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

JavaScript的核心:它是在C還是C上構建的?JavaScript的核心:它是在C還是C上構建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

JavaScript框架:為現代網絡開發提供動力JavaScript框架:為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮:1.項目規模和復雜度,2.團隊經驗,3.生態系統和社區支持。

JavaScript,C和瀏覽器之間的關係JavaScript,C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪,JavaScript、C 和瀏覽器之間到底有什麼關係?它們之間看似毫無關聯,但實際上,它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章,你將了解到JavaScript如何在瀏覽器中運行,C 在瀏覽器引擎中的作用,以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道,JavaScript是前端開發的核心語言,它直接在瀏覽器中運行,讓網頁變得生動有趣。你是否曾經想過,為什麼JavaScr

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。