微信读书阅读样式优化

常在电脑和手机上阅读,需要多端同步功能,目前仅发现微信读书是免费同步的,但是网页版的样式不符合自己的阅读习惯,于是通过油猴脚本定制自己喜欢的阅读样式。

功能介绍:

1、宽屏显示,设置满屏、80%和默认3种宽度模式,浮动菜单、字号控制条随模式变换位置
2、页脚优化,调整“下一章”位置,设置按钮隐藏、显示和默认3种模式
3、显示、隐藏滚动条
4、更改浅色模式背景颜色,共有豆沙绿、杏仁黄、秋叶褐、胭脂红、海天蓝、葛巾紫、极光灰、青草绿、银河白9种可选
5、沉浸式阅读:导航栏、浮动菜单顶部显示,下滑隐藏
用户配置保存在油猴脚本存储区,下次打开网页直接读取。
没有设置阅读界面按钮,而是通过油猴菜单,是为了更沉浸于阅读。

脚本安装:

油猴脚本安装地址:微信读书 WeReadSytle,https://greasyfork.org/zh-CN/scripts/440339

截图展示:

图片[1]-微信读书阅读样式优化-阿噜噜小栈

图片[2]-微信读书阅读样式优化-阿噜噜小栈

脚本代码:

// ==UserScript==
// @name 微信读书
// @Icon https://weread.qq.com/favicon.ico
// @namespace https://greasyfork.org/users/878514
// @version 20230728
// @description WeReadSytle
// @AuThor Velens
// @match https://weread.qq.com/web/reader/*
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @license MIT
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==

//正文
//GM_addStyle(".readerContent .app_content {max-width: 100%; !important;}");
//GM_addStyle(".wr_whiteTheme .readerContent .app_content {background-color: #C7EDCC; !important;}");
//GM_addStyle(".wr_whiteTheme .readerChapterContent {color: #444444; !important;}");
//导航栏
//GM_addStyle(".readerTopBar {max-width: 100%; !important;}");
//GM_addStyle(".wr_whiteTheme .readerTopBar {background-color: #C7EDCC; !important;}");
//滚动条
//GM_addStyle("body::-webkit-scrollbar {display: none; !important;}");
//浮动菜单
//GM_addStyle(".readerControls {margin-left: 46%; !important;}");
//GM_addStyle(".readerControls {align-items: flex-end; !important;}");

const widths = [{width:"100%",align_items:"flex-end",margin_left:"45.5%"},{width:"80%",align_items:"center",margin_left:"41.5%"},{width:"默认",align_items:"flex-start",margin_left:""}];
const footers = [{titlet:"隐藏",padding:"20px"},{titlet:"显示",padding:"40px"},{titlet:"默认",padding:""}];
const scrollbars = [{titles:"滚动条:隐藏",displays:"none"},{titles:"滚动条:显示",displays:"auto"}];
const colors = [{titlec:"豆沙绿",RGB:"#C7EDCC"},{titlec:"杏仁黄",RGB:"#FAF9DE"},{titlec:"秋叶褐",RGB:"#FFF2E2"},{titlec:"胭脂红",RGB:"#FDE6E0"},{titlec:"海天蓝",RGB:"#DCE2F1"},{titlec:"葛巾紫",RGB:"#E9EBFE"},{titlec:"极光灰",RGB:"#EAEAEF"},{titlec:"青草绿",RGB:"#E3EDCD"},{titlec:"银河白",RGB:"#FFFFFF"}];
var numw,iw = GM_getValue("numw",0);
var numo,io = GM_getValue("numo",0);
var nums,is = GM_getValue("nums",0);
var numc,ic = GM_getValue("numc",0);

GM_registerMenuCommand("宽度:" + widths[iw].width,width)
if(widths[iw].width != "默认"){
GM_addStyle(`.readerContent .app_content, .readerTopBar {max-width: ${widths[iw].width}; !important;}`);
GM_addStyle(`.readerControls {align-items: ${widths[iw].align_items}; !important;}`);
GM_addStyle(`.readerControls {margin-left: ${widths[iw].margin_left}; !important;}`);}
function width(){
if(iw < widths.length-1){iw++;}
else{iw = 0;}
GM_setValue("numw",iw);
location.reload();
};

GM_registerMenuCommand("页脚:" + footers[io].titlet,Footer);
if(footers[io].titlet != "默认"){
GM_addStyle(`.readerFooter {padding: ${footers[io].padding};}`);
GM_addStyle(".readerFooter_button {font-weight: 600;}");}
if(footers[io].titlet == "隐藏"){
GM_addStyle(`.wr_whiteTheme .readerFooter_button {background-color: ${colors[ic].RGB}; !important;}`);}
function Footer(){
if(io < footers.length-1){io++;}
else{io = 0;}
GM_setValue("numo",io);
location.reload();
};

GM_registerMenuCommand(scrollbars[is].titles,scrollbar);
GM_addStyle(`body::-webkit-scrollbar {display: ${scrollbars[is].displays}; !important;}`);
function scrollbar(){
if(is < scrollbars.length-1){is++;}
else{is = 0;}
GM_setValue("nums",is);
location.reload();
};

GM_registerMenuCommand("背景色:" + colors[ic].titlec,color);
GM_addStyle(`.wr_whiteTheme .readerContent .app_content, .wr_whiteTheme .readerTopBar, .wr_whiteTheme .readerControls_fontSize, .wr_whiteTheme .readerControls_item {background-color: ${colors[ic].RGB}; !important;}`);
function color(){
if(ic < colors.length-1){ic++;}
else{ic = 0;}
GM_setValue("numc",ic);
location.reload();
};

const scrollTops = ["沉浸式阅读:开启","沉浸式阅读:关闭"];
let flagt = GM_getValue("flagt",true);
if(flagt){
GM_registerMenuCommand(scrollTops[0],scrollTop);
(function (){
/* globals jQuery, $, waitForKeyElements */
$(window).scroll(function(){
var scroll = $(this).scrollTop();
var paddingtop = $(".navBarOffset").css("padding-top");
var lineheight = $(".readerHeaderButton").css("line-height");
var scrollTop = parseFloat(paddingtop) + parseFloat(lineheight);
var readerTopBar = document.getElementsByClassName("readerTopBar")[0];
var readerControls = document.getElementsByClassName("readerControls")[0];
if(scroll <= scrollTop){
// 顶部显示
readerTopBar.style.display = "flex";
readerControls.style.display = "flex";
}else{
// 下滑隐藏
readerTopBar.style.display = "none";
readerControls.style.display = "none";
}
});
})();
}
else{
GM_registerMenuCommand(scrollTops[1],scrollTop);
}
function scrollTop(){
flagt = !flagt;
GM_setValue("flagt",flagt);
location.reload();
};
© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容