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 縮圖
• is:教學 安全性
• is:套件 ipc
• is:應用程式 graphql

鍵盤導覽​

大家都喜歡鍵盤快捷鍵！新的搜尋功能可以在不讓您的手指離開鍵盤的情況下使用

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

我們也開源了啟用這種鍵盤互動的模組。它設計用於 Algolia InstantSearch，但經過通用化處理，可以與不同的搜尋實作相容。

我們需要您的回饋​

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

提交回饋的最佳方式是在 GitHub 上在適當的儲存庫中提出 issue

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

感謝​

特別感謝 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 網頁伺服器，使我們能夠更靈活地對網站進行國際化，並為更多令人興奮的新功能鋪路。

🌍 翻譯​

我們已開始對網站進行國際化的過程，目標是讓全球開發人員都能輕鬆使用 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 儲存庫上開啟一個 Pull Request。

使用 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 功能，該功能會為每個 Pull Request 自動建立應用程式的執行副本。這讓審閱者可以輕鬆查看 Pull Request 對網站即時副本的實際影響。

🙏 感謝貢獻者​

我們要特別感謝世界各地所有投入自己的時間和精力來協助改進 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 檢查器。Standard 的 README 總結了此選擇背後的原因

採用標準風格意味著將程式碼清晰度和社群慣例的重要性置於個人風格之上。這對於 100% 的專案和開發文化而言可能沒有意義，但開源對於新手而言可能是一個充滿敵意的地方。建立明確、自動化的貢獻者期望會讓專案更健康。

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

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

社群的努力​

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

我們很高興看到人們如何使用這些新的結構化資料。可能的用途包括

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

本週我們將 Electron 的文件放置在 electronjs.org 上。您可以造訪 /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 的文件團隊如何使用 Jekyll 發佈 GitHub 的文件。