文学城论坛
+A-

写了一个修改论坛字体和排版的 Tampermonkey 脚本

漫行笔记 2023-06-14 23:15:02 ( reads)

之前看到有网友说论坛字体太小,看起来不舒服。高饱和度的配色是网页设计的大忌,长时间观看会让人视力疲劳。使用 Chrome 和 Edge 浏览器的网友,可以通过 Tampermonkey(中文名篡改猴)扩展给网页注入css样式,在浏览器层面改变页面的版式。

方法:

1.安装扩展

Chrome 应用商店        Edge 外接程序

2.安装脚本

此处以 Chrome 版本的设置为例,Edge 版操作大同小异,不再赘述。

点击扩展程序栏的篡改猴图标 - 管理面板,打开脚本编辑页面。

点击按钮,新建一个脚本,将默认代码删除,把下面的代码粘贴进去,点击文件 - 保存。

// ==UserScript==
// @name         重设wenxuecity字体
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  重设wenxuecity字体
// @author       You
// @match        https://bbs.wenxuecity.com/*
// @match        https://www.wenxuecity.com/*
// @match        https://zh.wenxuecity.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    var style = document.createElement("style");
    style.type = "text/css";
    var text = document.createTextNode(".maincontent a, .content .col ul li a.adslink, .content .col ul li a, .content .col ul li a.adslink:visited {color:#2b2b2b !important;}"+ //网站首页 未点击主题(修改字体颜色)
                                       ".content .col ul li a:visited {color:#ff2cff !important;}"+ // 网站首页 已点击主题(修改字体颜色)
                                       "body {}"+ //论坛首页 主体
                                       "#hottopic .content .title a {font-family_replace:yahei;}"+ //论坛首页 热帖title(修改字体)
                                       "#hottopic .content p {font-family_replace:yahei;font-size_replace:15px;line-height:1.2em !important;}"+ //论坛首页 热帖content(修改字体,调整行距)
                                       "#hottopic .content p a {color:#2b2b2b;}"+ //论坛首页 热帖content(修改字体颜色)
                                       "#hottopic .comment p.count {font-size_replace:1.1em;font-weight:700;margin-top:0px;line-height:1.5em;}"+ //论坛首页 评论数(位置上移)
                                       "#rightside {}"+ //论坛首页右侧 热帖lsit(未做更改)
                                       "#mainwrapper {}"+ // 论坛论坛首页 头部(未做更改)
                                       ".stack a {color:#0261BD;}"+ //论坛分区信息(修改字体颜色)
                                       "#quicklinks a {color:#0261BD;}"+ //论坛分区操作(修改字体颜色)
                                       ".section a{color:#0261BD;}"+ //论坛分类标签(修改字体颜色)
                                       "#bodyColumn {}"+ //论坛分区主体中部(未做更改)
                                       "#menuColumn {}"+ //论坛分区主体左侧菜单(未做更改)
                                       "#postlist div p {color:#cfcfcf !important;}"+ //论坛分区帖子信息(修改字体)
                                       ".post {color:#2b2b2b !important;}"+ //论坛分区普通帖 帖子标题(修改字体)
                                       ".b {font-family_replace:yahei;color:#609758;font-size_replace:15px;font-weight:normal !important;}"+ //论坛分区 用户ID(及ID两侧的-)(修改字体)
                                       ".hitcounter {color:#609758 !important;}"+ //论坛分区 帖子阅读量(修改字体)
                                       ".odd {background-color:#f9f9f9;padding:5px 1px 5px 5px !important;}"+ //论坛分区 单数行(修改背景色)
                                       ".even {background-color:#ebedec;padding:5px 1px 5px 5px !important;}"+ //论坛分区 双数行(修改背景色)
                                       ".title {font-family_replace:simhei;font-size_replace:;font-weight:bold;color:#2b2b2b !important;}"+ //帖子标题(修改字体)
                                       "#breadcrumb span a, #channelBot a, #channelTop a, .breadcrumbs a, .breadcrumbs span, #postlinks a, #postmeta a, #postbody a, #postlogin a, #postform a, .post, #footer .info span, #footnav a {color:#006600;}"+ //超链接字体(修改字体颜色)
                                       "#postlinks, #postmeta {color:#8f8f8f;}"+ //帖子信息(修改字体颜色)
                                       "#articleBody {font-family_replace:yahei !important;}"+ //帖子内容(修改字体)
                                       "body, .menubar ul li.selected a, .bar_one span a, #footer .info {color:2b2b2b;}"+ //帖子内容(修改字体颜色)
                                       "h3 {font-family_replace:yahei;font-size_replace:;}"+ //所有跟帖、加跟帖(修改字体)
                                       "#postlist div p {font-family_replace:yahei;font-size_replace:16px;line-height:1.4em !important;}"+ //跟帖内容(修改字体)
                                       "#postlist {margin:0 -20px 5px 0px;padding:10px 15px 10px 5px; !important;}"+ //跟帖区(调整边距)
                                       ".nickname {color:#609758;font-size_replace:15px;}"+ //跟帖用户ID(修改字体)
                                       ".highlight {background:#e6e6dd;}"+ //回帖操作(取消高亮背景)
                                       "body {background-color:#cadfd5;}"+ //网页主体(修改背景色)
                                       ".bar_two span.username a {color:#006600 !important;font-weight:bold !important;}"+ //用户ID(修改字体颜色)
                                       ".bar_one span a:hover, .maincontent .wrapper a:hover, #breadcrumb span a:hover, #channelBot a:hover, #channelTop a:hover, #postlogin a:hover, #postbody a:hover, #postlist a:hover, #postlinks a:hover, #postmeta a:hover, #editmessage, .hitcounter {color:#c33030;}"); //操作记录(修改字体颜色)
    style.appendChild(text);
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);

    'use strict';
        var elements = document.querySelectorAll('a.sticky[style="color:#008000;"]');
    elements.forEach(function(element) {
        element.style.color = '#0261BD';
    }); //论坛分区置顶 帖子标题(替换颜色)
    // Your code here...
})();

以上为代码部分。保存后刷新网页即可生效,效果如图。

最后跟大家分享一首诗歌。

《 乌黑的眼睛 》
作者:米哈伊尔·尤列维奇·莱蒙托夫(俄)

无数星星缀满夏天的夜空,
为什么你只有两颗星?!
南方的明眸,乌黑的眼睛,
遇见你叫我失去平静
人们常说,夜晚的星斗
是天堂里幸福的象征;

黑眼睛,你是天堂和地狱,
你的星光照彻我的心灵。
南方的明眸,乌黑的眼睛
我从目光中阅读爱情;
从我们相遇的一刻起,
你是我白天黑夜不落的星!

 

 

跟帖(2)

hot_powerz

2023-06-16 16:03:51

这个应用很有趣,除了格式,好像连内容都可以修改,有没有这个可能?

漫行笔记

2023-06-17 05:59:25

可以,能够去掉页面上不常用的按钮和链接。比如用来删除百度首页搜索框底部的热点新闻。