Custom Ghost theme for my blog, based on Casper https://www.geber.ga
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
2.1KB

  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">
  6. <div class="outer site-nav-main">
  7. <div class="inner">
  8. {{> "site-nav"}}
  9. </div>
  10. </div>
  11. </header>
  12. {{!-- Everything inside the #post tags pulls data from the post --}}
  13. {{#post}}
  14. <main id="site-main" class="site-main outer">
  15. <div class="inner">
  16. <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
  17. <header class="post-full-header">
  18. <h1 class="post-full-title">{{title}}</h1>
  19. </header>
  20. {{#if feature_image}}
  21. <figure class="post-full-image">
  22. {{!-- This is a responsive image, it loads different sizes depending on device
  23. https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
  24. <img
  25. srcset="{{img_url feature_image size="s"}} 300w,
  26. {{img_url feature_image size="m"}} 600w,
  27. {{img_url feature_image size="l"}} 1000w,
  28. {{img_url feature_image size="xl"}} 2000w"
  29. sizes="(max-width: 800px) 400px,
  30. (max-width: 1170px) 1170px,
  31. 2000px"
  32. src="{{img_url feature_image size="xl"}}"
  33. alt="{{title}}"
  34. />
  35. </figure>
  36. {{/if}}
  37. <section class="post-full-content">
  38. <div class="post-content">
  39. {{content}}
  40. </div>
  41. </section>
  42. </article>
  43. </div>
  44. </main>
  45. {{/post}}
  46. {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
  47. {{#contentFor "scripts"}}
  48. <script>
  49. $(function() {
  50. var $postContent = $(".post-full-content");
  51. $postContent.fitVids();
  52. });
  53. </script>
  54. {{/contentFor}}