index.html

---
layout: default
---
<div class="search-container">
  <input type="search" id="search-input" placeholder="搜索文章…" aria-label="搜索文章" enterkeyhint="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
  <ul id="results-container"></ul>
</div>

<script src="{{ site.baseurl }}/js/simple-jekyll-search.min.js"></script>

<script>
  (function () {
    var input = document.getElementById('search-input');
    var results = document.getElementById('results-container');

    var sjs = new SimpleJekyllSearch({
      searchInput: input,
      resultsContainer: results,
      json: '{{ site.baseurl }}/search.json',
      searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
      noResultsText: '未找到相关文章',
      limit: 10,
      fuzzy: false
    });

    function runSearch() {
      results.innerHTML = '';
      var q = input.value;
      if (q && q.length) {
        sjs.search(q);
      }
    }

    input.addEventListener('search', runSearch);
    input.addEventListener('compositionend', runSearch);
    input.addEventListener('keydown', function (e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        runSearch();
      }
    });
  })();
</script>

{% if site.posts.size == 0 %}
  <h2>No post found</h2>
{% endif %}

<div class="posts">
  {% for post in paginator.posts %}
    <article class="post">
      <h1>
        <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
      </h1>

      <div class="meta">
        <span class="date">
          {{ post.date | date: "%Y-%m-%d" }}
        </span>

        <ul class="tag">
          {% for tag in post.tags %}
          <li>
            <a href="{{ site.baseurl }}/tags#{{ tag }}">
              {{ tag }}
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>

      <div class="entry">
        {{ post.excerpt | strip_html | truncate: 200 }}
      </div>

      <a href="{{ site.baseurl }}{{ post.url }}" class="read-more">阅读全文</a>
    </article>
  {% endfor %}
</div>

<div class="pagination">
  {% if paginator.previous_page %}
    <span class="prev">
      <a href="{{ site.baseurl }}{{ paginator.previous_page_path }}" class="prev">
        ← 上一页
      </a>
    </span>
  {% endif %}
  {% if paginator.next_page %}
    <span class="next">
      <a href="{{ site.baseurl }}{{ paginator.next_page_path }}" class="next">
        下一页 →
      </a>
    </span>
  {% endif %}
</div>