扩展语法块 (重要)

扩展语法主要是对某些代码片段进行包裹而产生的。
基本的语法类似:

+xxx(*args, **kwargs)
    for post in posts
        h2= post.title

page

作用: 对内部产生的内容，可以实现滚动自动翻页载入。
接受参数: <as_ul=False, callback=''>，如果 as_ul = True, 则最外部的 DOM 元素是 ul，反之则是div; callback 是一个字符串类型，表示一个 Javascript 的函数名，为翻页载入成功后的回调函数。
代码示例:

+posts.set_min_per_page(6)
+page(as_ul=True)
    for post in posts: li.post
        span.date= post.date('%Y-%m-%d %H:%M')
        .content.markdown= post.content

注意: 除了传入callback参数之外，也可以在页面 Javascript 中提供一个全局的函数，名为 auto_load_page_callback，效果也是一样的。

font

作用: 对内容产生的内容，自动萃取一个足够呈现字体的 webfont 子集(woff 格式)
接受参数: <path, name="", title_path="", title_name"">
参数说明:

path: 字体名称(如果是系统内置的)或者自己网站内指定的字体文件名
name: 一般建议为空，作为新的字体名称，为空的时候，系统会自动生成一个
title_path: 同 path，但是针对标题的(DOM 元素必须以title_with_font为 class)
title_name: 同 name, 但是针对标题的。

代码示例:

+font("花园明朝")
    p 茶则作为汉族茶具的一种，在唐代已经有了名分。

注意事项:

这会产生必要的缓存文件，而占用额外的存储空间
字体萃取会消耗比较多额外的计算资源，这部分会另行计费
可能会由于账户限制，本接口不可被调用
如果使用自己定义的字体，请确保字体授权没有问题；因为此产生授权的问题可能会对你在本平台上的账户产生影响
由于技术原因，不是所有字体类型都能否支持，一般建议使用.ttf格式；如果字体无法萃取子集，并不是我们能够处理的问题。

browser

作用: 仅仅在指定的浏览器下，内部包含的代码才会起作用
参数: <family, version=None>
说明: family表示浏览器名称，比如safari，一般不区分大小写。如果family以@开头，则表示严格匹配(大小写敏感)。version 一般无需指定，如果指定了，则 version 也要完全对应。
代码示例(仅在 Safari 系列浏览器中生效的样式):

+browser('safari')
    style(type="text/css")
        .homepage_body .posts_in_home .cjk_punctuation, .post .caption .cjk_punctuation{ margin-left: 13px; }

create_dom

用于创建 HTML 的 DOM 元素，接收参数tag，content，其它的参数，比如class， id等会作为DOM 元素的属性处理。
有两种调用方式。

// 直接调用
+create_dom('div', content="hello")

// 内嵌子 HTML
+create_dom('div', class="hello")
    p Hello World

footer

这个主要是针对模板设计师起作用的。在footer调用后，如果使用者没有自己的footer.md作为替换，则默认产生的底部区域。

+footer()
    span © 2016
    a(href='/', real="nofollow")= site.title
    span.line= 'Powered by '
        a(rel="nofollow", target="_blank", href="https://bitcron.com/?s=f")= 'Bitcron'
        . Theme by
        a(rel="nofollow", target="_blank", href="http://chopstack.com") cho

pure

这是对Pure Grids 的集成，可以比较快速地构建自适应设备宽度的页面。
如果调用时，不添加任何参数，会生成div.pure-g，添加参数的，则会生成div.pure-u-x-x此类的Dom元素。
调用参数形似+pure(pure-u, pure-u-sm, pure-u-md, pure-u-lg, pure-u-xl)，并不需要同时具备，可以按需，不接受 +pure(pure-u=xx)的形式，仅仅接受+pure(xx)形式。
其中具体的赋值，可以是[1-24]的整数，也可以是小余1的小数，也可以是分数，比如1/3；如果是小数，会折合为24*小数的最终值。
比如说1/3的效果等同于0.3333，也等同于8。意思为宽度为总宽度的三分之一。

如果pure-u, pure-u-sm, pure-u-md, pure-u-lg, pure-u-xl 5个全部赋值，近似的效果如下:
pure-u: 相当于 phone 竖屏
pure-u-sm: 相当于 phone 横屏
pure-u-md: 相当于pad 竖屏
pure-u-lg: 相当于pad 横屏 & 电脑普通桌面
pure-u-xl: 电脑桌面分辨率较高情况下，width>=1280px

示例 (这是一个自适应的页面，phone上保持1/2的总宽度，ipad上或者普通桌面时是1/3，特别宽的时候，1/4):

+pure
    +pure(0.5, 0.5, 0.3333, 0.3333, 0.25)
        p hello world

modal

可以在模态窗口(黑色遮罩的弹窗)内呈现内容。

方式1: 作为一个链接，打开某个URL；
调用方式: +modal(title, url=xxxx), title 是超级链接呈现的内容，点击的时候，会打开url对应的网址。

方式2: 语法块，显示其内部的内容
调用方式: +modal(trigger), trigger是一个css的seletor，比如.class_name，如果本身不包含.或者#，则自动添加#。
示例:

+modal("the_click_button")
    p hello world
    p other things.

如果trigger触发的是一个class或者dom ID，并且这个DOM对象上有:
1， data-value 这个属性值，则 modal 显示的时候，会有全局的一个 Javascript 变量 current_modal_click_button_value；
2， data-value2 这个属性值，则对应 current_modal_click_button_value2
3， data-value3 这个属性值，则对应 current_modal_click_button_value3

如果有一个全局的 Javascript 函数，名为after_modal_display的，则在 modal 窗口显示的时候，则会调用这个函数，并传递两个参数<click_dom>(点击的按钮元素), <modal_dom>(模态窗口的内容元素)。

tab

作用: 可以构建一个Tabs的HTML区域。
接受参数: keys, active=1, keys 相当于Tabs每个的标题，list类型；active为整数，表示当前哪个Tab位于激活状态，默认为1，即第一个Tab默认激活。
源码示例:

+tab(["Hello", "World", "Bitcron"], active=2)
    #tab
        p this is tab1
    #tab
        p this is tab2
    #tab
        p this is tab3

实际效果:

Hello
World
Bitcron

this is tab1

this is tab2

this is tab3

注意: 每个Tab的代码片段内，必须以单独一行#tab作为开始的包裹。

resize_images

可以将其包裹的内部最终HTML内出现的图片，自动缩放尺寸。
接受参数: width=None, height=None, fixed=False, quality=86。
注意，不是每个参数都是必要，但必须是width=xx，而不是是xx直接的赋值。resize_images(width=1000) 是有效的，而resize_images(1000)是无法识别的。

参考源代码:

+resize_images(width=None, height=None, fixed=False, quality=86)
    div= other_block_code

refer

作用: 对内部最终渲染的HTML，自动查找A元素（超级链接），由一个handler进一步处理。
接收的参数： handler (一个mixin构建的函数)，refer_type(默认为link, 也可以为image)
handler 接收的参数： <url, original_html, new_line>, url 是指超级链接对应的链接，original_html表示（超级链接）原始的html代码, new_line是一个True/False，如果是True，则表示，这个超级链接是单独的一行HTML代码，不包括其它内容。
参考源代码：

mixin sub_post_handler(url, orignal_html, new_line=False)
    if not new_line
        {{original_html}}
    else
        sub_post = d.get_doc(url=url)
        if not sub_post
            {{original_html}}
         else
              h2= sub_post.title
              
+refer(sub_post_handler)
    h1.post_title= post.title
    .content= post.content

更多参考...

slider

作用: 生成一个轮播的 slider 界面。
接受参数:
folder: 默认值为 None，表示一个文件夹的路径，可作为轮播的数据来源；
doc_type: 默认为 image, 也可以指定为 post，表示 folder 路径下的数据源类型；
height: 字符串类型，slider 最终的高度，默认为 500px，比如也可以设置为 100vh (全屏高度)；
autoplay: True or False, 默认为 True，表示是否自动轮播；
show_arrows: True or False, 默认为 True，表示是否显示 slider 左右两侧的箭头图标；
animation: 字符串类型，horizontal(默认值，表示左右滚动)， vertical(表示上下滚动)， fade(表示渐隐吉渐显)，其中一种；
show_image_title: True of False, 默认为 False，表示如果 slider 的单个元素为图片类型，是否要显示图标的标题；

slider 这个函数除了可以直接调用外，也可以作为一个语法块被使用，比如:

+slider(autoplay=True)
    for item in items
        .item_content= item.content
        .slider_end

注意: slider作为语法块使用的时候，务必保证其内部代码是一个 (类似) for 循环，以及每次循环最后一行为 .slider_end, 这个是 slider 最终分割 HTML 代码的重要依据!

page
font
browser
create_dom
footer
pure
modal
tab
resize_images
refer
slider