博客皮肤修复： 行号和搜索引擎快照（基于 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;

由于博客园改用了安全颜色，所以请看下面的评论区

更新（重要请看！）

2021-05-08 ，发现博客园把代码行全部改为了安全颜色rgba

<span style="color: rgba(0, 128, 128, 1)">2</span> 

https://www.cnblogs.com/yucloud/p/10294308.html

<span style="color: rgba(0, 128, 128, 1)"> 4</span> 

https://www.cnblogs.com/yucloud/p/vs_code_config.html

对应的正则表达式为

/<span style="color: rgba\(0, 128, 128, 1\)[^>]*"> *\d+<\/span> /gm

JS为

const regex = /<span style="color: rgba\(0, 128, 128, 1\)[^>]*"> *\d+<\/span> /gm;

注意：该span标签后有一个空格，因此在正则里也要处理

所以v1的朋友把上面正则表达式换一下即可，



v2的提供了钩子，因此请看下面。

适用于V2.0.1

          beforeCode: (_) => {
            console.time("Code 预处理");
            const regex = /<span style="color: rgba\(0, 128, 128, 1\)[^>]*"> *\d+<\/span> /gm;  
            let preCode = $('#main pre')
            $.each(preCode, function (i) {
            	let obj = $(this)
            	obj.html(obj.html().replace(regex, ''));
            });
            console.timeEnd("Code 预处理");
          },

感谢

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