v0.1.1 테마 구성 및 레이아웃 수정
This commit is contained in:
11
partials/home/hero.hbs
Normal file
11
partials/home/hero.hbs
Normal file
@@ -0,0 +1,11 @@
|
||||
<section class="hero">
|
||||
<h1 class="hero__title">{{@site.title}} ideas published for meaningful conversation, discussed and shaped by the community</h1>
|
||||
{{#if @site.description}}
|
||||
<p class="hero__description">{{@site.description}}</p>
|
||||
{{/if}}
|
||||
{{subscribe_form
|
||||
placeholder="Your email"
|
||||
button_class="button button--light"
|
||||
form_class="subscribe-form subscribe-form--hero"
|
||||
}}
|
||||
</section>
|
||||
51
partials/home/tabbed-feed.hbs
Normal file
51
partials/home/tabbed-feed.hbs
Normal file
@@ -0,0 +1,51 @@
|
||||
<section class="stack-section" data-tabs>
|
||||
<div class="tab-row" role="tablist" aria-label="Homepage sections">
|
||||
<button class="tab-row__button is-active" type="button" data-tab-trigger="latest">Latest</button>
|
||||
<button class="tab-row__button" type="button" data-tab-trigger="featured">Featured</button>
|
||||
<button class="tab-row__button" type="button" data-tab-trigger="updated">Updated</button>
|
||||
<button class="tab-row__button" type="button" data-tab-trigger="categories">Categories</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel is-active" data-tab-panel="latest">
|
||||
{{> "lists/post-feed"}}
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" data-tab-panel="featured">
|
||||
{{#get "posts" filter="featured:true" limit="8" include="authors,tags"}}
|
||||
{{> "lists/post-items" posts=posts}}
|
||||
{{/get}}
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" data-tab-panel="updated">
|
||||
{{#get "posts" order="updated_at desc" limit="8" include="authors,tags"}}
|
||||
{{> "lists/post-items" posts=posts}}
|
||||
{{/get}}
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" data-tab-panel="categories">
|
||||
<div class="category-overview">
|
||||
{{#get "tags" limit="4" include="count.posts"}}
|
||||
{{#foreach tags}}
|
||||
<section class="category-overview__row">
|
||||
<div>
|
||||
<h2>{{name}}</h2>
|
||||
{{#if description}}
|
||||
<p>{{description}}</p>
|
||||
{{else}}
|
||||
<p>{{plural count.posts empty="No posts yet" singular="% post in this category" plural="% posts in this category"}}</p>
|
||||
{{/if}}
|
||||
<a href="{{url}}">View all ↗</a>
|
||||
</div>
|
||||
<ol>
|
||||
{{#get "posts" filter=(concat "tag:" slug) limit="5"}}
|
||||
{{#foreach posts}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</ol>
|
||||
</section>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
7
partials/lists/post-feed.hbs
Normal file
7
partials/lists/post-feed.hbs
Normal file
@@ -0,0 +1,7 @@
|
||||
{{#if show_filter}}
|
||||
<div class="section-filter">
|
||||
<span>Latest posts</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{> "lists/post-items" posts=posts}}
|
||||
{{pagination}}
|
||||
23
partials/lists/post-items.hbs
Normal file
23
partials/lists/post-items.hbs
Normal file
@@ -0,0 +1,23 @@
|
||||
<div class="post-list">
|
||||
{{#foreach posts}}
|
||||
<article class="post-card">
|
||||
<a class="post-card__media" href="{{url}}">
|
||||
{{#if feature_image}}
|
||||
<img src="{{img_url feature_image size="s"}}" alt="{{title}}">
|
||||
{{else}}
|
||||
<span class="post-card__media-fallback">{{title}}</span>
|
||||
{{/if}}
|
||||
</a>
|
||||
<div class="post-card__content">
|
||||
<h2><a href="{{url}}">{{title}}</a></h2>
|
||||
{{#if excerpt}}<p>{{excerpt words="22"}}</p>{{/if}}
|
||||
<div class="post-card__meta">
|
||||
<time datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
|
||||
{{#primary_author}}<span>{{name}}</span>{{/primary_author}}
|
||||
{{#primary_tag}}<a class="meta-pill" href="{{url}}">{{name}}</a>{{/primary_tag}}
|
||||
{{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
9
partials/pagination.hbs
Normal file
9
partials/pagination.hbs
Normal file
@@ -0,0 +1,9 @@
|
||||
<nav class="pagination" role="navigation">
|
||||
{{#if prev}}
|
||||
<a class="pagination__link" href="{{page_url prev}}">Newer</a>
|
||||
{{/if}}
|
||||
<span class="pagination__status">Page {{page}} of {{pages}}</span>
|
||||
{{#if next}}
|
||||
<a class="pagination__link" href="{{page_url next}}">Older</a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
14
partials/post/post-navigation.hbs
Normal file
14
partials/post/post-navigation.hbs
Normal file
@@ -0,0 +1,14 @@
|
||||
<nav class="post-navigation">
|
||||
{{#prev_post}}
|
||||
<a class="post-navigation__link" href="{{url}}">
|
||||
<small>Previous post</small>
|
||||
<strong>{{title}}</strong>
|
||||
</a>
|
||||
{{/prev_post}}
|
||||
{{#next_post}}
|
||||
<a class="post-navigation__link post-navigation__link--next" href="{{url}}">
|
||||
<small>Next post</small>
|
||||
<strong>{{title}}</strong>
|
||||
</a>
|
||||
{{/next_post}}
|
||||
</nav>
|
||||
118
partials/site/sidebar-left.hbs
Normal file
118
partials/site/sidebar-left.hbs
Normal file
@@ -0,0 +1,118 @@
|
||||
<aside class="sidebar sidebar--left">
|
||||
<div class="sidebar__inner">
|
||||
<a class="brand" href="{{@site.url}}">
|
||||
{{#if @site.logo}}
|
||||
<img class="brand__logo" src="{{@site.logo}}" alt="{{@site.title}}">
|
||||
{{else}}
|
||||
<span class="brand__mark"></span>
|
||||
<span class="brand__name">{{@site.title}}</span>
|
||||
{{/if}}
|
||||
</a>
|
||||
|
||||
<nav class="menu-groups">
|
||||
<section class="menu-group is-open">
|
||||
<button class="menu-group__trigger" type="button" data-accordion>
|
||||
<span>Home pages</span>
|
||||
<span>⌄</span>
|
||||
</button>
|
||||
<div class="menu-group__content">
|
||||
{{navigation}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="menu-group">
|
||||
<button class="menu-group__trigger" type="button" data-accordion>
|
||||
<span>Tags</span>
|
||||
<span>⌄</span>
|
||||
</button>
|
||||
<div class="menu-group__content">
|
||||
<ul class="link-list">
|
||||
{{#get "tags" limit="6" include="count.posts"}}
|
||||
{{#foreach tags}}
|
||||
<li><a href="{{url}}">{{name}}</a></li>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="menu-group">
|
||||
<button class="menu-group__trigger" type="button" data-accordion>
|
||||
<span>Authors</span>
|
||||
<span>⌄</span>
|
||||
</button>
|
||||
<div class="menu-group__content">
|
||||
<ul class="link-list">
|
||||
{{#get "authors" limit="6" include="count.posts"}}
|
||||
{{#foreach authors}}
|
||||
<li><a href="{{url}}">{{name}}</a></li>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="menu-group">
|
||||
<button class="menu-group__trigger" type="button" data-accordion>
|
||||
<span>Members</span>
|
||||
<span>⌄</span>
|
||||
</button>
|
||||
<div class="menu-group__content">
|
||||
<ul class="link-list">
|
||||
<li><a href="#/portal/signup">Sign up</a></li>
|
||||
<li><a href="#/portal/signin">Sign in</a></li>
|
||||
<li><a href="#/portal/account">Account</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
<section class="sidebar-card">
|
||||
<div class="sidebar-card__header">
|
||||
<h2>Categories</h2>
|
||||
</div>
|
||||
<div class="category-grid">
|
||||
{{#get "tags" limit="10" include="count.posts"}}
|
||||
{{#foreach tags}}
|
||||
<a class="category-chip" href="{{url}}">
|
||||
<span class="category-chip__dot"></span>
|
||||
<span>{{name}}</span>
|
||||
<span class="category-chip__count">{{count.posts}}</span>
|
||||
</a>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sidebar-card">
|
||||
<div class="sidebar-card__header">
|
||||
<h2>Authors</h2>
|
||||
</div>
|
||||
<div class="author-list">
|
||||
{{#get "authors" limit="4" include="count.posts"}}
|
||||
{{#foreach authors}}
|
||||
<a class="author-list__item" href="{{url}}">
|
||||
{{#if profile_image}}
|
||||
<img class="avatar" src="{{img_url profile_image size="xxs"}}" alt="{{name}}">
|
||||
{{else}}
|
||||
<span class="avatar avatar--fallback">A</span>
|
||||
{{/if}}
|
||||
<span>
|
||||
<strong>{{name}}</strong>
|
||||
<small>{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}</small>
|
||||
</span>
|
||||
</a>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="sidebar-footer">
|
||||
<a href="{{@custom.footer_primary_url}}">{{@custom.footer_primary_link}}</a>
|
||||
<a href="{{@custom.footer_secondary_url}}">{{@custom.footer_secondary_link}}</a>
|
||||
<a href="{{@custom.footer_tertiary_url}}">{{@custom.footer_tertiary_link}}</a>
|
||||
<a href="{{@custom.footer_quaternary_url}}">{{@custom.footer_quaternary_link}}</a>
|
||||
<button class="icon-button icon-button--plain" type="button" data-theme-toggle aria-label="Toggle theme">◐</button>
|
||||
</footer>
|
||||
</div>
|
||||
</aside>
|
||||
84
partials/site/sidebar-right.hbs
Normal file
84
partials/site/sidebar-right.hbs
Normal file
@@ -0,0 +1,84 @@
|
||||
<aside class="sidebar sidebar--right">
|
||||
<div class="sidebar__inner sidebar__inner--right">
|
||||
{{#if @site.icon}}
|
||||
<img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
|
||||
{{else}}
|
||||
<div class="site-icon site-icon--fallback">T</div>
|
||||
{{/if}}
|
||||
<div class="about-block">
|
||||
<h2>{{@site.title}}</h2>
|
||||
{{#if @site.description}}
|
||||
<p>{{@site.description}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{subscribe_form
|
||||
placeholder="Your email"
|
||||
button_class="button button--subscribe"
|
||||
form_class="subscribe-form"
|
||||
}}
|
||||
|
||||
<section class="sidebar-card sidebar-card--tight">
|
||||
<div class="sidebar-card__header">
|
||||
<h2>Follow</h2>
|
||||
</div>
|
||||
<div class="social-row">
|
||||
{{#if @site.facebook}}<a href="{{social_url type="facebook"}}" aria-label="Facebook">f</a>{{/if}}
|
||||
{{#if @site.twitter}}<a href="{{social_url type="twitter"}}" aria-label="X">x</a>{{/if}}
|
||||
<a href="{{@site.url}}/rss/" aria-label="RSS">rss</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sidebar-card sidebar-card--tight">
|
||||
<div class="sidebar-card__header">
|
||||
<h2>Recommended</h2>
|
||||
</div>
|
||||
<ul class="recommended-list">
|
||||
{{#get "posts" filter="featured:true" limit="3" include="tags"}}
|
||||
{{#foreach posts}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
{{/foreach}}
|
||||
{{else}}
|
||||
<li><a href="{{@site.url}}">{{@site.title}}</a></li>
|
||||
{{/get}}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="sidebar-card sidebar-card--about">
|
||||
<p>{{@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>
|
||||
</section>
|
||||
|
||||
{{#is "post"}}
|
||||
{{#post}}
|
||||
{{#primary_author}}
|
||||
<section class="author-feature">
|
||||
{{#if profile_image}}
|
||||
<img class="avatar avatar--large" src="{{img_url profile_image size="s"}}" alt="{{name}}">
|
||||
{{else}}
|
||||
<div class="avatar avatar--large avatar--fallback">A</div>
|
||||
{{/if}}
|
||||
<div>
|
||||
<h3>{{name}}</h3>
|
||||
{{#if bio}}<p>{{bio}}</p>{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
{{/primary_author}}
|
||||
<section class="sidebar-card sidebar-card--tight">
|
||||
<div class="sidebar-card__header">
|
||||
<h2>Read next</h2>
|
||||
</div>
|
||||
<ul class="recommended-list">
|
||||
{{#get "posts" filter=(concat "id:-" id) limit="4"}}
|
||||
{{#foreach posts}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</ul>
|
||||
</section>
|
||||
{{/post}}
|
||||
{{/is}}
|
||||
|
||||
<footer class="copyright">©{{date format="YYYY"}} {{@site.title}}. Published with Ghost.</footer>
|
||||
</div>
|
||||
</aside>
|
||||
30
partials/site/topbar.hbs
Normal file
30
partials/site/topbar.hbs
Normal file
@@ -0,0 +1,30 @@
|
||||
<header class="topbar">
|
||||
<div class="topbar__search">
|
||||
<button class="search-trigger" type="button" data-search-open aria-label="Open search">
|
||||
<span class="search-trigger__icon">⌕</span>
|
||||
<span>Search</span>
|
||||
<span class="search-shortcut">/</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="topbar__actions">
|
||||
{{#if @member}}
|
||||
<a class="button button--accent" href="#/portal/account">Account</a>
|
||||
{{else}}
|
||||
<a class="button button--accent" href="#/portal/signup">Buy {{@site.title}}</a>
|
||||
{{/if}}
|
||||
<button class="icon-button" type="button" data-theme-toggle aria-label="Toggle theme">◐</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="search-modal" data-search-modal hidden>
|
||||
<div class="search-modal__backdrop" data-search-close></div>
|
||||
<div class="search-modal__panel">
|
||||
<div class="search-modal__input">
|
||||
<button type="button" class="icon-button icon-button--plain" data-search-close aria-label="Close search">×</button>
|
||||
<input type="search" placeholder="Search posts, tags and authors" data-search-input>
|
||||
</div>
|
||||
<div class="search-modal__body" data-search-results>
|
||||
<p class="search-modal__hint">Start typing to filter visible posts, tags, and authors in the current page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user