Hide hightlight/magazine header until there are enough posts

This commit is contained in:
Sodbileg Gansukh 2023-08-08 23:42:11 +08:00
parent d64ced927f
commit 824cd6c02d
6 changed files with 109 additions and 81 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1143,6 +1143,9 @@ Search LOGO Login Subscribe
align-items: center; align-items: center;
gap: 24px; gap: 24px;
padding-top: 100px; padding-top: 100px;
}
.gh-header + .gh-cta .gh-cta-inner {
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
} }

View File

@ -0,0 +1,75 @@
<section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}}{{#if @custom.use_publication_cover_as_background}}{{#if @site.cover_image}} has-image{{/if}}{{/if}} gh-outer">
{{!-- Background image --}}
{{#if @custom.use_publication_cover_as_background}}
{{#match headerStyle "!=" "Magazine"}}
{{#match headerStyle "!=" "Highlight"}}
{{#if @site.cover_image}}
<img class="gh-header-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
{{/match}}
{{/match}}
{{/if}}
<div class="gh-header-inner gh-inner">
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}}
<div class="gh-header-left">
{{#foreach posts limit="4"}}
{{> "post-card"}}
{{/foreach}}
</div>
<div class="gh-header-right">
{{#if @custom.show_featured}}
{{> "components/featured" showFeatured=@custom.show_featured limit=6}}
{{else}}
<div class="gh-featured-feed">
{{#foreach posts from="5" limit="6"}}
{{> "post-card"}}
{{/foreach}}
</div>
{{/if}}
</div>
{{/match}}
{{!-- Magazine layout --}}
{{#match headerStyle "Magazine"}}
{{#foreach posts limit="7"}}
{{#match @number 2}}
<div class="gh-header-left">
{{/match}}
{{#match @number 5}}
<div class="gh-header-right">
{{/match}}
{{> "post-card"}}
{{#match @number 4}}
</div>
{{/match}}
{{#match @number 7}}
</div>
{{/match}}
{{/foreach}}
{{/match}}
{{!-- Landing layout --}}
{{#match headerStyle "Landing"}}
<h1 class="gh-header-title is-title">{{@site.description}}</h1>
<form class="gh-header-form">
<input class="gh-header-input" type="email" placeholder="jamie@example.com">
<button class="gh-button" type="submit">Subscribe</button>
</form>
{{/match}}
{{!-- Search layout --}}
{{#match headerStyle "Search"}}
<h1 class="gh-header-title is-title">{{@site.description}}</h1>
<form class="gh-header-form">
{{> "icons/search"}}
<button class="gh-header-input" data-ghost-search>Search posts, tags and authors</button>
</form>
{{/match}}
</div>
</section>

View File

@ -1,77 +1,15 @@
{{#match headerStyle "!=" "Off"}} {{#match headerStyle "!=" "Off"}}
<section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}}{{#if @custom.use_publication_cover_as_background}}{{#if @site.cover_image}} has-image{{/if}}{{/if}} gh-outer">
{{!-- Background image --}}
{{#if @custom.use_publication_cover_as_background}}
{{#match headerStyle "!=" "Magazine"}}
{{#match headerStyle "!=" "Highlight"}}
{{#if @site.cover_image}}
<img class="gh-header-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
{{/match}}
{{/match}}
{{/if}}
<div class="gh-header-inner gh-inner">
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}} {{#match headerStyle "Highlight"}}
<div class="gh-header-left"> {{#match posts.length ">=" 10}}
{{#foreach posts limit="4"}} {{> "components/header-content"}}
{{> "post-card"}} {{/match}}
{{/foreach}} {{else match headerStyle "Magazine"}}
</div> {{#match posts.length ">=" 7}}
<div class="gh-header-right"> {{> "components/header-content"}}
{{#if @custom.show_featured}} {{/match}}
{{> "components/featured" showFeatured=@custom.show_featured limit=6}}
{{else}} {{else}}
<div class="gh-featured-feed"> {{> "components/header-content"}}
{{#foreach posts from="5" limit="6"}}
{{> "post-card"}}
{{/foreach}}
</div>
{{/if}}
</div>
{{/match}} {{/match}}
{{!-- Magazine layout --}}
{{#match headerStyle "Magazine"}}
{{#foreach posts limit="7"}}
{{#match @number 2}}
<div class="gh-header-left">
{{/match}}
{{#match @number 5}}
<div class="gh-header-right">
{{/match}}
{{> "post-card"}}
{{#match @number 4}}
</div>
{{/match}}
{{#match @number 7}}
</div>
{{/match}}
{{/foreach}}
{{/match}}
{{!-- Landing layout --}}
{{#match headerStyle "Landing"}}
<h1 class="gh-header-title is-title">{{@site.description}}</h1>
<form class="gh-header-form">
<input class="gh-header-input" type="email" placeholder="jamie@example.com">
<button class="gh-button" type="submit">Subscribe</button>
</form>
{{/match}}
{{!-- Search layout --}}
{{#match headerStyle "Search"}}
<h1 class="gh-header-title is-title">{{@site.description}}</h1>
<form class="gh-header-form">
{{> "icons/search"}}
<button class="gh-header-input" data-ghost-search>Search posts, tags and authors</button>
</form>
{{/match}}
</div>
</section>
{{/match}} {{/match}}

View File

@ -6,10 +6,17 @@
<main class="gh-main"> <main class="gh-main">
<div class="gh-feed"> <div class="gh-feed">
{{#match @custom.header_style "Highlight"}} {{#match @custom.header_style "Highlight"}}
{{#match posts.length ">=" 10}}
{{#foreach posts from="11" limit="9"}} {{#foreach posts from="11" limit="9"}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
{{else}}
{{#foreach posts limit="9"}}
{{> "post-card"}}
{{/foreach}}
{{/match}}
{{else match @custom.header_style "Magazine"}} {{else match @custom.header_style "Magazine"}}
{{#match posts.length ">=" 7}}
{{#foreach posts from="8" limit="9"}} {{#foreach posts from="8" limit="9"}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
@ -18,6 +25,11 @@
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
{{/match}} {{/match}}
{{else}}
{{#foreach posts limit="9"}}
{{> "post-card"}}
{{/foreach}}
{{/match}}
</div> </div>
</main> </main>