{{if .Content}}
<div class="reading-detail">
  <nav class="breadcrumbs" aria-label="面包屑"><a href="{{page_url ""}}">首页</a><span>/</span>{{with Column "news"}}<a href="{{.URL}}">资讯动态</a><span>/</span>{{end}}<a href="{{.Content.ColumnURL}}">{{.Content.ColumnName}}</a></nav>
  <div class="reading-detail-layout">
    <article class="reading-article"><header class="reading-article-head"><span class="reading-kicker">{{.Content.ColumnName}} / 小芽阅读</span><h1>{{.Content.Title}}</h1>{{with .Content.Description}}<p class="reading-deck">{{.}}</p>{{end}}<div class="reading-byline"><span>小芽童装 · 选购与日常</span><time datetime="{{date "2006-01-02" .Content.CreatedAt}}">{{date "2006-01-02" .Content.CreatedAt}}</time></div></header>
      {{if .ContentLocked}}<p class="notice">此内容受密码保护，请通过站点内容解锁入口查看。</p>{{else}}{{with .Content.Img}}<figure class="reading-cover"><img src="{{.}}" alt="" loading="lazy"></figure>{{end}}<div class="rich-text reading-prose">{{.Content.Content | Str2Html}}</div><p class="reading-disclaimer">选购与洗护请以实际商品的成分、尺码和洗涤标签为准。</p>{{end}}
      <nav class="reading-return" aria-label="返回资讯"><a href="{{.Content.ColumnURL}}">← 返回{{.Content.ColumnName}}</a>{{with Column "news"}}<a href="{{.URL}}">全部资讯 →</a>{{end}}</nav>
    </article>
    <aside class="reading-aside"><section class="reading-aside-box"><span class="reading-kicker">A LITTLE HELP</span><h2>选衣，从了解开始</h2><p>量好身高，比较成衣尺寸，再结合孩子的活动习惯选择。</p>{{with Column "size-guide"}}<a href="{{.URL}}">查看选码指南 ↗</a>{{end}}</section><section class="reading-aside-topics"><h2>探索其他专题</h2>{{range ChildrenColumns "news"}}<a href="{{.URL}}">{{.Name}} <span aria-hidden="true">↗</span></a>{{end}}</section></aside>
  </div>
  {{if not .ContentLocked}}
    {{with index .Content.Ext "related_ids"}}{{$items := ContentsByIds .}}{{if $items}}<section class="reading-related" aria-labelledby="reading-related-title"><div class="reading-section-head"><div><span class="reading-kicker">KEEP READING</span><h2 id="reading-related-title">接着读一读</h2></div><p>把关心的问题再了解多一点。</p></div><div class="reading-related-grid">{{range $items}}<article class="reading-related-card">{{if .Img}}<a class="reading-related-image" href="{{.URL}}" tabindex="-1" aria-hidden="true"><img src="{{.Img}}" alt="" loading="lazy"></a>{{end}}<div><span class="reading-kicker">{{.ColumnName}}</span><h3><a href="{{.URL}}">{{.Title}}</a></h3>{{with .Description}}<p>{{.}}</p>{{end}}<a class="reading-card-link" href="{{.URL}}" aria-label="阅读：{{.Title}}">阅读全文 ↗</a></div></article>{{end}}</div></section>{{end}}{{end}}
    {{with index .Content.Ext "product_ids"}}{{$items := ContentsByIds .}}{{if $items}}<section class="reading-related reading-product-section" aria-labelledby="reading-products-title"><div class="reading-section-head"><div><span class="reading-kicker">LOOK CLOSER</span><h2 id="reading-products-title">相关童装示例</h2></div><p>对照商品详情了解尺码和面料，商品资料为演示。</p></div><div class="reading-product-grid">{{range $items}}<a class="reading-product" href="{{.URL}}">{{if .Img}}<img src="{{.Img}}" alt="" loading="lazy">{{end}}<span><small>{{.ColumnName}}</small><strong>{{.Title}}</strong><b>¥{{printf "%.0f" .Price}}</b></span><span aria-hidden="true">↗</span></a>{{end}}</div></section>{{end}}{{end}}
  {{end}}
</div>
{{else}}<div class="empty-state"><h1>内容暂不可用</h1><a href="{{page_url ""}}">返回首页</a></div>{{end}}