巧用 refer 处理页内元素
refer 是什么？
refer 是指 Bitcron 语法中，一个块级的语法。
它可以提取其内部的超级链接、图片元素，并进一步局部重新构造 HTML 片段。
听起来比较复杂？ 了解 refer 的文档，然后参照下面的几个代码示例，依样画葫芦就好了。
refer 处理页面内的链接
当我们在文章内引用了一个站内的链接，一般只是超级链接，其实，也可以为这个超级链接提供更好的表现方式。
这是看起来很简单，但确实一个超赞的想法，来自于 Jimmy。效果如下(中间部分，hello 为标题):
参考代码: (注意，这个代码并不会让页面变成如上截图，因为最终需要样式文件的配合，这个代码片段来自于模板 Casper， 你可以从 Bitcron 上直接获取。)
mixin sub_post_handler(url, original_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: .post-preview.clearfix
preview_meta_class = "with_bg post-preview--meta" if sub_post.cover else 'without_bg post-preview--meta'
div(class=preview_meta_class)
.post-preview--middle
h4.post-preview--title
a(href=sub_post.url)= sub_post.title
time.post-preview--date= sub_post.date('%Y/%m/%d')
section.post-preview--excerpt
span= sub_post.content.limit(words=20, keep_images=False).plain
if sub_post.cover
bg_url = sub_post.cover.resize(350, 350, fixed=True)
.post-preview--image(style="background-image:url({{bg_url}})")
block content
main.content(role='main'): +refer(sub_post_handler)
article.post
header.post-header
h1.post-title= post.title
section.post-meta
time.date.post-date= post.date.format('%B %d, %Y')
section.post-content.markdown= post.content
footer.post-footer
figure.author-image
a.img(href='/', style="background-image:url({{site.avatar}})")
+post.comments_as_html()
refer 处理页面内的图片
跟处理链接的方式类似，比如文章内的图片，默认都是无法点击在弹窗内浏览的。
我们可以通过下面类似的代码，通过 refer 来调用 sub_image_handler， sub_image_handler 本身则非常简单，一个 h.js_view 就可以了。
mixin sub_image_handler(url, original_html)
+h.js_view(url)
.post_page
.post: +refer(sub_image_handler, refer_type='image')
header.post_meta
date.post-date= post.date.format('%B %d, %Y')
h1.post_title= post.title
section.post_content.markdown= post.content
注意!
.post: +refer(sub_image_handler, refer_type='image')
header.post_meta
等同于:
.post
+refer(sub_image_handler, refer_type='image')
header.post_meta
refer 作为块级语法，必须 + 开头， 内部要被它处理的，必须缩进于其后，作为它的子内容。
Comments