编辑器使用说明

3周前

编辑器操作

[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

我是标题
我是次级标题
我是block正文内容,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长

code

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

demo

我是标题
我是次级标题
我是block正文内容,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长,我应该很长很长

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

:::