当我们在文章内引用了一个站内的链接,一般只是超级链接,其实,也可以为这个超级链接提供更好的表现方式。
这是看起来很简单,但确实一个超赞的想法,来自于 Jimmy。效果如下(中间部分,hello 为标题):

refer 处理页面内的链接

官方相关页面:
https://pi.bitcron.com/post/code_demo/refer
https://api.bitcron.com/read/syntax/syntax_block#toc_9 (此页面 orignal_html 少个 i,吭!!!)

进入正题,实际效果如下:

绣春刀2

辛芷蕾 哎哟,好好的破案片,成了儿女情长片。直接2星,想想动作设计、想想还有几个角不错,还......

1、先找个文章里 单独一行 插入内链,如

[brotherhood-of-blades-ii](brotherhood-of-blades-ii)

上面的 url 其实就是 md 文档里设置的 url 内容。

2、post.jade 里添加以下代码:

mixin sub_post_handler(url, original_html, new_line=True)
    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
                    section.post-preview--excerpt
                        span= sub_post.content.limit(words=40, keep_images=False).plain
                    time.post-preview--date= sub_post.date('%Y.%m.%d') + " | " + "%s评" %(sub_post.comments_count or 0) + " | " + "%s度" %(sub_post.visits or 0)
            if sub_post.cover
                bg_url = sub_post.cover.resize(350, 350, fixed=True)
                .post-preview--image(style="background-image:url({{bg_url}})")

article(class=meta): +refer(sub_post_handler)

3、style.scss 相关代码:

.post-preview {
    max-width:780px;
    margin:2em auto;
    position: relative;
    display: flex;
    background: #fff;
    border-radius: 4px;
    box-shadow:0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.25);
    .post-preview--meta {
        width: 100%;padding: 25px;
        .post-preview--middle {line-height: 28px;}
        .post-preview--title {
            font-size: 16px;
            margin: 0;
            a {text-decoration: none;}
        }
        .post-preview--date {font-size: 14px;color: #999;}
        &.with_bg{width: 75%;}
    }
    .post-preview--excerpt {
        font-size: 14px;
        line-height: 1.825;
        p{margin-bottom: 0;}
    }
    .post-preview--image {
        width: 25%;
        float: right;
        background-size: cover;
        background-position: center center;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }
}
@media (max-width: 550px) {
    .post-preview .post-preview--meta .post-preview--excerpt {display: none;}
    .post-preview .post-preview--meta.with_bg {width: 60%;}
    .post-preview .post-preview--image {width: 40%;}
}