博客园的主题SimpleMemory如何在开关Darkmode的同时切换代码高亮的主题

前言

• 有关的知识还没小冰都还没真正开始学习，下面大多数都是自己慢慢摸索出来的，所以非常不专业！！！ (~反正就是菜死了呜呜呜~)
• 所以，如果让正在看这篇文章的你高血压了，对不起！！！！！！！！！！
• 如果有Better Idea可以直接发表你的评论！！~不过我大部分也看不懂吧~

需要准备的东西

• 如果你还没有安装SimpleMemory的主题 ==>SimpleMemory's Document
• 一个能通过网络访问文件的(?)云资源服务器或CDN加速节点
  可以使用 jsDelivr + Github —— Free and GOOD!!
  免费CDN：jsDelivr+Github 使用方法 - 知乎
  但小冰当时用的是阿贝云的免费虚拟主机... 很烂。
  注意: 这里的云资源服务器或者什么什么，访问地址一定要是https协议(或者说SSL...?)的，不能是http协议(因为我的免费阿贝云就是这样的)，不然加载的时候会出错，整个网页白屏。解决方案见下文
  =>(自己骗自己啦，只能拿来调试而已:3 因为大多数人都不开，进来看都是白屏。所以还是要换https协议的服务器)
• SimpleMemory的主题文件
• highlight.js 的代码高亮主题文件
  highlight.js 代码高亮主题文件预览)
• 一个能编辑文本的东西
• 一个或两个浏览器

提前要做的

• 代码高亮的渲染引擎要是highlight.js (prismjs没研究过呜呜呜)
• 主题样式选择任何一个亮色的主题，这里我选择的是docco
  (其实什么都可以，但我要实现的是LightMode的时候代码高亮也是LightMode)

方法

1. 在你下好的SimpleMemory主题文件夹中打开dist/style/dayNight.b054622b.css
2. 打开你下载好的highlight.zip，在style文件夹中选择你想要在按下日夜切换按钮之后改变的代码高亮主题
3. 比如小冰喜欢在切换Darkmode的同时切换到Shades Of Purple的主题，那就打开shades-of-purple.min.css，全选里面的内容，全部复制到dayNight.b054622b.css里面，保存
4. 把整个SimpleMemory主题文件夹内的所有内容上传到你的有着https协议的云资源服务器或CDN加速节点
5. 打开你的博客园后台，展开博客侧边栏公告，一直拉到最后
6. 替换掉<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>中双引号的部分，并换成你云资源服务器或CDN加速节点的链接。

• 例如小冰的云资源服务器地址是 www.drctrb.com 并将编译后的文件夹dist放在了网站的根目录，那小冰就可以将其替换为https://www.drctrb.com/dist/simpleMemory.js。

7. 保存

something more

• 代码高亮的主题也可以自己根据喜好修改，达到只更改代码框背景的效果

可能但"没实践过"的方法

把主题资源文件夹里有关dayNightSwitch的js和main.js文件都查阅了几遍
发现有这样一条代码在dayNight.js里面(../src/components/dayNight/dayNight.js)

$('head').append('<link type="text/css" id="baseDarkCss" rel="stylesheet" href="'+_.__status.dayNightCssHref+'">');

查阅了一些文章，发现这是一个通过JavaScript来插入html元素的语句
再翻翻main.js (.../src/main.js)，发现_.__status.dayNightCssHref中的_.__status是用来查阅页面状态信息的，而_.__status.dayNightCssHref便是用来记录夜间css样式文件路径
于是就有了另一种"可能的"方法:
也搞一个类似的小东西来记录想要的代码高亮主题路径，并且将其插入到html中，覆盖原来的样式
(但是，我不会:D)

如果让正在看这篇文章的你高血压了，对不起！！！！！！！！！！

探索的过程(不用管w)和原理(猜的_?)

F12打开元素，狂摁dayNightSwitch，发现在Darkmode下head里面新增了一个link元素，

<link rel="stylesheet" type="text/css" href="https://cdn.cnblogs.com/jsDelivr/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/style/dayNight.b054622b.css" id="baseDarkCss">

关闭Darkmode的时候，这个元素就消失了，而页面也变成了Lightmode
在把主题源文件翻来覆去后，觉得这是夜间模式的样式文件，并且覆盖了原来页面的样式
......
在一番折腾后又发现，head里面还有个link元素

<link id="highlighter-theme-docco" type="text/css" rel="stylesheet" href="/css/hljs/docco.css?v=96AvS5-MYBJiKvD1E0JKQz8x73b_-MURZdItl-c5YcI">

原来是在后台设置的代码高亮样式
那咱就寻思寻思——要是把另一个代码高亮样式复制到dayNight.b054622b.css里面，是不是就也能覆盖掉原来的样式呢? 所以就把已经修改好的dayNight.b054622b.css传到了博客园自带的空间里
——然后成功了！
但是要怎么和dayNightSwitch绑到一起?
(我也不知道我当时在想什么乱七八糟的，沉思了好多好多好多时间)
翻来覆去，看到官方文件可以自己托管主题资源，于是我开始找一个云端服务器
阿里云、华为云、腾讯云...好贵！
突然看到前几年沸沸扬扬的阿贝云，想起来当时自己也搞过这玩意(但是真的lap sap)
于是上传，修改，保存，什么什么的...

居然白屏了??!!!!!
于是查来查去，原来是因为有着https协议的博客园要是加载了破烂http协议的阿贝云服务器文件，就不安全，不安全浏览器就要保护小冰...
然并卵，允许查看不安全的内容后，居然不会改变..

又翻来覆去查了好久好久，直到我发现...
把dayNight.b054622b.css从云服务器里删了，the goddamned Darkmode还会加载!??
于是又爬着这条藤子慢慢摸索，发现浏览器会有一个功能叫做"从磁盘缓存"...
换了崭新的Chrome之后，重新上传了修改后的dayNight.b054622b.css的文件就可以用了。

如果让正在看这篇文章的你高血压了，对不起！！！！！！！！！！

当然整个探索的过程不止这么简单...只不过写的是一种已经实践出来的方法的探索过程而已.
其他觉得可行的方法已经写在上面了w，爱看不看！小冰才不管你呢

资源地址因http协议导致白屏的解决方案

自己骗自己，只能拿来调试而已:3 因为大多数人都不开，进来看都是白屏。所以还是要换https协议的资源服务器

• Microsoft Edge: 设置>Cookie 和网站权限>不安全的内容==>允许: 添加"www.cnblogs.com"
• Chrome: 设置>安全和隐私设置>网站设置>更多内容设置>不安全内容==>允许显示不安全内容: 添加"www.cnblogs.com"
• 其他浏览器没试，但意思都一样(:3)

有关的资料

Chrome在https网站中打开http图片，打不开的解决方案 —— atzqtzq的博客

javascript动态插入html元素 —— longshengguoji的博客

好文推荐

博客园SimpleMemory添加Live 2D不生效解决方法 —— 小能日记 来自我的强者朋友

sentences

呜呜呜我是大憨憨

:3