博客皮肤修复： 行号和搜索引擎快照（基于 Cnblogs-Theme-SimpleMemory v1.3.3）

Github

https://github.com/sky5454/Cnblogs-Theme-SimpleMemory/tree/sky5454-now

v1.3.3 配置方法

页面定制 CSS 代码
把 base.plus.css 复制到博客园后台-设置-页面定制 CSS 代码

博客侧边栏公告

<script type="text/javascript">
// CSS refixed
let css0 = document.styleSheets[0];
let css0Last = css0.cssRules.length;
css0.insertRule("body {overflow: hidden;}", css0Last+0);
css0.insertRule("div#loading, a[name=top] {  display: auto }", css0Last+1);
css0.insertRule("#header,#leftcontentcontainer,#profile_block,.catListTitle,#comment_nav{display:none!important}", css0Last+2);
// add MarkDown 's alink with Target=_blank
let postBodyLinks = document.querySelectorAll("div#cnblogs_post_body.blogpost-body.cnblogs-markdown a[href^='http']");
for (let i=0; i<postBodyLinks.length; i++){
  postBodyLinks[i].setAttribute('target', '_blank')
}
</script>

<script type="text/javascript">

   window.cnblogsConfig = {
  GhUserName: 'sky5454',
  GhRepositories: 'Cnblogs-Theme-SimpleMemory',
  GhVersions: 'sky5454-now',
  //      GhVersions    : 'v1.3.3',
        essayCodeHighlightingType: "highlightjs",
        essayCodeHighlighting: "vs2015",
        codeLineNumber: true
};
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.2/src/script/simpleMemory.min.js" defer></script>

页首HTML

<!--<meta http-equiv="x-dns-prefetch-control" content="on">-->
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://at.alicdn.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://static.cnblogs.com/">
<link rel="dns-prefetch" href="https://images2018.cnblogs.com/">
<link rel="dns-prefetch" href="https://v2.jinrishici.com/">


<link rel="preload" href="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" as="script">

改进点

皮肤代码相关配置-Docs

修改实现了：

1. 在开启hljs配置时，统一使用 hljs 渲染行号，且可避免双行号的问题（去除默认编辑器的行号）
2. 修复了搜索引擎快照被遮挡的问题，原理是把遮挡的CSS提到JS里
3. 默认从新标签页打开 Markdown 文章里的超链接

原理

简述

博客园默认编辑器勾选上行号，就附上了这样的行号代码

<span style="color: #008080;"> 3</span> 
<span style="color: #008080;">3</span> 
<span style="color: #008080;">22</span> 
<span style="color: #008080;" data-darkreader-inline-color=""> 3</span> 
<span style="color: #008080;" data-darkreader-inline-color="">22</span> 

所以可以用正则去掉博客园默认行号，然后再调用 hljs 库对代码进行高亮处理

处理规则

正则式(JS)

  const regex = /<span style="color: #008080;[^>]*"> ?d+</span> /gm;

感谢

感谢 Cnblogs-Theme-SimpleMemory 的作者 BNDong
感谢 正则表达式 QQ 群友们毫不吝惜的帮助
感谢 https://regex101.com