f8894dd3f3
- updateNavButtons: 改用数组索引查找，而非简单的+1/-1 - updateSidebarHighlight: 使用parseFloat比较章节ID - updateMobileTOCHighlight: 使用parseFloat比较章节ID - 更新版本号强制刷新缓存
582 lines
25 KiB
HTML
582 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>洛兰的风 - 阿拉德：剑之回响</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
||
--text-primary: #e0e0e0;
|
||
--text-secondary: #888;
|
||
--accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
--border-color: rgba(255,255,255,0.1);
|
||
--btn-bg: rgba(255,255,255,0.1);
|
||
--btn-hover: rgba(255,255,255,0.2);
|
||
}
|
||
|
||
[data-theme="light"] {
|
||
--bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
--text-primary: #333;
|
||
--text-secondary: #666;
|
||
--border-color: rgba(0,0,0,0.1);
|
||
--btn-bg: rgba(0,0,0,0.05);
|
||
--btn-hover: rgba(0,0,0,0.1);
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Noto Serif SC', serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
line-height: 1.8;
|
||
min-height: 100vh;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
padding-bottom: 120px;
|
||
}
|
||
|
||
/* 顶部导航 */
|
||
.top-nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0,0,0,0.3);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid var(--border-color);
|
||
z-index: 1000;
|
||
padding: 10px 20px;
|
||
}
|
||
|
||
.top-nav-content {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-link {
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
font-family: 'Noto Sans SC', sans-serif;
|
||
font-size: 14px;
|
||
padding: 8px 16px;
|
||
background: var(--btn-bg);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background: var(--btn-hover);
|
||
}
|
||
|
||
.chapter-header {
|
||
text-align: center;
|
||
padding: 80px 0 40px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.chapter-number {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 4px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.chapter-title {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
background: var(--accent-gradient);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.chapter-meta {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.chapter-content {
|
||
font-size: 18px;
|
||
line-height: 2;
|
||
text-align: justify;
|
||
}
|
||
|
||
.chapter-content p {
|
||
margin-bottom: 1.5em;
|
||
text-indent: 2em;
|
||
}
|
||
|
||
.chapter-content p:first-of-type::first-letter {
|
||
font-size: 3em;
|
||
float: left;
|
||
line-height: 1;
|
||
margin-right: 8px;
|
||
margin-top: -5px;
|
||
background: var(--accent-gradient);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* 固定底部导航 */
|
||
.fixed-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0,0,0,0.3);
|
||
backdrop-filter: blur(10px);
|
||
border-top: 1px solid var(--border-color);
|
||
z-index: 1000;
|
||
padding: 15px 20px;
|
||
}
|
||
|
||
.fixed-nav-content {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-btn {
|
||
padding: 12px 24px;
|
||
background: var(--btn-bg);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
font-family: 'Noto Sans SC', sans-serif;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-btn:hover {
|
||
background: var(--btn-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.nav-btn.disabled {
|
||
opacity: 0.3;
|
||
cursor: not-allowed;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 右侧滚动按钮 */
|
||
.scroll-buttons {
|
||
position: fixed;
|
||
right: 20px;
|
||
bottom: 90px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.scroll-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
background: var(--btn-bg);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-primary);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
transition: all 0.3s ease;
|
||
font-family: 'Noto Sans SC', sans-serif;
|
||
}
|
||
|
||
.scroll-btn:hover {
|
||
background: var(--btn-hover);
|
||
}
|
||
|
||
/* 侧边栏 - 标题固定，内容滚动 */
|
||
.sidebar {
|
||
position: fixed;
|
||
right: 20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: rgba(0,0,0,0.5);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border-color);
|
||
width: 200px;
|
||
max-height: 70vh;
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sidebar-title {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sidebar-content {
|
||
overflow-y: auto;
|
||
padding: 10px 20px 20px;
|
||
flex: 1;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: transparent transparent;
|
||
transition: scrollbar-color 0.3s ease;
|
||
}
|
||
|
||
.sidebar-content:hover {
|
||
scrollbar-color: rgba(255,255,255,0.3) transparent;
|
||
}
|
||
|
||
.sidebar-content::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.sidebar-content::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.sidebar-content::-webkit-scrollbar-thumb {
|
||
background: transparent;
|
||
border-radius: 3px;
|
||
transition: background 0.3s ease;
|
||
}
|
||
|
||
.sidebar-content:hover::-webkit-scrollbar-thumb {
|
||
background: rgba(255,255,255,0.3);
|
||
}
|
||
|
||
.sidebar-content:hover::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(255,255,255,0.5);
|
||
}
|
||
|
||
[data-theme="light"] .sidebar-content:hover {
|
||
scrollbar-color: rgba(0,0,0,0.3) transparent;
|
||
}
|
||
|
||
[data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
|
||
background: rgba(0,0,0,0.3);
|
||
}
|
||
|
||
[data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(0,0,0,0.5);
|
||
}
|
||
|
||
.sidebar-chapter {
|
||
display: block;
|
||
padding: 8px 0;
|
||
color: #aaa;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||
transition: all 0.3s ease;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.sidebar-chapter:hover {
|
||
color: #667eea;
|
||
}
|
||
|
||
.sidebar-chapter.current {
|
||
color: #667eea;
|
||
font-weight: 600;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.sidebar {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.chapter-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.chapter-content {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.fixed-nav-content {
|
||
gap: 10px;
|
||
}
|
||
|
||
.nav-btn {
|
||
padding: 10px 15px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.scroll-buttons {
|
||
right: 10px;
|
||
bottom: 80px;
|
||
}
|
||
|
||
.scroll-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
.sidebar::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.sidebar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.sidebar::-webkit-scrollbar-thumb {
|
||
background: rgba(255,255,255,0.2);
|
||
border-radius: 2px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航 -->
|
||
<nav class="top-nav">
|
||
<div class="top-nav-content">
|
||
<a href="../index.html" class="nav-link">返回首页</a>
|
||
<button class="nav-link" id="themeToggle">切换主题</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
<header class="chapter-header">
|
||
<div class="chapter-number">Chapter 1</div>
|
||
<h1 class="chapter-title">洛兰的风</h1>
|
||
</header>
|
||
|
||
<article class="chapter-content">
|
||
<p>艾尔文防线的清晨，是从铁匠铺的锤声开始的。</p>
|
||
<p>"叮——叮——叮——"</p>
|
||
<p>林克睁开眼，陌生的天花板映入眼帘。木质的房梁，斑驳的墙壁，还有一股淡淡的薰衣草香味。</p>
|
||
<p>他试图坐起身，左肩却传来一阵剧痛。</p>
|
||
<p>"别动，你的伤口还没愈合。"</p>
|
||
<p>清甜的声音从门口传来。林克转头，看到一个少女端着水盆走进来。她有着一头柔顺的棕色长发，眼睛像是春日的湖水，清澈而温暖。</p>
|
||
<p>"你是……"</p>
|
||
<p>"我叫赛丽亚。"少女将毛巾浸湿，轻轻敷在他的额头上，"昨天你在洛兰森林里晕倒了，是一位路过的剑士把你送到这里的。"</p>
|
||
<p>林克努力回忆。</p>
|
||
<p>他从虚祖出发，一路向西，穿越了大半个阿拉德大陆。最后来到这个叫艾尔文防线的地方，听说是冒险者的聚集地。然后……他在一个叫洛兰的地方迷路了，遇到了一群绿皮怪物——哥布林。</p>
|
||
<p>那些家伙比他想象中更难对付。数量众多，阴险狡诈，还会设陷阱。他打倒了五六只，但左肩被一只哥布林的短刀划开了一道口子。</p>
|
||
<p>失血过多，最后他晕倒了。</p>
|
||
<p>"那位剑士呢？"林克问。</p>
|
||
<p>"他放下你就走了，只说让你伤好后去一趟铁匠铺。"赛丽亚收起毛巾，露出一个温柔的笑容，"不过他说了一句话，让我很好奇。"</p>
|
||
<p>"什么话？"</p>
|
||
<p>"他说……"赛丽亚学着那人的低沉嗓音，"'这小子，和当年的我很像。'"</p>
|
||
<p>林克愣住了。</p>
|
||
<p>和当年的他很像？那位剑士是谁？</p>
|
||
<p>---</p>
|
||
<p>三天后，林克的伤好得差不多了。</p>
|
||
<p>赛丽亚的旅馆虽然简陋，但收拾得很干净。这三天里，他每天在赛丽亚的照料下养伤，听她说着艾尔文防线的事。</p>
|
||
<p>这里是贝尔玛尔公国和德洛斯帝国交界的前线，常年有冒险者来往。最近格兰之森的怪物变得躁动不安，不少新手冒险者都在这里丢了性命。</p>
|
||
<p>"你也是从外面来的冒险者吗？"赛丽亚一边擦拭柜台，一边问道。</p>
|
||
<p>"算是吧。"林克看着自己的左手，那上面缠着厚厚的绷带。</p>
|
||
<p>他的左手，和别人不一样。</p>
|
||
<p>从记事起，他的左手就是血红色的，皮肤下仿佛有什么东西在蠕动。村里的人说这是诅咒，是不祥之兆。他从小就被视为怪物，被驱逐，被孤立。</p>
|
||
<p>直到三年前，一位云游的剑士路过他的村庄。</p>
|
||
<p>"这是鬼手。"那位剑士说，"被卡赞诅咒的手臂，拥有鬼神之力的同时，也会被诅咒侵蚀。"</p>
|
||
<p>"我会变成怪物吗？"</p>
|
||
<p>"那取决于你。"剑士说，"力量本身没有善恶，关键在于使用它的心。如果你愿意，我可以教你剑术。用剑，来掌控这份力量。"</p>
|
||
<p>那位剑士，叫阿甘左。</p>
|
||
<p>三年了，林克一直在寻找阿甘左的踪迹。听说他最后出现在艾尔文防线附近，所以他才一路追寻到这里。</p>
|
||
<p>"林克？"赛丽亚的声音将他拉回现实。</p>
|
||
<p>"啊，抱歉。"他收回思绪，"你说铁匠铺？"</p>
|
||
<p>"嗯，那位剑士让你伤好后去一趟。"赛丽亚指着门外，"出门左转，走到底就是林纳斯大叔的铁匠铺。"</p>
|
||
<p>---</p>
|
||
<p>铁匠铺里热气腾腾。</p>
|
||
<p>一个中年男人正在炉台前打铁，肌肉虬结的手臂挥舞着铁锤，每一次落下都溅起耀眼的火星。</p>
|
||
<p>"你就是林克？"男人头也不抬地问。</p>
|
||
<p>"是。"</p>
|
||
<p>"阿甘左交代过了。"林纳斯放下铁锤，擦了擦额头的汗水，转过身来。他脸上有一道疤，从左眉延伸到颧骨，看起来经历了不少风浪。</p>
|
||
<p>"那家伙让我给你准备一把武器。"林纳斯走到货架前，抽出一把太刀，"试试这个。"</p>
|
||
<p>刀身修长，刀刃锋利，握在手中有一种踏实的重量感。</p>
|
||
<p>"好刀。"林克由衷赞叹。</p>
|
||
<p>"算你有眼光。"林纳斯笑了笑，"这刀叫'霜刃'，是我年轻时用的家伙。现在给你了，别辱没了它。"</p>
|
||
<p>林克郑重地接过刀："多谢。"</p>
|
||
<p>"先别急着谢。"林纳斯的表情严肃起来，"阿甘左让我给你带句话——'想要掌控鬼手，光靠意志是不够的。去洛兰吧，只有战斗，才能让你真正理解这份力量。'"</p>
|
||
<p>林克握紧刀柄。</p>
|
||
<p>三年了，他终于又听到了这个名字。</p>
|
||
<p>"他还在艾尔文防线吗？"林克急切地问。</p>
|
||
<p>林纳斯摇摇头："三天前就走了，说是要去调查格兰之森的异动。"他顿了顿，"不过他说了，如果你能通过洛兰的试炼，你们会再见面的。"</p>
|
||
<p>---</p>
|
||
<p>回到旅馆，林克收拾好东西，准备再次前往洛兰。</p>
|
||
<p>"又要去吗？"赛丽亚有些担心，"你身上的伤刚好……"</p>
|
||
<p>"没事。"林克将霜刃系在腰间，"这是必经之路。"</p>
|
||
<p>赛丽亚沉默了一会儿，从柜台下面拿出一个小布袋："这是一些干粮和药水，你带着。"</p>
|
||
<p>林克愣了一下。</p>
|
||
<p>"我……"</p>
|
||
<p>"艾尔文防线很少有冒险者会回来跟我道别。"赛丽亚轻声说，"大多数人都是一去不复返。你……要小心。"</p>
|
||
<p>林克看着她清澈的眼睛，心中涌起一股暖意。</p>
|
||
<p>"我会回来的。"他说，"等我通过试炼，回来请你吃饭。"</p>
|
||
<p>赛丽亚笑了，像是春日里绽放的花朵。</p>
|
||
<p>"一言为定。"</p>
|
||
<p>---</p>
|
||
<p>洛兰森林比林克记忆中更加阴森。</p>
|
||
<p>阳光被浓密的树冠遮挡，只有零星的光斑落在地面上。空气中弥漫着腐朽和潮湿的味道，偶尔能听到远处传来的奇怪声响。</p>
|
||
<p>林克握紧霜刃，小心翼翼地前进。</p>
|
||
<p>"嘎——"</p>
|
||
<p>突然，一只绿皮怪物从灌木丛中窜出，挥舞着短刀向他砍来！</p>
|
||
<p>哥布林！</p>
|
||
<p>林克侧身躲过，反手一刀斩出。霜刃划破空气，在哥布林的胸口留下一道深深的伤口。</p>
|
||
<p>"叽叽叽——！"</p>
|
||
<p>受伤的哥布林发出刺耳的尖叫，更多的绿皮怪物从四面八方涌来。</p>
|
||
<p>五只、六只、七只……</p>
|
||
<p>林克的心跳加速。他能感觉到，左手在颤抖，绷带下的鬼手开始发烫。</p>
|
||
<p>不，现在还不能用那股力量……</p>
|
||
<p>他咬紧牙关，挥舞霜刃迎战。一只、两只、三只……哥布林的数量太多，他渐渐开始力不从心。</p>
|
||
<p>"叽叽！"</p>
|
||
<p>一只哥布林从侧面偷袭，短刀直刺他的腰间！</p>
|
||
<p>林克勉强闪躲，但动作慢了一步，刀锋在他的肋下划开一道口子。</p>
|
||
<p>鲜血涌出，疼痛让他的动作更加迟缓。</p>
|
||
<p>更多的哥布林围了上来，眼中闪烁着残忍的光芒。</p>
|
||
<p>难道……就要死在这里了吗？</p>
|
||
<p>就在此时，一股灼热的力量从他的左手涌出，瞬间蔓延至全身。</p>
|
||
<p>血红色的光芒从绷带下透出，林克感觉自己的意识正在被什么东西吞噬……</p>
|
||
<p>不，不能失控……</p>
|
||
<p>他用尽最后的意志力，将那股力量压了下去。</p>
|
||
<p>但哥布林们已经发起了最后的进攻。</p>
|
||
<p>"住手。"</p>
|
||
<p>低沉的声音从森林深处传来。</p>
|
||
<p>一道身影如鬼魅般闪现，银色的剑光划破空气。那只冲向林克的哥布林瞬间被斩成两半！</p>
|
||
<p>其他哥布林见状，吓得四散逃窜。</p>
|
||
<p>林克艰难地抬起头，看到了那个人的脸。</p>
|
||
<p>黑色的长发，冷峻的面容，还有那双仿佛看透一切的眼睛。</p>
|
||
<p>"阿……甘左……？"</p>
|
||
<p>来人收起长剑，低头看着他。</p>
|
||
<p>"三年不见，你还是这么狼狈。"</p>
|
||
<p>林克想说什么，但失血过多让他眼前一黑，晕了过去。</p>
|
||
<p>昏迷前，他听到阿甘左轻声说道：</p>
|
||
<p>"鬼手的力量，不是压制，而是驾驭。小子，你要学的东西，还很多。"</p>
|
||
<p>---</p>
|
||
<p>（第一章完）</p>
|
||
</article>
|
||
</div>
|
||
|
||
<!-- 固定底部导航 -->
|
||
<nav class="fixed-nav">
|
||
<div class="fixed-nav-content">
|
||
<a href="#" class="nav-btn disabled">上一章</a>
|
||
<a href="../chapters.html" class="nav-btn">目录</a>
|
||
<a href="chapter-2.html" class="nav-btn ">下一章</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 右侧滚动按钮 -->
|
||
<div class="scroll-buttons">
|
||
<button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
|
||
<button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
|
||
</div>
|
||
|
||
<!-- 侧边栏章节导航 -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-title">章节导航</div>
|
||
<div class="sidebar-content" id="sidebarContent">
|
||
<a href="chapter-1.html" class="sidebar-chapter current">第1章：洛兰的风</a>
|
||
<a href="chapter-2.html" class="sidebar-chapter">第2章：洛兰深处</a>
|
||
<a href="chapter-3.html" class="sidebar-chapter">第3章：幽暗密林</a>
|
||
<a href="chapter-4.html" class="sidebar-chapter">第4章：幽暗密林深处</a>
|
||
<a href="chapter-5.html" class="sidebar-chapter">第5章：雷鸣废墟</a>
|
||
<a href="chapter-6.html" class="sidebar-chapter">第6章：格拉卡</a>
|
||
<a href="chapter-7.html" class="sidebar-chapter">第7章：烈焰格拉卡</a>
|
||
<a href="chapter-8.html" class="sidebar-chapter">第8章：冰霜幽暗密林</a>
|
||
<a href="chapter-9.html" class="sidebar-chapter">第9章：转职之路</a>
|
||
<a href="chapter-10.html" class="sidebar-chapter">第10章：暗黑雷鸣废墟</a>
|
||
<a href="chapter-11.html" class="sidebar-chapter">第11章：剑魂转职仪式</a>
|
||
<a href="chapter-12.html" class="sidebar-chapter">第12章：西海岸</a>
|
||
<a href="chapter-13.html" class="sidebar-chapter">第13章：龙人之塔</a>
|
||
<a href="chapter-14.html" class="sidebar-chapter">第14章：人偶玄关</a>
|
||
<a href="chapter-15.html" class="sidebar-chapter">第15章：石巨人塔</a>
|
||
<a href="chapter-16.html" class="sidebar-chapter">第16章：黑暗玄廊</a>
|
||
<a href="chapter-17.html" class="sidebar-chapter">第17章：城主宫殿</a>
|
||
<a href="chapter-18.html" class="sidebar-chapter">第18章：番外·悬空城</a>
|
||
<a href="chapter-19.html" class="sidebar-chapter">第19章：天帷巨兽·神殿外围</a>
|
||
<a href="chapter-20.html" class="sidebar-chapter">第20章：树精丛林</a>
|
||
<a href="chapter-21.html" class="sidebar-chapter">第21章：炼狱</a>
|
||
<a href="chapter-22.html" class="sidebar-chapter">第22章：西海岸的闲暇</a>
|
||
<a href="chapter-23.html" class="sidebar-chapter">第23章：极昼</a>
|
||
<a href="chapter-24.html" class="sidebar-chapter">第24章：第一脊椎</a>
|
||
<a href="chapter-25.html" class="sidebar-chapter">第25章：赫顿玛尔的准备</a>
|
||
<a href="chapter-26.html" class="sidebar-chapter">第26章：第二脊椎</a>
|
||
<a href="chapter-27.html" class="sidebar-chapter">第27章：重逢的温柔</a>
|
||
<a href="chapter-28.html" class="sidebar-chapter">第28章：暗精灵的委托</a>
|
||
<a href="chapter-29.html" class="sidebar-chapter">第29章：阿法利亚营地</a>
|
||
<a href="chapter-30.html" class="sidebar-chapter">第30章：浅栖之地</a>
|
||
<a href="chapter-31.html" class="sidebar-chapter">第31章：蜘蛛洞穴</a>
|
||
<a href="chapter-32.html" class="sidebar-chapter">第32章：克伦特的委托</a>
|
||
<a href="chapter-33.html" class="sidebar-chapter">第33章：暗精灵墓地·左翼守卫</a>
|
||
<a href="chapter-34.html" class="sidebar-chapter">第34章：暗精灵墓地·剩余三将军</a>
|
||
</div>
|
||
</aside>
|
||
|
||
<script>
|
||
// 记录阅读进度
|
||
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
|
||
if (!readChapters.includes(1)) {
|
||
readChapters.push(1);
|
||
localStorage.setItem('readChapters', JSON.stringify(readChapters));
|
||
}
|
||
|
||
// 主题切换
|
||
const themeToggle = document.getElementById('themeToggle');
|
||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||
themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
|
||
|
||
themeToggle.addEventListener('click', () => {
|
||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||
document.documentElement.setAttribute('data-theme', newTheme);
|
||
localStorage.setItem('theme', newTheme);
|
||
themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
|
||
});
|
||
|
||
// 滚动到顶部
|
||
document.getElementById('scrollTop').addEventListener('click', () => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
|
||
// 滚动到底部
|
||
document.getElementById('scrollBottom').addEventListener('click', () => {
|
||
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
|
||
});
|
||
|
||
// 页面加载时，侧边栏自动滚动到当前章节
|
||
window.addEventListener('load', () => {
|
||
const sidebarContent = document.getElementById('sidebarContent');
|
||
const currentChapter = sidebarContent.querySelector('.current');
|
||
if (currentChapter) {
|
||
currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |