f8894dd3f3
- updateNavButtons: 改用数组索引查找，而非简单的+1/-1 - updateSidebarHighlight: 使用parseFloat比较章节ID - updateMobileTOCHighlight: 使用parseFloat比较章节ID - 更新版本号强制刷新缓存
605 lines
28 KiB
HTML
605 lines
28 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 22</div>
|
||
<h1 class="chapter-title">西海岸的闲暇</h1>
|
||
</header>
|
||
|
||
<article class="chapter-content">
|
||
<p>从炼狱的高温地狱中脱身，林克一行人决定暂时返回西海岸休整。</p>
|
||
<p>天帷巨兽的冒险比想象中更加凶险，连续的战斗让每个人都身心俱疲。更重要的是，林克感觉到自己即将迎来一次突破——那种剑士在突破瓶颈前特有的预感。</p>
|
||
<p>"我们需要准备更充分。"林克对赛丽亚说，"接下来的极昼区域，罗特斯的力量会更强。"</p>
|
||
<p>赛丽亚点点头："而且我也需要补充一些魔法材料。连续的治愈术消耗了我的储备。"</p>
|
||
<p>奥菲利亚决定留在天帷巨兽的入口营地，继续照顾那些从GBL教控制中解放出来的信徒。维加则选择跟随林克，希望能为过去的错误赎罪。</p>
|
||
<p>"西海岸吗……"维加喃喃自语，"好久没去过了。"</p>
|
||
|
||
<p>---</p>
|
||
|
||
<p>回到西海岸，阳光明媚的海滨城市与炼狱的恐怖形成了鲜明对比。</p>
|
||
<p>海风带着咸湿的气息，街道上的行人熙熙攘攘，完全感受不到天帷巨兽上那种压抑的氛围。</p>
|
||
<p>"终于回来了……"赛丽亚深深吸了一口气，"还是这里的空气舒服。"</p>
|
||
<p>林克笑着点头。连续在阴暗危险的环境中战斗，突然回到这种平和的地方，让人有种不真实的感觉。</p>
|
||
<p>"先去找莎兰吧。"他说，"她可能会知道如何进一步强化晨曦。"</p>
|
||
<p>魔法公会的大厅里，莎兰正在研究一堆古老的卷轴。看到林克和赛丽亚进来，她露出了惊喜的表情。</p>
|
||
<p>"你们回来了！"莎兰放下卷轴，"我听说了天帷巨兽的事情。GBL教……竟然被使徒控制了？"</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>诺顿的炼金术店里，老炼金术师正在摆弄一堆奇怪的仪器。看到林克带回来的GBL教研究资料，他的眼睛立刻亮了起来。</p>
|
||
<p>"这是……GBL教的实验记录？"诺顿激动地翻阅着，"使徒细胞融合实验？天啊，他们真的做了这种疯狂的事！"</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>Lv.35，拔刀斩。</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="chapter-21.html" class="nav-btn ">上一章</a>
|
||
<a href="../chapters.html" class="nav-btn">目录</a>
|
||
<a href="chapter-23.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">第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 current">第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(22)) {
|
||
readChapters.push(22);
|
||
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> |