晋江文学城极简阅读页面

极简阅读体验,统一布局与样式,支持多主题配色和字体调整

< Feedback on 晋江文学城极简阅读页面

Review: Good - script works

§
Posted: 2025-06-11

感谢您的脚本,非常好用!我借助ai在此基础上加入了评论区的显示(这对我很重要)然后顶部的元素稍微用flex布局调整了元素的位置,不会移位了。我也留下代码供后来者使用:

(function() {
'use strict';

// 添加CSS样式
const style = document.createElement('style');
style.textContent = `
/* 全局重置 */
/* 强力重置所有原站点样式 */
html, body {
background-color: #f8f9fa !important;
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important;
color: #333 !important;
line-height: 1.8 !important;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
overflow-x: hidden !important;
}

/* 彻底重置所有元素 */
* {
box-shadow: none !important;
text-shadow: none !important;
border-radius: 0 !important;
font-family: inherit !important;
}

/* 重置所有默认边距 */
div, p, h1, h2, h3, h4, h5, span, table, tr, td, a, font {
margin: 0 !important;
padding: 0 !important;
border: none !important;
line-height: inherit !important;
color: inherit !important;
}

/* ==================== 隐藏原始元素 ==================== */
/* 隐藏通用元素 */
#oneboolt,
.noveltitle:not(.jj-novel-header),
.novelbody:not(.jj-novel-content),
.noveltext:not(.jj-novel-content),
.readtitle:not(.jj-novel-header),
.readtd:not(.jj-novel-content),
table[width="984"],
table[width="100%"],
#comment_list,
#publishcomment,
td:has(> #comment_list),
.readcontrolbar,
.uninterested-hide,
.danmu,
.danmu_row,
#danmu_main,
.danmu_total_str,
marquee,
iframe,
#qrCodeDiv,
#footer,
div#footer,
body > div#footer,
[style*="z-index:333333"],
div.footer,
.copyright,
#copyright,
.bottomlinks,
#sitebottom,
div[class*="footer"],
div[align="center"]:has(> table):nth-last-of-type(-n+2) {
display: none !important;
}

/* 隐藏书签和收藏相关元素 */
div[align="right"]:has(> div[style*="float:right"]),
div[style*="float:right"][style*="height: 25px"],
div:has(> img[src*="bookmark.gif"]),
img[src*="bookmark.gif"],
span.favorite_novel,
span[id*="favorite_"],
span[id="report_action"],
span[id="yrt3"],
div[style*="width: 100%; text-align: center"]:has(span[id*="favorite_"]),
div[style*="width: 100%; text-align: center"]:has(span[id="report_action"]),
div[id="float_favorite"],
div[id="mongolia_layer"],
div[id="report_box"],
div[id*="favoriteshow_"],
span[id="chapterJurisdiction"],
font[color="#009900"]:has(> span.favorite_novel),
div.float_favorite,
a[href*="freegold"],
button[onclick*="FavoriteClass"],
div[class*="addFavoritClass"] {
display: none !important;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}

/* 隐藏原始返回顶部按钮 */
a[href="#top"],
a[href="javascript:scroll(0,0)"],
a[onclick*="scroll(0,0)"],
#jj-top-link,
a[id="booktext_top"],
[onclick*="window.scrollTo"],
a[href^="javascript"][onclick*="window.scroll"],
div[style*="position: fixed"][style*="right:"][style*="bottom:"][style*="cursor: pointer"]:not(.back-to-top),
div[style*="width: 18px"][style*="line-height: 1.2"][style*="position: fixed"][style*="right: 10px"],
div[style*="background-color: rgb(0, 0, 0)"][style*="position: fixed"][title="返回顶部"] {
display: none !important;
pointer-events: none !important;
}

/* 正文容器 */
.jj-container {
max-width: 800px !important;
margin: 20px auto !important;
padding: 0 !important;
background-color: #fff !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
border-radius: 8px !important;
overflow: hidden !important;
}

/* 小说标题区域 - 单行布局 */
.jj-novel-header {
padding: 15px 40px !important;
text-align: left !important;
border-bottom: 1px solid #E0E0E0 !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
}

/* 小说标题 */
.jj-novel-title {
font-size: 18px !important;
font-weight: 700 !important;
color: #222 !important;
margin: 0 !important;
flex-shrink: 0 !important;
}

/* 作者信息 */
.jj-novel-author {
font-size: 18px !important;
color: #666 !important;
margin: 0 !important;
flex-shrink: 0 !important;
}

/* 正文内容区域 - 局左排版 */
.jj-novel-content {
padding: 35px 40px !important;
text-align: left !important;
}

/* 章节导航区域 - 居中 */
.jj-chapter-nav {
padding: 25px 0 !important;
text-align: center !important;
border-top: 1px solid #E0E0E0 !important;
}

/* ==================== 元素样式 ==================== */
/* 正文段落 */
.jj-novel-content p {
margin: 1em 0 !important;
text-indent: 2em !important;
font-size: 18px !important;
line-height: 2 !important;
color: #2c3e50 !important;
letter-spacing: 0.02em !important;
}

/* 作者有话说基础样式 */
.jj-author-note,
#note_danmu_wrapper,
.note_main,
.note_content {
margin: 20px 0 !important;
padding: 20px 25px !important;
border-radius: 8px !important;
font-size: 16px !important;
line-height: 1.7 !important;
transition: all 0.3s ease !important;
}

/* 默认主题作者有话说 */
.theme-default .jj-author-note,
.theme-default #note_danmu_wrapper,
.theme-default .note_main,
.theme-default .note_content {
background-color: #E5E5E5 !important;
color: #333333 !important;
border: 1px solid #D8D8D8 !important;
}

/* 护眼主题作者有话说 */
.theme-eye-care .jj-author-note,
.theme-eye-care #note_danmu_wrapper,
.theme-eye-care .note_main,
.theme-eye-care .note_content {
background-color: #D8E5C0 !important;
color: #2C3E50 !important;
border: 1px solid #C5D4A9 !important;
}

/* 专注主题作者有话说 */
.theme-focus .jj-author-note,
.theme-focus #note_danmu_wrapper,
.theme-focus .note_main,
.theme-focus .note_content {
background-color: #F5ECD8 !important;
color: #3C3C3C !important;
border: 1px solid #E6D5B8 !important;
}

/* 夜间主题作者有话说 */
.theme-dark .jj-author-note,
.theme-dark #note_danmu_wrapper,
.theme-dark .note_main,
.theme-dark .note_content {
background-color: #2D2D30 !important;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 导航链接 */
.jj-nav-link {
display: inline-block !important;
margin: 0 15px !important;
padding: 10px 20px !important;
background-color: #f8f9fa !important;
border: 1px solid #e0e0e0 !important;
border-radius: 4px !important;
color: #444 !important;
font-size: 15px !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}

.jj-nav-link:hover {
background-color: #e8f0fe !important;
color: #0d66d0 !important;
border-color: #c0d7fe !important;
}

/* 章节选择下拉列表 */
.jj-chapter-select {
display: inline-block !important;
margin: 0 15px !important;
padding: 10px 15px !important;
background-color: #f8f9fa !important;
border: 1px solid #e0e0e0 !important;
border-radius: 4px !important;
color: #444 !important;
font-size: 15px !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
min-width: 150px !important;
text-align: center !important;
outline: none !important;
appearance: auto !important;
-webkit-appearance: auto !important;
}

.jj-chapter-select:hover, .jj-chapter-select:focus {
background-color: #e8f0fe !important;
color: #0d66d0 !important;
border-color: #c0d7fe !important;
}

/* 顶部导航栏样式 */
#sitetop {
position: relative !important;
background-color: #fff !important;
border-bottom: 1px solid #eee !important;
padding: 8px 20px !important;
font-size: 14px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
z-index: 1001 !important;
width: 100% !important;
box-sizing: border-box !important;
}

/* 左侧时间显示 */
#sitetop #serverTime {
color: #666 !important;
font-size: 13px !important;
}

/* 右侧导航菜单 */
#sitetop .top_right #t_user_signin a{
color:#fff!important;
}
#sitetop .toplogin {
float: right !important;
}
#sitetop .toplogin .top_right{
display: flex;
justify-content: center;
align-items: center;
gap: 0 10px;
}
#t_user_sms{
display:none;
}
ul.cssMenu li:hover > a > span ,ul.cssMenu span{
background-image: none!important;
}
#sitetop #t_user_nav .cssMenu ul a{
font-size:12px!important;
display: flex!important;
align-items: center;
}
#sitetop .cssMenu ul a:hover {
background-color: #ff5925 !important;
}
#sitetop .top_right .cssMenu > li > a:hover{
color:#fff!important;
}

/* 用户信息样式 */
#sitetop #t_user_info {
display: inline-block !important;
margin-right: 15px !important;
}

#sitetop #t_user_info strong {
font-weight: normal !important;
}

#sitetop #t_user_info a {
color: #333 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}

#sitetop #t_user_info a:hover {
color: #1e88e5 !important;
}

/* 导航菜单样式 */
#sitetop .cssMenu {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 15px !important;
}

#sitetop .cssMenu > li {
position: relative !important;
display: inline-block !important;
}

#sitetop .cssMenu > li > a {
color: #333 !important;
text-decoration: none !important;
padding: 5px 8px !important;
display: inline-block !important;
transition: color 0.2s ease !important;
}

#sitetop .cssMenu > li > a:hover {
color: #1e88e5 !important;
}

/* 下拉菜单样式 */
#sitetop .cssMenu ul {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
background: #fff !important;
border: 1px solid #eee !important;
border-radius: 4px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
min-width: 150px !important;
padding: 5px 0 !important;
z-index: 1002 !important;
}

#sitetop .cssMenu li:hover > ul {
display: block !important;
}

#sitetop .cssMenu ul li {
display: block !important;
}

#sitetop .cssMenu ul a {
color: #333 !important;
text-decoration: none !important;
padding: 8px 15px !important;
display: block !important;
transition: all 0.2s ease !important;
font-size: 13px !important;
}

#sitetop .cssMenu ul a:hover {
background-color: #f5f5f5 !important;
color: #1e88e5 !important;
}

/* 签到按钮样式 */
#sitetop #t_user_signin a {
background:#ff5925 !important;
color: #ff5925 !important;
text-decoration: none !important;
padding: 2px 6px !important;
border: 1px solid #ff5925 !important;
border-radius: 2px !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
}

#sitetop #t_user_signin a:hover {
background-color: #ff5925 !important;
color: #fff !important;
}

/* 客户号样式 */
#sitetop .readerid {
color: #666 !important;
font-size: 13px !important;
margin-left: 5px !important;
}

#sitetop .readerid a {
color: #666 !important;
text-decoration: none !important;
}

#sitetop .readerid img {
vertical-align: middle !important;
cursor: pointer !important;
}

/* 夜间模式适配 */
.theme-dark #sitetop {
background-color: #2D2D30 !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark #sitetop a,
.theme-dark #sitetop #serverTime,
.theme-dark #sitetop .readerid,
.theme-dark #sitetop #t_user_info strong {
color: #fff !important;
}

.theme-dark #sitetop .cssMenu ul {
background-color: #2D2D30 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark #sitetop .cssMenu ul a:hover {
background-color: #4A4A4D !important;
}

/* 返回顶部按钮 */
.back-to-top {
position: fixed !important;
bottom: 30px !important;
right: 30px !important;
width: 40px !important;
height: 40px !important;
background-color: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
color: #666 !important;
text-align: center !important;
border-radius: 50% !important;
cursor: pointer !important;
z-index: 9999 !important;
font-size: 20px !important;
line-height: 40px !important;
transition: all 0.2s ease !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.back-to-top:hover {
transform: scale(1.05) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* 工具栏触发按钮 */
.jj-toolbar-trigger {
position: fixed !important;
top: 50% !important;
right: 30px !important;
transform: translateY(-50%) !important;
width: 40px !important;
height: 40px !important;
background-color: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-radius: 50% !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
cursor: pointer !important;
z-index: 9999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
color: #666666 !important;
}

.jj-toolbar-trigger:hover {
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
color: #333333 !important;
}

/* 夜间模式适配 */
.theme-dark .jj-toolbar-trigger {
background-color: rgba(74, 74, 77, 0.95) !important;
color: rgba(255, 255, 255, 0.8) !important;
}

.theme-dark .jj-toolbar-trigger:hover {
background-color: rgba(74, 74, 77, 1) !important;
color: rgba(255, 255, 255, 1) !important;
}
/* 主题设置工具栏 */
.jj-toolbar {
position: fixed !important;
top: 50% !important;
right: 80px !important;
transform: translateY(-50%) !important;
width: 240px !important;
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
padding: 15px !important;
background-color: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-radius: 12px !important;
z-index: 9998 !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translate(10px, -50%) !important;
}

.jj-toolbar.expanded {
opacity: 1 !important;
visibility: visible !important;
transform: translate(0, -50%) !important;
}

.jj-toolbar-trigger svg {
width: 24px !important;
height: 24px !important;
fill: #666 !important;
transition: transform 0.3s ease !important;
}

/* 字体选择组样式 */
.jj-font-family-group {
display: flex !important;
gap: 6px !important;
padding: 10px !important;
background-color: rgba(0, 0, 0, 0.06) !important;
border-radius: 6px !important;
}

.jj-font-family-btn {
flex: 1 !important;
padding: 6px 12px !important;
border: none !important;
background: none !important;
color: #666 !important;
cursor: pointer !important;
font-size: 14px !important;
border-radius: 4px !important;
transition: all 0.2s ease !important;
position: relative !important;
}

.jj-font-family-btn[data-font*="PingFang"] {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei" !important;
}

.jj-font-family-btn[data-font*="Songti"] {
font-family: "Songti SC", SimSun, "宋体" !important;
}

.jj-font-family-btn:hover {
color: #333 !important;
background: rgba(0, 0, 0, 0.05) !important;
}

.jj-font-family-btn.active {
background: #fff !important;
color: #333 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* 主题卡片网格布局 */
.jj-theme-group {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
padding: 8px !important;
background-color: rgba(0, 0, 0, 0.03) !important;
border-radius: 8px !important;
}

/* 主题卡片 */
.jj-theme-card {
position: relative !important;
aspect-ratio: 16/9 !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
font-weight: 500 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.jj-theme-card.active {
border: 2px solid #1e88e5 !important;
}

.jj-theme-card:hover {
border-color: #1e88e5 !important;
}

/* 主题预览 */
.jj-theme-preview {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
gap: 2px !important;
padding: 6px !important;
box-sizing: border-box !important;
}

/* 预览文本 */
.jj-theme-preview .preview-text {
font-size: 13px !important;
font-weight: 500 !important;
}

.jj-theme-preview .preview-name {
font-size: 11px !important;
font-weight: normal !important;
opacity: 0.8 !important;
}

/* 默认主题预览 */
.jj-theme-preview.default {
background-color: #EEEDED !important;
color: #333333 !important;
}

/* 护眼主题预览 */
.jj-theme-preview.eye-care {
background-color: #E6EFD5 !important;
color: #2C3E50 !important;
}

/* 专注主题预览 */
.jj-theme-preview.focus {
background-color: #FFFCF4 !important;
color: #3C3C3C !important;
}

/* 夜间主题预览 */
.jj-theme-preview.dark {
background-color: #4A4A4D !important;
color: #FFFFFF !important;
}

/* 工具栏标题 */
.jj-toolbar-title {
font-size: 14px !important;
font-weight: 500 !important;
color: #333 !important;
margin-bottom: 5px !important;
text-align: center !important;
}

/* 字体大小调整组 */
.jj-font-size-group {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 10px !important;
background-color: rgba(0, 0, 0, 0.03) !important;
border-radius: 8px !important;
}

/* 字体大小按钮组 */
.jj-font-size-buttons {
display: flex !important;
align-items: center !important;
background: rgba(0, 0, 0, 0.06) !important;
border-radius: 6px !important;
padding: 2px !important;
}

/* 字体大小按钮 */
.jj-font-size-btn {
flex: 1 !important;
padding: 6px 12px !important;
border: none !important;
background: none !important;
color: #666 !important;
cursor: pointer !important;
font-size: 14px !important;
border-radius: 4px !important;
transition: all 0.2s ease !important;
position: relative !important;
}

.jj-font-size-btn:hover {
color: #333 !important;
background: rgba(0, 0, 0, 0.05) !important;
}

.jj-font-size-btn.active {
background: #fff !important;
color: #333 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* 字体大小进度点 */
.jj-font-size-dots {
display: flex !important;
justify-content: center !important;
gap: 4px !important;
padding: 4px 0 !important;
}

.jj-font-size-dot {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background-color: rgba(0, 0, 0, 0.1) !important;
transition: all 0.2s ease !important;
}

.jj-font-size-dot.active {
background-color: #1e88e5 !important;
}

/* 主题名称标签 */
.jj-theme-name {
position: absolute !important;
bottom: 8px !important;
left: 8px !important;
right: 8px !important;
font-size: 12px !important;
font-weight: 500 !important;
text-align: center !important;
padding: 4px 8px !important;
border-radius: 4px !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}

/* 主题样式 */
/* 默认主题(纸张配色) */
.theme-default {
background-color: #E5E5E5 !important;
}
.theme-default body {
background-color: #E5E5E5 !important;
}
.theme-default .jj-container {
background-color: #EEEDED !important;
}
.theme-default .jj-novel-content p,
.theme-default .jj-novel-content div,
.theme-default .jj-novel-content span,
.theme-default .jj-novel-content font {
color: #333333 !important;
}
.theme-default .jj-author-note {
background-color: #E5E5E5 !important;
border-left-color: #D8D8D8 !important;
color: #333333 !important;
}
.theme-default .jj-nav-link {
background-color: #E5E5E5 !important;
border-color: #D8D8D8 !important;
color: #444444 !important;
}
.theme-default .jj-nav-link:hover {
background-color: #D8D8D8 !important;
color: #222222 !important;
}
.theme-default .jj-novel-header {
border-bottom-color: #D0D0D0 !important;
}
.theme-default .jj-chapter-nav {
border-top-color: #D0D0D0 !important;
}

/* 护眼主题 */
.theme-eye-care {
background-color: #D8E5C0 !important;
}
.theme-eye-care body {
background-color: #D8E5C0 !important;
}
.theme-eye-care .jj-container {
background-color: #E6EFD5 !important;
}
.theme-eye-care .jj-novel-content p,
.theme-eye-care .jj-novel-content div,
.theme-eye-care .jj-novel-content span,
.theme-eye-care .jj-novel-content font {
color: #2C3E50 !important;
}
.theme-eye-care .jj-author-note {
background-color: #D8E5C0 !important;
border-left-color: #C5D4A9 !important;
color: #2C3E50 !important;
}
.theme-eye-care .jj-nav-link {
background-color: #DCE5C9 !important;
border-color: #C5D4A9 !important;
color: #2C3E50 !important;
}
.theme-eye-care .jj-nav-link:hover {
background-color: #C5D4A9 !important;
color: #1B2E3F !important;
}
.theme-eye-care .jj-novel-header {
border-bottom-color: #B8C7A0 !important;
}
.theme-eye-care .jj-chapter-nav {
border-top-color: #B8C7A0 !important;
}

/* 专注主题 */
.theme-focus {
background-color: #F5ECD8 !important;
}
.theme-focus body {
background-color: #F5ECD8 !important;
}
.theme-focus .jj-container {
background-color: #FFFCF4 !important;
}
.theme-focus .jj-novel-content p,
.theme-focus .jj-novel-content div,
.theme-focus .jj-novel-content span,
.theme-focus .jj-novel-content font {
color: #3C3C3C !important;
}
.theme-focus .jj-author-note {
background-color: #F5ECD8 !important;
border-left-color: #E6D5B8 !important;
color: #3C3C3C !important;
}
.theme-focus .jj-nav-link {
background-color: #FFF7E6 !important;
border-color: #E6D5B8 !important;
color: #3C3C3C !important;
}
.theme-focus .jj-nav-link:hover {
background-color: #E6D5B8 !important;
color: #2C2C2C !important;
}
.theme-focus .jj-novel-header {
border-bottom-color: #D9C8A7 !important;
}
.theme-focus .jj-chapter-nav {
border-top-color: #D9C8A7 !important;
}

/* 夜间主题 */
.theme-dark {
background-color: #2D2D30 !important;
}
.theme-dark body {
background-color: #2D2D30 !important;
}
.theme-dark .jj-container {
background-color: #4A4A4D !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
}
.theme-dark .jj-novel-content p,
.theme-dark .jj-novel-content div,
.theme-dark .jj-novel-content span,
.theme-dark .jj-novel-content font {
color: #FFFFFF !important;
}
.theme-dark .jj-author-note {
background-color: #2D2D30 !important;
border-left-color: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
}
.theme-dark .jj-nav-link {
background-color: #5A5A5D !important;
border-color: #666666 !important;
color: #FFFFFF !important;
}
.theme-dark .jj-nav-link:hover {
background-color: #666666 !important;
color: #FFFFFF !important;
}
.theme-dark .jj-novel-title,
.theme-dark .jj-novel-title a {
color: #FFFFFF !important;
}
.theme-dark .jj-novel-author,
.theme-dark .jj-novel-author a {
color: #BBBBBB !important;
}
.theme-dark .jj-toolbar {
background-color: rgba(74, 74, 77, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.theme-dark .jj-toolbar-title {
color: #FFFFFF !important;
}
.theme-dark .jj-font-size-btn {
color: #FFFFFF !important;
}
.theme-dark .jj-font-size-btn:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.theme-dark .jj-font-size-dot {
background-color: rgba(255, 255, 255, 0.2) !important;
}
.theme-dark .jj-font-size-dot.active {
background-color: #FFFFFF !important;
}
.theme-dark .jj-chapter-select {
background-color: #5A5A5D !important;
border-color: #666666 !important;
color: #FFFFFF !important;
}
.theme-dark .jj-chapter-select:hover {
background-color: #666666 !important;
}
.theme-dark .jj-novel-header {
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.theme-dark .jj-chapter-nav {
border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* 评论区 */
.jj-comment-section {
padding: 20px !important;
border-top: 1px solid #e0e0e0 !important;
}

.jj-comment {
margin-bottom: 10px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid #f0f0f0 !important;
}

.jj-comment-time {
font-size: 12px !important;
color: #888 !important;
margin-bottom: 4px !important;
}

.jj-comment-content {
font-size: 14px !important;
color: #333 !important;
}

#comment_list .readcontrolbar, #comment_list .agree_block, #comment_list .reply_submit,
#comment_list .uninterested-reader, #comment_list .tdtitle > .coltext > a,
#comment_list .blacktext, #comment_list .redcommentchapter {
display: none !important;
}

`;
document.head.appendChild(style);

// 防抖函数
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}

// 页面加载后执行
window.addEventListener('load', function() {
// 清理无关元素
function removeElements() {
try {
const selectors = [
'div[style*="float:right"], img[src*="bookmark.gif"], span.favorite_novel',
'span[id*="favorite_"], span[id="report_action"], span[id="yrt3"]',
'div[id="float_favorite"], div[id="mongolia_layer"], div[id="report_box"]',
'div[id*="favoriteshow_"], span[id="chapterJurisdiction"], a[href*="freegold"]',
'button[onclick*="FavoriteClass"], div[class*="addFavoritClass"]',
'a[href="#top"], a[href="javascript:scroll(0,0)"], a[onclick*="scroll(0,0)"]'
].join(',');
document.querySelectorAll(selectors).forEach(el => {
if (!el.dataset.removed) {
el.style.display = 'none';
el.dataset.removed = 'true';
}
});
} catch (e) {
console.log('removeElements error:', e);
}
}

// 获取评论
function getComments() {
const start = performance.now();
const comments = [];
try {
const commentElements = document.querySelectorAll('#comment_list > div[id^="comment_"]:not([data-processed])');
commentElements.forEach(comment => {
const timeEl = comment.querySelector('.tdtitle .coltext');
const contentEl = comment.querySelector('.readbody span[id^="mormalcomment_"]');
const time = timeEl?.textContent.match(/发表时间:([^<]+)/)?.[1]?.trim();
const content = contentEl?.textContent?.trim();
if (time && content) {
comments.push({ time, content });
comment.dataset.processed = 'true';
}
});
} catch (e) {
console.log('getComments error:', e);
}
console.log('getComments took:', performance.now() - start, 'ms');
return comments;
}

// 更新评论区
function updateCommentSection(container) {
const start = performance.now();
try {
let commentSection = container.querySelector('.jj-comment-section');
const comments = getComments();
if (comments.length) {
if (!commentSection) {
commentSection = document.createElement('div');
commentSection.className = 'jj-comment-section';
container.appendChild(commentSection);
}
commentSection.innerHTML = `

评论

${comments.map(comment => `

${comment.time}
${comment.content}

`).join('')}
`;
}
} catch (e) {
console.log('updateCommentSection error:', e);
}
console.log('updateCommentSection took:', performance.now() - start, 'ms');
}

// 创建页面布局
function createNewLayout() {
const start = performance.now();
try {
removeElements();

// 获取标题和作者
let novelTitle = '', novelAuthor = '', authorHref = '', novelHref = '';
const titleEl = document.querySelector('.noveltitle h1, .noveltitle h2, .readtitle h1, .readtitle h2');
if (titleEl) {
const titleLink = titleEl.querySelector('a');
novelTitle = titleLink ? titleLink.textContent.trim() : titleEl.textContent.trim();
novelHref = titleLink ? titleLink.getAttribute('href') : '';
}

if (!novelHref) {
const match = window.location.href.match(/novelid=(\d+)/);
if (match) novelHref = `http://www.jjwxc.net/onebook.php?novelid=${match[1]}`;
}

const authorSpan = Array.from(document.querySelectorAll('span')).find(s => s.textContent.includes('作者:'));
if (authorSpan) {
const authorLink = authorSpan.querySelector('a');
novelAuthor = authorLink ? authorLink.textContent.trim() : '';
authorHref = authorLink ? authorLink.getAttribute('href') : '';
}
if (!novelAuthor) {
const authorLink = document.querySelector('a[href*="oneauthor.php"]');
if (authorLink) {
novelAuthor = authorLink.textContent.trim();
authorHref = authorLink.getAttribute('href');
}
}

// 获取正文
let contentHTML = '';
const contentEl = document.querySelector('.noveltext, .readtd, .novelbody[style*="grid-column:1"]:not(:has(div#copyrightlist))');
if (contentEl) {
contentHTML = contentEl.innerHTML;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = contentHTML;
tempDiv.querySelectorAll('div[style*="width: 100%; text-align: center"], div[style*="float:right"]').forEach(div => div.remove());
contentHTML = tempDiv.innerHTML;
}

// 获取导航
let prevLink = null, nextLink = null, tocLink = null;
document.querySelectorAll('a[href*="onebook.php"]').forEach(link => {
const text = link.textContent.trim();
if (text.includes('上一章')) prevLink = { href: link.getAttribute('href'), text };
else if (text.includes('下一章')) nextLink = { href: link.getAttribute('href'), text };
else if (text.includes('目录')) tocLink = { href: link.getAttribute('href'), text };
});

const chapterSelect = document.querySelector('#chapter_list') || Array.from(document.querySelectorAll('select')).find(s =>
Array.from(s.options).some(o => o.text.match(/第.*章|序章|楔子|尾声|番外/))
);

// 创建布局
const container = document.createElement('div');
container.className = 'jj-container';

const header = document.createElement('div');
header.className = 'jj-novel-header';
header.innerHTML = `

${novelHref ? `${novelTitle}` : novelTitle}

${novelAuthor ? `

` : ''}
`;
container.appendChild(header);

const content = document.createElement('div');
content.className = 'jj-novel-content';
content.innerHTML = contentHTML;
container.appendChild(content);

const nav = document.createElement('div');
nav.className = 'jj-chapter-nav';
if (prevLink) nav.innerHTML += `${prevLink.text}`;
if (chapterSelect) {
chapterSelect.classList.add('jj-chapter-select');
nav.appendChild(chapterSelect);
chapterSelect.addEventListener('change', () => chapterSelect.value && (window.location.href = chapterSelect.value));
}
if (nextLink) nav.innerHTML += `${nextLink.text}`;
if (tocLink && !chapterSelect) nav.innerHTML += `${tocLink.text}`;
container.appendChild(nav);

// 隐藏原有内容
document.querySelectorAll('body > *:not(#sitetop):not(style):not(script):not(.back-to-top):not(.jj-toolbar):not(.jj-toolbar-trigger)').forEach(el => {
if (el !== container) el.style.display = 'none';
});

document.body.appendChild(container);
updateCommentSection(container);

// 监听评论区变化
const commentObserver = new MutationObserver(debounce(() => updateCommentSection(container), 300));
const commentList = document.querySelector('#comment_list');
if (commentList) {
commentObserver.observe(commentList, { childList: true, subtree: true });
}

createToolbar();
initializeSettings();
} catch (e) {
console.log('createNewLayout error:', e);
}
console.log('createNewLayout took:', performance.now() - start, 'ms');
}

// 主题切换
function setTheme(theme) {
const start = performance.now();
try {
document.body.classList.remove('theme-default', 'theme-eye-care', 'theme-focus', 'theme-dark');
document.body.classList.add(`theme-${theme}`);
localStorage.setItem('jj-theme', theme);
document.querySelectorAll('.jj-theme-card').forEach(card => {
card.classList.toggle('active', card.dataset.theme === theme);
});
} catch (e) {
console.log('setTheme error:', e);
}
console.log('setTheme took:', performance.now() - start, 'ms');
}

// 字体切换
function setFontFamily(fontFamily) {
const start = performance.now();
try {
const content = document.querySelector('.jj-novel-content');
if (content) {
const textElements = content.querySelectorAll('p, div, span, font');
textElements.forEach(el => {
el.style.setProperty('font-family', fontFamily, 'important');
});
}
localStorage.setItem('jj-font-family', fontFamily);
updateFontFamilyUI(fontFamily);
} catch (e) {
console.log('setFontFamily error:', e);
}
console.log('setFontFamily took:', performance.now() - start, 'ms');
}

// 更新字体选择UI
function updateFontFamilyUI(fontFamily) {
try {
document.querySelectorAll('.jj-font-family-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.font === fontFamily);
});
} catch (e) {
console.log('updateFontFamilyUI error:', e);
}
}

// 字体大小调整
function adjustFontSize(delta) {
const start = performance.now();
try {
const content = document.querySelector('.jj-novel-content');
if (!content) return;
let currentSize = parseInt(localStorage.getItem('jj-font-size')) || 16;
const newSize = Math.min(Math.max(currentSize + delta * 2, 14), 24);
const textElements = content.querySelectorAll('p, div, span, font');
textElements.forEach(el => {
el.style.setProperty('font-size', `${newSize}px`, 'important');
el.style.setProperty('line-height', '1.8', 'important');
});
localStorage.setItem('jj-font-size', newSize);
updateFontSizeUI(newSize);
} catch (e) {
console.log('adjustFontSize error:', e);
}
console.log('adjustFontSize took:', performance.now() - start, 'ms');
}

// 更新字体大小UI
function updateFontSizeUI(size) {
try {
const buttons = document.querySelectorAll('.jj-font-size-btn');
buttons[0].classList.toggle('active', size <= 14);
buttons[1].classList.toggle('active', size >= 24);
} catch (e) {
console.log('updateFontSizeUI error:', e);
}
}

// 初始化设置
function initializeSettings() {
try {
const savedTheme = localStorage.getItem('jj-theme') || 'default';
setTheme(savedTheme);

const savedFontFamily = localStorage.getItem('jj-font-family') || '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"';
setFontFamily(savedFontFamily);

const savedFontSize = parseInt(localStorage.getItem('jj-font-size')) || 16;
adjustFontSize((savedFontSize - 16) / 2);
} catch (e) {
console.log('initializeSettings error:', e);
}
}

// 创建工具栏
function createToolbar() {
const trigger = document.createElement('div');
trigger.className = 'jj-toolbar-trigger';
trigger.textContent = '设置';
document.body.appendChild(trigger);

const toolbar = document.createElement('div');
toolbar.className = 'jj-toolbar';
toolbar.innerHTML = `

阅读设置





黑体
宋体

默认
护眼
专注
夜间

`;
document.body.appendChild(toolbar);

trigger.addEventListener('click', () => {
toolbar.classList.toggle('expanded');
});

toolbar.querySelectorAll('.jj-font-size-btn').forEach(btn => {
btn.addEventListener('click', () => {
const action = btn.dataset.action;
adjustFontSize(action === 'increase' ? 1 : -1);
});
});

toolbar.querySelectorAll('.jj-font-family-btn').forEach(btn => {
btn.addEventListener('click', () => setFontFamily(btn.dataset.font));
});

toolbar.querySelectorAll('.jj-theme-card').forEach(card => {
card.addEventListener('click', () => setTheme(card.dataset.theme));
});

document.addEventListener('click', e => {
if (!toolbar.contains(e.target) && !trigger.contains(e.target)) {
toolbar.classList.remove('expanded');
}
});
}

// 返回顶部按钮
const backToTop = document.createElement('div');
backToTop.className = 'back-to-top';
backToTop.textContent = '↑';
backToTop.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' });
document.body.appendChild(backToTop);

function toggleBackToTop() {
backToTop.style.display = window.scrollY > 200 ? 'block' : 'none';
}
window.addEventListener('scroll', toggleBackToTop);
toggleBackToTop();

// 等待DOM就绪
function waitForDOM() {
if (document.querySelector('.noveltext, .readtd, #comment_list')) {
createNewLayout();
} else {
setTimeout(waitForDOM, 200);
}
}
waitForDOM();
});
})();

Post reply

Sign in to post a reply.