diff --git a/contributor_docs/zh/contributing_to_the_p5.js_reference.md b/contributor_docs/zh/contributing_to_the_p5.js_reference.md new file mode 100644 index 0000000000..58a95570b2 --- /dev/null +++ b/contributor_docs/zh/contributing_to_the_p5.js_reference.md @@ -0,0 +1,411 @@ +# 为 p5.js 参考文献做贡献 + +在 p5.js 中,我们通过在库的源代码中包含专门的注释,来编写你在 p5.js 网站上看到的[参考文献](https://p5js.org/reference/)页面上的代码参考。这些参考注释包括描述、函数签名(其参数和返回值)和使用示例。换句话说,每个 p5.js 函数/变量的参考页面上的内容都是从源代码中的参考注释构建的。 + +本文档将向你展示如何编写和格式化参考注释,以便最终能够正确地呈现到网站上。每当你编辑或编写任何 p5.js 函数或变量的参考时,都应遵循此指南。 + + +## 关于参考注释如何工作的简要介绍 + +当你查看 p5.js 的源代码时,你会看到库中许多行都是参考注释;它们看起来像这样: + +``` +/** + * Calculates the sine of an angle. `sin()` is useful for many geometric tasks + * in creative coding. The values returned oscillate between -1 and 1 as the + * input angle increases. `sin()` takes into account the current + * angleMode. + * + * @method sin + * @param {Number} angle the angle. + * @return {Number} sine of the angle. + * + * @example + *
+ * function draw() {
+ * background(200);
+ *
+ * let t = frameCount;
+ * let x = 50;
+ * let y = 30 * sin(t * 0.05) + 50;
+ * line(x, 50, x, y);
+ * circle(x, y, 20);
+ *
+ * describe('A white ball on a string oscillates up and down.');
+ * }
+ *
+ *
+ * function draw() {
+ * let x = frameCount;
+ * let y = 30 * sin(x * 0.1) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form a wave pattern.');
+ * }
+ *
+ *
+ * function draw() {
+ * let t = frameCount;
+ * let x = 30 * cos(t * 0.1) + 50;
+ * let y = 10 * sin(t * 0.2) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form an infinity symbol.');
+ * }
+ *
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(mouseX, 0, mouseX, 100);
+ * describe('horizontal black line moves left and right with mouse x-position');
+ * }
+ *
+ *
+ * const c = color(255, 204, 0);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'redValue' to 255.
+ * const redValue = red(c);
+ * fill(redValue, 0, 0);
+ * rect(50, 20, 35, 60);
+ * describe(
+ * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
+ * );
+ *
+ * ` 标签。在开放和闭合的 `` 标签之间,你将插入相关示例代码。编写参考示例代码的基本原则是保持简单和简洁。示例应该有意义,并解释功能的工作原理,而不会太复杂。示例的画布应该是 100x100 像素,如果没有包含 `setup()` 函数,例如上面的示例,则代码将自动包装在一个默认的 100x100 像素灰色背景画布中创建的 `setup()` 函数中。我们不会在这里详细讨论示例代码的最佳实践和代码风格;请参阅参考样式指南。
+
+你可以为一个功能添加多个示例。为此,添加一个额外的 `` 和 `` HTML 块,直接放在第一个关闭后,中间用一个空行分隔。
+
+```
+* @example
+*
+*
+* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+* describe('An ellipse created using an arc with its top right open.');
+*
+*
+*
+*
+*
+* arc(50, 50, 80, 80, 0, PI, OPEN);
+* describe('The bottom half of an ellipse created using arc.');
+*
+*
+```
+
+如果你不希望参考页面执行示例代码(即,你只希望代码显示出来),请在 `` 中包含 “`norender`” 类:
+
+```
+* @example
+*
+*
+* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+* describe('ellipse created using arc with its top right open');
+*
+*
+```
+
+如果你不希望示例作为自动化测试的一部分运行(例如,如果示例需要用户交互),请在 `` 中包含 `“notest”` 类:
+
+```
+* @example
+*
+* function setup() {
+* let c = createCanvas(100, 100);
+* saveCanvas(c, 'myCanvas', 'jpg');
+* }
+*
+```
+
+如果你的示例使用外部素材文件,请将它们放入 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) 文件夹中(或者重用其中已有的文件),然后在代码中使用 "assets/filename.ext" 链接到它们。请参阅 [tint()](http://p5js.org/reference/#/p5/tint) 参考示例。
+
+
+### 使用 `describe()` 添加画布描述
+
+最后,对于你添加的每个示例,都需要使用 p5.js 函数 `describe()` 来创建一个屏幕阅读器可访问的画布描述。只包括一个参数:一个字符串,其中简要描述了画布上发生的事情。
+
+```
+* @example
+*
+*
+* let xoff = 0.0;
+* function draw() {
+* background(204);
+* xoff = xoff + 0.01;
+* let n = noise(xoff) * width;
+* line(n, 0, n, height);
+* describe('A vertical line moves randomly from left to right.');
+* }
+*
+*
+*
+*
+*
+* let noiseScale = 0.02;
+* function draw() {
+* background(0);
+* for (let x = 0; x < width; x += 1) {
+* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+* stroke(noiseVal*255);
+* line(x, mouseY + noiseVal * 80, x, height);
+* }
+* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
+* }
+*
+*
+```
+
+有关 `describe()` 的更多信息,请访问 [网络无障碍贡献者文档](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions)。
+
+以上就是你编写和编辑 p5.js 参考注释的大多数方法。然而,还有一些 JSDoc 样式参考注释的更多专门用法,你可能会在 p5.js 中遇到。这些在某些情况下很有用,但通常不是你经常需要的东西。
+
+
+### `@private` 标签
+
+如果属性或变量是私有函数或变量,则可以使用 `@private`。如果将功能标记为 `@private`,则不会将其作为渲染的参考的一部分包含在网站上。使用 `@private` 标签将参考注释块标记为私有的原因是当你记录库本身的内部功能时。例如,参考下面的 `_start` 的参考注释:
+
+
+
+```
+/**
+ * _start calls preload() setup() and draw()
+ *
+ * @method _start
+ * @private
+ */
+p5.prototype._start = function () {
+```
+
+
+### `@module` 和相关标签
+
+每个源代码文件的顶部都将有一个 `@module` 标签。模块对应于 p5.js 中的一组功能,在网站上呈现的渲染的参考页面将这些功能分成相应的部分。在每个模块中,使用 `@submodule` 标签定义额外的子模块。
+
+`@for` 标签定义此模块与整体 `p5` 类之间的关系,有效地表示此模块是 `p5` 类的一部分。
+
+`@requires` 标签定义当前模块依赖的所需导入模块。
+
+```
+/**
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+```
+
+p5.js 遵循的约定是 `src/` 文件夹中的每个子文件夹将是一个 `@module`,而子文件夹中的每个文件将是该子文件夹的 `@module` 下的一个 `@submodule`。除非你正在向 p5.js 源代码添加新的子文件夹/文件,否则你不应直接编辑此参考注释块中的文件。
+
+
+### `@class` 标签
+
+使用 `@class` 标签和 `@constructor` 标签定义类构造函数。此块的格式类似于使用 `@method` 块定义函数的方式,类的名称将需要使用 `@class` 标签定义,而 `@constructor` 标签将指示类具有构造函数。参见下面的示例 `p5.Color` 类:
+
+```
+/**
+ * A class to describe a color. Each `p5.Color` object stores the color mode
+ * and level maxes that were active during its construction. These values are
+ * used to interpret the arguments passed to the object's constructor. They
+ * also determine output formatting such as when
+ * saturation() is called.
+ *
+ * Color is stored internally as an array of ideal RGBA values in floating
+ * point form, normalized from 0 to 1. These values are used to calculate the
+ * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+ * are sent to the renderer.
+ *
+ * When different color representations are calculated, the results are cached
+ * for performance. These values are normalized, floating-point numbers.
+ *
+ * color() is the recommended way to create an instance
+ * of this class.
+ *
+ * @class p5.Color
+ * @constructor
+ * @param {p5} [pInst] pointer to p5 instance.
+ *
+ * @param {Number[]|String} vals an array containing the color values
+ * for red, green, blue and alpha channel
+ * or CSS color.
+ */
+```
+
+## 生成和预览参考文献
+
+p5.js 存储库已经设置好,可以生成和预览参考文献,而不需要构建和运行 p5.js 网站。
+
+- 从源代码中的参考注释生成参考文献的主要命令是运行以下命令。
+
+```
+npm run docs
+```
+
+这将生成必要的预览文件和主 `docs/reference/data.json` 文件,这个文件(在缩小后)将用于在网站上呈现参考页面。
+
+- 为了持续修改完善参考文献,你可以运行以下命令。
+
+```
+npm run docs:dev
+```
+
+这将启动一个渲染参考文献的实时预览,每次你进行更改时都会更新(你需要在进行更改后刷新页面才能看到它们)。对于在浏览器中预览示例代码来说,这特别有用。
+
+- 主要的模板文件存储在 `docs/` 文件夹中,在大多数情况下,你不应直接更改此文件夹中的文件,除非是要在 `docs/yuidoc-p5-theme/assets` 文件夹中添加新的文件。
+
+
+## 下一步
+
+有关参考系统的详细信息,你可以查看[JSDoc](https://jsdoc.app/) 和 [YUIDoc](https://yui.github.io/yuidoc/) 的文档。
+
+有关参考资料相关 issue 的示例,请查看[#6519](https://github.com/processing/p5.js/issues/6519) 和 [#6045](https://github.com/processing/p5.js/issues/6045)。[贡献者指南](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md) 文档也是一个很好的起点。