标签：... 4u 高亮 主题 js so dayNight css
博客园的主题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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。