Smart Page 语法

一般情况下,没有特别需要,无需了解 Smart Page 的语法,因为实际产生的 Smart Page,基本上是可视化操作产生的。

基本规则

当在 Markdown 文档中设定 metdata.apppage的时候,那么文档被访问到的时候,会按照 Smart Page 的形式进行渲染。
Markdown 文档会被// key类似的行分割成很多个 Layout,每个 Layout 的内容都会由当前 Layout 的类型进行特别的界面渲染。 Layout 可以是一个,也可以是很多个。
比如一篇 index.md 为名 (将会视为网站的首页) 的文档,内容如下:

---
title: 极简.单页
app: page
date: 2016-07-27 21:49:12
---
// cover(layout="rl")
## Bitcron
Just a Markdown post, find it's source in FileManager.
[Home](/)
[FileManger](/service/files_manager)
![](/fb_static/unsplash/me.png)

Layout 声明类型匹配

如下所示,单独一行,以//开始,空格,然后是类型名 (cover),由此可以声明 这是一个 Layout

// cover
正式内容

如果这个类型匹配有特别的属性可以支持,则是如下形式:

// cover(layout="lr")
正式内容

进行 Layout 的 css 定制

每个类型都会最终渲染成一个 HTML 的片段,本身都有指定的 css 样式,但有时候,我们需要根据不同页面的实际情况,会有微调的需要,这时就需要进行局部的 css 定制,从而覆盖默认提供的样式规则。当然,这对前端 HTML/CSS 的基础能力要求比较高。
在每个 Layout 的开始时,使用代码块的语法,并且声明代码语言为 css。

大抵语法如下:
// cover
```css
p {line-height: 3.5 !important}
```

注意: 此时,需要注意这部分的 css 规则,由于实际的 css selector 优先级问题,未必会生效,此时的 !import 这种强优先级的标识就会很有用。

Simple List 的萃取规则

Simple List 是指 Smart Page 会尝试从连续的文本片段中获取一个可以形成 key: value (一行作为一个单位) 类似结构的对象列表。
这是 Smart Page 非常重要的基础逻辑,数据结构接近自然语义,同时,底层的技术逻辑又能完全理解其结构,从而方便渲染完成各种形式的界面。

一般 key、value 以 : 分割,如果是时间间隔类似的,会尝试以第一个空格作为分割,如果两者模糊的,则已::两个连续的冒号形成分割。如果当前行末尾是以 @xx @xxx类似结尾的,则会作为附属的一段信息存在。比如下文示例的每一行都是符合 Simple List 的萃取规则的。

中文: 内容
15:20-16:00 白话.技术
16:10-17:00 自由问答 @more @hello
17:00::  合影结束,自助餐时间

Layouts

仅针对几个 Layout 说明其接收的参数、使用方法,并不做详细展开。因为实际情况是可视化的操作,并不需要特别记住这些规则。

cover

接受参数: layout

  • lr: 从左到右布局
  • rl: 从右到左布局
  • full: 适合单页无其它内容
  • 默认

当 layout 为lr/rl两者之一的时候,可以指定max_links (最多显示几个链接,默认为3,超出之后会自动合并到一个浮动层点击弹出);more_links_label.

// cover(layout="lr", more_links_label="Download")
## MarkEditor
令人惊艳,文本的力量。
![ http://7xkyp2.media1.z0.glb.clouddn.com/MarkEditor2.mp4](https://ob7metl6c.qnssl.com/covers/markeditor@2x.png)
[Pro版¥128](/buy?app=markeditor&default_type=pro)
[基础版¥58](/buy?app=markeditor)
[下载Mac版](/download/markeditor?platform=mac)
[下载Win版64位](/download/markeditor?platform=win&bit=64)
[下载Win版32位](/download/markeditor?platform=win&bit=32)

event

可以形成一个界面非常友好的日程安排。但需要注意,除了标题之外,后续的内容必须完全符合 Simple List 的语法,否则是无法渲染任何内容的!

// event
## 简单的日程
13:00-13:20 签到
13:20-13:30 FarBoxer的介绍
13:30-14:10 未曾见的特性
14:20-15:00 FarBox的一些实际应用
15:00-15:20 茶歇、互动
15:20-16:00 白话.技术
16:10-17:00 自由问答
17:00::  合影结束,自助餐时间
// event
## 日程附人员说明
13:00-13:20  签到
13:20-13:30  PyCon大会及活动组织方介绍 @who
13:30-14:10  Idiomatic Python  @施远敏 @诺基亚通信的资深技术专家,软件研发教练
14:20-15:00  Python在FarBox的实际应用  @HepoChen @FarBox的创始人,流浪在代码一线的产品经理
15:00-15:20  茶歇、互动
15:20-16:00  Gevent简介  @令狐虫 @上海期货信息技术资深软件工程师,BT群核心成员, g4pcc发起人
16:10-16:30  Python与LLVM  @李 枫 @在手机相关研发领域已有近11年工作经验,先后在摩托罗拉,三星等IT企业工作,现就职于阿里巴巴
16:30-17:00  话题空缺
17:00::  合影结束

timeline

会自动形成一个时间线的视觉界面。必须全部是 Simple List 的语法。

// timeline
## Work and Education
Dec 2012 to Now:  Product Leader @Z.R.E.Y Co., LTD.
Nov 2011 to Dec 2012: Chief Architecture @Funny Co., LTD.
Jul 2007 to Nov 2011: UED Leader @BAE
Dec 2003 to Jun 2007: MBA @No.1 School of the Earth

score

最终会自动形成一个按照百分比决定长度的色块。仅接受一个参数score, 默认为10 (可以理解为最高分)。必须全部是 Simple List 的语法。

// score
## Technical Experience
Python: 9
Coffee: 7
Lua: 6
Linux: 6

markdown

没有特别的界面重构,仅仅是作为 Markdown 渲染后的内容进行呈现。

layout

此类型尚未完善,主要用途是一种更简洁、偷懒的方式绘制界面。
文档,待补充...

自定义与扩展

yes! 你可以自己定义一个如上的一个布局,采用普通的模板语法即可。系统默认提供的几个 layout 模板本身的代码量很少。

功能待开放、文档待补充...