startbootstrap/_layouts/post.html

---
layout: default
---

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>

<!-- Page Content -->
<hr class="custom mt-0 mb-5">
<div class="container">
  <div class="row">
    <div class="col-lg-8">

      <article class="post" itemscope itemtype="https://schema.org/BlogPosting">

        <header>
          <h1 itemprop="name headline">{{ page.title }}</h1>
          <div>
            <i class="fal fa-tag"></i> {{ page.category }}
          </div>
          <hr class="custom">
          <div class="mb-3">
            Posted <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time> by <span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>
          </div>
        </header>

        <div itemprop="articleBody">
          {{ content }}
        </div>

        <div>
          <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://startbootstrap.com{{ page.url }}" data-via="SBootstrap" data-lang="en">Tweet</a>
        </div>
        <div class="fb-share-button" data-href="https://startbootstrap.com{{ page.url }}" data-layout="button" data-size="small">
          <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
        </div>

        <hr class="custom my-4">

        <div class="d-flex align-items-stretch justify-content-between">
          {% if page.previous.url %}
          <a class="btn btn-white border-0 rounded shadow post-pager-link p-0 prev" href="{{ page.previous.url }}">
            <span class="d-flex h-100">
              <span class="bg-primary p-2 d-flex align-items-center text-white">
                <i class="fal fa-arrow-circle-left"></i>
              </span>
              <span class="p-3 d-flex flex-column justify-content-center w-100">
                <div class="indicator mb-1 text-uppercase">Previous Post</div>
                {{ page.previous.title }}
              </span>
            </span>
          </a>
          {% endif %}
          {% if page.next.url %}
          <a class="btn btn-white border-0 rounded shadow post-pager-link p-0 next" href="{{ page.next.url }}">
            <span class="d-flex h-100">
              <span class="p-3 d-flex flex-column justify-content-center w-100">
                <div class="indicator mb-1 text-uppercase">Next Post</div>
                {{ page.next.title }}
              </span>
              <span class="bg-primary p-2 d-flex align-items-center text-white">
                <i class="fal fa-arrow-circle-right"></i>
              </span>
            </span>
          </a>
          {% endif %}
        </div>

        <hr class="custom my-4">

      </article>

      <div class="card border-0 shadow mb-5">
        <div class="card-body d-flex align-items-center">
          <div class="d-none d-md-block mr-4">
            <img class="img-fluid rounded-circle" src="/assets/img/blog/authors/{{ page.author-slug }}.jpg" alt="{{ page.author }}">
          </div>
          <div>
            <h4>{{ page.author }}</h4>
            <p>{{ page.author-desc }}</p>

            <div class="d-flex flex-column flex-md-row">

              {% if page.author-url %}
              <div class="mb-3 mb-md-0 mr-0 mr-md-3 small">
                <a href="{{ page.author-url }}">{{ page.author-url }}</a>
              </div>
              {% endif %}

              {% if page.author-github %}
              <div class="mb-3 mb-md-0 mr-0 mr-md-3 small">
                <i class="fab fa-github text-github"></i> <a href="https://github.com/{{ page.author-github }}">{{ page.author-github }}</a>
              </div>
              {% endif %}

              {% if page.author-twitter %}
              <div class="mb-3 mb-md-0 mr-0 mr-md-3 small">
                <i class="fab fa-twitter text-twitter"></i> <a href="https://twitter.com/{{ page.author-twitter }}">@{{ page.author-twitter }}</a>
              </div>
              {% endif %}

            </div>

          </div>

        </div>
      </div>

      <div class="native-standard"></div>

      {% include disqus.html %}

    </div>

    <div class="col-lg-4">
      <!-- Carbon -->
      <div class="carbon-inverse mb-5 mt-5 mt-lg-0">
        {% include carbon.html %}
      </div>
      <!-- Latests Posts -->
      <div class="card border-0 shadow mb-5 latest-posts">
        <div class="card-header border-0 bg-primary text-white py-3">
          <span class="font-weight-bold small">Latest Posts</span>
        </div>
        <div class="list-group list-group-flush">
          {% for post in site.posts offset: 0 limit: 5 %}
          <a class="list-group-item list-group-item-action" href="{{ post.url }}">
            <h6 class="latest-posts-title mb-1">{{ post.title }}</h6>
            <div class="latest-posts-date">
              {{ page.date | date: "%b %-d, %Y" }}
            </div>
          </a>
          {% endfor %}
        </div>
        <div class="card-body">
          <a class="btn-all btn btn-block btn-primary" href="/articles">View all posts</a>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Script for Carbon Native Test -->
<script>
(function(){
  if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('custom', 'CE7DV2JN', 'placement:startbootstrapcom',
        {
          target: '.native-standard',
          template: `
<a href="##link##" class="native-banner" style="background: linear-gradient(-30deg, ##backgroundColor##E5, ##backgroundColor##E5 45%, ##backgroundColor## 45%) #fff;">
    <div class="native-main">
      <img class="native-img" src="##logo##">
      <div class="native-details" style="color: ##textColor##">
        <span class="native-company">Sponsored by ##company##</span>
        <span class="native-desc">##description##</span>
      </div>
      <span class="native-cta" style="color: ##ctaTextColor##; background-color: ##ctaBackgroundColor##;">##callToAction##</span>
    </div>
  </a>
  <a class="native-via" href="##adViaLink##">Ads via BuySellAds</a>
`,
        }
      );
    }
})();
</script>