使用浏览器插件 Stylus 美化 CSDN 页面效果

笔记 ? 次阅读

需求

作为一个不以计算机为专业的学生,时常要用到计算机的各方面功能,但对大多数内容一知半解,动辄碰壁。好在网络上资料很多,总是可以搜到一些帮助、经验。

搜索资料是常见的信息来源包括:

  • Stack Overflow / Stack Exchange:外文问答网站,社区相当规范,累积的资料也比较多。但国内网络环境下不一定能顺畅访问,加上有时摸不清楚自己问题的关键字,可能搜不到好的答案。
  • 知乎:国内问答网站,但不偏向技术,资料比较少。页面观感不错,没有什么广告。
  • 博客园:国内博客平台,偏向技术,资料不少;允许用户自定义页面样式表,广告也比较少,浏览效果尚可(就是有些博客主题显得比较陈旧)。
  • CSDN:国内「博客」平台,存量巨大,可以说是「偏方仓库」。与 Stack Overflow 相比,CSDN 上基本没有原理性的解读,大部分都是操作经验;不过,对我来说,这些经验也堪一试,反正是外行。

CSDN 曾经还是一个比较干净的平台,现在越发臃肿,连购物网站在 CSDN 面前都自愧不如了。广告、文章推荐、冗长列表、糟糕排版,一应俱全。丑话不多说,现在要解决这几个问题:

  1. 将包括广告、文章推荐在内的无用内容去掉;
  2. 适当美化文章的样式。

解决方案

显然,要想去掉广告,只能:

  1. 直接修改网页内容,这可以通过一些可以执行 JavaScript 脚本的浏览器插件来实现,但没必要。
  2. 修改网页的 CSS 样式表。基于 CSS 的重叠覆盖特性,实际上只要附加样式表就可以了。

由于我们的任务是美化,后一方案更为可行。为此,要给浏览器安装可以修改网页样式表的插件;这类插件有不少,比较好的一个是 Stylus。Stylus 的基本功能很容易理解:给指定的网页附加指定的 CSS 样式规则。分两步:

  1. 编写匹配特定网站域名的规则。例如,首先要编写匹配所有 CSDN 博客页面的 URL 规则,这样才能进一步做美化;
  2. 针对特定的匹配规则,编写对应的 CSS 样式表。

Stylus 插件在 Chrome(包括 Microsoft Edge)、Firefox 等主流浏览器的插件商店里都可以获取,使用方法也很简单,容易上手,不需要专门的教程来介绍。

样式表都能自己定制了,那不如自己干。安装 Stylus 后,随便打开一个 CSDN 文章,然后单击 Stylus 按钮,选择为所有 https://blog.csdn.net 下的页面启用一个样式表。

我本人不在 CSDN 上写博客,所以页面上的东西会去得比较干净——反正我自己用不到。

清除杂物

先琢磨了下广告,发现广告是用脚本生成的内嵌文档元素来实现的,用样式表不太容易精准屏蔽;如果只希望屏蔽广告,干脆就把所有的 iframe 屏蔽掉好了:

iframe {
    display: none;
}

不排除这样会有「误伤」(但是谁会在文章里用 iframe?)。我再仔细看了看,发现网页上左侧栏与右侧栏并没有我需要看的东西——如作者的最新文章、目录(我不太爱用目录)、博主的评论列表等。既然如此,都关了好了;连带着文章下面的相关文章(相关文章用百度搜即可,那些太难看),一起屏蔽:

#rightAside, .recommend-box, #csdn-toolbar, .blog_container_aside, #toolBarBox {
    display: none;
}

把侧栏掏出去后,正文可以进一步占用空出来的位置;首先去掉浮动(之前靠右),然后左右 margin 设为 auto,上下空一点出来,形成打字机的效果。

main {
    float: unset;
    margin: 4ex auto;
}

现在可以先看看效果了,还不错。干净不少。

美化页面

接下来可以尝试修改一下正文的样式。稍稍检查正文中各个元素的样式来源,发现 CSDN 的 CSS 写法很传统,针对 pblockquote 等的字号、行高等都竟然是单独设定的,这下可很难在 div 层级上覆盖样式。那就以毒攻毒,全部改掉好了——直接用 html * 把所有元素选上。原来的字号基本上在 16px,稍微改大些;行高也调宽点。字族找来一个英文的(中文字体没设定,因为我的浏览器里设定过一个 fallback 了,效果还可以)。

html * {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif ;
    font-size: 18px !important;
    line-height: 1.8 !important;
}

此外,可以做些其他的小工作。比如给图片都居中、加 box-shadow

#content_views img {
    display: block;
    margin: 1ex auto;
    box-shadow: 0 3px 9px 2px rgba(100, 100, 100, 0.5);
    max-height: 80vh;
    border-radius: 5px;
}

或者,改改代码字体(注意行号、下属元素的样式也要一起改):

html pre code, html pre code *, html pre li {
    font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace !important;
    font-size: 0.9rem !important;
}

如此种种,都可以做做。我所用的完整样式表,请见这个代码片段。展示一下最后的效果:

当然这个样式并不完美,使用过程中可能还会发现其他问题;这就属于见仁见智的问题了,各人可有不同方法,有空再改。