zenn/ghost.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.28 포스트 상세 헤더 정리

Browse Source
This commit is contained in:
zenn
2026-04-14 11:42:10 +09:00
parent 669f20f14a
commit a845f162ca
10 changed files with 66 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
post.hbs
View File

@@ -3,40 +3,55 @@
{{#post}}
<main class="content-area content-area--post">
<article class="post-article {{post_class}}">
<header class="post-header">
<div class="post-header__inner">
{{#if primary_tag}}
<a class="post-tag" href="{{primary_tag.url}}"{{#if primary_tag.accent_color}} style="--tag-accent: {{primary_tag.accent_color}};"{{/if}}>{{primary_tag.name}}</a>
{{/if}}
<h1 class="post-title">{{title}}</h1>
<div class="post-meta">
<time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
{{#primary_author}}
<span class="meta-divider">/</span>
<span class="meta-item">{{name}}</span>
{{/primary_author}}
{{#if primary_tag}}
<span class="meta-divider">/</span>
<a class="meta-pill" href="{{primary_tag.url}}"{{#if primary_tag.accent_color}} style="--tag-accent: {{primary_tag.accent_color}};"{{/if}}>{{primary_tag.name}}</a>
{{/if}}
<span class="meta-divider">/</span>
<span class="meta-item">{{reading_time}}</span>
<section class="px-4 sm:px-5 mt-6 mb-8">
<div class="max-w-content mx-auto flex flex-col gap-2.5">
<h1 class="font-semibold text-xl sm:text-2xl leading-[1.125]">{{title}}</h1>
<div class="relative border-b border-brd pb-4">
<div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone" data-post-card-info>
<time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
{{#primary_author}}
<span class="opacity-70">/</span>
<a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
{{/primary_author}}
{{#if primary_tag}}
<span class="opacity-70">/</span>
<ul class="flex flex-wrap items-center font-medium" data-post-card-tags>
<li{{#if primary_tag.accent_color}} style="--color-accent: {{primary_tag.accent_color}};"{{/if}}>
<a href="{{primary_tag.url}}" class="bg-accent/10 px-1.5 py-px rounded-sm text-typ hover:bg-accent/5 hover:text-accent">{{primary_tag.name}}</a>
</li>
</ul>
{{/if}}
{{#if comments}}
<span class="opacity-70">/</span>
<a data-post-card-comments class="flex gap-0.5 items-center hover:opacity-75" href="#comments">
<img class="size-3.5 -mt-px pointer-events-none" src="{{asset "icons/chat_bubble.svg"}}" alt="">
<span class="pointer-events-none">{{comment_count empty="0" singular="" plural="" autowrap="false"}}</span>
</a>
{{/if}}
</div>
<button data-post-share-toggle class="absolute bottom-4 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer" type="button" aria-label="Share this post">
<img class="size-4 pointer-events-none" src="{{asset "icons/arrow_outward.svg"}}" alt="">
</button>
</div>
{{#if feature_image}}
<figure class="w-full h-full relative max-w-content mt-2.5">
<img
class="w-full object-cover rounded-theme aspect-[16/9] bg-bgr-tone"
srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w, {{img_url feature_image size="l"}} 1000w"
sizes="(max-width: 767px) 90vw, 720px"
src="{{img_url feature_image size="l"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
>
</figure>
{{/if}}
</div>
{{#if feature_image}}
<figure class="post-feature-image">
<img
srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w, {{img_url feature_image size="l"}} 1000w"
sizes="(max-width: 900px) 100vw, 760px"
src="{{img_url feature_image size="l"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
>
</figure>
{{/if}}
</header>
</section>
<div class="post-body">
<section class="post-content kg-content">
<section class="post-content kg-content ghost-content prose prose-theme">
{{content}}
</section>