{{> layout/writer_header_hk320}}
{{#detailData}}
<div class="detail">
    <h2 class="share-h2">{{title}}</h2>

    <h3 class="share-h3">{{subTitle}}</h3>

    <div class="author-channel">
        {{# author}}
        <p><a class="detail_author" href="{{link}}" target="_blank">By&nbsp;{{name}}</a></p>
        {{/ author}}
        {{# channel}}<a href="{{link}}">{{name}}</a>&nbsp;|&nbsp;{{/ channel}}
        {{# twoChannel}}<a href="{{link}}">{{name}}</a>&nbsp;|&nbsp;{{/ twoChannel}}
        <span time="{{time}}" class="time-format"></span>
    </div>

    <div class="media">
        {{# coverSwiper}}
        <!--大圖輪播-->
        <div class="detail-banner swiper-container">
            <ul class="swiper-wrapper">
                {{#banner}}
                <li class="swiper-slide">
                    <img class="swiper-lazy" data-src="{{.}}" alt="">
                    <div class="swiper-lazy-preloader"></div>
                </li>
                {{/banner}}
            </ul>
            <div class="detail-switch"></div>
        </div>
        {{/ coverSwiper}}

        {{^ coverSwiper}}
        {{# coverPic}}
        <!--只有一張封面圖-->
        <img src="{{img}}"/>
        {{/ coverPic}}
        {{/ coverSwiper}}


        {{# coverEffect}}
        <!--翻轉、變臉、視頻-->
        {{{html}}}
        {{/ coverEffect}}
    </div>
    <!--內容-->
    <div class="detail-text" cover-url="{{coverUrl}}">
        {{{detailStr}}}
    </div>
</div>
{{/detailData}}

<!--標簽-->
{{# tags}}
<div class="tags">
    <ul>
        {{# tagItem}}
        <li>
            <p><a href="{{link}}" target="_blank">{{name}}</a></p>
        </li>
        {{/ tagItem}}
    </ul>
</div>
{{/ tags}}

<div class="comment">
    <ul class="statslist stats-btn">
        <li class="wow">
            <div class="status-white">
                <span style="right: -24px;"></span>
                <i></i>
            </div>
        </li>
        <li class="zzz">
            <div class="status-white">
                <span style="right: -18px;"></span>
                <i></i>
            </div>
        </li>
        <li class="wtf">
            <div class="status-white">
                <span style="right: -21px;"></span>
                <i></i>
            </div>
        </li>
        <li class="comments">
            <div class="status-white">
                <span class="comment-num" id="comment-num" style="right: -15px;"></span>
                <i style="right: -20px;bottom: 2px;"></i>
            </div>
        </li>
    </ul>
    {{# commentPartials}}
    <div class="comments-box" data-id="{{id}}" data-type="{{type}}" data-c="{{c}}" data-twoc="{{twoc}}"></div>
    {{/ commentPartials}}
</div>


<div class="detail-page">
    <span class="detail-prev">
        <a href="{{prevLink}}" title="{{prevTitle}}" onclick="prevOrNextClickEvent();">上一篇</a>
    </span>
    <span class="detail-next">
        <a href="{{nextLink}}" title="{{nextTitle}}" onclick="prevOrNextClickEvent();">下一篇</a>
    </span>
</div>


<div class="recomment">
    <h2>相關推薦</h2>
    <ul></ul>
</div>

{{> common/comment_publish320}}
{{> common/comment320}}
{{> common/third_login320}}
{{> default/download_hk320}}
{{> default/share320}}
{{> layout/footer_hk320}}

<script id="related-tpl" type="x-tmpl-mustache">
\{{#relatedPost}}
    <li>
        <a href="\{{link}}" target="_blank" onclick="relatedClickEvent();">
            <div class="content-pic">
                <img src="\{{cover}}" alt="" />
                \{{#isVideo}}
                    <span class="video-icon"></span>
                \{{/isVideo}}
            </div>
            <div class="content-text">
                <h2>\{{title}}</h2>
                <h3>\{{subtitle}}</h3>
            </div>
        </a>
    </li>
\{{/relatedPost}}
</script>