Smart Page 语法
一般情况下,没有特别需要,无需了解 Smart Page 的语法,因为实际产生的 Smart Page,基本上是可视化操作产生的。
基本规则
当在 Markdown 文档中设定 metdata.app
为 page
的时候,那么文档被访问到的时候,会按照 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}
```
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 模板本身的代码量很少。
功能待开放、文档待补充...