V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zhangolve
V2EX  ›  分享创造

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

  •  
  •   zhangolve · 2016-12-02 10:14:17 +08:00 · 2887 次点击
    这是一个创建于 2897 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这是什么

    这是一个可以统一 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 查看效果

    8 条回复    2019-08-02 06:49:25 +08:00
    xqin
        1
    xqin  
       2016-12-02 12:47:22 +08:00   ❤️ 1
    曾经和楼主有过一样的想法(不喜欢 nodejs 节点下的全黑的背景).

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

    可以用浏览器插件, 让它在 V2EX 的站点下自动运行.
    xqin
        2
    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
        3
    zhangolve  
    OP
       2016-12-02 13:13:32 +08:00
    @xqin 不错,你的方法确实比我的更加简洁了。
    sparanoid
        4
    sparanoid  
    MOD
       2016-12-02 13:35:54 +08:00
    给那个样式加了个 id="node-custom-css",现在可以直接用 getElementById 了
    zhangolve
        5
    zhangolve  
    OP
       2016-12-02 13:49:23 +08:00
    @sparanoid 没太明白你的意思。 css 里面用 js dom 操作语法?
    xqin
        6
    xqin  
       2016-12-02 21:40:01 +08:00
    @sparanoid 感谢管理员, 这么快就加了一个 id 上去.

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

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

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

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

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



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

    @zhangolve #7
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3365 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 11:23 · PVG 19:23 · LAX 03:23 · JFK 06:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.