mirror of
https://github.com/LCTT/TranslateProject.git
synced 2025-02-25 00:50:15 +08:00
Merge remote-tracking branch 'LCTT/master'
This commit is contained in:
Xingyu.Wang
commit
5cc3f56bbc
@ -1,152 +1,153 @@
|
||||
Git 使用简介
|
||||
======
|
||||
> 我将向你介绍让 Git 的启动、运行，并和 GitHub 一起使用的基础知识。
|
||||
|
||||
|
||||
|
||||
如果你是一个开发者，那你应该熟悉许多开发工具。你已经花了多年时间来学习一种或者多种编程语言并完善你的技巧。你可以熟练运用图形工具或者命令行工具开发。在你看来，没有任何事可以阻挡你。你的代码, 好像你的思想和你的手指一样，将会创建一个优雅的，完美评价的应用程序，并会风靡世界。
|
||||
如果你是一个开发者，那你应该熟悉许多开发工具。你已经花了多年时间来学习一种或者多种编程语言并打磨你的技巧。你可以熟练运用图形工具或者命令行工具开发。在你看来，没有任何事可以阻挡你。你的代码, 好像你的思想和你的手指一样，将会创建一个优雅的，完美评价的应用程序，并会风靡世界。
|
||||
|
||||
然而，如果你和其他人共同开发一个项目会发生什么呢？或者，你开发的应用程序变地越来越大，下一步你将如何去做？如果你想成功地和其他开发者合作，你定会想用一个分布式版本控制系统。使用这样一个系统，合作开发一个项目变得非常高效和可靠。这样的一个系统便是 [Git][1]。还有一个叫 [GitHub][2] 的方便的存储仓库，来存储你的项目代码，这样你的团队可以检查和修改代码。
|
||||
然而，如果你和其他人共同开发一个项目会发生什么呢？或者，你开发的应用程序变地越来越大，下一步你将如何去做？如果你想成功地和其他开发者合作，你定会想用一个分布式版本控制系统。使用这样一个系统，合作开发一个项目变得非常高效和可靠。这样的一个系统便是 [Git][1]。还有一个叫 [GitHub][2] 的方便的存储仓库，用来存储你的项目代码，这样你的团队可以检查和修改代码。
|
||||
|
||||
我将向你介绍让 Git 的启动、运行，并和 GitHub 一起使用的基础知识，可以让你的应用程序的开发可以提升到一个新的水平。我将在 Ubuntu 18.04 上进行演示，因此如果您选择的发行版本不同，您只需要修改 Git 安装命令以适合你的发行版的软件包管理器。
|
||||
|
||||
我将向你介绍让 Git 的启动、运行，并和 GitHub 一起使用的基础知识，可以让你的应用程序的开发可以提升到一个新的水平。 我将在 Ubuntu 18.04 上进行演示，因此如果您选择的发行版本不同，您只需要修改 Git 安装命令以适合你的发行版的软件包管理器。
|
||||
### Git 和 GitHub
|
||||
|
||||
第一件事就是创建一个免费的 GitHub 账号，打开 [GitHub 注册页面][3]，然后填上需要的信息。完成这个之后，你就注备好开始安装 Git 了（这两件事谁先谁后都可以）。
|
||||
|
||||
安装 Git 非常简单，打开一个命令行终端，并输入命令：
|
||||
|
||||
```
|
||||
sudo apt install git-all
|
||||
|
||||
```
|
||||
|
||||
这将会安装大量依赖包，但是你将了解使用 Git 和 GitHub 所需的一切。
|
||||
|
||||
注意：我使用 Git 来下载程序的安装源码。有许多时候，内置的软件管理器不提供某个软件，除了去第三方库中下载源码，我经常去这个软件项目的 Git 主页，像这样克隆：
|
||||
附注：我使用 Git 来下载程序的安装源码。有许多时候，内置的软件管理器不提供某个软件，除了去第三方库中下载源码，我经常去这个软件项目的 Git 主页，像这样克隆：
|
||||
|
||||
```
|
||||
git clone ADDRESS
|
||||
|
||||
```
|
||||
ADDRESS就是那个软件项目的 Git 主页。这样我就可以确保自己安装那个软件的最新发行版了。
|
||||
|
||||
创建一个本地仓库并添加一个文件。
|
||||
下一步就是在你的电脑里创建一个本地仓库（本文称之为newproject，位于~/目录下），打开一个命令行终端，并输入下面的命令：
|
||||
“ADDRESS” 就是那个软件项目的 Git 主页。这样我就可以确保自己安装那个软件的最新发行版了。
|
||||
|
||||
### 创建一个本地仓库并添加一个文件
|
||||
|
||||
下一步就是在你的电脑里创建一个本地仓库（本文称之为 newproject，位于 `~/` 目录下），打开一个命令行终端，并输入下面的命令：
|
||||
|
||||
```
|
||||
cd ~/
|
||||
|
||||
mkdir newproject
|
||||
|
||||
cd newproject
|
||||
|
||||
```
|
||||
|
||||
现在你需要初始化这个仓库。在 ~/newproject 目录下，输入命令 git init，当命令运行完，你就可以看到一个刚刚创建的空的 Git 仓库了（图1）。
|
||||
现在你需要初始化这个仓库。在 `~/newproject` 目录下，输入命令 `git init`，当命令运行完，你就可以看到一个刚刚创建的空的 Git 仓库了（图1）。
|
||||
|
||||
![new repository][5]
|
||||
|
||||
图 1:初始化完成的新仓库
|
||||
*图 1: 初始化完成的新仓库*
|
||||
|
||||
[使用许可][6]
|
||||
|
||||
下一步就是往项目里添加文件。我们在项目根目录（~/newproject）输入下面的命令：
|
||||
下一步就是往项目里添加文件。我们在项目根目录（`~/newproject`）输入下面的命令：
|
||||
|
||||
```
|
||||
touch readme.txt
|
||||
|
||||
```
|
||||
|
||||
现在项目里多了个空文件。输入 git status 来验证 Git 已经检测到多了个新文件（图2）。
|
||||
现在项目里多了个空文件。输入 `git status` 来验证 Git 已经检测到多了个新文件（图2）。
|
||||
|
||||
![readme][8]
|
||||
|
||||
图 2: Git 检测到新文件readme.txt
|
||||
|
||||
[使用许可][6]
|
||||
*图 2: Git 检测到新文件readme.txt*
|
||||
|
||||
即使 Git 检测到新的文件，但它并没有被真正的加入这个项目仓库。为此，你要输入下面的命令：
|
||||
|
||||
```
|
||||
git add readme.txt
|
||||
|
||||
```
|
||||
|
||||
一旦完成这个命令，再输入 git status 命令，可以看到，readme.txt 已经是这个项目里的新文件了（图3）。
|
||||
一旦完成这个命令，再输入 `git status` 命令，可以看到，`readme.txt` 已经是这个项目里的新文件了（图3）。
|
||||
|
||||
![file added][10]
|
||||
|
||||
图 3: 我们的文件已经被添加进临时环境
|
||||
*图 3: 我们的文件已经被添加进临时环境*
|
||||
|
||||
[使用许可][6]
|
||||
### 第一次提交
|
||||
当新文件添加进临时环境之后，我们现在就准备好第一次提交了。什么是提交呢？它是很简单的，一次提交就是记录你更改的项目的文件。创建一次提交也是非常简单的。但是，为提交创建一个描述信息非常重要。通过这样做，你将添加有关提交包含的内容的注释，比如你对文件做出的修改。然而，在这样做之前，我们需要确认我们的 Git 账户，输入以下命令：
|
||||
|
||||
当新文件添加进临时环境之后，我们现在就准备好创建第一个<ruby>提交<rt>commit</rt></ruby>了。什么是提交呢？简单的说，一个提交就是你更改的项目的文件的记录。创建一个提交也是非常简单的。但是，为提交包含一个描述信息非常重要。通过这样做，你可以添加有关该提交包含的内容的注释，比如你对文件做出的何种修改。然而，在这样做之前，我们需要告知 Git 我们的账户，输入以下命令：
|
||||
|
||||
```
|
||||
git config --global user.email EMAIL
|
||||
|
||||
git config --global user.name “FULL NAME”
|
||||
|
||||
```
|
||||
EMAIL 即你的 email 地址，FULL NAME 则是你的姓名。现在你可以通过以下命令创建一个提交：
|
||||
|
||||
“EMAIL” 即你的 email 地址，“FULL NAME” 则是你的姓名。
|
||||
|
||||
现在你可以通过以下命令创建一个提交：
|
||||
|
||||
```
|
||||
git commit -m “Descriptive Message”
|
||||
|
||||
```
|
||||
Descriptive Message 即为你的提交的描述性信息。比如，当你第一次提交是提交一个 readme.txt 文件，你可以这样提交：
|
||||
|
||||
“Descriptive Message” 即为你的提交的描述性信息。比如，当你第一个提交是提交一个 `readme.txt` 文件，你可以这样提交：
|
||||
|
||||
```
|
||||
git commit -m “First draft of readme.txt file”
|
||||
|
||||
```
|
||||
|
||||
你可以看到输出显示一个文件已经修改，并且，为 readnme.txt 创建了一个新模式（图4）
|
||||
你可以看到输出表明一个文件已经修改，并且，为 `readme.txt` 创建了一个新的文件模式（图4）
|
||||
|
||||
![success][12]
|
||||
|
||||
图4：提交成功
|
||||
*图4：提交成功*
|
||||
|
||||
|
||||
### 创建分支并推送至 GitHub
|
||||
|
||||
分支是很重要的，它允许你在项目状态间中移动。假如，你想给你的应用创建一个新的特性。为了这样做，你创建了个新分支。一旦你完成你的新特性，你可以把这个新分支合并到你的主分支中去，使用以下命令创建一个新分支：
|
||||
|
||||
[使用许可][6]
|
||||
### 创建分支并推送至GitHub
|
||||
分支是很重要的，它允许你从项目状态间中移动。假如，你想给你的应用创建一个新的特性。为了这样做，你创建了个新分支。一旦你完成你的新特性，你可以把这个新分支合并到你的主分支中去，使用以下命令创建一个新分支：
|
||||
```
|
||||
git checkout -b BRANCH
|
||||
|
||||
```
|
||||
BRANCH 即为你新分支的名字，一旦执行完命令，输入 git branch 命令来查看是否创建了新分支（图5）
|
||||
|
||||
“BRANCH” 即为你新分支的名字，一旦执行完命令，输入 `git branch` 命令来查看是否创建了新分支（图5）
|
||||
|
||||
![featureX][14]
|
||||
|
||||
图5:名为 featureX 的新分支
|
||||
*图5:名为 featureX 的新分支*
|
||||
|
||||
[使用许可][6]
|
||||
|
||||
接下来，我们需要在GitHub上创建一个仓库。 登录GitHub帐户，请单击帐户主页上的“新建仓库”按钮。 填写必要的信息，然后单击Create repository（图6）。
|
||||
接下来，我们需要在 GitHub 上创建一个仓库。 登录 GitHub 帐户，请单击帐户主页上的“New Repository”按钮。 填写必要的信息，然后单击 “Create repository”（图6）。
|
||||
|
||||
![new repository][16]
|
||||
|
||||
图6:在 GitHub 上新建一个仓库
|
||||
*图6:在 GitHub 上新建一个仓库*
|
||||
|
||||
[使用许可][6]
|
||||
在创建完一个仓库之后，你可以看到一个用于推送本地仓库的地址。若要推送，返回命令行窗口（`~/newproject` 目录中），输入以下命令：
|
||||
|
||||
在创建完一个仓库之后，你可以看到一个用于推送本地仓库的地址。若要推送，返回命令行窗口（ ~/newproject 目录中），输入以下命令：
|
||||
```
|
||||
git remote add origin URL
|
||||
|
||||
git push -u origin master
|
||||
|
||||
```
|
||||
URL 即为我们 GitHub 上新建的仓库地址。
|
||||
|
||||
“URL” 即为我们 GitHub 上新建的仓库地址。
|
||||
|
||||
系统会提示您，输入 GitHub 的用户名和密码，一旦授权成功，你的项目将会被推送到 GitHub 仓库中。
|
||||
|
||||
### 拉取项目
|
||||
|
||||
如果你的同事改变了你们 GitHub 上项目的代码，并且已经合并那些更改，你可以拉取那些项目文件到你的本地机器，这样，你系统中的文件就可以和远程用户的文件保持匹配。你可以输入以下命令来做这件事（ ~/newproject 在目录中），
|
||||
如果你的同事改变了你们 GitHub 上项目的代码，并且已经合并那些更改，你可以拉取那些项目文件到你的本地机器，这样，你系统中的文件就可以和远程用户的文件保持匹配。你可以输入以下命令来做这件事（`~/newproject` 在目录中），
|
||||
|
||||
```
|
||||
git pull origin master
|
||||
|
||||
```
|
||||
|
||||
以上的命令可以拉取任何新文件或修改过的文件到你的本地仓库。
|
||||
|
||||
### 基础
|
||||
|
||||
这就是从命令行使用 Git 来处理存储在 GitHub 上的项目的基础知识。 还有很多东西需要学习，所以我强烈建议你使用 man git，man git-push 和 man git-pull 命令来更深入地了解 git 命令可以做什么。
|
||||
这就是从命令行使用 Git 来处理存储在 GitHub 上的项目的基础知识。 还有很多东西需要学习，所以我强烈建议你使用 `man git`，`man git-push` 和 `man git-pull` 命令来更深入地了解 `git` 命令可以做什么。
|
||||
|
||||
开发快乐！
|
||||
|
||||
了解更多关于 Linux的 内容，请访问来自 Linux 基金会和 edX 的免费的 ["Introduction to Linux" ][17]课程。
|
||||
了解更多关于 Linux 的 内容，请访问来自 Linux 基金会和 edX 的免费的 ["Introduction to Linux"][17]课程。
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
@ -155,7 +156,7 @@ via: https://www.linux.com/learn/intro-to-linux/2018/7/introduction-using-git
|
||||
作者：[Jack Wallen][a]
|
||||
选题：[lujun9972](https://github.com/lujun9972)
|
||||
译者：[distant1219](https://github.com/distant1219)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
校对：[wxy](https://github.com/wxy)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
Review: Algorithms to Live By
|
||||
GraveAccent翻译中 Review: Algorithms to Live By
|
||||
======
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
belitex 翻译中
|
||||
8 Python packages that will simplify your life with Django
|
||||
======
|
||||
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
BriFuture is translating
|
||||
|
||||
3 top open source JavaScript chart libraries
|
||||
最好的 3 个开源 JavaScript 图表库
|
||||
======
|
||||
|
||||
|
||||
|
||||
Charts and graphs are important for visualizing data and making websites appealing. Visual presentations make it easier to analyze big chunks of data and convey information. JavaScript chart libraries enable you to visualize data in a stunning, easy to comprehend, and interactive manner and improve your website's design.
|
||||
对于数据可视化和制作精美网站来说，图表和图形很重要。视觉上的展示让分析大块数据及传递信息变得更简单。JavaScript 图表库能让数据以极好的，易于理解的和交互的方式进行可视化，还能够优化你的网站设计。
|
||||
|
||||
In this article, learn about three top open source JavaScript chart libraries.
|
||||
本文会带你学习最好的 3 个开源 JavaScript 图表库。
|
||||
|
||||
### 1\. Chart.js
|
||||
|
||||
[Chart.js][1] is an open source JavaScript library that allows you to create animated, beautiful, and interactive charts on your application. It's available under the MIT License.
|
||||
[Chart.js][1] 是一个开源的 JavaScript 库，你可以在自己的应用中用它创建生动美丽和交互式的图表。使用它需要遵循 MIT 协议。
|
||||
|
||||
With Chart.js, you can create various impressive charts and graphs, including bar charts, line charts, area charts, linear scale, and scatter charts. It is completely responsive across various devices and utilizes the HTML5 Canvas element for rendering.
|
||||
使用 Chart.js，你可以创建各种各样令人印象深刻的图表和图形，包括条形图，折线图，范围图，线性标度，和散点图。它可以响应各种设备，使用 HTML5 Canvas 元素进行绘制。
|
||||
|
||||
示例代码如下，它使用该库绘制了一个条形图。本例中我们使用 Chart.js 内容分发网络（CDN）来包含这个库。注意这里使用的数据仅用于展示。
|
||||
|
||||
Here is example code that draws a bar chart using the library. We'll include it in this example using the Chart.js content delivery network (CDN). Note that the data used is for illustration purposes only.
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
@ -69,23 +68,23 @@ new Chart(document.getElementById("bar-chart"), {
|
||||
</html>
|
||||
```
|
||||
|
||||
As you can see from this code, bar charts are constructed by setting **type** to **bar**. You can change the direction of the bar to other types—such as setting **type** to **horizontalBar**.
|
||||
如你所见，通过设置 **type** 和 **bar** 来构造条形图。你可以把条形体的方向改成其他类型 —— 比如把 **type** 设置成 **horizontalBar**。
|
||||
|
||||
The bars' colors are set by providing the type of color in the **backgroundColor** array parameter.
|
||||
在 **backgroundColor** 数组参数中提供颜色类型，就可以设置条形图的颜色。
|
||||
|
||||
The colors are allocated to the label and data that share the same index in their corresponding array. For example, "Latin America," the second label, will be set to "blue" (the second color) and 4 (the second number in the data).
|
||||
颜色被分配给关联数组中相同索引的标签和数据。例如，第二个标签 “Latin American”，颜色会是 “蓝色（blue）”（第二个颜色），数值是 4（data 中的第二个数字）。
|
||||
|
||||
Here is the output of this code.
|
||||
代码的执行结果如下。
|
||||
|
||||
|
||||
|
||||
### 2\. Chartist.js
|
||||
|
||||
[Chartist.js][2] is a simple JavaScript animation library that allows you to create customizable and beautiful responsive charts and other designs. The open source library is available under the WTFPL or MIT License.
|
||||
[Chartist.js][2] 是一个简单的 JavaScript 动画库，你能够自制美丽的响应式图表，或者进行其他创作。使用它需要遵循 WTFPL 或者 MIT 协议。
|
||||
|
||||
The library was developed by a group of developers who were dissatisfied with existing charting tools, so it offers wonderful functionalities to designers and developers.
|
||||
这个库是由一些对现有图表工具不满的开发者进行开发的，它可以为设计师或程序员提供美妙的功能。
|
||||
|
||||
After including the Chartist.js library and its CSS files in your project, you can use them to create various types of charts, including animations, bar charts, and line charts. It utilizes SVG to render the charts dynamically.
|
||||
在项目中包含 Chartist.js 库后，你可以使用它们来创建各式各样的图表，包括动画，条形图和折线图。它使用 SVG 来动态渲染图表。
|
||||
|
||||
Here is an example of code that draws a pie chart using the library.
|
||||
```
|
||||
@ -152,26 +151,27 @@ Here is an example of code that draws a pie chart using the library.
|
||||
</html>
|
||||
```
|
||||
|
||||
Instead of specifying various style-related components of your project, the Chartist JavaScript library allows you to use various pre-built CSS styles. You can use them to control the appearance of the created charts.
|
||||
使用 Chartist JavaScript 库，你可以使用各种预先构建好的 CSS 样式，而不是在项目中指定各种与样式相关的部分。你可以使用这些样式来设置已创建的图表的外观。
|
||||
|
||||
比如，预创建的 CSS 类 .ct-chart 是用来构建饼状图的容器。还有.ct-golden-section 类可用于获取纵横比，它基于响应式设计进行缩放，帮你解决了计算固定尺寸的麻烦。Chartist 还提供了其它类别的比例容器，你可以在自己的项目中使用它们。
|
||||
|
||||
For example, the pre-created CSS classis used to build the container for the pie chart. And, theclass is used to get the aspect ratios, which scale with responsive designs and saves you the hassle of calculating fixed dimensions. Chartist also provides other classes of container ratios you can utilize in your project.
|
||||
|
||||
For styling the various pie slices, you can use the default . **ct-series-a** class. The letter **a** is iterated with every series count (a, b, c, etc.) such that it corresponds with the slice to be styled.
|
||||
为了给各个扇形设置样式，可以使用默认的 .**ct-serials-a** 类。字母 **a** 是根据系列的数量变化的（a、b、c，等等），因此它与每个要设置样式的扇形相对应。
|
||||
|
||||
The **Chartist.Pie** method is used for creating a pie chart. To create another type of chart, such as a line chart, use **Chartist.Line.**
|
||||
**Chartist.Pie** 方法用来创建一个饼状图。要创建另一种类型的图表，比如折线图，请使用 **Chartist.Line**。
|
||||
|
||||
Here is the output of the code.
|
||||
代码的执行结果如下。
|
||||
|
||||
|
||||
|
||||
### 3\. D3.js
|
||||
|
||||
[D3.js][3] is another great open source JavaScript chart library. It's available under the BSD license. D3 is mainly used for manipulating and adding interactivity to documents based on the provided data.
|
||||
[D3.js][3] 是另一个好用的开源 JavaScript 图表库。使用它需要遵循 BSD license。D3 的主要用途是，根据提供的数据，处理和添加文档的交互功能，。
|
||||
|
||||
You can use this amazing 3D animation library to visualize your data using HTML5, SVG, and CSS and make your website appealing. Essentially, D3 enables you to bind data to the Document Object Model (DOM) and then use data-based functions to make changes to the document.
|
||||
借助这个 3D 动画库，你可以通过 HTML5、SVG 和 CSS 来可视化你的数据，并且让你的网站变得更精美。更重要的是，使用 D3，你可以把数据绑定到 Document Object Model（DOM）上，然后使用基于数据的函数改变文档。
|
||||
|
||||
示例代码如下，它使用该库绘制了一个简单的条形图。
|
||||
|
||||
Here is example code that draws a simple bar chart using the library.
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
@ -215,19 +215,19 @@ Here is example code that draws a simple bar chart using the library.
|
||||
</html>
|
||||
```
|
||||
|
||||
The main concept in using the D3 library is to first apply CSS-style selections to point to the DOM nodes and then apply operators to manipulate them—just like in other DOM frameworks like jQuery.
|
||||
使用 D3 库的主要概念是应用 CSS 样式选择器来定位 DOM 节点，然后对其执行操作，就像其它的 DOM 框架，比如 JQuery。
|
||||
|
||||
After the data is bound to a document, the . **enter()** function is invoked to build new nodes for incoming data. All the methods invoked after the . **enter()** function will be called for every item in the data.
|
||||
将数据绑定到文档上后，.**enter()** 函数会被调用，为即将到来的数据构建新的节点。所有在 .**enter()** 之后调用的方法会为数据中的每一个项目调用一次。
|
||||
|
||||
Here is the output of the code.
|
||||
代码的执行结果如下。
|
||||
|
||||
|
||||
|
||||
### Wrapping up
|
||||
### 总结
|
||||
|
||||
[JavaScript][4] charting libraries provide you with powerful tools for implementing data visualization on your web properties. With these three open source libraries, you can enhance the beauty and interactivity of your websites.
|
||||
[JavaScript][4] 图表库提供了强大的工具，你可以将自己的网络资源进行数据可视化。通过这三个开源库，你可以把自己的网站变得更好看，更容易使用。
|
||||
|
||||
Do you know of another powerful frontend library for creating JavaScript animation effects? Please let us know in the comment section below.
|
||||
你知道其它强大的用于创造 JavaScript 动画效果的前端库吗？请在下方的评论区留言分享。
|
||||
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
@ -236,7 +236,7 @@ via: https://opensource.com/article/18/9/open-source-javascript-chart-libraries
|
||||
|
||||
作者：[Dr.Michael J.Garbade][a]
|
||||
选题：[lujun9972](https://github.com/lujun9972)
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
译者：[BriFuture](https://github.com/brifuture)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
Loading…
Reference in New Issue
Block a user