跳到主要内容

标签为“网站”的 5 篇文章

electronjs.org 网站和文档更新

查看所有标签

搜索

·阅读时长 5 分钟
echjordan
echjordan
vanessayuenn
vanessayuenn
zeke
zeke

Electron 网站有了新的搜索引擎，可以为 API 文档、教程、Electron 相关的 npm 包等提供即时结果。

Electron Search Screenshot

学习像 Electron 这样的新技术或框架可能会让人望而生畏。一旦你过了快速入门阶段，就很难学习最佳实践、找到正确的 API 或发现有助于你构建梦想中的应用的工具。我们希望 Electron 网站成为一个更好的工具，帮助你更快、更轻松地找到构建应用所需的资源。

访问 electronjs.org 上的任何页面，你都会在页面顶部找到新的搜索框。

搜索引擎​

当我们最初着手为网站添加搜索功能时，我们使用 GraphQL 作为后端构建了自己的搜索引擎。 GraphQL 用起来很有趣，搜索性能也不错，但我们很快意识到构建搜索引擎并非易事。像多词搜索和拼写错误检测之类的功能需要大量工作才能做好。我们决定不重复造轮子，而是使用现有的搜索解决方案：Algolia。

Algolia 是一项托管搜索服务，它已迅速成为许多流行开源项目（如 React、Vue、Bootstrap、Yarn 和许多其他项目）首选的搜索引擎。

以下是一些使 Algolia 非常适合 Electron 项目的功能：

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: 关键字，允许你过滤结果以仅显示单一类型。

键盘导航​

人们喜欢键盘快捷键！新的搜索功能可以在不离开键盘的情况下使用。

  • / 使搜索框获得焦点
  • esc 使搜索框获得焦点并清除内容
  • 向下箭头 移动到下一个结果
  • 向上箭头 移动到上一个结果或搜索框
  • enter 打开结果

我们还开源了实现此键盘交互的模块。它设计用于 Algolia InstantSearch，但也进行了通用化，以兼容不同的搜索实现。

我们期待您的反馈​

如果你在使用新的搜索工具时遇到任何问题，我们希望听到你的反馈！

提交反馈的最佳方式是在 GitHub 上相应的仓库中提交 issue。

致谢​

特别感谢 Emily Jordan 和 Vanessa Yuen 构建了这些新的搜索功能，感谢 Libraries.io 提供了 SourceRank 分数，以及 Algolia 团队帮助我们入门。🍹

国际化更新

·阅读时长 3 分钟
vanessayuenn
vanessayuenn

自新的国际化 Electron 网站上线以来，我们一直努力工作，让英语世界之外的开发者更容易获得 Electron 开发体验。

因此，我们带来了一些令人兴奋的 i18n 更新！

🌐 语言切换​

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

Language toggle on Electron documentation

为了更方便地对照英文文档，我们最近推出了一项功能，允许你在 Electron 文档的某个部分之间无缝切换英文和你正在查看网站的语言。只要你在网站上选择了非英语语言环境，就会显示语言切换按钮。

⚡️ 快速访问翻译页面​

New Electron documentation footer in Japanese

阅读文档时发现拼写错误或不正确的翻译？你不再需要登录 Crowdin，选择你的语言环境，找到要修复的文件等等。相反，你只需向下滚动到文档底部，然后点击“翻译此文档”（或你语言中的对应按钮）。瞧！你会被直接带到 Crowdin 翻译页面。现在施展你的翻译魔法吧！

📈 一些统计数据​

自从我们公布了 Electron 文档国际化工作以来，我们看到了来自世界各地 Electron 社区成员的翻译贡献出现了巨大增长。截至目前，我们已经拥有1,719,029 个字符串翻译，由 1,066 位社区译者完成，涉及 25 种语言。

Translation Forecast provided by Crowdin

下面是一个有趣的图表，显示了如果保持现有节奏（基于撰写本文时过去 14 天的项目活动），将项目翻译成每种语言所需的大致时间。

📃 译者调查​

我们要向所有贡献时间帮助改进 Electron 的人致以巨大的 ❤️ 感谢 ❤️！为了恰当地表彰我们的译者社区的辛勤工作，我们创建了一项调查，以收集有关我们译者的一些信息（即他们在 Crowdin 和 Github 用户名之间的对应关系）。

如果您是我们出色的译者之一，请花几分钟填写此表单：https://goo.gl/forms/b46sjdcHmlpV0GKT2。

🙌 Node 的国际化努力​

由于 Electron 国际化倡议的成功，Node.js 也决定效仿我们使用的模式来启动他们重振旗鼓的国际化工作！🎉 Node.js 国际化倡议现已启动并取得了巨大进展，但你仍然可以在此处阅读早期的提案及其背后的原因。

🔦 贡献指南​

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

Electron 的新国际化网站

·阅读时长 6 分钟
zeke
zeke

Electron 有了一个新网站：electronjs.org！我们将静态的 Jekyll 网站替换为了 Node.js Web 服务器，这使我们能够灵活地对网站进行国际化，并为更多令人兴奋的新功能铺平了道路。

🌍 翻译​

我们已经开始了网站国际化进程，目标是让全球开发者都能接触到 Electron 应用开发。我们正在使用一个名为 Crowdin 的本地化平台，该平台与 GitHub 集成，随着内容被翻译成不同语言，会自动开启和更新拉取请求。

Electron Nav in Simplified Chinese

尽管到目前为止我们一直在悄悄进行这项工作，但已有超过 75 位 Electron 社区成员自然而然地发现了这个项目，并加入了网站国际化和将 Electron 文档翻译成 20 多种语言的工作。我们看到世界各地的人们每日贡献，其中法语、越南语、印尼语和中文等语言的翻译遥遥领先。

要选择你的语言并查看翻译进度，请访问 electronjs.org/languages

Translations in progress on Crowdin

如果你是多语言用户，并且有兴趣帮助翻译 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，这里展示的是网站的日文版本截图。

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 访问者）。

Installation options tailored for your platform: macOS, Windows, Linux

要查看所有拥有 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 的成功做出了巨大贡献。谢谢你们！

Thumbs up!

作为结构化数据的 Electron API 文档

·阅读时长 3 分钟
zeke
zeke

今天，我们宣布对 Electron 的文档进行一些改进。每个新版本现在都包含一个详细描述所有 Electron 公共 API 的 JSON 文件。我们创建此文件是为了使开发者能够以有趣的新方式使用 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.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。

Standard Javascript 和 Standard Markdown​

今年早些时候，Electron 的代码库更新，对所有 JavaScript 使用了 standard linter。Standard 的 README 总结了做出这一选择的原因。

采用标准风格意味着将代码清晰度和社区规范的重要性置于个人风格之上。这可能不适用于所有项目和开发文化，但开源对于新手来说可能是一个不太友好的地方。建立清晰、自动化的贡献者期望使项目更健康。

我们最近还创建了 standard-markdown，以验证我们文档中的所有 JavaScript 代码片段都是有效的，并与代码库本身的风格保持一致。

这些工具协同工作，帮助我们使用持续集成 (CI) 自动查找拉取请求中的错误。这减轻了人工进行代码审查的负担，并使我们对文档的准确性更有信心。

社区努力​

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

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

Electron 文档

·阅读时长 4 分钟
jlord
jlord

本周，我们为 Electron 的文档在 electronjs.org 上安了一个家。你可以访问 /docs/latest 查看最新文档集。我们也会保留旧版本文档，因此你可以访问 /docs/vX.XX.X 查看与你正在使用的版本相关的文档。

你可以访问 /docs 查看可用版本，或访问 /docs/all 查看最新版本的所有文档（方便使用 cmd + f 进行搜索）。

如果您想贡献文档内容，可以在 Electron 仓库中进行，文档就是从那里获取的。 我们会为每个小版本抓取它们，并将它们添加到使用 Jekyll 构建的 Electron 站点仓库中。

如果您有兴趣了解更多关于我们如何将文档从一个仓库拉取到另一个仓库的信息，请继续阅读下方内容。 否则，请尽情享受 文档吧！

技术细节​

我们保持 Electron 核心仓库中的文档原样不变。 这意味着 electron/electron 将始终拥有最新版本的文档。 当新版本的 Electron 发布时，我们会将其复制到 Electron 网站仓库 electron/electronjs.org。

script/docs​

为了获取文档，我们运行一个 脚本，其命令行接口为 script/docs vX.XX.X，可带或不带 --latest 选项 (取决于您要导入的版本是否为最新版本)。 我们的 获取文档的脚本 使用了几个有趣的 Node 模块

测试帮助我们确保所有组件都按预期落地。

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。 我们还会添加一个已添加到站点的所有版本列表，以及我们希望整个文档集合使用的 permalink。

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 文件中循环遍历配置中的列表即可。 同时，我们给这个页面一个 permalink：/docs/

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

希望您喜欢这些技术细节！ 如果您对使用 Jekyll 构建文档站点感兴趣，请查看 GitHub 文档团队如何发布 基于 Jekyll 的 GitHub 文档。