前提

我上个月 fork 了本仓库代码，拉了新分支进行开发，想添加自己的定制化主题。

第一步：修改了 theme.ts

这是修改了 theme.ts 的部分。本地开发时候用的路径。发现复制时候在微信后台无法显示。就改成了上传到语雀上后的图片链接，也就是线上链接。

// 一级标题
    h1: {
      'padding': `0 1em`,
      'margin': `2em auto 1em`,
      'color': `hsl(var(--foreground))`,
      'font-size': `1.3em`,
      'font-weight': `bold`,
      'text-align': `center`,
      // 'background-image': `url('/src/assets/images/orange-logo.png')`,
      'background-image': `url('https://cdn.nlark.com/yuque/0/2025/png/35340046/1748999854524-c3db6f1f-20aa-4fb6-b7a2-841bc7053920.png')`,
      'background-repeat': `no-repeat`,
      'background-position': `top center`,
      'background-size': `4em`,
      'padding-top': `4em`,
      'gap': `1em`,
    },

    // 二级标题
    h2: {
      'padding-left': `8px`,
      'border-left': `6px solid var(--md-primary-color)`,
      'border-bottom': `1px dashed var(--md-primary-color)`,
      'margin': `2em 8px 0.75em 0`,
      'color': `hsl(var(--foreground))`,
      'font-size': `1.2em`,
      'font-weight': `bold`,
      'line-height': `1.2`,
    },

    // 三级标题
    h3: {
      'padding-left': `0.8em`,
      'position': `relative`,
      'margin': `2em 8px 0.75em 0`,
      'color': `hsl(var(--foreground))`,
      'font-size': `1.1em`,
      'font-weight': `bold`,
      'line-height': `1.2`,
      'background-image': `radial-gradient(circle, var(--md-primary-color) 0.25em, transparent 0.25em)`,
      'background-position': `-9em center`,
      'background-repeat': `no-repeat`,
    },

第二步，在编辑器里修改文案

我把 base 改成 "/" 后在本地运行，线上链接的 logo 消失

这是在编辑器里的样子（此时logo消失）

第三步，复制到公众号后台，一切正常

第四步，点击保存草稿/预览后，样式崩盘（本地重点的问题）

求助

请问是什么原因呢？如何解决

Jun 04 '25 15:06 ShirleyZmj

不能使用语雀 cdn，存在防盗链问题。
复制到公众号没问题，是因为它会检测图片资源并上传到另一个 cdn 当中。
而保存样式丢失的问题，有几种可能，现在无法确认你是哪一种。你可以先试试我们的线上版是否可用，如果保存依然丢失，那么是你的公众号编辑器有点差异；如果没问题，那么说明和你的改动内容有关。

Jun 04 '25 15:06 YangFong

不能使用语雀 cdn，存在防盗链问题。

复制到公众号没问题，是因为它会检测图片资源并上传到另一个 cdn 当中。

而保存样式丢失的问题，有几种可能，现在无法确认你是哪一种。你可以先试试我们的线上版是否可用，如果保存依然丢失，那么是你的公众号编辑器有点差异；如果没问题，那么说明和你的改动内容有关。

h1 {
      background-image: url('https://www.en369.cn/upload/2022-12-12/20221212230225811656.png'),
      background-repeat: no-repeat,
      background-position: top center,
      background-size: 4em,
      padding-top: 4em,
      gap: 1em,
}