index.html

---
layout: default
---

<div class="home">
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    var preferredLanguage = localStorage.getItem('preferredLanguage');

    // 获取所有文章（服务端只输出中文文章，分页是正确的）
    var allPosts = document.querySelectorAll('.home-post-item');

    // 始终显示所有文章，更新内容和链接
    allPosts.forEach(function(post) {
      var zhUrl = post.getAttribute('data-zh-url');
      var enUrl = post.getAttribute('data-en-url');
      var zhTitle = post.getAttribute('data-title');

      if (preferredLanguage === 'en') {
        // 用户偏好英文，检查是否存在对应的英文版本
        fetch(enUrl, { method: 'GET' })
          .then(response => {
            if (response.ok) {
              return response.text();
            } else {
              throw new Error('No English version');
            }
          })
          .then(html => {
            // 从 HTML 中提取英文标题和摘要
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');

            // 提取标题
            let enTitle = zhTitle;
            const titleTag = doc.querySelector('title');
            if (titleTag) {
              enTitle = titleTag.textContent;
            }

            // 提取摘要：找到 #read-more 锚点，只取前面部分
            // Jekyll 在完整页面渲染时会将 <!--more--> 替换为 <a class="anchor" id="read-more"></a>
            let enExcerpt = '';
            const article = doc.querySelector('article');
            if (article) {
              const articleHtml = article.innerHTML;
              // 查找 read-more 锚点
              const moreIndex = articleHtml.indexOf('id="read-more"');
              if (moreIndex > 0) {
                // 找到锚点，取前面部分，但需要找到完整标签结束
                // 找到锚点所在标签的结束 >
                const endTagIndex = articleHtml.indexOf('>', moreIndex);
                enExcerpt = articleHtml.substring(0, endTagIndex + 1);
              } else {
                // 没有找到，使用全部内容
                enExcerpt = article.innerHTML;
              }
            }

            // 更新链接、标题、摘要
            updatePostLink(post, enUrl);
            updatePostTitle(post, enTitle);
            updatePostExcerpt(post, enExcerpt);
          })
          .catch(error => {
            // 英文版本不存在或获取失败，保持中文
            updatePostLink(post, zhUrl);
            updatePostTitle(post, zhTitle);
            // 摘要已经在服务端渲染好了，不需要修改
          });
      } else {
        // 用户偏好中文，保持原样
        updatePostLink(post, zhUrl);
        updatePostTitle(post, zhTitle);
        // 摘要已经在服务端渲染好了，不需要修改
      }

      // 始终显示文章
      post.style.display = 'block';
    });

    function updatePostLink(post, url) {
      var link = post.querySelector('.post-link');
      if (link) {
        link.href = url;
      }
    }

    function updatePostTitle(post, title) {
      var titleTag = post.querySelector('.post-title');
      if (titleTag) {
        var link = titleTag.querySelector('.post-link');
        if (link) {
          link.textContent = title;
        }
      }
    }

    function updatePostExcerpt(post, excerptHtml) {
      var excerptTag = post.querySelector('.post-content');
      if (excerptTag && excerptHtml) {
        // 获取 "Read more" 链接
        const readMoreLink = excerptTag.querySelector('a[href$="#read-more"]');
        // 更新整个 article HTML
        excerptTag.innerHTML = excerptHtml;
        // 如果原文没有 Read more，添加它
        if (readMoreLink && !excerptTag.querySelector('a[href$="#read-more"]')) {
          excerptTag.appendChild(document.createElement('hr'));
          excerptTag.innerHTML += '<p>' + readMoreLink.outerHTML + '</p>';
        }
      }
    }
  });
  </script>
  <div class="post" itemscope itemtype="http://schema.org/BlogPosting" >

    {% for post in paginator.posts %}
      {% unless post.url contains '_en.html' %}
      {% assign zh_url = post.url %}
      {% assign en_url = post.url | replace: '.html', '_en.html' %}

    <div class="home-post-item" data-zh-url="{{ zh_url }}" data-en-url="{{ en_url }}" data-title="{{ post.title }}" data-excerpt="{{ post.excerpt | strip_html }}" data-date="{{ post.date | date: '%Y-%m-%d' }}" data-categories="{{ post.categories | join: ',' }}">
    <header class="post-header">
      <h1 itemprop="name" class="post-title">
        <a itemprop="url" class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
      </h1>
      <meta itemprop="keywords" content="{{ post.tags | join: ',' }}" />
      <p class="post-meta">
      {{ site.locales[site.default_locale].PostedInCategories }}
      {% for cat in post.categories %}
      <a href="{{site.baseurl}}/categories/#{{ cat }}">{{ cat }}</a>&nbsp;
      {% endfor %}
      {% if post.tags != empty %}
      {{ site.locales[site.default_locale].Taggedwith }}
      {% for tag in post.tags %}
      <a href="{{ site.baseurl }}/tags/#{{ tag }}" title="{{ tag }}">{{ tag }} </a>{% unless post.tags.last == tag %}, {% endunless %}
      {% endfor %}
      {% endif %}
      <time itemprop="datePublished" datetime="{{ post.date | date: '%Y-%m-%d' }}">
      {{ site.locales[site.default_locale].PostDate }}{{ post.date | date: "%b %-d, %Y" }}
      </time>
      </p>
    </header>

    <article class="post-content" itemprop="articleBody">
        {{ post.excerpt }}
        {% capture content_words %}
          {{ post.content | number_of_words }}
        {% endcapture %}
        {% capture excerpt_words %}
          {{ post.excerpt | number_of_words }}
        {% endcapture %}

        {% if content_words != excerpt_words  %}
        <p><a href="{{ post.url }}#read-more">Read more</a></p>
        {% endif %}
    </article> <hr />
    </div>
      {% endunless %}
    {% endfor %}

  </div>
  <div class="gcse">
      <!--Google Custom Search-->
      <script>
(function() {
    var cx = '011168927234392293970:6oksmgckzdm';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();
      </script>
      <gcse:search></gcse:search>
      <!-- End Google Custom Search -->
  </div>
</div>