欢迎来到 Ethereum.org！
这是 ethereum.org 网站的库，这是以太网社区的资源。该网站的目的是 “成为我们不断发展的全球社区通向以太币的最佳门户。”-更多地了解这意味着什么 here。
通过社区成员的贡献，ethereum.org 会随着时间的推移而改进和改变，这些社区成员提交内容，提供反馈或自愿花费时间来管理其发展。如果你有兴趣帮助改进 ethereum.org，请查找 如何做出贡献。
寻找以太坊区块链的代码？
如果你在寻找以太坊区块链本身，没有一个库。相反，为了安全和多样性，Ethereum 使用不同的编程语言编写了协议的多个实现。查看不同的实现
如何做出贡献
该项目遵循 所有贡献者 规范。欢迎各界人士来稿！
如何对 Ethereum.org 进行更新：
提交一个问题
- 创建 new issue。
- 对问题进行评论（如果你希望被分配到它）-这样 我们的团队可以把这个问题交给你。。
Fork 库（库）
- 如果你不确定，下面是如何 fork the repo。
设置本地环境（可选）
如果你准备好贡献和创建你的公关，这将有助于建立一个本地环境，这样你就可以看到你的变化。
-
克隆你的 Fork
如果这是你第一次分叉我们的库，这就是你在此步骤中需要做的所有事情：
$ git clone git@github.com:[your_github_handle]/ethereum-org-website.git && cd ethereum-org-website如果你已经对库进行了分叉，那么你将需要确保你的 Fork 已经配置，并且它是最新的。这将节省你的头痛的潜在合并冲突。
$ git remote add upstream https://github.com/ethereum/ethereum-org-website.git到 sync your fork with the latest changes:
$ git checkout dev
$ git fetch upstream
$ git merge upstream/dev- 安装依赖项
$ yarn- 添加个人 GitHub API 令牌（免费）
我们建议在本地运行项目时设置此设置，因为我们使用 GitHub API 为许多 Projects & 文件获取库数据。
// .env Example:
GATSBY_GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059- 添加 Etherscan API 令牌（免费）
- 在 Etherscan 上 创建一个帐户
- 导航到你的帐户设置页面
- 在边栏中，单击“api-keys”并添加一个新的令牌
- 将你的 API-key 令牌从 Etherscan 复制并粘贴到
.env
// .env Example:
ETHERSCAN_API_KEY=K6NUTARFJZJCIXHF1F1E1YGJZ8RQ29BE4U- 添加 DefiPulse API 令牌（免费）
- 遵循此指南 创建帐户并获得 Defipulse API 令牌
- 将你的活动 API 键从 Defipulse 复制并粘贴到
.env
// .env Example:
DEFI_PULSE_API_KEY=4953aaf7966dad9c129397e197a0630ed0594f66962dd5fb058972b250da做出改变！
- 为你的更改创建新的分支
$ git checkout -b new_branch_name- 开始开发！
$ yarn start- 在你最喜欢的文本编辑器/IDE 中打开此目录，并通过浏览器访问
localhost:8000实时查看你的更改 - 专业提示：探索
package.json中的脚本，以获得更多构建选项
- 提交并准备 pull 请求。在你的 PR 提交消息中，引用它所解决的问题（参见 如何使用关键字将提交消息链接到问题）。
$ git commit -m "brief description of changes [Fixes #1234]"- push 到你的 GitHub 帐户
$ git pushlambda 的地方发展函数
有时，你可能会开发一些特性，以便向其他服务发出外部 API 请求。对于这些，我们编写 lambda函数来混淆 API 键。为了在本地测试这些，你需要执行以下操作：
- 下载支持 CORS 的浏览器扩展（例如：https://chrome.google.com/webstore/search/cors).
- 在下载的浏览器扩展中启用 CORS。
- 将相关的 API 键添加到
.env文件。 - 在启动了针对 Ethereum.org 的开发服务器之后（如上），请使用以下工具启动 Netlify Lambda 服务器：
yarn start:lambda- 你引用的地方/。Netlify函数对于服务器调用，在不在生产环境中时，添加一个条件调用 localhost:9000Endpoints。
提交你的公关
- 在将更改提交到 GitHub Fork 之后，向
dev分支的ethereum/ethereum-org-website库提交 pull 请求 - 在你的 PR 描述中，引用它所解决的问题（参见 linking a pull request to an issue using a keyword）
- 前科。
Updates out of date content [Fixes #1234]
- 前科。
- Netlify（我们的托管服务）将所有 PRS 部署到一个可公开访问的预览 URL，例如：
- Confirm your Netlify preview deploy looks & functions as expected
- 为什么不在 our discord server 中打个招呼，让大家注意你的公关呢？
等待审核
- 网站团队审查了每一次公关活动。
- 见 如何对内容更改做出决定
- 可接受的 PRS 将被批准 & 合并到
dev分支机构
释放
-
master将持续同步到 Netlify，并将自动将新的提交部署到以太币.org -
website team 将周期性地将
dev合并为master（通常每周多次） - 你可以 查看发行历史，其中包括公关重点
翻译程序
该翻译项目旨在将 Ethereum.org 翻译成不同的语言，并使世界各地的人们都能访问该网站。
如果你想成为一名翻译，你可以 加入我们的 Crowdin 项目 并立即开始将网站翻译成你的语言。
要获得更多有关该程序的信息，请访问 翻译程序页面，了解如何使用 Crowdin，检查进度或为翻译找到一些有用的工具。
Ethereum.org 网站 Stack
- Node.js
- 纱线包装管理器
-
Gatsby
- 管理页面构建和部署
- 在
gatsby-node.js，gatsby-browser.js，gatsby-config.js和gatsby-ssr.js中可配置 - Gatsby Tutorial
- Gatsby Docs
- React-用于基于编译组件的用户界面的 JavaScript库
- GraphQL-API 的查询语言
-
Algolia-网站索引、网站内快速搜索结果和搜索分析。了解更多关于我们如何实现网站搜索的 Algolia 的信息。
- 主要实现：
/src/components/Search/index.js
- 主要实现：
- Crowdin-我们翻译工作的众包（请参阅下面的“翻译倡议”）
- GitHub Actions-管理 CI/CD 和问题跟踪
-
Netlify-用于
master构建的 DNS 管理和主主机。还为所有 pull 请求提供自动预览部署
代码结构
| Folder | 主要用途 |
|---|---|
/src |
用于开发的主要源文件夹 |
/src/assets |
图像资产 |
/src/components |
React 不作为独立页面的组件 |
/src/content |
Markdown /MDX 文件用于存储在此的网站内容。 例如： ethereum.org/en/about/ 是从 src/content/about/index.md构建的， Markdown 文件被解析和呈现为 src/templates/static.js* |
/src/content/developers/docs |
* Markdown 文件在这里使用文档模板：src/templates/docs.js
|
/src/content/developers/tutorials |
* Markdown 此处的文件使用教程模板：src/templates/tutorial.js
|
/src/data |
按组件可导入的通用数据文件 |
/src/hooks |
定制钩子 React |
/src/intl |
语言转换 JSON 文件 |
/src/lambda |
用于 API 调用的 lambda函数脚本 |
/src/pages/src/pages-conditional
|
React 组件将函数作为独立的页面。 例如： ethereum.org/en/wallets/find-wallet 是从 src/pages/wallets/find-wallet.js 构建的 |
/src/scripts/src/utils
|
自定义实用程序脚本 |
/src/styles |
存储 layout.css，其中包含根级别的 CSS 样式 |
/src/templates |
定义网站不同区域布局的 JSX 模板 |
/src/theme.js |
声明站点颜色主题、断点和其他常量（尝试首先使用这些颜色） |
网站公约/最佳做法
翻译倡议
如增加或更改任何书面语言内容，请仔细阅读
如何准备翻译内容取决于你是在一个简单的 Markdown /MDX 页面上工作，还是在一个 React 组件页面上工作。
- MDX 页面
Markdown 将被翻译为整页的内容，因此不需要具体的操作。只需在 /src/content/ 中创建一个带有页面名称的新文件夹，然后放置索引 Markdown 文件（即。index.md）在新文件夹中。
- React 组件页
-
English text should be placed into
/src/intl/en/page-CORRESPONDING-PAGE.json -
Crowdin 是我们用来管理和众包翻译工作的平台。请使用以下约定来帮助简化此过程。
-
对文件名和 JSON 键使用 kebab casing（利用-dashes-between-words）
-
使用标准的句子大小写作为输入值
- 如果需要大写样式，最好是使用 CSS 样式
- 这样做：
JSON `"page-warning": "Be very careful"` CSS `text-transform: uppercase` - 不是这个：
JSON `"page-warning": "BE VERY CAREFUL"`
- 这样做：
- 这最大限度地减少了翻译过程中的问题，并允许对所有语言进行一致的样式设置。
- 如果需要大写样式，最好是使用 CSS 样式
-
请避免 在句子中嵌入链接。要使单词/短语成为链接，需要在 Intl JSON 中有一个键/字符串。如果这是在另一个句子的中间，这将导致该句子被分成多个部分，并需要将句子结构编码到 JavaScript 中。
- 这在翻译过程中会带来很大的挑战，因为每种语言的书面语法都会在主语/动词/等的顺序上产生很大的差异。
- 如果你想链接到句子中的某个内容，请在句子或段落的末尾创建一个链接：
<p>All Ethereum transactions require a fee, known as Gas, that gets paid to the miner. <Link to="link">More on Gas</Link></p>一旦将英文内容添加到相应的 JSON 文件中，上面的代码应该看起来更像：
<p><Translation id="page-transactions" />{" "}<Link to="link"><Translation id="page-transactions-gas-link" /></Link></p>- 每个单独的 JSON 条目本身应该是一个完整的短语
-
这是使用
Translation组件完成的。但是，对于普通的 JS，有一种替代方法：gatsby-plugin-intl与/src/utils/translations.js-
Method one:
<Translation />component (preferred if only needed in JSX)import { Translation } from "src/components/Translation" // Utilize in JSX using <Translation id="language-json-key" /> -
Method two:
translateMessageId()import { useIntl } from "gatsby-plugin-intl" import { translateMessageId } from "src/utils/translations" // Utilize anywhere in JS using const intl = useIntl() translateMessageId("language-json-key", intl)const siteTitle = translateMessageId("site-title", intl)
-
React 钩子
- 组件和页面是使用带有 React 钩子的箭头语法来编写的，而不是使用基于类的组件。
// Example
import React, { useState, useEffect } from 'react'
const ComponentName = props => {
// useState hook for managing state variables
const [greeting, setGreeting] = useState('')
useEffect(() => {
// useEffect hook for handling component lifecycle
setGreeting('Hello world')
}, [])
return <div>{greeting}</div>
};
export default ComponentName;造型
-
src/theme.js-声明站点颜色主题、断点和其他常量（尝试首先使用这些颜色） -
我们使用 样式组件
- 带标签的模板文字用于定制组件的样式
// Example of styling syntax using styled-components import styled from "styled-components" const GenericButton = styled.div` width: 200px; height: 50px; ` const PrimaryButton = styled(GenericButton)` background: blue; ` const SecondaryButton = styled(GenericButton)` background: red; ` // These are each components, capitalized by convention, and can be used within JSX code // ie: <PrimaryButton>Text</PrimaryButton>- 推荐 VS 代码插件：
vscode-styled-components
安装：打开 VS 代码 >Ctrl+P/Cmd+P运行：ext install vscode-style-components
-
来自
src/theme.js的值将作为 prop 对象自动传递给样式组件。// Example of theme.js usage import styled from "styled-components" const Container = styled.div` background: ${(props) => props.theme.colors.background}; @media (max-width: ${(props) => props.theme.breakpoints.s}) { font-size: #{(props) => props.theme.fontSized.s}; } ` -
Framer Motion-一个开放源码和生产准备的运动库在网上 React ，用于我们的动画设计
-
表情符号:我们使用 Twemoji，这是一种由 Twitter 创建的开源表情包。这些都是由我们托管的，并用于提供跨操作系统的一致体验。
// Example of emoji use
import Emoji from "./Emoji"
// Within JSX:
<Emoji text=":star:" size={1} /> // sized in `em`-
图标:我们使用 React Icons
-
src/components/Icon.js是用于导入要使用的图标的组件 - 如果你想要使用的图标未列出，则需要将其添加到此文件中
-
src/components/Icon.js:
// Example of how to add new icon not listed
import { ZzIconName } from "react-icons/zz"
// Then add to IconContect.Provider children:
{name === "alias" && <ZzIconName />}从 React 组件开始：
// Example of icon use
import Icon from "./Icon"
// Within JSX:
<Icon name="alias" />使用 GraphQL 的图像加载和 API 调用
- 盖茨比 +GraphQL 用于加载图像，并首选用于 API 调用（如果可能/实用，可以代替 REST）。利用在构建时而不是运行时运行的静态页面查询来优化性能。
- 图像加载示例：
import { graphql } from "gatsby"
export const query = graphql`
query {
hero: file(relativePath: { eq: "developers-eth-blocks.png" }) {
childImageSharp {
gatsbyImageData(
width: 800
layout: FIXED
placeholder: BLURRED
quality: 100
)
}
}
}
`
// These query results get passed as an object `props.data` to your component- API 调用示例：
import { graphql } from "gatsby"
export const repoInfo = graphql`
fragment repoInfo on GitHub_Repository {
stargazerCount
languages(orderBy: { field: SIZE, direction: DESC }, first: 2) {
nodes {
name
}
}
url
}
`
export const query = graphql`
query {
hardhatGitHub: github {
repository(owner: "nomiclabs", name: "hardhat") {
...repoInfo
}
}
}
`
// These query results get passed as an object `props.data` to your component
认领你的小弟弟吧！
POAP 是什么？
出席证明协议是一个 Dapp，它以 ERC-721 令牌的形式分发徽章，以证明你参加了活动。More on POAPs。
Ethereum.org2021 贡献者 POAP
-
如果你已经在 2021 年提交了到目前为止合并到我们的库中的任何更改，那么你将面临一个 POAP 等待！
-
这包括我们在 Crowdin 上的专职翻译
-
要获得你的贡献者 POAP，请加入我们的 Discord 服务器，并在 #poaps-channel 中粘贴到你的贡献的链接
-
我们团队的一名成员将验证你的请求，并为你提供一个个性化的链接，以获得你自己的新鲜铸造的 POAP 收藏品！
-
为了帮助验证，我们要求 Github 贡献者将他们的 Github 帐户与他们的 Discord 帐户连接起来（Discord>Settings>Connections>Github）。我们的团队将通过 Crowdin 直接验证 Crowdin 的贡献者。
-
如果你还没有做出贡献，并且想要获得一个 POAP 来显示你对以太网空间的忠诚，那么就去 issues 选项卡开始吧！
Contributors
感谢这些优秀的人（emoji key）：
该项目遵循 所有贡献者 规范。欢迎各界人士来稿！
加入我们的 Discord 服务器
我们有一个空间来讨论所有的事情 Ethereum.org-分享你的想法或只是打个招呼 on Discord。