自定义主题失效

[foxfire881]

按照文档的配置方式，新增一个yellow主题无效（例如copy、修改已经存在的green主题，修改为yellow主题，无效）。之前的版本是可以的，升级到0.8.47后，按照文档配置无效了。

[foxfire881]

而且主题加载顺序很奇怪，为什么要缓存优先呢？应该是配置优先才对，配置已经指定了特定主题，不管有没有缓存、缓存是什么，都应该强制刷新按照配置的主题重新加载。

另外有没有清空缓存的api？现在调试都好麻烦，主题不生效，不知道是缓存的问题，还是自己的的代码问题，还是cherry内部机制的问题。。。

[sunsonliu]

试了下，是可以的呀。。。

缓存优先是符合预期的，不然用户修改主题会不生效或无法记忆上次选择的主题。

[foxfire881]

菜单中是能显示出来，但是切换到这个主题时不生效呢。

[foxfire881]

晕，知道原因了，是没有把新主题 import 进来

[sunsonliu]

那是因为没有引入 .theme__yellow 对应的css文件吧

[sunsonliu]

另外如果要清理缓存，可以用开发者工具来删除哈

[foxfire881]

在源码的themes目录中增加了自定义主题： node_modules\cherry-markdown\src\sass\themes\yellow.scss

增加了这个文件后，前端cherry_config配置文件里也加了yellow主题，这时渲染已经有theme__yellow的class了。

但是以上两步还不够，还得把这个文件引入才行： import 'cherry-markdown\src\sass\themes\yellow.scss'

刚才是少了最后这步。

[foxfire881]

缓存优先是符合预期的，不然用户修改主题会不生效或无法记忆上次选择的主题。

这个没理解呀，例如：首次打开页面时，是A主题，打开后，A主题缓存在浏览器里。 稍后通过给cherry_config的mainTheme赋一个新值重新初始化editor加载一个主题B，但此时缓存里已经有A主题了，所以缓存优先仍然加载A主题，导致我手动切换到的B主题不生效。（实测在纯preview模式下通过给config赋值切换主题不生效，但是在editor的编辑模式下通过自带的按钮切换主题是生效的）

[sunsonliu]

只有用户手动变更主题时，变更的主题才会写到缓存里，如果用户没有手动变更过主题，会用配置的主题。所以你说的场景不存在。

场景1：用户打开编辑器，主题是A，没有缓存。配置切到了主题B，用户打开编辑器，看到的主题是B。
场景2：用户打开编辑器，修改主题为C，缓存主题C。刷新页面，用户打开编辑器，看到的主题仍然是C。

所以如果不希望缓存主题，只需要把切换主题的按钮去掉就好了。

[foxfire881]

只有用户手动变更主题时，变更的主题才会写到缓存里，如果用户没有手动变更过主题，会用配置的主题。所以你说的场景不存在。

场景1：用户打开编辑器，主题是A，没有缓存。配置切到了主题B，用户打开编辑器，看到的主题是B。 场景2：用户打开编辑器，修改主题为C，缓存主题C。刷新页面，用户打开编辑器，看到的主题仍然是C。

所以如果不希望缓存主题，只需要把切换主题的按钮去掉就好了。

可能我没讲明白，场景是这样的：

还以CSDN博客系统为例，因为仅切换编辑器的主题还不够，还得外部环境主题跟着一起切换（例如在编辑器的edit模式，切换为暗黑dark主题，这样在前台preview也是暗黑模式，但是编辑器以外的部分header、sidebar、评论区等……都还是light亮主题，不协调）。

所以，我在CSDN博客后台重新做了一个主题管理模块，在这个模块里切换为dark主题时，会把dark持久化写到后端server数据库里。然后前端浏览文章页时，博客先向server后端发送请求获取持久化的主题字符串 "dark" ，然后外围header、sidebar、评论区部分加载我自己的 "dark-main.css" 变成暗色主题，而preview模式下的cherry是通过config中配置mainTheme: dark 变为暗黑主题。

所以，核心问题是，我没用编辑器内置的按钮去切换主题（因为它只能控制自己，控制不了外部环境的样式）。而用了外部主题切换机制后，因为没有手动在编辑器内部用按钮切换主题，所以导致切换不生效，还用的是缓存的主题。

我等下试试把主题按钮去掉看还有没有缓存。

[foxfire881]

不行呢，实测无效，即使在编辑器内部把切换主题按钮去掉，在preview浏览模式下通过给config的mainTheme赋不同值来更换主题是无效的，还是用的缓存中的主题，config中指定的mainTheme没有生效。

[sunsonliu]

不行呢，实测无效，即使在编辑器内部把切换主题按钮去掉，在preview浏览模式下通过给config的mainTheme赋不同值来更换主题是无效的，还是用的缓存中的主题，config中指定的mainTheme没有生效。

要先把缓存删掉呀

[foxfire881]

要先把缓存删掉呀

还是不行，缓存已经清除了，还是无法加载主题。

是不是我的写法有问题？下面这两段代码（在config中设置主题，然后new Cherry加载）在之前的版本中是可以正常工作的，升级到0.8.47后就失效了

//只保留了关键的主题设置部分，其他配置太多了省略
//初始化config，主题置空
const cherry_config = {
  nameSpace: 'cherry',
    themeSettings: {
      mainTheme: '',
      codeBlockTheme: '',
    },
}

//前台刷新文章页面
var config = Object.assign({}, this.cherry_config, { value: this.article.content, themeSettings: { mainTheme: "mydark", codeBlockTheme: "one-dark" } }) //设置文章内容、主题
console.log(config) //这里打印出来的config是完整的，已经填入了主题参数
window.cherry = new Cherry(config)  //这里除了theme主题配置参数没生效，config中其他参数都是生效的。

刷新结束后，localstorage里面还是空的啥都没有。

[sunsonliu]

要看下有没有这个class，如果有的话就是没有引用对应的css文件

[foxfire881]

应该不是class导入的问题，实际已经导入了class。另外，如果是因为没有导入class，在editor中用“切换主题”按钮切换也不会生效，但实际情况是，在编辑模式下用“切换主题”按钮切换主题是正常生效的，只是通过在config中设置主题然后new Cherry加载这种方式导致设置的主题不生效。

以下是相关截图：

1、mydark、mylight主题都已导入：

2、缓存已清空：

3、设置为mydark主题刷新页面后，实际加载的既不是mylight也不是mydark，而是空主题：

[foxfire881]

等等，我好像发现问题了：
以下是通过editor模式下“切换主题”按钮正常切换的mylight、mydark主题展示，对比上面那个不正常的展示，class名称是不一样的—— 正常的class应该是theme__mydark、theme__mylight，但不正常的那个class只有“mydark”，少了前面的“theme__”

所以是哪里出了问题呢？

[sunsonliu]

对不起对不起。。。我的我的。。。。读配置的主题逻辑有问题。。。临时解决办法是配置的时候，先这么配置theme__xxxx

[foxfire881]

对不起对不起。。。我的我的。。。。读配置的主题逻辑有问题。。。临时解决办法是配置的时候，先这么配置theme__xxxx

嗯嗯，还有codeTheme也是一样的问题不生效，另外还有之前那个 #879 脚注失效的issue我试了还是有问题（滚动条在window时脚注链接失效），这3个bug一起修复了出个补丁吧~

[sunsonliu]

收到收到