KeJunMao/jekyll-theme-mdui

{% if site.data.site.lang == null or site.data.site.lang == "" %}
{% assign lang = site.data.lang.en-US %}
{% else %}
{% assign lang = site.data.lang[site.data.site.lang] %}
{% endif %}
<style>
  .k-list-card{
    margin-bottom: 45px;
  }
.k-post-media {
    display:block
    cursor: pointer;
    max-height: 245px;
    min-height: 245px;
    height:245px;
    background-position: 50% 50%;
    background-size: cover;
    background-color: #303033;
}
.k-post-media .mdui-card-primary-title a {
    text-decoration: none;
}
.k-post-categories {
    line-height: 40px;
}
.k-noimg{
  padding-left: 16px;
}
.k-noimg h1::before{
    content: "“";
}
.k-noimg h1::after{
    content: "”";
}
.k-noimg h1:before,.k-noimg h1:after{
    display: block;
    font-size: 80px;
    margin-top: 40px;
}
.k-noimg a,.k-noimg h1{
  text-decoration: none;
  color: white;
}
</style>
    {% for post in paginator.posts %}
    <div class="animated flipInX mdui-card k-list-card mdui-shadow-{{site.data.site.card.card_shadow}} {% if site.data.site.card.card_hoverable == true%}mdui-hoverable{% endif %}">
      {% if post.img == "" or post.img == null %}
      <div class="mdui-card-media mdui-ripple k-post-media mdui-valign k-noimg">
        <h1><a href="{{post.url| prepend: site.baseurl}}">{{post.title}}</a></h3>
      </div>
      {% else %}
      <div class="mdui-card-media mdui-ripple k-post-media lazy" data-original="{{post.img}}">
        <div class="mdui-card-media-covered mdui-card-media-covered-gradient">
          <div class="mdui-card-primary">
            <div class="mdui-card-primary-title"><a class="mdui-text-color-white-text" href="{{post.url| prepend: site.baseurl}}">{{post.title}}</a></div>
          </div>
        </div>
      </div>
      {% endif %}
      {% if post.describe != null %}
      <div class="mdui-card-content mdui-text-color-black-secondary mdui-typo">
        {{post.describe}} <a href="{{post.url | prepend: site.baseurl}}">{{lang.post.continue}}</a>
      </div>
      {% else %}
      <div class="mdui-card-content mdui-text-color-black-secondary mdui-typo">
        {{ post.excerpt | strip_html}} <a href="{{post.url | prepend: site.baseurl}}">{{lang.post.continue}}</a>
      </div>
      {% endif %}
      <div class="mdui-divider"></div>
      <div class="mdui-card-header">
        <div class="mdui-card-menu mdui-typo">
          {% for category in post.categories %}
            <a class="k-post-categories" href="{{ "/category" | prepend: site.baseurl }}/{{category}}.html">{{category}}</a>
          {% endfor %}
        </div>
        {% if site.data.site.many_authors == true %}
        {% if post.author != null %}
        {% assign author = site.data.authors[post.author] %}
        <img class="mdui-card-header-avatar" src="{{author.avatar}}" />
        <div class="mdui-card-header-title">{{author.name}}</div>
        {% else %}
        <img class="mdui-card-header-avatar" src="{{site.data.site.img.avatar}}" />
        <div class="mdui-card-header-title">{{site.author}}</div>
        {% endif %}
        {% else %}
        <img class="mdui-card-header-avatar" src="{{site.data.site.img.avatar}}" />
        <div class="mdui-card-header-title">{{site.author}}</div>
        {% endif %}
        <div class="mdui-card-header-subtitle">{{ post.date | date: "%b %-d, %Y" }}</div>
      </div>
    </div>
    {% endfor %}
    {% include content/component/lazyload.html %}
  <script>
    Array.prototype.forEach.call(document.querySelectorAll(".mdui-card-media"), function(a) {
        var b = a.querySelector("a");
        if (!b) {
            return
        }
        a.addEventListener("click", function() {
            b.click();
        })
    });
  </script>