
<style>
  .post-meta time{color:#00a7e0}
  @media (max-width:767px){.posts-collapse{margin:0 20px}
  .posts-collapse .post-meta,
  .posts-collapse .post-title{display:block;width:auto;text-align:left}}
  .posts-collapse{position:relative}
  .posts-collapse::after{content:" ";position:absolute;top:20px;left:0;margin-left:-2px;width:4px;height:calc(100% - 35px);background:#f5f5f5;z-index:-1}
  @media (max-width:991px){.posts-collapse{margin:0 20px}}
  .posts-collapse .collection-title{position:relative}
  .posts-collapse .collection-title h1,
  .posts-collapse .collection-title h2{margin-left:20px}
  .posts-collapse .collection-title small{color:#bbb;margin-left:5px}
  .posts-collapse .collection-title::before{content:" ";position:absolute;left:0;top:50%;margin-left:-4px;margin-top:-4px;width:8px;height:8px;background:#bbb;border-radius:50%}
  .posts-collapse .post-header{position:relative;transition-duration:.2s;transition-timing-function:ease-in-out;transition-delay:0s;transition-property:border}
  .posts-collapse .post-header::before{content:" ";position:absolute;left:0;top:12px;width:6px;height:6px;margin-left:-4px;background:#bbb;border-radius:50%;border:1px solid #fff;transition: all .3s ease-in-out}
  .posts-collapse .post-header:hover{border-bottom-color:#666}
  .posts-collapse .post-header:hover::before{background:#222}
  .posts-collapse .post-meta{position:absolute;font-size:12px;left:20px;top:5px}
  .posts-collapse .kr-comments-count{display:none}
  .posts-collapse .post-title{margin-left:70px;font-size:16px;font-weight:400;line-height:inherit}
  .posts-collapse .post-title::after{margin-left:3px;opacity:.6}
  .posts-collapse .post-title a{color:#666;border-bottom:none}
</style>
<% if (page.posts) { %>
  <article>
      <div class="kratos-hentry kratos-page-inner clearfix">
          <header class="kratos-page-header">
            <h1 class="kratos-page-title text-center" itemprop="name headline"><%- __('title.archive') %></h1>
          </header>
          <div class="kratos-page-content kr-archive">
            <div id="archives">
              <div class="post-block archive post" style="margin-left: 2em;">
                <h3 class="archive-page-counter"><%- __('list_page_count_message.archive', site.posts.filter(post => !!post.title).length) %></h3>
                <div class="posts-collapse">
                  <% let year; %>
                  <% page.posts.sort('date', -1).each((post) => { %>
                    <% let post_year = date(post.date, 'YYYY'); %>
                    <% if (post_year !== year && post.title) { %>
                      <!-- 没遇到Title的会被自动忽略年份，即使并不一致 -->
                      <% year = post_year; %>
                      <div class="collection-title">
                        <a href="<%- url_for(config.root + config.archive_dir + '/' + year + '/') %>"><h2 class="archive-year"><%- year %></h2></a>
                      </div>
                    <% } %>
                    <% if (post.title) { %>
                      <article class="post" itemscope itemtype="https://schema.org/Article">
                        <header class="post-header">
                          <h3 class="post-title">
                            <% if (post.link) { %>
                              <a class="post-title-link post-title-link-external" target="_blank" href="<%- url_for(post.link) %>" itemprop="mainEntityOfPage">
                                <span itemprop="name headline"><%- post.title %></span>
                                <i class="fa fa-external-link"></i>
                              </a>
                            <% } else { %>
                                <a class="post-title-link" href="<%- url_for(post.path) %>" itemprop="mainEntityOfPage">
                                  <span itemprop="name headline"><%- post.title %></span>
                                </a>
                            <% } %>
                          </h3>
                          <div class="post-meta">
                            <time class="post-time" itemprop="datePublished"
                                  datetime="<%- date_xml(post.date) %>">
                              <%- date(post.date, 'MM-DD') %>
                            </time>
                          </div>
                        </header>
                      </article>
                    <% } %>
                  <% }) %>
                </div>
              </div>
            </div>
        </div>
      </div>
      <% if (page.total > 1) { %>
        <div class='text-center pagination'>
        <%- paginator({prev_text: '<i class="fa fa-angle-left"></i>', next_text: '<i class="fa fa-angle-right"></i>', escape: false}) %>
        </div>
      <% } %>
  </article>
<% } %>