{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">
          {jv:content}
        </div>

        <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>

    </main>

    <aside class="page-aside">
      <div class="side-card">
        <h3 class="side-title">{jv:lang name='related_articles' /}</h3>
        <ul class="side-list">
          {jv:relevarticle loop="5"}
          <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' /}