You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
3.2 KiB
70 lines
3.2 KiB
extends /layouts/empty.pug
|
|
|
|
block pageContent
|
|
.container.mx-auto.px-4.py-8
|
|
article.max-w-4xl.mx-auto
|
|
header.mb-8
|
|
h1.text-4xl.font-bold.mb-4= article.title
|
|
.flex.flex-wrap.items-center.text-gray-600.mb-4
|
|
span.mr-4
|
|
i.fas.fa-calendar-alt.mr-1
|
|
= new Date(article.published_at).toLocaleDateString()
|
|
span.mr-4
|
|
i.fas.fa-eye.mr-1
|
|
= article.view_count + " 阅读"
|
|
if article.reading_time
|
|
span.mr-4
|
|
i.fas.fa-clock.mr-1
|
|
= article.reading_time + " 分钟阅读"
|
|
if article.category
|
|
a.text-blue-600.mr-4(href=`/articles/category/${article.category}` class="hover:text-blue-800")
|
|
i.fas.fa-folder.mr-1
|
|
= article.category
|
|
if article.status === "draft"
|
|
span(class="ml-2 px-2 py-0.5 text-xs bg-yellow-200 text-yellow-800 rounded align-middle") 未发布
|
|
|
|
if article.tags
|
|
.flex.flex-wrap.gap-2.mb-4
|
|
each tag in article.tags.split(',')
|
|
a.bg-gray-100.text-gray-700.px-3.py-1.rounded-full.text-sm(href=`/articles/tag/${tag.trim()}` class="hover:bg-gray-200")
|
|
i.fas.fa-tag.mr-1
|
|
= tag.trim()
|
|
|
|
if article.featured_image
|
|
.mb-8
|
|
img.w-full.rounded-lg.shadow-lg(src=article.featured_image alt=article.title)
|
|
|
|
.prose.prose-lg.max-w-none.mb-8.markdown-content(class="prose-pre:bg-gray-100 prose-pre:p-4 prose-pre:rounded-lg prose-code:text-blue-600 prose-blockquote:border-l-4 prose-blockquote:border-gray-300 prose-blockquote:pl-4 prose-blockquote:italic prose-img:rounded-lg prose-img:shadow-md")
|
|
!= article.content
|
|
|
|
if article.keywords || article.description
|
|
.bg-gray-50.rounded-lg.p-6.mb-8
|
|
if article.keywords
|
|
.mb-4
|
|
h3.text-lg.font-semibold.mb-2 关键词
|
|
.flex.flex-wrap.gap-2
|
|
each keyword in article.keywords.split(',')
|
|
span.bg-white.px-3.py-1.rounded-full.text-sm= keyword.trim()
|
|
if article.description
|
|
h3.text-lg.font-semibold.mb-2 描述
|
|
p.text-gray-600= article.description
|
|
|
|
if relatedArticles && relatedArticles.length
|
|
section.border-t.pt-8.mt-8
|
|
h2.text-2xl.font-bold.mb-6 相关文章
|
|
.grid.grid-cols-1.gap-6(class="md:grid-cols-2")
|
|
each related in relatedArticles
|
|
.bg-white.shadow-md.rounded-lg.overflow-hidden
|
|
if related.featured_image
|
|
img.w-full.h-48.object-cover(src=related.featured_image alt=related.title)
|
|
.p-6
|
|
h3.text-xl.font-semibold.mb-2
|
|
a(href=`/articles/${related.slug}` class="hover:text-blue-600")= related.title
|
|
if related.excerpt
|
|
p.text-gray-600.text-sm.mb-4= related.excerpt
|
|
.flex.justify-between.items-center.text-sm.text-gray-500
|
|
span
|
|
i.fas.fa-calendar-alt.mr-1
|
|
= new Date(related.published_at).toLocaleDateString()
|
|
if related.category
|
|
a.text-blue-600(href=`/articles/category/${related.category}` class="hover:text-blue-800")= related.category
|
|
|