请注意,由于古腾堡编辑器的转义,部分样式需要使用HTML模式编辑,具体方式为:
每个区块在处于编辑状态时,其顶部会出现一条工具栏,在左侧最末尾有一个三点(更多),点开可以看到「作为HTML编辑」,在例如使用下方的mark标签时,需要在HTML编辑模式下插入代码。添加完成后,你可以随时回到可视化模式。
下面的样式预览中,括号内的文字为说明。
区块
TigerMaterial 内置了三套我认为在博文中能用到的区块,当然你也可以前往 MDUI 开发文档
直接获取组件后以 HTML 放置在文章中。
使用时,请选择在区块分类中的「TigerMaterial」中寻找,或键入关键词,关键词见下方。


FontAwesome 图标字体
关键字:font
示例
WordPress:
Android:
用法

因为博客大部分地方用的是 MDUI 自带的 Material Icons,但是不排除文章中有些地方可能会用到图标字体,仅靠 Material Icons 肯定无法满足,所以加了这个区块,它会在出现的位置导入核心 CSS 文件。
添加此区块后,自此区块往下的所有区块均可使用 FontAwesome 图标字体。
可扩展面板
关键词:panel
示例
用法
可扩展面板预置两种情况,一种是默认打开第一张面板,一种是面板默认不展开( panel-title
)。所有的文本框均支持 HTML 代码。

很直白吧……应该不用过多解释了。
如果需要连续几个面板连在一起,只需要直接接在一起添加即可,会自动合并到同一组里的。
如果有另外的需求可以参阅 MDUI 开发文档
按钮
关键字:button
示例
用法
按钮预置四种样式,浮动上色按钮,浮动白色按钮,扁平上色按钮,扁平白色按钮,浮动自定义颜色按钮,扁平自定义颜色按钮。
按打开链接情况分为两种,一种是当前页面打开链接,一种是新窗口打开链接(默认)。

如果有另外的需求可以参阅 MDUI 开发文档
复选
关键字:todo
示例
用法
复选预置两种样式,选中和未选中。

如果有另外的需求可以参阅 MDUI 开发文档
样式预览
这是一个链接 (使用古腾堡编辑器默认的链接添加即可)
使用 mark 标签来高亮文本。 (在 HTML编辑模式 下插入<mark>文字</mark>)
这行文本被视为已删除文本。 (在工具栏中「链接」右侧的下三角中可以找到「删除线」)
这行文本是被强势插入的元素。 (在 HTML编辑模式 下插入 <ins> 文字</mark>)
这行文本带有下划线。 ( 在 HTML编辑模式 下插入 <u> 文字</u>,当然你也可以依赖 WordPress 自带的下划线 Ctrl+U)
这行文本字体被缩小了。 (在 HTML编辑模式 下插入 <small> 文字</small>)
这行文本被加粗了。 (在 HTML编辑模式 下插入 <strong> 文字</strong > ,当然你也可以依赖 WordPress 自带的下划线 Ctrl+B )
这段文本是斜体的。 (在 HTML编辑模式 下插入 <em> 文字</em > ,当然你也可以依赖 WordPress 自带的下划线 Ctrl+I )
响应式设计缩写 RWD ( 在 HTML编辑模式 下插入 <abbr title=”悬浮文字”>文字</abbr> )
这行文本包含内联代码 <code>
(选中文本后,点击工具栏中下三角中的「内联代码」即可)
按下 Esc 可以关闭对话框 (在 HTML编辑模式 下插入 <kbd> 文字</kbd>)
y = mx + b (在 HTML编辑模式 下插入 <var>文字<var> )
古腾堡编辑器快捷键
你也可以在古腾堡编辑器上部的这条工具栏,在右侧侧最末尾有一个三点(更多),点开可以看到「键盘快捷键」。
- 将选定的文本加粗。Ctrl+B
- 将选定的文本设为斜体。Ctrl+I
- 将选定的文本转换为链接。Ctrl+K
- 移除链接。Ctrl+Shift+K
- 给选定的文本加下划线。Ctrl+U