Custom Ghost theme for my blog, based on Casper https://www.geber.ga
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

200 lines
8.5 KiB

  1. {{!< default}}
  2. {{!-- The tag above means: insert everything in this file
  3. into the {body} of the default.hbs template --}}
  4. {{!-- The big featured header, it uses blog cover image as a BG if available --}}
  5. <header class="site-header outer">
  6. <div class="inner">
  7. <nav class="site-nav">
  8. <div class="site-nav-left">
  9. {{#if @blog.logo}}
  10. <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
  11. {{/if}}
  12. {{#if @blog.navigation}}
  13. {{!-- The blog navigation links from /ghost/settings/design --}}
  14. {{navigation}}
  15. {{/if}}
  16. </div>
  17. <div class="site-nav-right">
  18. <div class="social-links">
  19. {{#if @blog.facebook}}
  20. <a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
  21. {{/if}}
  22. {{#if @blog.twitter}}
  23. <a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
  24. {{/if}}
  25. </div>
  26. {{#if @labs.subscribers}}
  27. <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
  28. {{else}}
  29. <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
  30. {{/if}}
  31. </div>
  32. </nav>
  33. </div>
  34. </header>
  35. {{!-- Everything inside the #post tags pulls data from the post --}}
  36. {{#post}}
  37. {{> floating-header}}
  38. <main id="site-main" class="site-main outer" role="main">
  39. <div class="inner">
  40. <article class="post-full {{post_class}}">
  41. <header class="post-full-header">
  42. <section class="post-full-meta">
  43. <time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
  44. {{#if tags}}
  45. <span class="date-divider">/</span> <a href="{{tags.[0].slug}}">{{tags.[0].name}}</a>
  46. {{/if}}
  47. </section>
  48. <h1 class="post-full-title">{{title}}</h1>
  49. </header>
  50. {{#if feature_image}}
  51. <figure class="post-full-image" style="background-image: url({{feature_image}})">
  52. </figure>
  53. {{/if}}
  54. <section class="post-full-content">
  55. {{content}}
  56. </section>
  57. {{!-- Email subscribe form at the bottom of the page --}}
  58. {{#if @labs.subscribers}}
  59. <section class="subscribe-form">
  60. <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
  61. <p>Get the latest posts delivered right to your inbox</p>
  62. {{subscribe_form placeholder="youremail@example.com"}}
  63. </section>
  64. {{/if}}
  65. <footer class="post-full-footer">
  66. {{!-- Everything inside the #author tags pulls data from the author --}}
  67. <section class="author-card">
  68. {{#author}}
  69. {{#if profile_image}}
  70. <figure class="author-card-image">
  71. <a class="img" href="{{url}}" style="background-image: url({{profile_image}})"><span class="hidden">{{name}}'s Picture</span></a>
  72. </figure>
  73. {{/if}}
  74. <section class="author-card-content">
  75. <h4><a href="{{url}}">{{name}}</a></h4>
  76. {{#if bio}}
  77. <p>{{bio}}</p>
  78. {{else}}
  79. <p>Read <a href="{{url}}">more posts</a> by this author.</p>
  80. {{/if}}
  81. <div class="author-card-meta">
  82. {{#if location}}<span class="author-card-location">{{location}}</span>{{/if}}
  83. {{#if website}}<span class="author-card-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
  84. </div>
  85. </section>
  86. {{/author}}
  87. </section>
  88. <section class="share">
  89. <h4>Share this post</h4>
  90. <a class="icon-twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&amp;url={{url absolute="true"}}"
  91. onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
  92. <span class="hidden">Twitter</span>
  93. </a>
  94. <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
  95. onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
  96. <span class="hidden">Facebook</span>
  97. </a>
  98. </section>
  99. </footer>
  100. </article>
  101. </div>
  102. </main>
  103. {{!-- Links to Previous/Next posts --}}
  104. <aside class="read-next outer">
  105. <div class="inner">
  106. <div class="read-next-feed">
  107. {{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
  108. <article class="read-next-card read-next-card {{post_class}}"{{#if ../tags.[0].feature_image}} style="background-image: url({{../tags.[0].feature_image}})"{{/if}}>
  109. <header class="read-next-card-header">
  110. <h3 class="read-next-card-header-title">Read more posts like this</h3>
  111. </header>
  112. <div class="read-next-card-content">
  113. <ol>
  114. {{#foreach posts}}
  115. <li><a href="{{url}}">{{title}}</a></li>
  116. {{/foreach}}
  117. </ol>
  118. </div>
  119. </article>
  120. {{/get}}
  121. {{#next_post}}
  122. <article class="post-card {{post_class}}">
  123. {{#if feature_image}}
  124. <a class="post-card-image-link" href="{{url}}">
  125. <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
  126. </a>
  127. {{/if}}
  128. <div class="post-card-content">
  129. <a class="post-card-content-link" href="{{url}}">
  130. <header class="post-card-header">
  131. <h2 class="post-card-title">{{title}}</h2>
  132. </header>
  133. <section class="post-card-excerpt">
  134. <p>{{excerpt words="28"}}</p>
  135. </section>
  136. </a>
  137. <footer class="post-card-meta">
  138. {{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
  139. {{author}}
  140. {{tags prefix=" on "}}
  141. <time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
  142. </footer>
  143. </div>
  144. </article>
  145. {{/next_post}}
  146. {{#prev_post}}
  147. <article class="post-card {{post_class}}">
  148. {{#if feature_image}}
  149. <a class="post-card-image-link" href="{{url}}">
  150. <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
  151. </a>
  152. {{/if}}
  153. <div class="post-card-content">
  154. <a class="post-card-content-link" href="{{url}}">
  155. <header class="post-card-header">
  156. <h2 class="post-card-title">{{title}}</h2>
  157. </header>
  158. <section class="post-card-excerpt">
  159. <p>{{excerpt words="28"}}</p>
  160. </section>
  161. </a>
  162. <footer class="post-card-meta">
  163. {{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
  164. {{author}}
  165. {{tags prefix=" on "}}
  166. <time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
  167. </footer>
  168. </div>
  169. </article>
  170. {{/prev_post}}
  171. </div>
  172. </div>
  173. </aside>
  174. {{/post}}