path: root/layouts/_default/single.html

{{ define "main" }}
<header>
<a href="{{ "" | relURL }}" class="title">
  <p class="site-title">{{ .Site.Title }}</p>
</a>
<nav>{{- partial "nav.html" . -}}</nav>

</header>

<article class="h-entry">
<h1 class="post-title">
      <a href="{{ .RelPermalink }}" class="item-link">{{ .Title }}</a>
</h1>

<div class="post-meta">
    <div class="post-meta-item post-date">
        <time class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
            {{ .Date.Format "January 02, 2006" }}
        </time>
    </div>

    <div class="post-meta-item post-category">

        {{ range .Params.categories }}
        {{ $url := printf "/categories/%s/" (. | urlize) }}
•
        <a href="{{ $url }}" class="category-link">{{ . }}</a>
        {{ end }}
    </div>
</div>


  <div class="e-content">{{ .Content }}</div>
</article>
<a class="u-url" href="{{ .Permalink }}" style="display: none">Permalink</a>

<hr>

{{ partial "post_meta.html" . }}

{{ $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',
        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 }} -->

<!-- {{ if .Params.comments | default true }} -->
<!-- <div class="comments-and-webmentions"> -->
<!--   <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> -->

<!--       <p> -->
<!--         若想回复本文，请在你的博客或社媒发布含有本文链接的帖子，然后在下方表单提交链接。 -->
<!--       </p> -->
<!--       <div class="wm-guide-content"> -->
<!--         <div class="webmention-form"> -->
<!--           <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> -->
<!--           <p> -->
<!--             也可以<a href="mailto:i@glowisle.me?subject=回复《{{ .Title  }}》">发送邮件</a>评论。 -->
<!--           </p> -->
<!--           <a href="https://indieweb.org/webmention" -->
<!--             >关于 Webmention 的更多信息</a -->
<!--           > -->
<!--           以及 -->
<!--           <a href="https://www.glowisle.me/posts/tear-hypocrisy-apart/" -->
<!--             >为什么要这么做？</a -->
<!--           > -->
<!--         </div> -->

<!--         <script> -->
<!--           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", "0"); -->
<!--           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 }} -->
<!--       </div> -->
<!--     </div> -->
<!--   </details> -->

  {{ if not .Params.comments }}
  {{ with .Params.reason }}
  <div class="reason">
    <p>评论区已关闭。</p>
    <strong>{{ . | markdownify }}</strong>
  </div>
  {{ end }}
  {{ end }}
  <p>有想对我说的？<a href="mailto:im@verdant.ee?subject=回复《{{ .Title }}》">发一封邮件吧</a>。</p>
</div>
{{ end }}