index.html

---
layout: default
---
<p style="font-size: smaller;">如果您有微信，欢迎在微信上关注，订阅和转发。谢谢。</p>
<img src="/images/signature.png" width="60%" >

<div id="d_tags">
  {% assign all_tags = "" | split: "|" %}
  
  {%- for post in site.posts -%}
    {%- assign all_tags = all_tags | concat: post.tags -%}
  {%- endfor -%}
  
  {%- assign unique_tags = all_tags | uniq | sort -%}
    
    {%- for tag in unique_tags -%}
      {%- assign tag_posts = site.posts | where: "tags", tag -%}
      <input type="checkbox" style="margin-right: 5px;" id="{{ tag }}" name="{{ tag }}" value="{{ tag }}" />
      <label for="{{ tag }}" style="font-size: smaller;">{{ tag }} ({{ tag_posts.size }})</label>
    {%- endfor -%}
</div>

<div class="row">
  
    <h2>文章列表(倒序排列，最新的文章在最上面。)</h2>
    <input type="checkbox" id="toggle-switch" checked="checked">
    <label for="toggle-switch">显示繁体</label>

    <p>
      <div class="posts">
        <ol>
        <!-- {% assign sorted = site.posts | sort %} -->

        {%- for post in site.posts -%}
          {%- if post.url contains "zh-tw" -%}
            <!-- do nothing -->
          {%- else -%}
            {%- assign post_name = post.url | replace: '/','' -%}
            <li class="post">
              <ul>
                <li>
                  <img src="/zh-simple.png" width="18px" /> <a href="{{ site.baseurl }}{{ post.url }}" class="read-more" 
                    id="post_title">{{ post.title }}</a>
                  <a href="{{ post.wechat }}" target="_blank" id="wechat_link"><img src="/wechat.ico" width="16px" /></a>
                  <img src="/copy.png" width="16px" id="copy-button" />
                  <br>
                  <span style="font-size:medium;" id="post-desc">{{post.description}}</span>
                  {%- for tag in post.tags -%} 
                  <code style="font-size: smaller;">{{tag}}</code>
                  {%- endfor -%}                  
                </li>  
                {%- comment -%} TODO these code caused a lots of empty lines... {%- endcomment -%}
                {%- for zh_tw_post in site.posts -%}
                  {%- if zh_tw_post.url contains "zh-tw" -%}
                    {%- assign zh_tw_post_name = zh_tw_post.url | replace: '/','' | replace: '_zh-tw','' -%}
                    {%- if zh_tw_post_name == post_name -%}                      
                      <li class="zh-trandition"><img src="/zh-trandition.png" width="18px" /> 
                        <a id="link-tradition" href="{{ site.baseurl }}{{ zh_tw_post.url}}" class="read-more">{{ zh_tw_post.title }}</a><br>
                        <span id="zh-tr-desc" style="font-size:medium;">{{zh_tw_post.description}}</span></li>
                    {%- endif -%}
                  {%- endif -%}
                {%- endfor -%}
              </ul>
            </li>
          {%- endif -%}
        {%- endfor -%}
        </ol>
      </div>
    </p>

  </div>


  <script>
    const contentElements = document.querySelectorAll('.zh-trandition');
    const toggleCheckbox = document.getElementById('toggle-switch');
  
    contentElements.forEach((element, index) => {
        element.style.display = 'block';
    });
  
    toggleCheckbox.addEventListener('change', function() {

      const isChecked = toggleCheckbox.checked;
  
      contentElements.forEach((element) => {
        element.style.display = isChecked ? 'block' : 'none';
      });
    });

    // Get all the copy buttons in the page
    const copyButtons = document.querySelectorAll('#copy-button');

    // Add a click event listener to each copy button
    copyButtons.forEach((button) => {
      button.addEventListener('click', function() {
        // Find the parent <li> element of the clicked button
        const listItem = button.closest('ul');

        // Get the post title text and href
        const postTitle = listItem.querySelector('#post_title').innerText;
        const postHref = listItem.querySelector('#wechat_link').getAttribute('href');
        const postDesc = listItem.querySelector('#post-desc').innerText;
        // const postTrHref = listItem.querySelector('#link-tradition').getAttribute('href');
        // const postTrTitle = listItem.querySelector('#link-tradition').innerText;

        // Attempt to find the element first
        const postTrElement = listItem.querySelector('#link-tradition');
        const postTrDescEle = listItem.querySelector('#zh-tr-desc');

        // Initialize variables to hold your values
        let postTrHref = '';
        let postTrTitle = '';
        let postTrDesc = ''

        // Check if the element exists
        if (postTrElement !== null) {
            // If the element exists, get the attributes
            postTrHref = postTrElement.getAttribute('href');
            postTrTitle = postTrElement.innerText;
            postTrDesc = postTrDescEle.innerText;
        }

        // Create a temporary textarea to hold the text to be copied
        const tempTextarea = document.createElement('textarea');

        if (postTrHref) {
          tempTextarea.value = `【原创】${postTitle}\n${postHref}\n ${postDesc}\n\n【原創】${postTrTitle}\nhttps://yuqianyi1001.github.io${postTrHref}\n${postTrDesc}`;
        } else {
          tempTextarea.value = `【原创】${postTitle}\n${postHref}\n ${postDesc}`;
        }
        
        // Append the textarea to the document
        document.body.appendChild(tempTextarea);
        
        // Select the text in the textarea
        tempTextarea.select();

        // Copy the selected text to the clipboard
        document.execCommand('copy');

        // Remove the temporary textarea from the document
        document.body.removeChild(tempTextarea);

        // Provide user feedback (e.g., change button text)
        button.src = '/success.png';

        // Reset the button after a brief delay (optional)
        setTimeout(function() {
          button.src = '/copy.png';
        }, 1000);
      });
    });

    //////////////////////////////////////////////////////////////////
    // handle tags..... 
    document.addEventListener("DOMContentLoaded", function() {
      const container = document.getElementById('d_tags');

      // Create an array of objects, each containing a label and its associated count
      const items = Array.from(container.querySelectorAll('label')).map(label => {
        const count = parseInt(label.textContent.match(/\((\d+)\)/)[1], 10);
        return { label, count };
      });

      // Sort the array by count, descending
      items.sort((a, b) => b.count - a.count);

      // Re-append labels and their corresponding checkboxes in sorted order
      items.forEach(({ label }) => {
        // Move checkbox related to label
        container.appendChild(label.previousElementSibling);
        // Move label
        container.appendChild(label);
      });


      // handle the tag filter!!!
      const checkboxes = document.querySelectorAll('#d_tags input[type="checkbox"]');

      function updatePostsVisibility() {
        const checkedTags = Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value);
        const posts = document.querySelectorAll('.post');

        if (checkedTags.length > 0) {
          posts.forEach(post => {
            const postTagTexts = Array.from(post.querySelectorAll('code')).map(code => code.textContent.trim());
            const isPostVisible = checkedTags.some(tag => postTagTexts.includes(tag));
            post.classList.toggle('hidden', !isPostVisible);
          });
        } else {
          posts.forEach(post => {
            post.classList.remove('hidden');
          });
        }
      }

      checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updatePostsVisibility);
      });




    });


  </script>