一个统一 V2EX 网站各个节点背景的样式(看吧,一点也不标题党)

2016-12-02 10:14:17 +08:00
 zhangolve

这是什么

这是一个可以统一 V2EX 各个节点背景的样式。

为什么会有它

强迫症表示受不了 V2EX node.js 节点的黑色背景绿色字体,也在 V 站上看到其他 V 友吐槽过这个问题。而我在浏览 V2EX 其他节点的时候,也发现,其他几个节点,如游戏节点,也都有不同于主页的背景样式,于是就想动手改造。对于使用过 node.js 节点的众 V 友来说,应该都有些 CSS 基础,本身这个样式并不复杂,在此也不过是抛砖引玉了。

实际效果

使用样式后的 node.js 节点页面

使用样式前的 node.js 节点页面

兼容性

目前已经在 chrome 和 firefox 上测试,都是兼容的。

如何安装

无论使用 Firefox 还是 Chrome ,首先安装 stylish

Chrome stylish

Firefox stylish

然后安装:

https://userstyles.org/styles/135896/v2ex-background

打开 V2EX.com 查看效果

2888 次点击
所在节点    分享创造
8 条回复
xqin
2016-12-02 12:47:22 +08:00
曾经和楼主有过一样的想法(不喜欢 nodejs 节点下的全黑的背景).

楼主可尝试以下脚本, 在控制台运行之后, 页面直接恢复为默认状态.
```
Array.prototype.forEach.call(document.getElementsByTagName('style'), function (style) {
if (/#Wrapper/.test(style.innerHTML)) {
style.parentNode.removeChild(style);
}
});
```

可以用浏览器插件, 让它在 V2EX 的站点下自动运行.
xqin
2016-12-02 12:59:28 +08:00
如果用的是 chrome 的话, 将下面的代码保存为 xxx.user.js, 然后做为插件(chrome://extensions/)安装一下,就可以了.

```
// ==UserScript==
// @name v2ex_style_normal
// @description v2ex_style_normal
// @include https://v2ex.com/*
// @include http://v2ex.com/*
// @include https://www.v2ex.com/*
// @include http://www.v2ex.com/*
// @version 1.0
// ==/UserScript==


Array.prototype.forEach.call(document.getElementsByTagName('style'), function (style) {
if (/#Wrapper/.test(style.innerHTML)) {
style.parentNode.removeChild(style);
}
});
```
zhangolve
2016-12-02 13:13:32 +08:00
@xqin 不错,你的方法确实比我的更加简洁了。
sparanoid
2016-12-02 13:35:54 +08:00
给那个样式加了个 id="node-custom-css",现在可以直接用 getElementById 了
zhangolve
2016-12-02 13:49:23 +08:00
@sparanoid 没太明白你的意思。 css 里面用 js dom 操作语法?
xqin
2016-12-02 21:40:01 +08:00
@sparanoid 感谢管理员, 这么快就加了一个 id 上去.

不知道可以不可以提一个小 feature.

比如 COOKIE 里有 disable_node_custom_css 且值为 1 的时候, 可否不输出这段样式?

目前用 js 移除,因为是在页面加载好之后执行的,所以会看到先是黑色的(有样式),然后变正常.

如果后端可以根据 COOKIE 决定直接不输出这个样式, 展示上会更好, 而且也不需要再用到 js 脚本了.

代码的改动上, 应该只是多一个 条件判断一下, 应该不存在安全性或者改动量比较大小的问题.



> 以上只是一个小意见, 无视也是可以的 :)
zhangolve
2016-12-03 10:33:47 +08:00
@xqin 原来楼上那位是管理员啊,后来才反应过来。
jprovim
2019-08-02 06:49:25 +08:00
就是说这个代码: document.getElementById('node-custom-css').remove();

@zhangolve #7

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/324738

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX