{{include "header.html"}}
{{include "nav.html"}}

{{if .Content}}
<main class="container article-page article-with-sidebar">
  <div class="article-main-layout">
  <article class="article-detail">
    <nav class="inline-breadcrumb">
      <a href="/">首页</a>
      {{range .Nav}}<span>/</span><a href="{{.URL}}">{{.Name}}</a>{{end}}
    </nav>
    <h1>{{.Content.Title}}</h1>
    <div class="article-meta">
      <span>{{.Content.Author}}</span>
      <span>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
      <span>{{.Content.Views}} 次浏览</span>
    </div>
    {{if .Content.Img}}<img class="article-cover" src="{{DefaultCover .Content.Img}}" alt="{{.Content.Title}}">{{end}}
    <p class="article-desc">{{.Content.Description}}</p>
    <div class="prose">{{.Content.Content|Str2Html}}</div>
    {{if .Content.Tags}}
    <div class="tag-cloud article-tags">{{range .Content.Tags}}<a href="{{.URL}}">{{.Name}}</a>{{end}}</div>
    {{end}}
    <div class="prev-next">
      {{if .Prev}}<a href="{{.Prev.URL}}">上一篇：{{.Prev.Title}}</a>{{end}}
      {{if .Next}}<a href="{{.Next.URL}}">下一篇：{{.Next.Title}}</a>{{end}}
    </div>
  </article>
  {{include "guide-sidebar.html"}}
  </div>
  {{$related := Related .Content.Id 3}}
  {{if $related}}
  <section class="related-section">
    <h2>相关阅读</h2>
    <div class="news-grid">
      {{range $related}}
      <a class="news-card" href="{{.URL}}">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}">
        <div><span>{{ParseTime .CreatedAt "2006-01-02"}}</span><h3>{{.Title}}</h3><p>{{StrLimit .Description 76 "..."}}</p></div>
      </a>
      {{end}}
    </div>
  </section>
  {{end}}
</main>
{{end}}

{{include "footer.html"}}
{{include "js.html"}}