{jv:include file='header.html' /}

<nav class="crumb" aria-label="{jv:lang name='main_nav' /}">
  <div class="container">
    <a href="{jv:url}">{jv:lang name='home' /}</a><span class="sep">/</span>
    <a href="{jv:typeurl}">{jv:typename}</a><span class="sep">/</span>
    <span class="cur">{jv:title}</span>
  </div>
</nav>

<div class="container">
  <div class="page-layout">
    <main class="page-main">

      <article class="doc-wrap">
        <header class="doc-head">
          <h1 class="doc-title">{jv:title}</h1>
          <div class="doc-meta">
            <span>{jv:lang name='author' /}：{jv:author}</span>
            <span>{jv:lang name='doc_published_at' /} {jv:add_time|MyDate='Y-m-d',###}</span>
            <span>{jv:lang name='read_count' /} {jv:arcclick}</span>
            <span>{jv:lang name='doc_column' /}：<a href="{jv:typeurl}">{jv:typename}</a></span>
          </div>
        </header>

        {jv:if condition='(litpic!="")'}
        <img class="doc-cover" src="{jv:litpic}" alt="{jv:title}">
        {/jv:if}

        <div class="doc-body">
          <p>{jv:description}</p>
          {jv:content}
        </div>

        {jv:if condition='(is_paid==1)'}
        {jv:if condition='(has_paid==0)'}
        <div class="pay-mask">
          <div class="pay-card">
            <div class="pay-info">
              <b>{jv:lang name='mall_currency' /}{jv:price}</b>
              <span>{jv:lang name='pay_once_forever' /}</span>
            </div>
            {jv:action_button}
          </div>
        </div>
        {/jv:if}
        {/jv:if}

        <div class="doc-tags">
          {jv:tagcloud num="8"}
          <a href="{jv:link}">{jv:tag}</a>
          {/jv:tagcloud}
        </div>

        <nav class="doc-nav">
          {jv:beafter get='pre'}
          <a href="{jv:arcurl}">
            <span class="nav-label">{jv:lang name='previous' /}</span>
            <span class="nav-title">{jv:title}</span>
          </a>
          {jv:else /}
          <span class="nav-label">{jv:lang name='no_previous' /}</span>
          {/jv:beafter}
          {jv:beafter get='next'}
          <a href="{jv:arcurl}" class="next">
            <span class="nav-label">{jv:lang name='next' /}</span>
            <span class="nav-title">{jv:title}</span>
          </a>
          {jv:else /}
          <span class="nav-label">{jv:lang name='no_next' /}</span>
          {/jv:beafter}
        </nav>
      </article>

      <div class="dl-related">
        <div class="block-head">
          <h2 class="block-title">{jv:lang name='related_products' /}</h2>
        </div>
        <div class="download-grid">
          {jv:relevarticle loop="4"}
          <a class="card card-v" href="{jv:arcurl}">
            <img class="card-img" src="{jv:litpic}" alt="{jv:title}">
            <div class="card-body">
              <h3 class="card-title">{jv:title}</h3>
              <div class="card-foot">
                {jv:if condition='(is_paid==1)'}
                <span class="dl-price">{jv:lang name='mall_currency' /}{jv:price}</span>
                {jv:else /}
                <span class="dl-price dl-free">{jv:lang name='free' /}</span>
                {/jv:if}
              </div>
            </div>
          </a>
          {/jv:relevarticle}
        </div>
      </div>

    </main>

    <aside class="page-aside">
      <div class="side-card">
        <h3 class="side-title">{jv:lang name='related_products' /}</h3>
        <ul class="side-list">
          {jv:relevarticle loop="5" orderby="click"}
          <li><span class="rank r{jv:autoindex}">{jv:autoindex}</span><a href="{jv:arcurl}">{jv:title}</a></li>
          {/jv:relevarticle}
        </ul>
      </div>

      <div class="side-card">
        <h3 class="side-title">{jv:lang name='side_hot_tags' /}</h3>
        <div class="tag-cloud">
          {jv:tagcloud num="10"}
          <a href="{jv:link}">{jv:tag}</a>
          {/jv:tagcloud}
        </div>
      </div>

      <div class="side-ad">
        <h4>{jv:lang name='side_vip_title' /}</h4>
        <p>{jv:lang name='side_vip_desc' /}</p>
        <a class="btn btn-primary" href="{jv:url}user/register">{jv:lang name='side_vip_btn' /}</a>
      </div>
    </aside>
  </div>
</div>

{jv:include file='footer.html' /}