Greasy Fork is available in English.
调整旧式网页（指那些几乎没有排版，直接用 <h1>、<p> 等等标签从上到下堆下来的网页）的排版，将内容宽度限制为适合阅读的宽度，添加目录侧栏，点击可以跳转到对应位置。此脚本不影响“现代化的”网页（至少我写的时候是这么想的，如果有误伤，可以到 github 上告诉我）。
当前为
// ==UserScript==
// @name Good-For-Reading
// @name:zh-CN 旧式网页阅读优化
// @name:zh-TW 舊式網頁閲讀優化
// @namespace https://github.com/li-zyang/
// @version 1.0.1
// @description Limit the width of old-styled websites (which has it's text content expand across the whole wide window) and add a catalogue sidebar for a comfortble reading. This script does not affect those "modern" web pages (At least I tried to avoid that. If it fails, you can report the bug on github).
// @description:zh-CN 调整旧式网页（指那些几乎没有排版，直接用 <h1>、<p> 等等标签从上到下堆下来的网页）的排版，将内容宽度限制为适合阅读的宽度，添加目录侧栏，点击可以跳转到对应位置。此脚本不影响“现代化的”网页（至少我写的时候是这么想的，如果有误伤，可以到 github 上告诉我）。
// @description:zh-TW 調整舊式網頁（指那些幾乎沒有排版，直接用 <h1>、<p> 等等標簽從上到下堆下來的網頁）的排版，將内容寬度限制為適合閲讀的寬度，添加目錄側欄，點擊可以跳轉到對應位置。此脚本不影響“現代化的”網頁（至少我寫的時候是這麽想的，如果有誤傷，可以到 github 上告訴我）。
// @author 阿昭
// @require https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js
// @include *://*
// @grant GM_setValue
// @grant GM_getValue
// @noframes
// @note v1.0.0 beta 2020-02-20 Firstly published this script
// @note v1.0.1 2020-03-12 Fixed the bug problem of jquery conflict which makes some websites fails to load (#1)
// ==/UserScript==
$.noConflict();
(function($) {
let excluded_url_pat = [
/https?:\/\/jwc.scnu.edu.cn\/.*/,
/https?:\/\/ssp.scnu.edu.cn\/.*/,
// 信息化部是真的非主流
];
let forced_url_pat = [];
if ($('body *').length <= 1 || $('body *').length == undefined) {
return 0;
}
if (excluded_url_pat.find(function(chkurl) {
return chkurl.test(location.href);
}) != undefined) {
return 0;
}
let page_included = false;
if (forced_url_pat.find(function(chkurl) {
return chkurl.test(location.href);
}) != undefined) {
page_included = true;
}
function addSidebarTags(jQ_sidebar) {
function hlevel(DOM_hNode) {
return Number.parseInt(DOM_hNode.tagName.slice(1));
}
let pagetitles = $('.page-content').find('h1, h2, h3, h4, h5, h6');
let base_hlevel = 6;
for (let i = 0; i < pagetitles.length; i++) {
let title = pagetitles[i];
if (hlevel(title) < base_hlevel) {
base_hlevel = hlevel(title);
}
}
let cur_hlevel = base_hlevel;
let cur_clevel = 1;
for (let i = 0; i < pagetitles.length; i++) {
let title = pagetitles[i];
if (hlevel(title) > cur_hlevel) {
cur_hlevel = hlevel(title);
cur_clevel++;
} else if (hlevel(title) < cur_hlevel) {
cur_hlevel = hlevel(title);
cur_clevel--;
}
let cata_element = $('<a class="title-' + cur_clevel + '" href=javascript:void(0);></a>').text($(title).text().trim());
window.last_title_id++;
$(title).attr('data-title-id', window.last_title_id);
cata_element.attr('data-title-id', window.last_title_id);
cata_element.click({ 'titleID': cata_element.attr('data-title-id'), 'element': cata_element },
function(e) {
let target = $('.page-content *[data-title-id="' + e.data.titleID + '"]');
$('body').animate({
'scrollTop': target.offset().top - 50
}, 500);
}
)
jQ_sidebar.append(cata_element);
}
}
let pagestyle = `
@media screen
and (min-width: 1280px) {
:root {
--main-width: 832px;
--side-width: 256px;
}
}
@media screen
and (min-width: 640px)
and (max-width: 1280px) {
:root {
--main-width: 65%;
--side-width: 20%;
}
}
@media screen
and (max-width: 640px) {
:root {
--main-width: 100%;
--side-width: 0px;
}
}
html {
display: grid;
grid-template-columns: 100%;
justify-items: stretch;
}
body {
display: grid;
grid-template-columns: var(--side-width) var(--main-width);
grid-auto-flow: row dense;
justify-content: center;
align-content: start;
align-items: start;
grid-column-gap: 10px;
background: #e0e0e0;
}
body > .page-content {
grid-column: 2;
background: rgba(255, 255, 255, 0.3);
padding: 10px 10px 10px 10px;
overflow-x: scroll;
}
body > .side-bar {
background: rgba(255, 255, 255, 0.3);
width: 100%;
grid-column: 1;
grid-row: 1;
overflow: scroll;
padding: 0px 0px 20px 0px;
/* position: fixed; */
}
body > .side-bar .side-bar-header {
padding: 20px 10px 9px 10px;
font-size: 2em;
font-weight: bold;
white-space: pre;
}
body > .side-bar a {
text-decoration: none;
display: block;
line-height: 1.5em;
color: inherit;
}
body > .side-bar .title-1 {
padding: 3px 10px 0px 10px;
font-size: 1em;
font-weight: bold;
white-space: pre;
}
body > .side-bar .title-2 {
padding: 3px 30px 0px 10px;
font-size: 0.9em;
white-space: pre;
}
body > .side-bar .title-3 {
padding: 3px 50px 0px 10px;
font-size: 0.9em;
white-space: pre;
}
body > .side-bar .title-4 {
padding: 3px 70px 0px 10px;
font-size: 0.9em;
white-space: pre;
}
body > .side-bar .title-5 {
padding: 3px 90px 0px 10px;
font-size: 0.9em;
white-space: pre;
}
body > .side-bar .title-6 {
padding: 3px 110px 0px 10px;
font-size: 0.9em;
white-space: pre;
}
`
if (!(
$('body > div').length ||
$('body > table:first').length ||
$('body > header').length ||
$('body > section').length ||
$('body > footer').length ||
$('body > nav').length ||
$('body > artical').length ||
$('body > aside').length ||
$('body > form').length // So, for the reason why many people like to get the whole page wrapped inside a large form, who knows ...
) || page_included) {
let pagecontent = $('<div class="page-content"></div>').html($('body').html());
$('body > *').remove();
$('body').append(pagecontent);
$('body').append($("<style></style>").text(pagestyle));
let sidebar = $(`
<div class="side-bar">
<div class="side-bar-header">Catalogue</div>
</div>`);
window.last_title_id = 0;
addSidebarTags(sidebar);
$('body').prepend(sidebar);
}
})(jQuery);