Skip to content

Latest commit

 

History

History
139 lines (95 loc) · 3.67 KB

fragment.md

File metadata and controls

139 lines (95 loc) · 3.67 KB

fragment

说明

fragment shortcode是本主题排版的核心组件, 通过对内容的横向排版控制可增加更多的自由度.

设计理念: Markdown在横向排版上的渲染能力, 为解决这个痛点，设计并开发了fragment. 它通过 <---> 这个标识符来分割内部markdown文本成独立的渲染单元, 再通过type参数控制fragment整体在页面里的横向宽度和位置. fragment 还通过其他参数丰富排版能力.

配置

参数

mode

定义: string, 控制文字的颜色模式
取值: light/dark/black, 默认为则为取前页面的 themeColor

light, 文字为黑色; dark/black, 文字为白色

type

定义: string, 用于控制控件整体布局
取值: wrap/align-left/align-right/match/normal/safe-full/full, 默认为normal

style

定义: string, 使用html style设置控件的背景样式
取值: text, 默认为空

格式

1.NamedParams模式

{{<fragment mode="light" type="normal" style="#000" wrap=false >}}
    // 内容1
    <--->
    // 内容2
{{/<fragment>}}

2.单参数模式

需要单个参数为: mode

{{<fragment light>}}
    // 内容1
    <--->
    // 内容2
{{/<fragment>}}

3.三参数模式

按位次, 三个参数依次为: mode,type, style

{{<fragment light full "#000">}}
    // 内容
{{/<fragment>}}

示例

type="full"

代码如下

{{< fragment full >}}
<img width="100%" class="nozoom" src="https://www.apple.com.cn/v/iphone-13-pro/a/images/overview/camera/low-light/night_mode_photography_1__benvdg76737m_large_2x.jpg"/>

<--->

{{< center >}}
# 黑夜， <br/>放马过来。

哪怕是昏暗的地方，也照样是 iPhone 13 Pro 的舞台。它的广角摄像头采用更大光圈，以及 iPhone 迄今最大的感光元件，在拍摄夜间模式人像时，还有激光雷达扫描仪这个得力帮手。超广角摄像头也加大了光圈，配备更快的感光元件，并拥有全新的自动对焦功能。此外，长焦摄像头现在也支持夜间模式。
{{< /center >}}

{{< /fragment >}}

type="normal", type="match"

参数type在取值为normal或者match, 效果一致

代码如下

{{< fragment >}}
{{< right >}}
广角摄像头最高提升至
# 2.2 倍<br/>光线捕捉能力
拍照、拍视频更出色
{{< /right >}}
<--->
<img width="100%" src="https://www.apple.com.cn/v/iphone-13-pro/a/images/overview/camera/low-light/night_mode_photography_2__ehwbgu52pjiq_large_2x.jpg"/>

{{< /fragment >}}

type="align-left"

代码如下

{{< fragment align-left >}}
## Left Content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia.

<--->

## Mid Content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter!

<--->

## Right Content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia.
{{< /fragment >}}