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

v0.1.41 theme: 홈/사이드바/추천 모달 동작 정리

Browse Source 
Made-with: Cursor
This commit is contained in:
zenn
2026-04-16 15:39:45 +09:00
parent b380820bb6
commit 4ca64abfa7
16 changed files with 213 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
partials/site/sidebar-left.hbs
View File

@@ -78,7 +78,8 @@
</div>
</section>
<section class="sidebar-card sidebar-card--authors border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ authorsOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { authorsOpen = window.innerWidth >= 1024 })" data-sidebar-authors>
{{!-- 작가 목록 섹션 (주석으로 유지) --}}
{{!-- <section class="sidebar-card sidebar-card--authors border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ authorsOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { authorsOpen = window.innerWidth >= 1024 })" data-sidebar-authors>
<button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="authorsOpen = !authorsOpen" :aria-expanded="authorsOpen.toString()">
<span class="sidebar-card__eyebrow uppercase font-medium text-xs">Authors</span>
<span class="sidebar-card__chevron" aria-hidden="true">
@@ -108,7 +109,7 @@
{{/foreach}}
{{/get}}
</ul>
</section>
</section> --}}
<span class="flex-1"></span>

70
partials/site/sidebar-right.hbs
View File

@@ -47,43 +47,55 @@
<h2 class="uppercase font-medium text-xs text-typ-tone">Follow</h2>
<nav class="relative flex flex-wrap items-center gap-1 text-typ text-sm z-10">
{{!-- {{#if @site.facebook}}<a href="{{social_url type="facebook"}}" class="hover:opacity-75 p-0.5" aria-label="Facebook">f</a>{{/if}} --}}
{{#if @site.twitter}}<a href="{{social_url type="twitter"}}" class="w-5 h-5 hover:opacity-75 p-0.5" aria-label="X">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
</svg>
</a>{{/if}}
{{#if @site.twitter}}
<a href="https://x.com/ghost" class="hover:opacity-75 p-0.5" aria-label="Twitter">
<i class="icon icon-brand-x size-4 stroke-2" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
</svg>
</i><span class="hidden">Twitter</span></a>
{{/if}}
<a href="{{@site.url}}/rss/" class="hover:w-5 h-5 opacity-75 p-0.5" aria-label="RSS">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rss" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="5" cy="19" r="1"></circle>
<path d="M4 4a16 16 0 0 1 16 16"></path>
<path d="M4 11a9 9 0 0 1 9 9"></path>
</svg>
<i class="icon icon-rss size-4 stroke-2" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rss" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="5" cy="19" r="1"></circle>
<path d="M4 4a16 16 0 0 1 16 16"></path>
<path d="M4 11a9 9 0 0 1 9 9"></path>
</svg>
</i>
</a>
</nav>
</section>
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
<div class="flex items-center justify-between gap-2 mb-2">
<h2 class="uppercase font-medium text-xs text-typ-tone">Recommended</h2>
<button class="text-sm font-medium flex items-center gap-1 rounded-btn group bg-bgr text-typ hover:text-typ-tone cursor-pointer gh-portal-close">↗</button>
<h2 class="uppercase font-bold text-xs text-typ-tone">발견하기</h2>
<button data-portal="recommendations" data-portal-title="발견하기" data-portal-description="회원님이 좋아하실 만한 다른 사이트들이에요." class="text-sm font-medium flex items-center gap-1 rounded-btn group bg-bgr text-typ hover:text-typ-tone cursor-pointer gh-portal-close">
<span class="sr-only">모두 보기</span>
<i class="icon icon-arrow-up-right size-4 stroke-2" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
</button>
</div>
<ul class="flex flex-col gap-1 rounded-theme overflow-hidden">
{{#get "posts" filter="featured:true" limit="3" include="tags"}}
{{#foreach posts}}
<li><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">{{title}}</a></li>
{{/foreach}}
{{else}}
<li><a href="{{@site.url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">{{@site.title}}</a></li>
{{/get}}
</ul>
</section>
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-2.5 border-b border-brd">
<p class="text-sm white-space: pre-wrap;">{{@site.title}} is a thoughtfully designed Ghost theme inspired by editorial communities, with flexible settings that let you shape it to your publication.</p>
<a class="button button--accent" href="{{@site.url}}">About {{@site.title}}</a>
{{#match @site.recommendations_enabled}}
{{recommendations limit="4"}}
{{else}}
<ul class="flex flex-col gap-1 rounded-theme overflow-hidden">
<li>
<a href="{{@site.url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">
<h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{@site.title}}</h3>
</a>
</li>
</ul>
{{/match}}
</section>
{{#is "post"}}