5 篇標記為「網站」的文章

Electron 網站有一個新的搜尋引擎，可為 API 文件、教學課程、Electron 相關的 npm 套件等提供即時結果。

學習像 Electron 這樣的新技術或框架可能會讓人感到卻步。一旦您通過 快速入門 階段，學習最佳實務、找到正確的 API 或發現可協助您建置夢想應用程式的工具可能會很困難。我們希望 Electron 網站能成為更好的工具，讓您能更快速且輕鬆地找到建置應用程式所需的資源。

造訪 electronjs.org 上的任何頁面，您都會在頁面頂端找到新的搜尋輸入框。

搜尋引擎​

當我們最初著手為網站新增搜尋功能時，我們使用 GraphQL 作為後端，推出了我們自己的搜尋引擎。GraphQL 很有趣，搜尋引擎效能也很好，但我們很快意識到，建置搜尋引擎並非易事。諸如多字詞搜尋和錯字偵測之類的事情需要大量工作才能做好。我們決定使用現有的搜尋解決方案：Algolia，而不是重新發明輪子。

Algolia 是一種託管搜尋服務，已迅速成為 React、Vue、Bootstrap、Yarn 和 許多其他 熱門開源專案的首選搜尋引擎。

以下是一些使 Algolia 非常適合 Electron 專案的功能

• InstantSearch.js 會在您輸入時提供結果，通常約在 1 毫秒內。
• 錯字容忍度 表示即使您輸入 widnow，您仍然會得到結果。
• 進階查詢語法 啟用 "完全相符的引號" 和 -排除。
• API 用戶端 是開源且文件完善的。
• 分析 會告訴我們人們最常搜尋的內容，以及他們搜尋但找不到的內容。這將為我們提供寶貴的見解，了解如何改進 Electron 的文件。
• Algolia 對於 開源專案是免費的。

API 文件​

有時您知道您想完成什麼，但您不完全知道如何完成。Electron 擁有超過 750 種 API 方法、事件和屬性。沒有人可以輕易記住所有這些，但電腦擅長處理這些東西。使用 Electron 的 JSON API 文件，我們在 Algolia 中索引了所有這些資料，現在您可以輕鬆找到您正在尋找的確切 API。

想要調整視窗大小？搜尋 resize 並直接跳到您需要的方法。

教學課程​

Electron 擁有不斷成長的教學課程集合，以補充其 API 文件。現在您可以更輕鬆地找到關於特定主題的教學課程，以及相關的 API 文件。

正在尋找安全性最佳實務？搜尋 security。

npm 套件​

npm 註冊表現在有超過 700,000 個套件，而且找到您需要的套件並不總是那麼容易。為了讓探索這些模組更容易，我們建立了 electron-npm-packages，這是專為與 Electron 搭配使用而建置的註冊表中 3400 多個模組的集合。

Libraries.io 的人員建立了 SourceRank，這是一個根據程式碼、社群、文件和使用情況等指標組合來評分軟體專案的系統。我們建立了一個 sourceranks 模組，其中包含 npm 註冊表中每個模組的分數，我們使用這些分數來排序套件結果。

想要 Electron 內建 IPC 模組的替代方案？搜尋 is:package ipc。

Electron 應用程式​

使用 Algolia 索引資料很容易，因此我們從 electron/apps 新增了現有的應用程式清單。

嘗試搜尋 music 或 homebrew。

篩選結果​

如果您以前使用過 GitHub 的 程式碼搜尋，您可能知道其以冒號分隔的鍵值篩選器，例如 extension:js 或 user:defunkt。我們認為這種篩選技術非常強大，因此我們在 Electron 的搜尋中新增了 is: 關鍵字，可讓您篩選結果以僅顯示單一類型

• is:api thumbnail
• is:tutorial security
• is:package ipc
• is:app graphql

鍵盤導航​

人們喜歡鍵盤快捷鍵！新的搜尋功能可以在不將手指從鍵盤上移開的情況下使用

• / 將焦點放在搜尋輸入框上
• esc 將焦點放在搜尋輸入框上並清除它
• down 移動到下一個結果
• up 移動到上一個結果，或搜尋輸入框
• enter 開啟結果

我們也開源了 模組，該模組啟用此鍵盤互動。它專為與 Algolia InstantSearch 搭配使用而設計，但已通用化以實現與不同搜尋實作的相容性。

我們想要您的意見回饋​

如果您在使用新的搜尋工具時遇到任何問題，我們希望聽到您的意見！

提交意見回饋的最佳方式是在 GitHub 中於適當的儲存庫中提交問題

• electron/electronjs.org 是 Electron 網站。如果您不知道在哪裡提交問題，這是您的最佳選擇。
• electron/algolia-indices 是所有可搜尋的 Electron 資料的編譯位置。
• electron/search-with-your-keyboard 使搜尋介面可透過鍵盤導航。
• algolia/instantsearch.js 是瀏覽器端用戶端，可啟用隨打即找搜尋。
• algolia/algoliasearch-client-javascript 是 Node.js 用戶端，用於將資料上傳到 Algolia 的伺服器。

感謝​

特別感謝 Emily Jordan 和 Vanessa Yuen 建置這些新的搜尋功能，感謝 Libraries.io 提供 SourceRank 分數，並感謝 Algolia 團隊協助我們入門。🍹

自從新的國際化 Electron 網站 推出 以來，我們一直努力使英語世界以外的開發人員更容易體驗 Electron 開發。

所以我們在這裡提供一些令人興奮的 i18n 更新！

🌐 語言切換​

您是否知道許多閱讀翻譯文件的人經常將其與原始英文文件交叉參考？他們這樣做是為了熟悉英文文件，並避免過時或不準確的翻譯，這是國際化文件的注意事項之一。

為了讓交叉參考英文文件更容易，我們最近推出了一項功能，可讓您在英文和您在網站上檢視的任何語言之間無縫切換 Electron 文件的章節。只要您在網站上選擇了非英文地區設定，語言切換就會顯示出來。

⚡️ 快速存取翻譯頁面​

在閱讀文件時發現錯字或不正確的翻譯？您不再需要登入 Crowdin、選擇您的地區設定、找到您想要修正的檔案等等。相反地，您只需向下捲動到所述文件的底部，然後按一下「翻譯此文件」（或您語言中的對應文字）。瞧！您會直接進入 Crowdin 翻譯頁面。現在套用您的翻譯魔法吧！

📈 一些統計數據​

自從我們公開 Electron 文件 i18n 工作以來，我們看到了來自世界各地 Electron 社群成員的翻譯貢獻大幅成長。迄今為止，我們已翻譯了 1,719,029 個字串，來自 1,066 位社群翻譯人員，並使用 25 種語言。

這是一個有趣的圖表，顯示了如果保持現有速度（基於撰寫本文時過去 14 天的專案活動），將專案翻譯成每種語言所需的大約時間。

📃 翻譯人員調查​

我們想向所有為協助改進 Electron 貢獻時間的每個人致上 ❤️ 衷心感謝 ❤️！為了適當地感謝我們翻譯人員社群的辛勤工作，我們建立了一份調查，以收集有關我們翻譯人員的一些資訊（即其 Crowdin 和 Github 使用者名稱之間的對應）。

如果您是我們出色的翻譯人員之一，請花幾分鐘填寫此表單：https://goo.gl/forms/b46sjdcHmlpV0GKT2。

🙌 Node 的國際化工作​

由於 Electron i18n 計畫的成功，Node.js 決定模仿我們使用的模式來 改進其 i18n 工作！🎉 Node.js i18n 計畫 現在已經啟動並獲得了巨大的動力，但您仍然可以閱讀關於早期提案及其背後原因的 文章。

🔦 貢獻指南​

如果您有興趣加入我們使 Electron 更國際化的工作，我們有一份方便的 貢獻指南 可協助您入門。祝您國際化愉快！📚

Electron 在 electronjs.org 上有一個新網站！我們已將靜態 Jekyll 網站替換為 Node.js Web 伺服器，使我們能夠靈活地將網站國際化，並為更多令人興奮的新功能鋪路。

🌍 翻譯​

我們已開始將網站國際化的過程，目標是讓全球開發人員都能輕鬆進行 Electron 應用程式開發。我們正在使用一個名為 Crowdin 的本地化平台，該平台與 GitHub 整合，並在內容翻譯成不同語言時自動開啟和更新提取請求。

儘管到目前為止我們一直悄悄地進行這項工作，但已有超過 75 位 Electron 社群成員有機地發現了該專案，並加入了將網站國際化並將 Electron 文件翻譯成 20 多種語言的工作。我們每天都看到來自世界各地人們的 貢獻，其中法語、越南語、印尼語和中文等語言的翻譯處於領先地位。

若要選擇您的語言並檢視翻譯進度，請造訪 electronjs.org/languages

如果您會說多種語言，並且有興趣協助翻譯 Electron 的文件和網站，請造訪 electron/electron-i18n 儲存庫，或直接在 Crowdin 上開始翻譯，您可以使用您的 GitHub 帳戶登入。

目前 Crowdin 上已為 Electron 專案啟用了 21 種語言。新增對更多語言的支援很容易，因此如果您有興趣協助翻譯，但沒有看到您列出的語言，請 告訴我們，我們將啟用它。

原始翻譯文件​

如果您偏好閱讀原始 Markdown 檔案中的文件，您現在可以使用任何語言來執行此操作

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

應用程式頁面​

從今天開始，任何 Electron 應用程式都可以輕鬆地在 Electron 網站上擁有自己的頁面。如需一些範例，請查看 Etcher、1Clipboard 或 GraphQL Playground，如下圖所示，位於日文版網站上

市面上有許多令人難以置信的 Electron 應用程式，但它們並不總是容易找到，而且並非每位開發人員都有時間或資源來建置適當的網站來行銷和發布其應用程式。

僅使用 PNG 圖示檔案和少量應用程式中繼資料，我們就能收集有關指定應用程式的大量資訊。使用從 GitHub 收集的資料，應用程式頁面現在可以顯示螢幕擷取畫面、下載連結、版本、發行說明和每個具有公用儲存庫的應用程式的 README。使用從每個應用程式圖示擷取的調色盤，我們可以產生 醒目且易於存取的色彩，為每個應用程式頁面提供一些視覺區別。

應用程式索引頁面 現在也具有類別和關鍵字篩選器，可找到有趣的應用程式，例如 GraphQL GUI 和 p2p 工具。

如果您有想要在網站上展示的 Electron 應用程式，請在 electron/electron-apps 儲存庫上開啟提取請求。

使用 Homebrew 一行安裝​

macOS 的 Homebrew 套件管理器有一個名為 cask 的子命令，可讓您輕鬆地使用終端機中的單一命令安裝桌面應用程式，例如 brew cask install atom。

我們已開始收集熱門 Electron 應用程式的 Homebrew cask 名稱，現在在每個具有 cask 的應用程式頁面上顯示安裝命令（適用於 macOS 訪客）

若要檢視所有具有 homebrew cask 名稱的應用程式，請造訪 electronjs.org/apps?q=homebrew。如果您知道我們尚未索引的其他具有 cask 的應用程式，請新增它們！

🌐 新網域​

我們已將網站從 electron.atom.io 移至新網域：electronjs.org。

Electron 專案誕生於 Atom 內部，Atom 是 GitHub 基於 Web 技術建置的開源文字編輯器。Electron 最初稱為 atom-shell。Atom 是第一個使用它的應用程式，但人們很快意識到，這個神奇的 Chromium + Node 運行時可以用於各種不同的應用程式。當 Microsoft 和 Slack 等公司開始使用 atom-shell 時，很明顯該專案需要一個新名稱。

因此「Electron」誕生了。2016 年初，GitHub 組建了一個新團隊，專注於 Electron 開發和維護，與 Atom 分開。從那時起，Electron 已被數千名應用程式開發人員採用，現在受到許多大公司的依賴，其中許多公司擁有自己的 Electron 團隊。

支援 GitHub 的 Electron 專案（如 Atom 和 GitHub Desktop）仍然是我們團隊的優先事項，但透過移至新網域，我們希望有助於釐清 Atom 和 Electron 之間的技術區別。

🐢🚀 Node.js 無所不在​

先前的 Electron 網站是使用 Jekyll 建置的，Jekyll 是熱門的 Ruby 型靜態網站產生器。Jekyll 是建置靜態網站的絕佳工具，但該網站已開始超出其能力範圍。我們想要更動態的功能，例如適當的重新導向和動態內容呈現，因此 Node.js 伺服器是顯而易見的選擇。

Electron 生態系統包含使用許多不同程式設計語言編寫的元件專案，從 Python 到 C++ 到 Bash。但 JavaScript 是 Electron 的基礎，也是我們社群中最常用的語言。

透過將網站從 Ruby 遷移到 Node.js，我們的目標是降低希望為網站做出貢獻的人員的進入門檻。

⚡️ 更輕鬆的開源參與​

如果您的系統上安裝了 Node.js（8 或更高版本）和 git，您可以輕鬆地在本機執行該網站

git clone https://github.com/electron/electronjs.org
cd electronjs.org
npm install
npm run dev

新網站託管在 Heroku 上。我們使用部署管線和 Review Apps 功能，該功能會自動為每個提取請求建立應用程式的執行副本。這讓審閱者可以輕鬆地在網站的即時副本上檢視提取請求的實際效果。

🙏 感謝貢獻者​

我們要特別感謝世界各地所有貢獻自己的時間和精力來協助改進 Electron 的人員。開源社群的熱情對 Electron 的成功做出了不可估量的貢獻。謝謝您！

今天我們宣布對 Electron 的文件進行一些改進。每個新版本現在都包含一個 JSON 檔案，其中詳細描述了 Electron 的所有公用 API。我們建立此檔案是為了讓開發人員能夠以有趣的新方式使用 Electron 的 API 文件。

結構描述概述​

每個 API 都是一個物件，具有名稱、描述、類型等屬性。諸如 BrowserWindow 和 Menu 之類的類別具有其他屬性，用於描述其實例方法、實例屬性、實例事件等。

以下是結構描述的摘錄，描述了 BrowserWindow 類別

{
  name: 'BrowserWindow',
  description: 'Create and control browser windows.',
  process: {
    main: true,
    renderer: false
  },
  type: 'Class',
  instanceName: 'win',
  slug: 'browser-window',
  websiteUrl: 'https://electron.dev.org.tw/docs/api/browser-window',
  repoUrl: 'https://github.com/electron/electron/blob/v1.4.0/docs/api/browser-window.md',
  staticMethods: [...],
  instanceMethods: [...],
  instanceProperties: [...],
  instanceEvents: [...]
}

以下是方法描述範例，在本例中為 apis.BrowserWindow.instanceMethods.setMaximumSize 實例方法

{
  name: 'setMaximumSize',
  signature: '(width, height)',
  description: 'Sets the maximum size of window to width and height.',
  parameters: [{
    name: 'width',
    type: 'Integer'
  }, {
    name: 'height',
    type: 'Integer'
  }]
}

使用新資料​

為了讓開發人員可以輕鬆地在其專案中使用此結構化資料，我們建立了 electron-docs-api，這是一個小型 npm 套件，每當有新的 Electron 版本發布時，都會自動發布。

npm install electron-api-docs --save

為了立即獲得滿足感，請在您的 Node.js REPL 中試用該模組

npm i -g trymodule && trymodule electron-api-docs=apis

資料的收集方式​

Electron 的 API 文件遵循 Electron 編碼樣式 和 Electron 樣式指南，因此可以以程式設計方式剖析其內容。

electron-docs-linter 是 electron/electron 儲存庫的新開發相依性。它是一個命令列工具，可檢查所有 Markdown 檔案並強制執行樣式指南的規則。如果發現錯誤，則會列出錯誤並停止發布程序。如果 API 文件有效，則會建立 electron-json.api 檔案，並作為 Electron 版本的一部分 上傳到 GitHub。

標準 Javascript 和標準 Markdown​

今年稍早，Electron 的程式碼庫已更新為對所有 JavaScript 使用 standard linter。Standard 的 README 總結了此選擇背後的原因

採用標準樣式表示將程式碼清晰度和社群慣例的重要性排在個人樣式之上。這對於 100% 的專案和開發文化可能沒有意義，但開源對於新手來說可能是一個充滿敵意的地方。設定明確、自動化的貢獻者期望使專案更健康。

我們最近也建立了 standard-markdown，以驗證我們文件中所有 JavaScript 程式碼片段是否有效且與程式碼庫本身的樣式一致。

這些工具共同協助我們使用持續整合 (CI) 來自動尋找提取請求中的錯誤。這減輕了人工進行程式碼審查的負擔，並讓我們對文件的準確性更有信心。

社群努力的成果​

Electron 的文件不斷改進，我們必須感謝我們出色的開源社群。在撰寫本文時，已有近 300 人為文件做出了貢獻。

我們很高興看到人們使用此新結構化資料做什麼。可能的用途包括

• 改進 https://electron.dev.org.tw/docs/
• 用於在使用 TypeScript 的專案中更簡化 Electron 開發的 TypeScript 定義檔案。
• 適用於 Dash.app 和 devdocs.io 等工具的可搜尋離線文件

本週，我們在 electronjs.org 上為 Electron 的文件提供了一個家。您可以造訪 /docs/latest 以取得最新的文件集。我們也會保留舊文件的版本，因此您可以造訪 /docs/vX.XX.X 以取得與您使用的版本相關的文件。

您可以造訪 /docs 以查看哪些版本可用，或造訪 /docs/all 以在一個頁面上查看最新版本的文件（非常適合 cmd + f 搜尋）。

如果您想為文件內容做出貢獻，您可以在 Electron 儲存庫 中執行此操作，文件是從該儲存庫提取的。我們會為每個次要版本提取它們，並將它們新增到 Electron 網站儲存庫，該儲存庫是使用 Jekyll 製作的。

如果您有興趣了解更多關於我們如何將文件從一個儲存庫提取到另一個儲存庫的資訊，請繼續閱讀以下內容。否則，請享受 文件！

技術細節​

我們將文件保留在 Electron 核心儲存庫中。這表示 electron/electron 將始終擁有最新版本的文件。當發布新版本的 Electron 時，我們會將它們複製到 Electron 網站儲存庫 electron/electronjs.org。

script/docs​

為了獲取文件，我們執行一個腳本，其命令列介面為 script/docs vX.XX.X，可以帶或不帶 --latest 選項（取決於您匯入的版本是否為最新版本）。我們用於獲取文件的腳本使用了幾個有趣的 Node 模組

• nugget 用於取得發布版本的 tarball 並將其儲存到暫存目錄。
• gunzip-maybe 用於解壓縮 tarball。
• tar-fs 用於從 tarball 中串流處理 /docs 目錄，以及過濾和處理檔案（在 through2 的幫助下），使其能與我們的 Jekyll 網站良好地協同運作（更多資訊請見下文）。

測試幫助我們了解所有組件是否如預期般到位。

Jekyll​

Electron 網站是一個 Jekyll 網站，我們利用Collections 功能來處理文件，其結構如下

electron.atom.io
└── _docs
    ├── latest
    ├── v0.27.0
    ├── v0.26.0
    ├── so on
    └── so forth

Front matter​

為了讓 Jekyll 渲染每個頁面，它至少需要空的 front matter。我們將在所有頁面上使用 front matter，因此當我們串流輸出 /docs 目錄時，我們會檢查檔案是否為 README.md 檔案（在這種情況下，它會收到一個 front matter 設定），或者它是否為任何其他具有 markdown 副檔名的檔案（在這種情況下，它會收到稍微不同的 front matter）。

每個頁面都會收到這組 front matter 變數

---
version: v0.27.0
category: Tutorial
title: 'Quick Start'
source_url: 'https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md'
---

README.md 取得額外的 permalink，使其 URL 具有常見的根目錄 index.html，而不是尷尬的 /readme/。

permalink: /docs/v0.27.0/index.html

設定與重新導向​

在網站的 _config.yml 檔案中，每次在獲取文件時使用 --latest 標記，都會設定變數 latest_version。我們還會新增已新增到網站的所有版本列表，以及我們希望整個文件集合使用的永久連結。

latest_version: v0.27.0
available_versions:
  - v0.27.0
collections:
  docs: { output: true, permalink: '/docs/:path/' }

我們網站根目錄中的 latest.md 檔案是空的，除了這個 front matter，它允許使用者透過造訪此 URL electron.atom.io/docs/latest 來查看最新版本文件的索引（又名 README），而不是明確地使用最新版本號（儘管您也可以這樣做）。

---
permalink: /docs/latest/
redirect_to: /docs/{{ site.data.releases[0].version }}
---

版面配置​

在 docs.html 版面配置範本中，我們使用條件語句來顯示或隱藏標頭和麵包屑導航中的資訊。

{% raw %} {% if page.category != 'ignore' %}
<h6 class="docs-breadcrumb">
  {{ page.version }} / {{ page.category }} {% if page.title != 'README' %} / {{
  page.title }} {% endif %}
</h6>
{% endif %} {% endraw %}

為了建立一個顯示可用版本的頁面，我們只需在網站根目錄的檔案 versions.md 中循環遍歷配置中的列表。此外，我們還為此頁面提供了一個永久連結：/docs/

{% raw %} {% for version in site.available_versions %} - [{{ version
}}](/docs/{{ version }}) {% endfor %} {% endraw %}

希望您喜歡這些技術細節！如果您對使用 Jekyll 建立文件網站的更多資訊感興趣，請查看 GitHub 的文件團隊如何發布 GitHub 在 Jekyll 上的文件。