article.html

#include("/static/themes/indigo/layout/layout.html")
#include("/static/themes/indigo/layout/header.html")
#@layout()
#define css()
<link href="/static/themes/indigo/lib/viewerjs/viewer.min.css" rel="stylesheet">
<link href="/static/themes/indigo/lib/highlight/styles/atom-one-dark.css" rel="stylesheet">
<link href="/static/themes/indigo/lib/perfree-comment/perfree-comment.css" rel="stylesheet">
#end
#define content()
    #@header(2)
    <header class="content-header post-header">
        <div class="container fade-scale">
            <h1 class="title">#(article.title ??)</h1>
            <h5 class="subtitle">
                <time datetime="#(article.createTime)" itemprop="datePublished" class="page-time">#date(article.createTime, "yyyy年MM月dd日")</time>
            </h5>
        </div>
    </header>
    <div class="container body-wrap">

        <article id="post-vue-unit-test-start" class="post-article article-type-post fade" itemprop="blogPost">
            <div class="post-card">
                <h1 class="post-card-title">#(article.title ??)</h1>
                <div class="post-meta">
                    <time class="post-time" title='#date(article.createTime, "yyyy年MM月dd日 HH:mm:ss")' datetime="#(article.createTime)" itemprop="datePublished">#date(article.createTime, "yyyy年MM月dd日")</time>
                </div>
                <div class="post-content" id="post-content" itemprop="postContent">
                    #(article.parseContent ??)
                </div>
                #if(option('PERFREE_WECHAT_IMG', 'theme_indigo') && option('PERFREE_ALIPAY_IMG', 'theme_indigo'))
                    <div class="page-reward">
                        <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
                    </div>
                #end

                #if(article.tagList.size() > 0)
                    <div class="post-footer">
                        <ul class="article-tag-list">
                            #for(tag: article.tagList)
                                <li class="article-tag-list-item">
                                    <a class="article-tag-list-link" href="#(tag.url)">#(tag.name)</a>
                                </li>
                            #end
                        </ul>
                    </div>
                #end
            </div>
            <nav class="post-nav flex-row flex-justify-between"  id="commentAnchor">
                #preArticle()
                    #if(preArticle)
                        <div class="waves-block waves-effect prev">
                            <a href="#(preArticle.url)" id="post-prev" class="post-nav-link">
                                <div class="tips">
                                    <i class="icon icon-angle-left icon-lg icon-pr"></i>
                                    Prev
                                </div>
                                <h4 class="title">#(preArticle.title)</h4>
                            </a>
                        </div>
                    #end
                #end

                #nextArticle()
                    #if(nextArticle)
                        <div class="waves-block waves-effect next">
                            <a href="#(nextArticle.url)" id="post-next" class="post-nav-link">
                                <div class="tips">
                                    Next <i class="icon icon-angle-right icon-lg icon-pl"></i>
                                </div>
                                <h4 class="title">#(nextArticle.title)</h4>
                            </a>
                        </div>
                    #end
                #end
            </nav>
            <div class="comments vcomment" id="comments">
                <perfree-comment article-id="#(article.id)" show-comment-list="true" class="perfree-comment"></perfree-comment>
            </div>


        </article>
        <div id="reward" class="page-modal reward-lay">
            <a class="close" href="javascript:;">
                <i class="icon icon-close"></i>
            </a>
            <h3 class="reward-title">
                <i class="icon icon-quote-left"></i>
                请我吃辣条~ <i class="icon icon-quote-right"></i>
            </h3>
            <div class="reward-content">
                <div class="reward-code">
                    <img id="rewardCode" src="#option('PERFREE_WECHAT_IMG', 'theme_indigo')" alt="打赏二维码">
                </div>
                <label class="reward-toggle">
                    <input id="rewardToggle" type="checkbox" class="reward-toggle-check" data-wechat="#option('PERFREE_WECHAT_IMG', 'theme_indigo')" data-alipay="#option('PERFREE_ALIPAY_IMG', 'theme_indigo')">
                    <div class="reward-toggle-ctrol">
                        <span class="reward-toggle-item wechat">微信</span>
                        <span class="reward-toggle-label"></span>
                        <span class="reward-toggle-item alipay">支付宝</span>
                    </div>
                </label>
            </div>
        </div>
    </div>
#end
#define script()
<script src="/static/themes/indigo/lib/viewerjs/viewer.min.js"></script>
<script src="/static/themes/indigo/lib/highlight/highlight.pack.js"></script>
<script src="/static/themes/indigo/lib/perfree-comment/perfree-comment.js"></script>
<script>
    hljs.initHighlightingOnLoad();
    var BLOG = {
        ROOT: "/",
        SHARE: !0,
        REWARD: !0
    };

    const articleContentDetail = document.getElementById('post-content');
    if (articleContentDetail){
        new Viewer(articleContentDetail, {
            url: 'src'
        });
    }
    document.getElementById('menu').classList.add('hide');
</script>
#end