{{ define "main" }} {{ if eq .Type "blog" }} {{ if not .Params.menu }}
<h1>{{ .Title }}</h1>
{{ end }} {{ end }}

<article class="h-entry">
    <h1 class="post-title p-name"><a href="{{ .RelPermalink }}" style="color:#222222;">{{ .Title }}</a></h1>

<div class="post-info">
    <time class="post-date dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
        {{ .Date.Format "2006年1月2日" }}
    </time>
        {{ range .Params.categories }}
            {{ $url := printf "/categories/%s/" (. | urlize) }}
            <a href="{{ $url }}" class="category-link">{{ . }}</a>
        {{ end }}
</div>
<div class="e-content">
    {{ .Content }}
</div>
</article>
<a class="u-url" href="{{ .Permalink }}" style="display:none;">Permalink</a>

<p>
    {{ range (.GetTerms "tags") }}
    <a href="{{ .Permalink }}">#{{ .LinkTitle }}</a>
    {{ end }}
</p>

{{ $upvoteEnabled := default .Site.Params.upvote .Params.upvote }}
{{ if $upvoteEnabled }}
<div class="upvote-container">
<small class="upvote">
  <button class="upvote-btn" id="upvote-btn">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
    <polyline points="17 11 12 6 7 11"></polyline>
    <polyline points="17 18 12 13 7 18"></polyline>
    </svg>
    <span class="upvote-count" id="upvote-count">0</span>
  </button>
</small>
</div>

<script>
  let hasUpvoted = false;
  let upvoteBtn;
  let upvoteCount;

  // 页面加载时获取点赞数量
  document.addEventListener('DOMContentLoaded', function() {
    const slug = '{{ .Slug }}';
    upvoteBtn = document.getElementById('upvote-btn');
    upvoteCount = document.getElementById('upvote-count');
    getCount(slug);

    // 处理点赞按钮的点击事件
    upvoteBtn.addEventListener('click', handleUpvote);
  });

  // 点赞方法
  async function handleUpvote() {
    if (hasUpvoted) {
      console.log('You have already upvoted this post!');
      return;
    }
    const slug = '{{ .Slug }}';

    // 禁用按钮以防止重复点击
    upvoteBtn.disabled = true;
    // 给按钮添加 upvoted 类以赋以点击过的样式
    upvoteBtn.classList.add('upvoted');
    // 更新 upvote-count 的值 +1
    upvoteCount.innerText = parseInt(upvoteCount.innerText) + 1;

    try {
      const response = await fetch('{{ .Site.Params.upvoteURL }}upvote', {
        method: 'POST',
		mode: 'cors',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ postId: slug, diff: 1 }),
      });

      if (response.ok) {
        console.log('Upvote successful!');
        hasUpvoted = true;
        await getCount(slug, 3);
      } else {
        console.log('Upvote failed!');
      }
    } catch (error) {
      console.error('Error: ', error);
    } finally {
      upvoteBtn.disabled = false;
    }
  }

  // 获取 Upvote 数量的方法，支持设置重试次数，默认不重试
  async function getCount(slug, retryCount = 0) {
    try {
      const response = await fetch('{{ .Site.Params.upvoteURL }}count?post=' + slug, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      const data = await response.json();

      if (data.code === 0) {
        const count = data.data.count;
        upvoteCount.innerText = count;
        hasUpvoted = data.data.hasUpvoted;
        if (hasUpvoted) {
          upvoteBtn.classList.add('upvoted');
        } else {
          upvoteBtn.classList.remove('upvoted');
        }
      } else {
        console.error('Failed to get upvote count: ', data.msg);
      }
    } catch (error) {
      console.error('Error: ', error);
      if (retryCount > 0) {
        setTimeout(() => {
          getCount(slug, retryCount - 1);
        }, 1000);
      }
    }
  }
</script>
{{ end }}

<!-- Place the TOC at the end to ensure the article content loads first. -->
{{ $tocEnabled := default .Site.Params.toc .Params.toc }} {{ if $tocEnabled }}
<div class="toc">{{ partial "toc.html" . }}</div>
{{ end }}
<hr />
<details>
    <summary>
    <p style="display: inline">评论 与 Webmentions</p>
    </summary>
    <div id="giscus-container"></div>

    <div class="wm">
<div id="webmentions"></div>
<script src="/js/webmention.min.js"
    data-id="webmentions"
    data-page-url="https://www.glowisle.me{{ .RelPermalink }}"
    data-max-webmentions="50"
    data-wordcount="30"
    data-sort-by="published"
    data-sort-dir="up"
    async>
</script>

<details>
    <summary>如何参与 Webmentions 互动？</summary>
    <div class="wm-guide-content">
<div class="webmention-form">
    <p>如果你想回应这篇文章，请在你的博客或社交媒体中链接本页面，然后在下面的表单中提交你的页面链接。</p>
    <form id="webmention-submit-form" action="https://webmention.io/www.glowisle.me/webmention" method="post">
        <!-- 自动填充的目标文章链接 -->
        <input type="hidden" name="target" value="https://www.glowisle.me{{ .RelPermalink }}">

        <div>
            <label for="webmention-source">你的文章链接：</label>
            <input
                type="url"
                id="webmention-source"
                name="source"
                required
                pattern="https?://.+"
            >
        <button type="submit" id="webmention-submit-btn">提交</button>
        </div>
        <div id="webmention-form-feedback"></div>
    </form>
    <br>
<a href="https://indieweb.org/webmention">关于 Webmention 的更多信息</a> 以及 <a href="https://www.glowisle.me/posts/tear-hypocrisy-apart/">为什么要这么做？</a>
</details>



    <script>
		/*
src="https://giscus.app/client.js"
        data-repo="yingyu5658/yingyu5658.github.io"
        data-repo-id="R_kgDOOBetsA"
        data-category="Announcements"
        data-category-id="DIC_kwDOOBetsM4CoF_Z"
        data-mapping="title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="dark"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>


*/
    function getInitialTheme() {
  // 1. 优先检查 localStorage 中的用户偏好
  if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
    return localStorage.getItem('theme');
  }
  // 2. 检查系统偏好
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    return 'dark';
  }
  // 3. 默认值
  return 'light';
}

const currentTheme = getInitialTheme();
const giscusTheme = currentTheme === 'dark' ? 'dark' : 'light';

const giscusScript = document.createElement('script');
giscusScript.src = 'https://giscus.app/client.js';
giscusScript.setAttribute('data-repo', 'yingyu5658/yingyu5658.github.io');
giscusScript.setAttribute('data-repo-id', 'R_kgDOOBetsA');
giscusScript.setAttribute('data-category', 'Announcements');
giscusScript.setAttribute('data-category-id', 'DIC_kwDOOBetsM4CoF_Z');
giscusScript.setAttribute('data-mapping', 'title');
giscusScript.setAttribute('data-strict', '0');
giscusScript.setAttribute('data-reactions-enabled', '1');
giscusScript.setAttribute('data-emit-metadata', '0');
giscusScript.setAttribute('data-input-position', 'bottom');
giscusScript.setAttribute('data-theme', giscusTheme);
giscusScript.setAttribute('data-lang', 'zh-CN');
giscusScript.crossOrigin = 'anonymous';
giscusScript.async = true;

document.getElementById('giscus-container').appendChild(giscusScript);

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('webmention-submit-form');
    const submitBtn = document.getElementById('webmention-submit-btn');
    const feedbackEl = document.getElementById('webmention-form-feedback');

    if (!form) return;

    form.addEventListener('submit', async function(e) {
        e.preventDefault();

        // 禁用提交按钮防止重复提交
        const originalBtnText = submitBtn.textContent;
        submitBtn.disabled = true;
        submitBtn.textContent = '发送中...';

        // 清除之前的反馈信息
        feedbackEl.textContent = '';

        try {
            // 使用 FormData 收集表单数据
            const formData = new FormData(form);

            // 发送 POST 请求
            const response = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                },
                body: new URLSearchParams(formData)
            });

            const result = await response.json();

            if (response.ok) {
                // 成功响应
                feedbackEl.textContent = '✅ 提交成功！Webmention 正在处理中。';
                form.reset();
            } else {
                // 错误响应
                let errorMsg = '提交失败：';
                if (result.error || result.summary) {
                    errorMsg += result.error || result.summary;
                }
                feedbackEl.textContent = errorMsg;
            }
        } catch (error) {
            // 网络错误
            feedbackEl.textContent = '❌ 提交过程中出现网络错误，请稍后重试。';
        } finally {
            // 恢复提交按钮状态
            submitBtn.disabled = false;
            submitBtn.textContent = originalBtnText;
        }
    });
});


</script>

{{ end }}