You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/06/03 06:36:36 UTC
[echarts-handbook] branch master updated: update guide
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new 80d9f5f update guide
80d9f5f is described below
commit 80d9f5ff7cc25b838f3a7bdc18c25d1494fe56bb
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Jun 3 14:36:20 2021 +0800
update guide
---
components/markdown/Alert.vue | 37 +++++++++++++++--------------
components/markdown/CodeBlock.vue | 3 +--
contents/zh/meta/get-started.md | 50 +++++++++++++++++++++++++++++----------
contents/zh/posts.js | 10 ++++++++
layouts/default.vue | 12 ++--------
nuxt.config.js | 4 +---
6 files changed, 71 insertions(+), 45 deletions(-)
diff --git a/components/markdown/Alert.vue b/components/markdown/Alert.vue
index e49cf87..f94e172 100644
--- a/components/markdown/Alert.vue
+++ b/components/markdown/Alert.vue
@@ -1,5 +1,5 @@
<template>
- <blockquote :class="` alert alert-${type}`">
+ <blockquote :class="`md-alert md-alert-${type}`">
<p>
<slot />
</p>
@@ -23,59 +23,60 @@ export default Vue.extend({
</script>
<style lang="postcss" scoped>
-.alert {
+.md-alert {
@apply rounded-lg;
+ @apply border-l-4;
}
/* Info */
-.alert-info {
+.md-alert-info {
@apply bg-blue-100 border-blue-400;
}
-.alert-info code {
+.md-alert-info code {
@apply bg-blue-200 shadow-none border-0 text-current;
}
-.alert-info .alert-icon {
+.md-alert-info .md-alert-icon {
@apply text-blue-400;
}
-.alert-info .alert-content {
+.md-alert-info .md-alert-content {
@apply text-blue-700;
}
/* Success */
-.alert-success {
+.md-alert-success {
@apply bg-green-100 border-green-400;
}
-.alert-success code {
+.md-alert-success code {
@apply bg-green-200 shadow-none border-0 text-current;
}
-.alert-success .alert-icon {
+.md-alert-success .md-alert-icon {
@apply text-green-400;
}
-.alert-success .alert-content {
+.md-alert-success .md-alert-content {
@apply text-green-700;
}
/* Warning */
-.alert-warning {
+.md-alert-warning {
@apply bg-orange-100 border-orange-400;
}
-.alert-warning code {
+.md-alert-warning code {
@apply bg-orange-200 shadow-none border-0 text-current;
}
-.alert-warning .alert-icon {
+.md-alert-warning .md-alert-icon {
@apply text-orange-400;
}
-.alert-warning .alert-content {
+.md-alert-warning .md-alert-content {
@apply text-orange-700;
}
/* Danger */
-.alert-danger {
+.md-alert-danger {
@apply bg-red-100 border-red-400;
}
-.alert-danger code {
+.md-alert-danger code {
@apply bg-red-200 shadow-none border-0 text-current;
}
-.alert-danger .alert-icon {
+.md-alert-danger .md-alert-icon {
@apply text-red-400;
}
-.alert-danger .alert-content {
+.md-alert-danger .md-alert-content {
@apply text-red-700;
}
</style>
diff --git a/components/markdown/CodeBlock.vue b/components/markdown/CodeBlock.vue
index 0ab12ca..b601c1f 100644
--- a/components/markdown/CodeBlock.vue
+++ b/components/markdown/CodeBlock.vue
@@ -135,7 +135,6 @@ export default defineComponent({
position: absolute;
right: 0;
top: 0;
- color: #f7fafc;
z-index: 10;
font-family: DM Mono, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
@@ -144,7 +143,7 @@ export default defineComponent({
letter-spacing: -0.025em;
line-height: 1;
- @apply mr-4 mb-3;
+ @apply text-blue-gray-400 mr-4 mt-3;
}
.clipboard {
diff --git a/contents/zh/meta/get-started.md b/contents/zh/meta/get-started.md
index d65a8e9..d38445d 100644
--- a/contents/zh/meta/get-started.md
+++ b/contents/zh/meta/get-started.md
@@ -1,4 +1,4 @@
-# 文档编写说明
+# 文档编辑指南
## 新增一个 markdown 文件
@@ -32,6 +32,8 @@ option = {
### 实时预览和编辑
+> 目前只支持对 Option 代码的预览
+
```markdown
```js [live]
option = {
@@ -63,6 +65,7 @@ option = {
### 高亮代码行以及添加文件名
+使用：
```markdown
```js{1,3-5}[option.js]
option = {
@@ -74,6 +77,7 @@ option = {
\```
```
+效果：
```js{1,3-5}[option.js]
option = {
series: [{
@@ -84,7 +88,7 @@ option = {
```
-## 引用图片的方式
+## 引用图片
图片实际存放地址在 `static/images/` 下。
@@ -103,10 +107,14 @@ option = {
## 添加示例 iframe
+`src`为 https://echarts.apache.org/examples/zh/editor.html?c=line-simple 地址中`?c=`后面这一串
+
+使用：
```markdown
<md-example src="doc-example/tutorial-async" width="100%" height="300"></md-example>
```
+效果：
<md-example src="doc-example/tutorial-async" width="100%" height="300"></md-example>
@@ -123,26 +131,37 @@ option = {
<md-alert type="info">
This is an info alert.
</md-alert>
-<md-alert type="success">
-This is an success alert.
-</md-alert>
-<md-alert type="warning">
-This is an warning alert.
-</md-alert>
-<md-alert type="warning">
-This is an danger alert.
-</md-alert>
```
<md-alert type="info">
This is an info alert.
</md-alert>
+
+```markdown
<md-alert type="success">
This is an success alert.
</md-alert>
+```
+<md-alert type="success">
+This is an success alert.
+</md-alert>
+
+```markdown
<md-alert type="warning">
This is an warning alert.
</md-alert>
+```
+
+<md-alert type="warning">
+This is an warning alert.
+</md-alert>
+
+```markdown
+<md-alert type="warning">
+This is an danger alert.
+</md-alert>
+```
+
<md-alert type="danger">
This is an danger alert.
</md-alert>
@@ -152,7 +171,12 @@ This is an danger alert.
实时代码预览组件
-> 不推荐直接使用该组件，应该尽可能使用前面的代码语法
+<md-alert type="danger">
+不推荐直接使用该组件，应该尽可能使用前面的代码语法
+直接使用该组件在 VSCode 中没法进行代码高亮，而且额外的空格可能会破坏 markdown 语法
+</md-alert>
+
+使用：
```markdown
<md-live>
@@ -169,6 +193,8 @@ option = {
</md-live>
```
+效果：
+
<md-live>
option = {
xAxis: {
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 5819c61..cf71824 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -342,5 +342,15 @@ export default [
]
}
]
+ },
+ {
+ title: '编辑本文档',
+ dir: 'meta',
+ children: [
+ {
+ title: '文档编辑指南',
+ dir: 'get-started'
+ }
+ ]
}
]
diff --git a/layouts/default.vue b/layouts/default.vue
index 3911295..8f4d871 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -88,7 +88,7 @@ export default {
h3 {
margin: 30px 0 20px 0;
- font-size: 20px;
+ font-size: 22px;
@apply text-blue-gray-900;
}
@@ -127,7 +127,7 @@ export default {
margin: 15px 0;
padding: 20px 15px;
- @apply bg-blue-100 border-blue-400 rounded-lg;
+ @apply bg-blue-100 border-blue-400 border-l-4 rounded-lg;
code {
@apply bg-blue-200 shadow-none border-0 text-current;
@@ -159,14 +159,6 @@ export default {
font-size: 14px;
}
- /* code {
- padding: 3px 5px;
- font-size: 13px;
- background-color: #eaeeef;
- border-radius: 4px;
- color: #000;
- } */
-
iframe {
border: none;
margin: 10px 0;
diff --git a/nuxt.config.js b/nuxt.config.js
index 97d338b..2d3ac92 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,5 +1,3 @@
-// import enPosts from './contents/en/posts'
-import zhPosts from './contents/zh/posts'
import config from './configs/config'
function escapeHtml(unsafe) {
@@ -40,7 +38,7 @@ export default {
content: {
dir: 'contents',
markdown: {
- tocDepth: 2,
+ tocDepth: 3,
prism: {
theme: 'prism-themes/themes/prism-material-oceanic.css'
},
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org