refactor(caption): 使用 md 插件实现图片小标题

2ndLA · Mar 2, 2024 · 78bc03f · 78bc03f
1 parent 3d887af
commit 78bc03f
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 42 deletions.
diff --git a/.vitepress/config.js b/.vitepress/config.js
@@ -1,6 +1,7 @@
 import path from 'path'
 import sidebarData from './gitbooktoc'
 import gtagConfig from './gtag'
+import useMDItPlugins from './mdit'
 import { tokenize } from './search'
 
 const urlBase = process.env.URL_BASE || undefined
@@ -27,14 +28,7 @@ export default {
   ],
   markdown: {
     config: (md) => {
-      md.use(require('markdown-it-task-checkbox'), {
-        disabled: true,
-        divWrap: false,
-        divClass: 'checkbox',
-        idPrefix: 'cbx_',
-        ulClass: 'task-list',
-        liClass: 'task-list-item'
-      })
+      useMDItPlugins(md)
     }
   },
   // You have to write mapping for each depth of README.md

diff --git a/.vitepress/hack.md b/.vitepress/hack.md
@@ -9,41 +9,9 @@
   font-size: 20px;
   padding-bottom: 10px;
 }
-
-/* image alt as subtitle */
-.imgSubtitle {
-  text-align: center;
-}
-
-.imgSubtitleText {
-  color: #8899a8;
-  font-size: 12px;
-  font-weight: 400;
-}
 </style>
 
 <script>
-function renderImageAltAsSubtitle(ctx) {
-  const imgElems = ctx.$el.querySelectorAll('img')
-  imgElems.forEach((elem, index) => {
-    if (elem.alt && !elem.alt.startsWith('Badge:')) {
-      const elemId = `image-subtitle-${index}`
-      const subtitle = `
-        <div id="${elemId}" class="${ctx.$style.imgSubtitle}">
-          <span class="${ctx.$style.imgSubtitleText}">${elem.alt}</span>
-        </div>
-      `
-      // prevent duplicated insertion
-      if (!document.getElementById(elemId)) {
-        const parser = new DOMParser()
-        const htmlDoc = parser.parseFromString(subtitle, 'text/html')
-        const subtitleDiv = htmlDoc.body.firstChild
-        elem.insertAdjacentElement('afterend', subtitleDiv)
-      }
-    }
-  })
-}
-
 function renderFrontMatterDescription(ctx) {
   document.querySelector(`.${ctx.$style.description}`)
     .textContent = document.querySelector('meta[name="description"]').content
@@ -52,7 +20,6 @@ function renderFrontMatterDescription(ctx) {
 export default {
   mounted () {
     renderFrontMatterDescription(this)
-    renderImageAltAsSubtitle(this)
   }
 }
 </script>
diff --git a/.vitepress/mdit.js b/.vitepress/mdit.js
@@ -0,0 +1,26 @@
+import mdImageFigures from 'markdown-it-image-figures'
+import mdTaskCheckbox from 'markdown-it-task-checkbox'
+
+function appendImageFigures(md) {
+  // usage: ![alt](https://link-to-image 'title'){.class}
+  md.use(mdImageFigures, {
+    figcaption: 'title',
+    copyAttrs: '^class$'
+  })
+}
+
+function taskCheckbox(md) {
+  md.use(mdTaskCheckbox, {
+    disabled: true,
+    divWrap: false,
+    divClass: 'checkbox',
+    idPrefix: 'cbx_',
+    ulClass: 'task-list',
+    liClass: 'task-list-item'
+  })
+}
+
+export default function useMDItPlugins(md) {
+  appendImageFigures(md)
+  taskCheckbox(md)
+}
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
@@ -43,3 +43,24 @@ p>a>img[alt^="Badge:"] {
     display: inline-block;
     margin-right: 3px;
 }
+
+/* image */
+.main img {
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 0.8rem var(--vp-c-default-soft);
+    margin-bottom: 0.8rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.dark .main img {
+    border: 0.1rem solid var(--vp-c-neutral);
+    box-shadow: none;
+}
+
+figure>figcaption {
+    text-align: center;
+    color: #8899a8;
+    font-size: 12px;
+    font-weight: 400;
+}
diff --git a/content/preface.md b/content/preface.md
@@ -10,7 +10,7 @@ description: Preface
 
 这是一个老生常谈的话题，我们直接看看 ChatGPT 是怎么回答的。
 
-![问 ChatGPT：还有必要学外语吗？](.assets/preface-ask-chatgpt.png)
+![Ask ChatGPT](.assets/preface-ask-chatgpt.png '问 ChatGPT：还有必要学外语吗？')
 
 事实上，如果你自己不能回答这个问题，那么可能当下的你并不需要学英语。在这种情况下逼迫自己学，效果应该不会很好。
 

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-promise": "^6.1.1",
     "husky": "^8.0.3",
+    "markdown-it-image-figures": "^2.1.1",
     "markdown-it-task-checkbox": "^1.0.6",
     "vitepress": "^1.0.0-rc.44"
   }

diff --git a/yarn.lock b/yarn.lock
@@ -1601,6 +1601,11 @@ mark.js@8.11.1:
   resolved "https://registry.npmmirror.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
   integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==
 
+markdown-it-image-figures@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/markdown-it-image-figures/-/markdown-it-image-figures-2.1.1.tgz#fd32a2d0cec60ed8c3916d74fea70d5f9b56e4c7"
+  integrity sha512-mwXSQ2nPeVUzCMIE3HlLvjRioopiqyJLNph0pyx38yf9mpqFDhNGnMpAXF9/A2Xv0oiF2cVyg9xwfF0HNAz05g==
+
 markdown-it-task-checkbox@^1.0.6:
   version "1.0.6"
   resolved "https://registry.npmmirror.com/markdown-it-task-checkbox/-/markdown-it-task-checkbox-1.0.6.tgz#9ebd7b6382e99162264605bc580f2ac118be4242"