| (window.webpackJsonp=window.webpackJsonp||[]).push([[147],{448:function(n,e,t){"use strict";t.r(e),e.default="# 文档编辑指南\n\n## 新增一个 markdown 文件 [[[#adding-a-markdown-file]]]\n\n在 `contents/zh/`（中文文章）或 `contents/en/`（英文文章）目录下新增一个 markdown 文件，最多支持三级目录。将路径及标题信息更新在 `contents/zh/posts.yml` 或 `contents/en/posts.yml`。将作者信息添加在 `components/helper/contributors.ts`。（注意，此文件中 `en` 和 `zh` 是不同的条目。）\n\nmarkdown 文件名称小写。\n\n## 使用 prettier 来自动格式化代码 [[[#using-prettier-to-automatically-format-code]]]\n\n在开始之前，我们推荐安装`prettier`的 [VSCode 插件](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)，该插件可以在你保存的时候自动帮你格式化代码。\n\n如果你觉得自动的格式化破坏了你的代码块，你可以在在代码块外面加上下面代码阻止`prettier`格式化该部分代码\n\n```markdown\n\x3c!-- prettier-ignore-start --\x3e\n\x3c!-- prettier-ignore-end --\x3e\n```\n\n如果你发现有的代码块并没有被格式化，请先检查该代码是否存在语法上的错误。\n\n## 内置变量 [[[#built-in-variables]]]\n\n\n- `optionPath`: 例如，链接 [xAxis.type](${optionPath}xAxis.type) 能这么写而得到：\n\n <pre>[xAxis.type](${optionPath}xAxis.type)</pre>\n- `apiPath`: 例如，链接 [echarts.init](${apiPath}echarts.init) 能这么写而得到：\n\n <pre>[echarts.init](${apiPath}echarts.init)</pre>\n- `mainSitePath`: 例如，链接 [echarts.init](${mainSitePath}api.html#echarts.init) 能这么写而得到：\n\n <pre>[echarts.init](${mainSitePath}api.html#echarts.init)</pre>\n- `exampleEditorPath`: 例如，链接 [line-simple](${exampleEditorPath}line-simple&edit=1&reset=1) 能这么写而得到：\n\n <pre>[line-simple](${exampleEditorPath}line-simple&edit=1&reset=1)</pre>\n- `exampleViewPath`: 例如，链接 [line-simple](${exampleViewPath}line-simple&edit=1&reset=1) 能这么写而得到：\n\n <pre>[line-simple](${exampleViewPath}scatter-exponential-regression&edit=1&reset=1)</pre>\n- `lang`: 例如，链接 [Get Started](${lang}/get-started) 能这么写而得到：\n\n <pre>[Get Started](${lang}/get-started)</pre>\n\n\n## 段落标题/子标题 [[[#headings]]]\n\nThe syntax:\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n## 某段落标题 [[[#a-unique-id-for-link]]]\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\n<md-alert type=\"danger\">\nid 用于外链到此段落。强烈建议为每个段落标题声明唯一 id ，并且保持不变。否则，会自动根据段落标题文字生成一个 id ，但是当标题修改时，生成的 id 也会变，导致外链失效。并且，不同语言的文档中生成的 id 也不同，很不方便引用。\n</md-alert>\n\n注：文章主标题不必声明 id ，因为文章的链接就是文件路径（在 `posts.yml` 中定义）。\n\n## 引用其它文章 [[[#link-to-other-articles]]]\n\n<pre>\n[获取 Apache ECharts](${lang}/basics/download)\n</pre>\n\n效果为：\n[获取 Apache ECharts](${lang}/basics/download)\n\n## 嵌入代码 [[[#embedding-code]]]\n\n### 基础使用 [[[#embedding-code-basic-usage]]]\n\n写法为：\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\n效果为：\n```js\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### 代码推荐写法 [[[#embedding-code-recommended-way-of-writing-code]]]\n\n为了可以让工具帮助我们对代码进行格式化，我们应该尽量避免有语法问题的写法。\n\n比如注释 `...`\n\n```js\noption = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n```\n\n### 实时预览和编辑 [[[#embedding-code-live-preview-and-editing]]]\n\n> 目前只支持对 ECharts option 代码的预览（执行代码绘制图表）\n\n写法为：\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js live\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\n效果为：\n```js live\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### 更多预览布局 [[[#embedding-code-more-preview-layouts]]]\n\n#### 左右 [[[#embedding-code-more-preview-layouts-left-to-right]]]\n\n写法为：\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js live {layout: 'lr'}\noption = {\n ...\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\n效果为：\n```js live {layout: 'lr'}\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n#### 右左 [[[#embedding-code-more-preview-layouts-right-to-left]]]\n\n写法为：\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js live {layout: 'rl'}\noption = {\n ...\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\n效果为：\n```js live {layout: 'rl'}\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n#### 下上 [[[#embedding-code-more-preview-layouts-down-to-up]]]\n\n写法为：\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js live {layout: 'bt'}\noption = {\n ...\n};\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\n效果为：\n```js live {layout: 'bt'}\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### 高亮指定代码行以及设置文件名[[[#embedding-code-highlighting-lines-of-code-and-adding-filenames]]]\n\n写法为：\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js {1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\n效果为：\n```js {1,3-5}\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n## 嵌入图片 [[[#embedding-images]]]\n\n图片实际存放地址在 `static/images/` 下。\n\n写法为：\n```\n\n```\n\n### 设置图片高宽 [[[#embedding-images-set-width-height]]]\n\n对于当前页面的临时样式，可以直接写 html：\n\n```\n<img data-src=\"images/demo.png\" style=\"width: 50px\" />\n```\n\n## 嵌入示例（iframe） [[[#embedding-examples]]]\n\n\n写法为：\n```\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\" />\n```\n其中，`src` 为 https://echarts.apache.org/examples/zh/editor.html?c=line-simple 地址中 `?c=` 后面这一串。\n\n效果为：\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\" />\n\n## 添加示例链接 [[[#link-to-examples]]]\n\n写法为：\n<pre>[line-simple](${exampleEditorPath}line-simple&edit=1&reset=1)</pre>\n\n效果为：[line-simple](${exampleEditorPath}line-simple&edit=1&reset=1)\n\n## 添加 ECharts 配置项链接 [[[#link-to-echarts-option-items]]]\n\n写法为：\n<pre>[xAxis.type](${optionPath}xAxis.type)</pre>\n\n效果为：\n[xAxis.type](${optionPath}xAxis.type)\n\n写法为：\n<pre>[echarts.init](${apiPath}echarts.init)</pre>\n\n效果为：\n[echarts.init](${apiPath}echarts.init)\n\n\n## 更多组件使用 [[[#more-component-usage]]]\n\n文档支持使用全局注册的`markdown`组件，除了刚才介绍的`md-example`组件，还有下面几种组件\n\n### md-alert [[[#more-component-usage-md-alert]]]\n\n提示组件\n\n```\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n```\n\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n\n```\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n```\n\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n\n```\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n```\n\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n\n```\n<md-alert type=\"danger\">\nThis is a danger alert.\n</md-alert>\n```\n\n<md-alert type=\"danger\">\nThis is a danger alert.\n</md-alert>\n"}}]); |