大佬 您个人网站是用node写的后端吗

[可乐]

大佬这个小图标是您自己设计的吗

[chengpeiquan]

我的博客吗？博客是部署在自己的服务器上，不过没有用到太多服务端的东西，所以只是起了个 Express 服务读取静态目录，在博客那个仓库合并分支时触发 Action 进行打包并同步到阿里云服务器上， 可以参考 Workflow 的这部分

Vue 3 这个文档站点则是绑定了 CNAME 绑定自己的域名，但资源还是托管在这个仓库的 gh-pages 分支。

图标是参考张鑫旭老师的那个 CSS 画多边形的博文弄的哈哈哈，文章地址应该是这个
https://www.zhangxinxu.com/wordpress/2019/01/pure-css-shapes/

[可乐]

大佬 又打扰了 看了您vitepress源码 发现一个方法

/**
 * 执行标记替换
 */
export function replaceSymbol() {
  if (!inBrowser) return
  setTimeout(() => {
    try {
      // 获取 DOM
      const sidebarLinks =
        document.querySelectorAll('.aside-container nav .outline-link') || []
      const h2s = document.querySelectorAll('.content-container h2') || []
      const h3s = document.querySelectorAll('.content-container h3') || []
      const h4s = document.querySelectorAll('.content-container h4') || []
      const doms = [...sidebarLinks, ...h2s, ...h3s, ...h4s]

      // 替换标记成图标
      doms.forEach((item) => {
        let html = item.innerHTML

        for (const key in markConfig) {
          if (Object.hasOwnProperty.call(markConfig, key)) {
            const mark = markConfig[key]
            const icon = iconConfig[key]
            const reg = new RegExp(mark, 'img')
            // 只处理包含标记的元素
            if (html.includes(mark)) {
              // 部分元素不显示图标
              const { nodeName } = item
              debugger
              switch (nodeName) {
                case 'H2':
                case 'H3':
                case 'H4':
                  html = html.replace(reg, '')
                  break
                default:
                  html = html.replace(reg, icon)
              }

              // 渲染
              item.innerHTML = html
            }
          }
        }
      })
    } catch (e) {
      console.log(e)
    }
  }, 100)
}```

这种写法是 vitepress 替换一些dom的固定用法 还是您的巧思啊

[chengpeiquan]

大佬 又打扰了 看了您vitepress源码 发现一个方法

/**
 * 执行标记替换
 */
export function replaceSymbol() {
  if (!inBrowser) return
  setTimeout(() => {
    try {
      // 获取 DOM
      const sidebarLinks =
        document.querySelectorAll('.aside-container nav .outline-link') || []
      const h2s = document.querySelectorAll('.content-container h2') || []
      const h3s = document.querySelectorAll('.content-container h3') || []
      const h4s = document.querySelectorAll('.content-container h4') || []
      const doms = [...sidebarLinks, ...h2s, ...h3s, ...h4s]

      // 替换标记成图标
      doms.forEach((item) => {
        let html = item.innerHTML

        for (const key in markConfig) {
          if (Object.hasOwnProperty.call(markConfig, key)) {
            const mark = markConfig[key]
            const icon = iconConfig[key]
            const reg = new RegExp(mark, 'img')
            // 只处理包含标记的元素
            if (html.includes(mark)) {
              // 部分元素不显示图标
              const { nodeName } = item
              debugger
              switch (nodeName) {
                case 'H2':
                case 'H3':
                case 'H4':
                  html = html.replace(reg, '')
                  break
                default:
                  html = html.replace(reg, icon)
              }

              // 渲染
              item.innerHTML = html
            }
          }
        }
      })
    } catch (e) {
      console.log(e)
    }
  }, 100)
}```

这种写法是 vitepress 替换一些dom的固定用法 还是您的巧思啊

这个是自己的，因为我也是只有这个文档用到这个标记功能，所以简单写成了 replace 替换，如果有比较多这种需求，可以看下文档的主题开发，把这块功能做成自定义主题里的功能，类似于 <Badge /> 那样的主题组件