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，这是一个包含注册表中 3400 多个专为 Electron 设计的模块的集合。

来自 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 提交 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 开发体验对英语世界以外的开发者更加普及。

因此，我们带来了令人兴奋的国际化更新！

🌐 语言切换​

你知道吗？许多阅读翻译文档的人经常会将翻译文档与原始英文文档进行交叉对照。他们这样做是为了熟悉英文文档，并避免过时或不准确的翻译，这是国际化文档的一个潜在缺点。

为了方便与英文文档进行交叉对照，我们最近发布了一项功能，允许你在英文和当前浏览网站的语言之间无缝切换 Electron 文档的某个部分。只要你在网站上选择了一个非英语区域设置，语言切换器就会出现。

⚡️ 快速访问翻译页面​

在阅读文档时发现拼写错误或翻译不正确？你不再需要登录 Crowdin，选择你的语言区域设置，找到要修复的文件，等等。相反，你只需滚动到该文档的底部，然后单击“翻译本文档”（或你语言中的相应选项）。瞧！你会被直接带到 Crowdin 翻译页面。现在就开始你的翻译吧！

📈 一些统计数据​

自从我们公开了 Electron 文档的国际化工作以来，我们看到了来自世界各地 Electron 社区成员的翻译贡献巨大增长。迄今为止，我们已**翻译了 1,719,029 个字符串，由 1,066 名社区翻译人员，分布在 25 种语言**。

这是一张有趣的图表，显示了以当前（截至撰写时过去 14 天的项目活动量）的翻译速度，将项目翻译成每种语言所需的近似时间。

📃 翻译者调查​

我们要向所有贡献时间帮助改进 Electron 的人致以巨大的 ❤️ 感谢 ❤️！为了充分认可我们翻译社区的辛勤工作，我们创建了一项调查，以收集有关翻译人员的一些信息（即他们 Crowdin 和 Github 用户名的映射）。

如果您是我们了不起的翻译人员之一，请花几分钟时间填写此表：https://goo.gl/forms/b46sjdcHmlpV0GKT2。

🙌 Node.js 的国际化工作​

由于 Electron 国际化计划的成功，Node.js 决定借鉴我们的模式来改进他们的国际化工作！🎉 Node.js 国际化计划现已启动并取得了巨大动力，但你仍然可以在此处阅读有关早期提案及其背后原因的信息。

🔦 贡献指南​

如果你有兴趣加入我们让 Electron 更具国际友好性的工作，我们有一个方便快捷的贡献指南来帮助你入门。祝你国际化愉快！📚

Electron 在 electronjs.org 上有了新网站！我们用 Node.js Web 服务器取代了静态 Jekyll 网站，这让我们能够灵活地进行国际化，并为更多激动人心的新功能铺平了道路。

🌍 翻译​

我们已经开始国际化网站的工作，目标是让 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 网站是使用流行的 Ruby基于的静态网站生成器 Jekyll 构建的。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 都是一个对象，具有 name、description、type 等属性。像 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.js.cn/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) 自动查找 pull request 中的错误。这减少了人工代码审查的负担，并增加了我们对文档准确性的信心。

社区的努力​

Electron 的文档在不断改进，这都要归功于我们出色的开源社区。截至本文撰写之时，已有近 300 人为文档做出了贡献。

我们很高兴看到人们如何利用这些新的结构化数据。可能的用途包括：

• 改进 https://electron.js.cn/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 的文档团队是如何发布 GitHub 文档的。