文件編輯指南

新增 Markdown 檔案

將 markdown 檔案新增到 contents/en/（中文文件）或 contents/en/（英文文件）目錄中，最多支援三級目錄。並在 contents/en/posts.yml 或 contents/en/posts.yml 中更新路徑和標題資訊。

markdown 檔名請使用小寫。

使用 Prettier 自動格式化程式碼

在開始之前，我們建議安裝 Prettier VSCode 外掛，它將在您儲存時自動為您格式化程式碼。

如果您覺得自動格式化破壞了您的程式碼塊，可以新增以下注釋來阻止 prettier 格式化該程式碼塊內的程式碼：

<!-- prettier-ignore-start -->
<!-- prettier-ignore-end -->

如果您發現程式碼塊沒有被格式化，請首先檢查程式碼中是否存在語法錯誤。

內建變數

  • optionPath
  • mainSitePath
  • exampleViewPath
  • exampleEditorPath
  • lang

用法

${xxxxx}

[Get Apache ECharts](${lang}/basics/download)

獲取 Apache ECharts

嵌入程式碼

基本用法

```js
option = {
    series: [{
        type: 'bar',
        data: [23, 24, 18, 25, 27, 28, 25]
    }]
};
\```
option = {
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

為了讓工具能夠幫助我們格式化程式碼，我們應該儘量避免使用有語法問題的寫法。

例如，註釋 ...

option = {
  series: [
    {
      type: 'bar'
      // ...
    }
  ]
};

即時預覽和編輯

目前只支援 Option 程式碼的預覽。

\```js live
option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
\```
option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
線上示例

更多預覽佈局

左右佈局

<md-live lang="js" code="'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg'" v-bind="{layout: 'lr'}" />

<!-- prettier-ignore-end -->

<md-live lang="js" code="'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow'" v-bind="{layout: 'lr'}" />

#### Right to left

<!-- prettier-ignore-start -->
markdown
option = {
  ...
};
\```
線上示例

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
線上示例

上下佈局

<md-live lang="js" code="'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg'" v-bind="{layout: 'bt'}" />

<!-- prettier-ignore-end -->

<md-live lang="js" code="'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow'" v-bind="{layout: 'bt'}" />

### Highlighting Lines of Code and Adding Filenames

Use.

<!-- prettier-ignore-start -->
markdown

option = {
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
\```

效果：

option = {
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

嵌入圖片

源圖片儲存在 static/images/ 目錄下。

![image description](images/demo.png)

設定圖片高度和寬度

對於當前頁面的臨時樣式，可以直接編寫 HTML。

<img data-src="images/demo.png" style="width: 50px" />

新增示例 Iframe

src 是 https://echarts.apache.tw/examples/en/editor.html?c=line-simple 地址中 ?c= 之後的字串。

使用

<md-example src="doc-example/getting-started" width="100%" height="300"></md-example>

結果

使用

<md-option link="series-bar.itemStyle.color"></md-option>

結果：series-bar.itemStyle.color

更多元件用法

本文件支援使用全域性註冊的 markdown 元件。除了剛才介紹的 md-example 元件外，還有以下元件可用：

md-alert

提示元件

<md-alert type="info">
This is an info alert.
</md-alert>

這是一條資訊提示。

<md-alert type="success">
This is a success alert.
</md-alert>

這是一條成功提示。

<md-alert type="warning">
This is a warning alert.
</md-alert>

這是一條警告提示。

<md-alert type="danger">
This is a danger alert.
</md-alert>

這是一條危險提示。

貢獻者 在 GitHub 上編輯此頁

pissangplainheart