编辑器操作

[toc]

常规操作

新建页面

1. 直接打开编辑器页面
2. 输入blog name，不应该有空格。多个单词应该用英文减号链接，例如download-wiznote-windows-client。后面不需要填写.html。
3. 输入blog Title。
4. 输入页面内容，内容不能少于100个字符。
5. 保存

编辑页面

1. 直接找到需要编辑的页面
2. 滚动到页面底部，点击Edit this page
3. 进入编辑器，然后编辑。

注意 编辑器页面可能会要求登录。

快捷键

1. ctrl+enter :快速预览（不需要点击预览按钮）
2. ctrl+S: 保存并预览

上传图片（或者其他文件）

• 点击上传按钮，可以选择图片等文件上传。
• 上传后，显示当前图片的链接。复制该链接，粘贴到编辑器里面即可使用。
• 在block里面，通常直接输入图片的链接。
• 在block之外，按照markdown语法添加图片。

系统参数

:::wiz
isWide=true
isLargeHeader=true
:::

isWide=true，表示页面宽度最大为1024。否则为800。通常二级页面，宽度为1024，普通的博客说明页面，宽度为800。 isLargeHeader，表示顶部是否用比较高的header。

block 参数

常规参数

demo

code

:::wiz
title=我是标题
subTitle=我是次级标题
content=我是block正文内容，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长
:::

demo

code

:::wiz
title=我是标题
subTitle=我是次级标题
content=我是block正文内容，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长
textAlign=center
:::

textAlign，可以设定文字对齐方式。left|center|right。

增加图片

demo

我是标题

我是次级标题

我是block正文内容，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长

通过image，可以指定block的主要图片，这个图片通常比较大。可以通过imageWidth=xxx, imageHeight=xxx限制图片大小。也可以不写，则采用默认大小。

• align: 可以选择left或者right，表示图标在block左边还是右边。

code

:::wiz
title=我是标题
subTitle=我是次级标题
content=我是block正文内容，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长，我应该很长很长
image=/static/images/demo/01.jpg
align=left
imageWidth=200
imageHeight=200
:::

增加list

list是block里面的一个功能描述集合。通常一个block会包含多个list 的item。

** list包含的主要参数 **

list1.image=图片地址
list1.title=标题
list1.subTitle=小标题
list1.content=我是内容，我可能比较长，我支持用\n换行\n再换行一次
list1.linkHref=在内容下面显示一个链接，我是链接地址
list1.linkText=在内容下面显示一个链接，我是链接文字
list1.align=vert|hor。图片和文字排列方式。如果是vert，则图片在文字上方。否则图片在文字左边。
list1.style=block 指定list是否采用block方式显示。可以不写。
list1.extraLinkHref=在整个block下面显示一个链接，例如下载页面部分的block
list1.extraLinkText=链接文字
list1.thumbImage=在底部显示一个类似二维码的小图标，鼠标方式去之后，在整个内容区域显示一个大的图片。例如二维码。
list1.detailImage=前面所说的大的图片

注意 list通常有多个item，序号从1开始。分别可以定义list1, list2, list3等等任意多个。

lis demo 1

列表功能

演示block的列表

feature 1

feature 1 sub title

list 1

list 2

list 3

Download

feature 2

feature 2 sub title

list 1

list 2

list 3

Download

list demo1 code

:::wiz
image=/static/images/demo/01.jpg?v=1
imageWidth=240
imageHeight=240
align=left
title=列表功能
subTitle=演示block的列表
textAlign=center

list1.title=feature 1
list1.subTitle=feature 1 sub title
list1.content=list 1\nlist 2\nlist 3
list1.linkHref=//www.wiz.cn/download.html
list1.linkText=Download
list1.image=/favicon.ico
list1.align=vert

list2.title=feature 2
list2.subTitle=feature 2 sub title
list2.content=list 1\nlist 2\nlist 3
list2.linkHref=//www.wiz.cn/download.html
list2.linkText=Download
list2.image=/favicon.ico
list2.align=vert
:::

list demo 2

列表功能

演示block的列表

feature 1

feature 1 sub title

list 1

list 2

list 3

Download

feature 2

feature 2 sub title

list 1

list 2

list 3

Download

list demo 2 code

:::wiz
image=/static/images/demo/02.jpg?v=1
imageWidth=300
align=left
title=列表功能
subTitle=演示block的列表
textAlign=center

list1.title=feature 1
list1.subTitle=feature 1 sub title
list1.content=list 1\nlist 2\nlist 3
list1.linkHref=//www.wiz.cn/download.html
list1.linkText=Download
list1.image=/favicon.ico
list1.imageWidth=32
list1.imageHeight=32
list1.align=hor

list2.title=feature 2
list2.subTitle=feature 2 sub title
list2.content=list 1\nlist 2\nlist 3
list2.linkHref=//www.wiz.cn/download.html
list2.linkText=Download
list2.image=/favicon.ico
list2.imageWidth=32
list2.imageHeight=32
list2.align=hor
:::

list demo 3

桌面客户端
工作中的得力助手

Windows Client

4.11.18

 

适用于Windows XP或者更高

更新日志

Download

Mac Client

4.11.18

 

适用于macOS X 10.10或者更高

更新日志

Download

Linux Client

4.11.18

 

适用于Ubuntu 14.04或者更高

更新日志

Download

Windows 插件

 

 

Markdown、思维导图插件

 

Download

list demo 3 code

:::wiz
title=桌面客户端\n工作中的得力助手
align=center
textAlign=center
list.rootCss=margin: 8px; flex:1; box-sizing: border-box; min-width: 200px;
list.mainCss=background-color: rgb(242, 249, 259); padding: 32px 0; min-height: 240px; flex-direction: column; justify-content: space-around; align-items: center; display: flex; margin-bottom: 16px; width: 100%
list.contentCss=display: flex; flex-direction: column; justify-content: space-around; flex-grow: 1;

list1.content=Windows Client\n4.11.18\n\n适用于Windows XP或者更高
list1.linkHref=/download-windows.html
list1.linkText=更新日志
list1.image=/favicon.ico
list1.align=vert
list1.style=block
list1.extraLinkHref=/download-windows.html
list1.extraLinkText=Download

list2.content=Mac Client\n4.11.18\n\n适用于macOS X 10.10或者更高
list2.linkHref=/download-mac.html
list2.linkText=更新日志
list2.image=/favicon.ico
list2.align=vert
list2.style=block
list2.extraLinkHref=/download-mac.html
list2.extraLinkText=Download

list3.content=Linux Client\n4.11.18\n\n适用于Ubuntu 14.04或者更高
list3.linkHref=/download-linux.html
list3.linkText=更新日志
list3.image=/favicon.ico
list3.align=vert
list3.style=block
list3.extraLinkHref=/download-linux.html
list3.extraLinkText=Download

list4.content=Windows 插件\n\n\nMarkdown、思维导图插件
list4.linkHref=javascript:void();
list4.linkText= 
list4.image=/favicon.ico
list4.align=vert
list4.style=block
list4.extraLinkHref=http://app.wiz.cn
list4.extraLinkText=Download

:::

list demo 4

资料、数据、文档
拿在手里，离线查看

Android客户端

7.0.6

 

iPhone客户端

7.0.6

 

iPad客户端

7.0.6

 

list demo 4 code

:::wiz
title=资料、数据、文档\n拿在手里，离线查看
textAlign=center
image=/static/images/demo/01.jpg?v=1
imageWidth=300
align=left

list1.content=Android客户端\n7.0.6\n
list1.image=/favicon.ico
list1.align=vert
list1.thumbImage=/wp-content/new-uploads/6de94360-c48c-11e9-8ead-45d8a1abfb00.png
list1.detailImage=/static/images/wechat_contact.png

list2.content=iPhone客户端\n7.0.6\n
list2.image=/favicon.ico
list2.align=vert
list2.thumbImage=/wp-content/new-uploads/6de94360-c48c-11e9-8ead-45d8a1abfb00.png
list2.detailImage=/static/images/wechat_contact.png


list3.content=iPad客户端\n7.0.6\n
list3.image=/favicon.ico
list3.align=vert
list3.thumbImage=/wp-content/new-uploads/6de94360-c48c-11e9-8ead-45d8a1abfb00.png
list3.detailImage=/static/images/wechat_contact.png

:::