[业余] 主题SimpleMemory如何在开关Darkmode的同时切换代码高亮的主题 —— *啪嗒*，I'm so sorry 4u.
作者：互联网
博客园的主题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)
方法
- 在你下好的SimpleMemory主题文件夹中打开dist/style/dayNight.b054622b.css
- 打开你下载好的highlight.zip，在style文件夹中选择你想要在按下日夜切换按钮之后改变的代码高亮主题
- 比如小冰喜欢在切换Darkmode的同时切换到Shades Of Purple的主题，那就打开shades-of-purple.min.css，全选里面的内容，全部复制到dayNight.b054622b.css里面，保存
- 把整个SimpleMemory主题文件夹内的所有内容上传到你的有着https协议的云资源服务器或CDN加速节点
- 打开你的博客园后台，展开博客侧边栏公告，一直拉到最后
- 替换掉
<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。
- 保存
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
标签：...,4u,高亮,主题,js,so,dayNight,css 来源： https://www.cnblogs.com/drctrb/p/16056991.html