分栏tab

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  1. Unique name :
  • 选项卡块标签的唯一名称，不带逗号。
  • 将在#id中用作每个标签及其索引号的前缀。
  • 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
  • 仅当前帖子/页面的URL必须是唯一的！
  1. [index]:
  • 活动选项卡的索引号。
  • 如果未指定，将选择第一个标签（1）。
  • 如果index为-1，则不会选择任何选项卡。
  • 可选参数。
  1. [Tab caption]:
  • 当前选项卡的标题。
  • 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
  • 如果未指定标题，但指定了图标，则标题将为空。
  • 可选参数。
  1. [@icon]：
  • FontAwesome图标名称（全名，看起来像“ fas fa-font”）
  • 可以指定带空格或不带空格；
  • 例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
  • 可选参数。

This is Tab 1.

This is Tab 2.

This is Tab 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

md中注释隐藏内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#### 基于 HTML 标签的注释

<!-- 这是一段被注释掉的文字 -->

这是一段没有被注释的文字

#### 基于 HTML 样式

<div style="display:none">
这是一段被注释掉的文字
</div>

这是一段没有被注释的文字
#### 通过 Markdown 解析达到注释效果

[//]: (这是一段被注释掉的文字)

这是一段没有被注释的文字
  1. 第一种不会被渲染，但只能是文字值，注释掉语法内容时需要加“”
  2. 第二种会被渲染，但可以隐藏语法内容
  3. 第三种只是简单的文字隐藏

基于 HTML 标签的注释

这是一段没有被注释的文字

1
2
3
4
5
 <div style="display:none">
带语法的段落
</div>

<!--"带语法的段落"-->

md中注释隐藏内容实例（可在源码中查看）

气泡注释 bubble

1
{% bubble [content] , [notation] ,[background-color] %}

content: 注释词汇
notation: 悬停显示的注解内容
background-color: 可选，气泡背景色。默认为“#71a4e3”

最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}</span>，flex布局Flex 是 Flexible Box 的缩写，意为弹性布局”，用来为盒状模型提供最大的灵活性”</span>，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。</span>，animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋</span>写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。</span>属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

关于bubble注释的测试 不同博客设置的效果不一样有的显示不出</span>

1
最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %}，{% bubble flex布局,"Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性","#ec5830" %}，{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %}，animation的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋","#de4489" %}写法，还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。