Showcase different tags on the homepage
Thanks to Ghost's Headline theme for the inspiration!
This commit is contained in:
parent
bb48b15bd5
commit
28cf0c81fc
7 changed files with 144 additions and 38 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -913,6 +913,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.post-card-centred {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.single-author-byline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -954,6 +958,10 @@ make sure this only happens on large viewports / desktop-ish devices.
|
|||
border-top: 0;
|
||||
}
|
||||
|
||||
.post-card-large.post-card-centred .post-card-content {
|
||||
grid-column: 1/span 3;
|
||||
}
|
||||
|
||||
.post-card-large:not(.no-image) .post-card-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -999,6 +1007,17 @@ make sure this only happens on large viewports / desktop-ish devices.
|
|||
}
|
||||
}
|
||||
|
||||
/* Special Styling for home page topics (below):
|
||||
|
||||
The home page has several topics, each with its own section, header,
|
||||
and footer. Here, we style the headers and footers.
|
||||
|
||||
*/
|
||||
|
||||
.gh-topic-header {
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
|
||||
|
||||
/* 7. Single Post
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
@ -1763,7 +1782,8 @@ Ghost editor. */
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-content > hr,
|
||||
.gh-inline hr {
|
||||
.gh-inline hr,
|
||||
.home-template hr {
|
||||
border: 0;
|
||||
height: 3rem;
|
||||
display: block;
|
||||
|
|
@ -1774,7 +1794,8 @@ Ghost editor. */
|
|||
}
|
||||
|
||||
.gh-content > hr::after,
|
||||
.gh-inline hr::after {
|
||||
.gh-inline hr::after,
|
||||
.home-template hr::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
81
home.hbs
Normal file
81
home.hbs
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
{{!< default}}
|
||||
{{!-- The tag above means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
|
||||
<div class="site-header-content">
|
||||
{{#if @site.cover_image}}
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||
<img class="site-header-cover"
|
||||
srcset="{{img_url @site.cover_image size="s"}} 300w,
|
||||
{{img_url @site.cover_image size="m"}} 600w,
|
||||
{{img_url @site.cover_image size="l"}} 1000w,
|
||||
{{img_url @site.cover_image size="xl"}} 2000w"
|
||||
sizes="100vw"
|
||||
src="{{img_url @site.cover_image size="xl"}}"
|
||||
alt=""
|
||||
/>
|
||||
{{/if}}
|
||||
<h1 class="site-title">
|
||||
{{#if @site.logo}}
|
||||
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
|
||||
{{else}}
|
||||
{{@site.title}}
|
||||
{{/if}}
|
||||
</h1>
|
||||
<p>{{@site.description}}</p>
|
||||
<a class="header-cta-button" href="#/search">
|
||||
<div>I want to think about...</div>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
{{#unless @member}}
|
||||
<a class="header-cta-secondary" href="#/portal">
|
||||
<p>{{> "icons/email"}} Think about something new every week</p>
|
||||
</a>
|
||||
{{/unless}}
|
||||
</div>
|
||||
|
||||
{{!-- The main content area --}}
|
||||
<main id="site-main" class="site-main outer">
|
||||
<div class="inner posts">
|
||||
|
||||
<section>
|
||||
<header class="gh-topic-header">
|
||||
{{#match pagination.pages ">" 1}}
|
||||
<a href="{{@site.url}}/page/2"><h2>Latest</h2></a>
|
||||
{{else}}
|
||||
<h2>Latest</h2>
|
||||
{{/match}}
|
||||
</header>
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts limit="4"}}
|
||||
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
{{#if @custom.enter_tag_slugs}}
|
||||
{{#get "tags" filter="slug:[{{@custom.enter_tag_slugs}}]"}}
|
||||
{{#foreach tags}}
|
||||
<hr />
|
||||
{{> "topic-grid"}}
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
{{else}}
|
||||
{{#match posts.length ">" 1}}
|
||||
{{#get "tags" include="count.posts" order="count.posts desc" limit="6"}}
|
||||
{{#foreach tags}}
|
||||
<hr />
|
||||
{{> "topic-grid"}}
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
{{/match}}
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
47
index.hbs
47
index.hbs
|
|
@ -2,43 +2,24 @@
|
|||
{{!-- The tag above means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
|
||||
<div class="site-header-content">
|
||||
{{#if @site.cover_image}}
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||
<img class="site-header-cover"
|
||||
srcset="{{img_url @site.cover_image size="s"}} 300w,
|
||||
{{img_url @site.cover_image size="m"}} 600w,
|
||||
{{img_url @site.cover_image size="l"}} 1000w,
|
||||
{{img_url @site.cover_image size="xl"}} 2000w"
|
||||
sizes="100vw"
|
||||
src="{{img_url @site.cover_image size="xl"}}"
|
||||
alt=""
|
||||
/>
|
||||
{{/if}}
|
||||
<h1 class="site-title">
|
||||
{{#if @site.logo}}
|
||||
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
|
||||
{{else}}
|
||||
{{@site.title}}
|
||||
{{/if}}
|
||||
</h1>
|
||||
<p>{{@site.description}}</p>
|
||||
<a class="header-cta-button" href="#/search">
|
||||
<div>I want to think about...</div>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
{{#unless @member}}
|
||||
<a class="header-cta-secondary" href="#/portal">
|
||||
<p>{{> "icons/email"}} Think about something new every week</p>
|
||||
</a>
|
||||
{{/unless}}
|
||||
</div>
|
||||
|
||||
{{!-- The main content area --}}
|
||||
<main id="site-main" class="site-main outer">
|
||||
<div class="inner posts">
|
||||
|
||||
<section class="post-card post-card-large post-card-centred">
|
||||
<div class="post-card-content">
|
||||
<div class="post-card-content-link">
|
||||
<header class="post-card-header">
|
||||
<h2 class="post-card-title">Latest Posts</h2>
|
||||
</header>
|
||||
<div class="gh-banner-button">
|
||||
<a href="{{@site.url}}/">← Back to home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>{{!--/.post-card-content--}}
|
||||
|
||||
</section>
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"name": "weflock",
|
||||
"description": "Snipette theme with Analog vibes, derived from Casper",
|
||||
"demo": "https://snipettemag.com",
|
||||
"version": "1.0.2",
|
||||
"version": "1.1.0",
|
||||
"engines": {
|
||||
"ghost": ">=4.0.0"
|
||||
},
|
||||
|
|
@ -95,6 +95,10 @@
|
|||
"instagram_url": {
|
||||
"type": "text",
|
||||
"default": ""
|
||||
},
|
||||
"enter_tag_slugs": {
|
||||
"type": "text",
|
||||
"group": "homepage"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
19
partials/topic-grid.hbs
Normal file
19
partials/topic-grid.hbs
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<section>
|
||||
<header class="gh-topic-header">
|
||||
<h2>
|
||||
<a href="{{url}}">{{name}}</a>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<div class="post-feed">
|
||||
{{#get "posts" include="tags,authors" filter="tag:{{slug}}" limit="4"}}
|
||||
{{#foreach posts}}
|
||||
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
Loading…
Reference in a new issue