From 713b0fcb33cbdfc4d4b3789041634299c28cbc20 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Tue, 11 Jul 2023 18:27:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A1=86=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js         |  1 +
 components/PrismMac.js | 49 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/blog.config.js b/blog.config.js
index dfd1498c..2a2ce299 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -98,6 +98,7 @@ const BLOG = {
       'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
   CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || true, // 代码左上角显示mac的红黄绿图标
   CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号
+  CODE_COLLAPSE: process.env.NEXT_PUBLIC_CODE_COLLAPSE || 'false', // 是否折叠代码框
 
   // Mermaid 图表CDN
   MERMAID_CDN: process.env.NEXT_PUBLIC_MERMAID_CDN || 'https://cdn.jsdelivr.net/npm/mermaid@10.2.2/dist/mermaid.min.js', // CDN
diff --git a/components/PrismMac.js b/components/PrismMac.js
index 01f4e65b..9e684d6a 100644
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -15,6 +15,7 @@ import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/navigation'
 
 /**
+ * 代码美化相关
  * @author https://github.com/txs/
  * @returns
  */
@@ -31,11 +32,59 @@ const PrismMac = () => {
       }
       renderPrismMac()
       renderMermaid()
+      renderCollapseCode()
     })
   }, [router])
   return <></>
 }
 
+/**
+ * 将代码块转为可折叠对象
+ */
+const renderCollapseCode = () => {
+  if (!JSON.parse(BLOG.CODE_COLLAPSE)) {
+    return
+  }
+  const codeBlocks = document.querySelectorAll('.code-toolbar')
+  for (const codeBlock of codeBlocks) {
+    // 判断当前元素是否被包裹
+    if (codeBlock.closest('.collapse-wrapper')) {
+      continue // 如果被包裹了，跳过当前循环
+    }
+
+    const code = codeBlock.querySelector('code')
+    const language = code.getAttribute('class').match(/language-(\w+)/)[1]
+
+    const collapseWrapper = document.createElement('div')
+    collapseWrapper.className = 'collapse-wrapper w-full py-2'
+    const panelWrapper = document.createElement('div')
+    panelWrapper.className = 'border rounded-md border-indigo-500'
+
+    const header = document.createElement('div')
+    header.className = 'flex justify-between items-center px-4 py-2 cursor-pointer select-none'
+    header.innerHTML = `<h3 class="text-lg font-medium">${language}</h3><svg class="transition-all duration-200 w-5 h-5 transform rotate-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6.293 6.293a1 1 0 0 1 1.414 0L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z" clip-rule="evenodd"/></svg>`
+
+    const panel = document.createElement('div')
+    panel.className = 'invisible h-0 transition-transform duration-200 border-t border-gray-300'
+
+    panelWrapper.appendChild(header)
+    panelWrapper.appendChild(panel)
+    collapseWrapper.appendChild(panelWrapper)
+
+    codeBlock.parentNode.insertBefore(collapseWrapper, codeBlock)
+    panel.appendChild(codeBlock)
+
+    header.addEventListener('click', () => {
+      panel.classList.toggle('invisible')
+      panel.classList.toggle('h-0')
+      panel.classList.toggle('h-auto')
+      header.querySelector('svg').classList.toggle('rotate-180')
+      panelWrapper.classList.toggle('border-gray-300')
+      panelWrapper.classList.toggle('border-indigo-500')
+    })
+  }
+}
+
 /**
  * 将mermaid语言 渲染成图片
  */