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

홈: Latest 아래 Categories 섹션 추가 (v0.2.4)

Browse Source 
Made-with: Cursor
This commit is contained in:
zenn
2026-04-17 10:04:27 +09:00
parent 3ba0c7231b
commit 9bc700265d
10 changed files with 84 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

@@ -1670,7 +1670,6 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
justify-content: space-between;
align-items: center;
gap: 12px;
padding-top: 20px;
}
.pagination__link {
@@ -1685,7 +1684,6 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
.pagination--load-more {
justify-content: center;
padding-top: 28px;
}
.pagination__load-more {

2
assets/built/tailwind.css
View File

File diff suppressed because one or more lines are too long

2
docs/deploy.md
View File

@@ -1,7 +1,7 @@
# 배포 가이드
## 현재 버전
- `v0.2.3`
- `v0.2.4`
## Git 기본 설정
- 저장소 작성자 정보는 아래 값으로 통일한다.

3
docs/history.md
View File

@@ -1,5 +1,8 @@
# 의사결정 이력
## 2026-04-17 v0.2.4
참고 사이트(Thred) 홈은 Latest 아래에 태그별로 짧은 설명과 상위 글 제목만 나열하는 Categories 블록이 있다. Ghost에서는 태그·글을 서버에서 한 번에 조합하기 어렵고, 좌측 사이드바와 동일한 노출 순서를 유지해야 하므로, `get tags`로 후보를 렌더한 뒤 기존 `initializeCategoryPriority()`로 slug 우선순위와 최대 10개를 맞추고, 각 태그마다 중첩 `get posts`(filter `tag:slug`, 5개)로 목록만 채우는 partial을 분리해 홈 `post-feed` 하단에 포함하는 방식으로 정리했다.
## 2026-04-16 v0.2.3
태그·작성자 아카이브에 홈과 동일한 `post-feed`(Featured + Latest)를 그대로 넣으면 참고 사이트와 달리 중복 UI가 생긴다. 홈 전용 피드와 아카이브 목록을 분리하기 위해 `post-feed-archive` partial을 두고, 아카이브에서는 글 목록과 페이지네이션만 노출하도록 정리했다.

5
docs/map.md
View File

@@ -1,7 +1,7 @@
# 파일-화면 매핑 가이드
## 현재 버전
- `v0.2.3`
- `v0.2.4`
## 공통 레이아웃
- [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드
@@ -15,7 +15,8 @@
- [home.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/home.hbs): 메인 홈
- [index.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/index.hbs): 기본 목록 진입
- [partials/home/hero.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/home/hero.hbs): 홈 히어로 영역
- [partials/lists/post-feed.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-feed.hbs): 홈 Featured 슬라이드와 Latest 리스트 묶음
- [partials/lists/post-feed.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-feed.hbs): 홈 Featured 슬라이드, Latest 리스트, Categories(태그별 상위 5글) 묶음
- [partials/lists/home-categories.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/home-categories.hbs): 홈 Latest 하단 태그별 최신 글 5개(텍스트 링크·우선순위 목록과 동일 정렬)
- [partials/lists/post-feed-archive.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-feed-archive.hbs): 태그·작성자 아카이브용 글 목록 + Load More(페이지네이션)
- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): Tailwind 기반 리스트형 포스트 카드, 댓글 아이콘, 우측 공유 액션, 메타 정보, 태그 accent 배지

3
docs/spec.md
View File

@@ -1,7 +1,7 @@
# 기술 명세
## 현재 버전
- `v0.2.3`
- `v0.2.4`
## 테마 개요
- Ghost `v5` 대응 커스텀 테마
@@ -29,6 +29,7 @@
- `tags-index.hbs`는 Ghost `routes.yaml` 커스텀 라우트로 `/tags/`에 연결됨
- 로컬 개발 환경의 실제 라우트 설정은 `.docker/ghost/content/settings/routes.yaml`을 기준으로 사용함
- 홈 메인 피드는 히어로, Featured 수평 슬라이드, Latest 리스트 구성을 사용함
- 홈 Latest 블록 아래에는 `home-categories` partial로 태그별 섹션을 두며, 좌측 사이드바와 동일한 `data-category-priority-order`·`data-category-priority-limit`(10)로 정렬·개수 제한 후 태그당 최신 글 5개를 번호 링크로만 표시함
- 태그·작성자 아카이브(`tag.hbs`, `author.hbs`)는 홈과 동일한 `post-feed`를 쓰지 않고, `post-feed-archive`로 글 목록과 페이지네이션만 노출함
- 우측 사이드바 `Recommended` 섹션은 Ghost `recommendations` 데이터를 우선 사용하며, 항목별 외부 링크와 favicon 표시를 지원함
- 포스트 상세 우측 `Read next`는 `primary_tag` 기준 관련 글을 우선 노출하고, 관련 글이 없으면 최신 글(현재 글 제외)로 대체함

8
docs/update.md
View File

@@ -1,5 +1,13 @@
# 업데이트 로그
## v0.2.4 - 2026-04-17
- `package.json` 버전을 `0.2.4`로 증가.
- `partials/lists/home-categories.hbs` 추가: 홈 Latest 아래 Categories 섹션(태그당 최신 글 5개 텍스트 링크, 최대 10태그, `data-category-priority-order` 정렬).
- `partials/lists/post-feed.hbs`에서 Latest 이후 `home-categories` partial 포함.
- `npm run build:tailwind`로 `assets/built/tailwind.css` 재생성.
- `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.4`로 동기화.
- `docs/history.md`에 홈 Categories 섹션 추가(`v0.2.4`) 의사결정 이력 추가.
## v0.2.3 - 2026-04-16
- `package.json` 버전을 `0.2.3`으로 증가.
- `partials/lists/post-feed-archive.hbs` 추가: 태그/작성자 아카이브용 글 목록 + 페이지네이션만(홈용 Featured·Latest 제외).

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ghost-theme-thred-clone",
"version": "0.2.3",
"version": "0.2.4",
"private": true,
"description": "A Ghost theme inspired by the Thred reference layout.",
"keywords": [

63
partials/lists/home-categories.hbs Normal file
View File

@@ -0,0 +1,63 @@
{{!-- 홈 Latest 하단: 태그별 최신 글 5개(텍스트 링크만). 좌측 사이드바와 동일한 data-category-priority-order + 최대 10개 --}}
<section class="px-5 sm:px-6 py-4 mb-8 home-categories" data-home-categories>
<div class="max-w-content mx-auto">
<div class="flex gap-2 items-end justify-between border-b border-brd pb-3">
<h2 class="text-sm uppercase font-medium text-typ-tone">Categories</h2>
</div>
<div data-feed="categories">
{{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
<ul
class="flex flex-col"
data-category-priority-list
data-category-priority-order="tech,business,health,science,design,travel,gaming,music,diy,photography,books"
data-category-priority-limit="10"
>
{{#foreach tags}}
{{#if count.posts}}
<li
class="home-categories__row p-4 pl-5 sm:pl-6 sm:p-5 flex flex-wrap flex-col gap-2 md:flex-row border-b border-b-brd relative before:absolute before:left-0 before:top-0 before:h-full before:w-0.75 before:bg-accent"
data-category-priority-item
data-category-slug="{{slug}}"
style="--color-accent: {{#if accent_color}}{{accent_color}}{{else}}var(--accent){{/if}};"
>
<h2 class="font-medium basis-full leading-tight text-typ">{{name}}</h2>
<div class="flex-2 flex flex-col gap-1.5 border-b border-brd pb-3 mb-2 md:pb-0 md:border-b-0 md:mr-4 md:mb-0 items-start justify-between">
{{#if description}}
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{description}}</p>
{{else}}
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}</p>
{{/if}}
<a href="{{url}}" class="text-sm text-typ-tone font-semibold leading-snug flex items-center gap-1 hover:opacity-75 mt-0.5">
<span>View all</span>
<i class="icon icon-arrow-up-right size-3.5 stroke-2 shrink-0" role="presentation" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M17 7l-10 10"></path>
<path d="M8 7l9 0l0 9"></path>
</svg>
</i>
</a>
</div>
<ol class="flex-3 flex flex-col gap-1.5 text-sm text-typ-tone font-medium list-none">
{{#get "posts" filter=(concat "tag:" slug) limit="5" include="authors,tags" order="published_at desc"}}
{{#foreach posts}}
<li>
<a
href="{{url}}"
data-number="{{@number}}. "
title="{{title}}"
class="line-clamp-1 text-ellipsis before:content-[attr(data-number)] before:font-bold leading-snug hover:opacity-75"
aria-label="{{title}}"
>{{title}}</a>
</li>
{{/foreach}}
{{/get}}
</ol>
</li>
{{/if}}
{{/foreach}}
</ul>
{{/get}}
</div>
</div>
</section>

2
partials/lists/post-feed.hbs
View File

@@ -61,3 +61,5 @@
</div>
</div>
</section>
{{> "lists/home-categories"}}